]>
Commit | Line | Data |
---|---|---|
d1844275 IB |
1 | CKEDITOR.plugins.add( 'html5audio', {\r |
2 | requires: 'widget',\r | |
1794320d | 3 | lang: 'de,el,en,eu,es,fr,ru,uk,uz,zh-cn',\r |
d1844275 IB |
4 | icons: 'html5audio',\r |
5 | init: function( editor ) {\r | |
6 | editor.widgets.add( 'html5audio', {\r | |
7 | button: editor.lang.html5audio.button,\r | |
8 | template: '<div class="ckeditor-html5-audio"></div>', // We add the audio element when needed in the data function, to avoid having an undefined src attribute.\r | |
9 | // See issue #9 on github: https://github.com/iametza/ckeditor-html5-audio/issues/9\r | |
10 | editables: {},\r | |
11 | /*\r | |
12 | * Allowed content rules (http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules):\r | |
13 | * - div-s with text-align,float,margin-left,margin-right inline style rules and required ckeditor-html5-audio class.\r | |
14 | * - audio tags with src and controls attributes.\r | |
15 | */\r | |
1794320d | 16 | allowedContent: 'div(!ckeditor-html5-audio){text-align,float,margin-left,margin-right}; audio[src,controls,controlslist,autoplay];',\r |
d1844275 IB |
17 | requiredContent: 'div(ckeditor-html5-audio); audio[src,controls];',\r |
18 | upcast: function( element ) {\r | |
19 | return element.name === 'div' && element.hasClass( 'ckeditor-html5-audio' );\r | |
20 | },\r | |
21 | dialog: 'html5audio',\r | |
22 | init: function() {\r | |
23 | var src = '';\r | |
24 | var autoplay = '';\r | |
25 | var align = this.element.getStyle( 'text-align' );\r | |
26 | \r | |
27 | // If there's a child (the audio element)\r | |
28 | if ( this.element.getChild( 0 ) ) {\r | |
29 | // get it's attributes.\r | |
30 | src = this.element.getChild( 0 ).getAttribute( 'src' );\r | |
31 | autoplay = this.element.getChild( 0 ).getAttribute( 'autoplay' );\r | |
1794320d | 32 | allowdownload = !this.element.getChild( 0 ).getAttribute( 'controlslist' );\r |
d1844275 IB |
33 | }\r |
34 | \r | |
35 | if ( src ) {\r | |
36 | this.setData( 'src', src );\r | |
37 | \r | |
38 | if ( align ) {\r | |
39 | this.setData( 'align', align );\r | |
40 | } else {\r | |
41 | this.setData( 'align', 'none' );\r | |
42 | }\r | |
43 | \r | |
44 | if ( autoplay ) {\r | |
45 | this.setData( 'autoplay', 'yes' );\r | |
46 | }\r | |
1794320d IB |
47 | \r |
48 | if ( allowdownload ) {\r | |
49 | this.setData( 'allowdownload', 'yes' );\r | |
50 | }\r | |
d1844275 IB |
51 | }\r |
52 | },\r | |
53 | data: function() {\r | |
54 | // If there is an audio source\r | |
55 | if ( this.data.src ) {\r | |
56 | // and there isn't a child (the audio element)\r | |
57 | if ( !this.element.getChild( 0 ) ) {\r | |
58 | // Create a new <audio> element.\r | |
59 | var audioElement = new CKEDITOR.dom.element( 'audio' );\r | |
60 | // Set the controls attribute.\r | |
61 | audioElement.setAttribute( 'controls', 'controls' );\r | |
62 | // Append it to the container of the plugin.\r | |
63 | this.element.append( audioElement );\r | |
64 | }\r | |
65 | this.element.getChild( 0 ).setAttribute( 'src', this.data.src );\r | |
66 | }\r | |
67 | \r | |
68 | this.element.removeStyle( 'float' );\r | |
69 | this.element.removeStyle( 'margin-left' );\r | |
70 | this.element.removeStyle( 'margin-right' );\r | |
71 | \r | |
72 | if ( this.data.align === 'none' ) {\r | |
73 | this.element.removeStyle( 'text-align' );\r | |
74 | } else {\r | |
75 | this.element.setStyle( 'text-align', this.data.align );\r | |
76 | }\r | |
77 | \r | |
78 | if ( this.data.align === 'left' ) {\r | |
79 | this.element.setStyle( 'float', this.data.align );\r | |
80 | this.element.setStyle( 'margin-right', '10px' );\r | |
81 | } else if ( this.data.align === 'right' ) {\r | |
82 | this.element.setStyle( 'float', this.data.align );\r | |
83 | this.element.setStyle( 'margin-left', '10px' );\r | |
84 | }\r | |
85 | \r | |
86 | if ( this.element.getChild( 0 ) ) {\r | |
87 | if ( this.data.autoplay === 'yes' ) {\r | |
88 | this.element.getChild( 0 ).setAttribute( 'autoplay', 'autoplay' );\r | |
89 | } else {\r | |
90 | this.element.getChild( 0 ).removeAttribute( 'autoplay' );\r | |
91 | }\r | |
1794320d IB |
92 | if ( this.data.allowdownload === 'yes' ) {\r |
93 | this.element.getChild( 0 ).removeAttribute( 'controlslist' );\r | |
94 | } else {\r | |
95 | this.element.getChild( 0 ).setAttribute( 'controlslist', 'nodownload' );\r | |
96 | }\r | |
d1844275 IB |
97 | }\r |
98 | }\r | |
99 | } );\r | |
100 | \r | |
101 | if ( editor.contextMenu ) {\r | |
102 | editor.addMenuGroup( 'html5audioGroup' );\r | |
103 | editor.addMenuItem( 'html5audioPropertiesItem', {\r | |
104 | label: editor.lang.html5audio.audioProperties,\r | |
105 | icon: 'html5audio',\r | |
106 | command: 'html5audio',\r | |
107 | group: 'html5audioGroup'\r | |
108 | });\r | |
109 | \r | |
110 | editor.contextMenu.addListener( function( element ) {\r | |
111 | if ( element &&\r | |
112 | element.getChild( 0 ) &&\r | |
113 | element.getChild( 0 ).hasClass &&\r | |
114 | element.getChild( 0 ).hasClass( 'ckeditor-html5-audio' ) ) {\r | |
115 | return { html5audioPropertiesItem: CKEDITOR.TRISTATE_OFF };\r | |
116 | }\r | |
117 | });\r | |
118 | }\r | |
119 | \r | |
120 | CKEDITOR.dialog.add( 'html5audio', this.path + 'dialogs/html5audio.js' );\r | |
121 | }\r | |
122 | } );\r |