settings.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. ( function( $ ) {
  2. FLBuilder.registerModuleHelper( 'search', {
  3. init: function()
  4. {
  5. var form = $( '.fl-builder-settings:visible' ),
  6. icon = form.find( 'input[name=btn_icon]' ),
  7. btnAlign = form.find( 'input[name=btn_align]' );
  8. $( 'input[name=btn_bg_color]' ).on( 'change', this._previewButtonBackground );
  9. $( 'select[name=layout]' ).on( 'change', $.proxy( this._toggleBtnSettings, this ) );
  10. btnAlign.on( 'change', this._previewButtonAlign );
  11. icon.on( 'change', this._flipSettings );
  12. this._toggleBtnSettings();
  13. this._flipSettings();
  14. },
  15. _previewButtonBackground: function( e )
  16. {
  17. var preview = FLBuilder.preview,
  18. selector = preview.classes.node + ' a.fl-button, ' + preview.classes.node + ' a.fl-button:visited',
  19. form = $( '.fl-builder-settings:visible' ),
  20. style = form.find( 'select[name=btn_style]' ).val(),
  21. bgColor = form.find( 'input[name=btn_bg_color]' ).val();
  22. if ( 'flat' === style ) {
  23. if ( '' !== bgColor && bgColor.indexOf( 'rgb' ) < 0 ) {
  24. bgColor = '#' + bgColor;
  25. }
  26. preview.updateCSSRule( selector, 'background-color', bgColor );
  27. preview.updateCSSRule( selector, 'border-color', bgColor );
  28. } else {
  29. preview.delayPreview( e );
  30. }
  31. },
  32. _toggleBtnSettings: function()
  33. {
  34. var form = $( '.fl-builder-settings:visible' ),
  35. layout = form.find( 'select[name=layout]' ).val(),
  36. btnAction = form.find( 'select[name=btn_action]' ),
  37. btnToggles = btnAction.data('toggle'),
  38. fields = [];
  39. if( 'undefined' === typeof btnToggles ) {
  40. return;
  41. }
  42. for( var i in btnToggles ){
  43. if( 'undefined' === typeof btnToggles[i].fields ) {
  44. return;
  45. }
  46. fields = btnToggles[i].fields.map(function(val, i){
  47. return '#fl-field-' + val;
  48. });
  49. if( 'button' === layout && i === btnAction.val() ){
  50. $( fields.join(', ') ).show();
  51. }
  52. else {
  53. $( fields.join(', ') ).hide();
  54. }
  55. }
  56. },
  57. _previewButtonAlign: function( e )
  58. {
  59. var preview = FLBuilder.preview,
  60. selector = preview.classes.node + ' .fl-search-form-wrap, ' + preview.classes.node + ' .fl-search-form-fields',
  61. property = 'justify-content',
  62. form = $( '.fl-builder-settings:visible' ),
  63. layout = form.find( 'select[name=layout]' ).val(),
  64. bgAlign = form.find( 'input[name=btn_align]' ).val();
  65. if ( 'stacked' == layout ) {
  66. selector = preview.classes.node + ' .fl-button-wrap';
  67. property = 'text-align';
  68. }
  69. preview.updateCSSRule( selector, property, bgAlign );
  70. },
  71. _flipSettings: function() {
  72. var form = $( '.fl-builder-settings' ),
  73. icon = form.find( 'input[name=btn_icon]' );
  74. if ( -1 !== icon.val().indexOf( 'fad fa') ) {
  75. $('#fl-field-btn_duo_color1').show();
  76. $('#fl-field-btn_duo_color2').show();
  77. $('#fl-builder-settings-section-button_icon_color').hide();
  78. } else {
  79. $('#fl-field-btn_duo_color1').hide();
  80. $('#fl-field-btn_duo_color2').hide();
  81. $('#fl-builder-settings-section-button_icon_color').show();
  82. }
  83. },
  84. });
  85. })(jQuery);