diff options
Diffstat (limited to 'sources/plugins/html5video/plugin.js')
-rw-r--r-- | sources/plugins/html5video/plugin.js | 139 |
1 files changed, 139 insertions, 0 deletions
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 @@ | |||
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, 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 | } ); | ||