aboutsummaryrefslogtreecommitdiff
path: root/sources/plugins/widget
diff options
context:
space:
mode:
authorIsmaël Bouya <ismael.bouya@normalesup.org>2017-01-20 00:55:51 +0100
committerIsmaël Bouya <ismael.bouya@normalesup.org>2017-01-20 00:55:51 +0100
commitc63493c899de714b05b0521bb38aab60d19030ef (patch)
treefcb2b261afa0f3c2bd6b48929b64724c71192bae /sources/plugins/widget
downloadludivine-ckeditor-component-c63493c899de714b05b0521bb38aab60d19030ef.tar.gz
ludivine-ckeditor-component-c63493c899de714b05b0521bb38aab60d19030ef.tar.zst
ludivine-ckeditor-component-c63493c899de714b05b0521bb38aab60d19030ef.zip
Validation initiale4.6.2.1
Diffstat (limited to 'sources/plugins/widget')
-rw-r--r--sources/plugins/widget/dev/assets/contents.css23
-rw-r--r--sources/plugins/widget/dev/assets/sample.jpgbin0 -> 17932 bytes
-rw-r--r--sources/plugins/widget/dev/assets/simplebox/contents.css36
-rw-r--r--sources/plugins/widget/dev/assets/simplebox/dialogs/simplebox.js51
-rw-r--r--sources/plugins/widget/dev/assets/simplebox/icons/simplebox.pngbin0 -> 286 bytes
-rw-r--r--sources/plugins/widget/dev/assets/simplebox/plugin.js114
-rw-r--r--sources/plugins/widget/dev/console.js131
-rw-r--r--sources/plugins/widget/dev/nestedwidgets.html134
-rw-r--r--sources/plugins/widget/dev/widgetstyles.html144
-rw-r--r--sources/plugins/widget/images/handle.pngbin0 -> 220 bytes
-rw-r--r--sources/plugins/widget/lang/af.js8
-rw-r--r--sources/plugins/widget/lang/ar.js8
-rw-r--r--sources/plugins/widget/lang/az.js8
-rw-r--r--sources/plugins/widget/lang/bg.js8
-rw-r--r--sources/plugins/widget/lang/ca.js8
-rw-r--r--sources/plugins/widget/lang/cs.js8
-rw-r--r--sources/plugins/widget/lang/cy.js8
-rw-r--r--sources/plugins/widget/lang/da.js8
-rw-r--r--sources/plugins/widget/lang/de-ch.js8
-rw-r--r--sources/plugins/widget/lang/de.js8
-rw-r--r--sources/plugins/widget/lang/el.js8
-rw-r--r--sources/plugins/widget/lang/en-gb.js8
-rw-r--r--sources/plugins/widget/lang/en.js8
-rw-r--r--sources/plugins/widget/lang/eo.js8
-rw-r--r--sources/plugins/widget/lang/es.js8
-rw-r--r--sources/plugins/widget/lang/eu.js8
-rw-r--r--sources/plugins/widget/lang/fa.js8
-rw-r--r--sources/plugins/widget/lang/fi.js8
-rw-r--r--sources/plugins/widget/lang/fr.js8
-rw-r--r--sources/plugins/widget/lang/gl.js8
-rw-r--r--sources/plugins/widget/lang/he.js8
-rw-r--r--sources/plugins/widget/lang/hr.js8
-rw-r--r--sources/plugins/widget/lang/hu.js8
-rw-r--r--sources/plugins/widget/lang/id.js8
-rw-r--r--sources/plugins/widget/lang/it.js8
-rw-r--r--sources/plugins/widget/lang/ja.js8
-rw-r--r--sources/plugins/widget/lang/km.js8
-rw-r--r--sources/plugins/widget/lang/ko.js8
-rw-r--r--sources/plugins/widget/lang/ku.js8
-rw-r--r--sources/plugins/widget/lang/lv.js8
-rw-r--r--sources/plugins/widget/lang/nb.js8
-rw-r--r--sources/plugins/widget/lang/nl.js8
-rw-r--r--sources/plugins/widget/lang/no.js8
-rw-r--r--sources/plugins/widget/lang/oc.js8
-rw-r--r--sources/plugins/widget/lang/pl.js8
-rw-r--r--sources/plugins/widget/lang/pt-br.js8
-rw-r--r--sources/plugins/widget/lang/pt.js8
-rw-r--r--sources/plugins/widget/lang/ru.js8
-rw-r--r--sources/plugins/widget/lang/sk.js8
-rw-r--r--sources/plugins/widget/lang/sl.js8
-rw-r--r--sources/plugins/widget/lang/sq.js8
-rw-r--r--sources/plugins/widget/lang/sv.js8
-rw-r--r--sources/plugins/widget/lang/tr.js8
-rw-r--r--sources/plugins/widget/lang/tt.js8
-rw-r--r--sources/plugins/widget/lang/ug.js8
-rw-r--r--sources/plugins/widget/lang/uk.js8
-rw-r--r--sources/plugins/widget/lang/vi.js8
-rw-r--r--sources/plugins/widget/lang/zh-cn.js8
-rw-r--r--sources/plugins/widget/lang/zh.js8
-rw-r--r--sources/plugins/widget/plugin.js4126
60 files changed, 5151 insertions, 0 deletions
diff --git a/sources/plugins/widget/dev/assets/contents.css b/sources/plugins/widget/dev/assets/contents.css
new file mode 100644
index 0000000..2cff316
--- /dev/null
+++ b/sources/plugins/widget/dev/assets/contents.css
@@ -0,0 +1,23 @@
1.mediumBorder {
2 border-width: 2px;
3}
4.thickBorder {
5 border-width: 5px;
6}
7img.thickBorder, img.mediumBorder {
8 border-style: solid;
9 border-color: #CCC;
10}
11.important.soMuch {
12 margin: 25px;
13 padding: 25px;
14 background: red;
15 border: none;
16}
17
18span.redMarker {
19 background-color: red;
20}
21.invisible {
22 opacity: 0.1;
23}
diff --git a/sources/plugins/widget/dev/assets/sample.jpg b/sources/plugins/widget/dev/assets/sample.jpg
new file mode 100644
index 0000000..a4a77fa
--- /dev/null
+++ b/sources/plugins/widget/dev/assets/sample.jpg
Binary files differ
diff --git a/sources/plugins/widget/dev/assets/simplebox/contents.css b/sources/plugins/widget/dev/assets/simplebox/contents.css
new file mode 100644
index 0000000..ddf3675
--- /dev/null
+++ b/sources/plugins/widget/dev/assets/simplebox/contents.css
@@ -0,0 +1,36 @@
1.simplebox {
2 padding: 8px;
3 margin: 10px;
4 background: #eee;
5 border-radius: 8px;
6 border: 1px solid #ddd;
7 box-shadow: 0 1px 1px #fff inset, 0 -1px 0px #ccc inset;
8}
9.simplebox-title, .simplebox-content {
10 box-shadow: 0 1px 1px #ddd inset;
11 border: 1px solid #cccccc;
12 border-radius: 5px;
13 background: #fff;
14}
15.simplebox-title {
16 margin: 0 0 8px;
17 padding: 5px 8px;
18}
19.simplebox-content {
20 padding: 0 8px;
21}
22.simplebox-content::after {
23 content: '';
24 display: block;
25 clear: both;
26}
27.simplebox.align-right {
28 float: right;
29}
30.simplebox.align-left {
31 float: left;
32}
33.simplebox.align-center {
34 margin-left: auto;
35 margin-right: auto;
36}
diff --git a/sources/plugins/widget/dev/assets/simplebox/dialogs/simplebox.js b/sources/plugins/widget/dev/assets/simplebox/dialogs/simplebox.js
new file mode 100644
index 0000000..45a150c
--- /dev/null
+++ b/sources/plugins/widget/dev/assets/simplebox/dialogs/simplebox.js
@@ -0,0 +1,51 @@
1// Note: This automatic widget to dialog window binding (the fact that every field is set up from the widget
2// and is committed to the widget) is only possible when the dialog is opened by the Widgets System
3// (i.e. the widgetDef.dialog property is set).
4// When you are opening the dialog window by yourself, you need to take care of this by yourself too.
5
6CKEDITOR.dialog.add( 'simplebox', function( editor ) {
7 return {
8 title: 'Edit Simple Box',
9 minWidth: 200,
10 minHeight: 100,
11 contents: [
12 {
13 id: 'info',
14 elements: [
15 {
16 id: 'align',
17 type: 'select',
18 label: 'Align',
19 items: [
20 [ editor.lang.common.notSet, '' ],
21 [ editor.lang.common.alignLeft, 'left' ],
22 [ editor.lang.common.alignRight, 'right' ],
23 [ editor.lang.common.alignCenter, 'center' ]
24 ],
25 // When setting up this field, set its value to the "align" value from widget data.
26 // Note: Align values used in the widget need to be the same as those defined in the "items" array above.
27 setup: function( widget ) {
28 this.setValue( widget.data.align );
29 },
30 // When committing (saving) this field, set its value to the widget data.
31 commit: function( widget ) {
32 widget.setData( 'align', this.getValue() );
33 }
34 },
35 {
36 id: 'width',
37 type: 'text',
38 label: 'Width',
39 width: '50px',
40 setup: function( widget ) {
41 this.setValue( widget.data.width );
42 },
43 commit: function( widget ) {
44 widget.setData( 'width', this.getValue() );
45 }
46 }
47 ]
48 }
49 ]
50 };
51} );
diff --git a/sources/plugins/widget/dev/assets/simplebox/icons/simplebox.png b/sources/plugins/widget/dev/assets/simplebox/icons/simplebox.png
new file mode 100644
index 0000000..6a5e313
--- /dev/null
+++ b/sources/plugins/widget/dev/assets/simplebox/icons/simplebox.png
Binary files differ
diff --git a/sources/plugins/widget/dev/assets/simplebox/plugin.js b/sources/plugins/widget/dev/assets/simplebox/plugin.js
new file mode 100644
index 0000000..43dbad5
--- /dev/null
+++ b/sources/plugins/widget/dev/assets/simplebox/plugin.js
@@ -0,0 +1,114 @@
1'use strict';
2
3// Register the plugin within the editor.
4CKEDITOR.plugins.add( 'simplebox', {
5 // This plugin requires the Widgets System defined in the 'widget' plugin.
6 requires: 'widget',
7
8 // Register the icon used for the toolbar button. It must be the same
9 // as the name of the widget.
10 icons: 'simplebox',
11
12 // The plugin initialization logic goes inside this method.
13 init: function( editor ) {
14 // Register the editing dialog.
15 CKEDITOR.dialog.add( 'simplebox', this.path + 'dialogs/simplebox.js' );
16
17 // Register the simplebox widget.
18 editor.widgets.add( 'simplebox', {
19 // Allow all HTML elements, classes, and styles that this widget requires.
20 // Read more about the Advanced Content Filter here:
21 // * http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
22 // * http://docs.ckeditor.com/#!/guide/plugin_sdk_integration_with_acf
23 allowedContent:
24 'div(!simplebox,align-left,align-right,align-center){width};' +
25 'div(!simplebox-content); h2(!simplebox-title)',
26
27 // Minimum HTML which is required by this widget to work.
28 requiredContent: 'div(simplebox)',
29
30 // Define two nested editable areas.
31 editables: {
32 title: {
33 // Define CSS selector used for finding the element inside widget element.
34 selector: '.simplebox-title',
35 // Define content allowed in this nested editable. Its content will be
36 // filtered accordingly and the toolbar will be adjusted when this editable
37 // is focused.
38 allowedContent: 'br strong em'
39 },
40 content: {
41 selector: '.simplebox-content'
42 }
43 },
44
45 // Define the template of a new Simple Box widget.
46 // The template will be used when creating new instances of the Simple Box widget.
47 template:
48 '<div class="simplebox">' +
49 '<h2 class="simplebox-title">Title</h2>' +
50 '<div class="simplebox-content"><p>Content...</p></div>' +
51 '</div>',
52
53 // Define the label for a widget toolbar button which will be automatically
54 // created by the Widgets System. This button will insert a new widget instance
55 // created from the template defined above, or will edit selected widget
56 // (see second part of this tutorial to learn about editing widgets).
57 //
58 // Note: In order to be able to translate your widget you should use the
59 // editor.lang.simplebox.* property. A string was used directly here to simplify this tutorial.
60 button: 'Create a simple box',
61
62 // Set the widget dialog window name. This enables the automatic widget-dialog binding.
63 // This dialog window will be opened when creating a new widget or editing an existing one.
64 dialog: 'simplebox',
65
66 // Check the elements that need to be converted to widgets.
67 //
68 // Note: The "element" argument is an instance of http://docs.ckeditor.com/#!/api/CKEDITOR.htmlParser.element
69 // so it is not a real DOM element yet. This is caused by the fact that upcasting is performed
70 // during data processing which is done on DOM represented by JavaScript objects.
71 upcast: function( element ) {
72 // Return "true" (that element needs to converted to a Simple Box widget)
73 // for all <div> elements with a "simplebox" class.
74 return element.name == 'div' && element.hasClass( 'simplebox' );
75 },
76
77 // When a widget is being initialized, we need to read the data ("align" and "width")
78 // from DOM and set it by using the widget.setData() method.
79 // More code which needs to be executed when DOM is available may go here.
80 init: function() {
81 var width = this.element.getStyle( 'width' );
82 if ( width )
83 this.setData( 'width', width );
84
85 if ( this.element.hasClass( 'align-left' ) )
86 this.setData( 'align', 'left' );
87 if ( this.element.hasClass( 'align-right' ) )
88 this.setData( 'align', 'right' );
89 if ( this.element.hasClass( 'align-center' ) )
90 this.setData( 'align', 'center' );
91 },
92
93 // Listen on the widget#data event which is fired every time the widget data changes
94 // and updates the widget's view.
95 // Data may be changed by using the widget.setData() method, which we use in the
96 // Simple Box dialog window.
97 data: function() {
98 // Check whether "width" widget data is set and remove or set "width" CSS style.
99 // The style is set on widget main element (div.simplebox).
100 if ( !this.data.width )
101 this.element.removeStyle( 'width' );
102 else
103 this.element.setStyle( 'width', this.data.width );
104
105 // Brutally remove all align classes and set a new one if "align" widget data is set.
106 this.element.removeClass( 'align-left' );
107 this.element.removeClass( 'align-right' );
108 this.element.removeClass( 'align-center' );
109 if ( this.data.align )
110 this.element.addClass( 'align-' + this.data.align );
111 }
112 } );
113 }
114} );
diff --git a/sources/plugins/widget/dev/console.js b/sources/plugins/widget/dev/console.js
new file mode 100644
index 0000000..78db0d0
--- /dev/null
+++ b/sources/plugins/widget/dev/console.js
@@ -0,0 +1,131 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5
6/* global CKCONSOLE */
7
8'use strict';
9
10( function() {
11
12 CKCONSOLE.add( 'widget', {
13 panels: [
14 {
15 type: 'box',
16 content: '<ul class="ckconsole_list ckconsole_value" data-value="instances"></ul>',
17
18 refresh: function( editor ) {
19 var instances = obj2Array( editor.widgets.instances );
20
21 return {
22 header: 'Instances (' + instances.length + ')',
23 instances: generateInstancesList( instances )
24 };
25 },
26
27 refreshOn: function( editor, refresh ) {
28 editor.widgets.on( 'instanceCreated', function( evt ) {
29 refresh();
30
31 evt.data.on( 'data', refresh );
32 } );
33
34 editor.widgets.on( 'instanceDestroyed', refresh );
35 }
36 },
37
38 {
39 type: 'box',
40 content:
41 '<ul class="ckconsole_list">' +
42 '<li>focused: <span class="ckconsole_value" data-value="focused"></span></li>' +
43 '<li>selected: <span class="ckconsole_value" data-value="selected"></span></li>' +
44 '</ul>',
45
46 refresh: function( editor ) {
47 var focused = editor.widgets.focused,
48 selected = editor.widgets.selected,
49 selectedIds = [];
50
51 for ( var i = 0; i < selected.length; ++i )
52 selectedIds.push( selected[ i ].id );
53
54 return {
55 header: 'Focus &amp; selection',
56 focused: focused ? 'id: ' + focused.id : '-',
57 selected: selectedIds.length ? 'id: ' + selectedIds.join( ', id: ' ) : '-'
58 };
59 },
60
61 refreshOn: function( editor, refresh ) {
62 editor.on( 'selectionCheck', refresh, null, null, 999 );
63 }
64 },
65
66 {
67 type: 'log',
68
69 on: function( editor, log, logFn ) {
70 // Add all listeners with high priorities to log
71 // messages in the correct order when one event depends on another.
72 // E.g. selectionChange triggers widget selection - if this listener
73 // for selectionChange will be executed later than that one, then order
74 // will be incorrect.
75
76 editor.on( 'selectionChange', function( evt ) {
77 var msg = 'selection change',
78 sel = evt.data.selection,
79 el = sel.getSelectedElement(),
80 widget;
81
82 if ( el && ( widget = editor.widgets.getByElement( el, true ) ) )
83 msg += ' (id: ' + widget.id + ')';
84
85 log( msg );
86 }, null, null, 1 );
87
88 editor.widgets.on( 'instanceDestroyed', function( evt ) {
89 log( 'instance destroyed (id: ' + evt.data.id + ')' );
90 }, null, null, 1 );
91
92 editor.widgets.on( 'instanceCreated', function( evt ) {
93 log( 'instance created (id: ' + evt.data.id + ')' );
94 }, null, null, 1 );
95
96 editor.widgets.on( 'widgetFocused', function( evt ) {
97 log( 'widget focused (id: ' + evt.data.widget.id + ')' );
98 }, null, null, 1 );
99
100 editor.widgets.on( 'widgetBlurred', function( evt ) {
101 log( 'widget blurred (id: ' + evt.data.widget.id + ')' );
102 }, null, null, 1 );
103
104 editor.widgets.on( 'checkWidgets', logFn( 'checking widgets' ), null, null, 1 );
105 editor.widgets.on( 'checkSelection', logFn( 'checking selection' ), null, null, 1 );
106 }
107 }
108 ]
109 } );
110
111 function generateInstancesList( instances ) {
112 var html = '',
113 instance;
114
115 for ( var i = 0; i < instances.length; ++i ) {
116 instance = instances[ i ];
117 html += itemTpl.output( { id: instance.id, name: instance.name, data: JSON.stringify( instance.data ) } );
118 }
119 return html;
120 }
121
122 function obj2Array( obj ) {
123 var arr = [];
124 for ( var id in obj )
125 arr.push( obj[ id ] );
126
127 return arr;
128 }
129
130 var itemTpl = new CKEDITOR.template( '<li>id: <code>{id}</code>, name: <code>{name}</code>, data: <code>{data}</code></li>' );
131} )();
diff --git a/sources/plugins/widget/dev/nestedwidgets.html b/sources/plugins/widget/dev/nestedwidgets.html
new file mode 100644
index 0000000..0686d2c
--- /dev/null
+++ b/sources/plugins/widget/dev/nestedwidgets.html
@@ -0,0 +1,134 @@
1<!DOCTYPE html>
2<!--
3Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
4For licensing, see LICENSE.md or http://ckeditor.com/license
5-->
6<html>
7<head>
8 <meta charset="utf-8">
9 <title>Nested widgets &mdash; CKEditor Sample</title>
10 <script src="../../../ckeditor.js"></script>
11 <script src="../../../dev/console/console.js"></script>
12 <script src="../../../dev/console/focusconsole.js"></script>
13 <script src="console.js"></script>
14 <link rel="stylesheet" href="../../../samples/old/sample.css">
15 <link rel="stylesheet" href="../../../contents.css">
16 <link rel="stylesheet" href="assets/simplebox/contents.css">
17</head>
18<body>
19 <h1 class="samples">Nested widgets</h1>
20
21 <h2>Classic (iframe-based) Sample</h2>
22 <textarea cols="80" id="editor1" name="editor1" rows="10">
23 <h1>Simple Box Sample</h1>
24
25 <div class="simplebox align-right" style="width: 60%">
26 <h2 class="simplebox-title">Title</h2>
27 <div class="simplebox-content">
28 <p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on [[July 20, 1969, at 20:18 UTC]]. Armstrong became the first to step onto the lunar surface 6 hours later on [[July 21 at 02:56 UTC]].</p>
29
30 <figure class="image" style="float: right">
31 <img alt="The Eagle" src="assets/sample.jpg" width="150" />
32 <figcaption>The Eagle in lunar orbit</figcaption>
33 </figure>
34
35 <ul>
36 <li>Foo!</li>
37 <li>Bar!</li>
38 </ul>
39
40 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci ut nisi adipiscing ultrices. Sed pellentesque iaculis malesuada. Pellentesque scelerisque, purus non porta dictum, neque urna bibendum dolor, eget tristique ipsum metus fringilla dolor. Nullam sed accumsan sapien. Vestibulum in placerat magna. Sed justo lacus, volutpat rhoncus odio luctus, ornare adipiscing mauris. Vivamus erat sem, egestas et lectus eget, varius cursus odio. Duis posuere lacus sit amet urna bibendum, id iaculis eros ultrices. Vestibulum a ultrices ante.</p>
41 </div>
42 </div>
43
44 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci ut nisi adipiscing ultrices. Sed pellentesque iaculis malesuada. Pellentesque scelerisque, purus non porta dictum, neque urna bibendum dolor, eget tristique ipsum metus fringilla dolor. Nullam sed accumsan sapien. Vestibulum in placerat magna. Sed justo lacus, volutpat rhoncus odio luctus, ornare adipiscing mauris. Vivamus erat sem, egestas et lectus eget, varius cursus odio. Duis posuere lacus sit amet urna bibendum, id iaculis eros ultrices. Vestibulum a ultrices ante.</p>
45
46 <p>Pellentesque vitae eleifend nisl, non accumsan tellus. Maecenas nec libero non tellus tincidunt mollis porttitor sed arcu. Donec ultricies nulla vitae eros lacinia, vel congue sem auctor. Vivamus convallis, urna ac tincidunt malesuada, lectus erat convallis metus, a hendrerit massa augue accumsan magna. Nulla mattis tellus elit, nec congue magna scelerisque eget. Aliquam posuere nisi augue, posuere sodales nisi iaculis eu. Donec fermentum urna id nibh sagittis fermentum sit amet sed enim. Aliquam neque elit, pretium elementum nunc a, faucibus accumsan lorem. Etiam pulvinar odio et hendrerit tincidunt. Suspendisse tempus eros lacus, in convallis velit mollis ut. Aenean congue, justo eleifend ultricies malesuada, nunc nunc molestie mauris, eget placerat libero eros vel nisi. Quisque diam arcu, mollis ac laoreet vitae, varius et sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis in vehicula sapien. Nunc feugiat porta elit nec volutpat.</p>
47
48 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci ut nisi adipiscing ultrices. Sed pellentesque iaculis malesuada. Pellentesque scelerisque, purus non porta dictum, neque urna bibendum dolor, eget tristique ipsum metus fringilla dolor. Nullam sed accumsan sapien. Vestibulum in placerat magna. Sed justo lacus, volutpat rhoncus odio luctus, ornare adipiscing mauris. Vivamus erat sem, egestas et lectus eget, varius cursus odio. Duis posuere lacus sit amet urna bibendum, id iaculis eros ultrices. Vestibulum a ultrices ante.</p>
49
50 <div class="simplebox align-center" style="width: 750px">
51 <h2 class="simplebox-title">Title</h2>
52 <div class="simplebox-content">
53 <p><img alt="The Eagle" src="assets/sample.jpg" width="150" style="float: left" /><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on [[July 20, 1969, at 20:18 UTC]]. Armstrong became the first to step onto the lunar surface 6 hours later on [[July 21 at 02:56 UTC]].</p>
54
55 <ul>
56 <li>Foo!</li>
57 <li>Bar!</li>
58 </ul>
59 </div>
60 </div>
61
62 <p>Ut eget ipsum a sapien porta ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus mi lacus, pharetra eu bibendum blandit, tristique sit amet leo. Integer eu nulla nec magna vulputate blandit. Praesent mattis quis ante eget adipiscing. Nulla vel tempus risus, in placerat velit. Mauris sed nibh at elit posuere laoreet. Morbi non sapien sed nunc fringilla imperdiet.</p>
63 </textarea>
64
65 <h2>Inline Sample</h2>
66 <div id="editor2" contenteditable="true">
67 <h1>Simple Box Sample</h1>
68
69 <div class="simplebox align-right" style="width: 60%">
70 <h2 class="simplebox-title">Title</h2>
71 <div class="simplebox-content">
72 <p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on [[July 20, 1969, at 20:18 UTC]]. Armstrong became the first to step onto the lunar surface 6 hours later on [[July 21 at 02:56 UTC]].</p>
73
74 <figure class="image" style="float: right">
75 <img alt="The Eagle" src="assets/sample.jpg" width="150" />
76 <figcaption>The Eagle in lunar orbit</figcaption>
77 </figure>
78
79 <ul>
80 <li>Foo!</li>
81 <li>Bar!</li>
82 </ul>
83
84 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci ut nisi adipiscing ultrices. Sed pellentesque iaculis malesuada. Pellentesque scelerisque, purus non porta dictum, neque urna bibendum dolor, eget tristique ipsum metus fringilla dolor. Nullam sed accumsan sapien. Vestibulum in placerat magna. Sed justo lacus, volutpat rhoncus odio luctus, ornare adipiscing mauris. Vivamus erat sem, egestas et lectus eget, varius cursus odio. Duis posuere lacus sit amet urna bibendum, id iaculis eros ultrices. Vestibulum a ultrices ante.</p>
85 </div>
86 </div>
87
88 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci ut nisi adipiscing ultrices. Sed pellentesque iaculis malesuada. Pellentesque scelerisque, purus non porta dictum, neque urna bibendum dolor, eget tristique ipsum metus fringilla dolor. Nullam sed accumsan sapien. Vestibulum in placerat magna. Sed justo lacus, volutpat rhoncus odio luctus, ornare adipiscing mauris. Vivamus erat sem, egestas et lectus eget, varius cursus odio. Duis posuere lacus sit amet urna bibendum, id iaculis eros ultrices. Vestibulum a ultrices ante.</p>
89
90 <p>Pellentesque vitae eleifend nisl, non accumsan tellus. Maecenas nec libero non tellus tincidunt mollis porttitor sed arcu. Donec ultricies nulla vitae eros lacinia, vel congue sem auctor. Vivamus convallis, urna ac tincidunt malesuada, lectus erat convallis metus, a hendrerit massa augue accumsan magna. Nulla mattis tellus elit, nec congue magna scelerisque eget. Aliquam posuere nisi augue, posuere sodales nisi iaculis eu. Donec fermentum urna id nibh sagittis fermentum sit amet sed enim. Aliquam neque elit, pretium elementum nunc a, faucibus accumsan lorem. Etiam pulvinar odio et hendrerit tincidunt. Suspendisse tempus eros lacus, in convallis velit mollis ut. Aenean congue, justo eleifend ultricies malesuada, nunc nunc molestie mauris, eget placerat libero eros vel nisi. Quisque diam arcu, mollis ac laoreet vitae, varius et sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis in vehicula sapien. Nunc feugiat porta elit nec volutpat.</p>
91
92 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci ut nisi adipiscing ultrices. Sed pellentesque iaculis malesuada. Pellentesque scelerisque, purus non porta dictum, neque urna bibendum dolor, eget tristique ipsum metus fringilla dolor. Nullam sed accumsan sapien. Vestibulum in placerat magna. Sed justo lacus, volutpat rhoncus odio luctus, ornare adipiscing mauris. Vivamus erat sem, egestas et lectus eget, varius cursus odio. Duis posuere lacus sit amet urna bibendum, id iaculis eros ultrices. Vestibulum a ultrices ante.</p>
93
94 <div class="simplebox align-center" style="width: 750px">
95 <h2 class="simplebox-title">Title</h2>
96 <div class="simplebox-content">
97 <p><img alt="The Eagle" src="assets/sample.jpg" width="150" style="float: left" /><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on [[July 20, 1969, at 20:18 UTC]]. Armstrong became the first to step onto the lunar surface 6 hours later on [[July 21 at 02:56 UTC]].</p>
98
99 <ul>
100 <li>Foo!</li>
101 <li>Bar!</li>
102 </ul>
103 </div>
104 </div>
105
106 <p>Ut eget ipsum a sapien porta ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus mi lacus, pharetra eu bibendum blandit, tristique sit amet leo. Integer eu nulla nec magna vulputate blandit. Praesent mattis quis ante eget adipiscing. Nulla vel tempus risus, in placerat velit. Mauris sed nibh at elit posuere laoreet. Morbi non sapien sed nunc fringilla imperdiet.</p>
107 </div>
108
109 <script>
110 if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 )
111 CKEDITOR.tools.enableHtml5Elements( document );
112
113 CKEDITOR.plugins.addExternal( 'simplebox', 'plugins/widget/dev/assets/simplebox/' );
114
115 CKEDITOR.replace( 'editor1', {
116 extraPlugins: 'simplebox,placeholder,image2',
117 removePlugins: 'forms,bidi',
118 contentsCss: [ '../../../contents.css', 'assets/simplebox/contents.css' ],
119 height: 500
120 } );
121
122 CKEDITOR.inline( 'editor2', {
123 extraPlugins: 'simplebox,placeholder,image2',
124 removePlugins: 'forms,bidi'
125 } );
126
127 CKCONSOLE.create( 'widget', { editor: 'editor1' } );
128 CKCONSOLE.create( 'focus', { editor: 'editor1' } );
129 CKCONSOLE.create( 'widget', { editor: 'editor2', folded: true } );
130 CKCONSOLE.create( 'focus', { editor: 'editor2', folded: true } );
131
132 </script>
133</body>
134</html>
diff --git a/sources/plugins/widget/dev/widgetstyles.html b/sources/plugins/widget/dev/widgetstyles.html
new file mode 100644
index 0000000..8e54b8d
--- /dev/null
+++ b/sources/plugins/widget/dev/widgetstyles.html
@@ -0,0 +1,144 @@
1<!DOCTYPE html>
2<!--
3Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
4For licensing, see LICENSE.md or http://ckeditor.com/license
5-->
6<html>
7<head>
8 <meta charset="utf-8">
9 <title>Applying styles to widgets &mdash; CKEditor Sample</title>
10 <script src="../../../ckeditor.js"></script>
11 <link rel="stylesheet" href="../../../samples/old/sample.css">
12 <link rel="stylesheet" href="../../../contents.css">
13 <link rel="stylesheet" href="assets/contents.css">
14</head>
15<body>
16 <h1 class="samples">Applying styles to widgets</h1>
17
18 <h2>Classic (iframe-based) Sample</h2>
19 <textarea cols="80" id="editor1" name="editor1" rows="10">
20 <h1>Apollo 11</h1>
21
22 <figure class="image" style="float: right">
23 <img alt="Saturn V" src="../../../samples/assets/sample.jpg" width="150" />
24 <figcaption>Roll out of Saturn V on launch pad</figcaption>
25 </figure>
26
27 <p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on [[July 20, 1969, at 20:18 UTC]]. Armstrong became the first to step onto the lunar surface 6 hours later on [[July 21 at 02:56 UTC]].</p>
28
29 <p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)" title="Michael Collins (astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module" title="Apollo Command/Service Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.</p>
30
31 <h2>Broadcasting and <em>quotes</em> <a id="quotes" name="quotes"></a></h2>
32
33 <p>Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:</p>
34
35 <blockquote>
36 <p>One small step for [a] man, one giant leap for mankind.</p>
37 </blockquote>
38
39 <p><span class="math-tex">\( \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \)</span></p>
40
41 <p>Apollo 11 effectively ended the <a href="http://en.wikipedia.org/wiki/Space_Race" title="Space Race">Space Race</a> and fulfilled a national goal proposed in 1961 by the late U.S. President <a href="http://en.wikipedia.org/wiki/John_F._Kennedy" title="John F. Kennedy">John F. Kennedy</a> in a speech before the United States Congress:</p>
42
43 <blockquote>
44 <p>[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.</p>
45 </blockquote>
46
47 <figure class="image" style="float: right">
48 <img alt="The Eagle" src="../../../samples/assets/sample.jpg" width="150" />
49 <figcaption>The Eagle in lunar orbit</figcaption>
50 </figure>
51
52 <h2>Technical details <a id="tech-details" name="tech-details"></a></h2>
53
54 <p>Launched by a <strong>Saturn V</strong> rocket from <a href="http://en.wikipedia.org/wiki/Kennedy_Space_Center" title="Kennedy Space Center">Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href="http://en.wikipedia.org/wiki/NASA" title="NASA">NASA</a>&#39;s Apollo program. The Apollo spacecraft had three parts:</p>
55
56 <ol>
57 <li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li>
58 <li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li>
59 <li><strong>Lunar Module</strong> for landing on the Moon.</li>
60 </ol>
61
62 <p>After being sent to the Moon by the Saturn V&#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href="http://en.wikipedia.org/wiki/Mare_Tranquillitatis" title="Mare Tranquillitatis">Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href="http://en.wikipedia.org/wiki/Pacific_Ocean" title="Pacific Ocean">Pacific Ocean</a> on July 24.</p>
63 </textarea>
64
65 <h2>Inline Sample</h2>
66 <div id="editor2" contenteditable="true">
67 <h1>Apollo 11</h1>
68
69 <figure class="image" style="float: right">
70 <img alt="Saturn V" src="../../../samples/assets/sample.jpg" width="150" />
71 <figcaption>Roll out of Saturn V on launch pad</figcaption>
72 </figure>
73
74 <p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on [[July 20, 1969, at 20:18 UTC]]. Armstrong became the first to step onto the lunar surface 6 hours later on [[July 21 at 02:56 UTC]].</p>
75
76 <p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)" title="Michael Collins (astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module" title="Apollo Command/Service Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.</p>
77
78 <h2>Broadcasting and <em>quotes</em> <a id="quotes" name="quotes"></a></h2>
79
80 <p>Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:</p>
81
82 <blockquote>
83 <p>One small step for [a] man, one giant leap for mankind.</p>
84 </blockquote>
85
86 <p><span class="math-tex">\( \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \)</span></p>
87
88 <p>Apollo 11 effectively ended the <a href="http://en.wikipedia.org/wiki/Space_Race" title="Space Race">Space Race</a> and fulfilled a national goal proposed in 1961 by the late U.S. President <a href="http://en.wikipedia.org/wiki/John_F._Kennedy" title="John F. Kennedy">John F. Kennedy</a> in a speech before the United States Congress:</p>
89
90 <blockquote>
91 <p>[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.</p>
92 </blockquote>
93
94 <figure class="image" style="float: right">
95 <img alt="The Eagle" src="../../../samples/assets/sample.jpg" width="150" />
96 <figcaption>The Eagle in lunar orbit</figcaption>
97 </figure>
98
99 <h2>Technical details <a id="tech-details" name="tech-details"></a></h2>
100
101 <p>Launched by a <strong>Saturn V</strong> rocket from <a href="http://en.wikipedia.org/wiki/Kennedy_Space_Center" title="Kennedy Space Center">Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href="http://en.wikipedia.org/wiki/NASA" title="NASA">NASA</a>&#39;s Apollo program. The Apollo spacecraft had three parts:</p>
102
103 <ol>
104 <li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li>
105 <li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li>
106 <li><strong>Lunar Module</strong> for landing on the Moon.</li>
107 </ol>
108
109 <p>After being sent to the Moon by the Saturn V&#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href="http://en.wikipedia.org/wiki/Mare_Tranquillitatis" title="Mare Tranquillitatis">Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href="http://en.wikipedia.org/wiki/Pacific_Ocean" title="Pacific Ocean">Pacific Ocean</a> on July 24.</p>
110 </div>
111
112 <script>
113 if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 )
114 CKEDITOR.tools.enableHtml5Elements( document );
115
116 CKEDITOR.disableAutoInline = true;
117
118 var stylesSet = [
119 { name: 'Medium border', type: 'widget', widget: 'image', attributes: { 'class': 'mediumBorder' } },
120 { name: 'Thick border', type: 'widget', widget: 'image', attributes: { 'class': 'thickBorder' } },
121 { name: 'So important', type: 'widget', widget: 'image', attributes: { 'class': 'important soMuch' } },
122
123 { name: 'Red marker', type: 'widget', widget: 'placeholder', attributes: { 'class': 'redMarker' } },
124 { name: 'Invisible Placeholder', type: 'widget', widget: 'placeholder', attributes: { 'class': 'invisible' } },
125
126 { name: 'Invisible Mathjax', type: 'widget', widget: 'mathjax', attributes: { 'class': 'invisible' } }
127 ];
128
129 CKEDITOR.replace( 'editor1', {
130 extraPlugins: 'placeholder,image2,mathjax',
131 contentsCss: [ '../../../contents.css', 'assets/contents.css' ],
132 stylesSet: stylesSet,
133 height: 300
134 } );
135
136 CKEDITOR.inline( 'editor2', {
137 extraPlugins: 'placeholder,image2,mathjax',
138 stylesSet: stylesSet,
139 height: 300
140 } );
141
142 </script>
143</body>
144</html>
diff --git a/sources/plugins/widget/images/handle.png b/sources/plugins/widget/images/handle.png
new file mode 100644
index 0000000..ba8cda5
--- /dev/null
+++ b/sources/plugins/widget/images/handle.png
Binary files differ
diff --git a/sources/plugins/widget/lang/af.js b/sources/plugins/widget/lang/af.js
new file mode 100644
index 0000000..e37c598
--- /dev/null
+++ b/sources/plugins/widget/lang/af.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'af', {
6 'move': 'Klik en trek on te beweeg',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/ar.js b/sources/plugins/widget/lang/ar.js
new file mode 100644
index 0000000..0a4f8eb
--- /dev/null
+++ b/sources/plugins/widget/lang/ar.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'ar', {
6 'move': 'إضغط و إسحب للتحريك',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/az.js b/sources/plugins/widget/lang/az.js
new file mode 100644
index 0000000..24ddaf3
--- /dev/null
+++ b/sources/plugins/widget/lang/az.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'az', {
6 'move': 'Tıklayın və aparın',
7 'label': '%1 vidjet'
8} );
diff --git a/sources/plugins/widget/lang/bg.js b/sources/plugins/widget/lang/bg.js
new file mode 100644
index 0000000..9b51458
--- /dev/null
+++ b/sources/plugins/widget/lang/bg.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'bg', {
6 'move': 'Кликни и влачи, за да преместиш',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/ca.js b/sources/plugins/widget/lang/ca.js
new file mode 100644
index 0000000..f46a4f8
--- /dev/null
+++ b/sources/plugins/widget/lang/ca.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'ca', {
6 'move': 'Clicar i arrossegar per moure',
7 'label': '%1 widget'
8} );
diff --git a/sources/plugins/widget/lang/cs.js b/sources/plugins/widget/lang/cs.js
new file mode 100644
index 0000000..5d9590b
--- /dev/null
+++ b/sources/plugins/widget/lang/cs.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'cs', {
6 'move': 'Klepněte a táhněte pro přesunutí',
7 'label': 'Ovládací prvek %1'
8} );
diff --git a/sources/plugins/widget/lang/cy.js b/sources/plugins/widget/lang/cy.js
new file mode 100644
index 0000000..29dc110
--- /dev/null
+++ b/sources/plugins/widget/lang/cy.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'cy', {
6 'move': 'Clcio a llusgo i symud',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/da.js b/sources/plugins/widget/lang/da.js
new file mode 100644
index 0000000..8dfe785
--- /dev/null
+++ b/sources/plugins/widget/lang/da.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'da', {
6 'move': 'Klik og træk for at flytte',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/de-ch.js b/sources/plugins/widget/lang/de-ch.js
new file mode 100644
index 0000000..a95febb
--- /dev/null
+++ b/sources/plugins/widget/lang/de-ch.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'de-ch', {
6 'move': 'Zum Verschieben anwählen und ziehen',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/de.js b/sources/plugins/widget/lang/de.js
new file mode 100644
index 0000000..838ad89
--- /dev/null
+++ b/sources/plugins/widget/lang/de.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'de', {
6 'move': 'Zum Verschieben anwählen und ziehen',
7 'label': '%1 Steuerelement'
8} );
diff --git a/sources/plugins/widget/lang/el.js b/sources/plugins/widget/lang/el.js
new file mode 100644
index 0000000..863604a
--- /dev/null
+++ b/sources/plugins/widget/lang/el.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'el', {
6 'move': 'Κάνετε κλικ και σύρετε το ποντίκι για να μετακινήστε',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/en-gb.js b/sources/plugins/widget/lang/en-gb.js
new file mode 100644
index 0000000..ed09606
--- /dev/null
+++ b/sources/plugins/widget/lang/en-gb.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'en-gb', {
6 'move': 'Click and drag to move',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/en.js b/sources/plugins/widget/lang/en.js
new file mode 100644
index 0000000..5967f4d
--- /dev/null
+++ b/sources/plugins/widget/lang/en.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'en', {
6 'move': 'Click and drag to move',
7 'label': '%1 widget'
8} );
diff --git a/sources/plugins/widget/lang/eo.js b/sources/plugins/widget/lang/eo.js
new file mode 100644
index 0000000..f4979ac
--- /dev/null
+++ b/sources/plugins/widget/lang/eo.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'eo', {
6 'move': 'klaki kaj treni por movi',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/es.js b/sources/plugins/widget/lang/es.js
new file mode 100644
index 0000000..d8deb2c
--- /dev/null
+++ b/sources/plugins/widget/lang/es.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'es', {
6 'move': 'Dar clic y arrastrar para mover',
7 'label': 'reproductor %1'
8} );
diff --git a/sources/plugins/widget/lang/eu.js b/sources/plugins/widget/lang/eu.js
new file mode 100644
index 0000000..e128dfe
--- /dev/null
+++ b/sources/plugins/widget/lang/eu.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'eu', {
6 'move': 'Klikatu eta arrastatu lekuz aldatzeko',
7 'label': '%1 widget'
8} );
diff --git a/sources/plugins/widget/lang/fa.js b/sources/plugins/widget/lang/fa.js
new file mode 100644
index 0000000..57ea31f
--- /dev/null
+++ b/sources/plugins/widget/lang/fa.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'fa', {
6 'move': 'کلیک و کشیدن برای جابجایی',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/fi.js b/sources/plugins/widget/lang/fi.js
new file mode 100644
index 0000000..759b2cf
--- /dev/null
+++ b/sources/plugins/widget/lang/fi.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'fi', {
6 'move': 'Siirrä klikkaamalla ja raahaamalla',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/fr.js b/sources/plugins/widget/lang/fr.js
new file mode 100644
index 0000000..9decbf6
--- /dev/null
+++ b/sources/plugins/widget/lang/fr.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'fr', {
6 'move': 'Cliquer et glisser pour déplacer',
7 'label': 'Élément %1'
8} );
diff --git a/sources/plugins/widget/lang/gl.js b/sources/plugins/widget/lang/gl.js
new file mode 100644
index 0000000..ef070b6
--- /dev/null
+++ b/sources/plugins/widget/lang/gl.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'gl', {
6 'move': 'Prema e arrastre para mover',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/he.js b/sources/plugins/widget/lang/he.js
new file mode 100644
index 0000000..b8dd2cb
--- /dev/null
+++ b/sources/plugins/widget/lang/he.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'he', {
6 'move': 'לחץ וגרור להזזה',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/hr.js b/sources/plugins/widget/lang/hr.js
new file mode 100644
index 0000000..952d800
--- /dev/null
+++ b/sources/plugins/widget/lang/hr.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'hr', {
6 'move': 'Klikni i povuci da pomakneš',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/hu.js b/sources/plugins/widget/lang/hu.js
new file mode 100644
index 0000000..4721305
--- /dev/null
+++ b/sources/plugins/widget/lang/hu.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'hu', {
6 'move': 'Kattints és húzd a mozgatáshoz',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/id.js b/sources/plugins/widget/lang/id.js
new file mode 100644
index 0000000..ef19392
--- /dev/null
+++ b/sources/plugins/widget/lang/id.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'id', {
6 'move': 'Tekan dan geser untuk memindahkan',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/it.js b/sources/plugins/widget/lang/it.js
new file mode 100644
index 0000000..59b43f6
--- /dev/null
+++ b/sources/plugins/widget/lang/it.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'it', {
6 'move': 'Fare clic e trascinare per spostare',
7 'label': 'Widget %1'
8} );
diff --git a/sources/plugins/widget/lang/ja.js b/sources/plugins/widget/lang/ja.js
new file mode 100644
index 0000000..a742718
--- /dev/null
+++ b/sources/plugins/widget/lang/ja.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'ja', {
6 'move': 'ドラッグして移動',
7 'label': '%1 ウィジェット'
8} );
diff --git a/sources/plugins/widget/lang/km.js b/sources/plugins/widget/lang/km.js
new file mode 100644
index 0000000..6c61c73
--- /dev/null
+++ b/sources/plugins/widget/lang/km.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'km', {
6 'move': 'ចុច​ហើយ​ទាញ​ដើម្បី​ផ្លាស់​ទី',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/ko.js b/sources/plugins/widget/lang/ko.js
new file mode 100644
index 0000000..0107a13
--- /dev/null
+++ b/sources/plugins/widget/lang/ko.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'ko', {
6 'move': '움직이려면 클릭 후 드래그 하세요',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/ku.js b/sources/plugins/widget/lang/ku.js
new file mode 100644
index 0000000..2af50cb
--- /dev/null
+++ b/sources/plugins/widget/lang/ku.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'ku', {
6 'move': 'کرتەبکە و ڕایبکێشە بۆ جوڵاندن',
7 'label': '%1 ویجێت'
8} );
diff --git a/sources/plugins/widget/lang/lv.js b/sources/plugins/widget/lang/lv.js
new file mode 100644
index 0000000..e5fc3ac
--- /dev/null
+++ b/sources/plugins/widget/lang/lv.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'lv', {
6 'move': 'Klikšķina un velc, lai pārvietotu',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/nb.js b/sources/plugins/widget/lang/nb.js
new file mode 100644
index 0000000..af46bc9
--- /dev/null
+++ b/sources/plugins/widget/lang/nb.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'nb', {
6 'move': 'Klikk og dra for å flytte',
7 'label': 'Widget %1'
8} );
diff --git a/sources/plugins/widget/lang/nl.js b/sources/plugins/widget/lang/nl.js
new file mode 100644
index 0000000..56b182c
--- /dev/null
+++ b/sources/plugins/widget/lang/nl.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'nl', {
6 'move': 'Klik en sleep om te verplaatsen',
7 'label': '%1 widget'
8} );
diff --git a/sources/plugins/widget/lang/no.js b/sources/plugins/widget/lang/no.js
new file mode 100644
index 0000000..b86bd7b
--- /dev/null
+++ b/sources/plugins/widget/lang/no.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'no', {
6 'move': 'Klikk og dra for å flytte',
7 'label': 'Widget %1'
8} );
diff --git a/sources/plugins/widget/lang/oc.js b/sources/plugins/widget/lang/oc.js
new file mode 100644
index 0000000..10ff842
--- /dev/null
+++ b/sources/plugins/widget/lang/oc.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'oc', {
6 'move': 'Clicar e lisar per desplaçar',
7 'label': 'Element %1'
8} );
diff --git a/sources/plugins/widget/lang/pl.js b/sources/plugins/widget/lang/pl.js
new file mode 100644
index 0000000..2d90df8
--- /dev/null
+++ b/sources/plugins/widget/lang/pl.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'pl', {
6 'move': 'Kliknij i przeciągnij, by przenieść.',
7 'label': 'Widget %1'
8} );
diff --git a/sources/plugins/widget/lang/pt-br.js b/sources/plugins/widget/lang/pt-br.js
new file mode 100644
index 0000000..9ce9be4
--- /dev/null
+++ b/sources/plugins/widget/lang/pt-br.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'pt-br', {
6 'move': 'Click e arraste para mover',
7 'label': '%1 widget'
8} );
diff --git a/sources/plugins/widget/lang/pt.js b/sources/plugins/widget/lang/pt.js
new file mode 100644
index 0000000..422ef93
--- /dev/null
+++ b/sources/plugins/widget/lang/pt.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'pt', {
6 'move': 'Clique e arraste para mover',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/ru.js b/sources/plugins/widget/lang/ru.js
new file mode 100644
index 0000000..d6f36f5
--- /dev/null
+++ b/sources/plugins/widget/lang/ru.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'ru', {
6 'move': 'Нажмите и перетащите, чтобы переместить',
7 'label': '%1 виджет'
8} );
diff --git a/sources/plugins/widget/lang/sk.js b/sources/plugins/widget/lang/sk.js
new file mode 100644
index 0000000..05acac4
--- /dev/null
+++ b/sources/plugins/widget/lang/sk.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'sk', {
6 'move': 'Kliknite a potiahnite pre presunutie',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/sl.js b/sources/plugins/widget/lang/sl.js
new file mode 100644
index 0000000..96ffd1e
--- /dev/null
+++ b/sources/plugins/widget/lang/sl.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'sl', {
6 'move': 'Kliknite in povlecite, da premaknete',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/sq.js b/sources/plugins/widget/lang/sq.js
new file mode 100644
index 0000000..ad46c7d
--- /dev/null
+++ b/sources/plugins/widget/lang/sq.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'sq', {
6 'move': 'Kliko dhe tërhiqe për ta lëvizur',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/sv.js b/sources/plugins/widget/lang/sv.js
new file mode 100644
index 0000000..7faff37
--- /dev/null
+++ b/sources/plugins/widget/lang/sv.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'sv', {
6 'move': 'Klicka och drag för att flytta',
7 'label': '%1-widget'
8} );
diff --git a/sources/plugins/widget/lang/tr.js b/sources/plugins/widget/lang/tr.js
new file mode 100644
index 0000000..92fa952
--- /dev/null
+++ b/sources/plugins/widget/lang/tr.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'tr', {
6 'move': 'Taşımak için, tıklayın ve sürükleyin',
7 'label': '%1 Grafik Beleşeni'
8} );
diff --git a/sources/plugins/widget/lang/tt.js b/sources/plugins/widget/lang/tt.js
new file mode 100644
index 0000000..30fb31a
--- /dev/null
+++ b/sources/plugins/widget/lang/tt.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'tt', {
6 'move': 'Күчереп куер өчен басып шудырыгыз',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/ug.js b/sources/plugins/widget/lang/ug.js
new file mode 100644
index 0000000..fc216c4
--- /dev/null
+++ b/sources/plugins/widget/lang/ug.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'ug', {
6 'move': 'يۆتكەشتە چېكىپ سۆرەڭ',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/uk.js b/sources/plugins/widget/lang/uk.js
new file mode 100644
index 0000000..fab6d5d
--- /dev/null
+++ b/sources/plugins/widget/lang/uk.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'uk', {
6 'move': 'Клікніть і потягніть для переміщення',
7 'label': '%1 віджет'
8} );
diff --git a/sources/plugins/widget/lang/vi.js b/sources/plugins/widget/lang/vi.js
new file mode 100644
index 0000000..2bbe246
--- /dev/null
+++ b/sources/plugins/widget/lang/vi.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'vi', {
6 'move': 'Nhấp chuột và kéo để di chuyển',
7 'label': '%1 widget' // MISSING
8} );
diff --git a/sources/plugins/widget/lang/zh-cn.js b/sources/plugins/widget/lang/zh-cn.js
new file mode 100644
index 0000000..2381407
--- /dev/null
+++ b/sources/plugins/widget/lang/zh-cn.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'zh-cn', {
6 'move': '点击并拖拽以移动',
7 'label': '%1 小部件'
8} );
diff --git a/sources/plugins/widget/lang/zh.js b/sources/plugins/widget/lang/zh.js
new file mode 100644
index 0000000..b6e945b
--- /dev/null
+++ b/sources/plugins/widget/lang/zh.js
@@ -0,0 +1,8 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5CKEDITOR.plugins.setLang( 'widget', 'zh', {
6 'move': '拖曳以移動',
7 'label': '%1 小工具'
8} );
diff --git a/sources/plugins/widget/plugin.js b/sources/plugins/widget/plugin.js
new file mode 100644
index 0000000..37374ab
--- /dev/null
+++ b/sources/plugins/widget/plugin.js
@@ -0,0 +1,4126 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5
6/**
7 * @fileOverview [Widget](http://ckeditor.com/addon/widget) plugin.
8 */
9
10'use strict';
11
12( function() {
13 var DRAG_HANDLER_SIZE = 15;
14
15 CKEDITOR.plugins.add( 'widget', {
16 // jscs:disable maximumLineLength
17 lang: 'af,ar,az,bg,ca,cs,cy,da,de,de-ch,el,en,en-gb,eo,es,eu,fa,fi,fr,gl,he,hr,hu,id,it,ja,km,ko,ku,lv,nb,nl,no,oc,pl,pt,pt-br,ru,sk,sl,sq,sv,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
18 // jscs:enable maximumLineLength
19 requires: 'lineutils,clipboard,widgetselection',
20 onLoad: function() {
21 CKEDITOR.addCss(
22 '.cke_widget_wrapper{' +
23 'position:relative;' +
24 'outline:none' +
25 '}' +
26 '.cke_widget_inline{' +
27 'display:inline-block' +
28 '}' +
29 '.cke_widget_wrapper:hover>.cke_widget_element{' +
30 'outline:2px solid yellow;' +
31 'cursor:default' +
32 '}' +
33 '.cke_widget_wrapper:hover .cke_widget_editable{' +
34 'outline:2px solid yellow' +
35 '}' +
36 '.cke_widget_wrapper.cke_widget_focused>.cke_widget_element,' +
37 // We need higher specificity than hover style.
38 '.cke_widget_wrapper .cke_widget_editable.cke_widget_editable_focused{' +
39 'outline:2px solid #ace' +
40 '}' +
41 '.cke_widget_editable{' +
42 'cursor:text' +
43 '}' +
44 '.cke_widget_drag_handler_container{' +
45 'position:absolute;' +
46 'width:' + DRAG_HANDLER_SIZE + 'px;' +
47 'height:0;' +
48 // Initially drag handler should not be visible, until its position will be
49 // calculated (#11177).
50 // We need to hide unpositined handlers, so they don't extend
51 // widget's outline far to the left (#12024).
52 'display:none;' +
53 'opacity:0.75;' +
54 'transition:height 0s 0.2s;' + // Delay hiding drag handler.
55 // Prevent drag handler from being misplaced (#11198).
56 'line-height:0' +
57 '}' +
58 '.cke_widget_wrapper:hover>.cke_widget_drag_handler_container{' +
59 'height:' + DRAG_HANDLER_SIZE + 'px;' +
60 'transition:none' +
61 '}' +
62 '.cke_widget_drag_handler_container:hover{' +
63 'opacity:1' +
64 '}' +
65 'img.cke_widget_drag_handler{' +
66 'cursor:move;' +
67 'width:' + DRAG_HANDLER_SIZE + 'px;' +
68 'height:' + DRAG_HANDLER_SIZE + 'px;' +
69 'display:inline-block' +
70 '}' +
71 '.cke_widget_mask{' +
72 'position:absolute;' +
73 'top:0;' +
74 'left:0;' +
75 'width:100%;' +
76 'height:100%;' +
77 'display:block' +
78 '}' +
79 '.cke_editable.cke_widget_dragging, .cke_editable.cke_widget_dragging *{' +
80 'cursor:move !important' +
81 '}'
82 );
83 },
84
85 beforeInit: function( editor ) {
86 /**
87 * An instance of widget repository. It contains all
88 * {@link CKEDITOR.plugins.widget.repository#registered registered widget definitions} and
89 * {@link CKEDITOR.plugins.widget.repository#instances initialized instances}.
90 *
91 * editor.widgets.add( 'someName', {
92 * // Widget definition...
93 * } );
94 *
95 * editor.widgets.registered.someName; // -> Widget definition
96 *
97 * @since 4.3
98 * @readonly
99 * @property {CKEDITOR.plugins.widget.repository} widgets
100 * @member CKEDITOR.editor
101 */
102 editor.widgets = new Repository( editor );
103 },
104
105 afterInit: function( editor ) {
106 addWidgetButtons( editor );
107 setupContextMenu( editor );
108 }
109 } );
110
111 /**
112 * Widget repository. It keeps track of all {@link #registered registered widget definitions} and
113 * {@link #instances initialized instances}. An instance of the repository is available under
114 * the {@link CKEDITOR.editor#widgets} property.
115 *
116 * @class CKEDITOR.plugins.widget.repository
117 * @mixins CKEDITOR.event
118 * @constructor Creates a widget repository instance. Note that the widget plugin automatically
119 * creates a repository instance which is available under the {@link CKEDITOR.editor#widgets} property.
120 * @param {CKEDITOR.editor} editor The editor instance for which the repository will be created.
121 */
122 function Repository( editor ) {
123 /**
124 * The editor instance for which this repository was created.
125 *
126 * @readonly
127 * @property {CKEDITOR.editor} editor
128 */
129 this.editor = editor;
130
131 /**
132 * A hash of registered widget definitions (definition name => {@link CKEDITOR.plugins.widget.definition}).
133 *
134 * To register a definition use the {@link #add} method.
135 *
136 * @readonly
137 */
138 this.registered = {};
139
140 /**
141 * An object containing initialized widget instances (widget id => {@link CKEDITOR.plugins.widget}).
142 *
143 * @readonly
144 */
145 this.instances = {};
146
147 /**
148 * An array of selected widget instances.
149 *
150 * @readonly
151 * @property {CKEDITOR.plugins.widget[]} selected
152 */
153 this.selected = [];
154
155 /**
156 * The focused widget instance. See also {@link CKEDITOR.plugins.widget#event-focus}
157 * and {@link CKEDITOR.plugins.widget#event-blur} events.
158 *
159 * editor.on( 'selectionChange', function() {
160 * if ( editor.widgets.focused ) {
161 * // Do something when a widget is focused...
162 * }
163 * } );
164 *
165 * @readonly
166 * @property {CKEDITOR.plugins.widget} focused
167 */
168 this.focused = null;
169
170 /**
171 * The widget instance that contains the nested editable which is currently focused.
172 *
173 * @readonly
174 * @property {CKEDITOR.plugins.widget} widgetHoldingFocusedEditable
175 */
176 this.widgetHoldingFocusedEditable = null;
177
178 this._ = {
179 nextId: 0,
180 upcasts: [],
181 upcastCallbacks: [],
182 filters: {}
183 };
184
185 setupWidgetsLifecycle( this );
186 setupSelectionObserver( this );
187 setupMouseObserver( this );
188 setupKeyboardObserver( this );
189 setupDragAndDrop( this );
190 setupNativeCutAndCopy( this );
191 }
192
193 Repository.prototype = {
194 /**
195 * Minimum interval between selection checks.
196 *
197 * @private
198 */
199 MIN_SELECTION_CHECK_INTERVAL: 500,
200
201 /**
202 * Adds a widget definition to the repository. Fires the {@link CKEDITOR.editor#widgetDefinition} event
203 * which allows to modify the widget definition which is going to be registered.
204 *
205 * @param {String} name The name of the widget definition.
206 * @param {CKEDITOR.plugins.widget.definition} widgetDef Widget definition.
207 * @returns {CKEDITOR.plugins.widget.definition}
208 */
209 add: function( name, widgetDef ) {
210 // Create prototyped copy of original widget definition, so we won't modify it.
211 widgetDef = CKEDITOR.tools.prototypedCopy( widgetDef );
212 widgetDef.name = name;
213
214 widgetDef._ = widgetDef._ || {};
215
216 this.editor.fire( 'widgetDefinition', widgetDef );
217
218 if ( widgetDef.template )
219 widgetDef.template = new CKEDITOR.template( widgetDef.template );
220
221 addWidgetCommand( this.editor, widgetDef );
222 addWidgetProcessors( this, widgetDef );
223
224 this.registered[ name ] = widgetDef;
225
226 return widgetDef;
227 },
228
229 /**
230 * Adds a callback for element upcasting. Each callback will be executed
231 * for every element which is later tested by upcast methods. If a callback
232 * returns `false`, the element will not be upcasted.
233 *
234 * // Images with the "banner" class will not be upcasted (e.g. to the image widget).
235 * editor.widgets.addUpcastCallback( function( element ) {
236 * if ( element.name == 'img' && element.hasClass( 'banner' ) )
237 * return false;
238 * } );
239 *
240 * @param {Function} callback
241 * @param {CKEDITOR.htmlParser.element} callback.element
242 */
243 addUpcastCallback: function( callback ) {
244 this._.upcastCallbacks.push( callback );
245 },
246
247 /**
248 * Checks the selection to update widget states (selection and focus).
249 *
250 * This method is triggered by the {@link #event-checkSelection} event.
251 */
252 checkSelection: function() {
253 var sel = this.editor.getSelection(),
254 selectedElement = sel.getSelectedElement(),
255 updater = stateUpdater( this ),
256 widget;
257
258 // Widget is focused so commit and finish checking.
259 if ( selectedElement && ( widget = this.getByElement( selectedElement, true ) ) )
260 return updater.focus( widget ).select( widget ).commit();
261
262 var range = sel.getRanges()[ 0 ];
263
264 // No ranges or collapsed range mean that nothing is selected, so commit and finish checking.
265 if ( !range || range.collapsed )
266 return updater.commit();
267
268 // Range is not empty, so create walker checking for wrappers.
269 var walker = new CKEDITOR.dom.walker( range ),
270 wrapper;
271
272 walker.evaluator = Widget.isDomWidgetWrapper;
273
274 while ( ( wrapper = walker.next() ) )
275 updater.select( this.getByElement( wrapper ) );
276
277 updater.commit();
278 },
279
280 /**
281 * Checks if all widget instances are still present in the DOM.
282 * Destroys those instances that are not present.
283 * Reinitializes widgets on widget wrappers for which widget instances
284 * cannot be found. Takes nested widgets into account, too.
285 *
286 * This method triggers the {@link #event-checkWidgets} event whose listeners
287 * can cancel the method's execution or modify its options.
288 *
289 * @param [options] The options object.
290 * @param {Boolean} [options.initOnlyNew] Initializes widgets only on newly wrapped
291 * widget elements (those which still have the `cke_widget_new` class). When this option is
292 * set to `true`, widgets which were invalidated (e.g. by replacing with a cloned DOM structure)
293 * will not be reinitialized. This makes the check faster.
294 * @param {Boolean} [options.focusInited] If only one widget is initialized by
295 * the method, it will be focused.
296 */
297 checkWidgets: function( options ) {
298 this.fire( 'checkWidgets', CKEDITOR.tools.copy( options || {} ) );
299 },
300
301 /**
302 * Removes the widget from the editor and moves the selection to the closest
303 * editable position if the widget was focused before.
304 *
305 * @param {CKEDITOR.plugins.widget} widget The widget instance to be deleted.
306 */
307 del: function( widget ) {
308 if ( this.focused === widget ) {
309 var editor = widget.editor,
310 range = editor.createRange(),
311 found;
312
313 // If haven't found place for caret on the default side,
314 // try to find it on the other side.
315 if ( !( found = range.moveToClosestEditablePosition( widget.wrapper, true ) ) )
316 found = range.moveToClosestEditablePosition( widget.wrapper, false );
317
318 if ( found )
319 editor.getSelection().selectRanges( [ range ] );
320 }
321
322 widget.wrapper.remove();
323 this.destroy( widget, true );
324 },
325
326 /**
327 * Destroys the widget instance and all its nested widgets (widgets inside its nested editables).
328 *
329 * @param {CKEDITOR.plugins.widget} widget The widget instance to be destroyed.
330 * @param {Boolean} [offline] Whether the widget is offline (detached from the DOM tree) &mdash;
331 * in this case the DOM (attributes, classes, etc.) will not be cleaned up.
332 */
333 destroy: function( widget, offline ) {
334 if ( this.widgetHoldingFocusedEditable === widget )
335 setFocusedEditable( this, widget, null, offline );
336
337 widget.destroy( offline );
338 delete this.instances[ widget.id ];
339 this.fire( 'instanceDestroyed', widget );
340 },
341
342 /**
343 * Destroys all widget instances.
344 *
345 * @param {Boolean} [offline] Whether the widgets are offline (detached from the DOM tree) &mdash;
346 * in this case the DOM (attributes, classes, etc.) will not be cleaned up.
347 * @param {CKEDITOR.dom.element} [container] The container within widgets will be destroyed.
348 * This option will be ignored if the `offline` flag was set to `true`, because in such case
349 * it is not possible to find widgets within the passed block.
350 */
351 destroyAll: function( offline, container ) {
352 var widget,
353 id,
354 instances = this.instances;
355
356 if ( container && !offline ) {
357 var wrappers = container.find( '.cke_widget_wrapper' ),
358 l = wrappers.count(),
359 i = 0;
360
361 // Length is constant, because this is not a live node list.
362 // Note: since querySelectorAll returns nodes in document order,
363 // outer widgets are always placed before their nested widgets and therefore
364 // are destroyed before them.
365 for ( ; i < l; ++i ) {
366 widget = this.getByElement( wrappers.getItem( i ), true );
367 // Widget might not be found, because it could be a nested widget,
368 // which would be destroyed when destroying its parent.
369 if ( widget )
370 this.destroy( widget );
371 }
372
373 return;
374 }
375
376 for ( id in instances ) {
377 widget = instances[ id ];
378 this.destroy( widget, offline );
379 }
380 },
381
382 /**
383 * Finalizes a process of widget creation. This includes:
384 *
385 * * inserting widget element into editor,
386 * * marking widget instance as ready (see {@link CKEDITOR.plugins.widget#event-ready}),
387 * * focusing widget instance.
388 *
389 * This method is used by the default widget's command and is called
390 * after widget's dialog (if set) is closed. It may also be used in a
391 * customized process of widget creation and insertion.
392 *
393 * widget.once( 'edit', function() {
394 * // Finalize creation only of not ready widgets.
395 * if ( widget.isReady() )
396 * return;
397 *
398 * // Cancel edit event to prevent automatic widget insertion.
399 * evt.cancel();
400 *
401 * CustomDialog.open( widget.data, function saveCallback( savedData ) {
402 * // Cache the container, because widget may be destroyed while saving data,
403 * // if this process will require some deep transformations.
404 * var container = widget.wrapper.getParent();
405 *
406 * widget.setData( savedData );
407 *
408 * // Widget will be retrieved from container and inserted into editor.
409 * editor.widgets.finalizeCreation( container );
410 * } );
411 * } );
412 *
413 * @param {CKEDITOR.dom.element/CKEDITOR.dom.documentFragment} container The element
414 * or document fragment which contains widget wrapper. The container is used, so before
415 * finalizing creation the widget can be freely transformed (even destroyed and reinitialized).
416 */
417 finalizeCreation: function( container ) {
418 var wrapper = container.getFirst();
419 if ( wrapper && Widget.isDomWidgetWrapper( wrapper ) ) {
420 this.editor.insertElement( wrapper );
421
422 var widget = this.getByElement( wrapper );
423 // Fire postponed #ready event.
424 widget.ready = true;
425 widget.fire( 'ready' );
426 widget.focus();
427 }
428 },
429
430 /**
431 * Finds a widget instance which contains a given element. The element will be the {@link CKEDITOR.plugins.widget#wrapper wrapper}
432 * of the returned widget or a descendant of this {@link CKEDITOR.plugins.widget#wrapper wrapper}.
433 *
434 * editor.widgets.getByElement( someWidget.wrapper ); // -> someWidget
435 * editor.widgets.getByElement( someWidget.parts.caption ); // -> someWidget
436 *
437 * // Check wrapper only:
438 * editor.widgets.getByElement( someWidget.wrapper, true ); // -> someWidget
439 * editor.widgets.getByElement( someWidget.parts.caption, true ); // -> null
440 *
441 * @param {CKEDITOR.dom.element} element The element to be checked.
442 * @param {Boolean} [checkWrapperOnly] If set to `true`, the method will not check wrappers' descendants.
443 * @returns {CKEDITOR.plugins.widget} The widget instance or `null`.
444 */
445 getByElement: ( function() {
446 var validWrapperElements = { div: 1, span: 1 };
447 function getWidgetId( element ) {
448 return element.is( validWrapperElements ) && element.data( 'cke-widget-id' );
449 }
450
451 return function( element, checkWrapperOnly ) {
452 if ( !element )
453 return null;
454
455 var id = getWidgetId( element );
456
457 // There's no need to check element parents if element is a wrapper.
458 if ( !checkWrapperOnly && !id ) {
459 var limit = this.editor.editable();
460
461 // Try to find a closest ascendant which is a widget wrapper.
462 do {
463 element = element.getParent();
464 } while ( element && !element.equals( limit ) && !( id = getWidgetId( element ) ) );
465 }
466
467 return this.instances[ id ] || null;
468 };
469 } )(),
470
471 /**
472 * Initializes a widget on a given element if the widget has not been initialized on it yet.
473 *
474 * @param {CKEDITOR.dom.element} element The future widget element.
475 * @param {String/CKEDITOR.plugins.widget.definition} [widgetDef] Name of a widget or a widget definition.
476 * The widget definition should be previously registered by using the
477 * {@link CKEDITOR.plugins.widget.repository#add} method.
478 * @param [startupData] Widget startup data (has precedence over default one).
479 * @returns {CKEDITOR.plugins.widget} The widget instance or `null` if a widget could not be initialized on
480 * a given element.
481 */
482 initOn: function( element, widgetDef, startupData ) {
483 if ( !widgetDef )
484 widgetDef = this.registered[ element.data( 'widget' ) ];
485 else if ( typeof widgetDef == 'string' )
486 widgetDef = this.registered[ widgetDef ];
487
488 if ( !widgetDef )
489 return null;
490
491 // Wrap element if still wasn't wrapped (was added during runtime by method that skips dataProcessor).
492 var wrapper = this.wrapElement( element, widgetDef.name );
493
494 if ( wrapper ) {
495 // Check if widget wrapper is new (widget hasn't been initialized on it yet).
496 // This class will be removed by widget constructor to avoid locking snapshot twice.
497 if ( wrapper.hasClass( 'cke_widget_new' ) ) {
498 var widget = new Widget( this, this._.nextId++, element, widgetDef, startupData );
499
500 // Widget could be destroyed when initializing it.
501 if ( widget.isInited() ) {
502 this.instances[ widget.id ] = widget;
503
504 return widget;
505 } else {
506 return null;
507 }
508 }
509
510 // Widget already has been initialized, so try to get widget by element.
511 // Note - it may happen that other instance will returned than the one created above,
512 // if for example widget was destroyed and reinitialized.
513 return this.getByElement( element );
514 }
515
516 // No wrapper means that there's no widget for this element.
517 return null;
518 },
519
520 /**
521 * Initializes widgets on all elements which were wrapped by {@link #wrapElement} and
522 * have not been initialized yet.
523 *
524 * @param {CKEDITOR.dom.element} [container=editor.editable()] The container which will be checked for not
525 * initialized widgets. Defaults to editor's {@link CKEDITOR.editor#editable editable} element.
526 * @returns {CKEDITOR.plugins.widget[]} Array of widget instances which have been initialized.
527 * Note: Only first-level widgets are returned &mdash; without nested widgets.
528 */
529 initOnAll: function( container ) {
530 var newWidgets = ( container || this.editor.editable() ).find( '.cke_widget_new' ),
531 newInstances = [],
532 instance;
533
534 for ( var i = newWidgets.count(); i--; ) {
535 instance = this.initOn( newWidgets.getItem( i ).getFirst( Widget.isDomWidgetElement ) );
536 if ( instance )
537 newInstances.push( instance );
538 }
539
540 return newInstances;
541 },
542
543 /**
544 * Allows to listen to events on specific types of widgets, even if they are not created yet.
545 *
546 * Please note that this method inherits parameters from the {@link CKEDITOR.event#method-on} method with one
547 * extra parameter at the beginning which is the widget name.
548 *
549 * editor.widgets.onWidget( 'image', 'action', function( evt ) {
550 * // Event `action` occurs on `image` widget.
551 * } );
552 *
553 * @since 4.5
554 * @param {String} widgetName
555 * @param {String} eventName
556 * @param {Function} listenerFunction
557 * @param {Object} [scopeObj]
558 * @param {Object} [listenerData]
559 * @param {Number} [priority=10]
560 */
561 onWidget: function( widgetName ) {
562 var args = Array.prototype.slice.call( arguments );
563
564 args.shift();
565
566 for ( var i in this.instances ) {
567 var instance = this.instances[ i ];
568
569 if ( instance.name == widgetName ) {
570 instance.on.apply( instance, args );
571 }
572 }
573
574 this.on( 'instanceCreated', function( evt ) {
575 var widget = evt.data;
576
577 if ( widget.name == widgetName ) {
578 widget.on.apply( widget, args );
579 }
580 } );
581 },
582
583 /**
584 * Parses element classes string and returns an object
585 * whose keys contain class names. Skips all `cke_*` classes.
586 *
587 * This method is used by the {@link CKEDITOR.plugins.widget#getClasses} method and
588 * may be used when overriding that method.
589 *
590 * @since 4.4
591 * @param {String} classes String (value of `class` attribute).
592 * @returns {Object} Object containing classes or `null` if no classes found.
593 */
594 parseElementClasses: function( classes ) {
595 if ( !classes )
596 return null;
597
598 classes = CKEDITOR.tools.trim( classes ).split( /\s+/ );
599
600 var cl,
601 obj = {},
602 hasClasses = 0;
603
604 while ( ( cl = classes.pop() ) ) {
605 if ( cl.indexOf( 'cke_' ) == -1 )
606 obj[ cl ] = hasClasses = 1;
607 }
608
609 return hasClasses ? obj : null;
610 },
611
612 /**
613 * Wraps an element with a widget's non-editable container.
614 *
615 * If this method is called on an {@link CKEDITOR.htmlParser.element}, then it will
616 * also take care of fixing the DOM after wrapping (the wrapper may not be allowed in element's parent).
617 *
618 * @param {CKEDITOR.dom.element/CKEDITOR.htmlParser.element} element The widget element to be wrapped.
619 * @param {String} [widgetName] The name of the widget definition. Defaults to element's `data-widget`
620 * attribute value.
621 * @returns {CKEDITOR.dom.element/CKEDITOR.htmlParser.element} The wrapper element or `null` if
622 * the widget definition of this name is not registered.
623 */
624 wrapElement: function( element, widgetName ) {
625 var wrapper = null,
626 widgetDef,
627 isInline;
628
629 if ( element instanceof CKEDITOR.dom.element ) {
630 widgetName = widgetName || element.data( 'widget' );
631 widgetDef = this.registered[ widgetName ];
632
633 if ( !widgetDef )
634 return null;
635
636 // Do not wrap already wrapped element.
637 wrapper = element.getParent();
638 if ( wrapper && wrapper.type == CKEDITOR.NODE_ELEMENT && wrapper.data( 'cke-widget-wrapper' ) )
639 return wrapper;
640
641 // If attribute isn't already set (e.g. for pasted widget), set it.
642 if ( !element.hasAttribute( 'data-cke-widget-keep-attr' ) )
643 element.data( 'cke-widget-keep-attr', element.data( 'widget' ) ? 1 : 0 );
644
645 element.data( 'widget', widgetName );
646
647 isInline = isWidgetInline( widgetDef, element.getName() );
648
649 wrapper = new CKEDITOR.dom.element( isInline ? 'span' : 'div' );
650 wrapper.setAttributes( getWrapperAttributes( isInline, widgetName ) );
651
652 wrapper.data( 'cke-display-name', widgetDef.pathName ? widgetDef.pathName : element.getName() );
653
654 // Replace element unless it is a detached one.
655 if ( element.getParent( true ) )
656 wrapper.replace( element );
657 element.appendTo( wrapper );
658 }
659 else if ( element instanceof CKEDITOR.htmlParser.element ) {
660 widgetName = widgetName || element.attributes[ 'data-widget' ];
661 widgetDef = this.registered[ widgetName ];
662
663 if ( !widgetDef )
664 return null;
665
666 wrapper = element.parent;
667 if ( wrapper && wrapper.type == CKEDITOR.NODE_ELEMENT && wrapper.attributes[ 'data-cke-widget-wrapper' ] )
668 return wrapper;
669
670 // If attribute isn't already set (e.g. for pasted widget), set it.
671 if ( !( 'data-cke-widget-keep-attr' in element.attributes ) )
672 element.attributes[ 'data-cke-widget-keep-attr' ] = element.attributes[ 'data-widget' ] ? 1 : 0;
673 if ( widgetName )
674 element.attributes[ 'data-widget' ] = widgetName;
675
676 isInline = isWidgetInline( widgetDef, element.name );
677
678 wrapper = new CKEDITOR.htmlParser.element( isInline ? 'span' : 'div', getWrapperAttributes( isInline, widgetName ) );
679 wrapper.attributes[ 'data-cke-display-name' ] = widgetDef.pathName ? widgetDef.pathName : element.name;
680
681 var parent = element.parent,
682 index;
683
684 // Don't detach already detached element.
685 if ( parent ) {
686 index = element.getIndex();
687 element.remove();
688 }
689
690 wrapper.add( element );
691
692 // Insert wrapper fixing DOM (splitting parents if wrapper is not allowed inside them).
693 parent && insertElement( parent, index, wrapper );
694 }
695
696 return wrapper;
697 },
698
699 // Expose for tests.
700 _tests_createEditableFilter: createEditableFilter
701 };
702
703 CKEDITOR.event.implementOn( Repository.prototype );
704
705 /**
706 * An event fired when a widget instance is created, but before it is fully initialized.
707 *
708 * @event instanceCreated
709 * @param {CKEDITOR.plugins.widget} data The widget instance.
710 */
711
712 /**
713 * An event fired when a widget instance was destroyed.
714 *
715 * See also {@link CKEDITOR.plugins.widget#event-destroy}.
716 *
717 * @event instanceDestroyed
718 * @param {CKEDITOR.plugins.widget} data The widget instance.
719 */
720
721 /**
722 * An event fired to trigger the selection check.
723 *
724 * See the {@link #method-checkSelection} method.
725 *
726 * @event checkSelection
727 */
728
729 /**
730 * An event fired by the the {@link #method-checkWidgets} method.
731 *
732 * It can be canceled in order to stop the {@link #method-checkWidgets}
733 * method execution or the event listener can modify the method's options.
734 *
735 * @event checkWidgets
736 * @param [data]
737 * @param {Boolean} [data.initOnlyNew] Initialize widgets only on newly wrapped
738 * widget elements (those which still have the `cke_widget_new` class). When this option is
739 * set to `true`, widgets which were invalidated (e.g. by replacing with a cloned DOM structure)
740 * will not be reinitialized. This makes the check faster.
741 * @param {Boolean} [data.focusInited] If only one widget is initialized by
742 * the method, it will be focused.
743 */
744
745
746 /**
747 * An instance of a widget. Together with {@link CKEDITOR.plugins.widget.repository} these
748 * two classes constitute the core of the Widget System.
749 *
750 * Note that neither the repository nor the widget instances can be created by using their constructors.
751 * A repository instance is automatically set up by the Widget plugin and is accessible under
752 * {@link CKEDITOR.editor#widgets}, while widget instances are created and destroyed by the repository.
753 *
754 * To create a widget, first you need to {@link CKEDITOR.plugins.widget.repository#add register} its
755 * {@link CKEDITOR.plugins.widget.definition definition}:
756 *
757 * editor.widgets.add( 'simplebox', {
758 * upcast: function( element ) {
759 * // Defines which elements will become widgets.
760 * if ( element.hasClass( 'simplebox' ) )
761 * return true;
762 * },
763 * init: function() {
764 * // ...
765 * }
766 * } );
767 *
768 * Once the widget definition is registered, widgets will be automatically
769 * created when loading data:
770 *
771 * editor.setData( '<div class="simplebox">foo</div>', function() {
772 * console.log( editor.widgets.instances ); // -> An object containing one instance.
773 * } );
774 *
775 * It is also possible to create instances during runtime by using a command
776 * (if a {@link CKEDITOR.plugins.widget.definition#template} property was defined):
777 *
778 * // You can execute an automatically defined command to
779 * // insert a new simplebox widget or edit the one currently focused.
780 * editor.execCommand( 'simplebox' );
781 *
782 * Note: Since CKEditor 4.5 widget's `startupData` can be passed as the command argument:
783 *
784 * editor.execCommand( 'simplebox', {
785 * startupData: {
786 * align: 'left'
787 * }
788 * } );
789 *
790 * A widget can also be created in a completely custom way:
791 *
792 * var element = editor.document.createElement( 'div' );
793 * editor.insertElement( element );
794 * var widget = editor.widgets.initOn( element, 'simplebox' );
795 *
796 * @since 4.3
797 * @class CKEDITOR.plugins.widget
798 * @mixins CKEDITOR.event
799 * @extends CKEDITOR.plugins.widget.definition
800 * @constructor Creates an instance of the widget class. Do not use it directly, but instead initialize widgets
801 * by using the {@link CKEDITOR.plugins.widget.repository#initOn} method or by the upcasting system.
802 * @param {CKEDITOR.plugins.widget.repository} widgetsRepo
803 * @param {Number} id Unique ID of this widget instance.
804 * @param {CKEDITOR.dom.element} element The widget element.
805 * @param {CKEDITOR.plugins.widget.definition} widgetDef Widget's registered definition.
806 * @param [startupData] Initial widget data. This data object will overwrite the default data and
807 * the data loaded from the DOM.
808 */
809 function Widget( widgetsRepo, id, element, widgetDef, startupData ) {
810 var editor = widgetsRepo.editor;
811
812 // Extend this widget with widgetDef-specific methods and properties.
813 CKEDITOR.tools.extend( this, widgetDef, {
814 /**
815 * The editor instance.
816 *
817 * @readonly
818 * @property {CKEDITOR.editor}
819 */
820 editor: editor,
821
822 /**
823 * This widget's unique (per editor instance) ID.
824 *
825 * @readonly
826 * @property {Number}
827 */
828 id: id,
829
830 /**
831 * Whether this widget is an inline widget (based on an inline element unless
832 * forced otherwise by {@link CKEDITOR.plugins.widget.definition#inline}).
833 *
834 * **Note:** This option does not allow to turn a block element into an inline widget.
835 * However, it makes it possible to turn an inline element into a block widget or to
836 * force a correct type in case when automatic recognition fails.
837 *
838 * @readonly
839 * @property {Boolean}
840 */
841 inline: element.getParent().getName() == 'span',
842
843 /**
844 * The widget element &mdash; the element on which the widget was initialized.
845 *
846 * @readonly
847 * @property {CKEDITOR.dom.element} element
848 */
849 element: element,
850
851 /**
852 * Widget's data object.
853 *
854 * The data can only be set by using the {@link #setData} method.
855 * Changes made to the data fire the {@link #event-data} event.
856 *
857 * @readonly
858 */
859 data: CKEDITOR.tools.extend( {}, typeof widgetDef.defaults == 'function' ? widgetDef.defaults() : widgetDef.defaults ),
860
861 /**
862 * Indicates if a widget is data-ready. Set to `true` when data from all sources
863 * ({@link CKEDITOR.plugins.widget.definition#defaults}, set in the
864 * {@link #init} method, loaded from the widget's element and startup data coming from the constructor)
865 * are finally loaded. This is immediately followed by the first {@link #event-data}.
866 *
867 * @readonly
868 */
869 dataReady: false,
870
871 /**
872 * Whether a widget instance was initialized. This means that:
873 *
874 * * An instance was created,
875 * * Its properties were set,
876 * * The `init` method was executed.
877 *
878 * **Note**: The first {@link #event-data} event could not be fired yet which
879 * means that the widget's DOM has not been set up yet. Wait for the {@link #event-ready}
880 * event to be notified when a widget is fully initialized and ready.
881 *
882 * **Note**: Use the {@link #isInited} method to check whether a widget is initialized and
883 * has not been destroyed.
884 *
885 * @readonly
886 */
887 inited: false,
888
889 /**
890 * Whether a widget instance is ready. This means that the widget is {@link #inited} and
891 * that its DOM was finally set up.
892 *
893 * **Note:** Use the {@link #isReady} method to check whether a widget is ready and
894 * has not been destroyed.
895 *
896 * @readonly
897 */
898 ready: false,
899
900 // Revert what widgetDef could override (automatic #edit listener).
901 edit: Widget.prototype.edit,
902
903 /**
904 * The nested editable element which is currently focused.
905 *
906 * @readonly
907 * @property {CKEDITOR.plugins.widget.nestedEditable}
908 */
909 focusedEditable: null,
910
911 /**
912 * The widget definition from which this instance was created.
913 *
914 * @readonly
915 * @property {CKEDITOR.plugins.widget.definition} definition
916 */
917 definition: widgetDef,
918
919 /**
920 * Link to the widget repository which created this instance.
921 *
922 * @readonly
923 * @property {CKEDITOR.plugins.widget.repository} repository
924 */
925 repository: widgetsRepo,
926
927 draggable: widgetDef.draggable !== false,
928
929 // WAAARNING: Overwrite widgetDef's priv object, because otherwise violent unicorn's gonna visit you.
930 _: {
931 downcastFn: ( widgetDef.downcast && typeof widgetDef.downcast == 'string' ) ?
932 widgetDef.downcasts[ widgetDef.downcast ] : widgetDef.downcast
933 }
934 }, true );
935
936 /**
937 * An object of widget component elements.
938 *
939 * For every `partName => selector` pair in {@link CKEDITOR.plugins.widget.definition#parts},
940 * one `partName => element` pair is added to this object during the widget initialization.
941 *
942 * @readonly
943 * @property {Object} parts
944 */
945
946 /**
947 * The template which will be used to create a new widget element (when the widget's command is executed).
948 * It will be populated with {@link #defaults default values}.
949 *
950 * @readonly
951 * @property {CKEDITOR.template} template
952 */
953
954 /**
955 * The widget wrapper &mdash; a non-editable `div` or `span` element (depending on {@link #inline})
956 * which is a parent of the {@link #element} and widget compontents like the drag handler and the {@link #mask}.
957 * It is the outermost widget element.
958 *
959 * @readonly
960 * @property {CKEDITOR.dom.element} wrapper
961 */
962
963 widgetsRepo.fire( 'instanceCreated', this );
964
965 setupWidget( this, widgetDef );
966
967 this.init && this.init();
968
969 // Finally mark widget as inited.
970 this.inited = true;
971
972 setupWidgetData( this, startupData );
973
974 // If at some point (e.g. in #data listener) widget hasn't been destroyed
975 // and widget is already attached to document then fire #ready.
976 if ( this.isInited() && editor.editable().contains( this.wrapper ) ) {
977 this.ready = true;
978 this.fire( 'ready' );
979 }
980 }
981
982 Widget.prototype = {
983 /**
984 * Adds a class to the widget element. This method is used by
985 * the {@link #applyStyle} method and should be overridden by widgets
986 * which should handle classes differently (e.g. add them to other elements).
987 *
988 * Since 4.6.0 this method also adds a corresponding class prefixed with {@link #WRAPPER_CLASS_PREFIX}
989 * to the widget wrapper element.
990 *
991 * **Note**: This method should not be used directly. Use the {@link #setData} method to
992 * set the `classes` property. Read more in the {@link #setData} documentation.
993 *
994 * See also: {@link #removeClass}, {@link #hasClass}, {@link #getClasses}.
995 *
996 * @since 4.4
997 * @param {String} className The class name to be added.
998 */
999 addClass: function( className ) {
1000 this.element.addClass( className );
1001 this.wrapper.addClass( Widget.WRAPPER_CLASS_PREFIX + className );
1002 },
1003
1004 /**
1005 * Applies the specified style to the widget. It is highly recommended to use the
1006 * {@link CKEDITOR.editor#applyStyle} or {@link CKEDITOR.style#apply} methods instead of
1007 * using this method directly, because unlike editor's and style's methods, this one
1008 * does not perform any checks.
1009 *
1010 * By default this method handles only classes defined in the style. It clones existing
1011 * classes which are stored in the {@link #property-data widget data}'s `classes` property,
1012 * adds new classes, and calls the {@link #setData} method if at least one new class was added.
1013 * Then, using the {@link #event-data} event listener widget applies modifications passing
1014 * new classes to the {@link #addClass} method.
1015 *
1016 * If you need to handle classes differently than in the default way, you can override the
1017 * {@link #addClass} and related methods. You can also handle other style properties than `classes`
1018 * by overriding this method.
1019 *
1020 * See also: {@link #checkStyleActive}, {@link #removeStyle}.
1021 *
1022 * @since 4.4
1023 * @param {CKEDITOR.style} style The custom widget style to be applied.
1024 */
1025 applyStyle: function( style ) {
1026 applyRemoveStyle( this, style, 1 );
1027 },
1028
1029 /**
1030 * Checks if the specified style is applied to this widget. It is highly recommended to use the
1031 * {@link CKEDITOR.style#checkActive} method instead of using this method directly,
1032 * because unlike style's method, this one does not perform any checks.
1033 *
1034 * By default this method handles only classes defined in the style and passes
1035 * them to the {@link #hasClass} method. You can override these methods to handle classes
1036 * differently or to handle more of the style properties.
1037 *
1038 * See also: {@link #applyStyle}, {@link #removeStyle}.
1039 *
1040 * @since 4.4
1041 * @param {CKEDITOR.style} style The custom widget style to be checked.
1042 * @returns {Boolean} Whether the style is applied to this widget.
1043 */
1044 checkStyleActive: function( style ) {
1045 var classes = getStyleClasses( style ),
1046 cl;
1047
1048 if ( !classes )
1049 return false;
1050
1051 while ( ( cl = classes.pop() ) ) {
1052 if ( !this.hasClass( cl ) )
1053 return false;
1054 }
1055 return true;
1056 },
1057
1058 /**
1059 * Destroys this widget instance.
1060 *
1061 * Use {@link CKEDITOR.plugins.widget.repository#destroy} when possible instead of this method.
1062 *
1063 * This method fires the {#event-destroy} event.
1064 *
1065 * @param {Boolean} [offline] Whether a widget is offline (detached from the DOM tree) &mdash;
1066 * in this case the DOM (attributes, classes, etc.) will not be cleaned up.
1067 */
1068 destroy: function( offline ) {
1069 this.fire( 'destroy' );
1070
1071 if ( this.editables ) {
1072 for ( var name in this.editables )
1073 this.destroyEditable( name, offline );
1074 }
1075
1076 if ( !offline ) {
1077 if ( this.element.data( 'cke-widget-keep-attr' ) == '0' )
1078 this.element.removeAttribute( 'data-widget' );
1079 this.element.removeAttributes( [ 'data-cke-widget-data', 'data-cke-widget-keep-attr' ] );
1080 this.element.removeClass( 'cke_widget_element' );
1081 this.element.replace( this.wrapper );
1082 }
1083
1084 this.wrapper = null;
1085 },
1086
1087 /**
1088 * Destroys a nested editable and all nested widgets.
1089 *
1090 * @param {String} editableName Nested editable name.
1091 * @param {Boolean} [offline] See {@link #method-destroy} method.
1092 */
1093 destroyEditable: function( editableName, offline ) {
1094 var editable = this.editables[ editableName ];
1095
1096 editable.removeListener( 'focus', onEditableFocus );
1097 editable.removeListener( 'blur', onEditableBlur );
1098 this.editor.focusManager.remove( editable );
1099
1100 if ( !offline ) {
1101 this.repository.destroyAll( false, editable );
1102 editable.removeClass( 'cke_widget_editable' );
1103 editable.removeClass( 'cke_widget_editable_focused' );
1104 editable.removeAttributes( [ 'contenteditable', 'data-cke-widget-editable', 'data-cke-enter-mode' ] );
1105 }
1106
1107 delete this.editables[ editableName ];
1108 },
1109
1110 /**
1111 * Starts widget editing.
1112 *
1113 * This method fires the {@link CKEDITOR.plugins.widget#event-edit} event
1114 * which may be canceled in order to prevent it from opening a dialog window.
1115 *
1116 * The dialog window name is obtained from the event's data `dialog` property or
1117 * from {@link CKEDITOR.plugins.widget.definition#dialog}.
1118 *
1119 * @returns {Boolean} Returns `true` if a dialog window was opened.
1120 */
1121 edit: function() {
1122 var evtData = { dialog: this.dialog },
1123 that = this;
1124
1125 // Edit event was blocked or there's no dialog to be automatically opened.
1126 if ( this.fire( 'edit', evtData ) === false || !evtData.dialog )
1127 return false;
1128
1129 this.editor.openDialog( evtData.dialog, function( dialog ) {
1130 var showListener,
1131 okListener;
1132
1133 // Allow to add a custom dialog handler.
1134 if ( that.fire( 'dialog', dialog ) === false )
1135 return;
1136
1137 showListener = dialog.on( 'show', function() {
1138 dialog.setupContent( that );
1139 } );
1140
1141 okListener = dialog.on( 'ok', function() {
1142 // Commit dialog's fields, but prevent from
1143 // firing data event for every field. Fire only one,
1144 // bulk event at the end.
1145 var dataChanged,
1146 dataListener = that.on( 'data', function( evt ) {
1147 dataChanged = 1;
1148 evt.cancel();
1149 }, null, null, 0 );
1150
1151 // Create snapshot preceeding snapshot with changed widget...
1152 // TODO it should not be required, but it is and I found similar
1153 // code in dialog#ok listener in dialog/plugin.js.
1154 that.editor.fire( 'saveSnapshot' );
1155 dialog.commitContent( that );
1156
1157 dataListener.removeListener();
1158 if ( dataChanged ) {
1159 that.fire( 'data', that.data );
1160 that.editor.fire( 'saveSnapshot' );
1161 }
1162 } );
1163
1164 dialog.once( 'hide', function() {
1165 showListener.removeListener();
1166 okListener.removeListener();
1167 } );
1168 } );
1169
1170 return true;
1171 },
1172
1173 /**
1174 * Returns widget element classes parsed to an object. This method
1175 * is used to populate the `classes` property of widget's {@link #property-data}.
1176 *
1177 * This method reuses {@link CKEDITOR.plugins.widget.repository#parseElementClasses}.
1178 * It should be overriden if a widget should handle classes differently (e.g. on other elements).
1179 *
1180 * See also: {@link #removeClass}, {@link #addClass}, {@link #hasClass}.
1181 *
1182 * @since 4.4
1183 * @returns {Object}
1184 */
1185 getClasses: function() {
1186 return this.repository.parseElementClasses( this.element.getAttribute( 'class' ) );
1187 },
1188
1189 /**
1190 * Checks if the widget element has specified class. This method is used by
1191 * the {@link #checkStyleActive} method and should be overriden by widgets
1192 * which should handle classes differently (e.g. on other elements).
1193 *
1194 * See also: {@link #removeClass}, {@link #addClass}, {@link #getClasses}.
1195 *
1196 * @since 4.4
1197 * @param {String} className The class to be checked.
1198 * @param {Boolean} Whether a widget has specified class.
1199 */
1200 hasClass: function( className ) {
1201 return this.element.hasClass( className );
1202 },
1203
1204 /**
1205 * Initializes a nested editable.
1206 *
1207 * **Note**: Only elements from {@link CKEDITOR.dtd#$editable} may become editables.
1208 *
1209 * @param {String} editableName The nested editable name.
1210 * @param {CKEDITOR.plugins.widget.nestedEditable.definition} definition The definition of the nested editable.
1211 * @returns {Boolean} Whether an editable was successfully initialized.
1212 */
1213 initEditable: function( editableName, definition ) {
1214 // Don't fetch just first element which matched selector but look for a correct one. (#13334)
1215 var editable = this._findOneNotNested( definition.selector );
1216
1217 if ( editable && editable.is( CKEDITOR.dtd.$editable ) ) {
1218 editable = new NestedEditable( this.editor, editable, {
1219 filter: createEditableFilter.call( this.repository, this.name, editableName, definition )
1220 } );
1221 this.editables[ editableName ] = editable;
1222
1223 editable.setAttributes( {
1224 contenteditable: 'true',
1225 'data-cke-widget-editable': editableName,
1226 'data-cke-enter-mode': editable.enterMode
1227 } );
1228
1229 if ( editable.filter )
1230 editable.data( 'cke-filter', editable.filter.id );
1231
1232 editable.addClass( 'cke_widget_editable' );
1233 // This class may be left when d&ding widget which
1234 // had focused editable. Clean this class here, not in
1235 // cleanUpWidgetElement for performance and code size reasons.
1236 editable.removeClass( 'cke_widget_editable_focused' );
1237
1238 if ( definition.pathName )
1239 editable.data( 'cke-display-name', definition.pathName );
1240
1241 this.editor.focusManager.add( editable );
1242 editable.on( 'focus', onEditableFocus, this );
1243 CKEDITOR.env.ie && editable.on( 'blur', onEditableBlur, this );
1244
1245 // Finally, process editable's data. This data wasn't processed when loading
1246 // editor's data, becuase they need to be processed separately, with its own filters and settings.
1247 editable._.initialSetData = true;
1248 editable.setData( editable.getHtml() );
1249
1250 return true;
1251 }
1252
1253 return false;
1254 },
1255
1256 /**
1257 * Looks inside wrapper element to find a node that
1258 * matches given selector and is not nested in other widget. (#13334)
1259 *
1260 * @since 4.5
1261 * @private
1262 * @param {String} selector Selector to match.
1263 * @returns {CKEDITOR.dom.element} Matched element or `null` if a node has not been found.
1264 */
1265 _findOneNotNested: function( selector ) {
1266 var matchedElements = this.wrapper.find( selector ),
1267 match,
1268 closestWrapper;
1269
1270 for ( var i = 0; i < matchedElements.count(); i++ ) {
1271 match = matchedElements.getItem( i );
1272 closestWrapper = match.getAscendant( Widget.isDomWidgetWrapper );
1273
1274 // The closest ascendant-wrapper of this match defines to which widget
1275 // this match belongs. If the ascendant is this widget's wrapper
1276 // it means that the match is not nested in other widget.
1277 if ( this.wrapper.equals( closestWrapper ) ) {
1278 return match;
1279 }
1280 }
1281
1282 return null;
1283 },
1284
1285 /**
1286 * Checks if a widget has already been initialized and has not been destroyed yet.
1287 *
1288 * See {@link #inited} for more details.
1289 *
1290 * @returns {Boolean}
1291 */
1292 isInited: function() {
1293 return !!( this.wrapper && this.inited );
1294 },
1295
1296 /**
1297 * Checks if a widget is ready and has not been destroyed yet.
1298 *
1299 * See {@link #property-ready} for more details.
1300 *
1301 * @returns {Boolean}
1302 */
1303 isReady: function() {
1304 return this.isInited() && this.ready;
1305 },
1306
1307 /**
1308 * Focuses a widget by selecting it.
1309 */
1310 focus: function() {
1311 var sel = this.editor.getSelection();
1312
1313 // Fake the selection before focusing editor, to avoid unpreventable viewports scrolling
1314 // on Webkit/Blink/IE which is done because there's no selection or selection was somewhere else than widget.
1315 if ( sel ) {
1316 var isDirty = this.editor.checkDirty();
1317
1318 sel.fake( this.wrapper );
1319
1320 !isDirty && this.editor.resetDirty();
1321 }
1322
1323 // Always focus editor (not only when focusManger.hasFocus is false) (because of #10483).
1324 this.editor.focus();
1325 },
1326
1327 /**
1328 * Removes a class from the widget element. This method is used by
1329 * the {@link #removeStyle} method and should be overriden by widgets
1330 * which should handle classes differently (e.g. on other elements).
1331 *
1332 * **Note**: This method should not be used directly. Use the {@link #setData} method to
1333 * set the `classes` property. Read more in the {@link #setData} documentation.
1334 *
1335 * See also: {@link #hasClass}, {@link #addClass}.
1336 *
1337 * @since 4.4
1338 * @param {String} className The class to be removed.
1339 */
1340 removeClass: function( className ) {
1341 this.element.removeClass( className );
1342 this.wrapper.removeClass( Widget.WRAPPER_CLASS_PREFIX + className );
1343 },
1344
1345 /**
1346 * Removes the specified style from the widget. It is highly recommended to use the
1347 * {@link CKEDITOR.editor#removeStyle} or {@link CKEDITOR.style#remove} methods instead of
1348 * using this method directly, because unlike editor's and style's methods, this one
1349 * does not perform any checks.
1350 *
1351 * Read more about how applying/removing styles works in the {@link #applyStyle} method documentation.
1352 *
1353 * See also {@link #checkStyleActive}, {@link #applyStyle}, {@link #getClasses}.
1354 *
1355 * @since 4.4
1356 * @param {CKEDITOR.style} style The custom widget style to be removed.
1357 */
1358 removeStyle: function( style ) {
1359 applyRemoveStyle( this, style, 0 );
1360 },
1361
1362 /**
1363 * Sets widget value(s) in the {@link #property-data} object.
1364 * If the given value(s) modifies current ones, the {@link #event-data} event is fired.
1365 *
1366 * this.setData( 'align', 'left' );
1367 * this.data.align; // -> 'left'
1368 *
1369 * this.setData( { align: 'right', opened: false } );
1370 * this.data.align; // -> 'right'
1371 * this.data.opened; // -> false
1372 *
1373 * Set values are stored in {@link #element}'s attribute (`data-cke-widget-data`),
1374 * in a JSON string, therefore {@link #property-data} should contain
1375 * only serializable data.
1376 *
1377 * **Note:** A special data property, `classes`, exists. It contains an object with
1378 * classes which were returned by the {@link #getClasses} method during the widget initialization.
1379 * This property is then used by the {@link #applyStyle} and {@link #removeStyle} methods.
1380 * When it is changed (the reference to object must be changed!), the widget updates its classes by
1381 * using the {@link #addClass} and {@link #removeClass} methods.
1382 *
1383 * // Adding a new class.
1384 * var classes = CKEDITOR.tools.clone( widget.data.classes );
1385 * classes.newClass = 1;
1386 * widget.setData( 'classes', classes );
1387 *
1388 * // Removing a class.
1389 * var classes = CKEDITOR.tools.clone( widget.data.classes );
1390 * delete classes.newClass;
1391 * widget.setData( 'classes', classes );
1392 *
1393 * @param {String/Object} keyOrData
1394 * @param {Object} value
1395 * @chainable
1396 */
1397 setData: function( key, value ) {
1398 var data = this.data,
1399 modified = 0;
1400
1401 if ( typeof key == 'string' ) {
1402 if ( data[ key ] !== value ) {
1403 data[ key ] = value;
1404 modified = 1;
1405 }
1406 }
1407 else {
1408 var newData = key;
1409
1410 for ( key in newData ) {
1411 if ( data[ key ] !== newData[ key ] ) {
1412 modified = 1;
1413 data[ key ] = newData[ key ];
1414 }
1415 }
1416 }
1417
1418 // Block firing data event and overwriting data element before setupWidgetData is executed.
1419 if ( modified && this.dataReady ) {
1420 writeDataToElement( this );
1421 this.fire( 'data', data );
1422 }
1423
1424 return this;
1425 },
1426
1427 /**
1428 * Changes the widget's focus state. This method is executed automatically after
1429 * a widget was focused by the {@link #method-focus} method or the selection was moved
1430 * out of the widget.
1431 *
1432 * This is a low-level method which is not integrated with e.g. the undo manager.
1433 * Use the {@link #method-focus} method instead.
1434 *
1435 * @param {Boolean} selected Whether to select or deselect this widget.
1436 * @chainable
1437 */
1438 setFocused: function( focused ) {
1439 this.wrapper[ focused ? 'addClass' : 'removeClass' ]( 'cke_widget_focused' );
1440 this.fire( focused ? 'focus' : 'blur' );
1441 return this;
1442 },
1443
1444 /**
1445 * Changes the widget's select state. This method is executed automatically after
1446 * a widget was selected by the {@link #method-focus} method or the selection
1447 * was moved out of the widget.
1448 *
1449 * This is a low-level method which is not integrated with e.g. the undo manager.
1450 * Use the {@link #method-focus} method instead or simply change the selection.
1451 *
1452 * @param {Boolean} selected Whether to select or deselect this widget.
1453 * @chainable
1454 */
1455 setSelected: function( selected ) {
1456 this.wrapper[ selected ? 'addClass' : 'removeClass' ]( 'cke_widget_selected' );
1457 this.fire( selected ? 'select' : 'deselect' );
1458 return this;
1459 },
1460
1461 /**
1462 * Repositions drag handler according to the widget's element position. Should be called from events, like mouseover.
1463 */
1464 updateDragHandlerPosition: function() {
1465 var editor = this.editor,
1466 domElement = this.element.$,
1467 oldPos = this._.dragHandlerOffset,
1468 newPos = {
1469 x: domElement.offsetLeft,
1470 y: domElement.offsetTop - DRAG_HANDLER_SIZE
1471 };
1472
1473 if ( oldPos && newPos.x == oldPos.x && newPos.y == oldPos.y )
1474 return;
1475
1476 // We need to make sure that dirty state is not changed (#11487).
1477 var initialDirty = editor.checkDirty();
1478
1479 editor.fire( 'lockSnapshot' );
1480 this.dragHandlerContainer.setStyles( {
1481 top: newPos.y + 'px',
1482 left: newPos.x + 'px',
1483 display: 'block'
1484 } );
1485 editor.fire( 'unlockSnapshot' );
1486 !initialDirty && editor.resetDirty();
1487
1488 this._.dragHandlerOffset = newPos;
1489 }
1490 };
1491
1492 CKEDITOR.event.implementOn( Widget.prototype );
1493
1494 /**
1495 * Gets the {@link #isDomNestedEditable nested editable}
1496 * (returned as a {@link CKEDITOR.dom.element}, not as a {@link CKEDITOR.plugins.widget.nestedEditable})
1497 * closest to the `node` or the `node` if it is a nested editable itself.
1498 *
1499 * @since 4.5
1500 * @static
1501 * @param {CKEDITOR.dom.element} guard Stop ancestor search on this node (usually editor's editable).
1502 * @param {CKEDITOR.dom.node} node Start the search from this node.
1503 * @returns {CKEDITOR.dom.element/null} Element or `null` if not found.
1504 */
1505 Widget.getNestedEditable = function( guard, node ) {
1506 if ( !node || node.equals( guard ) )
1507 return null;
1508
1509 if ( Widget.isDomNestedEditable( node ) )
1510 return node;
1511
1512 return Widget.getNestedEditable( guard, node.getParent() );
1513 };
1514
1515 /**
1516 * Checks whether the `node` is a widget's drag handle element.
1517 *
1518 * @since 4.5
1519 * @static
1520 * @param {CKEDITOR.dom.node} node
1521 * @returns {Boolean}
1522 */
1523 Widget.isDomDragHandler = function( node ) {
1524 return node.type == CKEDITOR.NODE_ELEMENT && node.hasAttribute( 'data-cke-widget-drag-handler' );
1525 };
1526
1527 /**
1528 * Checks whether the `node` is a container of the widget's drag handle element.
1529 *
1530 * @since 4.5
1531 * @static
1532 * @param {CKEDITOR.dom.node} node
1533 * @returns {Boolean}
1534 */
1535 Widget.isDomDragHandlerContainer = function( node ) {
1536 return node.type == CKEDITOR.NODE_ELEMENT && node.hasClass( 'cke_widget_drag_handler_container' );
1537 };
1538
1539 /**
1540 * Checks whether the `node` is a {@link CKEDITOR.plugins.widget#editables nested editable}.
1541 * Note that this function only checks whether it is the right element, not whether
1542 * the passed `node` is an instance of {@link CKEDITOR.plugins.widget.nestedEditable}.
1543 *
1544 * @since 4.5
1545 * @static
1546 * @param {CKEDITOR.dom.node} node
1547 * @returns {Boolean}
1548 */
1549 Widget.isDomNestedEditable = function( node ) {
1550 return node.type == CKEDITOR.NODE_ELEMENT && node.hasAttribute( 'data-cke-widget-editable' );
1551 };
1552
1553 /**
1554 * Checks whether the `node` is a {@link CKEDITOR.plugins.widget#element widget element}.
1555 *
1556 * @since 4.5
1557 * @static
1558 * @param {CKEDITOR.dom.node} node
1559 * @returns {Boolean}
1560 */
1561 Widget.isDomWidgetElement = function( node ) {
1562 return node.type == CKEDITOR.NODE_ELEMENT && node.hasAttribute( 'data-widget' );
1563 };
1564
1565 /**
1566 * Checks whether the `node` is a {@link CKEDITOR.plugins.widget#wrapper widget wrapper}.
1567 *
1568 * @since 4.5
1569 * @static
1570 * @param {CKEDITOR.dom.element} node
1571 * @returns {Boolean}
1572 */
1573 Widget.isDomWidgetWrapper = function( node ) {
1574 return node.type == CKEDITOR.NODE_ELEMENT && node.hasAttribute( 'data-cke-widget-wrapper' );
1575 };
1576
1577 /**
1578 * Checks whether the `node` is a {@link CKEDITOR.plugins.widget#element widget element}.
1579 *
1580 * @since 4.5
1581 * @static
1582 * @param {CKEDITOR.htmlParser.node} node
1583 * @returns {Boolean}
1584 */
1585 Widget.isParserWidgetElement = function( node ) {
1586 return node.type == CKEDITOR.NODE_ELEMENT && !!node.attributes[ 'data-widget' ];
1587 };
1588
1589 /**
1590 * Checks whether the `node` is a {@link CKEDITOR.plugins.widget#wrapper widget wrapper}.
1591 *
1592 * @since 4.5
1593 * @static
1594 * @param {CKEDITOR.htmlParser.element} node
1595 * @returns {Boolean}
1596 */
1597 Widget.isParserWidgetWrapper = function( node ) {
1598 return node.type == CKEDITOR.NODE_ELEMENT && !!node.attributes[ 'data-cke-widget-wrapper' ];
1599 };
1600
1601 /**
1602 * Prefix added to wrapper classes. Each class added to the widget element by the {@link #addClass}
1603 * method will also be added to the wrapper prefixed with it.
1604 *
1605 * @since 4.6.0
1606 * @static
1607 * @readonly
1608 * @property {String} [='cke_widget_wrapper_']
1609 */
1610 Widget.WRAPPER_CLASS_PREFIX = 'cke_widget_wrapper_';
1611
1612 /**
1613 * An event fired when a widget is ready (fully initialized). This event is fired after:
1614 *
1615 * * {@link #init} is called,
1616 * * The first {@link #event-data} event is fired,
1617 * * A widget is attached to the document.
1618 *
1619 * Therefore, in case of widget creation with a command which opens a dialog window, this event
1620 * will be delayed after the dialog window is closed and the widget is finally inserted into the document.
1621 *
1622 * **Note**: If your widget does not use automatic dialog window binding (i.e. you open the dialog window manually)
1623 * or another situation in which the widget wrapper is not attached to document at the time when it is
1624 * initialized occurs, you need to take care of firing {@link #event-ready} yourself.
1625 *
1626 * See also {@link #property-ready} and {@link #property-inited} properties, and
1627 * {@link #isReady} and {@link #isInited} methods.
1628 *
1629 * @event ready
1630 */
1631
1632 /**
1633 * An event fired when a widget is about to be destroyed, but before it is
1634 * fully torn down.
1635 *
1636 * @event destroy
1637 */
1638
1639 /**
1640 * An event fired when a widget is focused.
1641 *
1642 * Widget can be focused by executing {@link #method-focus}.
1643 *
1644 * @event focus
1645 */
1646
1647 /**
1648 * An event fired when a widget is blurred.
1649 *
1650 * @event blur
1651 */
1652
1653 /**
1654 * An event fired when a widget is selected.
1655 *
1656 * @event select
1657 */
1658
1659 /**
1660 * An event fired when a widget is deselected.
1661 *
1662 * @event deselect
1663 */
1664
1665 /**
1666 * An event fired by the {@link #method-edit} method. It can be canceled
1667 * in order to stop the default action (opening a dialog window and/or
1668 * {@link CKEDITOR.plugins.widget.repository#finalizeCreation finalizing widget creation}).
1669 *
1670 * @event edit
1671 * @param data
1672 * @param {String} data.dialog Defaults to {@link CKEDITOR.plugins.widget.definition#dialog}
1673 * and can be changed or set by the listener.
1674 */
1675
1676 /**
1677 * An event fired when a dialog window for widget editing is opened.
1678 * This event can be canceled in order to handle the editing dialog in a custom manner.
1679 *
1680 * @event dialog
1681 * @param {CKEDITOR.dialog} data The opened dialog window instance.
1682 */
1683
1684 /**
1685 * An event fired when a key is pressed on a focused widget.
1686 * This event is forwarded from the {@link CKEDITOR.editor#key} event and
1687 * has the ability to block editor keystrokes if it is canceled.
1688 *
1689 * @event key
1690 * @param data
1691 * @param {Number} data.keyCode A number representing the key code (or combination).
1692 */
1693
1694 /**
1695 * An event fired when a widget is double clicked.
1696 *
1697 * **Note:** If a default editing action is executed on double click (i.e. a widget has a
1698 * {@link CKEDITOR.plugins.widget.definition#dialog dialog} defined and the {@link #event-doubleclick} event was not
1699 * canceled), this event will be automatically canceled, so a listener added with the default priority (10)
1700 * will not be executed. Use a listener with low priority (e.g. 5) to be sure that it will be executed.
1701 *
1702 * widget.on( 'doubleclick', function( evt ) {
1703 * console.log( 'widget#doubleclick' );
1704 * }, null, null, 5 );
1705 *
1706 * If your widget handles double click in a special way (so the default editing action is not executed),
1707 * make sure you cancel this event, because otherwise it will be propagated to {@link CKEDITOR.editor#doubleclick}
1708 * and another feature may step in (e.g. a Link dialog window may be opened if your widget was inside a link).
1709 *
1710 * @event doubleclick
1711 * @param data
1712 * @param {CKEDITOR.dom.element} data.element The double-clicked element.
1713 */
1714
1715 /**
1716 * An event fired when the context menu is opened for a widget.
1717 *
1718 * @event contextMenu
1719 * @param data The object containing context menu options to be added
1720 * for this widget. See {@link CKEDITOR.plugins.contextMenu#addListener}.
1721 */
1722
1723 /**
1724 * An event fired when the widget data changed. See the {@link #setData} method and the {@link #property-data} property.
1725 *
1726 * @event data
1727 */
1728
1729
1730
1731 /**
1732 * The wrapper class for editable elements inside widgets.
1733 *
1734 * Do not use directly. Use {@link CKEDITOR.plugins.widget.definition#editables} or
1735 * {@link CKEDITOR.plugins.widget#initEditable}.
1736 *
1737 * @class CKEDITOR.plugins.widget.nestedEditable
1738 * @extends CKEDITOR.dom.element
1739 * @constructor
1740 * @param {CKEDITOR.editor} editor
1741 * @param {CKEDITOR.dom.element} element
1742 * @param config
1743 * @param {CKEDITOR.filter} [config.filter]
1744 */
1745 function NestedEditable( editor, element, config ) {
1746 // Call the base constructor.
1747 CKEDITOR.dom.element.call( this, element.$ );
1748 this.editor = editor;
1749 this._ = {};
1750 var filter = this.filter = config.filter;
1751
1752 // If blockless editable - always use BR mode.
1753 if ( !CKEDITOR.dtd[ this.getName() ].p )
1754 this.enterMode = this.shiftEnterMode = CKEDITOR.ENTER_BR;
1755 else {
1756 this.enterMode = filter ? filter.getAllowedEnterMode( editor.enterMode ) : editor.enterMode;
1757 this.shiftEnterMode = filter ? filter.getAllowedEnterMode( editor.shiftEnterMode, true ) : editor.shiftEnterMode;
1758 }
1759 }
1760
1761 NestedEditable.prototype = CKEDITOR.tools.extend( CKEDITOR.tools.prototypedCopy( CKEDITOR.dom.element.prototype ), {
1762 /**
1763 * Sets the editable data. The data will be passed through the {@link CKEDITOR.editor#dataProcessor}
1764 * and the {@link CKEDITOR.editor#filter}. This ensures that the data was filtered and prepared to be
1765 * edited like the {@link CKEDITOR.editor#method-setData editor data}.
1766 *
1767 * Before content is changed, all nested widgets are destroyed. Afterwards, after new content is loaded,
1768 * all nested widgets are initialized.
1769 *
1770 * @param {String} data
1771 */
1772 setData: function( data ) {
1773 // For performance reasons don't call destroyAll when initializing a nested editable,
1774 // because there are no widgets inside.
1775 if ( !this._.initialSetData ) {
1776 // Destroy all nested widgets before setting data.
1777 this.editor.widgets.destroyAll( false, this );
1778 }
1779 this._.initialSetData = false;
1780
1781 data = this.editor.dataProcessor.toHtml( data, {
1782 context: this.getName(),
1783 filter: this.filter,
1784 enterMode: this.enterMode
1785 } );
1786 this.setHtml( data );
1787
1788 this.editor.widgets.initOnAll( this );
1789 },
1790
1791 /**
1792 * Gets the editable data. Like {@link #setData}, this method will process and filter the data.
1793 *
1794 * @returns {String}
1795 */
1796 getData: function() {
1797 return this.editor.dataProcessor.toDataFormat( this.getHtml(), {
1798 context: this.getName(),
1799 filter: this.filter,
1800 enterMode: this.enterMode
1801 } );
1802 }
1803 } );
1804
1805 /**
1806 * The editor instance.
1807 *
1808 * @readonly
1809 * @property {CKEDITOR.editor} editor
1810 */
1811
1812 /**
1813 * The filter instance if allowed content rules were defined.
1814 *
1815 * @readonly
1816 * @property {CKEDITOR.filter} filter
1817 */
1818
1819 /**
1820 * The enter mode active in this editable.
1821 * It is determined from editable's name (whether it is a blockless editable),
1822 * its allowed content rules (if defined) and the default editor's mode.
1823 *
1824 * @readonly
1825 * @property {Number} enterMode
1826 */
1827
1828 /**
1829 * The shift enter move active in this editable.
1830 *
1831 * @readonly
1832 * @property {Number} shiftEnterMode
1833 */
1834
1835
1836 //
1837 // REPOSITORY helpers -----------------------------------------------------
1838 //
1839
1840 function addWidgetButtons( editor ) {
1841 var widgets = editor.widgets.registered,
1842 widget,
1843 widgetName,
1844 widgetButton;
1845
1846 for ( widgetName in widgets ) {
1847 widget = widgets[ widgetName ];
1848
1849 // Create button if defined.
1850 widgetButton = widget.button;
1851 if ( widgetButton && editor.ui.addButton ) {
1852 editor.ui.addButton( CKEDITOR.tools.capitalize( widget.name, true ), {
1853 label: widgetButton,
1854 command: widget.name,
1855 toolbar: 'insert,10'
1856 } );
1857 }
1858 }
1859 }
1860
1861 // Create a command creating and editing widget.
1862 //
1863 // @param editor
1864 // @param {CKEDITOR.plugins.widget.definition} widgetDef
1865 function addWidgetCommand( editor, widgetDef ) {
1866 editor.addCommand( widgetDef.name, {
1867 exec: function( editor, commandData ) {
1868 var focused = editor.widgets.focused;
1869 // If a widget of the same type is focused, start editing.
1870 if ( focused && focused.name == widgetDef.name )
1871 focused.edit();
1872 // Otherwise...
1873 // ... use insert method is was defined.
1874 else if ( widgetDef.insert )
1875 widgetDef.insert();
1876 // ... or create a brand-new widget from template.
1877 else if ( widgetDef.template ) {
1878 var defaults = typeof widgetDef.defaults == 'function' ? widgetDef.defaults() : widgetDef.defaults,
1879 element = CKEDITOR.dom.element.createFromHtml( widgetDef.template.output( defaults ) ),
1880 instance,
1881 wrapper = editor.widgets.wrapElement( element, widgetDef.name ),
1882 temp = new CKEDITOR.dom.documentFragment( wrapper.getDocument() );
1883
1884 // Append wrapper to a temporary document. This will unify the environment
1885 // in which #data listeners work when creating and editing widget.
1886 temp.append( wrapper );
1887 instance = editor.widgets.initOn( element, widgetDef, commandData && commandData.startupData );
1888
1889 // Instance could be destroyed during initialization.
1890 // In this case finalize creation if some new widget
1891 // was left in temporary document fragment.
1892 if ( !instance ) {
1893 finalizeCreation();
1894 return;
1895 }
1896
1897 // Listen on edit to finalize widget insertion.
1898 //
1899 // * If dialog was set, then insert widget after dialog was successfully saved or destroy this
1900 // temporary instance.
1901 // * If dialog wasn't set and edit wasn't canceled, insert widget.
1902 var editListener = instance.once( 'edit', function( evt ) {
1903 if ( evt.data.dialog ) {
1904 instance.once( 'dialog', function( evt ) {
1905 var dialog = evt.data,
1906 okListener,
1907 cancelListener;
1908
1909 // Finalize creation AFTER (20) new data was set.
1910 okListener = dialog.once( 'ok', finalizeCreation, null, null, 20 );
1911
1912 cancelListener = dialog.once( 'cancel', function( evt ) {
1913 if ( !( evt.data && evt.data.hide === false ) ) {
1914 editor.widgets.destroy( instance, true );
1915 }
1916 } );
1917
1918 dialog.once( 'hide', function() {
1919 okListener.removeListener();
1920 cancelListener.removeListener();
1921 } );
1922 } );
1923 } else {
1924 // Dialog hasn't been set, so insert widget now.
1925 finalizeCreation();
1926 }
1927 }, null, null, 999 );
1928
1929 instance.edit();
1930
1931 // Remove listener in case someone canceled it before this
1932 // listener was executed.
1933 editListener.removeListener();
1934 }
1935
1936 function finalizeCreation() {
1937 editor.widgets.finalizeCreation( temp );
1938 }
1939 },
1940
1941 allowedContent: widgetDef.allowedContent,
1942 requiredContent: widgetDef.requiredContent,
1943 contentForms: widgetDef.contentForms,
1944 contentTransformations: widgetDef.contentTransformations
1945 } );
1946 }
1947
1948 function addWidgetProcessors( widgetsRepo, widgetDef ) {
1949 var upcast = widgetDef.upcast,
1950 upcasts,
1951 priority = widgetDef.upcastPriority || 10;
1952
1953 if ( !upcast )
1954 return;
1955
1956 // Multiple upcasts defined in string.
1957 if ( typeof upcast == 'string' ) {
1958 upcasts = upcast.split( ',' );
1959 while ( upcasts.length ) {
1960 addUpcast( widgetDef.upcasts[ upcasts.pop() ], widgetDef.name, priority );
1961 }
1962 }
1963 // Single rule which is automatically activated.
1964 else {
1965 addUpcast( upcast, widgetDef.name, priority );
1966 }
1967
1968 function addUpcast( upcast, name, priority ) {
1969 // Find index of the first higher (in terms of value) priority upcast.
1970 var index = CKEDITOR.tools.getIndex( widgetsRepo._.upcasts, function( element ) {
1971 return element[ 2 ] > priority;
1972 } );
1973 // Add at the end if it is the highest priority so far.
1974 if ( index < 0 ) {
1975 index = widgetsRepo._.upcasts.length;
1976 }
1977
1978 widgetsRepo._.upcasts.splice( index, 0, [ upcast, name, priority ] );
1979 }
1980 }
1981
1982 function blurWidget( widgetsRepo, widget ) {
1983 widgetsRepo.focused = null;
1984
1985 if ( widget.isInited() ) {
1986 var isDirty = widget.editor.checkDirty();
1987
1988 // Widget could be destroyed in the meantime - e.g. data could be set.
1989 widgetsRepo.fire( 'widgetBlurred', { widget: widget } );
1990 widget.setFocused( false );
1991
1992 !isDirty && widget.editor.resetDirty();
1993 }
1994 }
1995
1996 function checkWidgets( evt ) {
1997 var options = evt.data;
1998
1999 if ( this.editor.mode != 'wysiwyg' )
2000 return;
2001
2002 var editable = this.editor.editable(),
2003 instances = this.instances,
2004 newInstances, i, count, wrapper, notYetInitialized;
2005
2006 if ( !editable )
2007 return;
2008
2009 // Remove widgets which have no corresponding elements in DOM.
2010 for ( i in instances ) {
2011 // #13410 Remove widgets that are ready. This prevents from destroying widgets that are during loading process.
2012 if ( instances[ i ].isReady() && !editable.contains( instances[ i ].wrapper ) )
2013 this.destroy( instances[ i ], true );
2014 }
2015
2016 // Init on all (new) if initOnlyNew option was passed.
2017 if ( options && options.initOnlyNew )
2018 newInstances = this.initOnAll();
2019 else {
2020 var wrappers = editable.find( '.cke_widget_wrapper' );
2021 newInstances = [];
2022
2023 // Create widgets on existing wrappers if they do not exists.
2024 for ( i = 0, count = wrappers.count(); i < count; i++ ) {
2025 wrapper = wrappers.getItem( i );
2026 notYetInitialized = !this.getByElement( wrapper, true );
2027
2028 // Check if:
2029 // * there's no instance for this widget
2030 // * wrapper is not inside some temporary element like copybin (#11088)
2031 // * it was a nested widget's wrapper which has been detached from DOM,
2032 // when nested editable has been initialized (it overwrites its innerHTML
2033 // and initializes nested widgets).
2034 if ( notYetInitialized && !findParent( wrapper, isDomTemp ) && editable.contains( wrapper ) ) {
2035 // Add cke_widget_new class because otherwise
2036 // widget will not be created on such wrapper.
2037 wrapper.addClass( 'cke_widget_new' );
2038 newInstances.push( this.initOn( wrapper.getFirst( Widget.isDomWidgetElement ) ) );
2039 }
2040 }
2041 }
2042
2043 // If only single widget was initialized and focusInited was passed, focus it.
2044 if ( options && options.focusInited && newInstances.length == 1 )
2045 newInstances[ 0 ].focus();
2046 }
2047
2048 // Unwraps widget element and clean up element.
2049 //
2050 // This function is used to clean up pasted widgets.
2051 // It should have similar result to widget#destroy plus
2052 // some additional adjustments, specific for pasting.
2053 //
2054 // @param {CKEDITOR.htmlParser.element} el
2055 function cleanUpWidgetElement( el ) {
2056 var parent = el.parent;
2057 if ( parent.type == CKEDITOR.NODE_ELEMENT && parent.attributes[ 'data-cke-widget-wrapper' ] )
2058 parent.replaceWith( el );
2059 }
2060
2061 // Similar to cleanUpWidgetElement, but works on DOM and finds
2062 // widget elements by its own.
2063 //
2064 // Unlike cleanUpWidgetElement it will wrap element back.
2065 //
2066 // @param {CKEDITOR.dom.element} container
2067 function cleanUpAllWidgetElements( widgetsRepo, container ) {
2068 var wrappers = container.find( '.cke_widget_wrapper' ),
2069 wrapper, element,
2070 i = 0,
2071 l = wrappers.count();
2072
2073 for ( ; i < l; ++i ) {
2074 wrapper = wrappers.getItem( i );
2075 element = wrapper.getFirst( Widget.isDomWidgetElement );
2076 // If wrapper contains widget element - unwrap it and wrap again.
2077 if ( element.type == CKEDITOR.NODE_ELEMENT && element.data( 'widget' ) ) {
2078 element.replace( wrapper );
2079 widgetsRepo.wrapElement( element );
2080 } else {
2081 // Otherwise - something is wrong... clean this up.
2082 wrapper.remove();
2083 }
2084 }
2085 }
2086
2087 // Creates {@link CKEDITOR.filter} instance for given widget, editable and rules.
2088 //
2089 // Once filter for widget-editable pair is created it is cached, so the same instance
2090 // will be returned when method is executed again.
2091 //
2092 // @param {String} widgetName
2093 // @param {String} editableName
2094 // @param {CKEDITOR.plugins.widget.nestedEditableDefinition} editableDefinition The nested editable definition.
2095 // @returns {CKEDITOR.filter} Filter instance or `null` if rules are not defined.
2096 // @context CKEDITOR.plugins.widget.repository
2097 function createEditableFilter( widgetName, editableName, editableDefinition ) {
2098 if ( !editableDefinition.allowedContent )
2099 return null;
2100
2101 var editables = this._.filters[ widgetName ];
2102
2103 if ( !editables )
2104 this._.filters[ widgetName ] = editables = {};
2105
2106 var filter = editables[ editableName ];
2107
2108 if ( !filter )
2109 editables[ editableName ] = filter = new CKEDITOR.filter( editableDefinition.allowedContent );
2110
2111 return filter;
2112 }
2113
2114 // Creates an iterator function which when executed on all
2115 // elements in DOM tree will gather elements that should be wrapped
2116 // and initialized as widgets.
2117 function createUpcastIterator( widgetsRepo ) {
2118 var toBeWrapped = [],
2119 upcasts = widgetsRepo._.upcasts,
2120 upcastCallbacks = widgetsRepo._.upcastCallbacks;
2121
2122 return {
2123 toBeWrapped: toBeWrapped,
2124
2125 iterator: function( element ) {
2126 var upcast, upcasted,
2127 data,
2128 i,
2129 upcastsLength,
2130 upcastCallbacksLength;
2131
2132 // Wrapper found - find widget element, add it to be
2133 // cleaned up (unwrapped) and wrapped and stop iterating in this branch.
2134 if ( 'data-cke-widget-wrapper' in element.attributes ) {
2135 element = element.getFirst( Widget.isParserWidgetElement );
2136
2137 if ( element )
2138 toBeWrapped.push( [ element ] );
2139
2140 // Do not iterate over descendants.
2141 return false;
2142 }
2143 // Widget element found - add it to be cleaned up (just in case)
2144 // and wrapped and stop iterating in this branch.
2145 else if ( 'data-widget' in element.attributes ) {
2146 toBeWrapped.push( [ element ] );
2147
2148 // Do not iterate over descendants.
2149 return false;
2150 }
2151 else if ( ( upcastsLength = upcasts.length ) ) {
2152 // Ignore elements with data-cke-widget-upcasted to avoid multiple upcasts (#11533).
2153 // Do not iterate over descendants.
2154 if ( element.attributes[ 'data-cke-widget-upcasted' ] )
2155 return false;
2156
2157 // Check element with upcast callbacks first.
2158 // If any of them return false abort upcasting.
2159 for ( i = 0, upcastCallbacksLength = upcastCallbacks.length; i < upcastCallbacksLength; ++i ) {
2160 if ( upcastCallbacks[ i ]( element ) === false )
2161 return;
2162 // Return nothing in order to continue iterating over ascendants.
2163 // See http://dev.ckeditor.com/ticket/11186#comment:6
2164 }
2165
2166 for ( i = 0; i < upcastsLength; ++i ) {
2167 upcast = upcasts[ i ];
2168 data = {};
2169
2170 if ( ( upcasted = upcast[ 0 ]( element, data ) ) ) {
2171 // If upcast function returned element, upcast this one.
2172 // It can be e.g. a new element wrapping the original one.
2173 if ( upcasted instanceof CKEDITOR.htmlParser.element )
2174 element = upcasted;
2175
2176 // Set initial data attr with data from upcast method.
2177 element.attributes[ 'data-cke-widget-data' ] = encodeURIComponent( JSON.stringify( data ) );
2178 element.attributes[ 'data-cke-widget-upcasted' ] = 1;
2179
2180 toBeWrapped.push( [ element, upcast[ 1 ] ] );
2181
2182 // Do not iterate over descendants.
2183 return false;
2184 }
2185 }
2186 }
2187 }
2188 };
2189 }
2190
2191 // Finds a first parent that matches query.
2192 //
2193 // @param {CKEDITOR.dom.element} element
2194 // @param {Function} query
2195 function findParent( element, query ) {
2196 var parent = element;
2197
2198 while ( ( parent = parent.getParent() ) ) {
2199 if ( query( parent ) )
2200 return true;
2201 }
2202 return false;
2203 }
2204
2205 function getWrapperAttributes( inlineWidget, name ) {
2206 return {
2207 // tabindex="-1" means that it can receive focus by code.
2208 tabindex: -1,
2209 contenteditable: 'false',
2210 'data-cke-widget-wrapper': 1,
2211 'data-cke-filter': 'off',
2212 // Class cke_widget_new marks widgets which haven't been initialized yet.
2213 'class': 'cke_widget_wrapper cke_widget_new cke_widget_' +
2214 ( inlineWidget ? 'inline' : 'block' ) +
2215 ( name ? ' cke_widget_' + name : '' )
2216 };
2217 }
2218
2219 // Inserts element at given index.
2220 // It will check DTD and split ancestor elements up to the first
2221 // that can contain this element.
2222 //
2223 // @param {CKEDITOR.htmlParser.element} parent
2224 // @param {Number} index
2225 // @param {CKEDITOR.htmlParser.element} element
2226 function insertElement( parent, index, element ) {
2227 // Do not split doc fragment...
2228 if ( parent.type == CKEDITOR.NODE_ELEMENT ) {
2229 var parentAllows = CKEDITOR.dtd[ parent.name ];
2230 // Parent element is known (included in DTD) and cannot contain
2231 // this element.
2232 if ( parentAllows && !parentAllows[ element.name ] ) {
2233 var parent2 = parent.split( index ),
2234 parentParent = parent.parent;
2235
2236 // Element will now be inserted at right parent's index.
2237 index = parent2.getIndex();
2238
2239 // If left part of split is empty - remove it.
2240 if ( !parent.children.length ) {
2241 index -= 1;
2242 parent.remove();
2243 }
2244
2245 // If right part of split is empty - remove it.
2246 if ( !parent2.children.length )
2247 parent2.remove();
2248
2249 // Try inserting as grandpas' children.
2250 return insertElement( parentParent, index, element );
2251 }
2252 }
2253
2254 // Finally we can add this element.
2255 parent.add( element, index );
2256 }
2257
2258 // Checks whether for the given widget definition and element widget should be created in inline or block mode.
2259 //
2260 // See also: {@link CKEDITOR.plugins.widget.definition#inline} and {@link CKEDITOR.plugins.widget#element}.
2261 //
2262 // @param {CKEDITOR.plugins.widget.definition} widgetDef The widget definition.
2263 // @param {String} elementName The name of the widget element.
2264 // @returns {Boolean}
2265 function isWidgetInline( widgetDef, elementName ) {
2266 return typeof widgetDef.inline == 'boolean' ? widgetDef.inline : !!CKEDITOR.dtd.$inline[ elementName ];
2267 }
2268
2269 // @param {CKEDITOR.dom.element}
2270 // @returns {Boolean}
2271 function isDomTemp( element ) {
2272 return element.hasAttribute( 'data-cke-temp' );
2273 }
2274
2275 function onEditableKey( widget, keyCode ) {
2276 var focusedEditable = widget.focusedEditable,
2277 range;
2278
2279 // CTRL+A.
2280 if ( keyCode == CKEDITOR.CTRL + 65 ) {
2281 var bogus = focusedEditable.getBogus();
2282
2283 range = widget.editor.createRange();
2284 range.selectNodeContents( focusedEditable );
2285 // Exclude bogus if exists.
2286 if ( bogus )
2287 range.setEndAt( bogus, CKEDITOR.POSITION_BEFORE_START );
2288
2289 range.select();
2290 // Cancel event - block default.
2291 return false;
2292 }
2293 // DEL or BACKSPACE.
2294 else if ( keyCode == 8 || keyCode == 46 ) {
2295 var ranges = widget.editor.getSelection().getRanges();
2296
2297 range = ranges[ 0 ];
2298
2299 // Block del or backspace if at editable's boundary.
2300 return !( ranges.length == 1 && range.collapsed &&
2301 range.checkBoundaryOfElement( focusedEditable, CKEDITOR[ keyCode == 8 ? 'START' : 'END' ] ) );
2302 }
2303 }
2304
2305 function setFocusedEditable( widgetsRepo, widget, editableElement, offline ) {
2306 var editor = widgetsRepo.editor;
2307
2308 editor.fire( 'lockSnapshot' );
2309
2310 if ( editableElement ) {
2311 var editableName = editableElement.data( 'cke-widget-editable' ),
2312 editableInstance = widget.editables[ editableName ];
2313
2314 widgetsRepo.widgetHoldingFocusedEditable = widget;
2315 widget.focusedEditable = editableInstance;
2316 editableElement.addClass( 'cke_widget_editable_focused' );
2317
2318 if ( editableInstance.filter )
2319 editor.setActiveFilter( editableInstance.filter );
2320 editor.setActiveEnterMode( editableInstance.enterMode, editableInstance.shiftEnterMode );
2321 } else {
2322 if ( !offline )
2323 widget.focusedEditable.removeClass( 'cke_widget_editable_focused' );
2324
2325 widget.focusedEditable = null;
2326 widgetsRepo.widgetHoldingFocusedEditable = null;
2327 editor.setActiveFilter( null );
2328 editor.setActiveEnterMode( null, null );
2329 }
2330
2331 editor.fire( 'unlockSnapshot' );
2332 }
2333
2334 function setupContextMenu( editor ) {
2335 if ( !editor.contextMenu )
2336 return;
2337
2338 editor.contextMenu.addListener( function( element ) {
2339 var widget = editor.widgets.getByElement( element, true );
2340
2341 if ( widget )
2342 return widget.fire( 'contextMenu', {} );
2343 } );
2344 }
2345
2346 // And now we've got two problems - original problem and RegExp.
2347 // Some softeners:
2348 // * FF tends to copy all blocks up to the copybin container.
2349 // * IE tends to copy only the copybin, without its container.
2350 // * We use spans on IE and blockless editors, but divs in other cases.
2351 var pasteReplaceRegex = new RegExp(
2352 '^' +
2353 '(?:<(?:div|span)(?: data-cke-temp="1")?(?: id="cke_copybin")?(?: data-cke-temp="1")?>)?' +
2354 '(?:<(?:div|span)(?: style="[^"]+")?>)?' +
2355 '<span [^>]*data-cke-copybin-start="1"[^>]*>.?</span>([\\s\\S]+)<span [^>]*data-cke-copybin-end="1"[^>]*>.?</span>' +
2356 '(?:</(?:div|span)>)?' +
2357 '(?:</(?:div|span)>)?' +
2358 '$',
2359 // IE8 prefers uppercase when browsers stick to lowercase HTML (#13460).
2360 'i'
2361 );
2362
2363 function pasteReplaceFn( match, wrapperHtml ) {
2364 // Avoid polluting pasted data with any whitspaces,
2365 // what's going to break check whether only one widget was pasted.
2366 return CKEDITOR.tools.trim( wrapperHtml );
2367 }
2368
2369 function setupDragAndDrop( widgetsRepo ) {
2370 var editor = widgetsRepo.editor,
2371 lineutils = CKEDITOR.plugins.lineutils;
2372
2373 // These listeners handle inline and block widgets drag and drop.
2374 // The only thing we need to do to make block widgets custom drag and drop functionality
2375 // is to fire those events with the right properties (like the target which must be the drag handle).
2376 editor.on( 'dragstart', function( evt ) {
2377 var target = evt.data.target;
2378
2379 if ( Widget.isDomDragHandler( target ) ) {
2380 var widget = widgetsRepo.getByElement( target );
2381
2382 evt.data.dataTransfer.setData( 'cke/widget-id', widget.id );
2383
2384 // IE needs focus.
2385 editor.focus();
2386
2387 // and widget need to be focused on drag start (#12172#comment:10).
2388 widget.focus();
2389 }
2390 } );
2391
2392 editor.on( 'drop', function( evt ) {
2393 var dataTransfer = evt.data.dataTransfer,
2394 id = dataTransfer.getData( 'cke/widget-id' ),
2395 transferType = dataTransfer.getTransferType( editor ),
2396 dragRange = editor.createRange(),
2397 sourceWidget;
2398
2399 // Disable cross-editor drag & drop for widgets - #13599.
2400 if ( id !== '' && transferType === CKEDITOR.DATA_TRANSFER_CROSS_EDITORS ) {
2401 evt.cancel();
2402 return;
2403 }
2404
2405 if ( id === '' || transferType != CKEDITOR.DATA_TRANSFER_INTERNAL ) {
2406 return;
2407 }
2408
2409 sourceWidget = widgetsRepo.instances[ id ];
2410 if ( !sourceWidget ) {
2411 return;
2412 }
2413
2414 dragRange.setStartBefore( sourceWidget.wrapper );
2415 dragRange.setEndAfter( sourceWidget.wrapper );
2416 evt.data.dragRange = dragRange;
2417
2418 // [IE8-9] Reset state of the clipboard#fixSplitNodesAfterDrop fix because by setting evt.data.dragRange
2419 // (see above) after drop happened we do not need it. That fix is needed only if dragRange was created
2420 // before drop (before text node was split).
2421 delete CKEDITOR.plugins.clipboard.dragStartContainerChildCount;
2422 delete CKEDITOR.plugins.clipboard.dragEndContainerChildCount;
2423
2424 evt.data.dataTransfer.setData( 'text/html', editor.editable().getHtmlFromRange( dragRange ).getHtml() );
2425 editor.widgets.destroy( sourceWidget, true );
2426 } );
2427
2428 editor.on( 'contentDom', function() {
2429 var editable = editor.editable();
2430
2431 // Register Lineutils's utilities as properties of repo.
2432 CKEDITOR.tools.extend( widgetsRepo, {
2433 finder: new lineutils.finder( editor, {
2434 lookups: {
2435 // Element is block but not list item and not in nested editable.
2436 'default': function( el ) {
2437 if ( el.is( CKEDITOR.dtd.$listItem ) )
2438 return;
2439
2440 if ( !el.is( CKEDITOR.dtd.$block ) )
2441 return;
2442
2443 // Allow drop line inside, but never before or after nested editable (#12006).
2444 if ( Widget.isDomNestedEditable( el ) )
2445 return;
2446
2447 // Do not allow droping inside the widget being dragged (#13397).
2448 if ( widgetsRepo._.draggedWidget.wrapper.contains( el ) ) {
2449 return;
2450 }
2451
2452 // If element is nested editable, make sure widget can be dropped there (#12006).
2453 var nestedEditable = Widget.getNestedEditable( editable, el );
2454 if ( nestedEditable ) {
2455 var draggedWidget = widgetsRepo._.draggedWidget;
2456
2457 // Don't let the widget to be dropped into its own nested editable.
2458 if ( widgetsRepo.getByElement( nestedEditable ) == draggedWidget )
2459 return;
2460
2461 var filter = CKEDITOR.filter.instances[ nestedEditable.data( 'cke-filter' ) ],
2462 draggedRequiredContent = draggedWidget.requiredContent;
2463
2464 // There will be no relation if the filter of nested editable does not allow
2465 // requiredContent of dragged widget.
2466 if ( filter && draggedRequiredContent && !filter.check( draggedRequiredContent ) )
2467 return;
2468 }
2469
2470 return CKEDITOR.LINEUTILS_BEFORE | CKEDITOR.LINEUTILS_AFTER;
2471 }
2472 }
2473 } ),
2474 locator: new lineutils.locator( editor ),
2475 liner: new lineutils.liner( editor, {
2476 lineStyle: {
2477 cursor: 'move !important',
2478 'border-top-color': '#666'
2479 },
2480 tipLeftStyle: {
2481 'border-left-color': '#666'
2482 },
2483 tipRightStyle: {
2484 'border-right-color': '#666'
2485 }
2486 } )
2487 }, true );
2488 } );
2489 }
2490
2491 // Setup mouse observer which will trigger:
2492 // * widget focus on widget click,
2493 // * widget#doubleclick forwarded from editor#doubleclick.
2494 function setupMouseObserver( widgetsRepo ) {
2495 var editor = widgetsRepo.editor;
2496
2497 editor.on( 'contentDom', function() {
2498 var editable = editor.editable(),
2499 evtRoot = editable.isInline() ? editable : editor.document,
2500 widget,
2501 mouseDownOnDragHandler;
2502
2503 editable.attachListener( evtRoot, 'mousedown', function( evt ) {
2504 var target = evt.data.getTarget();
2505
2506 // #10887 Clicking scrollbar in IE8 will invoke event with empty target object.
2507 if ( !target.type )
2508 return false;
2509
2510 widget = widgetsRepo.getByElement( target );
2511 mouseDownOnDragHandler = 0; // Reset.
2512
2513 // Widget was clicked, but not editable nested in it.
2514 if ( widget ) {
2515 // Ignore mousedown on drag and drop handler if the widget is inline.
2516 // Block widgets are handled by Lineutils.
2517 if ( widget.inline && target.type == CKEDITOR.NODE_ELEMENT && target.hasAttribute( 'data-cke-widget-drag-handler' ) ) {
2518 mouseDownOnDragHandler = 1;
2519
2520 // When drag handler is pressed we have to clear current selection if it wasn't already on this widget.
2521 // Otherwise, the selection may be in a fillingChar, which prevents dragging a widget. (#13284, see comment 8 and 9.)
2522 if ( widgetsRepo.focused != widget )
2523 editor.getSelection().removeAllRanges();
2524
2525 return;
2526 }
2527
2528 if ( !Widget.getNestedEditable( widget.wrapper, target ) ) {
2529 evt.data.preventDefault();
2530 if ( !CKEDITOR.env.ie )
2531 widget.focus();
2532 } else {
2533 // Reset widget so mouseup listener is not confused.
2534 widget = null;
2535 }
2536 }
2537 } );
2538
2539 // Focus widget on mouseup if mousedown was fired on drag handler.
2540 // Note: mouseup won't be fired at all if widget was dragged and dropped, so
2541 // this code will be executed only when drag handler was clicked.
2542 editable.attachListener( evtRoot, 'mouseup', function() {
2543 // Check if widget is not destroyed (if widget is destroyed the wrapper will be null).
2544 if ( mouseDownOnDragHandler && widget && widget.wrapper ) {
2545 mouseDownOnDragHandler = 0;
2546 widget.focus();
2547 }
2548 } );
2549
2550 // On IE it is not enough to block mousedown. If widget wrapper (element with
2551 // contenteditable=false attribute) is clicked directly (it is a target),
2552 // then after mouseup/click IE will select that element.
2553 // It is not possible to prevent that default action,
2554 // so we force fake selection after everything happened.
2555 if ( CKEDITOR.env.ie ) {
2556 editable.attachListener( evtRoot, 'mouseup', function() {
2557 setTimeout( function() {
2558 // Check if widget is not destroyed (if widget is destroyed the wrapper will be null) and
2559 // in editable contains widget (it could be dragged and removed).
2560 if ( widget && widget.wrapper && editable.contains( widget.wrapper ) ) {
2561 widget.focus();
2562 widget = null;
2563 }
2564 } );
2565 } );
2566 }
2567 } );
2568
2569 editor.on( 'doubleclick', function( evt ) {
2570 var widget = widgetsRepo.getByElement( evt.data.element );
2571
2572 // Not in widget or in nested editable.
2573 if ( !widget || Widget.getNestedEditable( widget.wrapper, evt.data.element ) )
2574 return;
2575
2576 return widget.fire( 'doubleclick', { element: evt.data.element } );
2577 }, null, null, 1 );
2578 }
2579
2580 // Setup editor#key observer which will forward it
2581 // to focused widget.
2582 function setupKeyboardObserver( widgetsRepo ) {
2583 var editor = widgetsRepo.editor;
2584
2585 editor.on( 'key', function( evt ) {
2586 var focused = widgetsRepo.focused,
2587 widgetHoldingFocusedEditable = widgetsRepo.widgetHoldingFocusedEditable,
2588 ret;
2589
2590 if ( focused )
2591 ret = focused.fire( 'key', { keyCode: evt.data.keyCode } );
2592 else if ( widgetHoldingFocusedEditable )
2593 ret = onEditableKey( widgetHoldingFocusedEditable, evt.data.keyCode );
2594
2595 return ret;
2596 }, null, null, 1 );
2597 }
2598
2599 // Setup copybin on native copy and cut events in order to handle copy and cut commands
2600 // if user accepted security alert on IEs.
2601 // Note: when copying or cutting using keystroke, copySingleWidget will be first executed
2602 // by the keydown listener. Conflict between two calls will be resolved by copy_bin existence check.
2603 function setupNativeCutAndCopy( widgetsRepo ) {
2604 var editor = widgetsRepo.editor;
2605
2606 editor.on( 'contentDom', function() {
2607 var editable = editor.editable();
2608
2609 editable.attachListener( editable, 'copy', eventListener );
2610 editable.attachListener( editable, 'cut', eventListener );
2611 } );
2612
2613 function eventListener( evt ) {
2614 if ( widgetsRepo.focused )
2615 copySingleWidget( widgetsRepo.focused, evt.name == 'cut' );
2616 }
2617 }
2618
2619 // Setup selection observer which will trigger:
2620 // * widget select & focus on selection change,
2621 // * nested editable focus (related properites and classes) on selection change,
2622 // * deselecting and blurring all widgets on data,
2623 // * blurring widget on editor blur.
2624 function setupSelectionObserver( widgetsRepo ) {
2625 var editor = widgetsRepo.editor;
2626
2627 editor.on( 'selectionCheck', function() {
2628 widgetsRepo.fire( 'checkSelection' );
2629 } );
2630
2631 widgetsRepo.on( 'checkSelection', widgetsRepo.checkSelection, widgetsRepo );
2632
2633 editor.on( 'selectionChange', function( evt ) {
2634 var nestedEditable = Widget.getNestedEditable( editor.editable(), evt.data.selection.getStartElement() ),
2635 newWidget = nestedEditable && widgetsRepo.getByElement( nestedEditable ),
2636 oldWidget = widgetsRepo.widgetHoldingFocusedEditable;
2637
2638 if ( oldWidget ) {
2639 if ( oldWidget !== newWidget || !oldWidget.focusedEditable.equals( nestedEditable ) ) {
2640 setFocusedEditable( widgetsRepo, oldWidget, null );
2641
2642 if ( newWidget && nestedEditable )
2643 setFocusedEditable( widgetsRepo, newWidget, nestedEditable );
2644 }
2645 }
2646 // It may happen that there's no widget even if editable was found -
2647 // e.g. if selection was automatically set in editable although widget wasn't initialized yet.
2648 else if ( newWidget && nestedEditable ) {
2649 setFocusedEditable( widgetsRepo, newWidget, nestedEditable );
2650 }
2651 } );
2652
2653 // Invalidate old widgets early - immediately on dataReady.
2654 editor.on( 'dataReady', function() {
2655 // Deselect and blur all widgets.
2656 stateUpdater( widgetsRepo ).commit();
2657 } );
2658
2659 editor.on( 'blur', function() {
2660 var widget;
2661
2662 if ( ( widget = widgetsRepo.focused ) )
2663 blurWidget( widgetsRepo, widget );
2664
2665 if ( ( widget = widgetsRepo.widgetHoldingFocusedEditable ) )
2666 setFocusedEditable( widgetsRepo, widget, null );
2667 } );
2668 }
2669
2670 // Set up actions like:
2671 // * processing in toHtml/toDataFormat,
2672 // * pasting handling,
2673 // * insertion handling,
2674 // * editable reload handling (setData, mode switch, undo/redo),
2675 // * DOM invalidation handling,
2676 // * widgets checks.
2677 function setupWidgetsLifecycle( widgetsRepo ) {
2678 setupWidgetsLifecycleStart( widgetsRepo );
2679 setupWidgetsLifecycleEnd( widgetsRepo );
2680
2681 widgetsRepo.on( 'checkWidgets', checkWidgets );
2682 widgetsRepo.editor.on( 'contentDomInvalidated', widgetsRepo.checkWidgets, widgetsRepo );
2683 }
2684
2685 function setupWidgetsLifecycleEnd( widgetsRepo ) {
2686 var editor = widgetsRepo.editor,
2687 downcastingSessions = {};
2688
2689 // Listen before htmlDP#htmlFilter is applied to cache all widgets, because we'll
2690 // loose data-cke-* attributes.
2691 editor.on( 'toDataFormat', function( evt ) {
2692 // To avoid conflicts between htmlDP#toDF calls done at the same time
2693 // (e.g. nestedEditable#getData called during downcasting some widget)
2694 // mark every toDataFormat event chain with the downcasting session id.
2695 var id = CKEDITOR.tools.getNextNumber(),
2696 toBeDowncasted = [];
2697 evt.data.downcastingSessionId = id;
2698 downcastingSessions[ id ] = toBeDowncasted;
2699
2700 evt.data.dataValue.forEach( function( element ) {
2701 var attrs = element.attributes,
2702 widget, widgetElement;
2703
2704 // Wrapper.
2705 // Perform first part of downcasting (cleanup) and cache widgets,
2706 // because after applying DP's filter all data-cke-* attributes will be gone.
2707 if ( 'data-cke-widget-id' in attrs ) {
2708 widget = widgetsRepo.instances[ attrs[ 'data-cke-widget-id' ] ];
2709 if ( widget ) {
2710 widgetElement = element.getFirst( Widget.isParserWidgetElement );
2711 toBeDowncasted.push( {
2712 wrapper: element,
2713 element: widgetElement,
2714 widget: widget,
2715 editables: {}
2716 } );
2717
2718 // If widget did not have data-cke-widget attribute before upcasting remove it.
2719 if ( widgetElement.attributes[ 'data-cke-widget-keep-attr' ] != '1' )
2720 delete widgetElement.attributes[ 'data-widget' ];
2721 }
2722 }
2723 // Nested editable.
2724 else if ( 'data-cke-widget-editable' in attrs ) {
2725 // Save the reference to this nested editable in the closest widget to be downcasted.
2726 // Nested editables are downcasted in the successive toDataFormat to create an opportunity
2727 // for dataFilter's "excludeNestedEditable" option to do its job (that option relies on
2728 // contenteditable="true" attribute) (#11372).
2729 toBeDowncasted[ toBeDowncasted.length - 1 ].editables[ attrs[ 'data-cke-widget-editable' ] ] = element;
2730
2731 // Don't check children - there won't be next wrapper or nested editable which we
2732 // should process in this session.
2733 return false;
2734 }
2735 }, CKEDITOR.NODE_ELEMENT, true );
2736 }, null, null, 8 );
2737
2738 // Listen after dataProcessor.htmlFilter and ACF were applied
2739 // so wrappers securing widgets' contents are removed after all filtering was done.
2740 editor.on( 'toDataFormat', function( evt ) {
2741 // Ignore some unmarked sessions.
2742 if ( !evt.data.downcastingSessionId )
2743 return;
2744
2745 var toBeDowncasted = downcastingSessions[ evt.data.downcastingSessionId ],
2746 toBe, widget, widgetElement, retElement, editableElement, e;
2747
2748 while ( ( toBe = toBeDowncasted.shift() ) ) {
2749 widget = toBe.widget;
2750 widgetElement = toBe.element;
2751 retElement = widget._.downcastFn && widget._.downcastFn.call( widget, widgetElement );
2752
2753 // Replace nested editables' content with their output data.
2754 for ( e in toBe.editables ) {
2755 editableElement = toBe.editables[ e ];
2756
2757 delete editableElement.attributes.contenteditable;
2758 editableElement.setHtml( widget.editables[ e ].getData() );
2759 }
2760
2761 // Returned element always defaults to widgetElement.
2762 if ( !retElement )
2763 retElement = widgetElement;
2764
2765 toBe.wrapper.replaceWith( retElement );
2766 }
2767 }, null, null, 13 );
2768
2769
2770 editor.on( 'contentDomUnload', function() {
2771 widgetsRepo.destroyAll( true );
2772 } );
2773 }
2774
2775 function setupWidgetsLifecycleStart( widgetsRepo ) {
2776 var editor = widgetsRepo.editor,
2777 processedWidgetOnly,
2778 snapshotLoaded;
2779
2780 // Listen after ACF (so data are filtered),
2781 // but before dataProcessor.dataFilter was applied (so we can secure widgets' internals).
2782 editor.on( 'toHtml', function( evt ) {
2783 var upcastIterator = createUpcastIterator( widgetsRepo ),
2784 toBeWrapped;
2785
2786 evt.data.dataValue.forEach( upcastIterator.iterator, CKEDITOR.NODE_ELEMENT, true );
2787
2788 // Clean up and wrap all queued elements.
2789 while ( ( toBeWrapped = upcastIterator.toBeWrapped.pop() ) ) {
2790 cleanUpWidgetElement( toBeWrapped[ 0 ] );
2791 widgetsRepo.wrapElement( toBeWrapped[ 0 ], toBeWrapped[ 1 ] );
2792 }
2793
2794 // Used to determine whether only widget was pasted.
2795 if ( evt.data.protectedWhitespaces ) {
2796 // Whitespaces are protected by wrapping content with spans. Take the middle node only.
2797 processedWidgetOnly = evt.data.dataValue.children.length == 3 &&
2798 Widget.isParserWidgetWrapper( evt.data.dataValue.children[ 1 ] );
2799 } else {
2800 processedWidgetOnly = evt.data.dataValue.children.length == 1 &&
2801 Widget.isParserWidgetWrapper( evt.data.dataValue.children[ 0 ] );
2802 }
2803 }, null, null, 8 );
2804
2805 editor.on( 'dataReady', function() {
2806 // Clean up all widgets loaded from snapshot.
2807 if ( snapshotLoaded )
2808 cleanUpAllWidgetElements( widgetsRepo, editor.editable() );
2809 snapshotLoaded = 0;
2810
2811 // Some widgets were destroyed on contentDomUnload,
2812 // some on loadSnapshot, but that does not include
2813 // e.g. setHtml on inline editor or widgets removed just
2814 // before setting data.
2815 widgetsRepo.destroyAll( true );
2816 widgetsRepo.initOnAll();
2817 } );
2818
2819 // Set flag so dataReady will know that additional
2820 // cleanup is needed, because snapshot containing widgets was loaded.
2821 editor.on( 'loadSnapshot', function( evt ) {
2822 // Primitive but sufficient check which will prevent from executing
2823 // heavier cleanUpAllWidgetElements if not needed.
2824 if ( ( /data-cke-widget/ ).test( evt.data ) )
2825 snapshotLoaded = 1;
2826
2827 widgetsRepo.destroyAll( true );
2828 }, null, null, 9 );
2829
2830 // Handle pasted single widget.
2831 editor.on( 'paste', function( evt ) {
2832 var data = evt.data;
2833
2834 data.dataValue = data.dataValue.replace( pasteReplaceRegex, pasteReplaceFn );
2835
2836 // If drag'n'drop kind of paste into nested editable (data.range), selection is set AFTER
2837 // data is pasted, which means editor has no chance to change activeFilter's context.
2838 // As a result, pasted data is filtered with default editor's filter instead of NE's and
2839 // funny things get inserted. Changing the filter by analysis of the paste range below (#13186).
2840 if ( data.range ) {
2841 // Check if pasting into nested editable.
2842 var nestedEditable = Widget.getNestedEditable( editor.editable(), data.range.startContainer );
2843
2844 if ( nestedEditable ) {
2845 // Retrieve the filter from NE's data and set it active before editor.insertHtml is done
2846 // in clipboard plugin.
2847 var filter = CKEDITOR.filter.instances[ nestedEditable.data( 'cke-filter' ) ];
2848
2849 if ( filter ) {
2850 editor.setActiveFilter( filter );
2851 }
2852 }
2853 }
2854 } );
2855
2856 // Listen with high priority to check widgets after data was inserted.
2857 editor.on( 'afterInsertHtml', function( evt ) {
2858 if ( evt.data.intoRange ) {
2859 widgetsRepo.checkWidgets( { initOnlyNew: true } );
2860 } else {
2861 editor.fire( 'lockSnapshot' );
2862 // Init only new for performance reason.
2863 // Focus inited if only widget was processed.
2864 widgetsRepo.checkWidgets( { initOnlyNew: true, focusInited: processedWidgetOnly } );
2865
2866 editor.fire( 'unlockSnapshot' );
2867 }
2868 } );
2869 }
2870
2871 // Helper for coordinating which widgets should be
2872 // selected/deselected and which one should be focused/blurred.
2873 function stateUpdater( widgetsRepo ) {
2874 var currentlySelected = widgetsRepo.selected,
2875 toBeSelected = [],
2876 toBeDeselected = currentlySelected.slice( 0 ),
2877 focused = null;
2878
2879 return {
2880 select: function( widget ) {
2881 if ( CKEDITOR.tools.indexOf( currentlySelected, widget ) < 0 )
2882 toBeSelected.push( widget );
2883
2884 var index = CKEDITOR.tools.indexOf( toBeDeselected, widget );
2885 if ( index >= 0 )
2886 toBeDeselected.splice( index, 1 );
2887
2888 return this;
2889 },
2890
2891 focus: function( widget ) {
2892 focused = widget;
2893 return this;
2894 },
2895
2896 commit: function() {
2897 var focusedChanged = widgetsRepo.focused !== focused,
2898 widget, isDirty;
2899
2900 widgetsRepo.editor.fire( 'lockSnapshot' );
2901
2902 if ( focusedChanged && ( widget = widgetsRepo.focused ) )
2903 blurWidget( widgetsRepo, widget );
2904
2905 while ( ( widget = toBeDeselected.pop() ) ) {
2906 currentlySelected.splice( CKEDITOR.tools.indexOf( currentlySelected, widget ), 1 );
2907 // Widget could be destroyed in the meantime - e.g. data could be set.
2908 if ( widget.isInited() ) {
2909 isDirty = widget.editor.checkDirty();
2910
2911 widget.setSelected( false );
2912
2913 !isDirty && widget.editor.resetDirty();
2914 }
2915 }
2916
2917 if ( focusedChanged && focused ) {
2918 isDirty = widgetsRepo.editor.checkDirty();
2919
2920 widgetsRepo.focused = focused;
2921 widgetsRepo.fire( 'widgetFocused', { widget: focused } );
2922 focused.setFocused( true );
2923
2924 !isDirty && widgetsRepo.editor.resetDirty();
2925 }
2926
2927 while ( ( widget = toBeSelected.pop() ) ) {
2928 currentlySelected.push( widget );
2929 widget.setSelected( true );
2930 }
2931
2932 widgetsRepo.editor.fire( 'unlockSnapshot' );
2933 }
2934 };
2935 }
2936
2937
2938 //
2939 // WIDGET helpers ---------------------------------------------------------
2940 //
2941
2942 // LEFT, RIGHT, UP, DOWN, DEL, BACKSPACE - unblock default fake sel handlers.
2943 var keystrokesNotBlockedByWidget = { 37: 1, 38: 1, 39: 1, 40: 1, 8: 1, 46: 1 };
2944
2945 // Applies or removes style's classes from widget.
2946 // @param {CKEDITOR.style} style Custom widget style.
2947 // @param {Boolean} apply Whether to apply or remove style.
2948 function applyRemoveStyle( widget, style, apply ) {
2949 var changed = 0,
2950 classes = getStyleClasses( style ),
2951 updatedClasses = widget.data.classes || {},
2952 cl;
2953
2954 // Ee... Something is wrong with this style.
2955 if ( !classes )
2956 return;
2957
2958 // Clone, because we need to break reference.
2959 updatedClasses = CKEDITOR.tools.clone( updatedClasses );
2960
2961 while ( ( cl = classes.pop() ) ) {
2962 if ( apply ) {
2963 if ( !updatedClasses[ cl ] )
2964 changed = updatedClasses[ cl ] = 1;
2965 } else {
2966 if ( updatedClasses[ cl ] ) {
2967 delete updatedClasses[ cl ];
2968 changed = 1;
2969 }
2970 }
2971 }
2972 if ( changed )
2973 widget.setData( 'classes', updatedClasses );
2974 }
2975
2976 function cancel( evt ) {
2977 evt.cancel();
2978 }
2979
2980 function copySingleWidget( widget, isCut ) {
2981 var editor = widget.editor,
2982 doc = editor.document;
2983
2984 // We're still handling previous copy/cut.
2985 // When keystroke is used to copy/cut this will also prevent
2986 // conflict with copySingleWidget called again for native copy/cut event.
2987 if ( doc.getById( 'cke_copybin' ) )
2988 return;
2989
2990 // [IE] Use span for copybin and its container to avoid bug with expanding editable height by
2991 // absolutely positioned element.
2992 var copybinName = ( editor.blockless || CKEDITOR.env.ie ) ? 'span' : 'div',
2993 copybin = doc.createElement( copybinName ),
2994 copybinContainer = doc.createElement( copybinName ),
2995 // IE8 always jumps to the end of document.
2996 needsScrollHack = CKEDITOR.env.ie && CKEDITOR.env.version < 9;
2997
2998 copybinContainer.setAttributes( {
2999 id: 'cke_copybin',
3000 'data-cke-temp': '1'
3001 } );
3002
3003 // Position copybin element outside current viewport.
3004 copybin.setStyles( {
3005 position: 'absolute',
3006 width: '1px',
3007 height: '1px',
3008 overflow: 'hidden'
3009 } );
3010
3011 copybin.setStyle( editor.config.contentsLangDirection == 'ltr' ? 'left' : 'right', '-5000px' );
3012
3013 var range = editor.createRange();
3014 range.setStartBefore( widget.wrapper );
3015 range.setEndAfter( widget.wrapper );
3016
3017 copybin.setHtml(
3018 '<span data-cke-copybin-start="1">\u200b</span>' +
3019 editor.editable().getHtmlFromRange( range ).getHtml() +
3020 '<span data-cke-copybin-end="1">\u200b</span>' );
3021
3022 // Save snapshot with the current state.
3023 editor.fire( 'saveSnapshot' );
3024
3025 // Ignore copybin.
3026 editor.fire( 'lockSnapshot' );
3027
3028 copybinContainer.append( copybin );
3029 editor.editable().append( copybinContainer );
3030
3031 var listener1 = editor.on( 'selectionChange', cancel, null, null, 0 ),
3032 listener2 = widget.repository.on( 'checkSelection', cancel, null, null, 0 );
3033
3034 if ( needsScrollHack ) {
3035 var docElement = doc.getDocumentElement().$,
3036 scrollTop = docElement.scrollTop;
3037 }
3038
3039 // Once the clone of the widget is inside of copybin, select
3040 // the entire contents. This selection will be copied by the
3041 // native browser's clipboard system.
3042 range = editor.createRange();
3043 range.selectNodeContents( copybin );
3044 range.select();
3045
3046 if ( needsScrollHack )
3047 docElement.scrollTop = scrollTop;
3048
3049 setTimeout( function() {
3050 // [IE] Focus widget before removing copybin to avoid scroll jump.
3051 if ( !isCut )
3052 widget.focus();
3053
3054 copybinContainer.remove();
3055
3056 listener1.removeListener();
3057 listener2.removeListener();
3058
3059 editor.fire( 'unlockSnapshot' );
3060
3061 if ( isCut ) {
3062 widget.repository.del( widget );
3063 editor.fire( 'saveSnapshot' );
3064 }
3065 }, 100 ); // Use 100ms, so Chrome (@Mac) will be able to grab the content.
3066 }
3067
3068 // Extracts classes array from style instance.
3069 function getStyleClasses( style ) {
3070 var attrs = style.getDefinition().attributes,
3071 classes = attrs && attrs[ 'class' ];
3072
3073 return classes ? classes.split( /\s+/ ) : null;
3074 }
3075
3076 // [IE] Force keeping focus because IE sometimes forgets to fire focus on main editable
3077 // when blurring nested editable.
3078 // @context widget
3079 function onEditableBlur() {
3080 var active = CKEDITOR.document.getActive(),
3081 editor = this.editor,
3082 editable = editor.editable();
3083
3084 // If focus stays within editor override blur and set currentActive because it should be
3085 // automatically changed to editable on editable#focus but it is not fired.
3086 if ( ( editable.isInline() ? editable : editor.document.getWindow().getFrame() ).equals( active ) )
3087 editor.focusManager.focus( editable );
3088 }
3089
3090 // Force selectionChange when editable was focused.
3091 // Similar to hack in selection.js#~620.
3092 // @context widget
3093 function onEditableFocus() {
3094 // Gecko does not support 'DOMFocusIn' event on which we unlock selection
3095 // in selection.js to prevent selection locking when entering nested editables.
3096 if ( CKEDITOR.env.gecko )
3097 this.editor.unlockSelection();
3098
3099 // We don't need to force selectionCheck on Webkit, because on Webkit
3100 // we do that on DOMFocusIn in selection.js.
3101 if ( !CKEDITOR.env.webkit ) {
3102 this.editor.forceNextSelectionCheck();
3103 this.editor.selectionChange( 1 );
3104 }
3105 }
3106
3107 // Setup listener on widget#data which will update (remove/add) classes
3108 // by comparing newly set classes with the old ones.
3109 function setupDataClassesListener( widget ) {
3110 // Note: previousClasses and newClasses may be null!
3111 // Tip: for ( cl in null ) is correct.
3112 var previousClasses = null;
3113
3114 widget.on( 'data', function() {
3115 var newClasses = this.data.classes,
3116 cl;
3117
3118 // When setting new classes one need to remember
3119 // that he must break reference.
3120 if ( previousClasses == newClasses )
3121 return;
3122
3123 for ( cl in previousClasses ) {
3124 // Avoid removing and adding classes again.
3125 if ( !( newClasses && newClasses[ cl ] ) )
3126 this.removeClass( cl );
3127 }
3128 for ( cl in newClasses )
3129 this.addClass( cl );
3130
3131 previousClasses = newClasses;
3132 } );
3133 }
3134
3135 // Add a listener to data event that will set/change widget's label (#14539).
3136 function setupA11yListener( widget ) {
3137 // Note, the function gets executed in a context of widget instance.
3138 function getLabelDefault() {
3139 return this.editor.lang.widget.label.replace( /%1/, this.pathName || this.element.getName() );
3140 }
3141
3142 // Setting a listener on data is enough, there's no need to perform it on widget initialization, as
3143 // setupWidgetData fires this event anyway.
3144 widget.on( 'data', function() {
3145 // In some cases widget might get destroyed in an earlier data listener. For instance, image2 plugin, does
3146 // so when changing its internal state.
3147 if ( !widget.wrapper ) {
3148 return;
3149 }
3150
3151 var label = this.getLabel ? this.getLabel() : getLabelDefault.call( this );
3152
3153 widget.wrapper.setAttribute( 'role', 'region' );
3154 widget.wrapper.setAttribute( 'aria-label', label );
3155 }, null, null, 9999 );
3156 }
3157
3158 function setupDragHandler( widget ) {
3159 if ( !widget.draggable )
3160 return;
3161
3162 var editor = widget.editor,
3163 // Use getLast to find wrapper's direct descendant (#12022).
3164 container = widget.wrapper.getLast( Widget.isDomDragHandlerContainer ),
3165 img;
3166
3167 // Reuse drag handler if already exists (#11281).
3168 if ( container )
3169 img = container.findOne( 'img' );
3170 else {
3171 container = new CKEDITOR.dom.element( 'span', editor.document );
3172 container.setAttributes( {
3173 'class': 'cke_reset cke_widget_drag_handler_container',
3174 // Split background and background-image for IE8 which will break on rgba().
3175 style: 'background:rgba(220,220,220,0.5);background-image:url(' + editor.plugins.widget.path + 'images/handle.png)'
3176 } );
3177
3178 img = new CKEDITOR.dom.element( 'img', editor.document );
3179 img.setAttributes( {
3180 'class': 'cke_reset cke_widget_drag_handler',
3181 'data-cke-widget-drag-handler': '1',
3182 src: CKEDITOR.tools.transparentImageData,
3183 width: DRAG_HANDLER_SIZE,
3184 title: editor.lang.widget.move,
3185 height: DRAG_HANDLER_SIZE,
3186 role: 'presentation'
3187 } );
3188 widget.inline && img.setAttribute( 'draggable', 'true' );
3189
3190 container.append( img );
3191 widget.wrapper.append( container );
3192 }
3193
3194 // Preventing page reload when dropped content on widget wrapper (#13015).
3195 // Widget is not editable so by default drop on it isn't allowed what means that
3196 // browser handles it (there's no editable#drop event). If there's no drop event we cannot block
3197 // the drop, so page is reloaded. This listener enables drop on widget wrappers.
3198 widget.wrapper.on( 'dragover', function( evt ) {
3199 evt.data.preventDefault();
3200 } );
3201
3202 widget.wrapper.on( 'mouseenter', widget.updateDragHandlerPosition, widget );
3203 setTimeout( function() {
3204 widget.on( 'data', widget.updateDragHandlerPosition, widget );
3205 }, 50 );
3206
3207 if ( !widget.inline ) {
3208 img.on( 'mousedown', onBlockWidgetDrag, widget );
3209
3210 // On IE8 'dragstart' is propagated to editable, so editor#dragstart is fired twice on block widgets.
3211 if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 ) {
3212 img.on( 'dragstart', function( evt ) {
3213 evt.data.preventDefault( true );
3214 } );
3215 }
3216 }
3217
3218 widget.dragHandlerContainer = container;
3219 }
3220
3221 function onBlockWidgetDrag( evt ) {
3222 var finder = this.repository.finder,
3223 locator = this.repository.locator,
3224 liner = this.repository.liner,
3225 editor = this.editor,
3226 editable = editor.editable(),
3227 listeners = [],
3228 sorted = [],
3229 locations,
3230 y;
3231
3232 // Mark dragged widget for repository#finder.
3233 this.repository._.draggedWidget = this;
3234
3235 // Harvest all possible relations and display some closest.
3236 var relations = finder.greedySearch(),
3237
3238 buffer = CKEDITOR.tools.eventsBuffer( 50, function() {
3239 locations = locator.locate( relations );
3240
3241 // There's only a single line displayed for D&D.
3242 sorted = locator.sort( y, 1 );
3243
3244 if ( sorted.length ) {
3245 liner.prepare( relations, locations );
3246 liner.placeLine( sorted[ 0 ] );
3247 liner.cleanup();
3248 }
3249 } );
3250
3251 // Let's have the "dragging cursor" over entire editable.
3252 editable.addClass( 'cke_widget_dragging' );
3253
3254 // Cache mouse position so it is re-used in events buffer.
3255 listeners.push( editable.on( 'mousemove', function( evt ) {
3256 y = evt.data.$.clientY;
3257 buffer.input();
3258 } ) );
3259
3260 // Fire drag start as it happens during the native D&D.
3261 editor.fire( 'dragstart', { target: evt.sender } );
3262
3263 function onMouseUp() {
3264 var l;
3265
3266 buffer.reset();
3267
3268 // Stop observing events.
3269 while ( ( l = listeners.pop() ) )
3270 l.removeListener();
3271
3272 onBlockWidgetDrop.call( this, sorted, evt.sender );
3273 }
3274
3275 // Mouseup means "drop". This is when the widget is being detached
3276 // from DOM and placed at range determined by the line (location).
3277 listeners.push( editor.document.once( 'mouseup', onMouseUp, this ) );
3278
3279 // Prevent calling 'onBlockWidgetDrop' twice in the inline editor.
3280 // `removeListener` does not work if it is called at the same time event is fired.
3281 if ( !editable.isInline() ) {
3282 // Mouseup may occur when user hovers the line, which belongs to
3283 // the outer document. This is, of course, a valid listener too.
3284 listeners.push( CKEDITOR.document.once( 'mouseup', onMouseUp, this ) );
3285 }
3286 }
3287
3288 function onBlockWidgetDrop( sorted, dragTarget ) {
3289 var finder = this.repository.finder,
3290 liner = this.repository.liner,
3291 editor = this.editor,
3292 editable = this.editor.editable();
3293
3294 if ( !CKEDITOR.tools.isEmpty( liner.visible ) ) {
3295 // Retrieve range for the closest location.
3296 var dropRange = finder.getRange( sorted[ 0 ] );
3297
3298 // Focus widget (it could lost focus after mousedown+mouseup)
3299 // and save this state as the one where we want to be taken back when undoing.
3300 this.focus();
3301
3302 // Drag range will be set in the drop listener.
3303 editor.fire( 'drop', {
3304 dropRange: dropRange,
3305 target: dropRange.startContainer
3306 } );
3307 }
3308
3309 // Clean-up custom cursor for editable.
3310 editable.removeClass( 'cke_widget_dragging' );
3311
3312 // Clean-up all remaining lines.
3313 liner.hideVisible();
3314
3315 // Clean-up drag & drop.
3316 editor.fire( 'dragend', { target: dragTarget } );
3317 }
3318
3319 function setupEditables( widget ) {
3320 var editableName,
3321 editableDef,
3322 definedEditables = widget.editables;
3323
3324 widget.editables = {};
3325
3326 if ( !widget.editables )
3327 return;
3328
3329 for ( editableName in definedEditables ) {
3330 editableDef = definedEditables[ editableName ];
3331 widget.initEditable( editableName, typeof editableDef == 'string' ? { selector: editableDef } : editableDef );
3332 }
3333 }
3334
3335 function setupMask( widget ) {
3336 if ( !widget.mask )
3337 return;
3338
3339 // Reuse mask if already exists (#11281).
3340 var img = widget.wrapper.findOne( '.cke_widget_mask' );
3341
3342 if ( !img ) {
3343 img = new CKEDITOR.dom.element( 'img', widget.editor.document );
3344 img.setAttributes( {
3345 src: CKEDITOR.tools.transparentImageData,
3346 'class': 'cke_reset cke_widget_mask'
3347 } );
3348 widget.wrapper.append( img );
3349 }
3350
3351 widget.mask = img;
3352 }
3353
3354 // Replace parts object containing:
3355 // partName => selector pairs
3356 // with:
3357 // partName => element pairs
3358 function setupParts( widget ) {
3359 if ( widget.parts ) {
3360 var parts = {},
3361 el, partName;
3362
3363 for ( partName in widget.parts ) {
3364 el = widget.wrapper.findOne( widget.parts[ partName ] );
3365 parts[ partName ] = el;
3366 }
3367 widget.parts = parts;
3368 }
3369 }
3370
3371 function setupWidget( widget, widgetDef ) {
3372 setupWrapper( widget );
3373 setupParts( widget );
3374 setupEditables( widget );
3375 setupMask( widget );
3376 setupDragHandler( widget );
3377 setupDataClassesListener( widget );
3378 setupA11yListener( widget );
3379
3380 // #11145: [IE8] Non-editable content of widget is draggable.
3381 if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 ) {
3382 widget.wrapper.on( 'dragstart', function( evt ) {
3383 var target = evt.data.getTarget();
3384
3385 // Allow text dragging inside nested editables or dragging inline widget's drag handler.
3386 if ( !Widget.getNestedEditable( widget, target ) && !( widget.inline && Widget.isDomDragHandler( target ) ) )
3387 evt.data.preventDefault();
3388 } );
3389 }
3390
3391 widget.wrapper.removeClass( 'cke_widget_new' );
3392 widget.element.addClass( 'cke_widget_element' );
3393
3394 widget.on( 'key', function( evt ) {
3395 var keyCode = evt.data.keyCode;
3396
3397 // ENTER.
3398 if ( keyCode == 13 ) {
3399 widget.edit();
3400 // CTRL+C or CTRL+X.
3401 } else if ( keyCode == CKEDITOR.CTRL + 67 || keyCode == CKEDITOR.CTRL + 88 ) {
3402 copySingleWidget( widget, keyCode == CKEDITOR.CTRL + 88 );
3403 return; // Do not preventDefault.
3404 } else if ( keyCode in keystrokesNotBlockedByWidget || ( CKEDITOR.CTRL & keyCode ) || ( CKEDITOR.ALT & keyCode ) ) {
3405 // Pass chosen keystrokes to other plugins or default fake sel handlers.
3406 // Pass all CTRL/ALT keystrokes.
3407 return;
3408 }
3409
3410 return false;
3411 }, null, null, 999 );
3412 // Listen with high priority so it's possible
3413 // to overwrite this callback.
3414
3415 widget.on( 'doubleclick', function( evt ) {
3416 if ( widget.edit() ) {
3417 // We have to cancel event if edit method opens a dialog, otherwise
3418 // link plugin may open extra dialog (#12140).
3419 evt.cancel();
3420 }
3421 } );
3422
3423 if ( widgetDef.data )
3424 widget.on( 'data', widgetDef.data );
3425
3426 if ( widgetDef.edit )
3427 widget.on( 'edit', widgetDef.edit );
3428 }
3429
3430 function setupWidgetData( widget, startupData ) {
3431 var widgetDataAttr = widget.element.data( 'cke-widget-data' );
3432
3433 if ( widgetDataAttr )
3434 widget.setData( JSON.parse( decodeURIComponent( widgetDataAttr ) ) );
3435 if ( startupData )
3436 widget.setData( startupData );
3437
3438 // Populate classes if they are not preset.
3439 if ( !widget.data.classes )
3440 widget.setData( 'classes', widget.getClasses() );
3441
3442 // Unblock data and...
3443 widget.dataReady = true;
3444
3445 // Write data to element because this was blocked when data wasn't ready.
3446 writeDataToElement( widget );
3447
3448 // Fire data event first time, because this was blocked when data wasn't ready.
3449 widget.fire( 'data', widget.data );
3450 }
3451
3452 function setupWrapper( widget ) {
3453 // Retrieve widget wrapper. Assign an id to it.
3454 var wrapper = widget.wrapper = widget.element.getParent();
3455 wrapper.setAttribute( 'data-cke-widget-id', widget.id );
3456 }
3457
3458 function writeDataToElement( widget ) {
3459 widget.element.data( 'cke-widget-data', encodeURIComponent( JSON.stringify( widget.data ) ) );
3460 }
3461
3462 //
3463 // WIDGET STYLE HANDLER ---------------------------------------------------
3464 //
3465
3466 ( function() {
3467 // Styles categorized by group. It is used to prevent applying styles for the same group being used together.
3468 var styleGroups = {};
3469
3470 /**
3471 * The class representing a widget style. It is an {@link CKEDITOR#STYLE_OBJECT object} like
3472 * the styles handler for widgets.
3473 *
3474 * **Note:** This custom style handler does not support all methods of the {@link CKEDITOR.style} class.
3475 * Not supported methods: {@link #applyToRange}, {@link #removeFromRange}, {@link #applyToObject}.
3476 *
3477 * @since 4.4
3478 * @class CKEDITOR.style.customHandlers.widget
3479 * @extends CKEDITOR.style
3480 */
3481 CKEDITOR.style.addCustomHandler( {
3482 type: 'widget',
3483
3484 setup: function( styleDefinition ) {
3485 /**
3486 * The name of widget to which this style can be applied.
3487 * It is extracted from style definition's `widget` property.
3488 *
3489 * @property {String} widget
3490 */
3491 this.widget = styleDefinition.widget;
3492
3493 /**
3494 * An array of groups that this style belongs to.
3495 * Styles assigned to the same group cannot be combined.
3496 *
3497 * @since 4.6.2
3498 * @property {Array} group
3499 */
3500 this.group = typeof styleDefinition.group == 'string' ? [ styleDefinition.group ] : styleDefinition.group;
3501
3502 // Store style categorized by its group.
3503 // It is used to prevent enabling two styles from same group.
3504 if ( this.group ) {
3505 saveStyleGroup( this );
3506 }
3507 },
3508
3509 apply: function( editor ) {
3510 var widget;
3511
3512 // Before CKEditor 4.4 wasn't a required argument, so we need to
3513 // handle a case when it wasn't provided.
3514 if ( !( editor instanceof CKEDITOR.editor ) )
3515 return;
3516
3517 // Theoretically we could bypass checkApplicable, get widget from
3518 // widgets.focused and check its name, what would be faster, but then
3519 // this custom style would work differently than the default style
3520 // which checks if it's applicable before applying or removing itself.
3521 if ( this.checkApplicable( editor.elementPath(), editor ) ) {
3522 widget = editor.widgets.focused;
3523
3524 // Remove other styles from the same group.
3525 if ( this.group ) {
3526 this.removeStylesFromSameGroup( editor );
3527 }
3528
3529 widget.applyStyle( this );
3530 }
3531 },
3532
3533 remove: function( editor ) {
3534 // Before CKEditor 4.4 wasn't a required argument, so we need to
3535 // handle a case when it wasn't provided.
3536 if ( !( editor instanceof CKEDITOR.editor ) )
3537 return;
3538
3539 if ( this.checkApplicable( editor.elementPath(), editor ) )
3540 editor.widgets.focused.removeStyle( this );
3541 },
3542
3543 /**
3544 * Removes all styles that belong to the same group as this style. This method will neither add nor remove
3545 * the current style.
3546 * Returns `true` if any style was removed, otherwise returns `false`.
3547 *
3548 * @since 4.6.2
3549 * @param {CKEDITOR.editor} editor
3550 * @returns {Boolean}
3551 */
3552 removeStylesFromSameGroup: function( editor ) {
3553 var stylesFromSameGroup,
3554 path,
3555 removed = false;
3556
3557 // Before CKEditor 4.4 wasn't a required argument, so we need to
3558 // handle a case when it wasn't provided.
3559 if ( !( editor instanceof CKEDITOR.editor ) )
3560 return false;
3561
3562 path = editor.elementPath();
3563 if ( this.checkApplicable( path, editor ) ) {
3564 // Iterate over each group.
3565 for ( var i = 0, l = this.group.length; i < l; i++ ) {
3566 stylesFromSameGroup = styleGroups[ this.widget ][ this.group[ i ] ];
3567 // Iterate over each style from group.
3568 for ( var j = 0; j < stylesFromSameGroup.length; j++ ) {
3569 if ( stylesFromSameGroup[ j ] !== this && stylesFromSameGroup[ j ].checkActive( path, editor ) ) {
3570 editor.widgets.focused.removeStyle( stylesFromSameGroup[ j ] );
3571 removed = true;
3572 }
3573 }
3574 }
3575 }
3576
3577 return removed;
3578 },
3579
3580 checkActive: function( elementPath, editor ) {
3581 return this.checkElementMatch( elementPath.lastElement, 0, editor );
3582 },
3583
3584 checkApplicable: function( elementPath, editor ) {
3585 // Before CKEditor 4.4 wasn't a required argument, so we need to
3586 // handle a case when it wasn't provided.
3587 if ( !( editor instanceof CKEDITOR.editor ) )
3588 return false;
3589
3590 return this.checkElement( elementPath.lastElement );
3591 },
3592
3593 checkElementMatch: checkElementMatch,
3594
3595 checkElementRemovable: checkElementMatch,
3596
3597 /**
3598 * Checks if an element is a {@link CKEDITOR.plugins.widget#wrapper wrapper} of a
3599 * widget whose name matches the {@link #widget widget name} specified in the style definition.
3600 *
3601 * @param {CKEDITOR.dom.element} element
3602 * @returns {Boolean}
3603 */
3604 checkElement: function( element ) {
3605 if ( !Widget.isDomWidgetWrapper( element ) )
3606 return false;
3607
3608 var widgetElement = element.getFirst( Widget.isDomWidgetElement );
3609 return widgetElement && widgetElement.data( 'widget' ) == this.widget;
3610 },
3611
3612 buildPreview: function( label ) {
3613 return label || this._.definition.name;
3614 },
3615
3616 /**
3617 * Returns allowed content rules which should be registered for this style.
3618 * Uses widget's {@link CKEDITOR.plugins.widget.definition#styleableElements} to make a rule
3619 * allowing classes on specified elements or use widget's
3620 * {@link CKEDITOR.plugins.widget.definition#styleToAllowedContentRules} method to transform a style
3621 * into allowed content rules.
3622 *
3623 * @param {CKEDITOR.editor} The editor instance.
3624 * @returns {CKEDITOR.filter.allowedContentRules}
3625 */
3626 toAllowedContentRules: function( editor ) {
3627 if ( !editor )
3628 return null;
3629
3630 var widgetDef = editor.widgets.registered[ this.widget ],
3631 classes,
3632 rule = {};
3633
3634 if ( !widgetDef )
3635 return null;
3636
3637 if ( widgetDef.styleableElements ) {
3638 classes = this.getClassesArray();
3639 if ( !classes )
3640 return null;
3641
3642 rule[ widgetDef.styleableElements ] = {
3643 classes: classes,
3644 propertiesOnly: true
3645 };
3646 return rule;
3647 }
3648 if ( widgetDef.styleToAllowedContentRules )
3649 return widgetDef.styleToAllowedContentRules( this );
3650 return null;
3651 },
3652
3653 /**
3654 * Returns classes defined in the style in form of an array.
3655 *
3656 * @returns {String[]}
3657 */
3658 getClassesArray: function() {
3659 var classes = this._.definition.attributes && this._.definition.attributes[ 'class' ];
3660
3661 return classes ? CKEDITOR.tools.trim( classes ).split( /\s+/ ) : null;
3662 },
3663
3664 /**
3665 * Not implemented.
3666 *
3667 * @method applyToRange
3668 */
3669 applyToRange: notImplemented,
3670
3671 /**
3672 * Not implemented.
3673 *
3674 * @method removeFromRange
3675 */
3676 removeFromRange: notImplemented,
3677
3678 /**
3679 * Not implemented.
3680 *
3681 * @method applyToObject
3682 */
3683 applyToObject: notImplemented
3684 } );
3685
3686 function notImplemented() {}
3687
3688 // @context style
3689 function checkElementMatch( element, fullMatch, editor ) {
3690 // Before CKEditor 4.4 wasn't a required argument, so we need to
3691 // handle a case when it wasn't provided.
3692 if ( !editor )
3693 return false;
3694
3695 if ( !this.checkElement( element ) )
3696 return false;
3697
3698 var widget = editor.widgets.getByElement( element, true );
3699 return widget && widget.checkStyleActive( this );
3700 }
3701
3702 // Save and categorize style by its group.
3703 function saveStyleGroup( style ) {
3704 var widgetName = style.widget,
3705 group;
3706
3707 if ( !styleGroups[ widgetName ] ) {
3708 styleGroups[ widgetName ] = {};
3709 }
3710
3711 for ( var i = 0, l = style.group.length; i < l; i++ ) {
3712 group = style.group[ i ];
3713 if ( !styleGroups[ widgetName ][ group ] ) {
3714 styleGroups[ widgetName ][ group ] = [];
3715 }
3716
3717 styleGroups[ widgetName ][ group ].push( style );
3718 }
3719 }
3720
3721 } )();
3722
3723 //
3724 // EXPOSE PUBLIC API ------------------------------------------------------
3725 //
3726
3727 CKEDITOR.plugins.widget = Widget;
3728 Widget.repository = Repository;
3729 Widget.nestedEditable = NestedEditable;
3730} )();
3731
3732/**
3733 * An event fired when a widget definition is registered by the {@link CKEDITOR.plugins.widget.repository#add} method.
3734 * It is possible to modify the definition being registered.
3735 *
3736 * @event widgetDefinition
3737 * @member CKEDITOR.editor
3738 * @param {CKEDITOR.plugins.widget.definition} data Widget definition.
3739 */
3740
3741/**
3742 * This is an abstract class that describes the definition of a widget.
3743 * It is a type of {@link CKEDITOR.plugins.widget.repository#add} method's second argument.
3744 *
3745 * Widget instances inherit from registered widget definitions, although not in a prototypal way.
3746 * They are simply extended with corresponding widget definitions. Note that not all properties of
3747 * the widget definition become properties of a widget. Some, like {@link #data} or {@link #edit}, become
3748 * widget's events listeners.
3749 *
3750 * @class CKEDITOR.plugins.widget.definition
3751 * @abstract
3752 * @mixins CKEDITOR.feature
3753 */
3754
3755/**
3756 * Widget definition name. It is automatically set when the definition is
3757 * {@link CKEDITOR.plugins.widget.repository#add registered}.
3758 *
3759 * @property {String} name
3760 */
3761
3762/**
3763 * The method executed while initializing a widget, after a widget instance
3764 * is created, but before it is ready. It is executed before the first
3765 * {@link CKEDITOR.plugins.widget#event-data} is fired so it is common to
3766 * use the `init` method to populate widget data with information loaded from
3767 * the DOM, like for exmaple:
3768 *
3769 * init: function() {
3770 * this.setData( 'width', this.element.getStyle( 'width' ) );
3771 *
3772 * if ( this.parts.caption.getStyle( 'display' ) != 'none' )
3773 * this.setData( 'showCaption', true );
3774 * }
3775 *
3776 * @property {Function} init
3777 */
3778
3779/**
3780 * The function to be used to upcast an element to this widget or a
3781 * comma-separated list of upcast methods from the {@link #upcasts} object.
3782 *
3783 * The upcast function **is not** executed in the widget context (because the widget
3784 * does not exist yet) and two arguments are passed:
3785 *
3786 * * `element` ({@link CKEDITOR.htmlParser.element}) &ndash; The element to be checked.
3787 * * `data` (`Object`) &ndash; The object which can be extended with data which will then be passed to the widget.
3788 *
3789 * An element will be upcasted if a function returned `true` or an instance of
3790 * a {@link CKEDITOR.htmlParser.element} if upcasting meant DOM structure changes
3791 * (in this case the widget will be initialized on the returned element).
3792 *
3793 * @property {String/Function} upcast
3794 */
3795
3796/**
3797 * The object containing functions which can be used to upcast this widget.
3798 * Only those pointed by the {@link #upcast} property will be used.
3799 *
3800 * In most cases it is appropriate to use {@link #upcast} directly,
3801 * because majority of widgets need just one method.
3802 * However, in some cases the widget author may want to expose more than one variant
3803 * and then this property may be used.
3804 *
3805 * upcasts: {
3806 * // This function may upcast only figure elements.
3807 * figure: function() {
3808 * // ...
3809 * },
3810 * // This function may upcast only image elements.
3811 * image: function() {
3812 * // ...
3813 * },
3814 * // More variants...
3815 * }
3816 *
3817 * // Then, widget user may choose which upcast methods will be enabled.
3818 * editor.on( 'widgetDefinition', function( evt ) {
3819 * if ( evt.data.name == 'image' )
3820 * evt.data.upcast = 'figure,image'; // Use both methods.
3821 * } );
3822 *
3823 * @property {Object} upcasts
3824 */
3825
3826/**
3827 * The {@link #upcast} method(s) priority. The upcast with a lower priority number will be called before
3828 * the one with a higher number. The default priority is `10`.
3829 *
3830 * @since 4.5
3831 * @property {Number} [upcastPriority=10]
3832 */
3833
3834/**
3835 * The function to be used to downcast this widget or
3836 * a name of the downcast option from the {@link #downcasts} object.
3837 *
3838 * The downcast funciton will be executed in the {@link CKEDITOR.plugins.widget} context
3839 * and with `widgetElement` ({@link CKEDITOR.htmlParser.element}) argument which is
3840 * the widget's main element.
3841 *
3842 * The function may return an instance of the {@link CKEDITOR.htmlParser.node} class if the widget
3843 * needs to be downcasted to a different node than the widget's main element.
3844 *
3845 * @property {String/Function} downcast
3846 */
3847
3848/**
3849 * The object containing functions which can be used to downcast this widget.
3850 * Only the one pointed by the {@link #downcast} property will be used.
3851 *
3852 * In most cases it is appropriate to use {@link #downcast} directly,
3853 * because majority of widgets have just one variant of downcasting (or none at all).
3854 * However, in some cases the widget author may want to expose more than one variant
3855 * and then this property may be used.
3856 *
3857 * downcasts: {
3858 * // This downcast may transform the widget into the figure element.
3859 * figure: function() {
3860 * // ...
3861 * },
3862 * // This downcast may transform the widget into the image element with data-* attributes.
3863 * image: function() {
3864 * // ...
3865 * }
3866 * }
3867 *
3868 * // Then, the widget user may choose one of the downcast options when setting up his editor.
3869 * editor.on( 'widgetDefinition', function( evt ) {
3870 * if ( evt.data.name == 'image' )
3871 * evt.data.downcast = 'figure';
3872 * } );
3873 *
3874 * @property downcasts
3875 */
3876
3877/**
3878 * If set, it will be added as the {@link CKEDITOR.plugins.widget#event-edit} event listener.
3879 * This means that it will be executed when a widget is being edited.
3880 * See the {@link CKEDITOR.plugins.widget#method-edit} method.
3881 *
3882 * @property {Function} edit
3883 */
3884
3885/**
3886 * If set, it will be added as the {@link CKEDITOR.plugins.widget#event-data} event listener.
3887 * This means that it will be executed every time the {@link CKEDITOR.plugins.widget#property-data widget data} changes.
3888 *
3889 * @property {Function} data
3890 */
3891
3892/**
3893 * The method to be executed when the widget's command is executed in order to insert a new widget
3894 * (widget of this type is not focused). If not defined, then the default action will be
3895 * performed which means that:
3896 *
3897 * * An instance of the widget will be created in a detached {@link CKEDITOR.dom.documentFragment document fragment},
3898 * * The {@link CKEDITOR.plugins.widget#method-edit} method will be called to trigger widget editing,
3899 * * The widget element will be inserted into DOM.
3900 *
3901 * @property {Function} insert
3902 */
3903
3904/**
3905 * The name of a dialog window which will be opened on {@link CKEDITOR.plugins.widget#method-edit}.
3906 * If not defined, then the {@link CKEDITOR.plugins.widget#method-edit} method will not perform any action and
3907 * widget's command will insert a new widget without opening a dialog window first.
3908 *
3909 * @property {String} dialog
3910 */
3911
3912/**
3913 * The template which will be used to create a new widget element (when the widget's command is executed).
3914 * This string is populated with {@link #defaults default values} by using the {@link CKEDITOR.template} format.
3915 * Therefore it has to be a valid {@link CKEDITOR.template} argument.
3916 *
3917 * @property {String} template
3918 */
3919
3920/**
3921 * The data object which will be used to populate the data of a newly created widget.
3922 * See {@link CKEDITOR.plugins.widget#property-data}.
3923 *
3924 * defaults: {
3925 * showCaption: true,
3926 * align: 'none'
3927 * }
3928 *
3929 * @property defaults
3930 */
3931
3932/**
3933 * An object containing definitions of widget components (part name => CSS selector).
3934 *
3935 * parts: {
3936 * image: 'img',
3937 * caption: 'div.caption'
3938 * }
3939 *
3940 * @property parts
3941 */
3942
3943/**
3944 * An object containing definitions of nested editables (editable name => {@link CKEDITOR.plugins.widget.nestedEditable.definition}).
3945 * Note that editables *have to* be defined in the same order as they are in DOM / {@link CKEDITOR.plugins.widget.definition#template template}.
3946 * Otherwise errors will occur when nesting widgets inside each other.
3947 *
3948 * editables: {
3949 * header: 'h1',
3950 * content: {
3951 * selector: 'div.content',
3952 * allowedContent: 'p strong em; a[!href]'
3953 * }
3954 * }
3955 *
3956 * @property editables
3957 */
3958
3959/**
3960 * The function used to obtain an accessibility label for the widget. It might be used to make
3961 * the widget labels as precise as possible, since it has access to the widget instance.
3962 *
3963 * If not specified, the default implementation will use the {@link #pathName} or the main
3964 * {@link CKEDITOR.plugins.widget#element element} tag name.
3965 *
3966 * @property {Function} getLabel
3967 */
3968
3969/**
3970 * The widget name displayed in the elements path.
3971 *
3972 * @property {String} pathName
3973 */
3974
3975/**
3976 * If set to `true`, the widget's element will be covered with a transparent mask.
3977 * This will prevent its content from being clickable, which matters in case
3978 * of special elements like embedded Flash or iframes that generate a separate "context".
3979 *
3980 * @property {Boolean} mask
3981 */
3982
3983/**
3984 * If set to `true/false`, it will force the widget to be either an inline or a block widget.
3985 * If not set, the widget type will be determined from the widget element.
3986 *
3987 * Widget type influences whether a block (`div`) or an inline (`span`) element is used
3988 * for the wrapper.
3989 *
3990 * @property {Boolean} inline
3991 */
3992
3993/**
3994 * The label for the widget toolbar button.
3995 *
3996 * editor.widgets.add( 'simplebox', {
3997 * button: 'Create a simple box'
3998 * } );
3999 *
4000 * editor.widgets.add( 'simplebox', {
4001 * button: editor.lang.simplebox.title
4002 * } );
4003 *
4004 * @property {String} button
4005 */
4006
4007/**
4008 * Whether widget should be draggable. Defaults to `true`.
4009 * If set to `false` drag handler will not be displayed when hovering widget.
4010 *
4011 * @property {Boolean} draggable
4012 */
4013
4014/**
4015 * Names of element(s) (separated by spaces) for which the {@link CKEDITOR.filter} should allow classes
4016 * defined in the widget styles. For example if your widget is upcasted from a simple `<div>`
4017 * element, then in order to make it styleable you can set:
4018 *
4019 * editor.widgets.add( 'customWidget', {
4020 * upcast: function( element ) {
4021 * return element.name == 'div';
4022 * },
4023 *
4024 * // ...
4025 *
4026 * styleableElements: 'div'
4027 * } );
4028 *
4029 * Then, when the following style is defined:
4030 *
4031 * {
4032 * name: 'Thick border', type: 'widget', widget: 'customWidget',
4033 * attributes: { 'class': 'thickBorder' }
4034 * }
4035 *
4036 * a rule allowing the `thickBorder` class for `div` elements will be registered in the {@link CKEDITOR.filter}.
4037 *
4038 * If you need to have more freedom when transforming widget style to allowed content rules,
4039 * you can use the {@link #styleToAllowedContentRules} callback.
4040 *
4041 * @since 4.4
4042 * @property {String} styleableElements
4043 */
4044
4045/**
4046 * Function transforming custom widget's {@link CKEDITOR.style} instance into
4047 * {@link CKEDITOR.filter.allowedContentRules}. It may be used when a static
4048 * {@link #styleableElements} property is not enough to inform the {@link CKEDITOR.filter}
4049 * what HTML features should be enabled when allowing the given style.
4050 *
4051 * In most cases, when style's classes just have to be added to element name(s) used by
4052 * the widget element, it is recommended to use simpler {@link #styleableElements} property.
4053 *
4054 * In order to get parsed classes from the style definition you can use
4055 * {@link CKEDITOR.style.customHandlers.widget#getClassesArray}.
4056 *
4057 * For example, if you want to use the [object format of allowed content rules](#!/guide/dev_allowed_content_rules-section-object-format),
4058 * to specify `match` validator, your implementation could look like this:
4059 *
4060 * editor.widgets.add( 'customWidget', {
4061 * // ...
4062 *
4063 * styleToAllowedContentRules: funciton( style ) {
4064 * // Retrieve classes defined in the style.
4065 * var classes = style.getClassesArray();
4066 *
4067 * // Do something crazy - for example return allowed content rules in object format,
4068 * // with custom match property and propertiesOnly flag.
4069 * return {
4070 * h1: {
4071 * match: isWidgetElement,
4072 * propertiesOnly: true,
4073 * classes: classes
4074 * }
4075 * };
4076 * }
4077 * } );
4078 *
4079 * @since 4.4
4080 * @property {Function} styleToAllowedContentRules
4081 * @param {CKEDITOR.style.customHandlers.widget} style The style to be transformed.
4082 * @returns {CKEDITOR.filter.allowedContentRules}
4083 */
4084
4085/**
4086 * This is an abstract class that describes the definition of a widget's nested editable.
4087 * It is a type of values in the {@link CKEDITOR.plugins.widget.definition#editables} object.
4088 *
4089 * In the simplest case the definition is a string which is a CSS selector used to
4090 * find an element that will become a nested editable inside the widget. Note that
4091 * the widget element can be a nested editable, too.
4092 *
4093 * In the more advanced case a definition is an object with a required `selector` property.
4094 *
4095 * editables: {
4096 * header: 'h1',
4097 * content: {
4098 * selector: 'div.content',
4099 * allowedContent: 'p strong em; a[!href]'
4100 * }
4101 * }
4102 *
4103 * @class CKEDITOR.plugins.widget.nestedEditable.definition
4104 * @abstract
4105 */
4106
4107/**
4108 * The CSS selector used to find an element which will become a nested editable.
4109 *
4110 * @property {String} selector
4111 */
4112
4113/**
4114 * The [Advanced Content Filter](#!/guide/dev_advanced_content_filter) rules
4115 * which will be used to limit the content allowed in this nested editable.
4116 * This option is similar to {@link CKEDITOR.config#allowedContent} and one can
4117 * use it to limit the editor features available in the nested editable.
4118 *
4119 * @property {CKEDITOR.filter.allowedContentRules} allowedContent
4120 */
4121
4122/**
4123 * Nested editable name displayed in elements path.
4124 *
4125 * @property {String} pathName
4126 */