aboutsummaryrefslogtreecommitdiff
path: root/sources/plugins/html5video
diff options
context:
space:
mode:
Diffstat (limited to 'sources/plugins/html5video')
-rw-r--r--sources/plugins/html5video/dialogs/html5video.js161
-rw-r--r--sources/plugins/html5video/icons/html5video.pngbin0 -> 14773 bytes
-rw-r--r--sources/plugins/html5video/lang/de.js14
-rw-r--r--sources/plugins/html5video/lang/en.js15
-rw-r--r--sources/plugins/html5video/lang/es.js14
-rw-r--r--sources/plugins/html5video/lang/eu.js14
-rw-r--r--sources/plugins/html5video/lang/fr.js14
-rw-r--r--sources/plugins/html5video/lang/ru.js15
-rw-r--r--sources/plugins/html5video/lang/uk.js14
-rw-r--r--sources/plugins/html5video/lang/uz.js14
-rw-r--r--sources/plugins/html5video/plugin.js139
11 files changed, 414 insertions, 0 deletions
diff --git a/sources/plugins/html5video/dialogs/html5video.js b/sources/plugins/html5video/dialogs/html5video.js
new file mode 100644
index 0000000..76799e7
--- /dev/null
+++ b/sources/plugins/html5video/dialogs/html5video.js
@@ -0,0 +1,161 @@
1CKEDITOR.dialog.add( 'html5video', function( editor ) {
2 return {
3 title: editor.lang.html5video.title,
4 minWidth: 500,
5 minHeight: 100,
6 contents: [ {
7 id: 'info',
8 label: editor.lang.html5video.infoLabel,
9 elements: [ {
10 type: 'vbox',
11 padding: 0,
12 children: [
13 {
14 type: 'hbox',
15 widths: [ '365px', '110px' ],
16 align: 'right',
17 children: [ {
18 type: 'text',
19 id: 'url',
20 label: editor.lang.html5video.allowed,
21 required: true,
22 validate: CKEDITOR.dialog.validate.notEmpty( editor.lang.html5video.urlMissing ),
23 setup: function( widget ) {
24 this.setValue( widget.data.src );
25 },
26 commit: function( widget ) {
27 widget.setData( 'src', this.getValue() );
28 }
29 },
30 {
31 type: 'button',
32 id: 'browse',
33 // v-align with the 'txtUrl' field.
34 // TODO: We need something better than a fixed size here.
35 style: 'display:inline-block;margin-top:14px;',
36 align: 'center',
37 label: editor.lang.common.browseServer,
38 hidden: true,
39 filebrowser: 'info:url'
40 } ]
41 } ]
42 },
43 {
44 type: 'checkbox',
45 id: 'responsive',
46 label: editor.lang.html5video.responsive,
47 setup: function( widget ) {
48 this.setValue( widget.data.responsive );
49 },
50 commit: function( widget ) {
51 widget.setData( 'responsive', this.getValue()?'true':'' );
52 }
53 },
54 {
55 type: 'hbox',
56 id: 'size',
57 children: [ {
58 type: 'text',
59 id: 'width',
60 label: editor.lang.common.width,
61 setup: function( widget ) {
62 if ( widget.data.width ) {
63 this.setValue( widget.data.width );
64 }
65 },
66 commit: function( widget ) {
67 widget.setData( 'width', this.getValue() );
68 }
69 },
70 {
71 type: 'text',
72 id: 'height',
73 label: editor.lang.common.height,
74 setup: function( widget ) {
75 if ( widget.data.height ) {
76 this.setValue( widget.data.height );
77 }
78 },
79 commit: function( widget ) {
80 widget.setData( 'height', this.getValue() );
81 }
82 },
83 ]
84 },
85
86 {
87 type: 'hbox',
88 id: 'alignment',
89 children: [ {
90 type: 'radio',
91 id: 'align',
92 label: editor.lang.common.align,
93 items: [
94 [editor.lang.common.alignCenter, 'center'],
95 [editor.lang.common.alignLeft, 'left'],
96 [editor.lang.common.alignRight, 'right'],
97 [editor.lang.common.alignNone, 'none']
98 ],
99 'default': 'center',
100 setup: function( widget ) {
101 if ( widget.data.align ) {
102 this.setValue( widget.data.align );
103 }
104 },
105 commit: function( widget ) {
106 widget.setData( 'align', this.getValue() );
107 }
108 } ]
109 } ]
110 },
111 {
112 id: 'Upload',
113 hidden: true,
114 filebrowser: 'uploadButton',
115 label: editor.lang.html5video.upload,
116 elements: [ {
117 type: 'file',
118 id: 'upload',
119 label: editor.lang.html5video.btnUpload,
120 style: 'height:40px',
121 size: 38
122 },
123 {
124 type: 'fileButton',
125 id: 'uploadButton',
126 filebrowser: 'info:url',
127 label: editor.lang.html5video.btnUpload,
128 'for': [ 'Upload', 'upload' ]
129 } ]
130 },
131 {
132 id: 'advanced',
133 label: editor.lang.html5video.advanced,
134 elements: [ {
135 type: 'vbox',
136 padding: 0,
137 children: [ {
138 type: 'hbox',
139 children: [ {
140 type: 'radio',
141 id: 'autoplay',
142 label: editor.lang.html5video.autoplay,
143 items: [
144 [editor.lang.html5video.yes, 'yes'],
145 [editor.lang.html5video.no, 'no']
146 ],
147 'default': 'no',
148 setup: function( widget ) {
149 if ( widget.data.autoplay ) {
150 this.setValue( widget.data.autoplay );
151 }
152 },
153 commit: function( widget ) {
154 widget.setData( 'autoplay', this.getValue() );
155 }
156 } ]
157 } ]
158 } ]
159 } ]
160 };
161} );
diff --git a/sources/plugins/html5video/icons/html5video.png b/sources/plugins/html5video/icons/html5video.png
new file mode 100644
index 0000000..a246517
--- /dev/null
+++ b/sources/plugins/html5video/icons/html5video.png
Binary files 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 @@
1CKEDITOR.plugins.setLang( 'html5video', 'de', {
2 button: 'HTML5 Video einfügen',
3 title: 'HTML5 Video',
4 infoLabel: 'Video Infos',
5 allowed: 'Erlaubte Dateierweiterungen: MP4, WebM, Ogv',
6 urlMissing: 'Sie haben keine URL zur Video-Datei angegeben.',
7 videoProperties: 'Video-Einstellungen',
8 upload: 'Hochladen',
9 btnUpload: 'Zum Server senden',
10 advanced: 'Erweitert',
11 autoplay: 'Autoplay?',
12 yes: 'Ja',
13 no: 'Nein'
14} );
diff --git a/sources/plugins/html5video/lang/en.js b/sources/plugins/html5video/lang/en.js
new file mode 100644
index 0000000..40eae12
--- /dev/null
+++ b/sources/plugins/html5video/lang/en.js
@@ -0,0 +1,15 @@
1CKEDITOR.plugins.setLang( 'html5video', 'en', {
2 button: 'Insert HTML5 video',
3 title: 'HTML5 video',
4 infoLabel: 'Video info',
5 allowed: 'Allowed file extensions: MP4, WebM, Ogv',
6 urlMissing: 'Video source URL is missing.',
7 videoProperties: 'Video properties',
8 upload: 'Upload',
9 btnUpload: 'Send it to the server',
10 advanced: 'Advanced',
11 autoplay: 'Autoplay?',
12 yes: 'Yes',
13 no: 'No',
14 responsive: 'Responsive width'
15} );
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 @@
1CKEDITOR.plugins.setLang( 'html5video', 'es', {
2 button: 'Insertar video HTML5',
3 title: 'Video HTML5',
4 infoLabel: 'Información del video',
5 allowed: 'Extensiones de archivo permitidas: MP4, WebM, Ogv',
6 urlMissing: 'La URL del video no puede estar vacia.',
7 videoProperties: 'Propiedades del video',
8 upload: 'Cargar',
9 btnUpload: 'Enviar al servidor',
10 advanced: 'Avanzado',
11 autoplay: '¿Reproducir automáticamente?',
12 yes: 'Si',
13 no: 'No'
14} );
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 @@
1CKEDITOR.plugins.setLang( 'html5video', 'eu', {
2 button: 'Txertatu HTML5 bideoa',
3 title: 'HTML5 bideoa',
4 infoLabel: 'Bideoaren informazioa',
5 allowed: 'Baimendutako fitxategi luzapenak: MP4, WebM, Ogv',
6 urlMissing: 'Bideoaren URLak ezin du hutsik egon.',
7 videoProperties: 'Bideoaren propietateak',
8 upload: 'Kargatu',
9 btnUpload: 'Bidali zerbitzarira',
10 advanced: 'Aurreratua',
11 autoplay: 'Automatikoki erreproduzitu?',
12 yes: 'Bai',
13 no: 'Ez'
14} );
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 @@
1CKEDITOR.plugins.setLang( 'html5video', 'fr', {
2 button: 'Insérer un lecteur video HTML5',
3 title: 'HTML5 video',
4 infoLabel: 'Informations video',
5 allowed: 'Extensions de fichiers autorisées: MP4, WebM, Ogv',
6 urlMissing: 'URL de la source video manquante. Veuillez la renseigner.',
7 videoProperties: 'Propriétés Video',
8 upload: 'Télécharger',
9 btnUpload: 'Envoyer vers le serveur',
10 advanced: 'Avancé',
11 autoplay: 'Jouer automatiquement ?',
12 yes: 'Oui',
13 no: 'Non'
14} );
diff --git a/sources/plugins/html5video/lang/ru.js b/sources/plugins/html5video/lang/ru.js
new file mode 100644
index 0000000..cd5a195
--- /dev/null
+++ b/sources/plugins/html5video/lang/ru.js
@@ -0,0 +1,15 @@
1CKEDITOR.plugins.setLang( 'html5video', 'ru', {
2 button: 'Вставить HTML5 видео',
3 title: 'HTML5 видео',
4 infoLabel: 'Видео',
5 allowed: 'Допустимые расширения файлов: MP4, WebM, Ogv',
6 urlMissing: 'Не выбран источник видео',
7 videoProperties: 'Свойства видео',
8 upload: 'Загрузить',
9 btnUpload: 'Загрузить на сервер',
10 advanced: 'Дополнительно',
11 autoplay: 'Автовоспроизведение',
12 yes: 'Да',
13 no: 'Нет',
14 responsive: 'Адаптивная ширина'
15} );
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 @@
1CKEDITOR.plugins.setLang( 'html5video', 'uk', {
2 button: 'Вставити HTML5 відео',
3 title: 'HTML5 відео',
4 infoLabel: 'Інформація',
5 allowed: 'Допустимі розширення файлів: MP4, WebM, Ogv',
6 urlMissing: 'Не обрано джерела відео',
7 videoProperties: 'Властивості відео',
8 upload: 'Відвантажити',
9 btnUpload: 'Відвантажити на сервер',
10 advanced: 'Додатково',
11 autoplay: 'Автовідтворення?',
12 yes: 'Так',
13 no: 'Ні'
14} );
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 @@
1CKEDITOR.plugins.setLang( 'html5video', 'uz', {
2 button: 'HTML5 video qo‘shing',
3 title: 'HTML5 video',
4 infoLabel: 'Video ma\'lumot',
5 allowed: 'Ruxsat etilgan kengaytmalar: MP4, WebM, Ogv',
6 urlMissing: 'Video\'ning URL manbasi topilmadi.',
7 videoProperties: 'Video xususiyatlari',
8 upload: 'Yuklash',
9 btnUpload: 'Serverga jo‘natish',
10 advanced: 'Kengaytrilgan',
11 autoplay: 'Avtoijro?',
12 yes: 'Ha',
13 no: 'Yo‘q'
14} );
diff --git a/sources/plugins/html5video/plugin.js b/sources/plugins/html5video/plugin.js
new file mode 100644
index 0000000..bf51285
--- /dev/null
+++ b/sources/plugins/html5video/plugin.js
@@ -0,0 +1,139 @@
1CKEDITOR.plugins.add( 'html5video', {
2 requires: 'widget',
3 lang: 'de,en,eu,es,ru,uk,fr',
4 icons: 'html5video',
5 init: function( editor ) {
6 editor.widgets.add( 'html5video', {
7 button: editor.lang.html5video.button,
8 template: '<div class="ckeditor-html5-video"></div>',
9 /*
10 * Allowed content rules (http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules):
11 * - div-s with text-align,float,margin-left,margin-right inline style rules and required ckeditor-html5-video class.
12 * - video tags with src, controls, width and height attributes.
13 */
14 allowedContent: 'div[data-responsive](!ckeditor-html5-video){text-align,float,margin-left,margin-right}; video[src,controls,autoplay,width, height]{max-width,height};',
15 requiredContent: 'div(ckeditor-html5-video); video[src,controls];',
16 upcast: function( element ) {
17 return element.name === 'div' && element.hasClass( 'ckeditor-html5-video' );
18 },
19 dialog: 'html5video',
20 init: function() {
21 var src = '';
22 var autoplay = '';
23 var align = this.element.getStyle( 'text-align' );
24
25 var width = '';
26 var height = '';
27
28 // If there's a child (the video element)
29 if ( this.element.getChild( 0 ) ) {
30 // get it's attributes.
31 src = this.element.getChild( 0 ).getAttribute( 'src' );
32 width = this.element.getChild( 0 ).getAttribute( 'width' );
33 height = this.element.getChild( 0 ).getAttribute( 'height' );
34 autoplay = this.element.getChild( 0 ).getAttribute( 'autoplay' );
35 responsive = this.element.getAttribute( 'data-responsive' );
36 }
37
38 if ( src ) {
39 this.setData( 'src', src );
40
41 if ( align ) {
42 this.setData( 'align', align );
43 } else {
44 this.setData( 'align', 'none' );
45 }
46
47 if ( width ) {
48 this.setData( 'width', width );
49 }
50
51 if ( height ) {
52 this.setData( 'height', height );
53 }
54
55 if ( autoplay ) {
56 this.setData( 'autoplay', 'yes' );
57 }
58
59 if ( responsive ) {
60 this.setData( 'responsive', responsive );
61 }
62 }
63 },
64 data: function() {
65 // If there is an video source
66 if ( this.data.src ) {
67 // and there isn't a child (the video element)
68 if ( !this.element.getChild( 0 ) ) {
69 // Create a new <video> element.
70 var videoElement = new CKEDITOR.dom.element( 'video' );
71 // Set the controls attribute.
72 videoElement.setAttribute( 'controls', 'controls' );
73 // Append it to the container of the plugin.
74 this.element.append( videoElement );
75 }
76 this.element.getChild( 0 ).setAttribute( 'src', this.data.src );
77 if (this.data.width) this.element.getChild( 0 ).setAttribute( 'width', this.data.width );
78 if (this.data.height) this.element.getChild( 0 ).setAttribute( 'height', this.data.height );
79
80 if ( this.data.responsive ) {
81 this.element.setAttribute("data-responsive", this.data.responsive);
82 this.element.getChild( 0 ).setStyle( 'max-width', '100%' );
83 this.element.getChild( 0 ).setStyle( 'height', 'auto' );
84 } else {
85 this.element.getChild( 0 ).removeStyle( 'max-width' );
86 this.element.getChild( 0 ).removeStyle( 'height' );
87 }
88 }
89
90 this.element.removeStyle( 'float' );
91 this.element.removeStyle( 'margin-left' );
92 this.element.removeStyle( 'margin-right' );
93
94 if ( this.data.align === 'none' ) {
95 this.element.removeStyle( 'text-align' );
96 } else {
97 this.element.setStyle( 'text-align', this.data.align );
98 }
99
100 if ( this.data.align === 'left' ) {
101 this.element.setStyle( 'float', this.data.align );
102 this.element.setStyle( 'margin-right', '10px' );
103 } else if ( this.data.align === 'right' ) {
104 this.element.setStyle( 'float', this.data.align );
105 this.element.setStyle( 'margin-left', '10px' );
106 }
107
108 if ( this.element.getChild( 0 ) ) {
109 if ( this.data.autoplay === 'yes' ) {
110 this.element.getChild( 0 ).setAttribute( 'autoplay', 'autoplay' );
111 } else {
112 this.element.getChild( 0 ).removeAttribute( 'autoplay' );
113 }
114 }
115 }
116 } );
117
118 if ( editor.contextMenu ) {
119 editor.addMenuGroup( 'html5videoGroup' );
120 editor.addMenuItem( 'html5videoPropertiesItem', {
121 label: editor.lang.html5video.videoProperties,
122 icon: 'html5video',
123 command: 'html5video',
124 group: 'html5videoGroup'
125 });
126
127 editor.contextMenu.addListener( function( element ) {
128 if ( element &&
129 element.getChild( 0 ) &&
130 element.getChild( 0 ).hasClass &&
131 element.getChild( 0 ).hasClass( 'ckeditor-html5-video' ) ) {
132 return { html5videoPropertiesItem: CKEDITOR.TRISTATE_OFF };
133 }
134 });
135 }
136
137 CKEDITOR.dialog.add( 'html5video', this.path + 'dialogs/html5video.js' );
138 }
139} );