diff options
author | Ismaël Bouya <ismael.bouya@normalesup.org> | 2017-12-04 18:55:29 +0100 |
---|---|---|
committer | Ismaël Bouya <ismael.bouya@normalesup.org> | 2017-12-04 18:55:29 +0100 |
commit | 1794320dcfdfcd19572fb1676294f9853a6bbc20 (patch) | |
tree | a4c9e978947d6930d50391747382d7f95a5863e3 /sources/plugins/html5video | |
parent | 7183f6a6a21ad9124e70c997e0168459f377a9f2 (diff) | |
download | ludivine-ckeditor-component-master.tar.gz ludivine-ckeditor-component-master.tar.zst ludivine-ckeditor-component-master.zip |
Diffstat (limited to 'sources/plugins/html5video')
-rw-r--r-- | sources/plugins/html5video/dialogs/html5video.js | 13 | ||||
-rw-r--r-- | sources/plugins/html5video/lang/en.js | 3 | ||||
-rw-r--r-- | sources/plugins/html5video/lang/ru.js | 3 | ||||
-rw-r--r-- | sources/plugins/html5video/plugin.js | 28 |
4 files changed, 34 insertions, 13 deletions
diff --git a/sources/plugins/html5video/dialogs/html5video.js b/sources/plugins/html5video/dialogs/html5video.js index 99f89c3..76799e7 100644 --- a/sources/plugins/html5video/dialogs/html5video.js +++ b/sources/plugins/html5video/dialogs/html5video.js | |||
@@ -41,13 +41,23 @@ | |||
41 | } ] | 41 | } ] |
42 | }, | 42 | }, |
43 | { | 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 | { | ||
44 | type: 'hbox', | 55 | type: 'hbox', |
45 | id: 'size', | 56 | id: 'size', |
46 | children: [ { | 57 | children: [ { |
47 | type: 'text', | 58 | type: 'text', |
48 | id: 'width', | 59 | id: 'width', |
49 | label: editor.lang.common.width, | 60 | label: editor.lang.common.width, |
50 | 'default': 400, | ||
51 | setup: function( widget ) { | 61 | setup: function( widget ) { |
52 | if ( widget.data.width ) { | 62 | if ( widget.data.width ) { |
53 | this.setValue( widget.data.width ); | 63 | this.setValue( widget.data.width ); |
@@ -61,7 +71,6 @@ | |||
61 | type: 'text', | 71 | type: 'text', |
62 | id: 'height', | 72 | id: 'height', |
63 | label: editor.lang.common.height, | 73 | label: editor.lang.common.height, |
64 | 'default': 300, | ||
65 | setup: function( widget ) { | 74 | setup: function( widget ) { |
66 | if ( widget.data.height ) { | 75 | if ( widget.data.height ) { |
67 | this.setValue( widget.data.height ); | 76 | this.setValue( widget.data.height ); |
diff --git a/sources/plugins/html5video/lang/en.js b/sources/plugins/html5video/lang/en.js index ebac6e5..40eae12 100644 --- a/sources/plugins/html5video/lang/en.js +++ b/sources/plugins/html5video/lang/en.js | |||
@@ -10,5 +10,6 @@ | |||
10 | advanced: 'Advanced', | 10 | advanced: 'Advanced', |
11 | autoplay: 'Autoplay?', | 11 | autoplay: 'Autoplay?', |
12 | yes: 'Yes', | 12 | yes: 'Yes', |
13 | no: 'No' | 13 | no: 'No', |
14 | responsive: 'Responsive width' | ||
14 | } ); | 15 | } ); |
diff --git a/sources/plugins/html5video/lang/ru.js b/sources/plugins/html5video/lang/ru.js index 5eeeba6..cd5a195 100644 --- a/sources/plugins/html5video/lang/ru.js +++ b/sources/plugins/html5video/lang/ru.js | |||
@@ -10,5 +10,6 @@ | |||
10 | advanced: 'Дополнительно', | 10 | advanced: 'Дополнительно', |
11 | autoplay: 'Автовоспроизведение', | 11 | autoplay: 'Автовоспроизведение', |
12 | yes: 'Да', | 12 | yes: 'Да', |
13 | no: 'Нет' | 13 | no: 'Нет', |
14 | responsive: 'Адаптивная ширина' | ||
14 | } ); | 15 | } ); |
diff --git a/sources/plugins/html5video/plugin.js b/sources/plugins/html5video/plugin.js index 1bfff7f..bf51285 100644 --- a/sources/plugins/html5video/plugin.js +++ b/sources/plugins/html5video/plugin.js | |||
@@ -9,9 +9,9 @@ | |||
9 | /* | 9 | /* |
10 | * Allowed content rules (http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules): | 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. | 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 and controls attributes. | 12 | * - video tags with src, controls, width and height attributes. |
13 | */ | 13 | */ |
14 | allowedContent: 'div(!ckeditor-html5-video){text-align,float,margin-left,margin-right}; video[src,controls,autoplay];', | 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];', | 15 | requiredContent: 'div(ckeditor-html5-video); video[src,controls];', |
16 | upcast: function( element ) { | 16 | upcast: function( element ) { |
17 | return element.name === 'div' && element.hasClass( 'ckeditor-html5-video' ); | 17 | return element.name === 'div' && element.hasClass( 'ckeditor-html5-video' ); |
@@ -32,6 +32,7 @@ | |||
32 | width = this.element.getChild( 0 ).getAttribute( 'width' ); | 32 | width = this.element.getChild( 0 ).getAttribute( 'width' ); |
33 | height = this.element.getChild( 0 ).getAttribute( 'height' ); | 33 | height = this.element.getChild( 0 ).getAttribute( 'height' ); |
34 | autoplay = this.element.getChild( 0 ).getAttribute( 'autoplay' ); | 34 | autoplay = this.element.getChild( 0 ).getAttribute( 'autoplay' ); |
35 | responsive = this.element.getAttribute( 'data-responsive' ); | ||
35 | } | 36 | } |
36 | 37 | ||
37 | if ( src ) { | 38 | if ( src ) { |
@@ -45,19 +46,19 @@ | |||
45 | 46 | ||
46 | if ( width ) { | 47 | if ( width ) { |
47 | this.setData( 'width', width ); | 48 | this.setData( 'width', width ); |
48 | } else { | ||
49 | this.setData( 'width', '400' ); | ||
50 | } | 49 | } |
51 | 50 | ||
52 | if ( height ) { | 51 | if ( height ) { |
53 | this.setData( 'height', height ); | 52 | this.setData( 'height', height ); |
54 | } else { | ||
55 | this.setData( 'height', '300' ); | ||
56 | } | 53 | } |
57 | 54 | ||
58 | if ( autoplay ) { | 55 | if ( autoplay ) { |
59 | this.setData( 'autoplay', 'yes' ); | 56 | this.setData( 'autoplay', 'yes' ); |
60 | } | 57 | } |
58 | |||
59 | if ( responsive ) { | ||
60 | this.setData( 'responsive', responsive ); | ||
61 | } | ||
61 | } | 62 | } |
62 | }, | 63 | }, |
63 | data: function() { | 64 | data: function() { |
@@ -72,9 +73,18 @@ | |||
72 | // Append it to the container of the plugin. | 73 | // Append it to the container of the plugin. |
73 | this.element.append( videoElement ); | 74 | this.element.append( videoElement ); |
74 | } | 75 | } |
75 | this.element.getChild( 0 ).setAttribute( 'src', this.data.src ) | 76 | this.element.getChild( 0 ).setAttribute( 'src', this.data.src ); |
76 | .setAttribute( 'width', this.data.width ) | 77 | if (this.data.width) this.element.getChild( 0 ).setAttribute( 'width', this.data.width ); |
77 | .setAttribute( 'height', this.data.height ); | 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 | } | ||
78 | } | 88 | } |
79 | 89 | ||
80 | this.element.removeStyle( 'float' ); | 90 | this.element.removeStyle( 'float' ); |