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