www.aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/video_embed_field/modules/video_embed_wysiwyg/plugin/plugin.js

   1 /**
   2  * @file
   3  * The JavaScript file for the wysiwyg integration.
   4  */
   5
   6 (function ($) {
   7
   8   /**
   9    * A CKEditor plugin for vido embeds.
  10    */
  11   CKEDITOR.plugins.add('video_embed', {
  12
  13     /**
  14      * Set the plugin modes.
  15      */
  16     modes: {
  17       wysiwyg: 1
  18     },
  19
  20     /**
  21      * Define the plugin requirements.
  22      */
  23     requires: 'widget',
  24
  25     /**
  26      * Allow undo actions.
  27      */
  28     canUndo: true,
  29
  30     /**
  31      * Init the plugin.
  32      */
  33     init: function (editor) {
  34       this.registerWidget(editor);
  35       this.addCommand(editor);
  36       this.addIcon(editor);
  37     },
  38
  39     /**
  40      * Add the command to the editor.
  41      */
  42     addCommand: function (editor) {
  43       var self = this;
  44       var modalSaveWrapper = function (values) {
  45         editor.fire('saveSnapshot');
  46         self.modalSave(editor, values);
  47         editor.fire('saveSnapshot');
  48       };
  49       editor.addCommand('video_embed', {
  50         exec: function (editor, data) {
  51           // If the selected element while we click the button is an instance
  52           // of the video_embed widget, extract it's values so they can be
  53           // sent to the server to prime the configuration form.
  54           var existingValues = {};
  55           if (editor.widgets.focused && editor.widgets.focused.name == 'video_embed') {
  56             existingValues = editor.widgets.focused.data.json;
  57           }
  58           Drupal.ckeditor.openDialog(editor, Drupal.url('video-embed-wysiwyg/dialog/' + editor.config.drupal.format), existingValues, modalSaveWrapper, {
  59             title: Drupal.t('Video Embed'),
  60             dialogClass: 'video-embed-dialog'
  61           });
  62         }
  63       });
  64     },
  65
  66     /**
  67      * A callback that is triggered when the modal is saved.
  68      */
  69     modalSave: function (editor, values) {
  70       // Insert a video widget that understands how to manage a JSON encoded
  71       // object, provided the video_embed property is set.
  72       var widget = editor.document.createElement('p');
  73       widget.setHtml(JSON.stringify(values));
  74       editor.insertHtml(widget.getOuterHtml());
  75     },
  76
  77     /**
  78      * Register the widget.
  79      */
  80     registerWidget: function (editor) {
  81       var self = this;
  82       editor.widgets.add('video_embed', {
  83         downcast: self.downcast,
  84         upcast: self.upcast,
  85         mask: true
  86       });
  87     },
  88
  89     /**
  90      * Check if the element is an instance of the video widget.
  91      */
  92     upcast: function (element, data) {
  93       // Upcast check must be sensitive to both HTML encoded and plain text.
  94       if (!element.getHtml().match(/^({(?=.*preview_thumbnail\b)(?=.*settings\b)(?=.*video_url\b)(?=.*settings_summary)(.*)})$/)) {
  95         return;
  96       }
  97       data.json = JSON.parse(element.getHtml());
  98       element.setHtml(Drupal.theme('videoEmbedWidget', data.json));
  99       return element;
 100     },
 101
 102     /**
 103      * Turns a transformed widget into the downcasted representation.
 104      */
 105     downcast: function (element) {
 106       element.setHtml(JSON.stringify(this.data.json));
 107     },
 108
 109     /**
 110      * Add the icon to the toolbar.
 111      */
 112     addIcon: function (editor) {
 113       if (!editor.ui.addButton) {
 114         return;
 115       }
 116       editor.ui.addButton('video_embed', {
 117         label: Drupal.t('Video Embed'),
 118         command: 'video_embed',
 119         icon: this.path + '/icon.png'
 120       });
 121     }
 122   });
 123
 124   /**
 125    * The widget template viewable in the WYSIWYG after creating a video.
 126    */
 127   Drupal.theme.videoEmbedWidget = function (settings) {
 128     return [
 129       '<span class="video-embed-widget">',
 130         '<img class="video-embed-widget__image" src="' + Drupal.checkPlain(settings.preview_thumbnail) + '">',
 131         '<span class="video-embed-widget__summary">',
 132           Drupal.checkPlain(settings.settings_summary),
 133         '</span>',
 134       '</span>'
 135     ].join('');
 136   };
 137
 138 })(jQuery);