diff options
author | Ismaël Bouya <ismael.bouya@normalesup.org> | 2017-01-26 15:34:32 +0100 |
---|---|---|
committer | Ismaël Bouya <ismael.bouya@normalesup.org> | 2017-01-26 15:34:32 +0100 |
commit | 7183f6a6a21ad9124e70c997e0168459f377a9f2 (patch) | |
tree | f3355f3e28d35d9f431ff71045e1b46c82ac4826 /sources/plugins/html5video/plugin.js | |
parent | d1844275460a3e3a32e199326f6b36938a329091 (diff) | |
download | ludivine-ckeditor-component-7183f6a6a21ad9124e70c997e0168459f377a9f2.tar.gz ludivine-ckeditor-component-7183f6a6a21ad9124e70c997e0168459f377a9f2.tar.zst ludivine-ckeditor-component-7183f6a6a21ad9124e70c997e0168459f377a9f2.zip |
Change skin and add video button4.6.2.5
Diffstat (limited to 'sources/plugins/html5video/plugin.js')
-rw-r--r-- | sources/plugins/html5video/plugin.js | 129 |
1 files changed, 129 insertions, 0 deletions
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 @@ | |||
1 | CKEDITOR.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 and controls attributes. | ||
13 | */ | ||
14 | allowedContent: 'div(!ckeditor-html5-video){text-align,float,margin-left,margin-right}; video[src,controls,autoplay];', | ||
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 | } | ||
36 | |||
37 | if ( src ) { | ||
38 | this.setData( 'src', src ); | ||
39 | |||
40 | if ( align ) { | ||
41 | this.setData( 'align', align ); | ||
42 | } else { | ||
43 | this.setData( 'align', 'none' ); | ||
44 | } | ||
45 | |||
46 | if ( width ) { | ||
47 | this.setData( 'width', width ); | ||
48 | } else { | ||
49 | this.setData( 'width', '400' ); | ||
50 | } | ||
51 | |||
52 | if ( height ) { | ||
53 | this.setData( 'height', height ); | ||
54 | } else { | ||
55 | this.setData( 'height', '300' ); | ||
56 | } | ||
57 | |||
58 | if ( autoplay ) { | ||
59 | this.setData( 'autoplay', 'yes' ); | ||
60 | } | ||
61 | } | ||
62 | }, | ||
63 | data: function() { | ||
64 | // If there is an video source | ||
65 | if ( this.data.src ) { | ||
66 | // and there isn't a child (the video element) | ||
67 | if ( !this.element.getChild( 0 ) ) { | ||
68 | // Create a new <video> element. | ||
69 | var videoElement = new CKEDITOR.dom.element( 'video' ); | ||
70 | // Set the controls attribute. | ||
71 | videoElement.setAttribute( 'controls', 'controls' ); | ||
72 | // Append it to the container of the plugin. | ||
73 | this.element.append( videoElement ); | ||
74 | } | ||
75 | this.element.getChild( 0 ).setAttribute( 'src', this.data.src ) | ||
76 | .setAttribute( 'width', this.data.width ) | ||
77 | .setAttribute( 'height', this.data.height ); | ||
78 | } | ||
79 | |||
80 | this.element.removeStyle( 'float' ); | ||
81 | this.element.removeStyle( 'margin-left' ); | ||
82 | this.element.removeStyle( 'margin-right' ); | ||
83 | |||
84 | if ( this.data.align === 'none' ) { | ||
85 | this.element.removeStyle( 'text-align' ); | ||
86 | } else { | ||
87 | this.element.setStyle( 'text-align', this.data.align ); | ||
88 | } | ||
89 | |||
90 | if ( this.data.align === 'left' ) { | ||
91 | this.element.setStyle( 'float', this.data.align ); | ||
92 | this.element.setStyle( 'margin-right', '10px' ); | ||
93 | } else if ( this.data.align === 'right' ) { | ||
94 | this.element.setStyle( 'float', this.data.align ); | ||
95 | this.element.setStyle( 'margin-left', '10px' ); | ||
96 | } | ||
97 | |||
98 | if ( this.element.getChild( 0 ) ) { | ||
99 | if ( this.data.autoplay === 'yes' ) { | ||
100 | this.element.getChild( 0 ).setAttribute( 'autoplay', 'autoplay' ); | ||
101 | } else { | ||
102 | this.element.getChild( 0 ).removeAttribute( 'autoplay' ); | ||
103 | } | ||
104 | } | ||
105 | } | ||
106 | } ); | ||
107 | |||
108 | if ( editor.contextMenu ) { | ||
109 | editor.addMenuGroup( 'html5videoGroup' ); | ||
110 | editor.addMenuItem( 'html5videoPropertiesItem', { | ||
111 | label: editor.lang.html5video.videoProperties, | ||
112 | icon: 'html5video', | ||
113 | command: 'html5video', | ||
114 | group: 'html5videoGroup' | ||
115 | }); | ||
116 | |||
117 | editor.contextMenu.addListener( function( element ) { | ||
118 | if ( element && | ||
119 | element.getChild( 0 ) && | ||
120 | element.getChild( 0 ).hasClass && | ||
121 | element.getChild( 0 ).hasClass( 'ckeditor-html5-video' ) ) { | ||
122 | return { html5videoPropertiesItem: CKEDITOR.TRISTATE_OFF }; | ||
123 | } | ||
124 | }); | ||
125 | } | ||
126 | |||
127 | CKEDITOR.dialog.add( 'html5video', this.path + 'dialogs/html5video.js' ); | ||
128 | } | ||
129 | } ); | ||