| @@ -1,1035 +1,823 @@ | ||
| 1 | -(function( $, exports ) { | |
| 2 | - $( document ).ready( function() { | |
| 3 | - // when the customizer is ready prepare our fields events | |
| 4 | - wp.customize.bind( 'ready', function() { | |
| 5 | - var api = this, | |
| 6 | - timeout = null; | |
| 1 | +/** @namespace customify */ | |
| 2 | +window.customify = window.customify || parent.customify || {}; | |
| 7 | 3 | |
| 8 | - // add ace editors | |
| 9 | - $( '.customify_ace_editor' ).each( function( key, el ) { | |
| 10 | - var id = $( this ).attr( 'id' ), | |
| 11 | - css_editor = ace.edit( id ); | |
| 4 | +(function ($, customify, wp) { | |
| 5 | + const api = wp.customize | |
| 6 | + const $window = $(window) | |
| 7 | + const $document = $(document) | |
| 8 | + let timeout = null | |
| 12 | 9 | |
| 13 | - var editor_type = $( this ).data( 'editor_type' ); | |
| 14 | - // init the ace editor | |
| 15 | - css_editor.setTheme( "ace/theme/github" ); | |
| 16 | - css_editor.getSession().setMode( "ace/mode/" + editor_type ); | |
| 10 | + // when the customizer is ready prepare our fields events | |
| 11 | + api.bind('ready', function () { | |
| 17 | 12 | |
| 18 | - // hide the textarea and enable the ace editor | |
| 19 | - var textarea = $( '#' + id + '_textarea' ).hide(); | |
| 20 | - css_editor.getSession().setValue( textarea.val() ); | |
| 13 | + // Create a stack of callbacks bound to parent settings to be able to unbind them | |
| 14 | + // when altering the connected_fields attribute. | |
| 15 | + if (typeof customify.connectedFieldsCallbacks === 'undefined') { | |
| 16 | + customify.connectedFieldsCallbacks = {} | |
| 17 | + } | |
| 21 | 18 | |
| 22 | - // each time a change is triggered start a timeout of 1,5s and when is finished refresh the previewer | |
| 23 | - // if the user types faster than this delay then reset it | |
| 24 | - css_editor.getSession().on( 'change', function( e ) { | |
| 25 | - if ( timeout !== null ) { | |
| 26 | - clearTimeout( timeout ); | |
| 27 | - timeout = null; | |
| 28 | - } else { | |
| 29 | - timeout = setTimeout( function() { | |
| 30 | - //var state = css_editor.session.getState(); | |
| 31 | - textarea.val( css_editor.getSession().getValue() ); | |
| 32 | - textarea.trigger( 'change' ); | |
| 33 | - }, 1500 ); | |
| 34 | - } | |
| 35 | - } ); | |
| 36 | - } ); | |
| 19 | + // Initialize ACE editors. | |
| 20 | + handleAceEditors() | |
| 37 | 21 | |
| 38 | - // simple select2 field | |
| 39 | - $( '.customify_select2' ).select2(); | |
| 22 | + // Initialize simple select2 fields. | |
| 23 | + $('.customify_select2').select2() | |
| 40 | 24 | |
| 41 | - prepare_typography_field(); | |
| 25 | + // Initialize font fields. | |
| 26 | + customify.fontFields.init() | |
| 42 | 27 | |
| 43 | - /** | |
| 44 | - * Make the customizer save on CMD/CTRL+S action | |
| 45 | - * This is awesome!!! | |
| 46 | - */ | |
| 47 | - $( window ).bind( 'keydown', function( event ) { | |
| 48 | - if ( event.ctrlKey || event.metaKey ) { | |
| 49 | - switch ( String.fromCharCode( event.which ).toLowerCase() ) { | |
| 50 | - case 's': | |
| 51 | - event.preventDefault(); | |
| 52 | - api.previewer.save(); | |
| 53 | - break; | |
| 54 | - } | |
| 55 | - } | |
| 56 | - } ); | |
| 28 | + // For each range input add a value preview output. | |
| 29 | + $('.accordion-section-content[id*="' + customify.config.options_name + '"], #sub-accordion-section-style_manager_section').each(function () { | |
| 30 | + // Initialize range fields logic | |
| 31 | + handleRangeFields(this) | |
| 32 | + }) | |
| 57 | 33 | |
| 58 | - // for each range input add a value preview output | |
| 59 | - $( 'input[type="range"]' ).each( function() { | |
| 60 | - var $clone = $( this ).clone(); | |
| 34 | + // Handle presets (legacy). | |
| 35 | + handlePresets() | |
| 61 | 36 | |
| 62 | - $clone | |
| 63 | - .attr( 'type', 'number' ) | |
| 64 | - .attr( 'class', 'range-value' ); | |
| 37 | + // Initialize custom background fields. | |
| 38 | + customifyBackgroundJsControl.init() | |
| 65 | 39 | |
| 66 | - $( this ).after( $clone ); | |
| 40 | + setTimeout(function () { | |
| 41 | + customifyFoldingFields() | |
| 42 | + }, 1000) | |
| 67 | 43 | |
| 68 | - $( this ).on( 'input', function() { | |
| 69 | - $( this ).siblings( '.range-value' ).val( $( this ).val() ); | |
| 70 | - } ); | |
| 71 | - } ); | |
| 44 | + // Handle reset buttons | |
| 45 | + handleResetButtons() | |
| 72 | 46 | |
| 73 | - if ( $( 'button[data-action="reset_customify"]' ).length > 0 ) { | |
| 74 | - // reset_button | |
| 75 | - $( document ).on( 'click', '#customize-control-reset_customify button', function( ev ) { | |
| 76 | - ev.preventDefault(); | |
| 47 | + // Handle the section tabs (ex: Layout | Fonts | Colors) | |
| 48 | + handleSectionTabs() | |
| 77 | 49 | |
| 78 | - var iAgree = confirm( 'Do you really want to reset to defaults all the fields? Watch out, this will reset all your Customify options and will save them!' ); | |
| 50 | + // Bind any connected fields, except those in the Style Manager. | |
| 51 | + // Those are handled by the appropriate Style Manager component (Color Palettes, Font Palettes, etc ). | |
| 52 | + bindConnectedFields() | |
| 79 | 53 | |
| 80 | - if ( !iAgree ) { | |
| 81 | - return; | |
| 82 | - } | |
| 54 | + // Handle the preview iframe. | |
| 55 | + handlePreviewIframe() | |
| 83 | 56 | |
| 84 | - $.each( api.settings.controls, function( key, ctrl ) { | |
| 85 | - var id = key.replace( '_control', '' ); | |
| 86 | - var setting = customify_settings.settings[id]; | |
| 57 | + // Sometimes a php save may be needed. Trigger it if the appropiate URL var is present. | |
| 58 | + if (getUrlVar('save_customizer_once')) { | |
| 59 | + api.previewer.save() | |
| 60 | + } | |
| 61 | + }) | |
| 87 | 62 | |
| 88 | - if ( ! _.isUndefined( setting ) && ! _.isUndefined( setting.default ) ) { | |
| 63 | + /** | |
| 64 | + * Handle the ACE editor fields. | |
| 65 | + */ | |
| 66 | + function handleAceEditors () { | |
| 67 | + $('.customify_ace_editor').each(function (key, el) { | |
| 68 | + const id = $(this).attr('id'), | |
| 69 | + cssEditorInstance = ace.edit(id) | |
| 89 | 70 | |
| 90 | - var start_pos = id.indexOf( '[' ) + 1; | |
| 91 | - var end_pos = id.indexOf( ']', start_pos ); | |
| 71 | + const editor_type = $(this).data('editor_type') | |
| 72 | + // init the ace editor | |
| 73 | + cssEditorInstance.setTheme('ace/theme/github') | |
| 74 | + cssEditorInstance.getSession().setMode('ace/mode/' + editor_type) | |
| 92 | 75 | |
| 93 | - id = id.substring( start_pos, end_pos ); | |
| 94 | - api_set_setting_value( id, setting.default ); | |
| 95 | - } | |
| 96 | - } ); | |
| 76 | + // hide the textarea and enable the ace editor | |
| 77 | + const textarea = $('#' + id + '_textarea').hide() | |
| 78 | + cssEditorInstance.getSession().setValue(textarea.val()) | |
| 97 | 79 | |
| 98 | - api.previewer.save(); | |
| 99 | - } ); | |
| 80 | + // each time a change is triggered start a timeout of 1,5s and when is finished refresh the previewer | |
| 81 | + // if the user types faster than this delay then reset it | |
| 82 | + cssEditorInstance.getSession().on('change', function (event) { | |
| 83 | + if (timeout !== null) { | |
| 84 | + clearTimeout(timeout) | |
| 85 | + timeout = null | |
| 86 | + } else { | |
| 87 | + timeout = setTimeout(function () { | |
| 88 | + textarea.val(cssEditorInstance.getSession().getValue()) | |
| 89 | + textarea.trigger('change', ['customify']) | |
| 90 | + }, 1500) | |
| 91 | + } | |
| 92 | + }) | |
| 93 | + }) | |
| 94 | + } | |
| 100 | 95 | |
| 101 | - // add a reset button for each panel | |
| 102 | - $( '.panel-meta' ).each( function( el, key ) { | |
| 103 | - var container = $( this ).parents( '.control-panel' ), | |
| 104 | - id = container.attr( 'id' ), | |
| 105 | - panel_id = id.replace( 'accordion-panel-', '' ); | |
| 96 | + /** | |
| 97 | + * Handle the presets (legacy). | |
| 98 | + */ | |
| 99 | + function handlePresets () { | |
| 100 | + $('body').on('customify:preset-change', function (event) { | |
| 101 | + const data = $(event.target).data('options') | |
| 106 | 102 | |
| 103 | + if (!_.isUndefined(data)) { | |
| 104 | + $.each(data, function (settingID, value) { | |
| 105 | + apiSetSettingValue(settingID, value) | |
| 106 | + }) | |
| 107 | + } | |
| 108 | + }) | |
| 109 | + $document.on('change', 'select.js-customify-preset', function () { | |
| 110 | + const $source = $(this) | |
| 111 | + const $target = $source.children('[value="' + $source.val() + '"]') | |
| 112 | + $target.trigger('customify:preset-change') | |
| 113 | + }) | |
| 114 | + $document.on('click', '.js-customify-preset input', function () { | |
| 115 | + $(this).trigger('customify:preset-change') | |
| 116 | + }) | |
| 117 | + } | |
| 107 | 118 | |
| 108 | - $( this ).parent().append( '<button class="reset_panel button" data-panel="' + panel_id + '">Panel\'s defaults</button>' ); | |
| 109 | - } ); | |
| 119 | + const handleRangeFields = function (el) { | |
| 110 | 120 | |
| 111 | - // reset panel | |
| 112 | - $( document ).on( 'click', '.reset_panel', function( e ) { | |
| 113 | - e.preventDefault(); | |
| 121 | + // For each range input add a number field (for preview mainly - but it can also be used for input) | |
| 122 | + $(el).find('input[type="range"]').each(function () { | |
| 123 | + const $range = $(this) | |
| 124 | + let $number = $range.siblings('.range-value') | |
| 114 | 125 | |
| 115 | - var panel_id = $( this ).data( 'panel' ), | |
| 116 | - panel = api.panel( panel_id ), | |
| 117 | - sections = panel.sections(), | |
| 118 | - iAgree = confirm( "Do you really want to reset " + panel.params.title + "?" ); | |
| 126 | + if (!$number.length) { | |
| 127 | + $number = $range.clone() | |
| 119 | 128 | |
| 120 | - if ( !iAgree ) { | |
| 121 | - return; | |
| 122 | - } | |
| 123 | - if ( sections.length > 0 ) { | |
| 124 | - $.each( sections, function() { | |
| 125 | - //var settings = this.settings(); | |
| 126 | - var controls = this.controls(); | |
| 129 | + $number | |
| 130 | + .attr('type', 'number') | |
| 131 | + .attr('class', 'range-value') | |
| 132 | + .removeAttr('data-value_entry') | |
| 127 | 133 | |
| 128 | - if ( controls.length > 0 ) { | |
| 129 | - $.each( controls, function( key, ctrl ) { | |
| 130 | - var id = ctrl.id.replace( '_control', '' ), | |
| 131 | - setting = customify_settings.settings[id]; | |
| 134 | + if ($range.first().attr('id')) { | |
| 135 | + $number.attr('id', $range.first().attr('id') + '_number') | |
| 136 | + } | |
| 137 | + $number.insertAfter($range) | |
| 138 | + } | |
| 132 | 139 | |
| 133 | - if ( ! _.isUndefined( setting ) && ! _.isUndefined( setting.default ) ) { | |
| 140 | + function hasValidValue ($input) { | |
| 141 | + const min = $input.attr('min') | |
| 142 | + const max = $input.attr('max') | |
| 143 | + const value = $input.val() | |
| 134 | 144 | |
| 135 | - var start_pos = id.indexOf( '[' ) + 1, | |
| 136 | - end_pos = id.indexOf( ']', start_pos ); | |
| 145 | + if (typeof min !== 'undefined' && parseFloat(min) > parseFloat(value)) { | |
| 146 | + return false | |
| 147 | + } | |
| 137 | 148 | |
| 138 | - id = id.substring( start_pos, end_pos ); | |
| 139 | - api_set_setting_value( id, setting.default ); | |
| 140 | - } | |
| 141 | - } ); | |
| 142 | - } | |
| 143 | - } ); | |
| 144 | - } | |
| 145 | - } ); | |
| 149 | + return !(typeof max !== 'undefined' && parseFloat(max) < parseFloat(value)) | |
| 150 | + } | |
| 146 | 151 | |
| 147 | - //add reset section | |
| 148 | - $( '.accordion-section-content' ).each( function( el, key ) { | |
| 149 | - var section = $( this ).parent(), | |
| 150 | - section_id = section.attr( 'id' ); | |
| 152 | + // Put the value into the number field. | |
| 153 | + $range.on('input change', function (event) { | |
| 154 | + if (event.target.value === $number.val()) { | |
| 155 | + // Nothing to do if the values are identical. | |
| 156 | + return; | |
| 157 | + } | |
| 151 | 158 | |
| 152 | - if ( ( ( ! _.isUndefined( section_id ) ) ? section_id.indexOf( customify_settings.options_name ) : -1 ) === -1 ) { | |
| 153 | - return; | |
| 154 | - } | |
| 159 | + $number.val($range.val()) | |
| 160 | + }) | |
| 155 | 161 | |
| 156 | - if ( ! _.isUndefined( section_id ) && section_id.indexOf( 'accordion-section-' ) > -1 ) { | |
| 157 | - var id = section_id.replace( 'accordion-section-', '' ); | |
| 158 | - $( this ).prepend( '<button class="reset_section button" data-section="' + id + '">Section\'s defaults</button>' ); | |
| 159 | - } | |
| 160 | - } ); | |
| 162 | + // When clicking outside the number field or on Enter. | |
| 163 | + $number.on('blur keyup', function (event) { | |
| 164 | + if ('keyup' === event.type && event.keyCode !== 13) { | |
| 165 | + return | |
| 166 | + } | |
| 161 | 167 | |
| 162 | - // reset section event | |
| 163 | - $( document ).on( 'click', '.reset_section', function( e ) { | |
| 164 | - e.preventDefault(); | |
| 168 | + if (event.target.value === $range.val()) { | |
| 169 | + // Nothing to do if the values are identical. | |
| 170 | + return; | |
| 171 | + } | |
| 165 | 172 | |
| 166 | - var section_id = $( this ).data( 'section' ), | |
| 167 | - section = api.section( section_id ), | |
| 168 | - controls = section.controls(); | |
| 173 | + if (!hasValidValue($number)) { | |
| 174 | + $number.val($range.val()) | |
| 175 | + shake($number) | |
| 176 | + } else { | |
| 177 | + // Do not mark this trigger as being programmatically triggered by Customify since it is a result of a user input. | |
| 178 | + $range.val($number.val()).trigger('change') | |
| 179 | + } | |
| 180 | + }) | |
| 169 | 181 | |
| 170 | - var iAgree = confirm( "Do you really want to reset " + section.params.title + "?" ); | |
| 182 | + function shake ($field) { | |
| 183 | + $field.addClass('input-shake input-error') | |
| 184 | + $field.one('animationend', function () { | |
| 185 | + $field.removeClass('input-shake input-error') | |
| 186 | + }) | |
| 187 | + } | |
| 188 | + }) | |
| 189 | + } | |
| 171 | 190 | |
| 172 | - if ( !iAgree ) { | |
| 173 | - return; | |
| 174 | - } | |
| 191 | + /** | |
| 192 | + * Handle reset buttons in the Customizer. | |
| 193 | + */ | |
| 194 | + function handleResetButtons () { | |
| 195 | + const showResetButtons = $('button[data-action="reset_customify"]').length > 0 | |
| 175 | 196 | |
| 176 | - if ( controls.length > 0 ) { | |
| 177 | - $.each( controls, function( key, ctrl ) { | |
| 178 | - var id = ctrl.id.replace( '_control', '' ), | |
| 179 | - setting = customify_settings.settings[id]; | |
| 197 | + if (showResetButtons) { | |
| 198 | + createResetPanelButtons() | |
| 199 | + createResetSectionButtons() | |
| 180 | 200 | |
| 181 | - if ( ! _.isUndefined( setting ) && ! _.isUndefined( setting.default ) ) { | |
| 201 | + $document.on('click', '.js-reset-panel', onResetPanel) | |
| 202 | + $document.on('click', '.js-reset-section', onResetSection) | |
| 203 | + $document.on('click', '#customize-control-reset_customify button', onReset) | |
| 204 | + } | |
| 205 | + } | |
| 182 | 206 | |
| 183 | - var start_pos = id.indexOf( '[' ) + 1, | |
| 184 | - end_pos = id.indexOf( ']', start_pos ); | |
| 207 | + function createResetPanelButtons () { | |
| 185 | 208 | |
| 186 | - id = id.substring( start_pos, end_pos ); | |
| 187 | - api_set_setting_value( id, setting.default ); | |
| 188 | - } | |
| 189 | - } ); | |
| 190 | - } | |
| 191 | - } ); | |
| 192 | - } | |
| 209 | + $('.panel-meta').each(function (i, obj) { | |
| 210 | + const $this = $(obj) | |
| 211 | + const container = $this.parents('.control-panel') | |
| 212 | + let id = container.attr('id') | |
| 193 | 213 | |
| 194 | - $( document ).on( 'change', '.customize-control input.range-value', function() { | |
| 195 | - var range = $( this ).siblings( 'input[type="range"]' ); | |
| 196 | - range.val( $( this ).val() ); | |
| 197 | - } ); | |
| 214 | + if (typeof id !== 'undefined') { | |
| 215 | + id = id.replace('sub-accordion-panel-', '') | |
| 216 | + id = id.replace('accordion-panel-', '') | |
| 217 | + const $buttonWrapper = $('<li class="customize-control customize-control-reset"></li>') | |
| 218 | + const $button = $('<button class="button js-reset-panel" data-panel="' + id + '"></button>') | |
| 198 | 219 | |
| 199 | - $( document ).on( 'change', '.customify_typography_font_subsets', function( ev ) { | |
| 220 | + $button.text(customify.l10n.panelResetButton).appendTo($buttonWrapper) | |
| 221 | + $this.parent().append($buttonWrapper) | |
| 222 | + } | |
| 223 | + }) | |
| 224 | + } | |
| 200 | 225 | |
| 201 | - var $input = $( this ).parents( '.options' ).siblings( '.customify_typography' ).children( '.customify_typography_values' ), | |
| 202 | - current_val = $input.val(); | |
| 226 | + function createResetSectionButtons () { | |
| 227 | + $('.accordion-section-content').each(function (el, key) { | |
| 228 | + const $this = $(this) | |
| 229 | + const sectionID = $this.attr('id') | |
| 203 | 230 | |
| 204 | - current_val = JSON.parse( decodeURIComponent( current_val ) ); | |
| 231 | + if (_.isUndefined(sectionID) || sectionID.indexOf(customify.config.options_name) === -1) { | |
| 232 | + return | |
| 233 | + } | |
| 205 | 234 | |
| 206 | - //maybe the selected option holds a JSON in its value | |
| 207 | - current_val.selected_subsets = maybeJsonParse( $( this ).val() ); | |
| 235 | + const id = sectionID.replace('sub-accordion-section-', '') | |
| 236 | + const $button = $('<button class="button js-reset-section" data-section="' + id + '"></button>') | |
| 237 | + const $buttonWrapper = $('<li class="customize-control customize-control-reset"></li>') | |
| 208 | 238 | |
| 209 | - $input.val( encodeURIComponent( JSON.stringify( current_val ) ) ); | |
| 239 | + $button.text(customify.l10n.sectionResetButton) | |
| 240 | + $buttonWrapper.append($button) | |
| 210 | 241 | |
| 211 | - $input.trigger( 'change' ); | |
| 212 | - } ); | |
| 242 | + $this.append($buttonWrapper) | |
| 243 | + }) | |
| 244 | + } | |
| 213 | 245 | |
| 214 | - $( document ).on( 'change', '.customify_typography_font_weight', function( ev ) { | |
| 246 | + function onReset (ev) { | |
| 247 | + ev.preventDefault() | |
| 215 | 248 | |
| 216 | - var $input = $( this ).parents( '.options' ).siblings( '.customify_typography' ).children( '.customify_typography_values' ), | |
| 217 | - current_val = $input.val(); | |
| 249 | + const iAgree = confirm(customify.l10n.resetGlobalConfirmMessage) | |
| 218 | 250 | |
| 219 | - current_val = maybeJsonParse( current_val ); | |
| 220 | - // @todo currently the font weight selector works for one value only | |
| 221 | - // maybe make this a multiselect | |
| 251 | + if (!iAgree) { | |
| 252 | + return | |
| 253 | + } | |
| 222 | 254 | |
| 223 | - //maybe the selected option holds a JSON in its value | |
| 224 | - current_val.selected_variants = {0: maybeJsonParse( $( this ).val() ) }; | |
| 255 | + $.each(api.settings.controls, function (key, ctrl) { | |
| 256 | + const settingID = key.replace('_control', '') | |
| 257 | + const setting = customify.config.settings[settingID] | |
| 225 | 258 | |
| 226 | - $input.val( encodeURIComponent( JSON.stringify( current_val ) ) ); | |
| 227 | - $input.trigger( 'change' ); | |
| 228 | - } ); | |
| 259 | + if (!_.isUndefined(setting) && !_.isUndefined(setting.default)) { | |
| 260 | + apiSetSettingValue(settingID, setting.default) | |
| 261 | + } | |
| 262 | + }) | |
| 229 | 263 | |
| 230 | - // presets | |
| 231 | - $( document ).on( 'change', '.customify_preset.select', function() { | |
| 232 | - var api = wp.customize, | |
| 233 | - this_option = $( this ).children( '[value="' + $( this ).val() + '"]' ), | |
| 234 | - data = $( this_option ).data( 'options' ); | |
| 264 | + api.previewer.save() | |
| 265 | + } | |
| 235 | 266 | |
| 236 | - if ( ! _.isUndefined( data ) ) { | |
| 237 | - $.each( data, function( id, value ) { | |
| 238 | - api_set_setting_value( id, value ); | |
| 239 | - } ); | |
| 240 | - } | |
| 267 | + function onResetPanel (e) { | |
| 268 | + e.preventDefault() | |
| 241 | 269 | |
| 242 | - api.previewer.refresh(); | |
| 243 | - } ); | |
| 270 | + const panelID = $(this).data('panel'), | |
| 271 | + panel = api.panel(panelID), | |
| 272 | + sections = panel.sections(), | |
| 273 | + iAgree = confirm(customify.l10n.resetPanelConfirmMessage) | |
| 244 | 274 | |
| 245 | - $( document ).on( 'click', '.customify_preset.radio input, .customify_preset.radio_buttons input, .awesome_presets input', function() { | |
| 246 | - var api = wp.customize; | |
| 247 | - var this_option = this;//$(this).children('[value="' + $(this).val() + '"]'); | |
| 248 | - var data = $( this_option ).data( 'options' ); | |
| 275 | + if (!iAgree) { | |
| 276 | + return | |
| 277 | + } | |
| 278 | + if (sections.length > 0) { | |
| 279 | + $.each(sections, function () { | |
| 280 | + const controls = this.controls() | |
| 249 | 281 | |
| 250 | - if ( ! _.isUndefined( data ) ) { | |
| 251 | - $.each( data, function( id, value ) { | |
| 252 | - api_set_setting_value( id, value ); | |
| 253 | - } ); | |
| 254 | - } | |
| 282 | + if (controls.length > 0) { | |
| 283 | + $.each(controls, function (key, ctrl) { | |
| 284 | + const settingID = ctrl.id.replace('_control', ''), | |
| 285 | + setting = customify.config.settings[settingID] | |
| 255 | 286 | |
| 256 | - api.previewer.refresh(); | |
| 257 | - } ); | |
| 287 | + if (!_.isUndefined(setting) && !_.isUndefined(setting.default)) { | |
| 288 | + apiSetSettingValue(settingID, setting.default) | |
| 289 | + } | |
| 290 | + }) | |
| 291 | + } | |
| 292 | + }) | |
| 293 | + } | |
| 294 | + } | |
| 258 | 295 | |
| 259 | - // bind our event on click | |
| 260 | - $( document ).on( 'click', '.customify_import_demo_data_button', function( event ) { | |
| 261 | - //if ( $( this ).hasClass( '.wpGrade_button_inactive' ) ) { | |
| 262 | - // return false; | |
| 263 | - //} else { | |
| 264 | - // $( this ).addClass( '.wpGrade_button_inactive' ); | |
| 265 | - // $( this ).attr( 'disabled', 'disabled' ); | |
| 266 | - //} | |
| 267 | - //var confirmImport = confirm( listable_demodata_params.l10n.import_confirm ); | |
| 268 | - //if ( confirmImport == false ) return false; | |
| 296 | + function onResetSection (e) { | |
| 297 | + e.preventDefault() | |
| 269 | 298 | |
| 270 | - //@todo start an animation here | |
| 271 | - var key = $( this ).data( 'key' ); | |
| 299 | + const sectionID = $(this).data('section'), | |
| 300 | + section = api.section(sectionID), | |
| 301 | + controls = section.controls() | |
| 272 | 302 | |
| 273 | - var import_queue = new Queue( api ); | |
| 303 | + const iAgree = confirm(customify.l10n.resetSectionConfirmMessage) | |
| 274 | 304 | |
| 275 | - /// calculate the number of steps | |
| 276 | - var steps = []; | |
| 305 | + if (!iAgree) { | |
| 306 | + return | |
| 307 | + } | |
| 277 | 308 | |
| 278 | - if ( ! _.isUndefined( customify_settings.settings[key].imports ) ) { | |
| 309 | + if (controls.length > 0) { | |
| 310 | + $.each(controls, function (key, ctrl) { | |
| 311 | + const setting_id = ctrl.id.replace('_control', ''), | |
| 312 | + setting = customify.config.settings[setting_id] | |
| 279 | 313 | |
| 280 | - $.each( customify_settings.settings[key].imports, function( i, import_setts, k ) { | |
| 281 | - if ( _.isUndefined( import_setts.steps ) ) { | |
| 282 | - steps.push( {id: i, type: import_setts.type} ); | |
| 283 | - } else { | |
| 284 | - var count = import_setts.steps; | |
| 314 | + if (!_.isUndefined(setting) && !_.isUndefined(setting.default)) { | |
| 315 | + apiSetSettingValue(setting_id, setting.default) | |
| 316 | + } | |
| 317 | + }) | |
| 318 | + } | |
| 319 | + } | |
| 285 | 320 | |
| 286 | - while ( count >= 1 ) { | |
| 287 | - steps.push( {id: i, type: import_setts.type, count: count} ); | |
| 288 | - count = count - 1; | |
| 289 | - } | |
| 290 | - } | |
| 291 | - } ); | |
| 292 | - } | |
| 321 | + function handleSectionTabs () { | |
| 322 | + const $navs = $('.js-section-navigation') | |
| 293 | 323 | |
| 294 | - import_queue.add_steps( 'import_demo_data_action_id', steps ); | |
| 295 | - return false; | |
| 296 | - } ); | |
| 324 | + $navs.each(function () { | |
| 325 | + const $nav = $(this) | |
| 326 | + const $title = $nav.parents('.accordion-section-content').find('.customize-section-title') | |
| 327 | + const $parent = $nav.closest('.customize-control') | |
| 297 | 328 | |
| 298 | - customifyBackgroundJsControl.init(); | |
| 329 | + $nav.appendTo($title) | |
| 330 | + $title.parent().addClass('has-nav') | |
| 331 | + $parent.addClass('screen-reader-text') | |
| 332 | + }) | |
| 299 | 333 | |
| 300 | - // sometimes there may be needed a php save | |
| 301 | - if ( getUrlVars( 'save_customizer_once' ) ) { | |
| 302 | - api.previewer.save(); | |
| 303 | - } | |
| 334 | + $('.js-section-navigation a').on('click', function (e) { | |
| 335 | + e.preventDefault() | |
| 304 | 336 | |
| 305 | - setTimeout(function () { | |
| 306 | - customifyFoldingFields(); | |
| 307 | - }, 1000); | |
| 308 | - } ); | |
| 337 | + const $this = $(this) | |
| 338 | + const $sidebar = $this.parents('.wp-full-overlay-sidebar-content') | |
| 339 | + const $parent = $this.parents('.accordion-section-content') | |
| 340 | + const href = $this.attr('href') | |
| 309 | 341 | |
| 310 | - /** | |
| 311 | - * This function will search for all the interdependend fields and make a bound between them. | |
| 312 | - * So whenever a target is changed, it will take actions to the dependent fields. | |
| 313 | - */ | |
| 314 | - var customifyFoldingFields = function() { | |
| 342 | + if (href !== '#') { | |
| 343 | + const actionsHeight = $('#customize-header-actions').outerHeight() | |
| 344 | + const titleHeight = $parent.find('.customize-section-title').outerHeight() | |
| 345 | + const $target = $(href) | |
| 346 | + const offset = $target.position().top | |
| 315 | 347 | |
| 316 | - if ( _.isUndefined( customify_settings ) || _.isUndefined( customify_settings.settings ) ) { | |
| 317 | - return ; // bail | |
| 318 | - } | |
| 348 | + $sidebar.animate({scrollTop: offset - titleHeight - actionsHeight}, 500) | |
| 349 | + } | |
| 350 | + }) | |
| 351 | + } | |
| 319 | 352 | |
| 320 | - /** | |
| 321 | - * Let's iterate through all the customify settings and gather all the fields that have a "show_on" | |
| 322 | - * property set. | |
| 323 | - * | |
| 324 | - * At the end `targets` will hold a list of [ target : [field, field,...], ... ] | |
| 325 | - * so when a target is changed we will change all the fields. | |
| 326 | - */ | |
| 327 | - var targets = {}; | |
| 353 | + const getConnectedFieldsCallback = function (parentSettingData, parentSettingID) { | |
| 354 | + return function (newValue, oldValue) { | |
| 355 | + _.each(parentSettingData.connected_fields, function (connectedFieldData) { | |
| 356 | + if (_.isUndefined(connectedFieldData) || _.isUndefined(connectedFieldData.setting_id) || !_.isString(connectedFieldData.setting_id)) { | |
| 357 | + return | |
| 358 | + } | |
| 359 | + const setting = api(connectedFieldData.setting_id) | |
| 360 | + if (_.isUndefined(setting)) { | |
| 361 | + return | |
| 362 | + } | |
| 363 | + setting.set(newValue) | |
| 364 | + }) | |
| 365 | + } | |
| 366 | + } | |
| 328 | 367 | |
| 329 | - $.fn.reactor.defaults.compliant = function() { | |
| 330 | - $(this).slideDown(); | |
| 331 | - // $(this).animate({opacity: 1}); | |
| 332 | - $(this).find(':disabled').attr({disabled: false}); | |
| 333 | - }; | |
| 368 | + const bindConnectedFields = function () { | |
| 369 | + _.each(api.settings.settings, function (parentSettingData, parentSettingID) { | |
| 370 | + // We don't want to handle the binding of the Style Manager settings | |
| 371 | + if (typeof customify.colorPalettes !== 'undefined' | |
| 372 | + && typeof customify.colorPalettes.masterSettingIds !== 'undefined' | |
| 373 | + && _.includes(customify.colorPalettes.masterSettingIds, parentSettingID)) { | |
| 374 | + return | |
| 375 | + } | |
| 376 | + if (typeof customify.fontPalettes !== 'undefined' | |
| 377 | + && typeof customify.fontPalettes.masterSettingIds !== 'undefined' | |
| 378 | + && _.includes(customify.fontPalettes.masterSettingIds, parentSettingID)) { | |
| 379 | + return | |
| 380 | + } | |
| 334 | 381 | |
| 335 | - $.fn.reactor.defaults.uncompliant = function() { | |
| 336 | - $(this).slideUp(); | |
| 337 | - // $(this).animate({opacity: 0.25}); | |
| 338 | - $(this).find(':enabled').attr({disabled: true}); | |
| 339 | - }; | |
| 382 | + const parent_setting = api(parentSettingID) | |
| 383 | + if (typeof parentSettingData.connected_fields !== 'undefined') { | |
| 384 | + customify.connectedFieldsCallbacks[parentSettingID] = getConnectedFieldsCallback(parentSettingData, parentSettingID) | |
| 385 | + parent_setting.bind(customify.connectedFieldsCallbacks[parentSettingID]) | |
| 386 | + } | |
| 387 | + }) | |
| 388 | + } | |
| 340 | 389 | |
| 341 | - var IS = $.extend({}, $.fn.reactor.helpers); | |
| 390 | + /** | |
| 391 | + * This function will search for all the interdependend fields and make a bound between them. | |
| 392 | + * So whenever a target is changed, it will take actions to the dependent fields. | |
| 393 | + * @TODO this is still written in a barbaric way, refactor when needed | |
| 394 | + */ | |
| 395 | + const customifyFoldingFields = function () { | |
| 342 | 396 | |
| 343 | - var process_a_target = function( parent_id, field ) { | |
| 397 | + if (_.isUndefined(customify.config) || _.isUndefined(customify.config.settings)) { | |
| 398 | + return // bail | |
| 399 | + } | |
| 344 | 400 | |
| 345 | - if ( _.isUndefined( field[0] ) ) { | |
| 346 | - return ; // no id, no fun | |
| 347 | - } | |
| 401 | + $.fn.reactor.defaults.compliant = function () { | |
| 402 | + $(this).slideDown() | |
| 403 | + $(this).find(':disabled').attr({disabled: false}) | |
| 404 | + } | |
| 348 | 405 | |
| 349 | - var key = field[0], | |
| 350 | - value = 1, // by default we use 1 the most used value for checboxes or inputs | |
| 351 | - compare = '==', // ... ye | |
| 352 | - action = "show"; // can only be `show` or `hide` | |
| 406 | + $.fn.reactor.defaults.uncompliant = function () { | |
| 407 | + $(this).slideUp() | |
| 408 | + $(this).find(':enabled').attr({disabled: true}) | |
| 409 | + } | |
| 353 | 410 | |
| 354 | - var target_key = customify_settings.options_name + '[' + key + ']'; | |
| 355 | - var target_type = customify_settings.settings[ target_key ].type; | |
| 411 | + let IS = $.extend({}, $.fn.reactor.helpers) | |
| 356 | 412 | |
| 413 | + const bindFoldingEvents = function (parentID, field, relation) { | |
| 357 | 414 | |
| 358 | - if ( ! _.isUndefined( field[1] ) ) { | |
| 359 | - value = field[1]; | |
| 360 | - } | |
| 415 | + let key = null | |
| 361 | 416 | |
| 362 | - if ( ! _.isUndefined( field[2] ) ) { | |
| 363 | - compare = field[2]; | |
| 364 | - } | |
| 417 | + if (_.isString(field)) { | |
| 418 | + key = field | |
| 419 | + } else if (!_.isUndefined(field.id)) { | |
| 420 | + key = field.id | |
| 421 | + } else if (_.isString(field[0])) { | |
| 422 | + key = field[0] | |
| 423 | + } else { | |
| 424 | + return // no key, no fun | |
| 425 | + } | |
| 365 | 426 | |
| 366 | - if ( ! _.isUndefined( field[3] ) ) { | |
| 367 | - action = field[3]; | |
| 368 | - } | |
| 427 | + let value = 1, // by default we use 1 the most used value for checkboxes or inputs | |
| 428 | + between = [0, 1] // can only be `show` or `hide` | |
| 369 | 429 | |
| 370 | - /** | |
| 371 | - * Now for each target we have, we will bind a change event to hide or show the dependent fields | |
| 372 | - */ | |
| 373 | - var target_selector = '[data-customize-setting-link="' + customify_settings.options_name + '[' + key + ']"]'; | |
| 430 | + const target_key = customify.config.options_name + '[' + key + ']' | |
| 431 | + const target_type = customify.config.settings[target_key].type | |
| 374 | 432 | |
| 375 | - if ( target_type == 'checkbox' ) { | |
| 376 | - $(parent_id).reactIf( target_selector, function () { | |
| 377 | - return $( this ).is(':checked') == value; | |
| 378 | - } ); | |
| 379 | - } else if ( target_type == 'radio' || target_type == 'radio_image' ) { | |
| 380 | - $(parent_id) | |
| 381 | - .reactIf( target_selector, function () { | |
| 382 | - return $( target_selector + ':checked').val() == value; | |
| 383 | - } ); | |
| 384 | - } else { | |
| 385 | - $(parent_id) | |
| 386 | - .reactIf( target_selector, function () { | |
| 387 | - return $(target_selector).val() == value; | |
| 388 | - } ); | |
| 389 | - } | |
| 433 | + // we support the usual syntax like a config array like `array( 'id' => $id, 'value' => $value, 'compare' => $compare )` | |
| 434 | + // but we also support a non-associative array like `array( $id, $value, $compare )` | |
| 435 | + if (!_.isUndefined(field.value)) { | |
| 436 | + value = field.value | |
| 437 | + } else if (!_.isUndefined(field[1]) && !_.isString(field[1])) { | |
| 438 | + value = field[1] | |
| 439 | + } | |
| 390 | 440 | |
| 391 | - $(target_selector).trigger('change'); | |
| 392 | - $('.reactor').trigger('change.reactor'); // triggers all events on load | |
| 393 | - }; | |
| 441 | + if (!_.isUndefined(field.between)) { | |
| 442 | + between = field.between | |
| 443 | + } | |
| 394 | 444 | |
| 395 | - $.each( customify_settings.settings, function ( id, field ) { | |
| 445 | + /** | |
| 446 | + * Now for each target we have, we will bind a change event to hide or show the dependent fields | |
| 447 | + */ | |
| 448 | + const target_selector = '[data-customize-setting-link="' + customify.config.options_name + '[' + key + ']"]' | |
| 396 | 449 | |
| 397 | - /** | |
| 398 | - * Here we have the id of the fields. but we know for sure that we just need his parent selector | |
| 399 | - * So we just create it | |
| 400 | - */ | |
| 401 | - var parent_id = id.replace( '[', '-' ); | |
| 402 | - parent_id = parent_id.replace( ']', '' ); | |
| 403 | - parent_id = '#customize-control-' + parent_id + '_control'; | |
| 450 | + switch (target_type) { | |
| 451 | + case 'checkbox': | |
| 452 | + $(parentID).reactIf(target_selector, function () { | |
| 453 | + return $(this).is(':checked') == value | |
| 454 | + }) | |
| 455 | + break | |
| 404 | 456 | |
| 457 | + case 'radio': | |
| 458 | + case 'sm_radio': | |
| 459 | + case 'sm_switch': | |
| 460 | + case 'radio_image': | |
| 461 | + case 'radio_html': | |
| 405 | 462 | |
| 406 | - // get only the fields that have a 'show_on' property | |
| 407 | - if ( field.hasOwnProperty( 'show_on' ) && field.show_on.length > 0 ) { | |
| 463 | + // in case of an array of values we use the ( val in array) condition | |
| 464 | + if (_.isObject(value)) { | |
| 465 | + value = _.toArray(value) | |
| 466 | + $(parentID).reactIf(target_selector, function () { | |
| 467 | + return ( | |
| 468 | + value.indexOf($(target_selector + ':checked').val()) !== -1 | |
| 469 | + ) | |
| 470 | + }) | |
| 471 | + } else { // in any other case we use a simple == comparison | |
| 472 | + $(parentID).reactIf(target_selector, function () { | |
| 473 | + return $(target_selector + ':checked').val() == value | |
| 474 | + }) | |
| 475 | + } | |
| 476 | + break | |
| 408 | 477 | |
| 409 | - /** | |
| 410 | - * The 'show_on' can be a simple array with one target like: [ id, value, comparison, action ] | |
| 411 | - * Or it could be an array of multiple targets and we need to process both cases | |
| 412 | - */ | |
| 413 | - if ( _.isString( field.show_on[0] ) ) { | |
| 414 | - process_a_target( parent_id, field.show_on ); | |
| 415 | - } else if ( _.isObject( field.show_on[0] ) ) { | |
| 416 | - $.each( field.show_on, function (i, j) { | |
| 417 | - process_a_target( parent_id, j ); | |
| 418 | - }); | |
| 419 | - } | |
| 420 | - } | |
| 421 | - }); | |
| 422 | - }; | |
| 478 | + case 'range': | |
| 479 | + const x = IS.Between(between[0], between[1]) | |
| 423 | 480 | |
| 424 | - var get_typography_font_family = function( $el ) { | |
| 481 | + $(parentID).reactIf(target_selector, x) | |
| 482 | + break | |
| 425 | 483 | |
| 426 | - var font_family_value = $el.val(); | |
| 427 | - // first time this will not be a json so catch that error | |
| 428 | - try { | |
| 429 | - font_family_value = JSON.parse( font_family_value ); | |
| 430 | - } catch ( e ) { | |
| 431 | - return {font_family: font_family_value}; | |
| 432 | - } | |
| 484 | + default: | |
| 485 | + // in case of an array of values we use the ( val in array) condition | |
| 486 | + if (_.isObject(value)) { | |
| 487 | + value = _.toArray(value) | |
| 488 | + $(parentID).reactIf(target_selector, function () { | |
| 489 | + return ( | |
| 490 | + value.indexOf($(target_selector).val()) !== -1 | |
| 491 | + ) | |
| 492 | + }) | |
| 493 | + } else { // in any other case we use a simple == comparison | |
| 494 | + $(parentID).reactIf(target_selector, function () { | |
| 495 | + return $(target_selector).val() == value | |
| 496 | + }) | |
| 497 | + } | |
| 498 | + break | |
| 499 | + } | |
| 433 | 500 | |
| 434 | - if ( ! _.isUndefined( font_family_value.font_family ) ) { | |
| 435 | - return font_family_value.font_family; | |
| 436 | - } | |
| 501 | + $(target_selector).trigger('change', ['customify']) | |
| 502 | + $('.reactor').trigger('change.reactor') // triggers all events on load | |
| 503 | + } | |
| 437 | 504 | |
| 438 | - return false; | |
| 439 | - }; | |
| 505 | + $.each(customify.config.settings, function (id, field) { | |
| 506 | + /** | |
| 507 | + * Here we have the id of the fields. but we know for sure that we just need his parent selector | |
| 508 | + * So we just create it | |
| 509 | + */ | |
| 510 | + let parentID = id.replace('[', '-') | |
| 511 | + parentID = parentID.replace(']', '') | |
| 512 | + parentID = '#customize-control-' + parentID + '_control' | |
| 440 | 513 | |
| 441 | - // get each typography field and bind events | |
| 442 | - var prepare_typography_field = function() { | |
| 514 | + // get only the fields that have a 'show_if' property | |
| 515 | + if (field.hasOwnProperty('show_if')) { | |
| 516 | + let relation = 'AND' | |
| 443 | 517 | |
| 444 | - var $typos = $( '.customify_typography_font_family' ); | |
| 518 | + if (!_.isUndefined(field.show_if.relation)) { | |
| 519 | + relation = field.show_if.relation | |
| 520 | + // remove the relation property, we need the config to be array based only | |
| 521 | + delete field.show_if.relation | |
| 522 | + } | |
| 445 | 523 | |
| 446 | - $typos.each( function() { | |
| 447 | - var font_family_select = this, | |
| 448 | - $input = $( font_family_select ).siblings( '.customify_typography_values' ); | |
| 449 | - // on change | |
| 450 | - $( font_family_select ).on( 'change', function() { | |
| 451 | - update_siblings_selects( font_family_select ); | |
| 452 | - $input.trigger( 'change' ); | |
| 453 | - } ); | |
| 454 | - update_siblings_selects( font_family_select ); | |
| 455 | - } ); | |
| 456 | - }; | |
| 524 | + /** | |
| 525 | + * The 'show_if' can be a simple array with one target like: [ id, value, comparison, action ] | |
| 526 | + * Or it could be an array of multiple targets and we need to process both cases | |
| 527 | + */ | |
| 457 | 528 | |
| 458 | - var api_set_setting_value = function( id, value ) { | |
| 529 | + if (!_.isUndefined(field.show_if.id)) { | |
| 530 | + bindFoldingEvents(parentID, field.show_if, relation) | |
| 531 | + } else if (_.isObject(field.show_if)) { | |
| 532 | + $.each(field.show_if, function (i, j) { | |
| 533 | + bindFoldingEvents(parentID, j, relation) | |
| 534 | + }) | |
| 535 | + } | |
| 536 | + } | |
| 537 | + }) | |
| 538 | + } | |
| 459 | 539 | |
| 460 | - var api = wp.customize, | |
| 461 | - setting_id = customify_settings.options_name + '[' + id + ']', | |
| 462 | - setting = api( setting_id ), | |
| 463 | - field = $( '[data-customize-setting-link="' + setting_id + '"]' ), | |
| 464 | - field_class = $( field ).parent().attr( 'class' ); | |
| 540 | + /** | |
| 541 | + * Set a setting value. | |
| 542 | + * | |
| 543 | + * Mostly used for resetting settings (via the reset buttons) but also for the preset (legacy) field. | |
| 544 | + * | |
| 545 | + * @param settingID | |
| 546 | + * @param value | |
| 547 | + */ | |
| 548 | + const apiSetSettingValue = function (settingID, value) { | |
| 549 | + const setting = api(settingID), | |
| 550 | + field = $('[data-customize-setting-link="' + settingID + '"]'), | |
| 551 | + fieldClass = $(field).parent().attr('class') | |
| 465 | 552 | |
| 466 | - if ( ! _.isUndefined( field_class ) && field_class === 'customify_typography' ) { | |
| 553 | + if (!_.isUndefined(fieldClass) && fieldClass === 'font-options__wrapper') { | |
| 467 | 554 | |
| 468 | - var family_select = field.siblings( 'select' ); | |
| 555 | + // if the value is a simple string it must be the font family | |
| 556 | + if (_.isString(value)) { | |
| 557 | + setting.set({'font_family': value}) | |
| 558 | + } else if (_.isObject(value)) { | |
| 559 | + const standardValue = {} | |
| 560 | + // We will process each font property and update it | |
| 561 | + _.each(value, function (val, key) { | |
| 562 | + // We need to map the keys to the data attributes we are using - I know :( | |
| 563 | + let mappedKey = key | |
| 564 | + switch (key) { | |
| 565 | + case 'font-family': | |
| 566 | + mappedKey = 'font_family' | |
| 567 | + break | |
| 568 | + case 'font-size': | |
| 569 | + mappedKey = 'font_size' | |
| 570 | + break | |
| 571 | + case 'font-weight': | |
| 572 | + mappedKey = 'font_variant' | |
| 573 | + break | |
| 574 | + case 'letter-spacing': | |
| 575 | + mappedKey = 'letter_spacing' | |
| 576 | + break | |
| 577 | + case 'text-transform': | |
| 578 | + mappedKey = 'text_transform' | |
| 579 | + break | |
| 580 | + default: | |
| 581 | + break | |
| 582 | + } | |
| 469 | 583 | |
| 470 | - if ( _.isString( value ) ) { | |
| 471 | - var this_option = family_select.find( 'option[value="' + value + '"]' ); | |
| 472 | - $( this_option[0] ).attr( 'selected', 'selected' ); | |
| 473 | - update_siblings_selects( family_select ); | |
| 474 | - } else if ( _.isObject( value ) ) { | |
| 475 | - var this_family_option = family_select.find( 'option[value="' + value['font_family'] + '"]' ); | |
| 476 | - $( this_family_option[0] ).attr( 'selected', 'selected' ); | |
| 584 | + standardValue[mappedKey] = val | |
| 585 | + }) | |
| 477 | 586 | |
| 478 | - update_siblings_selects( this_family_option ); | |
| 587 | + setting.set(standardValue) | |
| 588 | + } | |
| 589 | + } else { | |
| 590 | + setting.set(value) | |
| 591 | + } | |
| 592 | + } | |
| 479 | 593 | |
| 480 | - setTimeout( function() { | |
| 481 | - var weight_select = field.parent().siblings( '.options' ).find( '.customify_typography_font_weight' ); | |
| 594 | + const handlePreviewIframe = function () { | |
| 595 | + api.previewer.bind('synced', function () { | |
| 596 | + scaleIframe() | |
| 482 | 597 | |
| 483 | - var this_weight_option = weight_select.find( 'option[value="' + value['selected_variants'] + '"]' ); | |
| 598 | + api.previewedDevice.bind(scaleIframe) | |
| 599 | + $window.on('resize', scaleIframe) | |
| 600 | + }) | |
| 484 | 601 | |
| 485 | - $( this_weight_option[0] ).attr( 'selected', 'selected' ); | |
| 602 | + $('.collapse-sidebar').on('click', function () { | |
| 603 | + setTimeout(scaleIframe, 300) | |
| 604 | + }) | |
| 605 | + } | |
| 486 | 606 | |
| 487 | - update_siblings_selects( this_family_option ); | |
| 607 | + const scaleIframe = function () { | |
| 608 | + const $previewIframe = $('.wp-full-overlay') | |
| 488 | 609 | |
| 489 | - weight_select.trigger( 'change' ); | |
| 490 | - }, 300 ); | |
| 491 | - } | |
| 610 | + // remove CSS properties that may have been previously added | |
| 611 | + $previewIframe.find('iframe').css({ | |
| 612 | + width: '', | |
| 613 | + height: '', | |
| 614 | + transformOrigin: '', | |
| 615 | + transform: '' | |
| 616 | + }) | |
| 492 | 617 | |
| 493 | - family_select.trigger( 'change' ); | |
| 618 | + // scaling of the site preview should be done only in desktop preview mode | |
| 619 | + if (api.previewedDevice.get() !== 'desktop') { | |
| 620 | + return | |
| 621 | + } | |
| 494 | 622 | |
| 495 | - } else { | |
| 496 | - setting.set( value ); | |
| 497 | - } | |
| 498 | - }; | |
| 623 | + const iframeWidth = $previewIframe.width() | |
| 624 | + const windowWidth = $window.width() | |
| 625 | + const windowHeight = $window.height() | |
| 499 | 626 | |
| 500 | - var update_siblings_selects = function( font_select ) { | |
| 627 | + // get the ratio between the site preview and actual browser width | |
| 628 | + const scale = windowWidth / iframeWidth | |
| 501 | 629 | |
| 502 | - this.bound_once = false; | |
| 503 | - var selected_font = $( font_select ).val(), | |
| 504 | - $input = $( font_select ).siblings( '.customify_typography_values' ), | |
| 505 | - current_val = $input.attr( 'value' ); | |
| 630 | + // for an accurate preview at resolutions where media queries may intervene | |
| 631 | + // increase the width of the iframe and use CSS transforms to scale it back down | |
| 632 | + if (iframeWidth > 720 && iframeWidth < 1100) { | |
| 633 | + $previewIframe.find('iframe').css({ | |
| 634 | + width: iframeWidth * scale, | |
| 635 | + height: windowHeight * scale, | |
| 636 | + transformOrigin: 'left top', | |
| 637 | + transform: 'scale(' + 1 / scale + ')' | |
| 638 | + }) | |
| 639 | + } | |
| 640 | + } | |
| 506 | 641 | |
| 507 | - if ( current_val === '[object Object]' ) { | |
| 508 | - current_val = $input.data( 'default' ); | |
| 509 | - } else if ( _.isString( current_val ) && !isJsonString( current_val ) && current_val.substr(0,1) == '[' ) { | |
| 510 | - // a rare case when the value isn't a json but is a representative string like [family,weight] | |
| 511 | - current_val = current_val.split( ',' ); | |
| 512 | - var new_current_value = {}; | |
| 513 | - if ( ! _.isUndefined( current_val[0] ) ) { | |
| 514 | - new_current_value['font_family'] = current_val[0]; | |
| 515 | - } | |
| 642 | + /** Modules **/ | |
| 516 | 643 | |
| 517 | - if ( ! _.isUndefined( current_val[1] ) ) { | |
| 518 | - new_current_value['selected_variants'] = current_val[1]; | |
| 519 | - } | |
| 644 | + const customifyBackgroundJsControl = ( | |
| 645 | + function () { | |
| 646 | + 'use strict' | |
| 520 | 647 | |
| 521 | - current_val = JSON.stringify( new_current_value ); | |
| 522 | - } | |
| 648 | + function init () { | |
| 649 | + // Upload media button | |
| 650 | + $('.customize-control-custom_background .background_upload_button').unbind().on('click', function (event) { | |
| 651 | + addImage(event, $(this).parents('.customize-control-custom_background:first')) | |
| 652 | + }) | |
| 523 | 653 | |
| 524 | - var $font_weight = $( font_select ).parent().siblings( 'ul.options' ).find( '.customify_typography_font_weight' ), | |
| 525 | - $font_subsets = $( font_select ).parent().siblings( 'ul.options' ).find( '.customify_typography_font_subsets' ); | |
| 654 | + // Remove the image button | |
| 655 | + $('.customize-control-custom_background .remove-image, .customize-control-custom_background .remove-file').unbind('click').on('click', function (e) { | |
| 656 | + removeImage($(this).parents('.customize-control-custom_background:first')) | |
| 657 | + }) | |
| 658 | + } | |
| 526 | 659 | |
| 527 | - try { | |
| 528 | - current_val = JSON.parse( decodeURIComponent( current_val ) ); | |
| 529 | - } catch ( e ) { | |
| 660 | + // Add a file via the wp.media function | |
| 661 | + function addImage (event, selector) { | |
| 662 | + // Stop this from propagating. | |
| 663 | + event.preventDefault() | |
| 530 | 664 | |
| 531 | - // in case of an error, force the rebuild of the json | |
| 532 | - if ( _.isUndefined( $( font_select ).data( 'bound_once' ) ) ) { | |
| 665 | + let frame | |
| 666 | + const $thisElement = $(this) | |
| 533 | 667 | |
| 534 | - $( font_select ).data( 'bound_once', true ); | |
| 535 | - //var api = wp.customize; | |
| 536 | - //api.previewer.refresh(); | |
| 668 | + // If the media frame already exists, reopen it. | |
| 669 | + if (frame) { | |
| 670 | + frame.open() | |
| 671 | + return | |
| 672 | + } | |
| 537 | 673 | |
| 538 | - $( font_select ).change(); | |
| 539 | - $font_weight.change(); | |
| 540 | - $font_subsets.change(); | |
| 541 | - } | |
| 542 | - } | |
| 674 | + // Create the media frame. | |
| 675 | + frame = wp.media({ | |
| 676 | + multiple: false, | |
| 677 | + library: { | |
| 678 | + //type: 'image' //Only allow images | |
| 679 | + }, | |
| 680 | + // Set the title of the modal. | |
| 681 | + title: $thisElement.data('choose'), | |
| 543 | 682 | |
| 544 | - // first try to get the font from sure sources, not from the recommended list. | |
| 545 | - var option_data = $( font_select ).find( ':not(optgroup[label=Recommended]) option[value="' + selected_font + '"]' ); | |
| 546 | - // however, if there isn't an option found, get what you can | |
| 547 | - if ( option_data.length < 1 ) { | |
| 548 | - option_data = $( font_select ).find( 'option[value="' + selected_font + '"]' ); | |
| 549 | - } | |
| 683 | + // Customize the submit button. | |
| 684 | + button: { | |
| 685 | + // Set the text of the button. | |
| 686 | + text: $thisElement.data('update') | |
| 687 | + // Tell the button not to close the modal, since we're | |
| 688 | + // going to refresh the page when the image is selected. | |
| 689 | + } | |
| 690 | + }) | |
| 550 | 691 | |
| 551 | - if ( option_data.length > 0 ) { | |
| 692 | + // When an image is selected, run a callback. | |
| 693 | + frame.on('select', function () { | |
| 694 | + // Grab the selected attachment. | |
| 695 | + const attachment = frame.state().get('selection').first() | |
| 696 | + frame.close() | |
| 552 | 697 | |
| 553 | - var font_type = option_data.data( 'type' ), | |
| 554 | - value_to_add = {'type': font_type, 'font_family': selected_font}, | |
| 555 | - variants = null, | |
| 556 | - subsets = null; | |
| 698 | + if (attachment.attributes.type !== 'image') { | |
| 699 | + return | |
| 700 | + } | |
| 557 | 701 | |
| 558 | - if ( font_type == 'std' ) { | |
| 559 | - variants = { 0: '100', 1: '200', 3: '300', 4: '400', 5: '500', 6: '600', 7: '700', 8: '800', 9: '900' }; | |
| 560 | - if ( ! _.isUndefined( $( option_data[0] ).data( 'variants' ) ) ) { | |
| 561 | - //maybe the variants are a JSON | |
| 562 | - variants = maybeJsonParse( $( option_data[0] ).data( 'variants' ) ); | |
| 563 | - } | |
| 564 | - } else { | |
| 565 | - //maybe the variants are a JSON | |
| 566 | - variants = maybeJsonParse( $( option_data[0] ).data( 'variants' ) ); | |
| 702 | + selector.find('.customify_background_input.background-image').val(attachment.attributes.url) | |
| 567 | 703 | |
| 568 | - //maybe the subsets are a JSON | |
| 569 | - subsets = maybeJsonParse( $( option_data[0] ).data( 'subsets' ) ); | |
| 570 | - } | |
| 704 | + selector.find('.upload').attr('value', attachment.attributes.url) | |
| 705 | + selector.find('.upload-id').attr('value', attachment.attributes.id) | |
| 706 | + selector.find('.upload-height').attr('value', attachment.attributes.height) | |
| 707 | + selector.find('.upload-width').attr('value', attachment.attributes.width) | |
| 571 | 708 | |
| 572 | - // make the variants selector | |
| 573 | - if ( ! _.isUndefined( variants ) && ! _.isNull( variants ) && ! _.isEmpty( variants ) ) { | |
| 709 | + let thumbSrc = attachment.attributes.url | |
| 710 | + if (!_.isUndefined(attachment.attributes.sizes) && !_.isUndefined(attachment.attributes.sizes.thumbnail)) { | |
| 711 | + thumbSrc = attachment.attributes.sizes.thumbnail.url | |
| 712 | + } else if (!_.isUndefined(attachment.attributes.sizes)) { | |
| 713 | + let height = attachment.attributes.height | |
| 714 | + for (let key in attachment.attributes.sizes) { | |
| 715 | + const object = attachment.attributes.sizes[key] | |
| 716 | + if (object.height < height) { | |
| 717 | + height = object.height | |
| 718 | + thumbSrc = object.url | |
| 719 | + } | |
| 720 | + } | |
| 721 | + } else { | |
| 722 | + thumbSrc = attachment.attributes.icon | |
| 723 | + } | |
| 574 | 724 | |
| 575 | - value_to_add['variants'] = variants; | |
| 576 | - // when a font is selected force the first weight to load | |
| 577 | - value_to_add['selected_variants'] = {0: variants[0]}; | |
| 725 | + if (!selector.find('.upload').hasClass('noPreview')) { | |
| 726 | + selector.find('.preview_screenshot').empty().hide().append('<img class="preview_image" src="' + thumbSrc + '">').slideDown('fast') | |
| 727 | + } | |
| 728 | + selector.find('.remove-image').removeClass('hide') // Show "Remove" button | |
| 729 | + selector.find('.customify_background_select').removeClass('hide') // Show background selects | |
| 578 | 730 | |
| 579 | - var variants_options = '', | |
| 580 | - count_weights = 0; | |
| 731 | + updateData(selector) | |
| 732 | + }) | |
| 581 | 733 | |
| 582 | - if ( _.isArray( variants ) || _.isObject( variants ) ) { | |
| 583 | - // Take each variant and produce the option markup | |
| 584 | - $.each(variants, function (key, el) { | |
| 585 | - var is_selected = ''; | |
| 586 | - if (_.isObject(current_val.selected_variants) && inObject(el, current_val.selected_variants)) { | |
| 587 | - is_selected = ' selected="selected"'; | |
| 588 | - } else if (_.isString(current_val.selected_variants) && el === current_val.selected_variants) { | |
| 589 | - is_selected = ' selected="selected"'; | |
| 590 | - } | |
| 734 | + // Finally, open the modal. | |
| 735 | + frame.open() | |
| 736 | + } | |
| 591 | 737 | |
| 592 | - // initialize | |
| 593 | - var variant_option_value = el, | |
| 594 | - variant_option_display = el; | |
| 738 | + // Update the background data | |
| 739 | + function updateData (selector) { | |
| 595 | 740 | |
| 596 | - // If we are dealing with a object variant then it means things get tricky (probably it's our fault but bear with us) | |
| 597 | - // This probably comes from our Fonto plugin - a font with individually named variants - hence each has its own font-family | |
| 598 | - if (_.isObject(el)) { | |
| 599 | - //put the entire object in the variation value - we will need it when outputting the custom CSS | |
| 600 | - variant_option_value = encodeURIComponent(JSON.stringify(el)); | |
| 601 | - variant_option_display = ''; | |
| 741 | + let $parent = selector.parents('.customize-control-custom_background:first') | |
| 602 | 742 | |
| 603 | - //if we have weight and style then "compose" them into something standard | |
| 604 | - if (!_.isUndefined(el['font-weight'])) { | |
| 605 | - variant_option_display += el['font-weight']; | |
| 606 | - } | |
| 743 | + if (selector.hasClass('customize-control-custom_background')) { | |
| 744 | + $parent = selector | |
| 745 | + } | |
| 607 | 746 | |
| 608 | - if (_.isString(el['font-style']) && $.inArray(el['font-style'].toLowerCase(), ["normal", "regular"]) < 0) { //this comparison means it hasn't been found | |
| 609 | - variant_option_display += el['font-style']; | |
| 610 | - } | |
| 611 | - } | |
| 747 | + if ($parent.length > 0) { | |
| 748 | + $parent = $($parent[0]) | |
| 749 | + } else { | |
| 750 | + return | |
| 751 | + } | |
| 612 | 752 | |
| 613 | - variants_options += '<option value="' + variant_option_value + '"' + is_selected + '>' + variant_option_display + '</option>'; | |
| 614 | - count_weights++; | |
| 615 | - }); | |
| 616 | - } | |
| 753 | + const settingID = $parent.find('.button.background_upload_button').data('setting_id'), | |
| 754 | + setting = api.instance(settingID) | |
| 617 | 755 | |
| 618 | - if ( ! _.isUndefined( $font_weight ) ) { | |
| 619 | - $font_weight.html( variants_options ); | |
| 620 | - // if there is no weight or just 1 we hide the weight select ... cuz is useless | |
| 621 | - if ( $( font_select ).data( 'load_all_weights' ) === true || count_weights <= 1 ) { | |
| 622 | - $font_weight.parent().css( 'display', 'none' ); | |
| 623 | - } else { | |
| 624 | - $font_weight.parent().css( 'display', 'inline-block' ); | |
| 625 | - } | |
| 626 | - } | |
| 627 | - } else if ( ! _.isUndefined( $font_weight ) ) { | |
| 628 | - $font_weight.parent().css( 'display', 'none' ); | |
| 629 | - } | |
| 756 | + const background_data = {} | |
| 630 | 757 | |
| 631 | - // make the subsets selector | |
| 632 | - if ( ! _.isUndefined( subsets ) && ! _.isNull( subsets ) && ! _.isEmpty( subsets ) ) { | |
| 758 | + $parent.find('.customify_background_select, .customify_background_input').each(function () { | |
| 759 | + let data = $(this).serializeArray()[0] | |
| 760 | + if (data && data.name.indexOf('[background-') !== -1) { | |
| 761 | + background_data[$(this).data('select_name')] = data.value | |
| 762 | + } | |
| 763 | + }) | |
| 633 | 764 | |
| 634 | - value_to_add['subsets'] = subsets; | |
| 635 | - // when a font is selected force the first subset to load | |
| 636 | - value_to_add['selected_subsets'] = {0: subsets[0]}; | |
| 637 | - var subsets_options = '', | |
| 638 | - count_subsets = 0; | |
| 639 | - $.each( subsets, function( key, el ) { | |
| 640 | - var is_selected = ''; | |
| 641 | - if ( _.isObject( current_val.selected_subsets ) && inObject( el, current_val.selected_subsets ) ) { | |
| 642 | - is_selected = ' selected="selected"'; | |
| 643 | - } | |
| 765 | + background_data.media = {} | |
| 766 | + background_data.media.id = $parent.find('.upload-id').val() | |
| 767 | + background_data.media.height = $parent.find('.upload-height').val() | |
| 768 | + background_data.media.width = $parent.find('.upload-width').val() | |
| 769 | + background_data.media.thumbnail = $parent.find('.upload-thumbnail').val() | |
| 644 | 770 | |
| 645 | - subsets_options += '<option value="' + el + '"' + is_selected + '>' + el + '</option>'; | |
| 646 | - count_subsets++; | |
| 647 | - } ); | |
| 771 | + setting.set(background_data) | |
| 772 | + } | |
| 648 | 773 | |
| 649 | - if ( ! _.isUndefined( $font_subsets ) ) { | |
| 650 | - $font_subsets.html( subsets_options ); | |
| 774 | + // Update the background preview | |
| 775 | + function removeImage (parent) { | |
| 776 | + const selector = parent.find('.upload_button_div') | |
| 777 | + // This shouldn't have been run... | |
| 778 | + if (!selector.find('.remove-image').addClass('hide')) { | |
| 779 | + return | |
| 780 | + } | |
| 651 | 781 | |
| 652 | - // if there is no subset or just 1 we hide the subsets select ... cuz is useless | |
| 653 | - if ( count_subsets <= 1 ) { | |
| 654 | - $font_subsets.parent().css( 'display', 'none' ); | |
| 655 | - } else { | |
| 656 | - $font_subsets.parent().css( 'display', 'inline-block' ); | |
| 657 | - } | |
| 658 | - } | |
| 659 | - } else if ( ! _.isUndefined( $font_subsets ) ) { | |
| 660 | - $font_subsets.parent().css( 'display', 'none' ); | |
| 661 | - } | |
| 782 | + // Hide "Remove" button. | |
| 783 | + selector.find('.remove-image').addClass('hide') | |
| 784 | + parent.find('.customify_background_select').addClass('hide') | |
| 662 | 785 | |
| 663 | - $input.val( encodeURIComponent( JSON.stringify( value_to_add ) ) ); | |
| 664 | - } | |
| 665 | - }; | |
| 786 | + parent.find('.upload').val(null) | |
| 787 | + parent.find('.upload-id').val(null) | |
| 788 | + parent.find('.upload-height').val(null) | |
| 789 | + parent.find('.upload-width').val(null) | |
| 790 | + parent.find('.customify_background_input.background-image').val(null) | |
| 666 | 791 | |
| 667 | - /** | |
| 668 | - * Function to check if a value exists in an object | |
| 669 | - * @param value | |
| 670 | - * @param obj | |
| 671 | - * @returns {boolean} | |
| 672 | - */ | |
| 673 | - var inObject = function( value, obj ) { | |
| 674 | - for ( var k in obj ) { | |
| 675 | - if ( !obj.hasOwnProperty( k ) ) continue; | |
| 676 | - if ( _.isEqual( obj[k], value ) ) { | |
| 677 | - return true; | |
| 678 | - } | |
| 679 | - } | |
| 680 | - return false; | |
| 681 | - }; | |
| 792 | + // Hide the screenshot | |
| 793 | + parent.find('.preview_screenshot').slideUp() | |
| 682 | 794 | |
| 683 | - var maybeJsonParse = function( value ) { | |
| 684 | - var parsed; | |
| 795 | + updateData(parent) | |
| 796 | + } | |
| 685 | 797 | |
| 686 | - //try and parse it, with decodeURIComponent | |
| 687 | - try { | |
| 688 | - parsed = JSON.parse( decodeURIComponent( value ) ); | |
| 689 | - } catch ( e ) { | |
| 798 | + return { | |
| 799 | + init: init | |
| 800 | + } | |
| 801 | + } | |
| 802 | + )(jQuery) | |
| 690 | 803 | |
| 691 | - // in case of an error, treat is as a string | |
| 692 | - parsed = value; | |
| 693 | - } | |
| 804 | + /** HELPERS **/ | |
| 694 | 805 | |
| 695 | - return parsed; | |
| 696 | - }; | |
| 806 | + const getUrlVar = function (name) { | |
| 807 | + const vars = [] | |
| 808 | + let hash | |
| 809 | + const hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&') | |
| 697 | 810 | |
| 698 | - var customifyBackgroundJsControl = (function() { | |
| 699 | - "use strict"; | |
| 811 | + for (let i = 0; i < hashes.length; i++) { | |
| 812 | + hash = hashes[i].split('=') | |
| 700 | 813 | |
| 701 | - var api = wp.customize; | |
| 814 | + vars.push(hash[0]) | |
| 815 | + vars[hash[0]] = hash[1] | |
| 816 | + } | |
| 702 | 817 | |
| 703 | - function init() { | |
| 704 | - // Remove the image button | |
| 705 | - $( '.customize-control-custom_background .remove-image, .customize-control-custom_background .remove-file' ).unbind( 'click' ).on( 'click', function( e ) { | |
| 706 | - removeImage( $( this ).parents( '.customize-control-custom_background:first' ) ); | |
| 707 | - preview( $( this ) ); | |
| 708 | - return false; | |
| 709 | - } ); | |
| 710 | - | |
| 711 | - // Upload media button | |
| 712 | - $( '.customize-control-custom_background .background_upload_button' ).unbind().on( 'click', function( event ) { | |
| 713 | - addImage( event, $( this ).parents( '.customize-control-custom_background:first' ) ); | |
| 714 | - } ); | |
| 715 | - | |
| 716 | - $( '.customify_background_select' ).on( 'change', function() { | |
| 717 | - preview( $( this ) ); | |
| 718 | - } ); | |
| 719 | - } | |
| 720 | - | |
| 721 | - // Add a file via the wp.media function | |
| 722 | - function addImage( event, selector ) { | |
| 723 | - | |
| 724 | - event.preventDefault(); | |
| 725 | - | |
| 726 | - var frame; | |
| 727 | - var jQueryel = jQuery( this ); | |
| 728 | - | |
| 729 | - // If the media frame already exists, reopen it. | |
| 730 | - if ( frame ) { | |
| 731 | - frame.open(); | |
| 732 | - return; | |
| 733 | - } | |
| 734 | - | |
| 735 | - // Create the media frame. | |
| 736 | - frame = wp.media( { | |
| 737 | - multiple: false, | |
| 738 | - library: { | |
| 739 | - //type: 'image' //Only allow images | |
| 740 | - }, | |
| 741 | - // Set the title of the modal. | |
| 742 | - title: jQueryel.data( 'choose' ), | |
| 743 | - | |
| 744 | - // Customize the submit button. | |
| 745 | - button: { | |
| 746 | - // Set the text of the button. | |
| 747 | - text: jQueryel.data( 'update' ) | |
| 748 | - // Tell the button not to close the modal, since we're | |
| 749 | - // going to refresh the page when the image is selected. | |
| 750 | - } | |
| 751 | - } ); | |
| 752 | - | |
| 753 | - // When an image is selected, run a callback. | |
| 754 | - frame.on( 'select', function() { | |
| 755 | - // Grab the selected attachment. | |
| 756 | - var attachment = frame.state().get( 'selection' ).first(); | |
| 757 | - frame.close(); | |
| 758 | - | |
| 759 | - if ( attachment.attributes.type !== "image" ) { | |
| 760 | - return; | |
| 761 | - } | |
| 762 | - | |
| 763 | - selector.find( '.upload' ).attr( 'value', attachment.attributes.url ); | |
| 764 | - selector.find( '.upload-id' ).attr( 'value', attachment.attributes.id ); | |
| 765 | - selector.find( '.upload-height' ).attr( 'value', attachment.attributes.height ); | |
| 766 | - selector.find( '.upload-width' ).attr( 'value', attachment.attributes.width ); | |
| 767 | - | |
| 768 | - var thumbSrc = attachment.attributes.url; | |
| 769 | - if ( ! _.isUndefined( attachment.attributes.sizes ) && ! _.isUndefined( attachment.attributes.sizes.thumbnail ) ) { | |
| 770 | - thumbSrc = attachment.attributes.sizes.thumbnail.url; | |
| 771 | - } else if ( ! _.isUndefined( attachment.attributes.sizes ) ) { | |
| 772 | - var height = attachment.attributes.height; | |
| 773 | - for ( var key in attachment.attributes.sizes ) { | |
| 774 | - var object = attachment.attributes.sizes[key]; | |
| 775 | - if ( object.height < height ) { | |
| 776 | - height = object.height; | |
| 777 | - thumbSrc = object.url; | |
| 778 | - } | |
| 779 | - } | |
| 780 | - } else { | |
| 781 | - thumbSrc = attachment.attributes.icon; | |
| 782 | - } | |
| 783 | - | |
| 784 | - selector.find( '.customify_background_input.background-image' ).val( attachment.attributes.url ); | |
| 785 | - | |
| 786 | - if ( !selector.find( '.upload' ).hasClass( 'noPreview' ) ) { | |
| 787 | - selector.find( '.preview_screenshot' ).empty().hide().append( '<img class="preview_image" src="' + thumbSrc + '">' ).slideDown( 'fast' ); | |
| 788 | - } | |
| 789 | - //selector.find('.media_upload_button').unbind(); | |
| 790 | - selector.find( '.remove-image' ).removeClass( 'hide' );//show "Remove" button | |
| 791 | - selector.find( '.customify_background_select' ).removeClass( 'hide' );//show "Remove" button | |
| 792 | - | |
| 793 | - preview( selector ); | |
| 794 | - } ); | |
| 795 | - | |
| 796 | - // Finally, open the modal. | |
| 797 | - frame.open(); | |
| 798 | - } | |
| 799 | - | |
| 800 | - // Update the background preview | |
| 801 | - function preview( selector ) { | |
| 802 | - | |
| 803 | - var $parent = selector.parents( '.customize-control-custom_background:first' ); | |
| 804 | - | |
| 805 | - if ( selector.hasClass( 'customize-control-custom_background' ) ) { | |
| 806 | - $parent = selector; | |
| 807 | - } | |
| 808 | - | |
| 809 | - if ( $parent.length > 0 ) { | |
| 810 | - $parent = $( $parent[0] ); | |
| 811 | - } else { | |
| 812 | - return; | |
| 813 | - } | |
| 814 | - | |
| 815 | - var image_holder = $parent.find( '.background-preview' ); | |
| 816 | - | |
| 817 | - if ( !image_holder ) { // No preview present | |
| 818 | - return; | |
| 819 | - } | |
| 820 | - | |
| 821 | - var the_id = $parent.find( '.button.background_upload_button' ).data( 'setting_id' ), | |
| 822 | - this_setting = api.instance( the_id ); | |
| 823 | - | |
| 824 | - var background_data = {}; | |
| 825 | - | |
| 826 | - $parent.find( '.customify_background_select, .customify_background_input' ).each( function() { | |
| 827 | - var data = $( this ).serializeArray(); | |
| 828 | - | |
| 829 | - data = data[0]; | |
| 830 | - if ( data && data.name.indexOf( '[background-' ) != -1 ) { | |
| 831 | - | |
| 832 | - background_data[$( this ).data( 'select_name' )] = data.value; | |
| 833 | - | |
| 834 | - //default_default[data.name] = data.value; | |
| 835 | - //if (data.name == "background-image") { | |
| 836 | - // css += data.name + ':url("' + data.value + '");'; | |
| 837 | - //} else { | |
| 838 | - // css += data.name + ':' + data.value + ';'; | |
| 839 | - //} | |
| 840 | - } | |
| 841 | - } ); | |
| 842 | - | |
| 843 | - api.instance( the_id ).set( background_data ); | |
| 844 | - //// Notify the customizer api about this change | |
| 845 | - api.trigger( 'change' ); | |
| 846 | - api.previewer.refresh(); | |
| 847 | - | |
| 848 | - //image_holder.attr('style', css).fadeIn(); | |
| 849 | - } | |
| 850 | - | |
| 851 | - // Update the background preview | |
| 852 | - function removeImage( parent ) { | |
| 853 | - var selector = parent.find( '.upload_button_div' ); | |
| 854 | - // This shouldn't have been run... | |
| 855 | - if ( !selector.find( '.remove-image' ).addClass( 'hide' ) ) { | |
| 856 | - return; | |
| 857 | - } | |
| 858 | - | |
| 859 | - selector.find( '.remove-image' ).addClass( 'hide' );//hide "Remove" button | |
| 860 | - parent.find( '.customify_background_select' ).addClass( 'hide' ); | |
| 861 | - | |
| 862 | - selector.find( '.upload' ).val( '' ); | |
| 863 | - selector.find( '.upload-id' ).val( '' ); | |
| 864 | - selector.find( '.upload-height' ).val( '' ); | |
| 865 | - selector.find( '.upload-width' ).val( '' ); | |
| 866 | - parent.find( '.customify_background_input.background-image' ).val( '' ); | |
| 867 | - | |
| 868 | - var customizer_id = selector.find( '.background_upload_button' ).data( 'setting_id' ), | |
| 869 | - this_setting = api.control( customizer_id + '_control' ), | |
| 870 | - current_vals = this_setting.setting(), | |
| 871 | - screenshot = parent.find( '.preview_screenshot' ), | |
| 872 | - to_array = $.map( current_vals, function( value, index ) { | |
| 873 | - return [value]; | |
| 874 | - } ); | |
| 875 | - | |
| 876 | - // Hide the screenshot | |
| 877 | - screenshot.slideUp(); | |
| 878 | - selector.find( '.remove-file' ).unbind(); | |
| 879 | - to_array['background-image'] = ''; | |
| 880 | - this_setting.setting( to_array ); | |
| 881 | - } | |
| 882 | - | |
| 883 | - return { | |
| 884 | - init: init | |
| 885 | - } | |
| 886 | - })( jQuery ); | |
| 887 | - | |
| 888 | - var getUrlVars = function( name ) { | |
| 889 | - var vars = [], hash; | |
| 890 | - var hashes = window.location.href.slice( window.location.href.indexOf( '?' ) + 1 ).split( '&' ); | |
| 891 | - for ( var i = 0; i < hashes.length; i++ ) { | |
| 892 | - hash = hashes[i].split( '=' ); | |
| 893 | - | |
| 894 | - vars.push( hash[0] ); | |
| 895 | - vars[hash[0]] = hash[1]; | |
| 896 | - } | |
| 897 | - | |
| 898 | - if ( ! _.isUndefined( vars[name] ) ) { | |
| 899 | - return vars[name]; | |
| 900 | - } | |
| 901 | - return false; | |
| 902 | - }; | |
| 903 | - | |
| 904 | - var isJsonString = function( str ) { | |
| 905 | - try { | |
| 906 | - JSON.parse( str ); | |
| 907 | - } catch ( e ) { | |
| 908 | - return false; | |
| 909 | - } | |
| 910 | - return true; | |
| 911 | - }; | |
| 912 | - } ); | |
| 913 | - | |
| 914 | - var Queue = function() { | |
| 915 | - var lastPromise = null; | |
| 916 | - var queueDeferred = null; | |
| 917 | - var methodDeferred = null; | |
| 918 | - | |
| 919 | - this.add_steps = function( key, steps, args ) { | |
| 920 | - var self = this; | |
| 921 | - this.methodDeferred = $.Deferred(); | |
| 922 | - this.queueDeferred = this.setup(); | |
| 923 | - | |
| 924 | - $.each( steps, function( i, step ) { | |
| 925 | - self.queue( key, step ); | |
| 926 | - } ); | |
| 927 | - }; | |
| 928 | - | |
| 929 | - this.process_remote_step = function( key, data, step ) { | |
| 930 | - var self = this; | |
| 931 | - | |
| 932 | - if ( _.isUndefined( data ) || _.isNull( data ) ) { | |
| 933 | - return false; | |
| 934 | - } | |
| 935 | - | |
| 936 | - var new_step = step; | |
| 937 | - $.each( data, function( i, k ) { | |
| 938 | -debugger; | |
| 939 | - // prepare data for new requests | |
| 940 | - new_step.recall_data = k.data; | |
| 941 | - new_step.recall_type = k.type; | |
| 942 | - new_step.type = 'recall'; | |
| 943 | - | |
| 944 | - self.queue( key, new_step, k.id ); | |
| 945 | - } ); | |
| 946 | - }; | |
| 947 | - | |
| 948 | - this.log_action = function( action, key, msg ) { | |
| 949 | - if ( action === 'start' ) { | |
| 950 | - $('.wpGrade-import-results' ).show(); | |
| 951 | - $('.wpGrade-import-results' ).append( '<span class="import_step_note imports_step_' + key + '" ><span class="step_info" data-balloon="Working on it" data-balloon-pos="up"></span>Importing ' + key + '</span>' ); | |
| 952 | - } else if ( action === 'end' ) { | |
| 953 | - var $notice = $('.imports_step_' + key + ' .step_info'); | |
| 954 | - | |
| 955 | - if ( $notice.length > 0 || msg !== "undefined") { | |
| 956 | - $notice.attr('data-balloon', msg); | |
| 957 | - $notice.addClass('success'); | |
| 958 | - } else { | |
| 959 | - $notice.attr('data-balloon', 'Done'); | |
| 960 | - $notice.addClass('failed'); | |
| 961 | - } | |
| 962 | - } | |
| 963 | - }; | |
| 964 | - | |
| 965 | - this.queue = function( key, data, step_key ) { | |
| 966 | - var self = this; | |
| 967 | - if ( ! _.isUndefined( step_key ) ) { | |
| 968 | - this.log_action( 'start', step_key ); | |
| 969 | - } | |
| 970 | - | |
| 971 | - // execute next queue method | |
| 972 | - this.queueDeferred.done( this.request( key, data, step_key ) ); | |
| 973 | - lastPromise = self.methodDeferred.promise(); | |
| 974 | - }; | |
| 975 | - | |
| 976 | - this.request = function( key, step, step_key ) { | |
| 977 | - var self = this; | |
| 978 | - // call actual method and wrap output in deferred | |
| 979 | - //setTimeout( function() { | |
| 980 | - var data_args = { | |
| 981 | - action: 'customify_import_step', | |
| 982 | - step_id: step.id, | |
| 983 | - step_type: step.type, | |
| 984 | - option_key: key | |
| 985 | - }; | |
| 986 | - | |
| 987 | - if ( ! _.isUndefined( step.recall_data ) ) { | |
| 988 | - data_args.recall_data = step.recall_data; | |
| 989 | - } | |
| 990 | - | |
| 991 | - if ( ! _.isUndefined( step.recall_type ) ) { | |
| 992 | - data_args.recall_type = step.recall_type; | |
| 993 | - } | |
| 994 | - | |
| 995 | - $.ajax( { | |
| 996 | - url: customify_settings.import_rest_url + 'customify/1.0/import', | |
| 997 | - method: 'POST', | |
| 998 | - beforeSend: function( xhr ) { | |
| 999 | - xhr.setRequestHeader( 'X-WP-Nonce', WP_API_Settings.nonce ); | |
| 1000 | - }, | |
| 1001 | - dataType: 'json', | |
| 1002 | - contentType: 'application/x-www-form-urlencoded; charset=UTF-8', | |
| 1003 | - data: data_args | |
| 1004 | - } ).done( function( response ) { | |
| 1005 | - if ( ! _.isUndefined( response.success ) && response.success ) { | |
| 1006 | - var results = response.data; | |
| 1007 | - if ( step.type === 'remote' ) { | |
| 1008 | - self.process_remote_step( key, results, step ); | |
| 1009 | - } | |
| 1010 | - } | |
| 1011 | - | |
| 1012 | - if ( ! _.isUndefined( step_key ) && ! _.isUndefined( response.message ) ) { | |
| 1013 | - self.log_action( 'end', step_key, response.message ); | |
| 1014 | - } | |
| 1015 | - } ); | |
| 1016 | - | |
| 1017 | - self.methodDeferred.resolve(); | |
| 1018 | - //}, 3450 ); | |
| 1019 | - }; | |
| 1020 | - | |
| 1021 | - this.setup = function() { | |
| 1022 | - var self = this; | |
| 1023 | - | |
| 1024 | - self.queueDeferred = $.Deferred(); | |
| 1025 | - | |
| 1026 | - // when the previous method returns, resolve this one | |
| 1027 | - $.when( lastPromise ).always( function() { | |
| 1028 | - self.queueDeferred.resolve(); | |
| 1029 | - } ); | |
| 1030 | - | |
| 1031 | - return self.queueDeferred.promise(); | |
| 1032 | - } | |
| 1033 | - }; | |
| 1034 | - | |
| 1035 | -})( jQuery, window ); | |
| 818 | + if (!_.isUndefined(vars[name])) { | |
| 819 | + return vars[name] | |
| 820 | + } | |
| 821 | + return false | |
| 822 | + } | |
| 823 | +})(jQuery, customify, wp) | |
