editor.js (4013B)
1 wp.customize.controlConstructor['kirki-editor'] = wp.customize.Control.extend({ 2 3 // When we're finished loading continue processing 4 ready: function() { 5 6 'use strict'; 7 8 var control = this, 9 element = control.container.find( 'textarea' ), 10 toggler = control.container.find( '.toggle-editor' ), 11 editorWrapper = jQuery( '#kirki_editor_pane' ), 12 wpEditorArea = jQuery( '#kirki_editor_pane textarea.wp-editor-area' ), 13 setChange, 14 content; 15 16 jQuery( window ).on('load', function() { 17 18 var editor = tinyMCE.get( 'kirki-editor' ); 19 20 // Add the button text 21 toggler.html( window.kirki.l10n[ control.params.kirkiConfig ]['open-editor'] ); 22 23 toggler.on( 'click', function() { 24 25 // Toggle the editor. 26 control.toggleEditor(); 27 28 // Change button. 29 control.changeButton(); 30 31 // Add the content to the editor. 32 control.setEditorContent( editor ); 33 34 // Modify the preview-area height. 35 control.previewHeight(); 36 37 }); 38 39 // Update the option from the editor contents on change. 40 if ( editor ) { 41 42 editor.onChange.add( function( ed, e ) { 43 44 ed.save(); 45 content = editor.getContent(); 46 clearTimeout( setChange ); 47 setChange = setTimeout( function() { 48 element.val( content ).trigger( 'change' ); 49 wp.customize.instance( control.getEditorWrapperSetting() ).set( content ); 50 }, 500 ); 51 52 }); 53 54 } 55 56 // Handle text mode. 57 wpEditorArea.on( 'change keyup paste', function() { 58 wp.customize.instance( control.getEditorWrapperSetting() ).set( jQuery( this ).val() ); 59 }); 60 61 }); 62 63 }, 64 65 /** 66 * Modify the button text and classes. 67 */ 68 changeButton: function() { 69 70 'use strict'; 71 72 var control = this, 73 editorWrapper = jQuery( '#kirki_editor_pane' ); 74 75 // Reset all editor buttons. 76 // Necessary if we have multiple editor fields. 77 jQuery( '.customize-control-kirki-editor .toggle-editor' ).html( window.kirki.l10n[ control.params.kirkiConfig ]['switch-editor'] ); 78 79 // Change the button text & color. 80 if ( false !== control.getEditorWrapperSetting() ) { 81 jQuery( '.customize-control-kirki-editor .toggle-editor' ).html( window.kirki.l10n[ control.params.kirkiConfig ]['switch-editor'] ); 82 jQuery( '#customize-control-' + control.getEditorWrapperSetting() + ' .toggle-editor' ).html( window.kirki.l10n[ control.params.kirkiConfig ]['close-editor'] ); 83 } else { 84 jQuery( '.customize-control-kirki-editor .toggle-editor' ).html( window.kirki.l10n[ control.params.kirkiConfig ]['open-editor'] ); 85 } 86 87 }, 88 89 /** 90 * Toggle the editor. 91 */ 92 toggleEditor: function() { 93 94 'use strict'; 95 96 var control = this, 97 editorWrapper = jQuery( '#kirki_editor_pane' ); 98 99 if ( ! control.getEditorWrapperSetting() || control.id !== control.getEditorWrapperSetting() ) { 100 editorWrapper.removeClass(); 101 editorWrapper.addClass( control.id ); 102 } else { 103 editorWrapper.removeClass(); 104 editorWrapper.addClass( 'hide' ); 105 } 106 107 }, 108 109 /** 110 * Set the content. 111 */ 112 setEditorContent: function( editor ) { 113 114 'use strict'; 115 116 var control = this, 117 editorWrapper = jQuery( '#kirki_editor_pane' ); 118 119 editor.setContent( control.setting._value ); 120 121 }, 122 123 /** 124 * Gets the setting from the editor wrapper class. 125 */ 126 getEditorWrapperSetting: function() { 127 128 'use strict'; 129 130 if ( jQuery( '#kirki_editor_pane' ).hasClass( 'hide' ) ) { 131 return false; 132 } 133 134 if ( jQuery( '#kirki_editor_pane' ).attr( 'class' ) ) { 135 return jQuery( '#kirki_editor_pane' ).attr( 'class' ); 136 } else { 137 return false; 138 } 139 140 }, 141 142 /** 143 * Modifies the height of the preview area. 144 */ 145 previewHeight: function() { 146 if ( jQuery( '#kirki_editor_pane' ).hasClass( 'hide' ) ) { 147 if ( jQuery( '#customize-preview' ).hasClass( 'is-kirki-editor-open' ) ) { 148 jQuery( '#customize-preview' ).removeClass( 'is-kirki-editor-open' ); 149 } 150 } else { 151 if ( ! jQuery( '#customize-preview' ).hasClass( 'is-kirki-editor-open' ) ) { 152 jQuery( '#customize-preview' ).addClass( 'is-kirki-editor-open' ); 153 } 154 } 155 } 156 157 });