diff options
Diffstat (limited to 'www/crm/wp-admin/js/widgets')
| -rw-r--r-- | www/crm/wp-admin/js/widgets/custom-html-widgets.js | 456 | ||||
| -rw-r--r-- | www/crm/wp-admin/js/widgets/custom-html-widgets.min.js | 1 | ||||
| -rw-r--r-- | www/crm/wp-admin/js/widgets/media-audio-widget.js | 154 | ||||
| -rw-r--r-- | www/crm/wp-admin/js/widgets/media-audio-widget.min.js | 1 | ||||
| -rw-r--r-- | www/crm/wp-admin/js/widgets/media-gallery-widget.js | 341 | ||||
| -rw-r--r-- | www/crm/wp-admin/js/widgets/media-gallery-widget.min.js | 1 | ||||
| -rw-r--r-- | www/crm/wp-admin/js/widgets/media-image-widget.js | 170 | ||||
| -rw-r--r-- | www/crm/wp-admin/js/widgets/media-image-widget.min.js | 1 | ||||
| -rw-r--r-- | www/crm/wp-admin/js/widgets/media-video-widget.js | 256 | ||||
| -rw-r--r-- | www/crm/wp-admin/js/widgets/media-video-widget.min.js | 1 | ||||
| -rw-r--r-- | www/crm/wp-admin/js/widgets/media-widgets.js | 1334 | ||||
| -rw-r--r-- | www/crm/wp-admin/js/widgets/media-widgets.min.js | 1 | ||||
| -rw-r--r-- | www/crm/wp-admin/js/widgets/text-widgets.js | 552 | ||||
| -rw-r--r-- | www/crm/wp-admin/js/widgets/text-widgets.min.js | 1 |
14 files changed, 3270 insertions, 0 deletions
diff --git a/www/crm/wp-admin/js/widgets/custom-html-widgets.js b/www/crm/wp-admin/js/widgets/custom-html-widgets.js new file mode 100644 index 00000000..93aa901c --- /dev/null +++ b/www/crm/wp-admin/js/widgets/custom-html-widgets.js @@ -0,0 +1,456 @@ +/** + * @output wp-admin/js/widgets/custom-html-widgets.js + */ + +/* global wp */ +/* eslint consistent-this: [ "error", "control" ] */ +/* eslint no-magic-numbers: ["error", { "ignore": [0,1,-1] }] */ + +/** + * @namespace wp.customHtmlWidget + * @memberOf wp + */ +wp.customHtmlWidgets = ( function( $ ) { + 'use strict'; + + var component = { + idBases: [ 'custom_html' ], + codeEditorSettings: {}, + l10n: { + errorNotice: { + singular: '', + plural: '' + } + } + }; + + component.CustomHtmlWidgetControl = Backbone.View.extend(/** @lends wp.customHtmlWidgets.CustomHtmlWidgetControl.prototype */{ + + /** + * View events. + * + * @type {Object} + */ + events: {}, + + /** + * Text widget control. + * + * @constructs wp.customHtmlWidgets.CustomHtmlWidgetControl + * @augments Backbone.View + * @abstract + * + * @param {Object} options - Options. + * @param {jQuery} options.el - Control field container element. + * @param {jQuery} options.syncContainer - Container element where fields are synced for the server. + * + * @returns {void} + */ + initialize: function initialize( options ) { + var control = this; + + if ( ! options.el ) { + throw new Error( 'Missing options.el' ); + } + if ( ! options.syncContainer ) { + throw new Error( 'Missing options.syncContainer' ); + } + + Backbone.View.prototype.initialize.call( control, options ); + control.syncContainer = options.syncContainer; + control.widgetIdBase = control.syncContainer.parent().find( '.id_base' ).val(); + control.widgetNumber = control.syncContainer.parent().find( '.widget_number' ).val(); + control.customizeSettingId = 'widget_' + control.widgetIdBase + '[' + String( control.widgetNumber ) + ']'; + + control.$el.addClass( 'custom-html-widget-fields' ); + control.$el.html( wp.template( 'widget-custom-html-control-fields' )( { codeEditorDisabled: component.codeEditorSettings.disabled } ) ); + + control.errorNoticeContainer = control.$el.find( '.code-editor-error-container' ); + control.currentErrorAnnotations = []; + control.saveButton = control.syncContainer.add( control.syncContainer.parent().find( '.widget-control-actions' ) ).find( '.widget-control-save, #savewidget' ); + control.saveButton.addClass( 'custom-html-widget-save-button' ); // To facilitate style targeting. + + control.fields = { + title: control.$el.find( '.title' ), + content: control.$el.find( '.content' ) + }; + + // Sync input fields to hidden sync fields which actually get sent to the server. + _.each( control.fields, function( fieldInput, fieldName ) { + fieldInput.on( 'input change', function updateSyncField() { + var syncInput = control.syncContainer.find( '.sync-input.' + fieldName ); + if ( syncInput.val() !== fieldInput.val() ) { + syncInput.val( fieldInput.val() ); + syncInput.trigger( 'change' ); + } + }); + + // Note that syncInput cannot be re-used because it will be destroyed with each widget-updated event. + fieldInput.val( control.syncContainer.find( '.sync-input.' + fieldName ).val() ); + }); + }, + + /** + * Update input fields from the sync fields. + * + * This function is called at the widget-updated and widget-synced events. + * A field will only be updated if it is not currently focused, to avoid + * overwriting content that the user is entering. + * + * @returns {void} + */ + updateFields: function updateFields() { + var control = this, syncInput; + + if ( ! control.fields.title.is( document.activeElement ) ) { + syncInput = control.syncContainer.find( '.sync-input.title' ); + control.fields.title.val( syncInput.val() ); + } + + /* + * Prevent updating content when the editor is focused or if there are current error annotations, + * to prevent the editor's contents from getting sanitized as soon as a user removes focus from + * the editor. This is particularly important for users who cannot unfiltered_html. + */ + control.contentUpdateBypassed = control.fields.content.is( document.activeElement ) || control.editor && control.editor.codemirror.state.focused || 0 !== control.currentErrorAnnotations.length; + if ( ! control.contentUpdateBypassed ) { + syncInput = control.syncContainer.find( '.sync-input.content' ); + control.fields.content.val( syncInput.val() ); + } + }, + + /** + * Show linting error notice. + * + * @param {Array} errorAnnotations - Error annotations. + * @returns {void} + */ + updateErrorNotice: function( errorAnnotations ) { + var control = this, errorNotice, message = '', customizeSetting; + + if ( 1 === errorAnnotations.length ) { + message = component.l10n.errorNotice.singular.replace( '%d', '1' ); + } else if ( errorAnnotations.length > 1 ) { + message = component.l10n.errorNotice.plural.replace( '%d', String( errorAnnotations.length ) ); + } + + if ( control.fields.content[0].setCustomValidity ) { + control.fields.content[0].setCustomValidity( message ); + } + + if ( wp.customize && wp.customize.has( control.customizeSettingId ) ) { + customizeSetting = wp.customize( control.customizeSettingId ); + customizeSetting.notifications.remove( 'htmlhint_error' ); + if ( 0 !== errorAnnotations.length ) { + customizeSetting.notifications.add( 'htmlhint_error', new wp.customize.Notification( 'htmlhint_error', { + message: message, + type: 'error' + } ) ); + } + } else if ( 0 !== errorAnnotations.length ) { + errorNotice = $( '<div class="inline notice notice-error notice-alt"></div>' ); + errorNotice.append( $( '<p></p>', { + text: message + } ) ); + control.errorNoticeContainer.empty(); + control.errorNoticeContainer.append( errorNotice ); + control.errorNoticeContainer.slideDown( 'fast' ); + wp.a11y.speak( message ); + } else { + control.errorNoticeContainer.slideUp( 'fast' ); + } + }, + + /** + * Initialize editor. + * + * @returns {void} + */ + initializeEditor: function initializeEditor() { + var control = this, settings; + + if ( component.codeEditorSettings.disabled ) { + return; + } + + settings = _.extend( {}, component.codeEditorSettings, { + + /** + * Handle tabbing to the field before the editor. + * + * @ignore + * + * @returns {void} + */ + onTabPrevious: function onTabPrevious() { + control.fields.title.focus(); + }, + + /** + * Handle tabbing to the field after the editor. + * + * @ignore + * + * @returns {void} + */ + onTabNext: function onTabNext() { + var tabbables = control.syncContainer.add( control.syncContainer.parent().find( '.widget-position, .widget-control-actions' ) ).find( ':tabbable' ); + tabbables.first().focus(); + }, + + /** + * Disable save button and store linting errors for use in updateFields. + * + * @ignore + * + * @param {Array} errorAnnotations - Error notifications. + * @returns {void} + */ + onChangeLintingErrors: function onChangeLintingErrors( errorAnnotations ) { + control.currentErrorAnnotations = errorAnnotations; + }, + + /** + * Update error notice. + * + * @ignore + * + * @param {Array} errorAnnotations - Error annotations. + * @returns {void} + */ + onUpdateErrorNotice: function onUpdateErrorNotice( errorAnnotations ) { + control.saveButton.toggleClass( 'validation-blocked disabled', errorAnnotations.length > 0 ); + control.updateErrorNotice( errorAnnotations ); + } + }); + + control.editor = wp.codeEditor.initialize( control.fields.content, settings ); + + // Improve the editor accessibility. + $( control.editor.codemirror.display.lineDiv ) + .attr({ + role: 'textbox', + 'aria-multiline': 'true', + 'aria-labelledby': control.fields.content[0].id + '-label', + 'aria-describedby': 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4' + }); + + // Focus the editor when clicking on its label. + $( '#' + control.fields.content[0].id + '-label' ).on( 'click', function() { + control.editor.codemirror.focus(); + }); + + control.fields.content.on( 'change', function() { + if ( this.value !== control.editor.codemirror.getValue() ) { + control.editor.codemirror.setValue( this.value ); + } + }); + control.editor.codemirror.on( 'change', function() { + var value = control.editor.codemirror.getValue(); + if ( value !== control.fields.content.val() ) { + control.fields.content.val( value ).trigger( 'change' ); + } + }); + + // Make sure the editor gets updated if the content was updated on the server (sanitization) but not updated in the editor since it was focused. + control.editor.codemirror.on( 'blur', function() { + if ( control.contentUpdateBypassed ) { + control.syncContainer.find( '.sync-input.content' ).trigger( 'change' ); + } + }); + + // Prevent hitting Esc from collapsing the widget control. + if ( wp.customize ) { + control.editor.codemirror.on( 'keydown', function onKeydown( codemirror, event ) { + var escKeyCode = 27; + if ( escKeyCode === event.keyCode ) { + event.stopPropagation(); + } + }); + } + } + }); + + /** + * Mapping of widget ID to instances of CustomHtmlWidgetControl subclasses. + * + * @alias wp.customHtmlWidgets.widgetControls + * + * @type {Object.<string, wp.textWidgets.CustomHtmlWidgetControl>} + */ + component.widgetControls = {}; + + /** + * Handle widget being added or initialized for the first time at the widget-added event. + * + * @alias wp.customHtmlWidgets.handleWidgetAdded + * + * @param {jQuery.Event} event - Event. + * @param {jQuery} widgetContainer - Widget container element. + * + * @returns {void} + */ + component.handleWidgetAdded = function handleWidgetAdded( event, widgetContainer ) { + var widgetForm, idBase, widgetControl, widgetId, animatedCheckDelay = 50, renderWhenAnimationDone, fieldContainer, syncContainer; + widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); // Note: '.form' appears in the customizer, whereas 'form' on the widgets admin screen. + + idBase = widgetForm.find( '> .id_base' ).val(); + if ( -1 === component.idBases.indexOf( idBase ) ) { + return; + } + + // Prevent initializing already-added widgets. + widgetId = widgetForm.find( '.widget-id' ).val(); + if ( component.widgetControls[ widgetId ] ) { + return; + } + + /* + * Create a container element for the widget control fields. + * This is inserted into the DOM immediately before the the .widget-content + * element because the contents of this element are essentially "managed" + * by PHP, where each widget update cause the entire element to be emptied + * and replaced with the rendered output of WP_Widget::form() which is + * sent back in Ajax request made to save/update the widget instance. + * To prevent a "flash of replaced DOM elements and re-initialized JS + * components", the JS template is rendered outside of the normal form + * container. + */ + fieldContainer = $( '<div></div>' ); + syncContainer = widgetContainer.find( '.widget-content:first' ); + syncContainer.before( fieldContainer ); + + widgetControl = new component.CustomHtmlWidgetControl({ + el: fieldContainer, + syncContainer: syncContainer + }); + + component.widgetControls[ widgetId ] = widgetControl; + + /* + * Render the widget once the widget parent's container finishes animating, + * as the widget-added event fires with a slideDown of the container. + * This ensures that the textarea is visible and the editor can be initialized. + */ + renderWhenAnimationDone = function() { + if ( ! ( wp.customize ? widgetContainer.parent().hasClass( 'expanded' ) : widgetContainer.hasClass( 'open' ) ) ) { // Core merge: The wp.customize condition can be eliminated with this change being in core: https://github.com/xwp/wordpress-develop/pull/247/commits/5322387d + setTimeout( renderWhenAnimationDone, animatedCheckDelay ); + } else { + widgetControl.initializeEditor(); + } + }; + renderWhenAnimationDone(); + }; + + /** + * Setup widget in accessibility mode. + * + * @alias wp.customHtmlWidgets.setupAccessibleMode + * + * @returns {void} + */ + component.setupAccessibleMode = function setupAccessibleMode() { + var widgetForm, idBase, widgetControl, fieldContainer, syncContainer; + widgetForm = $( '.editwidget > form' ); + if ( 0 === widgetForm.length ) { + return; + } + + idBase = widgetForm.find( '> .widget-control-actions > .id_base' ).val(); + if ( -1 === component.idBases.indexOf( idBase ) ) { + return; + } + + fieldContainer = $( '<div></div>' ); + syncContainer = widgetForm.find( '> .widget-inside' ); + syncContainer.before( fieldContainer ); + + widgetControl = new component.CustomHtmlWidgetControl({ + el: fieldContainer, + syncContainer: syncContainer + }); + + widgetControl.initializeEditor(); + }; + + /** + * Sync widget instance data sanitized from server back onto widget model. + * + * This gets called via the 'widget-updated' event when saving a widget from + * the widgets admin screen and also via the 'widget-synced' event when making + * a change to a widget in the customizer. + * + * @alias wp.customHtmlWidgets.handleWidgetUpdated + * + * @param {jQuery.Event} event - Event. + * @param {jQuery} widgetContainer - Widget container element. + * @returns {void} + */ + component.handleWidgetUpdated = function handleWidgetUpdated( event, widgetContainer ) { + var widgetForm, widgetId, widgetControl, idBase; + widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); + + idBase = widgetForm.find( '> .id_base' ).val(); + if ( -1 === component.idBases.indexOf( idBase ) ) { + return; + } + + widgetId = widgetForm.find( '> .widget-id' ).val(); + widgetControl = component.widgetControls[ widgetId ]; + if ( ! widgetControl ) { + return; + } + + widgetControl.updateFields(); + }; + + /** + * Initialize functionality. + * + * This function exists to prevent the JS file from having to boot itself. + * When WordPress enqueues this script, it should have an inline script + * attached which calls wp.textWidgets.init(). + * + * @alias wp.customHtmlWidgets.init + * + * @param {object} settings - Options for code editor, exported from PHP. + * + * @returns {void} + */ + component.init = function init( settings ) { + var $document = $( document ); + _.extend( component.codeEditorSettings, settings ); + + $document.on( 'widget-added', component.handleWidgetAdded ); + $document.on( 'widget-synced widget-updated', component.handleWidgetUpdated ); + + /* + * Manually trigger widget-added events for media widgets on the admin + * screen once they are expanded. The widget-added event is not triggered + * for each pre-existing widget on the widgets admin screen like it is + * on the customizer. Likewise, the customizer only triggers widget-added + * when the widget is expanded to just-in-time construct the widget form + * when it is actually going to be displayed. So the following implements + * the same for the widgets admin screen, to invoke the widget-added + * handler when a pre-existing media widget is expanded. + */ + $( function initializeExistingWidgetContainers() { + var widgetContainers; + if ( 'widgets' !== window.pagenow ) { + return; + } + widgetContainers = $( '.widgets-holder-wrap:not(#available-widgets)' ).find( 'div.widget' ); + widgetContainers.one( 'click.toggle-widget-expanded', function toggleWidgetExpanded() { + var widgetContainer = $( this ); + component.handleWidgetAdded( new jQuery.Event( 'widget-added' ), widgetContainer ); + }); + + // Accessibility mode. + $( window ).on( 'load', function() { + component.setupAccessibleMode(); + }); + }); + }; + + return component; +})( jQuery ); diff --git a/www/crm/wp-admin/js/widgets/custom-html-widgets.min.js b/www/crm/wp-admin/js/widgets/custom-html-widgets.min.js new file mode 100644 index 00000000..285d018d --- /dev/null +++ b/www/crm/wp-admin/js/widgets/custom-html-widgets.min.js @@ -0,0 +1 @@ +wp.customHtmlWidgets=function(a){"use strict";var b={idBases:["custom_html"],codeEditorSettings:{},l10n:{errorNotice:{singular:"",plural:""}}};return b.CustomHtmlWidgetControl=Backbone.View.extend({events:{},initialize:function(a){var c=this;if(!a.el)throw new Error("Missing options.el");if(!a.syncContainer)throw new Error("Missing options.syncContainer");Backbone.View.prototype.initialize.call(c,a),c.syncContainer=a.syncContainer,c.widgetIdBase=c.syncContainer.parent().find(".id_base").val(),c.widgetNumber=c.syncContainer.parent().find(".widget_number").val(),c.customizeSettingId="widget_"+c.widgetIdBase+"["+String(c.widgetNumber)+"]",c.$el.addClass("custom-html-widget-fields"),c.$el.html(wp.template("widget-custom-html-control-fields")({codeEditorDisabled:b.codeEditorSettings.disabled})),c.errorNoticeContainer=c.$el.find(".code-editor-error-container"),c.currentErrorAnnotations=[],c.saveButton=c.syncContainer.add(c.syncContainer.parent().find(".widget-control-actions")).find(".widget-control-save, #savewidget"),c.saveButton.addClass("custom-html-widget-save-button"),c.fields={title:c.$el.find(".title"),content:c.$el.find(".content")},_.each(c.fields,function(a,b){a.on("input change",function(){var d=c.syncContainer.find(".sync-input."+b);d.val()!==a.val()&&(d.val(a.val()),d.trigger("change"))}),a.val(c.syncContainer.find(".sync-input."+b).val())})},updateFields:function(){var a,b=this;b.fields.title.is(document.activeElement)||(a=b.syncContainer.find(".sync-input.title"),b.fields.title.val(a.val())),b.contentUpdateBypassed=b.fields.content.is(document.activeElement)||b.editor&&b.editor.codemirror.state.focused||0!==b.currentErrorAnnotations.length,b.contentUpdateBypassed||(a=b.syncContainer.find(".sync-input.content"),b.fields.content.val(a.val()))},updateErrorNotice:function(c){var d,e,f=this,g="";1===c.length?g=b.l10n.errorNotice.singular.replace("%d","1"):c.length>1&&(g=b.l10n.errorNotice.plural.replace("%d",String(c.length))),f.fields.content[0].setCustomValidity&&f.fields.content[0].setCustomValidity(g),wp.customize&&wp.customize.has(f.customizeSettingId)?(e=wp.customize(f.customizeSettingId),e.notifications.remove("htmlhint_error"),0!==c.length&&e.notifications.add("htmlhint_error",new wp.customize.Notification("htmlhint_error",{message:g,type:"error"}))):0!==c.length?(d=a('<div class="inline notice notice-error notice-alt"></div>'),d.append(a("<p></p>",{text:g})),f.errorNoticeContainer.empty(),f.errorNoticeContainer.append(d),f.errorNoticeContainer.slideDown("fast"),wp.a11y.speak(g)):f.errorNoticeContainer.slideUp("fast")},initializeEditor:function(){var c,d=this;b.codeEditorSettings.disabled||(c=_.extend({},b.codeEditorSettings,{onTabPrevious:function(){d.fields.title.focus()},onTabNext:function(){var a=d.syncContainer.add(d.syncContainer.parent().find(".widget-position, .widget-control-actions")).find(":tabbable");a.first().focus()},onChangeLintingErrors:function(a){d.currentErrorAnnotations=a},onUpdateErrorNotice:function(a){d.saveButton.toggleClass("validation-blocked disabled",a.length>0),d.updateErrorNotice(a)}}),d.editor=wp.codeEditor.initialize(d.fields.content,c),a(d.editor.codemirror.display.lineDiv).attr({role:"textbox","aria-multiline":"true","aria-labelledby":d.fields.content[0].id+"-label","aria-describedby":"editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4"}),a("#"+d.fields.content[0].id+"-label").on("click",function(){d.editor.codemirror.focus()}),d.fields.content.on("change",function(){this.value!==d.editor.codemirror.getValue()&&d.editor.codemirror.setValue(this.value)}),d.editor.codemirror.on("change",function(){var a=d.editor.codemirror.getValue();a!==d.fields.content.val()&&d.fields.content.val(a).trigger("change")}),d.editor.codemirror.on("blur",function(){d.contentUpdateBypassed&&d.syncContainer.find(".sync-input.content").trigger("change")}),wp.customize&&d.editor.codemirror.on("keydown",function(a,b){var c=27;c===b.keyCode&&b.stopPropagation()}))}}),b.widgetControls={},b.handleWidgetAdded=function(c,d){var e,f,g,h,i,j,k,l=50;e=d.find("> .widget-inside > .form, > .widget-inside > form"),f=e.find("> .id_base").val(),-1!==b.idBases.indexOf(f)&&(h=e.find(".widget-id").val(),b.widgetControls[h]||(j=a("<div></div>"),k=d.find(".widget-content:first"),k.before(j),g=new b.CustomHtmlWidgetControl({el:j,syncContainer:k}),b.widgetControls[h]=g,(i=function(){(wp.customize?d.parent().hasClass("expanded"):d.hasClass("open"))?g.initializeEditor():setTimeout(i,l)})()))},b.setupAccessibleMode=function(){var c,d,e,f,g;c=a(".editwidget > form"),0!==c.length&&(d=c.find("> .widget-control-actions > .id_base").val(),-1!==b.idBases.indexOf(d)&&(f=a("<div></div>"),g=c.find("> .widget-inside"),g.before(f),e=new b.CustomHtmlWidgetControl({el:f,syncContainer:g}),e.initializeEditor()))},b.handleWidgetUpdated=function(a,c){var d,e,f,g;d=c.find("> .widget-inside > .form, > .widget-inside > form"),g=d.find("> .id_base").val(),-1!==b.idBases.indexOf(g)&&(e=d.find("> .widget-id").val(),f=b.widgetControls[e],f&&f.updateFields())},b.init=function(c){var d=a(document);_.extend(b.codeEditorSettings,c),d.on("widget-added",b.handleWidgetAdded),d.on("widget-synced widget-updated",b.handleWidgetUpdated),a(function(){var c;"widgets"===window.pagenow&&(c=a(".widgets-holder-wrap:not(#available-widgets)").find("div.widget"),c.one("click.toggle-widget-expanded",function(){var c=a(this);b.handleWidgetAdded(new jQuery.Event("widget-added"),c)}),a(window).on("load",function(){b.setupAccessibleMode()}))})},b}(jQuery);
\ No newline at end of file diff --git a/www/crm/wp-admin/js/widgets/media-audio-widget.js b/www/crm/wp-admin/js/widgets/media-audio-widget.js new file mode 100644 index 00000000..e050c30a --- /dev/null +++ b/www/crm/wp-admin/js/widgets/media-audio-widget.js @@ -0,0 +1,154 @@ +/** + * @output wp-admin/js/widgets/media-audio-widget.js + */ + +/* eslint consistent-this: [ "error", "control" ] */ +(function( component ) { + 'use strict'; + + var AudioWidgetModel, AudioWidgetControl, AudioDetailsMediaFrame; + + /** + * Custom audio details frame that removes the replace-audio state. + * + * @class wp.mediaWidgets.controlConstructors~AudioDetailsMediaFrame + * @augments wp.media.view.MediaFrame.AudioDetails + */ + AudioDetailsMediaFrame = wp.media.view.MediaFrame.AudioDetails.extend(/** @lends wp.mediaWidgets.controlConstructors~AudioDetailsMediaFrame.prototype */{ + + /** + * Create the default states. + * + * @returns {void} + */ + createStates: function createStates() { + this.states.add([ + new wp.media.controller.AudioDetails({ + media: this.media + }), + + new wp.media.controller.MediaLibrary({ + type: 'audio', + id: 'add-audio-source', + title: wp.media.view.l10n.audioAddSourceTitle, + toolbar: 'add-audio-source', + media: this.media, + menu: false + }) + ]); + } + }); + + /** + * Audio widget model. + * + * See WP_Widget_Audio::enqueue_admin_scripts() for amending prototype from PHP exports. + * + * @class wp.mediaWidgets.modelConstructors.media_audio + * @augments wp.mediaWidgets.MediaWidgetModel + */ + AudioWidgetModel = component.MediaWidgetModel.extend({}); + + /** + * Audio widget control. + * + * See WP_Widget_Audio::enqueue_admin_scripts() for amending prototype from PHP exports. + * + * @class wp.mediaWidgets.controlConstructors.media_audio + * @augments wp.mediaWidgets.MediaWidgetControl + */ + AudioWidgetControl = component.MediaWidgetControl.extend(/** @lends wp.mediaWidgets.controlConstructors.media_audio.prototype */{ + + /** + * Show display settings. + * + * @type {boolean} + */ + showDisplaySettings: false, + + /** + * Map model props to media frame props. + * + * @param {Object} modelProps - Model props. + * @returns {Object} Media frame props. + */ + mapModelToMediaFrameProps: function mapModelToMediaFrameProps( modelProps ) { + var control = this, mediaFrameProps; + mediaFrameProps = component.MediaWidgetControl.prototype.mapModelToMediaFrameProps.call( control, modelProps ); + mediaFrameProps.link = 'embed'; + return mediaFrameProps; + }, + + /** + * Render preview. + * + * @returns {void} + */ + renderPreview: function renderPreview() { + var control = this, previewContainer, previewTemplate, attachmentId, attachmentUrl; + attachmentId = control.model.get( 'attachment_id' ); + attachmentUrl = control.model.get( 'url' ); + + if ( ! attachmentId && ! attachmentUrl ) { + return; + } + + previewContainer = control.$el.find( '.media-widget-preview' ); + previewTemplate = wp.template( 'wp-media-widget-audio-preview' ); + + previewContainer.html( previewTemplate({ + model: { + attachment_id: control.model.get( 'attachment_id' ), + src: attachmentUrl + }, + error: control.model.get( 'error' ) + })); + wp.mediaelement.initialize(); + }, + + /** + * Open the media audio-edit frame to modify the selected item. + * + * @returns {void} + */ + editMedia: function editMedia() { + var control = this, mediaFrame, metadata, updateCallback; + + metadata = control.mapModelToMediaFrameProps( control.model.toJSON() ); + + // Set up the media frame. + mediaFrame = new AudioDetailsMediaFrame({ + frame: 'audio', + state: 'audio-details', + metadata: metadata + }); + wp.media.frame = mediaFrame; + mediaFrame.$el.addClass( 'media-widget' ); + + updateCallback = function( mediaFrameProps ) { + + // Update cached attachment object to avoid having to re-fetch. This also triggers re-rendering of preview. + control.selectedAttachment.set( mediaFrameProps ); + + control.model.set( _.extend( + control.model.defaults(), + control.mapMediaToModelProps( mediaFrameProps ), + { error: false } + ) ); + }; + + mediaFrame.state( 'audio-details' ).on( 'update', updateCallback ); + mediaFrame.state( 'replace-audio' ).on( 'replace', updateCallback ); + mediaFrame.on( 'close', function() { + mediaFrame.detach(); + }); + + mediaFrame.open(); + } + }); + + // Exports. + component.controlConstructors.media_audio = AudioWidgetControl; + component.modelConstructors.media_audio = AudioWidgetModel; + +})( wp.mediaWidgets ); diff --git a/www/crm/wp-admin/js/widgets/media-audio-widget.min.js b/www/crm/wp-admin/js/widgets/media-audio-widget.min.js new file mode 100644 index 00000000..d816f516 --- /dev/null +++ b/www/crm/wp-admin/js/widgets/media-audio-widget.min.js @@ -0,0 +1 @@ +!function(a){"use strict";var b,c,d;d=wp.media.view.MediaFrame.AudioDetails.extend({createStates:function(){this.states.add([new wp.media.controller.AudioDetails({media:this.media}),new wp.media.controller.MediaLibrary({type:"audio",id:"add-audio-source",title:wp.media.view.l10n.audioAddSourceTitle,toolbar:"add-audio-source",media:this.media,menu:!1})])}}),b=a.MediaWidgetModel.extend({}),c=a.MediaWidgetControl.extend({showDisplaySettings:!1,mapModelToMediaFrameProps:function(b){var c,d=this;return c=a.MediaWidgetControl.prototype.mapModelToMediaFrameProps.call(d,b),c.link="embed",c},renderPreview:function(){var a,b,c,d,e=this;c=e.model.get("attachment_id"),d=e.model.get("url"),(c||d)&&(a=e.$el.find(".media-widget-preview"),b=wp.template("wp-media-widget-audio-preview"),a.html(b({model:{attachment_id:e.model.get("attachment_id"),src:d},error:e.model.get("error")})),wp.mediaelement.initialize())},editMedia:function(){var a,b,c,e=this;b=e.mapModelToMediaFrameProps(e.model.toJSON()),a=new d({frame:"audio",state:"audio-details",metadata:b}),wp.media.frame=a,a.$el.addClass("media-widget"),c=function(a){e.selectedAttachment.set(a),e.model.set(_.extend(e.model.defaults(),e.mapMediaToModelProps(a),{error:!1}))},a.state("audio-details").on("update",c),a.state("replace-audio").on("replace",c),a.on("close",function(){a.detach()}),a.open()}}),a.controlConstructors.media_audio=c,a.modelConstructors.media_audio=b}(wp.mediaWidgets);
\ No newline at end of file diff --git a/www/crm/wp-admin/js/widgets/media-gallery-widget.js b/www/crm/wp-admin/js/widgets/media-gallery-widget.js new file mode 100644 index 00000000..45671e7e --- /dev/null +++ b/www/crm/wp-admin/js/widgets/media-gallery-widget.js @@ -0,0 +1,341 @@ +/** + * @output wp-admin/js/widgets/media-gallery-widget.js + */ + +/* eslint consistent-this: [ "error", "control" ] */ +(function( component ) { + 'use strict'; + + var GalleryWidgetModel, GalleryWidgetControl, GalleryDetailsMediaFrame; + + /** + * Custom gallery details frame. + * + * @since 4.9.0 + * @class wp.mediaWidgets~GalleryDetailsMediaFrame + * @augments wp.media.view.MediaFrame.Post + */ + GalleryDetailsMediaFrame = wp.media.view.MediaFrame.Post.extend(/** @lends wp.mediaWidgets~GalleryDetailsMediaFrame.prototype */{ + + /** + * Create the default states. + * + * @since 4.9.0 + * @returns {void} + */ + createStates: function createStates() { + this.states.add([ + new wp.media.controller.Library({ + id: 'gallery', + title: wp.media.view.l10n.createGalleryTitle, + priority: 40, + toolbar: 'main-gallery', + filterable: 'uploaded', + multiple: 'add', + editable: true, + + library: wp.media.query( _.defaults({ + type: 'image' + }, this.options.library ) ) + }), + + // Gallery states. + new wp.media.controller.GalleryEdit({ + library: this.options.selection, + editing: this.options.editing, + menu: 'gallery' + }), + + new wp.media.controller.GalleryAdd() + ]); + } + } ); + + /** + * Gallery widget model. + * + * See WP_Widget_Gallery::enqueue_admin_scripts() for amending prototype from PHP exports. + * + * @since 4.9.0 + * + * @class wp.mediaWidgets.modelConstructors.media_gallery + * @augments wp.mediaWidgets.MediaWidgetModel + */ + GalleryWidgetModel = component.MediaWidgetModel.extend(/** @lends wp.mediaWidgets.modelConstructors.media_gallery.prototype */{} ); + + GalleryWidgetControl = component.MediaWidgetControl.extend(/** @lends wp.mediaWidgets.controlConstructors.media_gallery.prototype */{ + + /** + * View events. + * + * @since 4.9.0 + * @type {object} + */ + events: _.extend( {}, component.MediaWidgetControl.prototype.events, { + 'click .media-widget-gallery-preview': 'editMedia' + } ), + + /** + * Gallery widget control. + * + * See WP_Widget_Gallery::enqueue_admin_scripts() for amending prototype from PHP exports. + * + * @constructs wp.mediaWidgets.controlConstructors.media_gallery + * @augments wp.mediaWidgets.MediaWidgetControl + * + * @since 4.9.0 + * @param {Object} options - Options. + * @param {Backbone.Model} options.model - Model. + * @param {jQuery} options.el - Control field container element. + * @param {jQuery} options.syncContainer - Container element where fields are synced for the server. + * @returns {void} + */ + initialize: function initialize( options ) { + var control = this; + + component.MediaWidgetControl.prototype.initialize.call( control, options ); + + _.bindAll( control, 'updateSelectedAttachments', 'handleAttachmentDestroy' ); + control.selectedAttachments = new wp.media.model.Attachments(); + control.model.on( 'change:ids', control.updateSelectedAttachments ); + control.selectedAttachments.on( 'change', control.renderPreview ); + control.selectedAttachments.on( 'reset', control.renderPreview ); + control.updateSelectedAttachments(); + + /* + * Refresh a Gallery widget partial when the user modifies one of the selected attachments. + * This ensures that when an attachment's caption is updated in the media modal the Gallery + * widget in the preview will then be refreshed to show the change. Normally doing this + * would not be necessary because all of the state should be contained inside the changeset, + * as everything done in the Customizer should not make a change to the site unless the + * changeset itself is published. Attachments are a current exception to this rule. + * For a proposal to include attachments in the customized state, see #37887. + */ + if ( wp.customize && wp.customize.previewer ) { + control.selectedAttachments.on( 'change', function() { + wp.customize.previewer.send( 'refresh-widget-partial', control.model.get( 'widget_id' ) ); + } ); + } + }, + + /** + * Update the selected attachments if necessary. + * + * @since 4.9.0 + * @returns {void} + */ + updateSelectedAttachments: function updateSelectedAttachments() { + var control = this, newIds, oldIds, removedIds, addedIds, addedQuery; + + newIds = control.model.get( 'ids' ); + oldIds = _.pluck( control.selectedAttachments.models, 'id' ); + + removedIds = _.difference( oldIds, newIds ); + _.each( removedIds, function( removedId ) { + control.selectedAttachments.remove( control.selectedAttachments.get( removedId ) ); + }); + + addedIds = _.difference( newIds, oldIds ); + if ( addedIds.length ) { + addedQuery = wp.media.query({ + order: 'ASC', + orderby: 'post__in', + perPage: -1, + post__in: newIds, + query: true, + type: 'image' + }); + addedQuery.more().done( function() { + control.selectedAttachments.reset( addedQuery.models ); + }); + } + }, + + /** + * Render preview. + * + * @since 4.9.0 + * @returns {void} + */ + renderPreview: function renderPreview() { + var control = this, previewContainer, previewTemplate, data; + + previewContainer = control.$el.find( '.media-widget-preview' ); + previewTemplate = wp.template( 'wp-media-widget-gallery-preview' ); + + data = control.previewTemplateProps.toJSON(); + data.attachments = {}; + control.selectedAttachments.each( function( attachment ) { + data.attachments[ attachment.id ] = attachment.toJSON(); + } ); + + previewContainer.html( previewTemplate( data ) ); + }, + + /** + * Determine whether there are selected attachments. + * + * @since 4.9.0 + * @returns {boolean} Selected. + */ + isSelected: function isSelected() { + var control = this; + + if ( control.model.get( 'error' ) ) { + return false; + } + + return control.model.get( 'ids' ).length > 0; + }, + + /** + * Open the media select frame to edit images. + * + * @since 4.9.0 + * @returns {void} + */ + editMedia: function editMedia() { + var control = this, selection, mediaFrame, mediaFrameProps; + + selection = new wp.media.model.Selection( control.selectedAttachments.models, { + multiple: true + }); + + mediaFrameProps = control.mapModelToMediaFrameProps( control.model.toJSON() ); + selection.gallery = new Backbone.Model( mediaFrameProps ); + if ( mediaFrameProps.size ) { + control.displaySettings.set( 'size', mediaFrameProps.size ); + } + mediaFrame = new GalleryDetailsMediaFrame({ + frame: 'manage', + text: control.l10n.add_to_widget, + selection: selection, + mimeType: control.mime_type, + selectedDisplaySettings: control.displaySettings, + showDisplaySettings: control.showDisplaySettings, + metadata: mediaFrameProps, + editing: true, + multiple: true, + state: 'gallery-edit' + }); + wp.media.frame = mediaFrame; // See wp.media(). + + // Handle selection of a media item. + mediaFrame.on( 'update', function onUpdate( newSelection ) { + var state = mediaFrame.state(), resultSelection; + + resultSelection = newSelection || state.get( 'selection' ); + if ( ! resultSelection ) { + return; + } + + // Copy orderby_random from gallery state. + if ( resultSelection.gallery ) { + control.model.set( control.mapMediaToModelProps( resultSelection.gallery.toJSON() ) ); + } + + // Directly update selectedAttachments to prevent needing to do additional request. + control.selectedAttachments.reset( resultSelection.models ); + + // Update models in the widget instance. + control.model.set( { + ids: _.pluck( resultSelection.models, 'id' ) + } ); + } ); + + mediaFrame.$el.addClass( 'media-widget' ); + mediaFrame.open(); + + if ( selection ) { + selection.on( 'destroy', control.handleAttachmentDestroy ); + } + }, + + /** + * Open the media select frame to chose an item. + * + * @since 4.9.0 + * @returns {void} + */ + selectMedia: function selectMedia() { + var control = this, selection, mediaFrame, mediaFrameProps; + selection = new wp.media.model.Selection( control.selectedAttachments.models, { + multiple: true + }); + + mediaFrameProps = control.mapModelToMediaFrameProps( control.model.toJSON() ); + if ( mediaFrameProps.size ) { + control.displaySettings.set( 'size', mediaFrameProps.size ); + } + mediaFrame = new GalleryDetailsMediaFrame({ + frame: 'select', + text: control.l10n.add_to_widget, + selection: selection, + mimeType: control.mime_type, + selectedDisplaySettings: control.displaySettings, + showDisplaySettings: control.showDisplaySettings, + metadata: mediaFrameProps, + state: 'gallery' + }); + wp.media.frame = mediaFrame; // See wp.media(). + + // Handle selection of a media item. + mediaFrame.on( 'update', function onUpdate( newSelection ) { + var state = mediaFrame.state(), resultSelection; + + resultSelection = newSelection || state.get( 'selection' ); + if ( ! resultSelection ) { + return; + } + + // Copy orderby_random from gallery state. + if ( resultSelection.gallery ) { + control.model.set( control.mapMediaToModelProps( resultSelection.gallery.toJSON() ) ); + } + + // Directly update selectedAttachments to prevent needing to do additional request. + control.selectedAttachments.reset( resultSelection.models ); + + // Update widget instance. + control.model.set( { + ids: _.pluck( resultSelection.models, 'id' ) + } ); + } ); + + mediaFrame.$el.addClass( 'media-widget' ); + mediaFrame.open(); + + if ( selection ) { + selection.on( 'destroy', control.handleAttachmentDestroy ); + } + + /* + * Make sure focus is set inside of modal so that hitting Esc will close + * the modal and not inadvertently cause the widget to collapse in the customizer. + */ + mediaFrame.$el.find( ':focusable:first' ).focus(); + }, + + /** + * Clear the selected attachment when it is deleted in the media select frame. + * + * @since 4.9.0 + * @param {wp.media.models.Attachment} attachment - Attachment. + * @returns {void} + */ + handleAttachmentDestroy: function handleAttachmentDestroy( attachment ) { + var control = this; + control.model.set( { + ids: _.difference( + control.model.get( 'ids' ), + [ attachment.id ] + ) + } ); + } + } ); + + // Exports. + component.controlConstructors.media_gallery = GalleryWidgetControl; + component.modelConstructors.media_gallery = GalleryWidgetModel; + +})( wp.mediaWidgets ); diff --git a/www/crm/wp-admin/js/widgets/media-gallery-widget.min.js b/www/crm/wp-admin/js/widgets/media-gallery-widget.min.js new file mode 100644 index 00000000..ec64b7d3 --- /dev/null +++ b/www/crm/wp-admin/js/widgets/media-gallery-widget.min.js @@ -0,0 +1 @@ +!function(a){"use strict";var b,c,d;d=wp.media.view.MediaFrame.Post.extend({createStates:function(){this.states.add([new wp.media.controller.Library({id:"gallery",title:wp.media.view.l10n.createGalleryTitle,priority:40,toolbar:"main-gallery",filterable:"uploaded",multiple:"add",editable:!0,library:wp.media.query(_.defaults({type:"image"},this.options.library))}),new wp.media.controller.GalleryEdit({library:this.options.selection,editing:this.options.editing,menu:"gallery"}),new wp.media.controller.GalleryAdd])}}),b=a.MediaWidgetModel.extend({}),c=a.MediaWidgetControl.extend({events:_.extend({},a.MediaWidgetControl.prototype.events,{"click .media-widget-gallery-preview":"editMedia"}),initialize:function(b){var c=this;a.MediaWidgetControl.prototype.initialize.call(c,b),_.bindAll(c,"updateSelectedAttachments","handleAttachmentDestroy"),c.selectedAttachments=new wp.media.model.Attachments,c.model.on("change:ids",c.updateSelectedAttachments),c.selectedAttachments.on("change",c.renderPreview),c.selectedAttachments.on("reset",c.renderPreview),c.updateSelectedAttachments(),wp.customize&&wp.customize.previewer&&c.selectedAttachments.on("change",function(){wp.customize.previewer.send("refresh-widget-partial",c.model.get("widget_id"))})},updateSelectedAttachments:function(){var a,b,c,d,e,f=this;a=f.model.get("ids"),b=_.pluck(f.selectedAttachments.models,"id"),c=_.difference(b,a),_.each(c,function(a){f.selectedAttachments.remove(f.selectedAttachments.get(a))}),d=_.difference(a,b),d.length&&(e=wp.media.query({order:"ASC",orderby:"post__in",perPage:-1,post__in:a,query:!0,type:"image"}),e.more().done(function(){f.selectedAttachments.reset(e.models)}))},renderPreview:function(){var a,b,c,d=this;a=d.$el.find(".media-widget-preview"),b=wp.template("wp-media-widget-gallery-preview"),c=d.previewTemplateProps.toJSON(),c.attachments={},d.selectedAttachments.each(function(a){c.attachments[a.id]=a.toJSON()}),a.html(b(c))},isSelected:function(){var a=this;return!a.model.get("error")&&a.model.get("ids").length>0},editMedia:function(){var a,b,c,e=this;a=new wp.media.model.Selection(e.selectedAttachments.models,{multiple:!0}),c=e.mapModelToMediaFrameProps(e.model.toJSON()),a.gallery=new Backbone.Model(c),c.size&&e.displaySettings.set("size",c.size),b=new d({frame:"manage",text:e.l10n.add_to_widget,selection:a,mimeType:e.mime_type,selectedDisplaySettings:e.displaySettings,showDisplaySettings:e.showDisplaySettings,metadata:c,editing:!0,multiple:!0,state:"gallery-edit"}),wp.media.frame=b,b.on("update",function(a){var c,d=b.state();c=a||d.get("selection"),c&&(c.gallery&&e.model.set(e.mapMediaToModelProps(c.gallery.toJSON())),e.selectedAttachments.reset(c.models),e.model.set({ids:_.pluck(c.models,"id")}))}),b.$el.addClass("media-widget"),b.open(),a&&a.on("destroy",e.handleAttachmentDestroy)},selectMedia:function(){var a,b,c,e=this;a=new wp.media.model.Selection(e.selectedAttachments.models,{multiple:!0}),c=e.mapModelToMediaFrameProps(e.model.toJSON()),c.size&&e.displaySettings.set("size",c.size),b=new d({frame:"select",text:e.l10n.add_to_widget,selection:a,mimeType:e.mime_type,selectedDisplaySettings:e.displaySettings,showDisplaySettings:e.showDisplaySettings,metadata:c,state:"gallery"}),wp.media.frame=b,b.on("update",function(a){var c,d=b.state();c=a||d.get("selection"),c&&(c.gallery&&e.model.set(e.mapMediaToModelProps(c.gallery.toJSON())),e.selectedAttachments.reset(c.models),e.model.set({ids:_.pluck(c.models,"id")}))}),b.$el.addClass("media-widget"),b.open(),a&&a.on("destroy",e.handleAttachmentDestroy),b.$el.find(":focusable:first").focus()},handleAttachmentDestroy:function(a){var b=this;b.model.set({ids:_.difference(b.model.get("ids"),[a.id])})}}),a.controlConstructors.media_gallery=c,a.modelConstructors.media_gallery=b}(wp.mediaWidgets);
\ No newline at end of file diff --git a/www/crm/wp-admin/js/widgets/media-image-widget.js b/www/crm/wp-admin/js/widgets/media-image-widget.js new file mode 100644 index 00000000..3ea4f9be --- /dev/null +++ b/www/crm/wp-admin/js/widgets/media-image-widget.js @@ -0,0 +1,170 @@ +/** + * @output wp-admin/js/widgets/media-image-widget.js + */ + +/* eslint consistent-this: [ "error", "control" ] */ +(function( component, $ ) { + 'use strict'; + + var ImageWidgetModel, ImageWidgetControl; + + /** + * Image widget model. + * + * See WP_Widget_Media_Image::enqueue_admin_scripts() for amending prototype from PHP exports. + * + * @class wp.mediaWidgets.modelConstructors.media_image + * @augments wp.mediaWidgets.MediaWidgetModel + */ + ImageWidgetModel = component.MediaWidgetModel.extend({}); + + /** + * Image widget control. + * + * See WP_Widget_Media_Image::enqueue_admin_scripts() for amending prototype from PHP exports. + * + * @class wp.mediaWidgets.controlConstructors.media_audio + * @augments wp.mediaWidgets.MediaWidgetControl + */ + ImageWidgetControl = component.MediaWidgetControl.extend(/** @lends wp.mediaWidgets.controlConstructors.media_image.prototype */{ + + /** + * View events. + * + * @type {object} + */ + events: _.extend( {}, component.MediaWidgetControl.prototype.events, { + 'click .media-widget-preview.populated': 'editMedia' + } ), + + /** + * Render preview. + * + * @returns {void} + */ + renderPreview: function renderPreview() { + var control = this, previewContainer, previewTemplate, fieldsContainer, fieldsTemplate, linkInput; + if ( ! control.model.get( 'attachment_id' ) && ! control.model.get( 'url' ) ) { + return; + } + + previewContainer = control.$el.find( '.media-widget-preview' ); + previewTemplate = wp.template( 'wp-media-widget-image-preview' ); + previewContainer.html( previewTemplate( control.previewTemplateProps.toJSON() ) ); + previewContainer.addClass( 'populated' ); + + linkInput = control.$el.find( '.link' ); + if ( ! linkInput.is( document.activeElement ) ) { + fieldsContainer = control.$el.find( '.media-widget-fields' ); + fieldsTemplate = wp.template( 'wp-media-widget-image-fields' ); + fieldsContainer.html( fieldsTemplate( control.previewTemplateProps.toJSON() ) ); + } + }, + + /** + * Open the media image-edit frame to modify the selected item. + * + * @returns {void} + */ + editMedia: function editMedia() { + var control = this, mediaFrame, updateCallback, defaultSync, metadata; + + metadata = control.mapModelToMediaFrameProps( control.model.toJSON() ); + + // Needed or else none will not be selected if linkUrl is not also empty. + if ( 'none' === metadata.link ) { + metadata.linkUrl = ''; + } + + // Set up the media frame. + mediaFrame = wp.media({ + frame: 'image', + state: 'image-details', + metadata: metadata + }); + mediaFrame.$el.addClass( 'media-widget' ); + + updateCallback = function() { + var mediaProps, linkType; + + // Update cached attachment object to avoid having to re-fetch. This also triggers re-rendering of preview. + mediaProps = mediaFrame.state().attributes.image.toJSON(); + linkType = mediaProps.link; + mediaProps.link = mediaProps.linkUrl; + control.selectedAttachment.set( mediaProps ); + control.displaySettings.set( 'link', linkType ); + + control.model.set( _.extend( + control.mapMediaToModelProps( mediaProps ), + { error: false } + ) ); + }; + + mediaFrame.state( 'image-details' ).on( 'update', updateCallback ); + mediaFrame.state( 'replace-image' ).on( 'replace', updateCallback ); + + // Disable syncing of attachment changes back to server. See <https://core.trac.wordpress.org/ticket/40403>. + defaultSync = wp.media.model.Attachment.prototype.sync; + wp.media.model.Attachment.prototype.sync = function rejectedSync() { + return $.Deferred().rejectWith( this ).promise(); + }; + mediaFrame.on( 'close', function onClose() { + mediaFrame.detach(); + wp.media.model.Attachment.prototype.sync = defaultSync; + }); + + mediaFrame.open(); + }, + + /** + * Get props which are merged on top of the model when an embed is chosen (as opposed to an attachment). + * + * @returns {Object} Reset/override props. + */ + getEmbedResetProps: function getEmbedResetProps() { + return _.extend( + component.MediaWidgetControl.prototype.getEmbedResetProps.call( this ), + { + size: 'full', + width: 0, + height: 0 + } + ); + }, + + /** + * Get the instance props from the media selection frame. + * + * Prevent the image_title attribute from being initially set when adding an image from the media library. + * + * @param {wp.media.view.MediaFrame.Select} mediaFrame - Select frame. + * @returns {Object} Props. + */ + getModelPropsFromMediaFrame: function getModelPropsFromMediaFrame( mediaFrame ) { + var control = this; + return _.omit( + component.MediaWidgetControl.prototype.getModelPropsFromMediaFrame.call( control, mediaFrame ), + 'image_title' + ); + }, + + /** + * Map model props to preview template props. + * + * @returns {Object} Preview template props. + */ + mapModelToPreviewTemplateProps: function mapModelToPreviewTemplateProps() { + var control = this, previewTemplateProps, url; + url = control.model.get( 'url' ); + previewTemplateProps = component.MediaWidgetControl.prototype.mapModelToPreviewTemplateProps.call( control ); + previewTemplateProps.currentFilename = url ? url.replace( /\?.*$/, '' ).replace( /^.+\//, '' ) : ''; + previewTemplateProps.link_url = control.model.get( 'link_url' ); + return previewTemplateProps; + } + }); + + // Exports. + component.controlConstructors.media_image = ImageWidgetControl; + component.modelConstructors.media_image = ImageWidgetModel; + +})( wp.mediaWidgets, jQuery ); diff --git a/www/crm/wp-admin/js/widgets/media-image-widget.min.js b/www/crm/wp-admin/js/widgets/media-image-widget.min.js new file mode 100644 index 00000000..901d5c41 --- /dev/null +++ b/www/crm/wp-admin/js/widgets/media-image-widget.min.js @@ -0,0 +1 @@ +!function(a,b){"use strict";var c,d;c=a.MediaWidgetModel.extend({}),d=a.MediaWidgetControl.extend({events:_.extend({},a.MediaWidgetControl.prototype.events,{"click .media-widget-preview.populated":"editMedia"}),renderPreview:function(){var a,b,c,d,e,f=this;(f.model.get("attachment_id")||f.model.get("url"))&&(a=f.$el.find(".media-widget-preview"),b=wp.template("wp-media-widget-image-preview"),a.html(b(f.previewTemplateProps.toJSON())),a.addClass("populated"),e=f.$el.find(".link"),e.is(document.activeElement)||(c=f.$el.find(".media-widget-fields"),d=wp.template("wp-media-widget-image-fields"),c.html(d(f.previewTemplateProps.toJSON()))))},editMedia:function(){var a,c,d,e,f=this;e=f.mapModelToMediaFrameProps(f.model.toJSON()),"none"===e.link&&(e.linkUrl=""),a=wp.media({frame:"image",state:"image-details",metadata:e}),a.$el.addClass("media-widget"),c=function(){var b,c;b=a.state().attributes.image.toJSON(),c=b.link,b.link=b.linkUrl,f.selectedAttachment.set(b),f.displaySettings.set("link",c),f.model.set(_.extend(f.mapMediaToModelProps(b),{error:!1}))},a.state("image-details").on("update",c),a.state("replace-image").on("replace",c),d=wp.media.model.Attachment.prototype.sync,wp.media.model.Attachment.prototype.sync=function(){return b.Deferred().rejectWith(this).promise()},a.on("close",function(){a.detach(),wp.media.model.Attachment.prototype.sync=d}),a.open()},getEmbedResetProps:function(){return _.extend(a.MediaWidgetControl.prototype.getEmbedResetProps.call(this),{size:"full",width:0,height:0})},getModelPropsFromMediaFrame:function(b){var c=this;return _.omit(a.MediaWidgetControl.prototype.getModelPropsFromMediaFrame.call(c,b),"image_title")},mapModelToPreviewTemplateProps:function(){var b,c,d=this;return c=d.model.get("url"),b=a.MediaWidgetControl.prototype.mapModelToPreviewTemplateProps.call(d),b.currentFilename=c?c.replace(/\?.*$/,"").replace(/^.+\//,""):"",b.link_url=d.model.get("link_url"),b}}),a.controlConstructors.media_image=d,a.modelConstructors.media_image=c}(wp.mediaWidgets,jQuery);
\ No newline at end of file diff --git a/www/crm/wp-admin/js/widgets/media-video-widget.js b/www/crm/wp-admin/js/widgets/media-video-widget.js new file mode 100644 index 00000000..b716cce4 --- /dev/null +++ b/www/crm/wp-admin/js/widgets/media-video-widget.js @@ -0,0 +1,256 @@ +/** + * @output wp-admin/js/widgets/media-video-widget.js + */ + +/* eslint consistent-this: [ "error", "control" ] */ +(function( component ) { + 'use strict'; + + var VideoWidgetModel, VideoWidgetControl, VideoDetailsMediaFrame; + + /** + * Custom video details frame that removes the replace-video state. + * + * @class wp.mediaWidgets.controlConstructors~VideoDetailsMediaFrame + * @augments wp.media.view.MediaFrame.VideoDetails + * + * @private + */ + VideoDetailsMediaFrame = wp.media.view.MediaFrame.VideoDetails.extend(/** @lends wp.mediaWidgets.controlConstructors~VideoDetailsMediaFrame.prototype */{ + + /** + * Create the default states. + * + * @returns {void} + */ + createStates: function createStates() { + this.states.add([ + new wp.media.controller.VideoDetails({ + media: this.media + }), + + new wp.media.controller.MediaLibrary({ + type: 'video', + id: 'add-video-source', + title: wp.media.view.l10n.videoAddSourceTitle, + toolbar: 'add-video-source', + media: this.media, + menu: false + }), + + new wp.media.controller.MediaLibrary({ + type: 'text', + id: 'add-track', + title: wp.media.view.l10n.videoAddTrackTitle, + toolbar: 'add-track', + media: this.media, + menu: 'video-details' + }) + ]); + } + }); + + /** + * Video widget model. + * + * See WP_Widget_Video::enqueue_admin_scripts() for amending prototype from PHP exports. + * + * @class wp.mediaWidgets.modelConstructors.media_video + * @augments wp.mediaWidgets.MediaWidgetModel + */ + VideoWidgetModel = component.MediaWidgetModel.extend({}); + + /** + * Video widget control. + * + * See WP_Widget_Video::enqueue_admin_scripts() for amending prototype from PHP exports. + * + * @class wp.mediaWidgets.controlConstructors.media_video + * @augments wp.mediaWidgets.MediaWidgetControl + */ + VideoWidgetControl = component.MediaWidgetControl.extend(/** @lends wp.mediaWidgets.controlConstructors.media_video.prototype */{ + + /** + * Show display settings. + * + * @type {boolean} + */ + showDisplaySettings: false, + + /** + * Cache of oembed responses. + * + * @type {Object} + */ + oembedResponses: {}, + + /** + * Map model props to media frame props. + * + * @param {Object} modelProps - Model props. + * @returns {Object} Media frame props. + */ + mapModelToMediaFrameProps: function mapModelToMediaFrameProps( modelProps ) { + var control = this, mediaFrameProps; + mediaFrameProps = component.MediaWidgetControl.prototype.mapModelToMediaFrameProps.call( control, modelProps ); + mediaFrameProps.link = 'embed'; + return mediaFrameProps; + }, + + /** + * Fetches embed data for external videos. + * + * @returns {void} + */ + fetchEmbed: function fetchEmbed() { + var control = this, url; + url = control.model.get( 'url' ); + + // If we already have a local cache of the embed response, return. + if ( control.oembedResponses[ url ] ) { + return; + } + + // If there is an in-flight embed request, abort it. + if ( control.fetchEmbedDfd && 'pending' === control.fetchEmbedDfd.state() ) { + control.fetchEmbedDfd.abort(); + } + + control.fetchEmbedDfd = wp.apiRequest({ + url: wp.media.view.settings.oEmbedProxyUrl, + data: { + url: control.model.get( 'url' ), + maxwidth: control.model.get( 'width' ), + maxheight: control.model.get( 'height' ), + discover: false + }, + type: 'GET', + dataType: 'json', + context: control + }); + + control.fetchEmbedDfd.done( function( response ) { + control.oembedResponses[ url ] = response; + control.renderPreview(); + }); + + control.fetchEmbedDfd.fail( function() { + control.oembedResponses[ url ] = null; + }); + }, + + /** + * Whether a url is a supported external host. + * + * @deprecated since 4.9. + * + * @returns {boolean} Whether url is a supported video host. + */ + isHostedVideo: function isHostedVideo() { + return true; + }, + + /** + * Render preview. + * + * @returns {void} + */ + renderPreview: function renderPreview() { + var control = this, previewContainer, previewTemplate, attachmentId, attachmentUrl, poster, html = '', isOEmbed = false, mime, error, urlParser, matches; + attachmentId = control.model.get( 'attachment_id' ); + attachmentUrl = control.model.get( 'url' ); + error = control.model.get( 'error' ); + + if ( ! attachmentId && ! attachmentUrl ) { + return; + } + + // Verify the selected attachment mime is supported. + mime = control.selectedAttachment.get( 'mime' ); + if ( mime && attachmentId ) { + if ( ! _.contains( _.values( wp.media.view.settings.embedMimes ), mime ) ) { + error = 'unsupported_file_type'; + } + } else if ( ! attachmentId ) { + urlParser = document.createElement( 'a' ); + urlParser.href = attachmentUrl; + matches = urlParser.pathname.toLowerCase().match( /\.(\w+)$/ ); + if ( matches ) { + if ( ! _.contains( _.keys( wp.media.view.settings.embedMimes ), matches[1] ) ) { + error = 'unsupported_file_type'; + } + } else { + isOEmbed = true; + } + } + + if ( isOEmbed ) { + control.fetchEmbed(); + if ( control.oembedResponses[ attachmentUrl ] ) { + poster = control.oembedResponses[ attachmentUrl ].thumbnail_url; + html = control.oembedResponses[ attachmentUrl ].html.replace( /\swidth="\d+"/, ' width="100%"' ).replace( /\sheight="\d+"/, '' ); + } + } + + previewContainer = control.$el.find( '.media-widget-preview' ); + previewTemplate = wp.template( 'wp-media-widget-video-preview' ); + + previewContainer.html( previewTemplate({ + model: { + attachment_id: attachmentId, + html: html, + src: attachmentUrl, + poster: poster + }, + is_oembed: isOEmbed, + error: error + })); + wp.mediaelement.initialize(); + }, + + /** + * Open the media image-edit frame to modify the selected item. + * + * @returns {void} + */ + editMedia: function editMedia() { + var control = this, mediaFrame, metadata, updateCallback; + + metadata = control.mapModelToMediaFrameProps( control.model.toJSON() ); + + // Set up the media frame. + mediaFrame = new VideoDetailsMediaFrame({ + frame: 'video', + state: 'video-details', + metadata: metadata + }); + wp.media.frame = mediaFrame; + mediaFrame.$el.addClass( 'media-widget' ); + + updateCallback = function( mediaFrameProps ) { + + // Update cached attachment object to avoid having to re-fetch. This also triggers re-rendering of preview. + control.selectedAttachment.set( mediaFrameProps ); + + control.model.set( _.extend( + _.omit( control.model.defaults(), 'title' ), + control.mapMediaToModelProps( mediaFrameProps ), + { error: false } + ) ); + }; + + mediaFrame.state( 'video-details' ).on( 'update', updateCallback ); + mediaFrame.state( 'replace-video' ).on( 'replace', updateCallback ); + mediaFrame.on( 'close', function() { + mediaFrame.detach(); + }); + + mediaFrame.open(); + } + }); + + // Exports. + component.controlConstructors.media_video = VideoWidgetControl; + component.modelConstructors.media_video = VideoWidgetModel; + +})( wp.mediaWidgets ); diff --git a/www/crm/wp-admin/js/widgets/media-video-widget.min.js b/www/crm/wp-admin/js/widgets/media-video-widget.min.js new file mode 100644 index 00000000..0df82322 --- /dev/null +++ b/www/crm/wp-admin/js/widgets/media-video-widget.min.js @@ -0,0 +1 @@ +!function(a){"use strict";var b,c,d;d=wp.media.view.MediaFrame.VideoDetails.extend({createStates:function(){this.states.add([new wp.media.controller.VideoDetails({media:this.media}),new wp.media.controller.MediaLibrary({type:"video",id:"add-video-source",title:wp.media.view.l10n.videoAddSourceTitle,toolbar:"add-video-source",media:this.media,menu:!1}),new wp.media.controller.MediaLibrary({type:"text",id:"add-track",title:wp.media.view.l10n.videoAddTrackTitle,toolbar:"add-track",media:this.media,menu:"video-details"})])}}),b=a.MediaWidgetModel.extend({}),c=a.MediaWidgetControl.extend({showDisplaySettings:!1,oembedResponses:{},mapModelToMediaFrameProps:function(b){var c,d=this;return c=a.MediaWidgetControl.prototype.mapModelToMediaFrameProps.call(d,b),c.link="embed",c},fetchEmbed:function(){var a,b=this;a=b.model.get("url"),b.oembedResponses[a]||(b.fetchEmbedDfd&&"pending"===b.fetchEmbedDfd.state()&&b.fetchEmbedDfd.abort(),b.fetchEmbedDfd=wp.apiRequest({url:wp.media.view.settings.oEmbedProxyUrl,data:{url:b.model.get("url"),maxwidth:b.model.get("width"),maxheight:b.model.get("height"),discover:!1},type:"GET",dataType:"json",context:b}),b.fetchEmbedDfd.done(function(c){b.oembedResponses[a]=c,b.renderPreview()}),b.fetchEmbedDfd.fail(function(){b.oembedResponses[a]=null}))},isHostedVideo:function(){return!0},renderPreview:function(){var a,b,c,d,e,f,g,h,i,j=this,k="",l=!1;c=j.model.get("attachment_id"),d=j.model.get("url"),g=j.model.get("error"),(c||d)&&(f=j.selectedAttachment.get("mime"),f&&c?_.contains(_.values(wp.media.view.settings.embedMimes),f)||(g="unsupported_file_type"):c||(h=document.createElement("a"),h.href=d,i=h.pathname.toLowerCase().match(/\.(\w+)$/),i?_.contains(_.keys(wp.media.view.settings.embedMimes),i[1])||(g="unsupported_file_type"):l=!0),l&&(j.fetchEmbed(),j.oembedResponses[d]&&(e=j.oembedResponses[d].thumbnail_url,k=j.oembedResponses[d].html.replace(/\swidth="\d+"/,' width="100%"').replace(/\sheight="\d+"/,""))),a=j.$el.find(".media-widget-preview"),b=wp.template("wp-media-widget-video-preview"),a.html(b({model:{attachment_id:c,html:k,src:d,poster:e},is_oembed:l,error:g})),wp.mediaelement.initialize())},editMedia:function(){var a,b,c,e=this;b=e.mapModelToMediaFrameProps(e.model.toJSON()),a=new d({frame:"video",state:"video-details",metadata:b}),wp.media.frame=a,a.$el.addClass("media-widget"),c=function(a){e.selectedAttachment.set(a),e.model.set(_.extend(_.omit(e.model.defaults(),"title"),e.mapMediaToModelProps(a),{error:!1}))},a.state("video-details").on("update",c),a.state("replace-video").on("replace",c),a.on("close",function(){a.detach()}),a.open()}}),a.controlConstructors.media_video=c,a.modelConstructors.media_video=b}(wp.mediaWidgets);
\ No newline at end of file diff --git a/www/crm/wp-admin/js/widgets/media-widgets.js b/www/crm/wp-admin/js/widgets/media-widgets.js new file mode 100644 index 00000000..31d093b4 --- /dev/null +++ b/www/crm/wp-admin/js/widgets/media-widgets.js @@ -0,0 +1,1334 @@ +/** + * @output wp-admin/js/widgets/media-widgets.js + */ + +/* eslint consistent-this: [ "error", "control" ] */ + +/** + * @namespace wp.mediaWidgets + * @memberOf wp + */ +wp.mediaWidgets = ( function( $ ) { + 'use strict'; + + var component = {}; + + /** + * Widget control (view) constructors, mapping widget id_base to subclass of MediaWidgetControl. + * + * Media widgets register themselves by assigning subclasses of MediaWidgetControl onto this object by widget ID base. + * + * @memberOf wp.mediaWidgets + * + * @type {Object.<string, wp.mediaWidgets.MediaWidgetModel>} + */ + component.controlConstructors = {}; + + /** + * Widget model constructors, mapping widget id_base to subclass of MediaWidgetModel. + * + * Media widgets register themselves by assigning subclasses of MediaWidgetControl onto this object by widget ID base. + * + * @memberOf wp.mediaWidgets + * + * @type {Object.<string, wp.mediaWidgets.MediaWidgetModel>} + */ + component.modelConstructors = {}; + + component.PersistentDisplaySettingsLibrary = wp.media.controller.Library.extend(/** @lends wp.mediaWidgets.PersistentDisplaySettingsLibrary.prototype */{ + + /** + * Library which persists the customized display settings across selections. + * + * @constructs wp.mediaWidgets.PersistentDisplaySettingsLibrary + * @augments wp.media.controller.Library + * + * @param {Object} options - Options. + * + * @returns {void} + */ + initialize: function initialize( options ) { + _.bindAll( this, 'handleDisplaySettingChange' ); + wp.media.controller.Library.prototype.initialize.call( this, options ); + }, + + /** + * Sync changes to the current display settings back into the current customized. + * + * @param {Backbone.Model} displaySettings - Modified display settings. + * @returns {void} + */ + handleDisplaySettingChange: function handleDisplaySettingChange( displaySettings ) { + this.get( 'selectedDisplaySettings' ).set( displaySettings.attributes ); + }, + + /** + * Get the display settings model. + * + * Model returned is updated with the current customized display settings, + * and an event listener is added so that changes made to the settings + * will sync back into the model storing the session's customized display + * settings. + * + * @param {Backbone.Model} model - Display settings model. + * @returns {Backbone.Model} Display settings model. + */ + display: function getDisplaySettingsModel( model ) { + var display, selectedDisplaySettings = this.get( 'selectedDisplaySettings' ); + display = wp.media.controller.Library.prototype.display.call( this, model ); + + display.off( 'change', this.handleDisplaySettingChange ); // Prevent duplicated event handlers. + display.set( selectedDisplaySettings.attributes ); + if ( 'custom' === selectedDisplaySettings.get( 'link_type' ) ) { + display.linkUrl = selectedDisplaySettings.get( 'link_url' ); + } + display.on( 'change', this.handleDisplaySettingChange ); + return display; + } + }); + + /** + * Extended view for managing the embed UI. + * + * @class wp.mediaWidgets.MediaEmbedView + * @augments wp.media.view.Embed + */ + component.MediaEmbedView = wp.media.view.Embed.extend(/** @lends wp.mediaWidgets.MediaEmbedView.prototype */{ + + /** + * Initialize. + * + * @since 4.9.0 + * + * @param {object} options - Options. + * @returns {void} + */ + initialize: function( options ) { + var view = this, embedController; // eslint-disable-line consistent-this + wp.media.view.Embed.prototype.initialize.call( view, options ); + if ( 'image' !== view.controller.options.mimeType ) { + embedController = view.controller.states.get( 'embed' ); + embedController.off( 'scan', embedController.scanImage, embedController ); + } + }, + + /** + * Refresh embed view. + * + * Forked override of {wp.media.view.Embed#refresh()} to suppress irrelevant "link text" field. + * + * @returns {void} + */ + refresh: function refresh() { + /** + * @class wp.mediaWidgets~Constructor + */ + var Constructor; + + if ( 'image' === this.controller.options.mimeType ) { + Constructor = wp.media.view.EmbedImage; + } else { + + // This should be eliminated once #40450 lands of when this is merged into core. + Constructor = wp.media.view.EmbedLink.extend(/** @lends wp.mediaWidgets~Constructor.prototype */{ + + /** + * Set the disabled state on the Add to Widget button. + * + * @param {boolean} disabled - Disabled. + * @returns {void} + */ + setAddToWidgetButtonDisabled: function setAddToWidgetButtonDisabled( disabled ) { + this.views.parent.views.parent.views.get( '.media-frame-toolbar' )[0].$el.find( '.media-button-select' ).prop( 'disabled', disabled ); + }, + + /** + * Set or clear an error notice. + * + * @param {string} notice - Notice. + * @returns {void} + */ + setErrorNotice: function setErrorNotice( notice ) { + var embedLinkView = this, noticeContainer; // eslint-disable-line consistent-this + + noticeContainer = embedLinkView.views.parent.$el.find( '> .notice:first-child' ); + if ( ! notice ) { + if ( noticeContainer.length ) { + noticeContainer.slideUp( 'fast' ); + } + } else { + if ( ! noticeContainer.length ) { + noticeContainer = $( '<div class="media-widget-embed-notice notice notice-error notice-alt"></div>' ); + noticeContainer.hide(); + embedLinkView.views.parent.$el.prepend( noticeContainer ); + } + noticeContainer.empty(); + noticeContainer.append( $( '<p>', { + html: notice + })); + noticeContainer.slideDown( 'fast' ); + } + }, + + /** + * Update oEmbed. + * + * @since 4.9.0 + * + * @returns {void} + */ + updateoEmbed: function() { + var embedLinkView = this, url; // eslint-disable-line consistent-this + + url = embedLinkView.model.get( 'url' ); + + // Abort if the URL field was emptied out. + if ( ! url ) { + embedLinkView.setErrorNotice( '' ); + embedLinkView.setAddToWidgetButtonDisabled( true ); + return; + } + + if ( ! url.match( /^(http|https):\/\/.+\// ) ) { + embedLinkView.controller.$el.find( '#embed-url-field' ).addClass( 'invalid' ); + embedLinkView.setAddToWidgetButtonDisabled( true ); + } + + wp.media.view.EmbedLink.prototype.updateoEmbed.call( embedLinkView ); + }, + + /** + * Fetch media. + * + * @returns {void} + */ + fetch: function() { + var embedLinkView = this, fetchSuccess, matches, fileExt, urlParser, url, re, youTubeEmbedMatch; // eslint-disable-line consistent-this + url = embedLinkView.model.get( 'url' ); + + if ( embedLinkView.dfd && 'pending' === embedLinkView.dfd.state() ) { + embedLinkView.dfd.abort(); + } + + fetchSuccess = function( response ) { + embedLinkView.renderoEmbed({ + data: { + body: response + } + }); + + embedLinkView.controller.$el.find( '#embed-url-field' ).removeClass( 'invalid' ); + embedLinkView.setErrorNotice( '' ); + embedLinkView.setAddToWidgetButtonDisabled( false ); + }; + + urlParser = document.createElement( 'a' ); + urlParser.href = url; + matches = urlParser.pathname.toLowerCase().match( /\.(\w+)$/ ); + if ( matches ) { + fileExt = matches[1]; + if ( ! wp.media.view.settings.embedMimes[ fileExt ] ) { + embedLinkView.renderFail(); + } else if ( 0 !== wp.media.view.settings.embedMimes[ fileExt ].indexOf( embedLinkView.controller.options.mimeType ) ) { + embedLinkView.renderFail(); + } else { + fetchSuccess( '<!--success-->' ); + } + return; + } + + // Support YouTube embed links. + re = /https?:\/\/www\.youtube\.com\/embed\/([^/]+)/; + youTubeEmbedMatch = re.exec( url ); + if ( youTubeEmbedMatch ) { + url = 'https://www.youtube.com/watch?v=' + youTubeEmbedMatch[ 1 ]; + // silently change url to proper oembed-able version. + embedLinkView.model.attributes.url = url; + } + + embedLinkView.dfd = wp.apiRequest({ + url: wp.media.view.settings.oEmbedProxyUrl, + data: { + url: url, + maxwidth: embedLinkView.model.get( 'width' ), + maxheight: embedLinkView.model.get( 'height' ), + discover: false + }, + type: 'GET', + dataType: 'json', + context: embedLinkView + }); + + embedLinkView.dfd.done( function( response ) { + if ( embedLinkView.controller.options.mimeType !== response.type ) { + embedLinkView.renderFail(); + return; + } + fetchSuccess( response.html ); + }); + embedLinkView.dfd.fail( _.bind( embedLinkView.renderFail, embedLinkView ) ); + }, + + /** + * Handle render failure. + * + * Overrides the {EmbedLink#renderFail()} method to prevent showing the "Link Text" field. + * The element is getting display:none in the stylesheet, but the underlying method uses + * uses {jQuery.fn.show()} which adds an inline style. This avoids the need for !important. + * + * @returns {void} + */ + renderFail: function renderFail() { + var embedLinkView = this; // eslint-disable-line consistent-this + embedLinkView.controller.$el.find( '#embed-url-field' ).addClass( 'invalid' ); + embedLinkView.setErrorNotice( embedLinkView.controller.options.invalidEmbedTypeError || 'ERROR' ); + embedLinkView.setAddToWidgetButtonDisabled( true ); + } + }); + } + + this.settings( new Constructor({ + controller: this.controller, + model: this.model.props, + priority: 40 + })); + } + }); + + /** + * Custom media frame for selecting uploaded media or providing media by URL. + * + * @class wp.mediaWidgets.MediaFrameSelect + * @augments wp.media.view.MediaFrame.Post + */ + component.MediaFrameSelect = wp.media.view.MediaFrame.Post.extend(/** @lends wp.mediaWidgets.MediaFrameSelect.prototype */{ + + /** + * Create the default states. + * + * @returns {void} + */ + createStates: function createStates() { + var mime = this.options.mimeType, specificMimes = []; + _.each( wp.media.view.settings.embedMimes, function( embedMime ) { + if ( 0 === embedMime.indexOf( mime ) ) { + specificMimes.push( embedMime ); + } + }); + if ( specificMimes.length > 0 ) { + mime = specificMimes; + } + + this.states.add([ + + // Main states. + new component.PersistentDisplaySettingsLibrary({ + id: 'insert', + title: this.options.title, + selection: this.options.selection, + priority: 20, + toolbar: 'main-insert', + filterable: 'dates', + library: wp.media.query({ + type: mime + }), + multiple: false, + editable: true, + + selectedDisplaySettings: this.options.selectedDisplaySettings, + displaySettings: _.isUndefined( this.options.showDisplaySettings ) ? true : this.options.showDisplaySettings, + displayUserSettings: false // We use the display settings from the current/default widget instance props. + }), + + new wp.media.controller.EditImage({ model: this.options.editImage }), + + // Embed states. + new wp.media.controller.Embed({ + metadata: this.options.metadata, + type: 'image' === this.options.mimeType ? 'image' : 'link', + invalidEmbedTypeError: this.options.invalidEmbedTypeError + }) + ]); + }, + + /** + * Main insert toolbar. + * + * Forked override of {wp.media.view.MediaFrame.Post#mainInsertToolbar()} to override text. + * + * @param {wp.Backbone.View} view - Toolbar view. + * @this {wp.media.controller.Library} + * @returns {void} + */ + mainInsertToolbar: function mainInsertToolbar( view ) { + var controller = this; // eslint-disable-line consistent-this + view.set( 'insert', { + style: 'primary', + priority: 80, + text: controller.options.text, // The whole reason for the fork. + requires: { selection: true }, + + /** + * Handle click. + * + * @ignore + * + * @fires wp.media.controller.State#insert() + * @returns {void} + */ + click: function onClick() { + var state = controller.state(), + selection = state.get( 'selection' ); + + controller.close(); + state.trigger( 'insert', selection ).reset(); + } + }); + }, + + /** + * Main embed toolbar. + * + * Forked override of {wp.media.view.MediaFrame.Post#mainEmbedToolbar()} to override text. + * + * @param {wp.Backbone.View} toolbar - Toolbar view. + * @this {wp.media.controller.Library} + * @returns {void} + */ + mainEmbedToolbar: function mainEmbedToolbar( toolbar ) { + toolbar.view = new wp.media.view.Toolbar.Embed({ + controller: this, + text: this.options.text, + event: 'insert' + }); + }, + + /** + * Embed content. + * + * Forked override of {wp.media.view.MediaFrame.Post#embedContent()} to suppress irrelevant "link text" field. + * + * @returns {void} + */ + embedContent: function embedContent() { + var view = new component.MediaEmbedView({ + controller: this, + model: this.state() + }).render(); + + this.content.set( view ); + + if ( ! wp.media.isTouchDevice ) { + view.url.focus(); + } + } + }); + + component.MediaWidgetControl = Backbone.View.extend(/** @lends wp.mediaWidgets.MediaWidgetControl.prototype */{ + + /** + * Translation strings. + * + * The mapping of translation strings is handled by media widget subclasses, + * exported from PHP to JS such as is done in WP_Widget_Media_Image::enqueue_admin_scripts(). + * + * @type {Object} + */ + l10n: { + add_to_widget: '{{add_to_widget}}', + add_media: '{{add_media}}' + }, + + /** + * Widget ID base. + * + * This may be defined by the subclass. It may be exported from PHP to JS + * such as is done in WP_Widget_Media_Image::enqueue_admin_scripts(). If not, + * it will attempt to be discovered by looking to see if this control + * instance extends each member of component.controlConstructors, and if + * it does extend one, will use the key as the id_base. + * + * @type {string} + */ + id_base: '', + + /** + * Mime type. + * + * This must be defined by the subclass. It may be exported from PHP to JS + * such as is done in WP_Widget_Media_Image::enqueue_admin_scripts(). + * + * @type {string} + */ + mime_type: '', + + /** + * View events. + * + * @type {Object} + */ + events: { + 'click .notice-missing-attachment a': 'handleMediaLibraryLinkClick', + 'click .select-media': 'selectMedia', + 'click .placeholder': 'selectMedia', + 'click .edit-media': 'editMedia' + }, + + /** + * Show display settings. + * + * @type {boolean} + */ + showDisplaySettings: true, + + /** + * Media Widget Control. + * + * @constructs wp.mediaWidgets.MediaWidgetControl + * @augments Backbone.View + * @abstract + * + * @param {Object} options - Options. + * @param {Backbone.Model} options.model - Model. + * @param {jQuery} options.el - Control field container element. + * @param {jQuery} options.syncContainer - Container element where fields are synced for the server. + * + * @returns {void} + */ + initialize: function initialize( options ) { + var control = this; + + Backbone.View.prototype.initialize.call( control, options ); + + if ( ! ( control.model instanceof component.MediaWidgetModel ) ) { + throw new Error( 'Missing options.model' ); + } + if ( ! options.el ) { + throw new Error( 'Missing options.el' ); + } + if ( ! options.syncContainer ) { + throw new Error( 'Missing options.syncContainer' ); + } + + control.syncContainer = options.syncContainer; + + control.$el.addClass( 'media-widget-control' ); + + // Allow methods to be passed in with control context preserved. + _.bindAll( control, 'syncModelToInputs', 'render', 'updateSelectedAttachment', 'renderPreview' ); + + if ( ! control.id_base ) { + _.find( component.controlConstructors, function( Constructor, idBase ) { + if ( control instanceof Constructor ) { + control.id_base = idBase; + return true; + } + return false; + }); + if ( ! control.id_base ) { + throw new Error( 'Missing id_base.' ); + } + } + + // Track attributes needed to renderPreview in it's own model. + control.previewTemplateProps = new Backbone.Model( control.mapModelToPreviewTemplateProps() ); + + // Re-render the preview when the attachment changes. + control.selectedAttachment = new wp.media.model.Attachment(); + control.renderPreview = _.debounce( control.renderPreview ); + control.listenTo( control.previewTemplateProps, 'change', control.renderPreview ); + + // Make sure a copy of the selected attachment is always fetched. + control.model.on( 'change:attachment_id', control.updateSelectedAttachment ); + control.model.on( 'change:url', control.updateSelectedAttachment ); + control.updateSelectedAttachment(); + + /* + * Sync the widget instance model attributes onto the hidden inputs that widgets currently use to store the state. + * In the future, when widgets are JS-driven, the underlying widget instance data should be exposed as a model + * from the start, without having to sync with hidden fields. See <https://core.trac.wordpress.org/ticket/33507>. + */ + control.listenTo( control.model, 'change', control.syncModelToInputs ); + control.listenTo( control.model, 'change', control.syncModelToPreviewProps ); + control.listenTo( control.model, 'change', control.render ); + + // Update the title. + control.$el.on( 'input change', '.title', function updateTitle() { + control.model.set({ + title: $.trim( $( this ).val() ) + }); + }); + + // Update link_url attribute. + control.$el.on( 'input change', '.link', function updateLinkUrl() { + var linkUrl = $.trim( $( this ).val() ), linkType = 'custom'; + if ( control.selectedAttachment.get( 'linkUrl' ) === linkUrl || control.selectedAttachment.get( 'link' ) === linkUrl ) { + linkType = 'post'; + } else if ( control.selectedAttachment.get( 'url' ) === linkUrl ) { + linkType = 'file'; + } + control.model.set( { + link_url: linkUrl, + link_type: linkType + }); + + // Update display settings for the next time the user opens to select from the media library. + control.displaySettings.set( { + link: linkType, + linkUrl: linkUrl + }); + }); + + /* + * Copy current display settings from the widget model to serve as basis + * of customized display settings for the current media frame session. + * Changes to display settings will be synced into this model, and + * when a new selection is made, the settings from this will be synced + * into that AttachmentDisplay's model to persist the setting changes. + */ + control.displaySettings = new Backbone.Model( _.pick( + control.mapModelToMediaFrameProps( + _.extend( control.model.defaults(), control.model.toJSON() ) + ), + _.keys( wp.media.view.settings.defaultProps ) + ) ); + }, + + /** + * Update the selected attachment if necessary. + * + * @returns {void} + */ + updateSelectedAttachment: function updateSelectedAttachment() { + var control = this, attachment; + + if ( 0 === control.model.get( 'attachment_id' ) ) { + control.selectedAttachment.clear(); + control.model.set( 'error', false ); + } else if ( control.model.get( 'attachment_id' ) !== control.selectedAttachment.get( 'id' ) ) { + attachment = new wp.media.model.Attachment({ + id: control.model.get( 'attachment_id' ) + }); + attachment.fetch() + .done( function done() { + control.model.set( 'error', false ); + control.selectedAttachment.set( attachment.toJSON() ); + }) + .fail( function fail() { + control.model.set( 'error', 'missing_attachment' ); + }); + } + }, + + /** + * Sync the model attributes to the hidden inputs, and update previewTemplateProps. + * + * @returns {void} + */ + syncModelToPreviewProps: function syncModelToPreviewProps() { + var control = this; + control.previewTemplateProps.set( control.mapModelToPreviewTemplateProps() ); + }, + + /** + * Sync the model attributes to the hidden inputs, and update previewTemplateProps. + * + * @returns {void} + */ + syncModelToInputs: function syncModelToInputs() { + var control = this; + control.syncContainer.find( '.media-widget-instance-property' ).each( function() { + var input = $( this ), value, propertyName; + propertyName = input.data( 'property' ); + value = control.model.get( propertyName ); + if ( _.isUndefined( value ) ) { + return; + } + + if ( 'array' === control.model.schema[ propertyName ].type && _.isArray( value ) ) { + value = value.join( ',' ); + } else if ( 'boolean' === control.model.schema[ propertyName ].type ) { + value = value ? '1' : ''; // Because in PHP, strval( true ) === '1' && strval( false ) === ''. + } else { + value = String( value ); + } + + if ( input.val() !== value ) { + input.val( value ); + input.trigger( 'change' ); + } + }); + }, + + /** + * Get template. + * + * @returns {Function} Template. + */ + template: function template() { + var control = this; + if ( ! $( '#tmpl-widget-media-' + control.id_base + '-control' ).length ) { + throw new Error( 'Missing widget control template for ' + control.id_base ); + } + return wp.template( 'widget-media-' + control.id_base + '-control' ); + }, + + /** + * Render template. + * + * @returns {void} + */ + render: function render() { + var control = this, titleInput; + + if ( ! control.templateRendered ) { + control.$el.html( control.template()( control.model.toJSON() ) ); + control.renderPreview(); // Hereafter it will re-render when control.selectedAttachment changes. + control.templateRendered = true; + } + + titleInput = control.$el.find( '.title' ); + if ( ! titleInput.is( document.activeElement ) ) { + titleInput.val( control.model.get( 'title' ) ); + } + + control.$el.toggleClass( 'selected', control.isSelected() ); + }, + + /** + * Render media preview. + * + * @abstract + * @returns {void} + */ + renderPreview: function renderPreview() { + throw new Error( 'renderPreview must be implemented' ); + }, + + /** + * Whether a media item is selected. + * + * @returns {boolean} Whether selected and no error. + */ + isSelected: function isSelected() { + var control = this; + + if ( control.model.get( 'error' ) ) { + return false; + } + + return Boolean( control.model.get( 'attachment_id' ) || control.model.get( 'url' ) ); + }, + + /** + * Handle click on link to Media Library to open modal, such as the link that appears when in the missing attachment error notice. + * + * @param {jQuery.Event} event - Event. + * @returns {void} + */ + handleMediaLibraryLinkClick: function handleMediaLibraryLinkClick( event ) { + var control = this; + event.preventDefault(); + control.selectMedia(); + }, + + /** + * Open the media select frame to chose an item. + * + * @returns {void} + */ + selectMedia: function selectMedia() { + var control = this, selection, mediaFrame, defaultSync, mediaFrameProps, selectionModels = []; + + if ( control.isSelected() && 0 !== control.model.get( 'attachment_id' ) ) { + selectionModels.push( control.selectedAttachment ); + } + + selection = new wp.media.model.Selection( selectionModels, { multiple: false } ); + + mediaFrameProps = control.mapModelToMediaFrameProps( control.model.toJSON() ); + if ( mediaFrameProps.size ) { + control.displaySettings.set( 'size', mediaFrameProps.size ); + } + + mediaFrame = new component.MediaFrameSelect({ + title: control.l10n.add_media, + frame: 'post', + text: control.l10n.add_to_widget, + selection: selection, + mimeType: control.mime_type, + selectedDisplaySettings: control.displaySettings, + showDisplaySettings: control.showDisplaySettings, + metadata: mediaFrameProps, + state: control.isSelected() && 0 === control.model.get( 'attachment_id' ) ? 'embed' : 'insert', + invalidEmbedTypeError: control.l10n.unsupported_file_type + }); + wp.media.frame = mediaFrame; // See wp.media(). + + // Handle selection of a media item. + mediaFrame.on( 'insert', function onInsert() { + var attachment = {}, state = mediaFrame.state(); + + // Update cached attachment object to avoid having to re-fetch. This also triggers re-rendering of preview. + if ( 'embed' === state.get( 'id' ) ) { + _.extend( attachment, { id: 0 }, state.props.toJSON() ); + } else { + _.extend( attachment, state.get( 'selection' ).first().toJSON() ); + } + + control.selectedAttachment.set( attachment ); + control.model.set( 'error', false ); + + // Update widget instance. + control.model.set( control.getModelPropsFromMediaFrame( mediaFrame ) ); + }); + + // Disable syncing of attachment changes back to server (except for deletions). See <https://core.trac.wordpress.org/ticket/40403>. + defaultSync = wp.media.model.Attachment.prototype.sync; + wp.media.model.Attachment.prototype.sync = function( method ) { + if ( 'delete' === method ) { + return defaultSync.apply( this, arguments ); + } else { + return $.Deferred().rejectWith( this ).promise(); + } + }; + mediaFrame.on( 'close', function onClose() { + wp.media.model.Attachment.prototype.sync = defaultSync; + }); + + mediaFrame.$el.addClass( 'media-widget' ); + mediaFrame.open(); + + // Clear the selected attachment when it is deleted in the media select frame. + if ( selection ) { + selection.on( 'destroy', function onDestroy( attachment ) { + if ( control.model.get( 'attachment_id' ) === attachment.get( 'id' ) ) { + control.model.set({ + attachment_id: 0, + url: '' + }); + } + }); + } + + /* + * Make sure focus is set inside of modal so that hitting Esc will close + * the modal and not inadvertently cause the widget to collapse in the customizer. + */ + mediaFrame.$el.find( '.media-frame-menu .media-menu-item.active' ).focus(); + }, + + /** + * Get the instance props from the media selection frame. + * + * @param {wp.media.view.MediaFrame.Select} mediaFrame - Select frame. + * @returns {Object} Props. + */ + getModelPropsFromMediaFrame: function getModelPropsFromMediaFrame( mediaFrame ) { + var control = this, state, mediaFrameProps, modelProps; + + state = mediaFrame.state(); + if ( 'insert' === state.get( 'id' ) ) { + mediaFrameProps = state.get( 'selection' ).first().toJSON(); + mediaFrameProps.postUrl = mediaFrameProps.link; + + if ( control.showDisplaySettings ) { + _.extend( + mediaFrameProps, + mediaFrame.content.get( '.attachments-browser' ).sidebar.get( 'display' ).model.toJSON() + ); + } + if ( mediaFrameProps.sizes && mediaFrameProps.size && mediaFrameProps.sizes[ mediaFrameProps.size ] ) { + mediaFrameProps.url = mediaFrameProps.sizes[ mediaFrameProps.size ].url; + } + } else if ( 'embed' === state.get( 'id' ) ) { + mediaFrameProps = _.extend( + state.props.toJSON(), + { attachment_id: 0 }, // Because some media frames use `attachment_id` not `id`. + control.model.getEmbedResetProps() + ); + } else { + throw new Error( 'Unexpected state: ' + state.get( 'id' ) ); + } + + if ( mediaFrameProps.id ) { + mediaFrameProps.attachment_id = mediaFrameProps.id; + } + + modelProps = control.mapMediaToModelProps( mediaFrameProps ); + + // Clear the extension prop so sources will be reset for video and audio media. + _.each( wp.media.view.settings.embedExts, function( ext ) { + if ( ext in control.model.schema && modelProps.url !== modelProps[ ext ] ) { + modelProps[ ext ] = ''; + } + }); + + return modelProps; + }, + + /** + * Map media frame props to model props. + * + * @param {Object} mediaFrameProps - Media frame props. + * @returns {Object} Model props. + */ + mapMediaToModelProps: function mapMediaToModelProps( mediaFrameProps ) { + var control = this, mediaFramePropToModelPropMap = {}, modelProps = {}, extension; + _.each( control.model.schema, function( fieldSchema, modelProp ) { + + // Ignore widget title attribute. + if ( 'title' === modelProp ) { + return; + } + mediaFramePropToModelPropMap[ fieldSchema.media_prop || modelProp ] = modelProp; + }); + + _.each( mediaFrameProps, function( value, mediaProp ) { + var propName = mediaFramePropToModelPropMap[ mediaProp ] || mediaProp; + if ( control.model.schema[ propName ] ) { + modelProps[ propName ] = value; + } + }); + + if ( 'custom' === mediaFrameProps.size ) { + modelProps.width = mediaFrameProps.customWidth; + modelProps.height = mediaFrameProps.customHeight; + } + + if ( 'post' === mediaFrameProps.link ) { + modelProps.link_url = mediaFrameProps.postUrl || mediaFrameProps.linkUrl; + } else if ( 'file' === mediaFrameProps.link ) { + modelProps.link_url = mediaFrameProps.url; + } + + // Because some media frames use `id` instead of `attachment_id`. + if ( ! mediaFrameProps.attachment_id && mediaFrameProps.id ) { + modelProps.attachment_id = mediaFrameProps.id; + } + + if ( mediaFrameProps.url ) { + extension = mediaFrameProps.url.replace( /#.*$/, '' ).replace( /\?.*$/, '' ).split( '.' ).pop().toLowerCase(); + if ( extension in control.model.schema ) { + modelProps[ extension ] = mediaFrameProps.url; + } + } + + // Always omit the titles derived from mediaFrameProps. + return _.omit( modelProps, 'title' ); + }, + + /** + * Map model props to media frame props. + * + * @param {Object} modelProps - Model props. + * @returns {Object} Media frame props. + */ + mapModelToMediaFrameProps: function mapModelToMediaFrameProps( modelProps ) { + var control = this, mediaFrameProps = {}; + + _.each( modelProps, function( value, modelProp ) { + var fieldSchema = control.model.schema[ modelProp ] || {}; + mediaFrameProps[ fieldSchema.media_prop || modelProp ] = value; + }); + + // Some media frames use attachment_id. + mediaFrameProps.attachment_id = mediaFrameProps.id; + + if ( 'custom' === mediaFrameProps.size ) { + mediaFrameProps.customWidth = control.model.get( 'width' ); + mediaFrameProps.customHeight = control.model.get( 'height' ); + } + + return mediaFrameProps; + }, + + /** + * Map model props to previewTemplateProps. + * + * @returns {Object} Preview Template Props. + */ + mapModelToPreviewTemplateProps: function mapModelToPreviewTemplateProps() { + var control = this, previewTemplateProps = {}; + _.each( control.model.schema, function( value, prop ) { + if ( ! value.hasOwnProperty( 'should_preview_update' ) || value.should_preview_update ) { + previewTemplateProps[ prop ] = control.model.get( prop ); + } + }); + + // Templates need to be aware of the error. + previewTemplateProps.error = control.model.get( 'error' ); + return previewTemplateProps; + }, + + /** + * Open the media frame to modify the selected item. + * + * @abstract + * @returns {void} + */ + editMedia: function editMedia() { + throw new Error( 'editMedia not implemented' ); + } + }); + + /** + * Media widget model. + * + * @class wp.mediaWidgets.MediaWidgetModel + * @augments Backbone.Model + */ + component.MediaWidgetModel = Backbone.Model.extend(/** @lends wp.mediaWidgets.MediaWidgetModel.prototype */{ + + /** + * Id attribute. + * + * @type {string} + */ + idAttribute: 'widget_id', + + /** + * Instance schema. + * + * This adheres to JSON Schema and subclasses should have their schema + * exported from PHP to JS such as is done in WP_Widget_Media_Image::enqueue_admin_scripts(). + * + * @type {Object.<string, Object>} + */ + schema: { + title: { + type: 'string', + 'default': '' + }, + attachment_id: { + type: 'integer', + 'default': 0 + }, + url: { + type: 'string', + 'default': '' + } + }, + + /** + * Get default attribute values. + * + * @returns {Object} Mapping of property names to their default values. + */ + defaults: function() { + var defaults = {}; + _.each( this.schema, function( fieldSchema, field ) { + defaults[ field ] = fieldSchema['default']; + }); + return defaults; + }, + + /** + * Set attribute value(s). + * + * This is a wrapped version of Backbone.Model#set() which allows us to + * cast the attribute values from the hidden inputs' string values into + * the appropriate data types (integers or booleans). + * + * @param {string|Object} key - Attribute name or attribute pairs. + * @param {mixed|Object} [val] - Attribute value or options object. + * @param {Object} [options] - Options when attribute name and value are passed separately. + * @returns {wp.mediaWidgets.MediaWidgetModel} This model. + */ + set: function set( key, val, options ) { + var model = this, attrs, opts, castedAttrs; // eslint-disable-line consistent-this + if ( null === key ) { + return model; + } + if ( 'object' === typeof key ) { + attrs = key; + opts = val; + } else { + attrs = {}; + attrs[ key ] = val; + opts = options; + } + + castedAttrs = {}; + _.each( attrs, function( value, name ) { + var type; + if ( ! model.schema[ name ] ) { + castedAttrs[ name ] = value; + return; + } + type = model.schema[ name ].type; + if ( 'array' === type ) { + castedAttrs[ name ] = value; + if ( ! _.isArray( castedAttrs[ name ] ) ) { + castedAttrs[ name ] = castedAttrs[ name ].split( /,/ ); // Good enough for parsing an ID list. + } + if ( model.schema[ name ].items && 'integer' === model.schema[ name ].items.type ) { + castedAttrs[ name ] = _.filter( + _.map( castedAttrs[ name ], function( id ) { + return parseInt( id, 10 ); + }, + function( id ) { + return 'number' === typeof id; + } + ) ); + } + } else if ( 'integer' === type ) { + castedAttrs[ name ] = parseInt( value, 10 ); + } else if ( 'boolean' === type ) { + castedAttrs[ name ] = ! ( ! value || '0' === value || 'false' === value ); + } else { + castedAttrs[ name ] = value; + } + }); + + return Backbone.Model.prototype.set.call( this, castedAttrs, opts ); + }, + + /** + * Get props which are merged on top of the model when an embed is chosen (as opposed to an attachment). + * + * @returns {Object} Reset/override props. + */ + getEmbedResetProps: function getEmbedResetProps() { + return { + id: 0 + }; + } + }); + + /** + * Collection of all widget model instances. + * + * @memberOf wp.mediaWidgets + * + * @type {Backbone.Collection} + */ + component.modelCollection = new ( Backbone.Collection.extend( { + model: component.MediaWidgetModel + }) )(); + + /** + * Mapping of widget ID to instances of MediaWidgetControl subclasses. + * + * @memberOf wp.mediaWidgets + * + * @type {Object.<string, wp.mediaWidgets.MediaWidgetControl>} + */ + component.widgetControls = {}; + + /** + * Handle widget being added or initialized for the first time at the widget-added event. + * + * @memberOf wp.mediaWidgets + * + * @param {jQuery.Event} event - Event. + * @param {jQuery} widgetContainer - Widget container element. + * + * @returns {void} + */ + component.handleWidgetAdded = function handleWidgetAdded( event, widgetContainer ) { + var fieldContainer, syncContainer, widgetForm, idBase, ControlConstructor, ModelConstructor, modelAttributes, widgetControl, widgetModel, widgetId, animatedCheckDelay = 50, renderWhenAnimationDone; + widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); // Note: '.form' appears in the customizer, whereas 'form' on the widgets admin screen. + idBase = widgetForm.find( '> .id_base' ).val(); + widgetId = widgetForm.find( '> .widget-id' ).val(); + + // Prevent initializing already-added widgets. + if ( component.widgetControls[ widgetId ] ) { + return; + } + + ControlConstructor = component.controlConstructors[ idBase ]; + if ( ! ControlConstructor ) { + return; + } + + ModelConstructor = component.modelConstructors[ idBase ] || component.MediaWidgetModel; + + /* + * Create a container element for the widget control (Backbone.View). + * This is inserted into the DOM immediately before the .widget-content + * element because the contents of this element are essentially "managed" + * by PHP, where each widget update cause the entire element to be emptied + * and replaced with the rendered output of WP_Widget::form() which is + * sent back in Ajax request made to save/update the widget instance. + * To prevent a "flash of replaced DOM elements and re-initialized JS + * components", the JS template is rendered outside of the normal form + * container. + */ + fieldContainer = $( '<div></div>' ); + syncContainer = widgetContainer.find( '.widget-content:first' ); + syncContainer.before( fieldContainer ); + + /* + * Sync the widget instance model attributes onto the hidden inputs that widgets currently use to store the state. + * In the future, when widgets are JS-driven, the underlying widget instance data should be exposed as a model + * from the start, without having to sync with hidden fields. See <https://core.trac.wordpress.org/ticket/33507>. + */ + modelAttributes = {}; + syncContainer.find( '.media-widget-instance-property' ).each( function() { + var input = $( this ); + modelAttributes[ input.data( 'property' ) ] = input.val(); + }); + modelAttributes.widget_id = widgetId; + + widgetModel = new ModelConstructor( modelAttributes ); + + widgetControl = new ControlConstructor({ + el: fieldContainer, + syncContainer: syncContainer, + model: widgetModel + }); + + /* + * Render the widget once the widget parent's container finishes animating, + * as the widget-added event fires with a slideDown of the container. + * This ensures that the container's dimensions are fixed so that ME.js + * can initialize with the proper dimensions. + */ + renderWhenAnimationDone = function() { + if ( ! widgetContainer.hasClass( 'open' ) ) { + setTimeout( renderWhenAnimationDone, animatedCheckDelay ); + } else { + widgetControl.render(); + } + }; + renderWhenAnimationDone(); + + /* + * Note that the model and control currently won't ever get garbage-collected + * when a widget gets removed/deleted because there is no widget-removed event. + */ + component.modelCollection.add( [ widgetModel ] ); + component.widgetControls[ widgetModel.get( 'widget_id' ) ] = widgetControl; + }; + + /** + * Setup widget in accessibility mode. + * + * @memberOf wp.mediaWidgets + * + * @returns {void} + */ + component.setupAccessibleMode = function setupAccessibleMode() { + var widgetForm, widgetId, idBase, widgetControl, ControlConstructor, ModelConstructor, modelAttributes, fieldContainer, syncContainer; + widgetForm = $( '.editwidget > form' ); + if ( 0 === widgetForm.length ) { + return; + } + + idBase = widgetForm.find( '> .widget-control-actions > .id_base' ).val(); + + ControlConstructor = component.controlConstructors[ idBase ]; + if ( ! ControlConstructor ) { + return; + } + + widgetId = widgetForm.find( '> .widget-control-actions > .widget-id' ).val(); + + ModelConstructor = component.modelConstructors[ idBase ] || component.MediaWidgetModel; + fieldContainer = $( '<div></div>' ); + syncContainer = widgetForm.find( '> .widget-inside' ); + syncContainer.before( fieldContainer ); + + modelAttributes = {}; + syncContainer.find( '.media-widget-instance-property' ).each( function() { + var input = $( this ); + modelAttributes[ input.data( 'property' ) ] = input.val(); + }); + modelAttributes.widget_id = widgetId; + + widgetControl = new ControlConstructor({ + el: fieldContainer, + syncContainer: syncContainer, + model: new ModelConstructor( modelAttributes ) + }); + + component.modelCollection.add( [ widgetControl.model ] ); + component.widgetControls[ widgetControl.model.get( 'widget_id' ) ] = widgetControl; + + widgetControl.render(); + }; + + /** + * Sync widget instance data sanitized from server back onto widget model. + * + * This gets called via the 'widget-updated' event when saving a widget from + * the widgets admin screen and also via the 'widget-synced' event when making + * a change to a widget in the customizer. + * + * @memberOf wp.mediaWidgets + * + * @param {jQuery.Event} event - Event. + * @param {jQuery} widgetContainer - Widget container element. + * + * @returns {void} + */ + component.handleWidgetUpdated = function handleWidgetUpdated( event, widgetContainer ) { + var widgetForm, widgetContent, widgetId, widgetControl, attributes = {}; + widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); + widgetId = widgetForm.find( '> .widget-id' ).val(); + + widgetControl = component.widgetControls[ widgetId ]; + if ( ! widgetControl ) { + return; + } + + // Make sure the server-sanitized values get synced back into the model. + widgetContent = widgetForm.find( '> .widget-content' ); + widgetContent.find( '.media-widget-instance-property' ).each( function() { + var property = $( this ).data( 'property' ); + attributes[ property ] = $( this ).val(); + }); + + // Suspend syncing model back to inputs when syncing from inputs to model, preventing infinite loop. + widgetControl.stopListening( widgetControl.model, 'change', widgetControl.syncModelToInputs ); + widgetControl.model.set( attributes ); + widgetControl.listenTo( widgetControl.model, 'change', widgetControl.syncModelToInputs ); + }; + + /** + * Initialize functionality. + * + * This function exists to prevent the JS file from having to boot itself. + * When WordPress enqueues this script, it should have an inline script + * attached which calls wp.mediaWidgets.init(). + * + * @memberOf wp.mediaWidgets + * + * @returns {void} + */ + component.init = function init() { + var $document = $( document ); + $document.on( 'widget-added', component.handleWidgetAdded ); + $document.on( 'widget-synced widget-updated', component.handleWidgetUpdated ); + + /* + * Manually trigger widget-added events for media widgets on the admin + * screen once they are expanded. The widget-added event is not triggered + * for each pre-existing widget on the widgets admin screen like it is + * on the customizer. Likewise, the customizer only triggers widget-added + * when the widget is expanded to just-in-time construct the widget form + * when it is actually going to be displayed. So the following implements + * the same for the widgets admin screen, to invoke the widget-added + * handler when a pre-existing media widget is expanded. + */ + $( function initializeExistingWidgetContainers() { + var widgetContainers; + if ( 'widgets' !== window.pagenow ) { + return; + } + widgetContainers = $( '.widgets-holder-wrap:not(#available-widgets)' ).find( 'div.widget' ); + widgetContainers.one( 'click.toggle-widget-expanded', function toggleWidgetExpanded() { + var widgetContainer = $( this ); + component.handleWidgetAdded( new jQuery.Event( 'widget-added' ), widgetContainer ); + }); + + // Accessibility mode. + $( window ).on( 'load', function() { + component.setupAccessibleMode(); + }); + }); + }; + + return component; +})( jQuery ); diff --git a/www/crm/wp-admin/js/widgets/media-widgets.min.js b/www/crm/wp-admin/js/widgets/media-widgets.min.js new file mode 100644 index 00000000..94b0ac54 --- /dev/null +++ b/www/crm/wp-admin/js/widgets/media-widgets.min.js @@ -0,0 +1 @@ +wp.mediaWidgets=function(a){"use strict";var b={};return b.controlConstructors={},b.modelConstructors={},b.PersistentDisplaySettingsLibrary=wp.media.controller.Library.extend({initialize:function(a){_.bindAll(this,"handleDisplaySettingChange"),wp.media.controller.Library.prototype.initialize.call(this,a)},handleDisplaySettingChange:function(a){this.get("selectedDisplaySettings").set(a.attributes)},display:function(a){var b,c=this.get("selectedDisplaySettings");return b=wp.media.controller.Library.prototype.display.call(this,a),b.off("change",this.handleDisplaySettingChange),b.set(c.attributes),"custom"===c.get("link_type")&&(b.linkUrl=c.get("link_url")),b.on("change",this.handleDisplaySettingChange),b}}),b.MediaEmbedView=wp.media.view.Embed.extend({initialize:function(a){var b,c=this;wp.media.view.Embed.prototype.initialize.call(c,a),"image"!==c.controller.options.mimeType&&(b=c.controller.states.get("embed"),b.off("scan",b.scanImage,b))},refresh:function(){var b;b="image"===this.controller.options.mimeType?wp.media.view.EmbedImage:wp.media.view.EmbedLink.extend({setAddToWidgetButtonDisabled:function(a){this.views.parent.views.parent.views.get(".media-frame-toolbar")[0].$el.find(".media-button-select").prop("disabled",a)},setErrorNotice:function(b){var c,d=this;c=d.views.parent.$el.find("> .notice:first-child"),b?(c.length||(c=a('<div class="media-widget-embed-notice notice notice-error notice-alt"></div>'),c.hide(),d.views.parent.$el.prepend(c)),c.empty(),c.append(a("<p>",{html:b})),c.slideDown("fast")):c.length&&c.slideUp("fast")},updateoEmbed:function(){var a,b=this;return(a=b.model.get("url"))?(a.match(/^(http|https):\/\/.+\//)||(b.controller.$el.find("#embed-url-field").addClass("invalid"),b.setAddToWidgetButtonDisabled(!0)),void wp.media.view.EmbedLink.prototype.updateoEmbed.call(b)):(b.setErrorNotice(""),void b.setAddToWidgetButtonDisabled(!0))},fetch:function(){var a,b,c,d,e,f,g,h=this;return e=h.model.get("url"),h.dfd&&"pending"===h.dfd.state()&&h.dfd.abort(),a=function(a){h.renderoEmbed({data:{body:a}}),h.controller.$el.find("#embed-url-field").removeClass("invalid"),h.setErrorNotice(""),h.setAddToWidgetButtonDisabled(!1)},d=document.createElement("a"),d.href=e,(b=d.pathname.toLowerCase().match(/\.(\w+)$/))?(c=b[1],void(wp.media.view.settings.embedMimes[c]?0!==wp.media.view.settings.embedMimes[c].indexOf(h.controller.options.mimeType)?h.renderFail():a("<!--success-->"):h.renderFail())):(f=/https?:\/\/www\.youtube\.com\/embed\/([^\/]+)/,g=f.exec(e),g&&(e="https://www.youtube.com/watch?v="+g[1],h.model.attributes.url=e),h.dfd=wp.apiRequest({url:wp.media.view.settings.oEmbedProxyUrl,data:{url:e,maxwidth:h.model.get("width"),maxheight:h.model.get("height"),discover:!1},type:"GET",dataType:"json",context:h}),h.dfd.done(function(b){return h.controller.options.mimeType!==b.type?void h.renderFail():void a(b.html)}),void h.dfd.fail(_.bind(h.renderFail,h)))},renderFail:function(){var a=this;a.controller.$el.find("#embed-url-field").addClass("invalid"),a.setErrorNotice(a.controller.options.invalidEmbedTypeError||"ERROR"),a.setAddToWidgetButtonDisabled(!0)}}),this.settings(new b({controller:this.controller,model:this.model.props,priority:40}))}}),b.MediaFrameSelect=wp.media.view.MediaFrame.Post.extend({createStates:function(){var a=this.options.mimeType,c=[];_.each(wp.media.view.settings.embedMimes,function(b){0===b.indexOf(a)&&c.push(b)}),c.length>0&&(a=c),this.states.add([new b.PersistentDisplaySettingsLibrary({id:"insert",title:this.options.title,selection:this.options.selection,priority:20,toolbar:"main-insert",filterable:"dates",library:wp.media.query({type:a}),multiple:!1,editable:!0,selectedDisplaySettings:this.options.selectedDisplaySettings,displaySettings:!!_.isUndefined(this.options.showDisplaySettings)||this.options.showDisplaySettings,displayUserSettings:!1}),new wp.media.controller.EditImage({model:this.options.editImage}),new wp.media.controller.Embed({metadata:this.options.metadata,type:"image"===this.options.mimeType?"image":"link",invalidEmbedTypeError:this.options.invalidEmbedTypeError})])},mainInsertToolbar:function(a){var b=this;a.set("insert",{style:"primary",priority:80,text:b.options.text,requires:{selection:!0},click:function(){var a=b.state(),c=a.get("selection");b.close(),a.trigger("insert",c).reset()}})},mainEmbedToolbar:function(a){a.view=new wp.media.view.Toolbar.Embed({controller:this,text:this.options.text,event:"insert"})},embedContent:function(){var a=new b.MediaEmbedView({controller:this,model:this.state()}).render();this.content.set(a),wp.media.isTouchDevice||a.url.focus()}}),b.MediaWidgetControl=Backbone.View.extend({l10n:{add_to_widget:"{{add_to_widget}}",add_media:"{{add_media}}"},id_base:"",mime_type:"",events:{"click .notice-missing-attachment a":"handleMediaLibraryLinkClick","click .select-media":"selectMedia","click .placeholder":"selectMedia","click .edit-media":"editMedia"},showDisplaySettings:!0,initialize:function(c){var d=this;if(Backbone.View.prototype.initialize.call(d,c),!(d.model instanceof b.MediaWidgetModel))throw new Error("Missing options.model");if(!c.el)throw new Error("Missing options.el");if(!c.syncContainer)throw new Error("Missing options.syncContainer");if(d.syncContainer=c.syncContainer,d.$el.addClass("media-widget-control"),_.bindAll(d,"syncModelToInputs","render","updateSelectedAttachment","renderPreview"),!d.id_base&&(_.find(b.controlConstructors,function(a,b){return d instanceof a&&(d.id_base=b,!0)}),!d.id_base))throw new Error("Missing id_base.");d.previewTemplateProps=new Backbone.Model(d.mapModelToPreviewTemplateProps()),d.selectedAttachment=new wp.media.model.Attachment,d.renderPreview=_.debounce(d.renderPreview),d.listenTo(d.previewTemplateProps,"change",d.renderPreview),d.model.on("change:attachment_id",d.updateSelectedAttachment),d.model.on("change:url",d.updateSelectedAttachment),d.updateSelectedAttachment(),d.listenTo(d.model,"change",d.syncModelToInputs),d.listenTo(d.model,"change",d.syncModelToPreviewProps),d.listenTo(d.model,"change",d.render),d.$el.on("input change",".title",function(){d.model.set({title:a.trim(a(this).val())})}),d.$el.on("input change",".link",function(){var b=a.trim(a(this).val()),c="custom";d.selectedAttachment.get("linkUrl")===b||d.selectedAttachment.get("link")===b?c="post":d.selectedAttachment.get("url")===b&&(c="file"),d.model.set({link_url:b,link_type:c}),d.displaySettings.set({link:c,linkUrl:b})}),d.displaySettings=new Backbone.Model(_.pick(d.mapModelToMediaFrameProps(_.extend(d.model.defaults(),d.model.toJSON())),_.keys(wp.media.view.settings.defaultProps)))},updateSelectedAttachment:function(){var a,b=this;0===b.model.get("attachment_id")?(b.selectedAttachment.clear(),b.model.set("error",!1)):b.model.get("attachment_id")!==b.selectedAttachment.get("id")&&(a=new wp.media.model.Attachment({id:b.model.get("attachment_id")}),a.fetch().done(function(){b.model.set("error",!1),b.selectedAttachment.set(a.toJSON())}).fail(function(){b.model.set("error","missing_attachment")}))},syncModelToPreviewProps:function(){var a=this;a.previewTemplateProps.set(a.mapModelToPreviewTemplateProps())},syncModelToInputs:function(){var b=this;b.syncContainer.find(".media-widget-instance-property").each(function(){var c,d,e=a(this);d=e.data("property"),c=b.model.get(d),_.isUndefined(c)||(c="array"===b.model.schema[d].type&&_.isArray(c)?c.join(","):"boolean"===b.model.schema[d].type?c?"1":"":String(c),e.val()!==c&&(e.val(c),e.trigger("change")))})},template:function(){var b=this;if(!a("#tmpl-widget-media-"+b.id_base+"-control").length)throw new Error("Missing widget control template for "+b.id_base);return wp.template("widget-media-"+b.id_base+"-control")},render:function(){var a,b=this;b.templateRendered||(b.$el.html(b.template()(b.model.toJSON())),b.renderPreview(),b.templateRendered=!0),a=b.$el.find(".title"),a.is(document.activeElement)||a.val(b.model.get("title")),b.$el.toggleClass("selected",b.isSelected())},renderPreview:function(){throw new Error("renderPreview must be implemented")},isSelected:function(){var a=this;return!a.model.get("error")&&Boolean(a.model.get("attachment_id")||a.model.get("url"))},handleMediaLibraryLinkClick:function(a){var b=this;a.preventDefault(),b.selectMedia()},selectMedia:function(){var c,d,e,f,g=this,h=[];g.isSelected()&&0!==g.model.get("attachment_id")&&h.push(g.selectedAttachment),c=new wp.media.model.Selection(h,{multiple:!1}),f=g.mapModelToMediaFrameProps(g.model.toJSON()),f.size&&g.displaySettings.set("size",f.size),d=new b.MediaFrameSelect({title:g.l10n.add_media,frame:"post",text:g.l10n.add_to_widget,selection:c,mimeType:g.mime_type,selectedDisplaySettings:g.displaySettings,showDisplaySettings:g.showDisplaySettings,metadata:f,state:g.isSelected()&&0===g.model.get("attachment_id")?"embed":"insert",invalidEmbedTypeError:g.l10n.unsupported_file_type}),wp.media.frame=d,d.on("insert",function(){var a={},b=d.state();"embed"===b.get("id")?_.extend(a,{id:0},b.props.toJSON()):_.extend(a,b.get("selection").first().toJSON()),g.selectedAttachment.set(a),g.model.set("error",!1),g.model.set(g.getModelPropsFromMediaFrame(d))}),e=wp.media.model.Attachment.prototype.sync,wp.media.model.Attachment.prototype.sync=function(b){return"delete"===b?e.apply(this,arguments):a.Deferred().rejectWith(this).promise()},d.on("close",function(){wp.media.model.Attachment.prototype.sync=e}),d.$el.addClass("media-widget"),d.open(),c&&c.on("destroy",function(a){g.model.get("attachment_id")===a.get("id")&&g.model.set({attachment_id:0,url:""})}),d.$el.find(".media-frame-menu .media-menu-item.active").focus()},getModelPropsFromMediaFrame:function(a){var b,c,d,e=this;if(b=a.state(),"insert"===b.get("id"))c=b.get("selection").first().toJSON(),c.postUrl=c.link,e.showDisplaySettings&&_.extend(c,a.content.get(".attachments-browser").sidebar.get("display").model.toJSON()),c.sizes&&c.size&&c.sizes[c.size]&&(c.url=c.sizes[c.size].url);else{if("embed"!==b.get("id"))throw new Error("Unexpected state: "+b.get("id"));c=_.extend(b.props.toJSON(),{attachment_id:0},e.model.getEmbedResetProps())}return c.id&&(c.attachment_id=c.id),d=e.mapMediaToModelProps(c),_.each(wp.media.view.settings.embedExts,function(a){a in e.model.schema&&d.url!==d[a]&&(d[a]="")}),d},mapMediaToModelProps:function(a){var b,c=this,d={},e={};return _.each(c.model.schema,function(a,b){"title"!==b&&(d[a.media_prop||b]=b)}),_.each(a,function(a,b){var f=d[b]||b;c.model.schema[f]&&(e[f]=a)}),"custom"===a.size&&(e.width=a.customWidth,e.height=a.customHeight),"post"===a.link?e.link_url=a.postUrl||a.linkUrl:"file"===a.link&&(e.link_url=a.url),!a.attachment_id&&a.id&&(e.attachment_id=a.id),a.url&&(b=a.url.replace(/#.*$/,"").replace(/\?.*$/,"").split(".").pop().toLowerCase(),b in c.model.schema&&(e[b]=a.url)),_.omit(e,"title")},mapModelToMediaFrameProps:function(a){var b=this,c={};return _.each(a,function(a,d){var e=b.model.schema[d]||{};c[e.media_prop||d]=a}),c.attachment_id=c.id,"custom"===c.size&&(c.customWidth=b.model.get("width"),c.customHeight=b.model.get("height")),c},mapModelToPreviewTemplateProps:function(){var a=this,b={};return _.each(a.model.schema,function(c,d){c.hasOwnProperty("should_preview_update")&&!c.should_preview_update||(b[d]=a.model.get(d))}),b.error=a.model.get("error"),b},editMedia:function(){throw new Error("editMedia not implemented")}}),b.MediaWidgetModel=Backbone.Model.extend({idAttribute:"widget_id",schema:{title:{type:"string","default":""},attachment_id:{type:"integer","default":0},url:{type:"string","default":""}},defaults:function(){var a={};return _.each(this.schema,function(b,c){a[c]=b["default"]}),a},set:function(a,b,c){var d,e,f,g=this;return null===a?g:("object"==typeof a?(d=a,e=b):(d={},d[a]=b,e=c),f={},_.each(d,function(a,b){var c;return g.schema[b]?(c=g.schema[b].type,void("array"===c?(f[b]=a,_.isArray(f[b])||(f[b]=f[b].split(/,/)),g.schema[b].items&&"integer"===g.schema[b].items.type&&(f[b]=_.filter(_.map(f[b],function(a){return parseInt(a,10)},function(a){return"number"==typeof a})))):"integer"===c?f[b]=parseInt(a,10):"boolean"===c?f[b]=!(!a||"0"===a||"false"===a):f[b]=a)):void(f[b]=a)}),Backbone.Model.prototype.set.call(this,f,e))},getEmbedResetProps:function(){return{id:0}}}),b.modelCollection=new(Backbone.Collection.extend({model:b.MediaWidgetModel})),b.widgetControls={},b.handleWidgetAdded=function(c,d){var e,f,g,h,i,j,k,l,m,n,o,p=50;g=d.find("> .widget-inside > .form, > .widget-inside > form"),h=g.find("> .id_base").val(),n=g.find("> .widget-id").val(),b.widgetControls[n]||(i=b.controlConstructors[h],i&&(j=b.modelConstructors[h]||b.MediaWidgetModel,e=a("<div></div>"),f=d.find(".widget-content:first"),f.before(e),k={},f.find(".media-widget-instance-property").each(function(){var b=a(this);k[b.data("property")]=b.val()}),k.widget_id=n,m=new j(k),l=new i({el:e,syncContainer:f,model:m}),o=function(){d.hasClass("open")?l.render():setTimeout(o,p)},o(),b.modelCollection.add([m]),b.widgetControls[m.get("widget_id")]=l))},b.setupAccessibleMode=function(){var c,d,e,f,g,h,i,j,k;c=a(".editwidget > form"),0!==c.length&&(e=c.find("> .widget-control-actions > .id_base").val(),g=b.controlConstructors[e],g&&(d=c.find("> .widget-control-actions > .widget-id").val(),h=b.modelConstructors[e]||b.MediaWidgetModel,j=a("<div></div>"),k=c.find("> .widget-inside"),k.before(j),i={},k.find(".media-widget-instance-property").each(function(){var b=a(this);i[b.data("property")]=b.val()}),i.widget_id=d,f=new g({el:j,syncContainer:k,model:new h(i)}),b.modelCollection.add([f.model]),b.widgetControls[f.model.get("widget_id")]=f,f.render()))},b.handleWidgetUpdated=function(c,d){var e,f,g,h,i={};e=d.find("> .widget-inside > .form, > .widget-inside > form"),g=e.find("> .widget-id").val(),h=b.widgetControls[g],h&&(f=e.find("> .widget-content"),f.find(".media-widget-instance-property").each(function(){var b=a(this).data("property");i[b]=a(this).val()}),h.stopListening(h.model,"change",h.syncModelToInputs),h.model.set(i),h.listenTo(h.model,"change",h.syncModelToInputs))},b.init=function(){var c=a(document);c.on("widget-added",b.handleWidgetAdded),c.on("widget-synced widget-updated",b.handleWidgetUpdated),a(function(){var c;"widgets"===window.pagenow&&(c=a(".widgets-holder-wrap:not(#available-widgets)").find("div.widget"),c.one("click.toggle-widget-expanded",function(){var c=a(this);b.handleWidgetAdded(new jQuery.Event("widget-added"),c)}),a(window).on("load",function(){b.setupAccessibleMode()}))})},b}(jQuery);
\ No newline at end of file diff --git a/www/crm/wp-admin/js/widgets/text-widgets.js b/www/crm/wp-admin/js/widgets/text-widgets.js new file mode 100644 index 00000000..184e7242 --- /dev/null +++ b/www/crm/wp-admin/js/widgets/text-widgets.js @@ -0,0 +1,552 @@ +/** + * @output wp-admin/js/widgets/text-widgets.js + */ + +/* global tinymce, switchEditors */ +/* eslint consistent-this: [ "error", "control" ] */ + +/** + * @namespace wp.textWidgets + */ +wp.textWidgets = ( function( $ ) { + 'use strict'; + + var component = { + dismissedPointers: [], + idBases: [ 'text' ] + }; + + component.TextWidgetControl = Backbone.View.extend(/** @lends wp.textWidgets.TextWidgetControl.prototype */{ + + /** + * View events. + * + * @type {Object} + */ + events: {}, + + /** + * Text widget control. + * + * @constructs wp.textWidgets.TextWidgetControl + * @augments Backbone.View + * @abstract + * + * @param {Object} options - Options. + * @param {jQuery} options.el - Control field container element. + * @param {jQuery} options.syncContainer - Container element where fields are synced for the server. + * + * @returns {void} + */ + initialize: function initialize( options ) { + var control = this; + + if ( ! options.el ) { + throw new Error( 'Missing options.el' ); + } + if ( ! options.syncContainer ) { + throw new Error( 'Missing options.syncContainer' ); + } + + Backbone.View.prototype.initialize.call( control, options ); + control.syncContainer = options.syncContainer; + + control.$el.addClass( 'text-widget-fields' ); + control.$el.html( wp.template( 'widget-text-control-fields' ) ); + + control.customHtmlWidgetPointer = control.$el.find( '.wp-pointer.custom-html-widget-pointer' ); + if ( control.customHtmlWidgetPointer.length ) { + control.customHtmlWidgetPointer.find( '.close' ).on( 'click', function( event ) { + event.preventDefault(); + control.customHtmlWidgetPointer.hide(); + $( '#' + control.fields.text.attr( 'id' ) + '-html' ).focus(); + control.dismissPointers( [ 'text_widget_custom_html' ] ); + }); + control.customHtmlWidgetPointer.find( '.add-widget' ).on( 'click', function( event ) { + event.preventDefault(); + control.customHtmlWidgetPointer.hide(); + control.openAvailableWidgetsPanel(); + }); + } + + control.pasteHtmlPointer = control.$el.find( '.wp-pointer.paste-html-pointer' ); + if ( control.pasteHtmlPointer.length ) { + control.pasteHtmlPointer.find( '.close' ).on( 'click', function( event ) { + event.preventDefault(); + control.pasteHtmlPointer.hide(); + control.editor.focus(); + control.dismissPointers( [ 'text_widget_custom_html', 'text_widget_paste_html' ] ); + }); + } + + control.fields = { + title: control.$el.find( '.title' ), + text: control.$el.find( '.text' ) + }; + + // Sync input fields to hidden sync fields which actually get sent to the server. + _.each( control.fields, function( fieldInput, fieldName ) { + fieldInput.on( 'input change', function updateSyncField() { + var syncInput = control.syncContainer.find( '.sync-input.' + fieldName ); + if ( syncInput.val() !== fieldInput.val() ) { + syncInput.val( fieldInput.val() ); + syncInput.trigger( 'change' ); + } + }); + + // Note that syncInput cannot be re-used because it will be destroyed with each widget-updated event. + fieldInput.val( control.syncContainer.find( '.sync-input.' + fieldName ).val() ); + }); + }, + + /** + * Dismiss pointers for Custom HTML widget. + * + * @since 4.8.1 + * + * @param {Array} pointers Pointer IDs to dismiss. + * @returns {void} + */ + dismissPointers: function dismissPointers( pointers ) { + _.each( pointers, function( pointer ) { + wp.ajax.post( 'dismiss-wp-pointer', { + pointer: pointer + }); + component.dismissedPointers.push( pointer ); + }); + }, + + /** + * Open available widgets panel. + * + * @since 4.8.1 + * @returns {void} + */ + openAvailableWidgetsPanel: function openAvailableWidgetsPanel() { + var sidebarControl; + wp.customize.section.each( function( section ) { + if ( section.extended( wp.customize.Widgets.SidebarSection ) && section.expanded() ) { + sidebarControl = wp.customize.control( 'sidebars_widgets[' + section.params.sidebarId + ']' ); + } + }); + if ( ! sidebarControl ) { + return; + } + setTimeout( function() { // Timeout to prevent click event from causing panel to immediately collapse. + wp.customize.Widgets.availableWidgetsPanel.open( sidebarControl ); + wp.customize.Widgets.availableWidgetsPanel.$search.val( 'HTML' ).trigger( 'keyup' ); + }); + }, + + /** + * Update input fields from the sync fields. + * + * This function is called at the widget-updated and widget-synced events. + * A field will only be updated if it is not currently focused, to avoid + * overwriting content that the user is entering. + * + * @returns {void} + */ + updateFields: function updateFields() { + var control = this, syncInput; + + if ( ! control.fields.title.is( document.activeElement ) ) { + syncInput = control.syncContainer.find( '.sync-input.title' ); + control.fields.title.val( syncInput.val() ); + } + + syncInput = control.syncContainer.find( '.sync-input.text' ); + if ( control.fields.text.is( ':visible' ) ) { + if ( ! control.fields.text.is( document.activeElement ) ) { + control.fields.text.val( syncInput.val() ); + } + } else if ( control.editor && ! control.editorFocused && syncInput.val() !== control.fields.text.val() ) { + control.editor.setContent( wp.editor.autop( syncInput.val() ) ); + } + }, + + /** + * Initialize editor. + * + * @returns {void} + */ + initializeEditor: function initializeEditor() { + var control = this, changeDebounceDelay = 1000, id, textarea, triggerChangeIfDirty, restoreTextMode = false, needsTextareaChangeTrigger = false, previousValue; + textarea = control.fields.text; + id = textarea.attr( 'id' ); + previousValue = textarea.val(); + + /** + * Trigger change if dirty. + * + * @returns {void} + */ + triggerChangeIfDirty = function() { + var updateWidgetBuffer = 300; // See wp.customize.Widgets.WidgetControl._setupUpdateUI() which uses 250ms for updateWidgetDebounced. + if ( control.editor.isDirty() ) { + + /* + * Account for race condition in customizer where user clicks Save & Publish while + * focus was just previously given to the editor. Since updates to the editor + * are debounced at 1 second and since widget input changes are only synced to + * settings after 250ms, the customizer needs to be put into the processing + * state during the time between the change event is triggered and updateWidget + * logic starts. Note that the debounced update-widget request should be able + * to be removed with the removal of the update-widget request entirely once + * widgets are able to mutate their own instance props directly in JS without + * having to make server round-trips to call the respective WP_Widget::update() + * callbacks. See <https://core.trac.wordpress.org/ticket/33507>. + */ + if ( wp.customize && wp.customize.state ) { + wp.customize.state( 'processing' ).set( wp.customize.state( 'processing' ).get() + 1 ); + _.delay( function() { + wp.customize.state( 'processing' ).set( wp.customize.state( 'processing' ).get() - 1 ); + }, updateWidgetBuffer ); + } + + if ( ! control.editor.isHidden() ) { + control.editor.save(); + } + } + + // Trigger change on textarea when it has changed so the widget can enter a dirty state. + if ( needsTextareaChangeTrigger && previousValue !== textarea.val() ) { + textarea.trigger( 'change' ); + needsTextareaChangeTrigger = false; + previousValue = textarea.val(); + } + }; + + // Just-in-time force-update the hidden input fields. + control.syncContainer.closest( '.widget' ).find( '[name=savewidget]:first' ).on( 'click', function onClickSaveButton() { + triggerChangeIfDirty(); + }); + + /** + * Build (or re-build) the visual editor. + * + * @returns {void} + */ + function buildEditor() { + var editor, onInit, showPointerElement; + + // Abort building if the textarea is gone, likely due to the widget having been deleted entirely. + if ( ! document.getElementById( id ) ) { + return; + } + + // The user has disabled TinyMCE. + if ( typeof window.tinymce === 'undefined' ) { + wp.editor.initialize( id, { + quicktags: true, + mediaButtons: true + }); + + return; + } + + // Destroy any existing editor so that it can be re-initialized after a widget-updated event. + if ( tinymce.get( id ) ) { + restoreTextMode = tinymce.get( id ).isHidden(); + wp.editor.remove( id ); + } + + // Add or enable the `wpview` plugin. + $( document ).one( 'wp-before-tinymce-init.text-widget-init', function( event, init ) { + // If somebody has removed all plugins, they must have a good reason. + // Keep it that way. + if ( ! init.plugins ) { + return; + } else if ( ! /\bwpview\b/.test( init.plugins ) ) { + init.plugins += ',wpview'; + } + } ); + + wp.editor.initialize( id, { + tinymce: { + wpautop: true + }, + quicktags: true, + mediaButtons: true + }); + + /** + * Show a pointer, focus on dismiss, and speak the contents for a11y. + * + * @param {jQuery} pointerElement Pointer element. + * @returns {void} + */ + showPointerElement = function( pointerElement ) { + pointerElement.show(); + pointerElement.find( '.close' ).focus(); + wp.a11y.speak( pointerElement.find( 'h3, p' ).map( function() { + return $( this ).text(); + } ).get().join( '\n\n' ) ); + }; + + editor = window.tinymce.get( id ); + if ( ! editor ) { + throw new Error( 'Failed to initialize editor' ); + } + onInit = function() { + + // When a widget is moved in the DOM the dynamically-created TinyMCE iframe will be destroyed and has to be re-built. + $( editor.getWin() ).on( 'unload', function() { + _.defer( buildEditor ); + }); + + // If a prior mce instance was replaced, and it was in text mode, toggle to text mode. + if ( restoreTextMode ) { + switchEditors.go( id, 'html' ); + } + + // Show the pointer. + $( '#' + id + '-html' ).on( 'click', function() { + control.pasteHtmlPointer.hide(); // Hide the HTML pasting pointer. + + if ( -1 !== component.dismissedPointers.indexOf( 'text_widget_custom_html' ) ) { + return; + } + showPointerElement( control.customHtmlWidgetPointer ); + }); + + // Hide the pointer when switching tabs. + $( '#' + id + '-tmce' ).on( 'click', function() { + control.customHtmlWidgetPointer.hide(); + }); + + // Show pointer when pasting HTML. + editor.on( 'pastepreprocess', function( event ) { + var content = event.content; + if ( -1 !== component.dismissedPointers.indexOf( 'text_widget_paste_html' ) || ! content || ! /<\w+.*?>/.test( content ) ) { + return; + } + + // Show the pointer after a slight delay so the user sees what they pasted. + _.delay( function() { + showPointerElement( control.pasteHtmlPointer ); + }, 250 ); + }); + }; + + if ( editor.initialized ) { + onInit(); + } else { + editor.on( 'init', onInit ); + } + + control.editorFocused = false; + + editor.on( 'focus', function onEditorFocus() { + control.editorFocused = true; + }); + editor.on( 'paste', function onEditorPaste() { + editor.setDirty( true ); // Because pasting doesn't currently set the dirty state. + triggerChangeIfDirty(); + }); + editor.on( 'NodeChange', function onNodeChange() { + needsTextareaChangeTrigger = true; + }); + editor.on( 'NodeChange', _.debounce( triggerChangeIfDirty, changeDebounceDelay ) ); + editor.on( 'blur hide', function onEditorBlur() { + control.editorFocused = false; + triggerChangeIfDirty(); + }); + + control.editor = editor; + } + + buildEditor(); + } + }); + + /** + * Mapping of widget ID to instances of TextWidgetControl subclasses. + * + * @memberOf wp.textWidgets + * + * @type {Object.<string, wp.textWidgets.TextWidgetControl>} + */ + component.widgetControls = {}; + + /** + * Handle widget being added or initialized for the first time at the widget-added event. + * + * @memberOf wp.textWidgets + * + * @param {jQuery.Event} event - Event. + * @param {jQuery} widgetContainer - Widget container element. + * + * @returns {void} + */ + component.handleWidgetAdded = function handleWidgetAdded( event, widgetContainer ) { + var widgetForm, idBase, widgetControl, widgetId, animatedCheckDelay = 50, renderWhenAnimationDone, fieldContainer, syncContainer; + widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); // Note: '.form' appears in the customizer, whereas 'form' on the widgets admin screen. + + idBase = widgetForm.find( '> .id_base' ).val(); + if ( -1 === component.idBases.indexOf( idBase ) ) { + return; + } + + // Prevent initializing already-added widgets. + widgetId = widgetForm.find( '.widget-id' ).val(); + if ( component.widgetControls[ widgetId ] ) { + return; + } + + // Bypass using TinyMCE when widget is in legacy mode. + if ( ! widgetForm.find( '.visual' ).val() ) { + return; + } + + /* + * Create a container element for the widget control fields. + * This is inserted into the DOM immediately before the .widget-content + * element because the contents of this element are essentially "managed" + * by PHP, where each widget update cause the entire element to be emptied + * and replaced with the rendered output of WP_Widget::form() which is + * sent back in Ajax request made to save/update the widget instance. + * To prevent a "flash of replaced DOM elements and re-initialized JS + * components", the JS template is rendered outside of the normal form + * container. + */ + fieldContainer = $( '<div></div>' ); + syncContainer = widgetContainer.find( '.widget-content:first' ); + syncContainer.before( fieldContainer ); + + widgetControl = new component.TextWidgetControl({ + el: fieldContainer, + syncContainer: syncContainer + }); + + component.widgetControls[ widgetId ] = widgetControl; + + /* + * Render the widget once the widget parent's container finishes animating, + * as the widget-added event fires with a slideDown of the container. + * This ensures that the textarea is visible and an iframe can be embedded + * with TinyMCE being able to set contenteditable on it. + */ + renderWhenAnimationDone = function() { + if ( ! widgetContainer.hasClass( 'open' ) ) { + setTimeout( renderWhenAnimationDone, animatedCheckDelay ); + } else { + widgetControl.initializeEditor(); + } + }; + renderWhenAnimationDone(); + }; + + /** + * Setup widget in accessibility mode. + * + * @memberOf wp.textWidgets + * + * @returns {void} + */ + component.setupAccessibleMode = function setupAccessibleMode() { + var widgetForm, idBase, widgetControl, fieldContainer, syncContainer; + widgetForm = $( '.editwidget > form' ); + if ( 0 === widgetForm.length ) { + return; + } + + idBase = widgetForm.find( '> .widget-control-actions > .id_base' ).val(); + if ( -1 === component.idBases.indexOf( idBase ) ) { + return; + } + + // Bypass using TinyMCE when widget is in legacy mode. + if ( ! widgetForm.find( '.visual' ).val() ) { + return; + } + + fieldContainer = $( '<div></div>' ); + syncContainer = widgetForm.find( '> .widget-inside' ); + syncContainer.before( fieldContainer ); + + widgetControl = new component.TextWidgetControl({ + el: fieldContainer, + syncContainer: syncContainer + }); + + widgetControl.initializeEditor(); + }; + + /** + * Sync widget instance data sanitized from server back onto widget model. + * + * This gets called via the 'widget-updated' event when saving a widget from + * the widgets admin screen and also via the 'widget-synced' event when making + * a change to a widget in the customizer. + * + * @memberOf wp.textWidgets + * + * @param {jQuery.Event} event - Event. + * @param {jQuery} widgetContainer - Widget container element. + * @returns {void} + */ + component.handleWidgetUpdated = function handleWidgetUpdated( event, widgetContainer ) { + var widgetForm, widgetId, widgetControl, idBase; + widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); + + idBase = widgetForm.find( '> .id_base' ).val(); + if ( -1 === component.idBases.indexOf( idBase ) ) { + return; + } + + widgetId = widgetForm.find( '> .widget-id' ).val(); + widgetControl = component.widgetControls[ widgetId ]; + if ( ! widgetControl ) { + return; + } + + widgetControl.updateFields(); + }; + + /** + * Initialize functionality. + * + * This function exists to prevent the JS file from having to boot itself. + * When WordPress enqueues this script, it should have an inline script + * attached which calls wp.textWidgets.init(). + * + * @memberOf wp.textWidgets + * + * @returns {void} + */ + component.init = function init() { + var $document = $( document ); + $document.on( 'widget-added', component.handleWidgetAdded ); + $document.on( 'widget-synced widget-updated', component.handleWidgetUpdated ); + + /* + * Manually trigger widget-added events for media widgets on the admin + * screen once they are expanded. The widget-added event is not triggered + * for each pre-existing widget on the widgets admin screen like it is + * on the customizer. Likewise, the customizer only triggers widget-added + * when the widget is expanded to just-in-time construct the widget form + * when it is actually going to be displayed. So the following implements + * the same for the widgets admin screen, to invoke the widget-added + * handler when a pre-existing media widget is expanded. + */ + $( function initializeExistingWidgetContainers() { + var widgetContainers; + if ( 'widgets' !== window.pagenow ) { + return; + } + widgetContainers = $( '.widgets-holder-wrap:not(#available-widgets)' ).find( 'div.widget' ); + widgetContainers.one( 'click.toggle-widget-expanded', function toggleWidgetExpanded() { + var widgetContainer = $( this ); + component.handleWidgetAdded( new jQuery.Event( 'widget-added' ), widgetContainer ); + }); + + // Accessibility mode. + $( window ).on( 'load', function() { + component.setupAccessibleMode(); + }); + }); + }; + + return component; +})( jQuery ); diff --git a/www/crm/wp-admin/js/widgets/text-widgets.min.js b/www/crm/wp-admin/js/widgets/text-widgets.min.js new file mode 100644 index 00000000..98e40d26 --- /dev/null +++ b/www/crm/wp-admin/js/widgets/text-widgets.min.js @@ -0,0 +1 @@ +wp.textWidgets=function(a){"use strict";var b={dismissedPointers:[],idBases:["text"]};return b.TextWidgetControl=Backbone.View.extend({events:{},initialize:function(b){var c=this;if(!b.el)throw new Error("Missing options.el");if(!b.syncContainer)throw new Error("Missing options.syncContainer");Backbone.View.prototype.initialize.call(c,b),c.syncContainer=b.syncContainer,c.$el.addClass("text-widget-fields"),c.$el.html(wp.template("widget-text-control-fields")),c.customHtmlWidgetPointer=c.$el.find(".wp-pointer.custom-html-widget-pointer"),c.customHtmlWidgetPointer.length&&(c.customHtmlWidgetPointer.find(".close").on("click",function(b){b.preventDefault(),c.customHtmlWidgetPointer.hide(),a("#"+c.fields.text.attr("id")+"-html").focus(),c.dismissPointers(["text_widget_custom_html"])}),c.customHtmlWidgetPointer.find(".add-widget").on("click",function(a){a.preventDefault(),c.customHtmlWidgetPointer.hide(),c.openAvailableWidgetsPanel()})),c.pasteHtmlPointer=c.$el.find(".wp-pointer.paste-html-pointer"),c.pasteHtmlPointer.length&&c.pasteHtmlPointer.find(".close").on("click",function(a){a.preventDefault(),c.pasteHtmlPointer.hide(),c.editor.focus(),c.dismissPointers(["text_widget_custom_html","text_widget_paste_html"])}),c.fields={title:c.$el.find(".title"),text:c.$el.find(".text")},_.each(c.fields,function(a,b){a.on("input change",function(){var d=c.syncContainer.find(".sync-input."+b);d.val()!==a.val()&&(d.val(a.val()),d.trigger("change"))}),a.val(c.syncContainer.find(".sync-input."+b).val())})},dismissPointers:function(a){_.each(a,function(a){wp.ajax.post("dismiss-wp-pointer",{pointer:a}),b.dismissedPointers.push(a)})},openAvailableWidgetsPanel:function(){var a;wp.customize.section.each(function(b){b.extended(wp.customize.Widgets.SidebarSection)&&b.expanded()&&(a=wp.customize.control("sidebars_widgets["+b.params.sidebarId+"]"))}),a&&setTimeout(function(){wp.customize.Widgets.availableWidgetsPanel.open(a),wp.customize.Widgets.availableWidgetsPanel.$search.val("HTML").trigger("keyup")})},updateFields:function(){var a,b=this;b.fields.title.is(document.activeElement)||(a=b.syncContainer.find(".sync-input.title"),b.fields.title.val(a.val())),a=b.syncContainer.find(".sync-input.text"),b.fields.text.is(":visible")?b.fields.text.is(document.activeElement)||b.fields.text.val(a.val()):b.editor&&!b.editorFocused&&a.val()!==b.fields.text.val()&&b.editor.setContent(wp.editor.autop(a.val()))},initializeEditor:function(){function c(){var e,g,l;if(document.getElementById(d)){if("undefined"==typeof window.tinymce)return void wp.editor.initialize(d,{quicktags:!0,mediaButtons:!0});if(tinymce.get(d)&&(j=tinymce.get(d).isHidden(),wp.editor.remove(d)),a(document).one("wp-before-tinymce-init.text-widget-init",function(a,b){b.plugins&&(/\bwpview\b/.test(b.plugins)||(b.plugins+=",wpview"))}),wp.editor.initialize(d,{tinymce:{wpautop:!0},quicktags:!0,mediaButtons:!0}),l=function(b){b.show(),b.find(".close").focus(),wp.a11y.speak(b.find("h3, p").map(function(){return a(this).text()}).get().join("\n\n"))},e=window.tinymce.get(d),!e)throw new Error("Failed to initialize editor");g=function(){a(e.getWin()).on("unload",function(){_.defer(c)}),j&&switchEditors.go(d,"html"),a("#"+d+"-html").on("click",function(){h.pasteHtmlPointer.hide(),-1===b.dismissedPointers.indexOf("text_widget_custom_html")&&l(h.customHtmlWidgetPointer)}),a("#"+d+"-tmce").on("click",function(){h.customHtmlWidgetPointer.hide()}),e.on("pastepreprocess",function(a){var c=a.content;-1===b.dismissedPointers.indexOf("text_widget_paste_html")&&c&&/<\w+.*?>/.test(c)&&_.delay(function(){l(h.pasteHtmlPointer)},250)})},e.initialized?g():e.on("init",g),h.editorFocused=!1,e.on("focus",function(){h.editorFocused=!0}),e.on("paste",function(){e.setDirty(!0),f()}),e.on("NodeChange",function(){k=!0}),e.on("NodeChange",_.debounce(f,i)),e.on("blur hide",function(){h.editorFocused=!1,f()}),h.editor=e}}var d,e,f,g,h=this,i=1e3,j=!1,k=!1;e=h.fields.text,d=e.attr("id"),g=e.val(),f=function(){var a=300;h.editor.isDirty()&&(wp.customize&&wp.customize.state&&(wp.customize.state("processing").set(wp.customize.state("processing").get()+1),_.delay(function(){wp.customize.state("processing").set(wp.customize.state("processing").get()-1)},a)),h.editor.isHidden()||h.editor.save()),k&&g!==e.val()&&(e.trigger("change"),k=!1,g=e.val())},h.syncContainer.closest(".widget").find("[name=savewidget]:first").on("click",function(){f()}),c()}}),b.widgetControls={},b.handleWidgetAdded=function(c,d){var e,f,g,h,i,j,k,l=50;e=d.find("> .widget-inside > .form, > .widget-inside > form"),f=e.find("> .id_base").val(),-1!==b.idBases.indexOf(f)&&(h=e.find(".widget-id").val(),b.widgetControls[h]||e.find(".visual").val()&&(j=a("<div></div>"),k=d.find(".widget-content:first"),k.before(j),g=new b.TextWidgetControl({el:j,syncContainer:k}),b.widgetControls[h]=g,(i=function(){d.hasClass("open")?g.initializeEditor():setTimeout(i,l)})()))},b.setupAccessibleMode=function(){var c,d,e,f,g;c=a(".editwidget > form"),0!==c.length&&(d=c.find("> .widget-control-actions > .id_base").val(),-1!==b.idBases.indexOf(d)&&c.find(".visual").val()&&(f=a("<div></div>"),g=c.find("> .widget-inside"),g.before(f),e=new b.TextWidgetControl({el:f,syncContainer:g}),e.initializeEditor()))},b.handleWidgetUpdated=function(a,c){var d,e,f,g;d=c.find("> .widget-inside > .form, > .widget-inside > form"),g=d.find("> .id_base").val(),-1!==b.idBases.indexOf(g)&&(e=d.find("> .widget-id").val(),f=b.widgetControls[e],f&&f.updateFields())},b.init=function(){var c=a(document);c.on("widget-added",b.handleWidgetAdded),c.on("widget-synced widget-updated",b.handleWidgetUpdated),a(function(){var c;"widgets"===window.pagenow&&(c=a(".widgets-holder-wrap:not(#available-widgets)").find("div.widget"),c.one("click.toggle-widget-expanded",function(){var c=a(this);b.handleWidgetAdded(new jQuery.Event("widget-added"),c)}),a(window).on("load",function(){b.setupAccessibleMode()}))})},b}(jQuery);
\ No newline at end of file |