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