Ability to import mediatags to the drive

www/pad/app-pad.less

@@ -43,6 +43,12 @@ body.cp-app-pad {
         }
     }
 
+    .cke_dialog {
+        display: block;
+        overflow-x: auto;
+        max-height: 100vh;
+    }
+
     .cke_wysiwyg_frame {
         min-width: 60%;
     }
@@ -55,4 +61,4 @@ body.cp-app-pad {
             display:none;
         }
     }
-}
+}

www/pad/inner.js

@@ -777,8 +777,18 @@ define([
                         'max-width: 50em; padding: 20px 30px; margin: 0 auto; min-height: 100%;'+
                         'box-sizing: border-box; overflow: auto;'+
                     '}' +
-                    '.cke_body_width body > *:first-child { margin-top: 0; }';
+                    '.cke_body_width body > *:first-child { margin-top: 0; }' +
                 Ckeditor.addCss(newCss);
+                Ckeditor._mediatagTranslations = {
+                    title: Messages.pad_mediatagTitle,
+                    width: Messages.pad_mediatagWidth,
+                    height: Messages.pad_mediatagHeight,
+                    ratio: Messages.pad_mediatagRatio,
+                    border: Messages.pad_mediatagBorder,
+                    preview: Messages.pad_mediatagPreview,
+                    'import': Messages.pad_mediatagImport,
+                    options: Messages.pad_mediatagOptions
+                };
                 Ckeditor.plugins.addExternal('mediatag','/pad/', 'mediatag-plugin.js');
                 Ckeditor.plugins.addExternal('blockbase64','/pad/', 'disable-base64.js');
                 module.ckeditor = editor = Ckeditor.replace('editor1', {
@@ -786,13 +796,8 @@ define([
                 });
                 editor.on('instanceReady', waitFor());
             }).nThen(function () {
-                editor.plugins.mediatag.translations = {
-                    title: Messages.pad_mediatagTitle,
-                    width: Messages.pad_mediatagWidth,
-                    height: Messages.pad_mediatagHeight,
-                    ratio: Messages.pad_mediatagRatio,
-                    border: Messages.pad_mediatagBorder,
-                    preview: Messages.pad_mediatagPreview,
+                editor.plugins.mediatag.import = function ($mt) {
+                    framework._.sfCommon.importMediaTag($mt);
                 };
                 Links.addSupportForOpeningLinksInNewTab(Ckeditor)({editor: editor});
             }).nThen(function () {

www/pad/mediatag-plugin-dialog.js

@@ -1,5 +1,5 @@
 CKEDITOR.dialog.add('mediatag', function (editor) {
-    var Messages = editor.plugins.mediatag.translations;
+    var Messages = CKEDITOR._mediatagTranslations;
     return {
         title: Messages.title,
         minWidth: 400,
@@ -51,6 +51,8 @@ CKEDITOR.dialog.add('mediatag', function (editor) {
             },
         ],
         onShow: function () {
+
+            var thiss = this;
             var sel = editor.getSelection();
             element = sel.getSelectedElement();
             if (!element) { return; }
@@ -82,6 +84,11 @@ CKEDITOR.dialog.add('mediatag', function (editor) {
             });
             $preview.html('').append($clone);
 
+            var center = function () {
+                var top = Math.max(($(document).height()/2) - (thiss.getSize().height/2), 0);
+                thiss.move(thiss.getPosition().x, top);
+            };
+
             var update = function () {
                 var w = $(wInput).val() || Math.round(rect.width);
                 var h = $(hInput).val() || Math.round(rect.height);
@@ -91,6 +98,7 @@ CKEDITOR.dialog.add('mediatag', function (editor) {
                     height: h+'px',
                     'border-width': b+'px'
                 });
+                center();
             };
 
             $(wInput).on('keyup', function () {
@@ -116,6 +124,8 @@ CKEDITOR.dialog.add('mediatag', function (editor) {
             $(borderInput).on('keyup', function () {
                 update();
             });
+
+            setTimeout(center);
         },
         onOk: function() {
             var dialog = this;

www/pad/mediatag-plugin.js

@@ -28,6 +28,8 @@
         },
         init: function( editor ) {
             var pluginName = 'mediatag';
+            var Messages = CKEDITOR._mediatagTranslations;
+            var targetWidget;
 
             // Register the dialog.
             CKEDITOR.dialog.add( pluginName, this.path + 'mediatag-plugin-dialog.js' );
@@ -42,6 +44,44 @@
                 }
 
             });
+
+            editor.addCommand('importMediatag', {
+                exec: function (editor) {
+                    var w = targetWidget;
+                    targetWidget = undefined;
+                    var $mt = $(w.$).find('media-tag');
+                    editor.plugins.mediatag.import($mt);
+                }
+            });
+
+            if (editor.addMenuItems) {
+                editor.addMenuGroup('mediatag');
+                editor.addMenuItem('importMediatag', {
+                        label: Messages.import,
+                        icon: 'save',
+                        command: 'importMediatag',
+                        group: 'mediatag'
+                });
+                editor.addMenuItem('mediatag', {
+                        label: Messages.options,
+                        icon: 'image',
+                        command: 'mediatag',
+                        group: 'mediatag'
+                });
+            }
+            if (editor.contextMenu) {
+                editor.contextMenu.addListener(function (element) {
+                    if (element.is('.cke_widget_mediatag')
+                        || element.getAttribute('data-cke-display-name') === 'media-tag') {
+                        targetWidget = element;
+                        return {
+                            mediatag: CKEDITOR.TRISTATE_OFF,
+                            importMediatag: CKEDITOR.TRISTATE_OFF,
+                        };
+                    }
+                });
+            }
+
         },
     } );