diff options
Diffstat (limited to 'sources/plugins/html5audio/plugin.js')
-rw-r--r-- | sources/plugins/html5audio/plugin.js | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/sources/plugins/html5audio/plugin.js b/sources/plugins/html5audio/plugin.js new file mode 100644 index 0000000..86bcfbd --- /dev/null +++ b/sources/plugins/html5audio/plugin.js | |||
@@ -0,0 +1,112 @@ | |||
1 | CKEDITOR.plugins.add( 'html5audio', { | ||
2 | requires: 'widget', | ||
3 | lang: 'de,en,eu,es,fr,ru,uk,uz', | ||
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,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 | } | ||
33 | |||
34 | if ( src ) { | ||
35 | this.setData( 'src', src ); | ||
36 | |||
37 | if ( align ) { | ||
38 | this.setData( 'align', align ); | ||
39 | } else { | ||
40 | this.setData( 'align', 'none' ); | ||
41 | } | ||
42 | |||
43 | if ( autoplay ) { | ||
44 | this.setData( 'autoplay', 'yes' ); | ||
45 | } | ||
46 | } | ||
47 | }, | ||
48 | data: function() { | ||
49 | // If there is an audio source | ||
50 | if ( this.data.src ) { | ||
51 | // and there isn't a child (the audio element) | ||
52 | if ( !this.element.getChild( 0 ) ) { | ||
53 | // Create a new <audio> element. | ||
54 | var audioElement = new CKEDITOR.dom.element( 'audio' ); | ||
55 | // Set the controls attribute. | ||
56 | audioElement.setAttribute( 'controls', 'controls' ); | ||
57 | // Append it to the container of the plugin. | ||
58 | this.element.append( audioElement ); | ||
59 | } | ||
60 | this.element.getChild( 0 ).setAttribute( 'src', this.data.src ); | ||
61 | } | ||
62 | |||
63 | this.element.removeStyle( 'float' ); | ||
64 | this.element.removeStyle( 'margin-left' ); | ||
65 | this.element.removeStyle( 'margin-right' ); | ||
66 | |||
67 | if ( this.data.align === 'none' ) { | ||
68 | this.element.removeStyle( 'text-align' ); | ||
69 | } else { | ||
70 | this.element.setStyle( 'text-align', this.data.align ); | ||
71 | } | ||
72 | |||
73 | if ( this.data.align === 'left' ) { | ||
74 | this.element.setStyle( 'float', this.data.align ); | ||
75 | this.element.setStyle( 'margin-right', '10px' ); | ||
76 | } else if ( this.data.align === 'right' ) { | ||
77 | this.element.setStyle( 'float', this.data.align ); | ||
78 | this.element.setStyle( 'margin-left', '10px' ); | ||
79 | } | ||
80 | |||
81 | if ( this.element.getChild( 0 ) ) { | ||
82 | if ( this.data.autoplay === 'yes' ) { | ||
83 | this.element.getChild( 0 ).setAttribute( 'autoplay', 'autoplay' ); | ||
84 | } else { | ||
85 | this.element.getChild( 0 ).removeAttribute( 'autoplay' ); | ||
86 | } | ||
87 | } | ||
88 | } | ||
89 | } ); | ||
90 | |||
91 | if ( editor.contextMenu ) { | ||
92 | editor.addMenuGroup( 'html5audioGroup' ); | ||
93 | editor.addMenuItem( 'html5audioPropertiesItem', { | ||
94 | label: editor.lang.html5audio.audioProperties, | ||
95 | icon: 'html5audio', | ||
96 | command: 'html5audio', | ||
97 | group: 'html5audioGroup' | ||
98 | }); | ||
99 | |||
100 | editor.contextMenu.addListener( function( element ) { | ||
101 | if ( element && | ||
102 | element.getChild( 0 ) && | ||
103 | element.getChild( 0 ).hasClass && | ||
104 | element.getChild( 0 ).hasClass( 'ckeditor-html5-audio' ) ) { | ||
105 | return { html5audioPropertiesItem: CKEDITOR.TRISTATE_OFF }; | ||
106 | } | ||
107 | }); | ||
108 | } | ||
109 | |||
110 | CKEDITOR.dialog.add( 'html5audio', this.path + 'dialogs/html5audio.js' ); | ||
111 | } | ||
112 | } ); | ||