]> git.immae.eu Git - perso/Immae/Projets/packagist/piedsjaloux-ckeditor-component.git/blobdiff - sources/plugins/oembed/plugin.js
Add oembed
[perso/Immae/Projets/packagist/piedsjaloux-ckeditor-component.git] / sources / plugins / oembed / plugin.js
diff --git a/sources/plugins/oembed/plugin.js b/sources/plugins/oembed/plugin.js
new file mode 100644 (file)
index 0000000..9ad1ead
--- /dev/null
@@ -0,0 +1,446 @@
+/**\r
+* oEmbed Plugin plugin\r
+* Licensed under the MIT license\r
+* jQuery Embed Plugin: http://code.google.com/p/jquery-oembed/ (MIT License)\r
+* Plugin for: http://ckeditor.com/license (GPL/LGPL/MPL: http://ckeditor.com/license)\r
+*/\r
+\r
+(function() {\r
+        CKEDITOR.plugins.add('oembed', {\r
+            icons: 'oembed',\r
+            hidpi: true,\r
+            requires: 'widget,dialog',\r
+            lang: 'de,en,fr,nl,pl,pt-br,ru,tr', // %REMOVE_LINE_CORE%\r
+            version: 1.17,\r
+            init: function(editor) {\r
+                // Load jquery?\r
+                loadjQueryLibaries();\r
+\r
+                CKEDITOR.tools.extend(CKEDITOR.editor.prototype, {\r
+                    oEmbed: function(url, maxWidth, maxHeight, responsiveResize) {\r
+\r
+                        if (url.length < 1 || url.indexOf('http') < 0) {\r
+                            alert(editor.lang.oembed.invalidUrl);\r
+                            return false;\r
+                        }\r
+\r
+                        function embed() {\r
+                            if (maxWidth == null || maxWidth == 'undefined') {\r
+                                maxWidth = null;\r
+                            }\r
+\r
+                            if (maxHeight == null || maxHeight == 'undefined') {\r
+                                maxHeight = null;\r
+                            }\r
+\r
+                            if (responsiveResize == null || responsiveResize == 'undefined') {\r
+                                responsiveResize = false;\r
+                            }\r
+\r
+                            embedCode(url, editor, false, maxWidth, maxHeight, responsiveResize);\r
+                        }\r
+\r
+                        if (typeof(jQuery.fn.oembed) === 'undefined') {\r
+                            CKEDITOR.scriptLoader.load(CKEDITOR.getUrl(CKEDITOR.plugins.getPath('oembed') + 'libs/jquery.oembed.min.js'), function() {\r
+                                embed();\r
+                            });\r
+                        } else {\r
+                            embed();\r
+                        }\r
+\r
+                        return true;\r
+                    }\r
+                });\r
+\r
+                editor.widgets.add('oembed', {\r
+                    draggable: false,\r
+                    mask: true,\r
+                    dialog: 'oembed',\r
+                    allowedContent: {\r
+                        div: {\r
+                            styles: 'text-align,float',\r
+                            attributes: '*',\r
+                            classes: editor.config.oembed_WrapperClass != null ? editor.config.oembed_WrapperClass : "embeddedContent"\r
+                        },\r
+                        'div(embeddedContent,oembed-provider-*) iframe': {\r
+                            attributes: '*'\r
+                        },\r
+                        'div(embeddedContent,oembed-provider-*) blockquote': {\r
+                            attributes: '*'\r
+                        },\r
+                        'div(embeddedContent,oembed-provider-*) script': {\r
+                            attributes: '*'\r
+                        }\r
+                    },\r
+                    template:\r
+                        '<div class="' + (editor.config.oembed_WrapperClass != null ? editor.config.oembed_WrapperClass : "embeddedContent") + '">' +\r
+                            '</div>',\r
+                    upcast: function(element) {\r
+                        return element.name == 'div' && element.hasClass(editor.config.oembed_WrapperClass != null ? editor.config.oembed_WrapperClass : "embeddedContent");\r
+                    },\r
+                    init: function() {\r
+                        var data = {\r
+                            oembed: this.element.data('oembed') || '',\r
+                            resizeType: this.element.data('resizeType') || 'noresize',\r
+                            maxWidth: this.element.data('maxWidth') || 560,\r
+                            maxHeight: this.element.data('maxHeight') || 315,\r
+                            align: this.element.data('align') || 'none',\r
+                            oembed_provider: this.element.data('oembed_provider') || ''\r
+                        };\r
+\r
+                        this.setData(data);\r
+                        this.element.addClass('oembed-provider-' + data.oembed_provider);\r
+\r
+                        this.on('dialog', function(evt) {\r
+                            evt.data.widget = this;\r
+                        }, this);\r
+                    }\r
+                });\r
+\r
+                editor.ui.addButton('oembed', {\r
+                    label: editor.lang.oembed.button,\r
+                    command: 'oembed',\r
+                    toolbar: 'insert,10',\r
+                    icon: this.path + "icons/" + (CKEDITOR.env.hidpi ? "hidpi/" : "") + "oembed.png"\r
+                });\r
+\r
+                var resizeTypeChanged = function() {\r
+                    var dialog = this.getDialog(),\r
+                        resizetype = this.getValue(),\r
+                        maxSizeBox = dialog.getContentElement('general', 'maxSizeBox').getElement(),\r
+                        sizeBox = dialog.getContentElement('general', 'sizeBox').getElement();\r
+\r
+                    if (resizetype == 'noresize') {\r
+                        maxSizeBox.hide();\r
+\r
+                        sizeBox.hide();\r
+                    } else if (resizetype == "custom") {\r
+                        maxSizeBox.hide();\r
+\r
+                        sizeBox.show();\r
+                    } else {\r
+                        maxSizeBox.show();\r
+\r
+                        sizeBox.hide();\r
+                    }\r
+\r
+                };\r
+\r
+                String.prototype.beginsWith = function(string) {\r
+                    return (this.indexOf(string) === 0);\r
+                };\r
+\r
+                function loadjQueryLibaries() {\r
+                    if (typeof(jQuery) === 'undefined') {\r
+                        CKEDITOR.scriptLoader.load('//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', function() {\r
+                            jQuery.noConflict();\r
+                            if (typeof(jQuery.fn.oembed) === 'undefined') {\r
+                                CKEDITOR.scriptLoader.load(\r
+                                    CKEDITOR.getUrl(CKEDITOR.plugins.getPath('oembed') + 'libs/jquery.oembed.min.js')\r
+                                );\r
+                            }\r
+                        });\r
+\r
+                    } else if (typeof(jQuery.fn.oembed) === 'undefined') {\r
+                        CKEDITOR.scriptLoader.load(CKEDITOR.getUrl(CKEDITOR.plugins.getPath('oembed') + 'libs/jquery.oembed.min.js'));\r
+                    }\r
+                }\r
+\r
+                function embedCode(url, instance, maxWidth, maxHeight, responsiveResize, resizeType, align, widget) {\r
+                    jQuery('body').oembed(url, {\r
+                        onEmbed: function(e) {\r
+                            var elementAdded = false,\r
+                                provider = jQuery.fn.oembed.getOEmbedProvider(url);\r
+\r
+                            widget.element.data('resizeType', resizeType);\r
+                            if (resizeType == "responsive" || resizeType == "custom") {\r
+                                widget.element.data('maxWidth', maxWidth);\r
+                                widget.element.data('maxHeight', maxHeight);\r
+                            }\r
+\r
+                            widget.element.data('align', align);\r
+\r
+                            // TODO handle align\r
+                            if (align == 'center') {\r
+                                if (!widget.inline)\r
+                                    widget.element.setStyle('text-align', 'center');\r
+\r
+                                widget.element.removeStyle('float');\r
+                            } else {\r
+                                if (!widget.inline)\r
+                                    widget.element.removeStyle('text-align');\r
+\r
+                                if (align == 'none')\r
+                                    widget.element.removeStyle('float');\r
+                                else\r
+                                    widget.element.setStyle('float', align);\r
+                            }\r
+\r
+                            if (typeof e.code === 'string') {\r
+                                if (widget.element.$.firstChild) {\r
+                                    widget.element.$.removeChild(widget.element.$.firstChild);\r
+                                }\r
+\r
+                                widget.element.appendHtml(e.code);\r
+                                widget.element.data('oembed', url);\r
+                                widget.element.data('oembed_provider', provider.name);\r
+                                widget.element.addClass('oembed-provider-' + provider.name);\r
+\r
+                                elementAdded = true;\r
+                            } else if (typeof e.code[0].outerHTML === 'string') {\r
+\r
+                                if (widget.element.$.firstChild) {\r
+                                    widget.element.$.removeChild(widget.element.$.firstChild);\r
+                                }\r
+\r
+                                widget.element.appendHtml(e.code[0].outerHTML);\r
+                                widget.element.data('oembed', url);\r
+                                widget.element.data('oembed_provider', provider.name);\r
+                                widget.element.addClass('oembed-provider-' + provider.name);\r
+\r
+                                elementAdded = true;\r
+                            } else {\r
+                                alert(editor.lang.oembed.noEmbedCode);\r
+                            }\r
+                        },\r
+                        onError: function(externalUrl) {\r
+                            if (externalUrl.indexOf("vimeo.com") > 0) {\r
+                                alert(editor.lang.oembed.noVimeo);\r
+                            } else {\r
+                                alert(editor.lang.oembed.Error);\r
+                            }\r
+\r
+                        },\r
+                        maxHeight: maxHeight,\r
+                        maxWidth: maxWidth,\r
+                        useResponsiveResize: responsiveResize,\r
+                        embedMethod: 'editor'\r
+                    });\r
+                }\r
+\r
+                CKEDITOR.dialog.add('oembed', function(editor) {\r
+                    return {\r
+                        title: editor.lang.oembed.title,\r
+                        minWidth: CKEDITOR.env.ie && CKEDITOR.env.quirks ? 568 : 550,\r
+                        minHeight: 155,\r
+                        onShow: function() {\r
+                            var data = {\r
+                                oembed: this.widget.element.data('oembed') || '',\r
+                                resizeType: this.widget.element.data('resizeType') || 'noresize',\r
+                                maxWidth: this.widget.element.data('maxWidth'),\r
+                                maxHeight: this.widget.element.data('maxHeight'),\r
+                                align: this.widget.element.data('align') || 'none'\r
+                            };\r
+\r
+                            this.widget.setData(data);\r
+\r
+                            this.getContentElement('general', 'resizeType').setValue(data.resizeType);\r
+\r
+                            this.getContentElement('general', 'align').setValue(data.align);\r
+\r
+                            var resizetype = this.getContentElement('general', 'resizeType').getValue(),\r
+                                maxSizeBox = this.getContentElement('general', 'maxSizeBox').getElement(),\r
+                                sizeBox = this.getContentElement('general', 'sizeBox').getElement();\r
+\r
+                            if (resizetype == 'noresize') {\r
+                                maxSizeBox.hide();\r
+                                sizeBox.hide();\r
+                            } else if (resizetype == "custom") {\r
+                                maxSizeBox.hide();\r
+\r
+                                sizeBox.show();\r
+                            } else {\r
+                                maxSizeBox.show();\r
+\r
+                                sizeBox.hide();\r
+                            }\r
+                        },\r
+\r
+                        onOk: function() {\r
+                        },\r
+                        contents: [\r
+                            {\r
+                                label: editor.lang.common.generalTab,\r
+                                id: 'general',\r
+                                elements: [\r
+                                    {\r
+                                        type: 'html',\r
+                                        id: 'oembedHeader',\r
+                                        html: '<div style="white-space:normal;width:500px;padding-bottom:10px">' + editor.lang.oembed.pasteUrl + '</div>'\r
+                                    }, {\r
+                                        type: 'text',\r
+                                        id: 'embedCode',\r
+                                        focus: function() {\r
+                                            this.getElement().focus();\r
+                                        },\r
+                                        label: editor.lang.oembed.url,\r
+                                        title: editor.lang.oembed.pasteUrl,\r
+                                        setup: function(widget) {\r
+                                            if (widget.data.oembed) {\r
+                                                this.setValue(widget.data.oembed);\r
+                                            }\r
+                                        },\r
+                                        commit: function(widget) {\r
+                                            var dialog = CKEDITOR.dialog.getCurrent(),\r
+                                                inputCode = dialog.getValueOf('general', 'embedCode').replace(/\s/g, ""),\r
+                                                resizeType = dialog.getContentElement('general', 'resizeType').\r
+                                                    getValue(),\r
+                                                align = dialog.getContentElement('general', 'align').\r
+                                                    getValue(),\r
+                                                maxWidth = null,\r
+                                                maxHeight = null,\r
+                                                responsiveResize = false,\r
+                                                editorInstance = dialog.getParentEditor();\r
+\r
+                                            if (inputCode.length < 1 || inputCode.indexOf('http') < 0) {\r
+                                                alert(editor.lang.oembed.invalidUrl);\r
+                                                return false;\r
+                                            }\r
+\r
+                                            if (resizeType == "noresize") {\r
+                                                responsiveResize = false;\r
+                                                maxWidth = null;\r
+                                                maxHeight = null;\r
+                                            } else if (resizeType == "responsive") {\r
+                                                maxWidth = dialog.getContentElement('general', 'maxWidth').\r
+                                                    getInputElement().\r
+                                                    getValue();\r
+                                                maxHeight = dialog.getContentElement('general', 'maxHeight').\r
+                                                    getInputElement().\r
+                                                    getValue();\r
+\r
+                                                responsiveResize = true;\r
+                                            } else if (resizeType == "custom") {\r
+                                                maxWidth = dialog.getContentElement('general', 'width').\r
+                                                    getInputElement().\r
+                                                    getValue();\r
+                                                maxHeight = dialog.getContentElement('general', 'height').\r
+                                                    getInputElement().\r
+                                                    getValue();\r
+\r
+                                                responsiveResize = false;\r
+                                            }\r
+\r
+                                            embedCode(inputCode, editorInstance, maxWidth, maxHeight, responsiveResize, resizeType, align, widget);\r
+\r
+                                            widget.setData('oembed', inputCode);\r
+                                            widget.setData('resizeType', resizeType);\r
+                                            widget.setData('align', align);\r
+                                            widget.setData('maxWidth', maxWidth);\r
+                                            widget.setData('maxHeight', maxHeight);\r
+                                        }\r
+                                    }, {\r
+                                        type: 'hbox',\r
+                                        widths: ['50%', '50%'],\r
+                                        children: [\r
+                                            {\r
+                                                id: 'resizeType',\r
+                                                type: 'select',\r
+                                                label: editor.lang.oembed.resizeType,\r
+                                                'default': 'noresize',\r
+                                                setup: function(widget) {\r
+                                                    if (widget.data.resizeType) {\r
+                                                        this.setValue(widget.data.resizeType);\r
+                                                    }\r
+                                                },\r
+                                                items: [\r
+                                                    [editor.lang.oembed.noresize, 'noresize'],\r
+                                                    [editor.lang.oembed.responsive, 'responsive'],\r
+                                                    [editor.lang.oembed.custom, 'custom']\r
+                                                ],\r
+                                                onChange: resizeTypeChanged\r
+                                            }, {\r
+                                                type: 'hbox',\r
+                                                id: 'maxSizeBox',\r
+                                                widths: ['120px', '120px'],\r
+                                                style: 'float:left;position:absolute;left:58%;width:200px',\r
+                                                children: [\r
+                                                    {\r
+                                                        type: 'text',\r
+                                                        width: '100px',\r
+                                                        id: 'maxWidth',\r
+                                                        'default': editor.config.oembed_maxWidth != null ? editor.config.oembed_maxWidth : '560',\r
+                                                        label: editor.lang.oembed.maxWidth,\r
+                                                        title: editor.lang.oembed.maxWidthTitle,\r
+                                                        setup: function(widget) {\r
+                                                            if (widget.data.maxWidth) {\r
+                                                                this.setValue(widget.data.maxWidth);\r
+                                                            }\r
+                                                        }\r
+                                                    }, {\r
+                                                        type: 'text',\r
+                                                        id: 'maxHeight',\r
+                                                        width: '120px',\r
+                                                        'default': editor.config.oembed_maxHeight != null ? editor.config.oembed_maxHeight : '315',\r
+                                                        label: editor.lang.oembed.maxHeight,\r
+                                                        title: editor.lang.oembed.maxHeightTitle,\r
+                                                        setup: function(widget) {\r
+                                                            if (widget.data.maxHeight) {\r
+                                                                this.setValue(widget.data.maxHeight);\r
+                                                            }\r
+                                                        }\r
+                                                    }\r
+                                                ]\r
+                                            }, {\r
+                                                type: 'hbox',\r
+                                                id: 'sizeBox',\r
+                                                widths: ['120px', '120px'],\r
+                                                style: 'float:left;position:absolute;left:58%;width:200px',\r
+                                                children: [\r
+                                                    {\r
+                                                        type: 'text',\r
+                                                        id: 'width',\r
+                                                        width: '100px',\r
+                                                        'default': editor.config.oembed_maxWidth != null ? editor.config.oembed_maxWidth : '560',\r
+                                                        label: editor.lang.oembed.width,\r
+                                                        title: editor.lang.oembed.widthTitle,\r
+                                                        setup: function(widget) {\r
+                                                            if (widget.data.maxWidth) {\r
+                                                                this.setValue(widget.data.maxWidth);\r
+                                                            }\r
+                                                        }\r
+                                                    }, {\r
+                                                        type: 'text',\r
+                                                        id: 'height',\r
+                                                        width: '120px',\r
+                                                        'default': editor.config.oembed_maxHeight != null ? editor.config.oembed_maxHeight : '315',\r
+                                                        label: editor.lang.oembed.height,\r
+                                                        title: editor.lang.oembed.heightTitle,\r
+                                                        setup: function(widget) {\r
+                                                            if (widget.data.maxHeight) {\r
+                                                                this.setValue(widget.data.maxHeight);\r
+                                                            }\r
+                                                        }\r
+                                                    }\r
+                                                ]\r
+                                            }\r
+                                        ]\r
+                                    }, {\r
+                                        type: 'hbox',\r
+                                        id: 'alignment',\r
+                                        children: [\r
+                                            {\r
+                                                id: 'align',\r
+                                                type: 'radio',\r
+                                                items: [\r
+                                                    [editor.lang.oembed.none, 'none'],\r
+                                                    [editor.lang.common.alignLeft, 'left'],\r
+                                                    [editor.lang.common.alignCenter, 'center'],\r
+                                                    [editor.lang.common.alignRight, 'right']\r
+                                                ],\r
+                                                label: editor.lang.common.align,\r
+                                                setup: function(widget) {\r
+                                                    this.setValue(widget.data.align);\r
+                                                }\r
+                                            }\r
+                                        ]\r
+                                    }\r
+                                ]\r
+                            }\r
+                        ]\r
+                    };\r
+                });\r
+            }\r
+        });\r
+    }\r
+)();\r