acquia_dam-1.0.0-rc1/js/plugins/mediarevisions/plugin.js
js/plugins/mediarevisions/plugin.js
(function ($, Drupal, CKEDITOR) { CKEDITOR.plugins.add('acquia_dam_mediarevisions', { requires: 'drupalmedia', beforeInit(editor) { function setupUpdateButton(widget) { // The preview was not regenerated, so our button already exists. // @see `_previewNeedsServerSideUpdate` in `drupalmedia` if (widget.element.findOne('.media-library-item__version')) { return; } const embeddedMedia = getEmbeddedMediaElement(widget) const editButton = CKEDITOR.dom.element.createFromHtml( `<button class="media-library-item__version">${Drupal.t('Update media')}</button>`, ); embeddedMedia.getFirst().getNext().insertBeforeMe(editButton); widget.element .findOne('.media-library-item__version') .on('click', event => { const saveCallback = values => { event.cancel(); editor.fire('saveSnapshot'); if (values.hasOwnProperty('attributes')) { CKEDITOR.tools.extend( values.attributes, widget.data.attributes, ); } widget.setData({ attributes: values.attributes, }); editor.fire('saveSnapshot'); } Drupal.ckeditor.openDialog( editor, Drupal.url(`editor/dialog/media-revisions/${editor.config.drupal.format}`), widget.data, saveCallback, { dialogClass: 'media-revisions-dialog', }, ) }); // Allow opening the dialog with the return key or the space bar // by triggering a click event when a keydown event occurs on // the edit button. widget.element .findOne('.media-library-item__version') .on('keydown', (event) => { // The character code for the return key. const returnKey = 13; // The character code for the space bar. const spaceBar = 32; if (typeof event.data !== 'undefined') { const keypress = event.data.getKey(); if (keypress === returnKey || keypress === spaceBar) { // Clicks the edit button that triggered the 'keydown' // event. event.sender.$.click(); } // Stop propagation to keep the return key from // adding a line break. event.data.$.stopPropagation(); event.data.$.stopImmediatePropagation(); } }); } function getEmbeddedMediaElement(widget) { const embeddedMediaContainer = widget.data.hasCaption ? widget.element.findOne('figure') : widget.element; let embeddedMedia = embeddedMediaContainer.getFirst(n => n.type === CKEDITOR.NODE_ELEMENT); if (widget.data.link) { embeddedMedia = embeddedMedia.getFirst(n => n.type === CKEDITOR.NODE_ELEMENT); } return embeddedMedia; } editor.on('widgetDefinition', function (event) { const widgetDefinition = event.data; if (widgetDefinition.name !== 'drupalmedia') { return; } widgetDefinition.allowedContent['drupal-media'].attributes['data-entity-revision'] = true; const originalData = widgetDefinition.data; widgetDefinition.data = function (event) { // Use a mutation observer to handle async preview performed by the // `drupalmedia` plugin. const mutationObserver = new MutationObserver((mutationList, observer) => { mutationObserver.disconnect(); if (this.element.getChildCount() === 0) { return; } const revisionId = this.data.attributes['data-entity-revision'] || ''; if (revisionId.length === 0) { return; } $.get({ url: Drupal.url(`acquia-dam/${editor.config.drupal.format}/media-revision`), data: { uuid: this.data.attributes['data-entity-uuid'], revisionId }, dataType: 'json', headers: { 'X-Drupal-AcquiaDam-CSRF-Token': editor.config.drupalMedia_revisionCsrfToken, }, success: (res) => { if (res.hasOwnProperty('isLatest') && res.isLatest === false) { editor.fire('lockSnapshot'); setupUpdateButton(this) editor.fire('unlockSnapshot'); } }, error: () => { // Do nothing. }, }) }); mutationObserver.observe(this.element.$, { // We must watch for changes to the child elements, so we know when // the `drupalmedia` plugin has mounted the "Edit media" button. childList: true, subtree: true, }) originalData.call(this, event); } }, null, null, 10); }, }); })(jQuery, Drupal, CKEDITOR);