diff options
Diffstat (limited to 'srcs/wordpress/wp-admin/js/widgets')
14 files changed, 3266 insertions, 0 deletions
diff --git a/srcs/wordpress/wp-admin/js/widgets/custom-html-widgets.js b/srcs/wordpress/wp-admin/js/widgets/custom-html-widgets.js new file mode 100644 index 0000000..93aa901 --- /dev/null +++ b/srcs/wordpress/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/srcs/wordpress/wp-admin/js/widgets/custom-html-widgets.min.js b/srcs/wordpress/wp-admin/js/widgets/custom-html-widgets.min.js new file mode 100644 index 0000000..4fcc0c0 --- /dev/null +++ b/srcs/wordpress/wp-admin/js/widgets/custom-html-widgets.min.js @@ -0,0 +1 @@ +wp.customHtmlWidgets=function(l){"use strict";var c={idBases:["custom_html"],codeEditorSettings:{},l10n:{errorNotice:{singular:"",plural:""}}};return c.CustomHtmlWidgetControl=Backbone.View.extend({events:{},initialize:function(e){var n=this;if(!e.el)throw new Error("Missing options.el");if(!e.syncContainer)throw new Error("Missing options.syncContainer");Backbone.View.prototype.initialize.call(n,e),n.syncContainer=e.syncContainer,n.widgetIdBase=n.syncContainer.parent().find(".id_base").val(),n.widgetNumber=n.syncContainer.parent().find(".widget_number").val(),n.customizeSettingId="widget_"+n.widgetIdBase+"["+String(n.widgetNumber)+"]",n.$el.addClass("custom-html-widget-fields"),n.$el.html(wp.template("widget-custom-html-control-fields")({codeEditorDisabled:c.codeEditorSettings.disabled})),n.errorNoticeContainer=n.$el.find(".code-editor-error-container"),n.currentErrorAnnotations=[],n.saveButton=n.syncContainer.add(n.syncContainer.parent().find(".widget-control-actions")).find(".widget-control-save, #savewidget"),n.saveButton.addClass("custom-html-widget-save-button"),n.fields={title:n.$el.find(".title"),content:n.$el.find(".content")},_.each(n.fields,function(t,i){t.on("input change",function(){var e=n.syncContainer.find(".sync-input."+i);e.val()!==t.val()&&(e.val(t.val()),e.trigger("change"))}),t.val(n.syncContainer.find(".sync-input."+i).val())})},updateFields:function(){var e,t=this;t.fields.title.is(document.activeElement)||(e=t.syncContainer.find(".sync-input.title"),t.fields.title.val(e.val())),t.contentUpdateBypassed=t.fields.content.is(document.activeElement)||t.editor&&t.editor.codemirror.state.focused||0!==t.currentErrorAnnotations.length,t.contentUpdateBypassed||(e=t.syncContainer.find(".sync-input.content"),t.fields.content.val(e.val()))},updateErrorNotice:function(e){var t,i,n=this,o="";1===e.length?o=c.l10n.errorNotice.singular.replace("%d","1"):1<e.length&&(o=c.l10n.errorNotice.plural.replace("%d",String(e.length))),n.fields.content[0].setCustomValidity&&n.fields.content[0].setCustomValidity(o),wp.customize&&wp.customize.has(n.customizeSettingId)?((i=wp.customize(n.customizeSettingId)).notifications.remove("htmlhint_error"),0!==e.length&&i.notifications.add("htmlhint_error",new wp.customize.Notification("htmlhint_error",{message:o,type:"error"}))):0!==e.length?((t=l('<div class="inline notice notice-error notice-alt"></div>')).append(l("<p></p>",{text:o})),n.errorNoticeContainer.empty(),n.errorNoticeContainer.append(t),n.errorNoticeContainer.slideDown("fast"),wp.a11y.speak(o)):n.errorNoticeContainer.slideUp("fast")},initializeEditor:function(){var e,t=this;c.codeEditorSettings.disabled||(e=_.extend({},c.codeEditorSettings,{onTabPrevious:function(){t.fields.title.focus()},onTabNext:function(){t.syncContainer.add(t.syncContainer.parent().find(".widget-position, .widget-control-actions")).find(":tabbable").first().focus()},onChangeLintingErrors:function(e){t.currentErrorAnnotations=e},onUpdateErrorNotice:function(e){t.saveButton.toggleClass("validation-blocked disabled",0<e.length),t.updateErrorNotice(e)}}),t.editor=wp.codeEditor.initialize(t.fields.content,e),l(t.editor.codemirror.display.lineDiv).attr({role:"textbox","aria-multiline":"true","aria-labelledby":t.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"}),l("#"+t.fields.content[0].id+"-label").on("click",function(){t.editor.codemirror.focus()}),t.fields.content.on("change",function(){this.value!==t.editor.codemirror.getValue()&&t.editor.codemirror.setValue(this.value)}),t.editor.codemirror.on("change",function(){var e=t.editor.codemirror.getValue();e!==t.fields.content.val()&&t.fields.content.val(e).trigger("change")}),t.editor.codemirror.on("blur",function(){t.contentUpdateBypassed&&t.syncContainer.find(".sync-input.content").trigger("change")}),wp.customize&&t.editor.codemirror.on("keydown",function(e,t){27===t.keyCode&&t.stopPropagation()}))}}),c.widgetControls={},c.handleWidgetAdded=function(e,t){var i,n,o,d,r,a,s;n=(i=t.find("> .widget-inside > .form, > .widget-inside > form")).find("> .id_base").val(),-1!==c.idBases.indexOf(n)&&(d=i.find(".widget-id").val(),c.widgetControls[d]||(a=l("<div></div>"),(s=t.find(".widget-content:first")).before(a),o=new c.CustomHtmlWidgetControl({el:a,syncContainer:s}),c.widgetControls[d]=o,(r=function(){(wp.customize?t.parent().hasClass("expanded"):t.hasClass("open"))?o.initializeEditor():setTimeout(r,50)})()))},c.setupAccessibleMode=function(){var e,t,i,n;0!==(e=l(".editwidget > form")).length&&(t=e.find("> .widget-control-actions > .id_base").val(),-1!==c.idBases.indexOf(t)&&(i=l("<div></div>"),(n=e.find("> .widget-inside")).before(i),new c.CustomHtmlWidgetControl({el:i,syncContainer:n}).initializeEditor()))},c.handleWidgetUpdated=function(e,t){var i,n,o,d;d=(i=t.find("> .widget-inside > .form, > .widget-inside > form")).find("> .id_base").val(),-1!==c.idBases.indexOf(d)&&(n=i.find("> .widget-id").val(),(o=c.widgetControls[n])&&o.updateFields())},c.init=function(e){var t=l(document);_.extend(c.codeEditorSettings,e),t.on("widget-added",c.handleWidgetAdded),t.on("widget-synced widget-updated",c.handleWidgetUpdated),l(function(){"widgets"===window.pagenow&&(l(".widgets-holder-wrap:not(#available-widgets)").find("div.widget").one("click.toggle-widget-expanded",function(){var e=l(this);c.handleWidgetAdded(new jQuery.Event("widget-added"),e)}),l(window).on("load",function(){c.setupAccessibleMode()}))})},c}(jQuery);
\ No newline at end of file diff --git a/srcs/wordpress/wp-admin/js/widgets/media-audio-widget.js b/srcs/wordpress/wp-admin/js/widgets/media-audio-widget.js new file mode 100644 index 0000000..e050c30 --- /dev/null +++ b/srcs/wordpress/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/srcs/wordpress/wp-admin/js/widgets/media-audio-widget.min.js b/srcs/wordpress/wp-admin/js/widgets/media-audio-widget.min.js new file mode 100644 index 0000000..d1c44fc --- /dev/null +++ b/srcs/wordpress/wp-admin/js/widgets/media-audio-widget.min.js @@ -0,0 +1 @@ +!function(d){"use strict";var e,t,i;i=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})])}}),e=d.MediaWidgetModel.extend({}),t=d.MediaWidgetControl.extend({showDisplaySettings:!1,mapModelToMediaFrameProps:function(e){var t;return(t=d.MediaWidgetControl.prototype.mapModelToMediaFrameProps.call(this,e)).link="embed",t},renderPreview:function(){var e,t,d,a,i=this;d=i.model.get("attachment_id"),a=i.model.get("url"),(d||a)&&(e=i.$el.find(".media-widget-preview"),t=wp.template("wp-media-widget-audio-preview"),e.html(t({model:{attachment_id:i.model.get("attachment_id"),src:a},error:i.model.get("error")})),wp.mediaelement.initialize())},editMedia:function(){var e,t,d,a=this;t=a.mapModelToMediaFrameProps(a.model.toJSON()),e=new i({frame:"audio",state:"audio-details",metadata:t}),(wp.media.frame=e).$el.addClass("media-widget"),d=function(e){a.selectedAttachment.set(e),a.model.set(_.extend(a.model.defaults(),a.mapMediaToModelProps(e),{error:!1}))},e.state("audio-details").on("update",d),e.state("replace-audio").on("replace",d),e.on("close",function(){e.detach()}),e.open()}}),d.controlConstructors.media_audio=t,d.modelConstructors.media_audio=e}(wp.mediaWidgets);
\ No newline at end of file diff --git a/srcs/wordpress/wp-admin/js/widgets/media-gallery-widget.js b/srcs/wordpress/wp-admin/js/widgets/media-gallery-widget.js new file mode 100644 index 0000000..45671e7 --- /dev/null +++ b/srcs/wordpress/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} + */ + renderP |