diff options
Diffstat (limited to 'sources/plugins/oembed/plugin.js')
-rw-r--r-- | sources/plugins/oembed/plugin.js | 446 |
1 files changed, 446 insertions, 0 deletions
diff --git a/sources/plugins/oembed/plugin.js b/sources/plugins/oembed/plugin.js new file mode 100644 index 0000000..9ad1ead --- /dev/null +++ b/sources/plugins/oembed/plugin.js | |||
@@ -0,0 +1,446 @@ | |||
1 | /** | ||
2 | * oEmbed Plugin plugin | ||
3 | * Licensed under the MIT license | ||
4 | * jQuery Embed Plugin: http://code.google.com/p/jquery-oembed/ (MIT License) | ||
5 | * Plugin for: http://ckeditor.com/license (GPL/LGPL/MPL: http://ckeditor.com/license) | ||
6 | */ | ||
7 | |||
8 | (function() { | ||
9 | CKEDITOR.plugins.add('oembed', { | ||
10 | icons: 'oembed', | ||
11 | hidpi: true, | ||
12 | requires: 'widget,dialog', | ||
13 | lang: 'de,en,fr,nl,pl,pt-br,ru,tr', // %REMOVE_LINE_CORE% | ||
14 | version: 1.17, | ||
15 | init: function(editor) { | ||
16 | // Load jquery? | ||
17 | loadjQueryLibaries(); | ||
18 | |||
19 | CKEDITOR.tools.extend(CKEDITOR.editor.prototype, { | ||
20 | oEmbed: function(url, maxWidth, maxHeight, responsiveResize) { | ||
21 | |||
22 | if (url.length < 1 || url.indexOf('http') < 0) { | ||
23 | alert(editor.lang.oembed.invalidUrl); | ||
24 | return false; | ||
25 | } | ||
26 | |||
27 | function embed() { | ||
28 | if (maxWidth == null || maxWidth == 'undefined') { | ||
29 | maxWidth = null; | ||
30 | } | ||
31 | |||
32 | if (maxHeight == null || maxHeight == 'undefined') { | ||
33 | maxHeight = null; | ||
34 | } | ||
35 | |||
36 | if (responsiveResize == null || responsiveResize == 'undefined') { | ||
37 | responsiveResize = false; | ||
38 | } | ||
39 | |||
40 | embedCode(url, editor, false, maxWidth, maxHeight, responsiveResize); | ||
41 | } | ||
42 | |||
43 | if (typeof(jQuery.fn.oembed) === 'undefined') { | ||
44 | CKEDITOR.scriptLoader.load(CKEDITOR.getUrl(CKEDITOR.plugins.getPath('oembed') + 'libs/jquery.oembed.min.js'), function() { | ||
45 | embed(); | ||
46 | }); | ||
47 | } else { | ||
48 | embed(); | ||
49 | } | ||
50 | |||
51 | return true; | ||
52 | } | ||
53 | }); | ||
54 | |||
55 | editor.widgets.add('oembed', { | ||
56 | draggable: false, | ||
57 | mask: true, | ||
58 | dialog: 'oembed', | ||
59 | allowedContent: { | ||
60 | div: { | ||
61 | styles: 'text-align,float', | ||
62 | attributes: '*', | ||
63 | classes: editor.config.oembed_WrapperClass != null ? editor.config.oembed_WrapperClass : "embeddedContent" | ||
64 | }, | ||
65 | 'div(embeddedContent,oembed-provider-*) iframe': { | ||
66 | attributes: '*' | ||
67 | }, | ||
68 | 'div(embeddedContent,oembed-provider-*) blockquote': { | ||
69 | attributes: '*' | ||
70 | }, | ||
71 | 'div(embeddedContent,oembed-provider-*) script': { | ||
72 | attributes: '*' | ||
73 | } | ||
74 | }, | ||
75 | template: | ||
76 | '<div class="' + (editor.config.oembed_WrapperClass != null ? editor.config.oembed_WrapperClass : "embeddedContent") + '">' + | ||
77 | '</div>', | ||
78 | upcast: function(element) { | ||
79 | return element.name == 'div' && element.hasClass(editor.config.oembed_WrapperClass != null ? editor.config.oembed_WrapperClass : "embeddedContent"); | ||
80 | }, | ||
81 | init: function() { | ||
82 | var data = { | ||
83 | oembed: this.element.data('oembed') || '', | ||
84 | resizeType: this.element.data('resizeType') || 'noresize', | ||
85 | maxWidth: this.element.data('maxWidth') || 560, | ||
86 | maxHeight: this.element.data('maxHeight') || 315, | ||
87 | align: this.element.data('align') || 'none', | ||
88 | oembed_provider: this.element.data('oembed_provider') || '' | ||
89 | }; | ||
90 | |||
91 | this.setData(data); | ||
92 | this.element.addClass('oembed-provider-' + data.oembed_provider); | ||
93 | |||
94 | this.on('dialog', function(evt) { | ||
95 | evt.data.widget = this; | ||
96 | }, this); | ||
97 | } | ||
98 | }); | ||
99 | |||
100 | editor.ui.addButton('oembed', { | ||
101 | label: editor.lang.oembed.button, | ||
102 | command: 'oembed', | ||
103 | toolbar: 'insert,10', | ||
104 | icon: this.path + "icons/" + (CKEDITOR.env.hidpi ? "hidpi/" : "") + "oembed.png" | ||
105 | }); | ||
106 | |||
107 | var resizeTypeChanged = function() { | ||
108 | var dialog = this.getDialog(), | ||
109 | resizetype = this.getValue(), | ||
110 | maxSizeBox = dialog.getContentElement('general', 'maxSizeBox').getElement(), | ||
111 | sizeBox = dialog.getContentElement('general', 'sizeBox').getElement(); | ||
112 | |||
113 | if (resizetype == 'noresize') { | ||
114 | maxSizeBox.hide(); | ||
115 | |||
116 | sizeBox.hide(); | ||
117 | } else if (resizetype == "custom") { | ||
118 | maxSizeBox.hide(); | ||
119 | |||
120 | sizeBox.show(); | ||
121 | } else { | ||
122 | maxSizeBox.show(); | ||
123 | |||
124 | sizeBox.hide(); | ||
125 | } | ||
126 | |||
127 | }; | ||
128 | |||
129 | String.prototype.beginsWith = function(string) { | ||
130 | return (this.indexOf(string) === 0); | ||
131 | }; | ||
132 | |||
133 | function loadjQueryLibaries() { | ||
134 | if (typeof(jQuery) === 'undefined') { | ||
135 | CKEDITOR.scriptLoader.load('//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', function() { | ||
136 | jQuery.noConflict(); | ||
137 | if (typeof(jQuery.fn.oembed) === 'undefined') { | ||
138 | CKEDITOR.scriptLoader.load( | ||
139 | CKEDITOR.getUrl(CKEDITOR.plugins.getPath('oembed') + 'libs/jquery.oembed.min.js') | ||
140 | ); | ||
141 | } | ||
142 | }); | ||
143 | |||
144 | } else if (typeof(jQuery.fn.oembed) === 'undefined') { | ||
145 | CKEDITOR.scriptLoader.load(CKEDITOR.getUrl(CKEDITOR.plugins.getPath('oembed') + 'libs/jquery.oembed.min.js')); | ||
146 | } | ||
147 | } | ||
148 | |||
149 | function embedCode(url, instance, maxWidth, maxHeight, responsiveResize, resizeType, align, widget) { | ||
150 | jQuery('body').oembed(url, { | ||
151 | onEmbed: function(e) { | ||
152 | var elementAdded = false, | ||
153 | provider = jQuery.fn.oembed.getOEmbedProvider(url); | ||
154 | |||
155 | widget.element.data('resizeType', resizeType); | ||
156 | if (resizeType == "responsive" || resizeType == "custom") { | ||
157 | widget.element.data('maxWidth', maxWidth); | ||
158 | widget.element.data('maxHeight', maxHeight); | ||
159 | } | ||
160 | |||
161 | widget.element.data('align', align); | ||
162 | |||
163 | // TODO handle align | ||
164 | if (align == 'center') { | ||
165 | if (!widget.inline) | ||
166 | widget.element.setStyle('text-align', 'center'); | ||
167 | |||
168 | widget.element.removeStyle('float'); | ||
169 | } else { | ||
170 | if (!widget.inline) | ||
171 | widget.element.removeStyle('text-align'); | ||
172 | |||
173 | if (align == 'none') | ||
174 | widget.element.removeStyle('float'); | ||
175 | else | ||
176 | widget.element.setStyle('float', align); | ||
177 | } | ||
178 | |||
179 | if (typeof e.code === 'string') { | ||
180 | if (widget.element.$.firstChild) { | ||
181 | widget.element.$.removeChild(widget.element.$.firstChild); | ||
182 | } | ||
183 | |||
184 | widget.element.appendHtml(e.code); | ||
185 | widget.element.data('oembed', url); | ||
186 | widget.element.data('oembed_provider', provider.name); | ||
187 | widget.element.addClass('oembed-provider-' + provider.name); | ||
188 | |||
189 | elementAdded = true; | ||
190 | } else if (typeof e.code[0].outerHTML === 'string') { | ||
191 | |||
192 | if (widget.element.$.firstChild) { | ||
193 | widget.element.$.removeChild(widget.element.$.firstChild); | ||
194 | } | ||
195 | |||
196 | widget.element.appendHtml(e.code[0].outerHTML); | ||
197 | widget.element.data('oembed', url); | ||
198 | widget.element.data('oembed_provider', provider.name); | ||
199 | widget.element.addClass('oembed-provider-' + provider.name); | ||
200 | |||
201 | elementAdded = true; | ||
202 | } else { | ||
203 | alert(editor.lang.oembed.noEmbedCode); | ||
204 | } | ||
205 | }, | ||
206 | onError: function(externalUrl) { | ||
207 | if (externalUrl.indexOf("vimeo.com") > 0) { | ||
208 | alert(editor.lang.oembed.noVimeo); | ||
209 | } else { | ||
210 | alert(editor.lang.oembed.Error); | ||
211 | } | ||
212 | |||
213 | }, | ||
214 | maxHeight: maxHeight, | ||
215 | maxWidth: maxWidth, | ||
216 | useResponsiveResize: responsiveResize, | ||
217 | embedMethod: 'editor' | ||
218 | }); | ||
219 | } | ||
220 | |||
221 | CKEDITOR.dialog.add('oembed', function(editor) { | ||
222 | return { | ||
223 | title: editor.lang.oembed.title, | ||
224 | minWidth: CKEDITOR.env.ie && CKEDITOR.env.quirks ? 568 : 550, | ||
225 | minHeight: 155, | ||
226 | onShow: function() { | ||
227 | var data = { | ||
228 | oembed: this.widget.element.data('oembed') || '', | ||
229 | resizeType: this.widget.element.data('resizeType') || 'noresize', | ||
230 | maxWidth: this.widget.element.data('maxWidth'), | ||
231 | maxHeight: this.widget.element.data('maxHeight'), | ||
232 | align: this.widget.element.data('align') || 'none' | ||
233 | }; | ||
234 | |||
235 | this.widget.setData(data); | ||
236 | |||
237 | this.getContentElement('general', 'resizeType').setValue(data.resizeType); | ||
238 | |||
239 | this.getContentElement('general', 'align').setValue(data.align); | ||
240 | |||
241 | var resizetype = this.getContentElement('general', 'resizeType').getValue(), | ||
242 | maxSizeBox = this.getContentElement('general', 'maxSizeBox').getElement(), | ||
243 | sizeBox = this.getContentElement('general', 'sizeBox').getElement(); | ||
244 | |||
245 | if (resizetype == 'noresize') { | ||
246 | maxSizeBox.hide(); | ||
247 | sizeBox.hide(); | ||
248 | } else if (resizetype == "custom") { | ||
249 | maxSizeBox.hide(); | ||
250 | |||
251 | sizeBox.show(); | ||
252 | } else { | ||
253 | maxSizeBox.show(); | ||
254 | |||
255 | sizeBox.hide(); | ||
256 | } | ||
257 | }, | ||
258 | |||
259 | onOk: function() { | ||
260 | }, | ||
261 | contents: [ | ||
262 | { | ||
263 | label: editor.lang.common.generalTab, | ||
264 | id: 'general', | ||
265 | elements: [ | ||
266 | { | ||
267 | type: 'html', | ||
268 | id: 'oembedHeader', | ||
269 | html: '<div style="white-space:normal;width:500px;padding-bottom:10px">' + editor.lang.oembed.pasteUrl + '</div>' | ||
270 | }, { | ||
271 | type: 'text', | ||
272 | id: 'embedCode', | ||
273 | focus: function() { | ||
274 | this.getElement().focus(); | ||
275 | }, | ||
276 | label: editor.lang.oembed.url, | ||
277 | title: editor.lang.oembed.pasteUrl, | ||
278 | setup: function(widget) { | ||
279 | if (widget.data.oembed) { | ||
280 | this.setValue(widget.data.oembed); | ||
281 | } | ||
282 | }, | ||
283 | commit: function(widget) { | ||
284 | var dialog = CKEDITOR.dialog.getCurrent(), | ||
285 | inputCode = dialog.getValueOf('general', 'embedCode').replace(/\s/g, ""), | ||
286 | resizeType = dialog.getContentElement('general', 'resizeType'). | ||
287 | getValue(), | ||
288 | align = dialog.getContentElement('general', 'align'). | ||
289 | getValue(), | ||
290 | maxWidth = null, | ||
291 | maxHeight = null, | ||
292 | responsiveResize = false, | ||
293 | editorInstance = dialog.getParentEditor(); | ||
294 | |||
295 | if (inputCode.length < 1 || inputCode.indexOf('http') < 0) { | ||
296 | alert(editor.lang.oembed.invalidUrl); | ||
297 | return false; | ||
298 | } | ||
299 | |||
300 | if (resizeType == "noresize") { | ||
301 | responsiveResize = false; | ||
302 | maxWidth = null; | ||
303 | maxHeight = null; | ||
304 | } else if (resizeType == "responsive") { | ||
305 | maxWidth = dialog.getContentElement('general', 'maxWidth'). | ||
306 | getInputElement(). | ||
307 | getValue(); | ||
308 | maxHeight = dialog.getContentElement('general', 'maxHeight'). | ||
309 | getInputElement(). | ||
310 | getValue(); | ||
311 | |||
312 | responsiveResize = true; | ||
313 | } else if (resizeType == "custom") { | ||
314 | maxWidth = dialog.getContentElement('general', 'width'). | ||
315 | getInputElement(). | ||
316 | getValue(); | ||
317 | maxHeight = dialog.getContentElement('general', 'height'). | ||
318 | getInputElement(). | ||
319 | getValue(); | ||
320 | |||
321 | responsiveResize = false; | ||
322 | } | ||
323 | |||
324 | embedCode(inputCode, editorInstance, maxWidth, maxHeight, responsiveResize, resizeType, align, widget); | ||
325 | |||
326 | widget.setData('oembed', inputCode); | ||
327 | widget.setData('resizeType', resizeType); | ||
328 | widget.setData('align', align); | ||
329 | widget.setData('maxWidth', maxWidth); | ||
330 | widget.setData('maxHeight', maxHeight); | ||
331 | } | ||
332 | }, { | ||
333 | type: 'hbox', | ||
334 | widths: ['50%', '50%'], | ||
335 | children: [ | ||
336 | { | ||
337 | id: 'resizeType', | ||
338 | type: 'select', | ||
339 | label: editor.lang.oembed.resizeType, | ||
340 | 'default': 'noresize', | ||
341 | setup: function(widget) { | ||
342 | if (widget.data.resizeType) { | ||
343 | this.setValue(widget.data.resizeType); | ||
344 | } | ||
345 | }, | ||
346 | items: [ | ||
347 | [editor.lang.oembed.noresize, 'noresize'], | ||
348 | [editor.lang.oembed.responsive, 'responsive'], | ||
349 | [editor.lang.oembed.custom, 'custom'] | ||
350 | ], | ||
351 | onChange: resizeTypeChanged | ||
352 | }, { | ||
353 | type: 'hbox', | ||
354 | id: 'maxSizeBox', | ||
355 | widths: ['120px', '120px'], | ||
356 | style: 'float:left;position:absolute;left:58%;width:200px', | ||
357 | children: [ | ||
358 | { | ||
359 | type: 'text', | ||
360 | width: '100px', | ||
361 | id: 'maxWidth', | ||
362 | 'default': editor.config.oembed_maxWidth != null ? editor.config.oembed_maxWidth : '560', | ||
363 | label: editor.lang.oembed.maxWidth, | ||
364 | title: editor.lang.oembed.maxWidthTitle, | ||
365 | setup: function(widget) { | ||
366 | if (widget.data.maxWidth) { | ||
367 | this.setValue(widget.data.maxWidth); | ||
368 | } | ||
369 | } | ||
370 | }, { | ||
371 | type: 'text', | ||
372 | id: 'maxHeight', | ||
373 | width: '120px', | ||
374 | 'default': editor.config.oembed_maxHeight != null ? editor.config.oembed_maxHeight : '315', | ||
375 | label: editor.lang.oembed.maxHeight, | ||
376 | title: editor.lang.oembed.maxHeightTitle, | ||
377 | setup: function(widget) { | ||
378 | if (widget.data.maxHeight) { | ||
379 | this.setValue(widget.data.maxHeight); | ||
380 | } | ||
381 | } | ||
382 | } | ||
383 | ] | ||
384 | }, { | ||
385 | type: 'hbox', | ||
386 | id: 'sizeBox', | ||
387 | widths: ['120px', '120px'], | ||
388 | style: 'float:left;position:absolute;left:58%;width:200px', | ||
389 | children: [ | ||
390 | { | ||
391 | type: 'text', | ||
392 | id: 'width', | ||
393 | width: '100px', | ||
394 | 'default': editor.config.oembed_maxWidth != null ? editor.config.oembed_maxWidth : '560', | ||
395 | label: editor.lang.oembed.width, | ||
396 | title: editor.lang.oembed.widthTitle, | ||
397 | setup: function(widget) { | ||
398 | if (widget.data.maxWidth) { | ||
399 | this.setValue(widget.data.maxWidth); | ||
400 | } | ||
401 | } | ||
402 | }, { | ||
403 | type: 'text', | ||
404 | id: 'height', | ||
405 | width: '120px', | ||
406 | 'default': editor.config.oembed_maxHeight != null ? editor.config.oembed_maxHeight : '315', | ||
407 | label: editor.lang.oembed.height, | ||
408 | title: editor.lang.oembed.heightTitle, | ||
409 | setup: function(widget) { | ||
410 | if (widget.data.maxHeight) { | ||
411 | this.setValue(widget.data.maxHeight); | ||
412 | } | ||
413 | } | ||
414 | } | ||
415 | ] | ||
416 | } | ||
417 | ] | ||
418 | }, { | ||
419 | type: 'hbox', | ||
420 | id: 'alignment', | ||
421 | children: [ | ||
422 | { | ||
423 | id: 'align', | ||
424 | type: 'radio', | ||
425 | items: [ | ||
426 | [editor.lang.oembed.none, 'none'], | ||
427 | [editor.lang.common.alignLeft, 'left'], | ||
428 | [editor.lang.common.alignCenter, 'center'], | ||
429 | [editor.lang.common.alignRight, 'right'] | ||
430 | ], | ||
431 | label: editor.lang.common.align, | ||
432 | setup: function(widget) { | ||
433 | this.setValue(widget.data.align); | ||
434 | } | ||
435 | } | ||
436 | ] | ||
437 | } | ||
438 | ] | ||
439 | } | ||
440 | ] | ||
441 | }; | ||
442 | }); | ||
443 | } | ||
444 | }); | ||
445 | } | ||
446 | )(); | ||