diff options
author | Ismaël Bouya <ismael.bouya@normalesup.org> | 2017-12-04 17:54:04 +0100 |
---|---|---|
committer | Ismaël Bouya <ismael.bouya@normalesup.org> | 2017-12-04 17:54:04 +0100 |
commit | 317f8f8f0651488f226b5280a8f036c7c135c639 (patch) | |
tree | 97bd4889ab2822a00d4b0f0d5cde38b59f9f41de /sources/plugins/widget/dev/assets | |
parent | 1096cdefb1c9a3f3c4ca6807e272da6c92e5ed9c (diff) | |
download | piedsjaloux-ckeditor-component-4.7.3.tar.gz piedsjaloux-ckeditor-component-4.7.3.tar.zst piedsjaloux-ckeditor-component-4.7.3.zip |
Add oembed4.7.3
Diffstat (limited to 'sources/plugins/widget/dev/assets')
-rw-r--r-- | sources/plugins/widget/dev/assets/contents.css | 23 | ||||
-rw-r--r-- | sources/plugins/widget/dev/assets/sample.jpg | bin | 0 -> 17932 bytes | |||
-rw-r--r-- | sources/plugins/widget/dev/assets/simplebox/contents.css | 36 | ||||
-rw-r--r-- | sources/plugins/widget/dev/assets/simplebox/dialogs/simplebox.js | 51 | ||||
-rw-r--r-- | sources/plugins/widget/dev/assets/simplebox/icons/simplebox.png | bin | 0 -> 286 bytes | |||
-rw-r--r-- | sources/plugins/widget/dev/assets/simplebox/plugin.js | 114 |
6 files changed, 224 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 | } | ||
7 | img.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 | |||
18 | span.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 | |||
6 | CKEDITOR.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..4c22d0d --- /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. | ||
4 | CKEDITOR.plugins.add( 'simplebox', { | ||
5 | // This plugin requires the Widgets System defined in the 'widget' plugin. | ||
6 | requires: 'widget,dialog', | ||
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 | } ); | ||