From 7183f6a6a21ad9124e70c997e0168459f377a9f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Isma=C3=ABl=20Bouya?= Date: Thu, 26 Jan 2017 15:34:32 +0100 Subject: Change skin and add video button --- sources/plugins/html5video/dialogs/html5video.js | 152 +++++++++++++++++++++++ sources/plugins/html5video/icons/html5video.png | Bin 0 -> 14773 bytes sources/plugins/html5video/lang/de.js | 14 +++ sources/plugins/html5video/lang/en.js | 14 +++ sources/plugins/html5video/lang/es.js | 14 +++ sources/plugins/html5video/lang/eu.js | 14 +++ sources/plugins/html5video/lang/fr.js | 14 +++ sources/plugins/html5video/lang/ru.js | 14 +++ sources/plugins/html5video/lang/uk.js | 14 +++ sources/plugins/html5video/lang/uz.js | 14 +++ sources/plugins/html5video/plugin.js | 129 +++++++++++++++++++ 11 files changed, 393 insertions(+) create mode 100644 sources/plugins/html5video/dialogs/html5video.js create mode 100644 sources/plugins/html5video/icons/html5video.png create mode 100644 sources/plugins/html5video/lang/de.js create mode 100644 sources/plugins/html5video/lang/en.js create mode 100644 sources/plugins/html5video/lang/es.js create mode 100644 sources/plugins/html5video/lang/eu.js create mode 100644 sources/plugins/html5video/lang/fr.js create mode 100644 sources/plugins/html5video/lang/ru.js create mode 100644 sources/plugins/html5video/lang/uk.js create mode 100644 sources/plugins/html5video/lang/uz.js create mode 100644 sources/plugins/html5video/plugin.js (limited to 'sources/plugins') diff --git a/sources/plugins/html5video/dialogs/html5video.js b/sources/plugins/html5video/dialogs/html5video.js new file mode 100644 index 0000000..99f89c3 --- /dev/null +++ b/sources/plugins/html5video/dialogs/html5video.js @@ -0,0 +1,152 @@ +CKEDITOR.dialog.add( 'html5video', function( editor ) { + return { + title: editor.lang.html5video.title, + minWidth: 500, + minHeight: 100, + contents: [ { + id: 'info', + label: editor.lang.html5video.infoLabel, + elements: [ { + type: 'vbox', + padding: 0, + children: [ + { + type: 'hbox', + widths: [ '365px', '110px' ], + align: 'right', + children: [ { + type: 'text', + id: 'url', + label: editor.lang.html5video.allowed, + required: true, + validate: CKEDITOR.dialog.validate.notEmpty( editor.lang.html5video.urlMissing ), + setup: function( widget ) { + this.setValue( widget.data.src ); + }, + commit: function( widget ) { + widget.setData( 'src', this.getValue() ); + } + }, + { + type: 'button', + id: 'browse', + // v-align with the 'txtUrl' field. + // TODO: We need something better than a fixed size here. + style: 'display:inline-block;margin-top:14px;', + align: 'center', + label: editor.lang.common.browseServer, + hidden: true, + filebrowser: 'info:url' + } ] + } ] + }, + { + type: 'hbox', + id: 'size', + children: [ { + type: 'text', + id: 'width', + label: editor.lang.common.width, + 'default': 400, + setup: function( widget ) { + if ( widget.data.width ) { + this.setValue( widget.data.width ); + } + }, + commit: function( widget ) { + widget.setData( 'width', this.getValue() ); + } + }, + { + type: 'text', + id: 'height', + label: editor.lang.common.height, + 'default': 300, + setup: function( widget ) { + if ( widget.data.height ) { + this.setValue( widget.data.height ); + } + }, + commit: function( widget ) { + widget.setData( 'height', this.getValue() ); + } + }, + ] + }, + + { + type: 'hbox', + id: 'alignment', + children: [ { + type: 'radio', + id: 'align', + label: editor.lang.common.align, + items: [ + [editor.lang.common.alignCenter, 'center'], + [editor.lang.common.alignLeft, 'left'], + [editor.lang.common.alignRight, 'right'], + [editor.lang.common.alignNone, 'none'] + ], + 'default': 'center', + setup: function( widget ) { + if ( widget.data.align ) { + this.setValue( widget.data.align ); + } + }, + commit: function( widget ) { + widget.setData( 'align', this.getValue() ); + } + } ] + } ] + }, + { + id: 'Upload', + hidden: true, + filebrowser: 'uploadButton', + label: editor.lang.html5video.upload, + elements: [ { + type: 'file', + id: 'upload', + label: editor.lang.html5video.btnUpload, + style: 'height:40px', + size: 38 + }, + { + type: 'fileButton', + id: 'uploadButton', + filebrowser: 'info:url', + label: editor.lang.html5video.btnUpload, + 'for': [ 'Upload', 'upload' ] + } ] + }, + { + id: 'advanced', + label: editor.lang.html5video.advanced, + elements: [ { + type: 'vbox', + padding: 0, + children: [ { + type: 'hbox', + children: [ { + type: 'radio', + id: 'autoplay', + label: editor.lang.html5video.autoplay, + items: [ + [editor.lang.html5video.yes, 'yes'], + [editor.lang.html5video.no, 'no'] + ], + 'default': 'no', + setup: function( widget ) { + if ( widget.data.autoplay ) { + this.setValue( widget.data.autoplay ); + } + }, + commit: function( widget ) { + widget.setData( 'autoplay', this.getValue() ); + } + } ] + } ] + } ] + } ] + }; +} ); diff --git a/sources/plugins/html5video/icons/html5video.png b/sources/plugins/html5video/icons/html5video.png new file mode 100644 index 0000000..a246517 Binary files /dev/null and b/sources/plugins/html5video/icons/html5video.png differ diff --git a/sources/plugins/html5video/lang/de.js b/sources/plugins/html5video/lang/de.js new file mode 100644 index 0000000..ddf4c8b --- /dev/null +++ b/sources/plugins/html5video/lang/de.js @@ -0,0 +1,14 @@ +CKEDITOR.plugins.setLang( 'html5video', 'de', { + button: 'HTML5 Video einfügen', + title: 'HTML5 Video', + infoLabel: 'Video Infos', + allowed: 'Erlaubte Dateierweiterungen: MP4, WebM, Ogv', + urlMissing: 'Sie haben keine URL zur Video-Datei angegeben.', + videoProperties: 'Video-Einstellungen', + upload: 'Hochladen', + btnUpload: 'Zum Server senden', + advanced: 'Erweitert', + autoplay: 'Autoplay?', + yes: 'Ja', + no: 'Nein' +} ); diff --git a/sources/plugins/html5video/lang/en.js b/sources/plugins/html5video/lang/en.js new file mode 100644 index 0000000..ebac6e5 --- /dev/null +++ b/sources/plugins/html5video/lang/en.js @@ -0,0 +1,14 @@ +CKEDITOR.plugins.setLang( 'html5video', 'en', { + button: 'Insert HTML5 video', + title: 'HTML5 video', + infoLabel: 'Video info', + allowed: 'Allowed file extensions: MP4, WebM, Ogv', + urlMissing: 'Video source URL is missing.', + videoProperties: 'Video properties', + upload: 'Upload', + btnUpload: 'Send it to the server', + advanced: 'Advanced', + autoplay: 'Autoplay?', + yes: 'Yes', + no: 'No' +} ); diff --git a/sources/plugins/html5video/lang/es.js b/sources/plugins/html5video/lang/es.js new file mode 100644 index 0000000..4077935 --- /dev/null +++ b/sources/plugins/html5video/lang/es.js @@ -0,0 +1,14 @@ +CKEDITOR.plugins.setLang( 'html5video', 'es', { + button: 'Insertar video HTML5', + title: 'Video HTML5', + infoLabel: 'Información del video', + allowed: 'Extensiones de archivo permitidas: MP4, WebM, Ogv', + urlMissing: 'La URL del video no puede estar vacia.', + videoProperties: 'Propiedades del video', + upload: 'Cargar', + btnUpload: 'Enviar al servidor', + advanced: 'Avanzado', + autoplay: '¿Reproducir automáticamente?', + yes: 'Si', + no: 'No' +} ); diff --git a/sources/plugins/html5video/lang/eu.js b/sources/plugins/html5video/lang/eu.js new file mode 100644 index 0000000..78635d7 --- /dev/null +++ b/sources/plugins/html5video/lang/eu.js @@ -0,0 +1,14 @@ +CKEDITOR.plugins.setLang( 'html5video', 'eu', { + button: 'Txertatu HTML5 bideoa', + title: 'HTML5 bideoa', + infoLabel: 'Bideoaren informazioa', + allowed: 'Baimendutako fitxategi luzapenak: MP4, WebM, Ogv', + urlMissing: 'Bideoaren URLak ezin du hutsik egon.', + videoProperties: 'Bideoaren propietateak', + upload: 'Kargatu', + btnUpload: 'Bidali zerbitzarira', + advanced: 'Aurreratua', + autoplay: 'Automatikoki erreproduzitu?', + yes: 'Bai', + no: 'Ez' +} ); diff --git a/sources/plugins/html5video/lang/fr.js b/sources/plugins/html5video/lang/fr.js new file mode 100644 index 0000000..326f622 --- /dev/null +++ b/sources/plugins/html5video/lang/fr.js @@ -0,0 +1,14 @@ +CKEDITOR.plugins.setLang( 'html5video', 'fr', { + button: 'Insérer un lecteur video HTML5', + title: 'HTML5 video', + infoLabel: 'Informations video', + allowed: 'Extensions de fichiers autorisées: MP4, WebM, Ogv', + urlMissing: 'URL de la source video manquante. Veuillez la renseigner.', + videoProperties: 'Propriétés Video', + upload: 'Télécharger', + btnUpload: 'Envoyer vers le serveur', + advanced: 'Avancé', + autoplay: 'Jouer automatiquement ?', + yes: 'Oui', + no: 'Non' +} ); diff --git a/sources/plugins/html5video/lang/ru.js b/sources/plugins/html5video/lang/ru.js new file mode 100644 index 0000000..5eeeba6 --- /dev/null +++ b/sources/plugins/html5video/lang/ru.js @@ -0,0 +1,14 @@ +CKEDITOR.plugins.setLang( 'html5video', 'ru', { + button: 'Вставить HTML5 видео', + title: 'HTML5 видео', + infoLabel: 'Видео', + allowed: 'Допустимые расширения файлов: MP4, WebM, Ogv', + urlMissing: 'Не выбран источник видео', + videoProperties: 'Свойства видео', + upload: 'Загрузить', + btnUpload: 'Загрузить на сервер', + advanced: 'Дополнительно', + autoplay: 'Автовоспроизведение', + yes: 'Да', + no: 'Нет' +} ); diff --git a/sources/plugins/html5video/lang/uk.js b/sources/plugins/html5video/lang/uk.js new file mode 100644 index 0000000..32b920c --- /dev/null +++ b/sources/plugins/html5video/lang/uk.js @@ -0,0 +1,14 @@ +CKEDITOR.plugins.setLang( 'html5video', 'uk', { + button: 'Вставити HTML5 відео', + title: 'HTML5 відео', + infoLabel: 'Інформація', + allowed: 'Допустимі розширення файлів: MP4, WebM, Ogv', + urlMissing: 'Не обрано джерела відео', + videoProperties: 'Властивості відео', + upload: 'Відвантажити', + btnUpload: 'Відвантажити на сервер', + advanced: 'Додатково', + autoplay: 'Автовідтворення?', + yes: 'Так', + no: 'Ні' +} ); diff --git a/sources/plugins/html5video/lang/uz.js b/sources/plugins/html5video/lang/uz.js new file mode 100644 index 0000000..5fec9a2 --- /dev/null +++ b/sources/plugins/html5video/lang/uz.js @@ -0,0 +1,14 @@ +CKEDITOR.plugins.setLang( 'html5video', 'uz', { + button: 'HTML5 video qo‘shing', + title: 'HTML5 video', + infoLabel: 'Video ma\'lumot', + allowed: 'Ruxsat etilgan kengaytmalar: MP4, WebM, Ogv', + urlMissing: 'Video\'ning URL manbasi topilmadi.', + videoProperties: 'Video xususiyatlari', + upload: 'Yuklash', + btnUpload: 'Serverga jo‘natish', + advanced: 'Kengaytrilgan', + autoplay: 'Avtoijro?', + yes: 'Ha', + no: 'Yo‘q' +} ); diff --git a/sources/plugins/html5video/plugin.js b/sources/plugins/html5video/plugin.js new file mode 100644 index 0000000..1bfff7f --- /dev/null +++ b/sources/plugins/html5video/plugin.js @@ -0,0 +1,129 @@ +CKEDITOR.plugins.add( 'html5video', { + requires: 'widget', + lang: 'de,en,eu,es,ru,uk,fr', + icons: 'html5video', + init: function( editor ) { + editor.widgets.add( 'html5video', { + button: editor.lang.html5video.button, + template: '
', + /* + * Allowed content rules (http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules): + * - div-s with text-align,float,margin-left,margin-right inline style rules and required ckeditor-html5-video class. + * - video tags with src and controls attributes. + */ + allowedContent: 'div(!ckeditor-html5-video){text-align,float,margin-left,margin-right}; video[src,controls,autoplay];', + requiredContent: 'div(ckeditor-html5-video); video[src,controls];', + upcast: function( element ) { + return element.name === 'div' && element.hasClass( 'ckeditor-html5-video' ); + }, + dialog: 'html5video', + init: function() { + var src = ''; + var autoplay = ''; + var align = this.element.getStyle( 'text-align' ); + + var width = ''; + var height = ''; + + // If there's a child (the video element) + if ( this.element.getChild( 0 ) ) { + // get it's attributes. + src = this.element.getChild( 0 ).getAttribute( 'src' ); + width = this.element.getChild( 0 ).getAttribute( 'width' ); + height = this.element.getChild( 0 ).getAttribute( 'height' ); + autoplay = this.element.getChild( 0 ).getAttribute( 'autoplay' ); + } + + if ( src ) { + this.setData( 'src', src ); + + if ( align ) { + this.setData( 'align', align ); + } else { + this.setData( 'align', 'none' ); + } + + if ( width ) { + this.setData( 'width', width ); + } else { + this.setData( 'width', '400' ); + } + + if ( height ) { + this.setData( 'height', height ); + } else { + this.setData( 'height', '300' ); + } + + if ( autoplay ) { + this.setData( 'autoplay', 'yes' ); + } + } + }, + data: function() { + // If there is an video source + if ( this.data.src ) { + // and there isn't a child (the video element) + if ( !this.element.getChild( 0 ) ) { + // Create a new