esp-ckeditor 0.1.0

data/app/assets/javascripts/esp-ckeditor/_source/plugins/esp_video/dialogs/esp_video.js

@@ -0,0 +1,277 @@
+CKEDITOR.dialog.add( 'esp_video', function ( editor )
+{
+  var lang = editor.lang.esp_video;
+
+  function commitValue( videoNode, extraStyles )
+  {
+    var value=this.getValue();
+
+    if ( !value && this.id=='id' )
+      value = generateId();
+
+    videoNode.setAttribute( this.id, value);
+
+    if ( !value )
+      return;
+    switch( this.id )
+    {
+      case 'poster':
+        extraStyles.backgroundImage = 'url(' + value + ')';
+        break;
+      case 'width':
+        extraStyles.width = value + 'px';
+        break;
+      case 'height':
+        extraStyles.height = value + 'px';
+        break;
+    }
+  }
+
+  function commitSrc( videoNode, extraStyles, videos )
+  {
+    var match = this.id.match(/(\w+)(\d)/),
+      id = match[1],
+      number = parseInt(match[2], 10);
+
+    var video = videos[number] || (videos[number]={});
+    video[id] = this.getValue();
+  }
+
+  function loadValue( videoNode )
+  {
+    if ( videoNode )
+      this.setValue( videoNode.getAttribute( this.id ) );
+    else
+    {
+      if ( this.id == 'id')
+        this.setValue( generateId() );
+    }
+  }
+
+  function loadSrc( videoNode, videos )
+  {
+    var match = this.id.match(/(\w+)(\d)/),
+      id = match[1],
+      number = parseInt(match[2], 10);
+
+    var video = videos[number];
+    if (!video)
+      return;
+    this.setValue( video[ id ] );
+  }
+
+  function generateId()
+  {
+    var now = new Date();
+    return 'video' + now.getFullYear() + now.getMonth() + now.getDate() + now.getHours() + now.getMinutes() + now.getSeconds();
+  }
+
+  // To automatically get the dimensions of the poster image
+  var onImgLoadEvent = function()
+  {
+    // Image is ready.
+    var preview = this.previewImage;
+    preview.removeListener( 'load', onImgLoadEvent );
+    preview.removeListener( 'error', onImgLoadErrorEvent );
+    preview.removeListener( 'abort', onImgLoadErrorEvent );
+
+    this.setValueOf( 'info', 'width', preview.$.width );
+    this.setValueOf( 'info', 'height', preview.$.height );
+  };
+
+  var onImgLoadErrorEvent = function()
+  {
+    // Error. Image is not loaded.
+    var preview = this.previewImage;
+    preview.removeListener( 'load', onImgLoadEvent );
+    preview.removeListener( 'error', onImgLoadErrorEvent );
+    preview.removeListener( 'abort', onImgLoadErrorEvent );
+  };
+
+  return {
+    title : lang.dialogTitle,
+    minWidth : 400,
+    minHeight : 140,
+
+    onShow : function()
+    {
+      // Clear previously saved elements.
+      this.fakeImage = this.videoNode = null;
+      // To get dimensions of poster image
+      this.previewImage = editor.document.createElement( 'img' );
+
+      var fakeImage = this.getSelectedElement();
+      if ( fakeImage && fakeImage.data( 'cke-real-element-type' ) && fakeImage.data( 'cke-real-element-type' ) == 'video' )
+      {
+        this.fakeImage = fakeImage;
+
+        var videoNode = editor.restoreRealElement( fakeImage ),
+          videos = [];
+
+        videos.push( {src : videoNode.getAttribute( 'src' )} );
+
+        this.videoNode = videoNode;
+
+        this.setupContent( videoNode, videos );
+      }
+      else
+        this.setupContent( null, [] );
+    },
+
+    onOk : function()
+    {
+      // If there's no selected element create one. Otherwise, reuse it
+      var videoNode = null;
+      if ( !this.fakeImage )
+      {
+        videoNode = CKEDITOR.dom.element.createFromHtml( '<cke:video></cke:video>', editor.document );
+        videoNode.setAttributes(
+          {
+            controls : 'controls',
+            src:  this.getValueOf( 'info', 'src0')
+          } );
+      }
+      else
+      {
+        videoNode = this.videoNode;
+      }
+
+      var extraStyles = {}, videos = [];
+      this.commitContent( videoNode, extraStyles, videos );
+
+      var innerHtml = '', links = '',
+        link = lang.linkTemplate || '',
+        fallbackTemplate = lang.fallbackTemplate || '';
+
+      links = link.replace('%src%', this.getValueOf('info', 'src0')).replace('%type%', this.getValueOf('info', 'src0').split('/').pop());
+      videoNode.setHtml( innerHtml + fallbackTemplate.replace( '%links%', links ) );
+
+      // Refresh the fake image.
+      var newFakeImage = editor.createFakeElement( videoNode, 'cke_video', 'video', false );
+      newFakeImage.setStyles( extraStyles );
+      if ( this.fakeImage )
+      {
+        newFakeImage.replace( this.fakeImage );
+        editor.getSelection().selectElement( newFakeImage );
+      }
+      else
+        editor.insertElement( newFakeImage );
+    },
+    onHide : function()
+    {
+      if ( this.previewImage )
+      {
+        this.previewImage.removeListener( 'load', onImgLoadEvent );
+        this.previewImage.removeListener( 'error', onImgLoadErrorEvent );
+        this.previewImage.removeListener( 'abort', onImgLoadErrorEvent );
+        this.previewImage.remove();
+        this.previewImage = null;    // Dialog is closed.
+      }
+    },
+
+    contents :
+    [
+      {
+        id : 'info',
+        elements :
+        [
+          {
+            type : 'hbox',
+            widths: [ '320px', '80px'],
+            children : [
+              {
+                type : 'text',
+                id : 'src0',
+                label : lang.sourceVideo,
+                commit : commitSrc,
+                setup : loadSrc
+              },
+              {
+                type : 'button',
+                id : 'browse',
+                hidden : 'true',
+                style : 'display:inline-block;margin-top:10px;',
+                filebrowser :
+                {
+                  action : 'Browse',
+                  target: 'info:src0',
+                  url: editor.config.filebrowserVideoBrowseUrl || editor.config.filebrowserBrowseUrl
+                },
+                label : editor.lang.esp_video.browseServer
+              }
+            ]
+          },
+          {
+            type : 'hbox',
+            widths: [ '50%', '50%'],
+            children : [
+              {
+                type : 'text',
+                id : 'width',
+                label : editor.lang.common.width,
+                'default' : 512,
+                validate : CKEDITOR.dialog.validate.notEmpty( lang.widthRequired ),
+                commit : commitValue,
+                setup : loadValue
+              },
+              {
+                type : 'text',
+                id : 'height',
+                label : editor.lang.common.height,
+                'default' : 410,
+                validate : CKEDITOR.dialog.validate.notEmpty(lang.heightRequired ),
+                commit : commitValue,
+                setup : loadValue
+              }
+            ]
+          },
+          {
+            type : 'hbox',
+            widths: [ '320px', '80px'],
+            children : [
+              {
+                type : 'text',
+                id : 'poster',
+                label : lang.poster,
+                commit : commitValue,
+                setup : loadValue,
+                onChange : function()
+                {
+                  var dialog = this.getDialog(),
+                    newUrl = this.getValue();
+
+                  //Update preview image
+                  if ( newUrl.length > 0 )  //Prevent from load before onShow
+                  {
+                    dialog = this.getDialog();
+                    var preview = dialog.previewImage;
+
+                    preview.on( 'load', onImgLoadEvent, dialog );
+                    preview.on( 'error', onImgLoadErrorEvent, dialog );
+                    preview.on( 'abort', onImgLoadErrorEvent, dialog );
+                    preview.setAttribute( 'src', newUrl );
+                  }
+                }
+              },
+              {
+                type : 'button',
+                id : 'browse',
+                hidden : 'true',
+                style : 'display:inline-block;margin-top:10px;',
+                filebrowser :
+                {
+                  action : 'Browse',
+                  target: 'info:poster',
+                  url: editor.config.filebrowserImageBrowseUrl || editor.config.filebrowserBrowseUrl
+                },
+                label : editor.lang.esp_video.browseServer
+              }
+            ]
+          }
+        ]
+      }
+
+    ]
+  };
+} );
+

data/app/assets/javascripts/esp-ckeditor/_source/plugins/esp_video/lang/en.js

@@ -0,0 +1,19 @@
+CKEDITOR.plugins.setLang( 'esp_video', 'en',
+{
+  esp_video:
+  {
+    toolbar: 'Video',
+    dialogTitle: 'Video properties',
+    browseServer: 'Browse',
+    fakeObject: 'Video',
+    properties: 'Edit video',
+    widthRequired: 'Width field cannot be empty',
+    heightRequired: 'Height field cannot be empty',
+    poster: 'Poster image',
+    sourceVideo: 'Source video',
+    sourceType: 'Video type',
+    linkTemplate:  '<a href="%src%">%type%</a> ',
+    fallbackTemplate: 'Your browser doesn\'t support video. Please download the file: %links%'
+  }
+});
+

data/app/assets/javascripts/esp-ckeditor/_source/plugins/esp_video/lang/ru.js

@@ -0,0 +1,19 @@
+CKEDITOR.plugins.setLang( 'esp_video', 'ru',
+{
+  esp_video:
+  {
+    toolbar: 'Видео',
+    dialogTitle: 'Параметры видео',
+    browseServer: 'Выбор',
+    fakeObject: 'Видео',
+    properties: 'Редактировать видео',
+    widthRequired: 'Поле "ширина" не может быть пустым',
+    heightRequired: 'Поле "высота" не может быть пустым',
+    poster: 'Скриншот',
+    sourceVideo: 'Источник',
+    sourceType: 'Тип источника',
+    linkTemplate:  '<a href="%src%">%type%</a> ',
+    fallbackTemplate: 'Ваш браузер не поддерживает тэг video. Вы можете скачать файл: %links%'
+  }
+});
+

data/app/assets/javascripts/esp-ckeditor/_source/plugins/esp_video/lang/uk.js

@@ -0,0 +1,19 @@
+CKEDITOR.plugins.setLang( 'esp_video', 'uk',
+{
+  esp_video:
+  {
+    toolbar: 'Відео',
+    dialogTitle: 'Параметри відео',
+    browseServer: 'Вибір',
+    fakeObject: 'Відео',
+    properties: 'Редагувати відео',
+    widthRequired: 'Поле "ширина" не може бути порожнім',
+    heightRequired: 'Поле "висота" не може бути порожнім',
+    poster: 'Скріншот',
+    sourceVideo: 'Джерело',
+    sourceType: 'Тип джерела',
+    linkTemplate:  '<a href="%src%">%type%</a> ',
+    fallbackTemplate: 'Ваш браузер не підтримує тег video. Ви можете завантажити файл: %links%'
+  }
+});
+

data/app/assets/javascripts/esp-ckeditor/_source/plugins/esp_video/plugin.js

@@ -0,0 +1,182 @@
+/*
+ * @file Esp_video plugin for CKEditor
+ * Copyright (C) 2011 Alfonso Martínez de Lizarrondo
+ *
+ * == BEGIN LICENSE ==
+ *
+ * Licensed under the terms of any of the following licenses at your
+ * choice:
+ *
+ *  - GNU General Public License Version 2 or later (the "GPL")
+ *    http://www.gnu.org/licenses/gpl.html
+ *
+ *  - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
+ *    http://www.gnu.org/licenses/lgpl.html
+ *
+ *  - Mozilla Public License Version 1.1 or later (the "MPL")
+ *    http://www.mozilla.org/MPL/MPL-1.1.html
+ *
+ * == END LICENSE ==
+ *
+ */
+
+CKEDITOR.plugins.add( 'esp_video',
+{
+  // Translations, available at the end of this file, without extra requests
+  lang: ['en', 'ru', 'uk'],
+  init : function( editor )
+  {
+    var lang = editor.lang.esp_video;
+
+    // Check for CKEditor 3.5
+    if (typeof editor.element.data == 'undefined')
+    {
+      alert('The "video" plugin requires CKEditor 3.5 or newer');
+      return;
+    }
+
+    CKEDITOR.dialog.add( 'esp_video', this.path + 'dialogs/esp_video.js' );
+
+    editor.addCommand( 'esp_video', new CKEDITOR.dialogCommand( 'esp_video' ) );
+    editor.ui.addButton( 'Esp_video',
+      {
+        label : lang.toolbar,
+        command : 'esp_video',
+        icon : this.path + 'images/esp_video.png'
+      } );
+
+    editor.addCss(
+      'img.cke_video' +
+      '{' +
+        'background-image: url(' + CKEDITOR.getUrl( this.path + 'images/placeholder.png' ) + ');' +
+        'background-position: center center;' +
+        'background-repeat: no-repeat;' +
+        'background-color:gray;'+
+        'border: 1px solid #a9a9a9;' +
+        'width: 80px;' +
+        'height: 80px;' +
+      '}');
+
+
+      // If the "menu" plugin is loaded, register the menu items.
+      if ( editor.addMenuItems )
+      {
+        editor.addMenuItems(
+          {
+            video :
+            {
+              label : lang.properties,
+              command : 'video',
+              group : 'flash'
+            }
+          });
+      }
+
+      editor.on( 'doubleclick', function( evt )
+        {
+          var element = evt.data.element;
+
+          if ( element.is( 'img' ) && element.data( 'cke-real-element-type' ) == 'video' )
+            evt.data.dialog = 'video';
+        });
+
+      // If the "contextmenu" plugin is loaded, register the listeners.
+      if ( editor.contextMenu )
+      {
+        editor.contextMenu.addListener( function( element, selection )
+          {
+            if ( element && element.is( 'img' ) && !element.isReadOnly()
+                && element.data( 'cke-real-element-type' ) == 'video' )
+              return { video : CKEDITOR.TRISTATE_OFF };
+          });
+      }
+
+    // Add special handling for these items
+    CKEDITOR.dtd.$empty['cke:source']=1;
+    CKEDITOR.dtd.$empty['source']=1;
+
+    editor.lang.fakeobjects.video = lang.fakeObject;
+
+
+  }, //Init
+
+  afterInit: function( editor )
+  {
+
+  var dataProcessor = editor.dataProcessor,
+    htmlFilter = dataProcessor && dataProcessor.htmlFilter,
+    dataFilter = dataProcessor && dataProcessor.dataFilter;
+        var handler = editor.plugins.googleMapsHandler;
+
+  // dataFilter : conversion from html input to internal data
+  dataFilter.addRules(
+    {
+
+    elements : {
+      $ : function( realElement )
+      {
+          if ( realElement.name == 'video' )
+          {
+            realElement.name = 'cke:video';
+            var fakeElement = editor.createFakeParserElement( realElement, 'cke_video', 'video', false ),
+              fakeStyle = fakeElement.attributes.style || '';
+
+            var width = realElement.attributes.width,
+              height = realElement.attributes.height,
+              poster = realElement.attributes.poster;
+
+            if ( typeof width != 'undefined' )
+              fakeStyle = fakeElement.attributes.style = fakeStyle + 'width:' + CKEDITOR.tools.cssLength( width ) + ';';
+
+            if ( typeof height != 'undefined' )
+              fakeStyle = fakeElement.attributes.style = fakeStyle + 'height:' + CKEDITOR.tools.cssLength( height ) + ';';
+
+            if ( poster )
+              fakeStyle = fakeElement.attributes.style = fakeStyle + 'background-image:url(' + poster + ');';
+
+            return fakeElement;
+          }
+      }
+    }
+
+    }
+  );
+
+  // htmlFilter : conversion from internal data to html output.
+  htmlFilter.addRules(
+    {
+      elements :
+      {
+        $ : function( element )
+        {
+          if ( element.name == 'img' )
+          {
+
+            var number = element.attributes.mapnumber;
+            if (number)
+            {
+              var scriptNode,
+                handler = editor.plugins.googleMapsHandler,
+                oMap = handler.getMap( number ) ;
+
+              if (oMap && oMap.generatedType>1)
+              {
+                handler.CreatedMapsNames.push( oMap.number ) ;
+                // Inject the <script> for this map
+                scriptNode = new CKEDITOR.htmlParser.cdata( oMap.BuildScript() );
+                element.parent.children.push( scriptNode );
+              }
+              delete element.attributes.mapnumber;
+            }
+          }
+
+          return element;
+        }
+      }
+    });
+
+
+
+  }
+} );
+