From c63493c899de714b05b0521bb38aab60d19030ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Isma=C3=ABl=20Bouya?= Date: Fri, 20 Jan 2017 00:55:51 +0100 Subject: Validation initiale --- sources/plugins/widget/dev/assets/contents.css | 23 ++++ sources/plugins/widget/dev/assets/sample.jpg | Bin 0 -> 17932 bytes .../widget/dev/assets/simplebox/contents.css | 36 ++++++ .../dev/assets/simplebox/dialogs/simplebox.js | 51 ++++++++ .../dev/assets/simplebox/icons/simplebox.png | Bin 0 -> 286 bytes .../plugins/widget/dev/assets/simplebox/plugin.js | 114 ++++++++++++++++ sources/plugins/widget/dev/console.js | 131 +++++++++++++++++++ sources/plugins/widget/dev/nestedwidgets.html | 134 +++++++++++++++++++ sources/plugins/widget/dev/widgetstyles.html | 144 +++++++++++++++++++++ 9 files changed, 633 insertions(+) create mode 100644 sources/plugins/widget/dev/assets/contents.css create mode 100644 sources/plugins/widget/dev/assets/sample.jpg create mode 100644 sources/plugins/widget/dev/assets/simplebox/contents.css create mode 100644 sources/plugins/widget/dev/assets/simplebox/dialogs/simplebox.js create mode 100644 sources/plugins/widget/dev/assets/simplebox/icons/simplebox.png create mode 100644 sources/plugins/widget/dev/assets/simplebox/plugin.js create mode 100644 sources/plugins/widget/dev/console.js create mode 100644 sources/plugins/widget/dev/nestedwidgets.html create mode 100644 sources/plugins/widget/dev/widgetstyles.html (limited to 'sources/plugins/widget/dev') 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 @@ +.mediumBorder { + border-width: 2px; +} +.thickBorder { + border-width: 5px; +} +img.thickBorder, img.mediumBorder { + border-style: solid; + border-color: #CCC; +} +.important.soMuch { + margin: 25px; + padding: 25px; + background: red; + border: none; +} + +span.redMarker { + background-color: red; +} +.invisible { + opacity: 0.1; +} 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 Binary files /dev/null and b/sources/plugins/widget/dev/assets/sample.jpg 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 @@ +.simplebox { + padding: 8px; + margin: 10px; + background: #eee; + border-radius: 8px; + border: 1px solid #ddd; + box-shadow: 0 1px 1px #fff inset, 0 -1px 0px #ccc inset; +} +.simplebox-title, .simplebox-content { + box-shadow: 0 1px 1px #ddd inset; + border: 1px solid #cccccc; + border-radius: 5px; + background: #fff; +} +.simplebox-title { + margin: 0 0 8px; + padding: 5px 8px; +} +.simplebox-content { + padding: 0 8px; +} +.simplebox-content::after { + content: ''; + display: block; + clear: both; +} +.simplebox.align-right { + float: right; +} +.simplebox.align-left { + float: left; +} +.simplebox.align-center { + margin-left: auto; + margin-right: auto; +} 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 @@ +// Note: This automatic widget to dialog window binding (the fact that every field is set up from the widget +// and is committed to the widget) is only possible when the dialog is opened by the Widgets System +// (i.e. the widgetDef.dialog property is set). +// When you are opening the dialog window by yourself, you need to take care of this by yourself too. + +CKEDITOR.dialog.add( 'simplebox', function( editor ) { + return { + title: 'Edit Simple Box', + minWidth: 200, + minHeight: 100, + contents: [ + { + id: 'info', + elements: [ + { + id: 'align', + type: 'select', + label: 'Align', + items: [ + [ editor.lang.common.notSet, '' ], + [ editor.lang.common.alignLeft, 'left' ], + [ editor.lang.common.alignRight, 'right' ], + [ editor.lang.common.alignCenter, 'center' ] + ], + // When setting up this field, set its value to the "align" value from widget data. + // Note: Align values used in the widget need to be the same as those defined in the "items" array above. + setup: function( widget ) { + this.setValue( widget.data.align ); + }, + // When committing (saving) this field, set its value to the widget data. + commit: function( widget ) { + widget.setData( 'align', this.getValue() ); + } + }, + { + id: 'width', + type: 'text', + label: 'Width', + width: '50px', + setup: function( widget ) { + this.setValue( widget.data.width ); + }, + commit: function( widget ) { + widget.setData( 'width', this.getValue() ); + } + } + ] + } + ] + }; +} ); 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 Binary files /dev/null and b/sources/plugins/widget/dev/assets/simplebox/icons/simplebox.png 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 @@ +'use strict'; + +// Register the plugin within the editor. +CKEDITOR.plugins.add( 'simplebox', { + // This plugin requires the Widgets System defined in the 'widget' plugin. + requires: 'widget', + + // Register the icon used for the toolbar button. It must be the same + // as the name of the widget. + icons: 'simplebox', + + // The plugin initialization logic goes inside this method. + init: function( editor ) { + // Register the editing dialog. + CKEDITOR.dialog.add( 'simplebox', this.path + 'dialogs/simplebox.js' ); + + // Register the simplebox widget. + editor.widgets.add( 'simplebox', { + // Allow all HTML elements, classes, and styles that this widget requires. + // Read more about the Advanced Content Filter here: + // * http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter + // * http://docs.ckeditor.com/#!/guide/plugin_sdk_integration_with_acf + allowedContent: + 'div(!simplebox,align-left,align-right,align-center){width};' + + 'div(!simplebox-content); h2(!simplebox-title)', + + // Minimum HTML which is required by this widget to work. + requiredContent: 'div(simplebox)', + + // Define two nested editable areas. + editables: { + title: { + // Define CSS selector used for finding the element inside widget element. + selector: '.simplebox-title', + // Define content allowed in this nested editable. Its content will be + // filtered accordingly and the toolbar will be adjusted when this editable + // is focused. + allowedContent: 'br strong em' + }, + content: { + selector: '.simplebox-content' + } + }, + + // Define the template of a new Simple Box widget. + // The template will be used when creating new instances of the Simple Box widget. + template: + '
' + + '

Title

' + + '

Content...

' + + '
', + + // Define the label for a widget toolbar button which will be automatically + // created by the Widgets System. This button will insert a new widget instance + // created from the template defined above, or will edit selected widget + // (see second part of this tutorial to learn about editing widgets). + // + // Note: In order to be able to translate your widget you should use the + // editor.lang.simplebox.* property. A string was used directly here to simplify this tutorial. + button: 'Create a simple box', + + // Set the widget dialog window name. This enables the automatic widget-dialog binding. + // This dialog window will be opened when creating a new widget or editing an existing one. + dialog: 'simplebox', + + // Check the elements that need to be converted to widgets. + // + // Note: The "element" argument is an instance of http://docs.ckeditor.com/#!/api/CKEDITOR.htmlParser.element + // so it is not a real DOM element yet. This is caused by the fact that upcasting is performed + // during data processing which is done on DOM represented by JavaScript objects. + upcast: function( element ) { + // Return "true" (that element needs to converted to a Simple Box widget) + // for all
elements with a "simplebox" class. + return element.name == 'div' && element.hasClass( 'simplebox' ); + }, + + // When a widget is being initialized, we need to read the data ("align" and "width") + // from DOM and set it by using the widget.setData() method. + // More code which needs to be executed when DOM is available may go here. + init: function() { + var width = this.element.getStyle( 'width' ); + if ( width ) + this.setData( 'width', width ); + + if ( this.element.hasClass( 'align-left' ) ) + this.setData( 'align', 'left' ); + if ( this.element.hasClass( 'align-right' ) ) + this.setData( 'align', 'right' ); + if ( this.element.hasClass( 'align-center' ) ) + this.setData( 'align', 'center' ); + }, + + // Listen on the widget#data event which is fired every time the widget data changes + // and updates the widget's view. + // Data may be changed by using the widget.setData() method, which we use in the + // Simple Box dialog window. + data: function() { + // Check whether "width" widget data is set and remove or set "width" CSS style. + // The style is set on widget main element (div.simplebox). + if ( !this.data.width ) + this.element.removeStyle( 'width' ); + else + this.element.setStyle( 'width', this.data.width ); + + // Brutally remove all align classes and set a new one if "align" widget data is set. + this.element.removeClass( 'align-left' ); + this.element.removeClass( 'align-right' ); + this.element.removeClass( 'align-center' ); + if ( this.data.align ) + this.element.addClass( 'align-' + this.data.align ); + } + } ); + } +} ); 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 @@ +/** + * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md or http://ckeditor.com/license + */ + +/* global CKCONSOLE */ + +'use strict'; + +( function() { + + CKCONSOLE.add( 'widget', { + panels: [ + { + type: 'box', + content: '', + + refresh: function( editor ) { + var instances = obj2Array( editor.widgets.instances ); + + return { + header: 'Instances (' + instances.length + ')', + instances: generateInstancesList( instances ) + }; + }, + + refreshOn: function( editor, refresh ) { + editor.widgets.on( 'instanceCreated', function( evt ) { + refresh(); + + evt.data.on( 'data', refresh ); + } ); + + editor.widgets.on( 'instanceDestroyed', refresh ); + } + }, + + { + type: 'box', + content: + '', + + refresh: function( editor ) { + var focused = editor.widgets.focused, + selected = editor.widgets.selected, + selectedIds = []; + + for ( var i = 0; i < selected.length; ++i ) + selectedIds.push( selected[ i ].id ); + + return { + header: 'Focus & selection', + focused: focused ? 'id: ' + focused.id : '-', + selected: selectedIds.length ? 'id: ' + selectedIds.join( ', id: ' ) : '-' + }; + }, + + refreshOn: function( editor, refresh ) { + editor.on( 'selectionCheck', refresh, null, null, 999 ); + } + }, + + { + type: 'log', + + on: function( editor, log, logFn ) { + // Add all listeners with high priorities to log + // messages in the correct order when one event depends on another. + // E.g. selectionChange triggers widget selection - if this listener + // for selectionChange will be executed later than that one, then order + // will be incorrect. + + editor.on( 'selectionChange', function( evt ) { + var msg = 'selection change', + sel = evt.data.selection, + el = sel.getSelectedElement(), + widget; + + if ( el && ( widget = editor.widgets.getByElement( el, true ) ) ) + msg += ' (id: ' + widget.id + ')'; + + log( msg ); + }, null, null, 1 ); + + editor.widgets.on( 'instanceDestroyed', function( evt ) { + log( 'instance destroyed (id: ' + evt.data.id + ')' ); + }, null, null, 1 ); + + editor.widgets.on( 'instanceCreated', function( evt ) { + log( 'instance created (id: ' + evt.data.id + ')' ); + }, null, null, 1 ); + + editor.widgets.on( 'widgetFocused', function( evt ) { + log( 'widget focused (id: ' + evt.data.widget.id + ')' ); + }, null, null, 1 ); + + editor.widgets.on( 'widgetBlurred', function( evt ) { + log( 'widget blurred (id: ' + evt.data.widget.id + ')' ); + }, null, null, 1 ); + + editor.widgets.on( 'checkWidgets', logFn( 'checking widgets' ), null, null, 1 ); + editor.widgets.on( 'checkSelection', logFn( 'checking selection' ), null, null, 1 ); + } + } + ] + } ); + + function generateInstancesList( instances ) { + var html = '', + instance; + + for ( var i = 0; i < instances.length; ++i ) { + instance = instances[ i ]; + html += itemTpl.output( { id: instance.id, name: instance.name, data: JSON.stringify( instance.data ) } ); + } + return html; + } + + function obj2Array( obj ) { + var arr = []; + for ( var id in obj ) + arr.push( obj[ id ] ); + + return arr; + } + + var itemTpl = new CKEDITOR.template( '
  • id: {id}, name: {name}, data: {data}
    • ' ); +} )(); 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 @@ + + + + + + Nested widgets — CKEditor Sample + + + + + + + + + +

    Nested widgets

    + +

    Classic (iframe-based) Sample

    + + +

    Inline Sample

    +
    +

    Simple Box Sample

    + +
    +

    Title

    +
    +

    Apollo 11 was the spaceflight that landed the first humans, Americans Neil Armstrong and Buzz Aldrin, 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]].

    + +
    + The Eagle +
    The Eagle in lunar orbit
    +
    + +
      +
    • Foo!
      • +
    • Bar!
      • +
    + +

    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.

    +
    +
    + +

    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.

    + +

    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.

    + +

    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.

    + +
    +

    Title

    +
    +

    The EagleApollo 11 was the spaceflight that landed the first humans, Americans Neil Armstrong and Buzz Aldrin, 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]].

    + +
      +
    • Foo!
      • +
    • Bar!
      • +
    +
    +
    + +

    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.

    +
    + + + + 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 @@ + + + + + + Applying styles to widgets — CKEditor Sample + + + + + + +

    Applying styles to widgets

    + +

    Classic (iframe-based) Sample

    + + +

    Inline Sample

    +
    +

    Apollo 11

    + +
    + Saturn V +
    Roll out of Saturn V on launch pad
    +
    + +

    Apollo 11 was the spaceflight that landed the first humans, Americans Neil Armstrong and Buzz Aldrin, 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]].

    + +

    Armstrong spent about three and a half two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5 kg) of lunar material for return to Earth. A third member of the mission, Michael Collins, piloted the command spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.

    + +

    Broadcasting and quotes

    + +

    Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:

    + +
    +

    One small step for [a] man, one giant leap for mankind.

    +
    + +

    \( \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) \)

    + +

    Apollo 11 effectively ended the Space Race and fulfilled a national goal proposed in 1961 by the late U.S. President John F. Kennedy in a speech before the United States Congress:

    + +
    +

    [...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.

    +
    + +
    + The Eagle +
    The Eagle in lunar orbit
    +
    + +

    Technical details

    + +

    Launched by a Saturn V rocket from Kennedy Space Center in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of NASA's Apollo program. The Apollo spacecraft had three parts:

    + +
      +
    1. Command Module with a cabin for the three astronauts which was the only part which landed back on Earth
      2. +
    2. Service Module which supported the Command Module with propulsion, electrical power, oxygen and water
      3. +
    3. Lunar Module for landing on the Moon.
      4. +
    + +

    After being sent to the Moon by the Saturn V'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 Sea of Tranquility. 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 Pacific Ocean on July 24.

    +
    + + + + -- cgit v1.2.3