Add oembed

[perso/Immae/Projets/packagist/piedsjaloux-ckeditor-component.git] / sources / plugins / widget / dev / assets / simplebox / plugin.js

diff --git a/sources/plugins/widget/dev/assets/simplebox/plugin.js b/sources/plugins/widget/dev/assets/simplebox/plugin.js
new file mode 100644 (file)
index 0000000..4c22d0d
--- /dev/null
+++ b/sources/plugins/widget/dev/assets/simplebox/plugin.js
@@ -0,0 +1,114 @@
+'use strict';\r
+\r
+// Register the plugin within the editor.\r
+CKEDITOR.plugins.add( 'simplebox', {\r
+       // This plugin requires the Widgets System defined in the 'widget' plugin.\r
+       requires: 'widget,dialog',\r
+\r
+       // Register the icon used for the toolbar button. It must be the same\r
+       // as the name of the widget.\r
+       icons: 'simplebox',\r
+\r
+       // The plugin initialization logic goes inside this method.\r
+       init: function( editor ) {\r
+               // Register the editing dialog.\r
+               CKEDITOR.dialog.add( 'simplebox', this.path + 'dialogs/simplebox.js' );\r
+\r
+               // Register the simplebox widget.\r
+               editor.widgets.add( 'simplebox', {\r
+                       // Allow all HTML elements, classes, and styles that this widget requires.\r
+                       // Read more about the Advanced Content Filter here:\r
+                       // * http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter\r
+                       // * http://docs.ckeditor.com/#!/guide/plugin_sdk_integration_with_acf\r
+                       allowedContent:\r
+                               'div(!simplebox,align-left,align-right,align-center){width};' +\r
+                               'div(!simplebox-content); h2(!simplebox-title)',\r
+\r
+                       // Minimum HTML which is required by this widget to work.\r
+                       requiredContent: 'div(simplebox)',\r
+\r
+                       // Define two nested editable areas.\r
+                       editables: {\r
+                               title: {\r
+                                       // Define CSS selector used for finding the element inside widget element.\r
+                                       selector: '.simplebox-title',\r
+                                       // Define content allowed in this nested editable. Its content will be\r
+                                       // filtered accordingly and the toolbar will be adjusted when this editable\r
+                                       // is focused.\r
+                                       allowedContent: 'br strong em'\r
+                               },\r
+                               content: {\r
+                                       selector: '.simplebox-content'\r
+                               }\r
+                       },\r
+\r
+                       // Define the template of a new Simple Box widget.\r
+                       // The template will be used when creating new instances of the Simple Box widget.\r
+                       template:\r
+                               '<div class="simplebox">' +\r
+                                       '<h2 class="simplebox-title">Title</h2>' +\r
+                                       '<div class="simplebox-content"><p>Content...</p></div>' +\r
+                               '</div>',\r
+\r
+                       // Define the label for a widget toolbar button which will be automatically\r
+                       // created by the Widgets System. This button will insert a new widget instance\r
+                       // created from the template defined above, or will edit selected widget\r
+                       // (see second part of this tutorial to learn about editing widgets).\r
+                       //\r
+                       // Note: In order to be able to translate your widget you should use the\r
+                       // editor.lang.simplebox.* property. A string was used directly here to simplify this tutorial.\r
+                       button: 'Create a simple box',\r
+\r
+                       // Set the widget dialog window name. This enables the automatic widget-dialog binding.\r
+                       // This dialog window will be opened when creating a new widget or editing an existing one.\r
+                       dialog: 'simplebox',\r
+\r
+                       // Check the elements that need to be converted to widgets.\r
+                       //\r
+                       // Note: The "element" argument is an instance of http://docs.ckeditor.com/#!/api/CKEDITOR.htmlParser.element\r
+                       // so it is not a real DOM element yet. This is caused by the fact that upcasting is performed\r
+                       // during data processing which is done on DOM represented by JavaScript objects.\r
+                       upcast: function( element ) {\r
+                               // Return "true" (that element needs to converted to a Simple Box widget)\r
+                               // for all <div> elements with a "simplebox" class.\r
+                               return element.name == 'div' && element.hasClass( 'simplebox' );\r
+                       },\r
+\r
+                       // When a widget is being initialized, we need to read the data ("align" and "width")\r
+                       // from DOM and set it by using the widget.setData() method.\r
+                       // More code which needs to be executed when DOM is available may go here.\r
+                       init: function() {\r
+                               var width = this.element.getStyle( 'width' );\r
+                               if ( width )\r
+                                       this.setData( 'width', width );\r
+\r
+                               if ( this.element.hasClass( 'align-left' ) )\r
+                                       this.setData( 'align', 'left' );\r
+                               if ( this.element.hasClass( 'align-right' ) )\r
+                                       this.setData( 'align', 'right' );\r
+                               if ( this.element.hasClass( 'align-center' ) )\r
+                                       this.setData( 'align', 'center' );\r
+                       },\r
+\r
+                       // Listen on the widget#data event which is fired every time the widget data changes\r
+                       // and updates the widget's view.\r
+                       // Data may be changed by using the widget.setData() method, which we use in the\r
+                       // Simple Box dialog window.\r
+                       data: function() {\r
+                               // Check whether "width" widget data is set and remove or set "width" CSS style.\r
+                               // The style is set on widget main element (div.simplebox).\r
+                               if ( !this.data.width )\r
+                                       this.element.removeStyle( 'width' );\r
+                               else\r
+                                       this.element.setStyle( 'width', this.data.width );\r
+\r
+                               // Brutally remove all align classes and set a new one if "align" widget data is set.\r
+                               this.element.removeClass( 'align-left' );\r
+                               this.element.removeClass( 'align-right' );\r
+                               this.element.removeClass( 'align-center' );\r
+                               if ( this.data.align )\r
+                                       this.element.addClass( 'align-' + this.data.align );\r
+                       }\r
+               } );\r
+       }\r
+} );\r