MDL-46387 editor-atto: Toggle sub/sup tags using rangy

In order to have a consistant browser behavior and prevent nesting of subscripts and superscripts, tags are converted to CSS classes and then the CSS classes in the selection are toggeled using the rangy crossbrowser selection library already included in Atto without using an execCommand.
abgreeve · Aug 13, 2015 · dc9ca4a · dc9ca4a
1 parent dda862a
commit dc9ca4a
Show file tree

Hide file tree

Showing 18 changed files with 813 additions and 23 deletions.
diff --git a/...ns/subscript/yui/build/moodle-atto_subscript-button/moodle-atto_subscript-button-debug.js b/...ns/subscript/yui/build/moodle-atto_subscript-button/moodle-atto_subscript-button-debug.js
@@ -34,13 +34,55 @@ YUI.add('moodle-atto_subscript-button', function (Y, NAME) {
  */
 
 Y.namespace('M.atto_subscript').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
+    /**
+     * A rangy object to alter CSS classes.
+     *
+     * @property _subscriptApplier
+     * @type Object
+     * @private
+     */
+    _subscriptApplier: null,
+
+    /**
+     * A rangy object to alter CSS classes.
+     *
+     * @property _superscriptApplier
+     * @type Object
+     * @private
+     */
+    _superscriptApplier: null,
+
     initializer: function() {
-        this.addBasicButton({
-            exec: 'subscript',
+        this.addButton({
+            buttonName: 'subscript',
+            callback: this.toggleSubscript,
+            icon: 'e/subscript',
+            inlineFormat: true,
 
             // Watch the following tags and add/remove highlighting as appropriate:
             tags: 'sub'
         });
+        this._subscriptApplier = window.rangy.createCssClassApplier("editor-subscript");
+        this._superscriptApplier = window.rangy.createCssClassApplier("editor-superscript");
+    },
+
+    /**
+     * Toggle subscripts in selection
+     *
+     * @method toggleSubscript
+     */
+    toggleSubscript: function() {
+        // Replace all the sub and sup tags.
+        this.get('host').changeToCSS('sup', 'editor-superscript');
+        this.get('host').changeToCSS('sub', 'editor-subscript');
+
+        // Remove all superscripts inselection and toggle subscript.
+        this._superscriptApplier.undoToSelection();
+        this._subscriptApplier.toggleSelection();
+
+        // Replace CSS classes with tags.
+        this.get('host').changeToTags('editor-subscript', 'sub');
+        this.get('host').changeToTags('editor-superscript', 'sup');
     }
 });
 

diff --git a/...gins/subscript/yui/build/moodle-atto_subscript-button/moodle-atto_subscript-button-min.js b/...gins/subscript/yui/build/moodle-atto_subscript-button/moodle-atto_subscript-button-min.js
diff --git a/.../plugins/subscript/yui/build/moodle-atto_subscript-button/moodle-atto_subscript-button.js b/.../plugins/subscript/yui/build/moodle-atto_subscript-button/moodle-atto_subscript-button.js
@@ -34,13 +34,55 @@ YUI.add('moodle-atto_subscript-button', function (Y, NAME) {
  */
 
 Y.namespace('M.atto_subscript').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
+    /**
+     * A rangy object to alter CSS classes.
+     *
+     * @property _subscriptApplier
+     * @type Object
+     * @private
+     */
+    _subscriptApplier: null,
+
+    /**
+     * A rangy object to alter CSS classes.
+     *
+     * @property _superscriptApplier
+     * @type Object
+     * @private
+     */
+    _superscriptApplier: null,
+
     initializer: function() {
-        this.addBasicButton({
-            exec: 'subscript',
+        this.addButton({
+            buttonName: 'subscript',
+            callback: this.toggleSubscript,
+            icon: 'e/subscript',
+            inlineFormat: true,
 
             // Watch the following tags and add/remove highlighting as appropriate:
             tags: 'sub'
         });
+        this._subscriptApplier = window.rangy.createCssClassApplier("editor-subscript");
+        this._superscriptApplier = window.rangy.createCssClassApplier("editor-superscript");
+    },
+
+    /**
+     * Toggle subscripts in selection
+     *
+     * @method toggleSubscript
+     */
+    toggleSubscript: function() {
+        // Replace all the sub and sup tags.
+        this.get('host').changeToCSS('sup', 'editor-superscript');
+        this.get('host').changeToCSS('sub', 'editor-subscript');
+
+        // Remove all superscripts inselection and toggle subscript.
+        this._superscriptApplier.undoToSelection();
+        this._subscriptApplier.toggleSelection();
+
+        // Replace CSS classes with tags.
+        this.get('host').changeToTags('editor-subscript', 'sub');
+        this.get('host').changeToTags('editor-superscript', 'sup');
     }
 });
 

diff --git a/lib/editor/atto/plugins/subscript/yui/src/button/js/button.js b/lib/editor/atto/plugins/subscript/yui/src/button/js/button.js
@@ -32,12 +32,54 @@
  */
 
 Y.namespace('M.atto_subscript').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
+    /**
+     * A rangy object to alter CSS classes.
+     *
+     * @property _subscriptApplier
+     * @type Object
+     * @private
+     */
+    _subscriptApplier: null,
+
+    /**
+     * A rangy object to alter CSS classes.
+     *
+     * @property _superscriptApplier
+     * @type Object
+     * @private
+     */
+    _superscriptApplier: null,
+
     initializer: function() {
-        this.addBasicButton({
-            exec: 'subscript',
+        this.addButton({
+            buttonName: 'subscript',
+            callback: this.toggleSubscript,
+            icon: 'e/subscript',
+            inlineFormat: true,
 
             // Watch the following tags and add/remove highlighting as appropriate:
             tags: 'sub'
         });
+        this._subscriptApplier = window.rangy.createCssClassApplier("editor-subscript");
+        this._superscriptApplier = window.rangy.createCssClassApplier("editor-superscript");
+    },
+
+    /**
+     * Toggle subscripts in selection
+     *
+     * @method toggleSubscript
+     */
+    toggleSubscript: function() {
+        // Replace all the sub and sup tags.
+        this.get('host').changeToCSS('sup', 'editor-superscript');
+        this.get('host').changeToCSS('sub', 'editor-subscript');
+
+        // Remove all superscripts inselection and toggle subscript.
+        this._superscriptApplier.undoToSelection();
+        this._subscriptApplier.toggleSelection();
+
+        // Replace CSS classes with tags.
+        this.get('host').changeToTags('editor-subscript', 'sub');
+        this.get('host').changeToTags('editor-superscript', 'sup');
     }
 });
diff --git a/...erscript/yui/build/moodle-atto_superscript-button/moodle-atto_superscript-button-debug.js b/...erscript/yui/build/moodle-atto_superscript-button/moodle-atto_superscript-button-debug.js
@@ -34,13 +34,55 @@ YUI.add('moodle-atto_superscript-button', function (Y, NAME) {
  */
 
 Y.namespace('M.atto_superscript').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
+    /**
+     * A rangy object to alter CSS classes.
+     *
+     * @property _subscriptApplier
+     * @type Object
+     * @private
+     */
+    _subscriptApplier: null,
+
+    /**
+     * A rangy object to alter CSS classes.
+     *
+     * @property _superscriptApplier
+     * @type Object
+     * @private
+     */
+    _superscriptApplier: null,
+
     initializer: function() {
-        this.addBasicButton({
-            exec: 'superscript',
+        this.addButton({
+            buttonName: 'superscript',
+            inlineFormat: true,
+            callback: this.toggleSuperscript,
+            icon: 'e/superscript',
 
             // Watch the following tags and add/remove highlighting as appropriate:
             tags: 'sup'
         });
+        this._subscriptApplier = window.rangy.createCssClassApplier("editor-subscript");
+        this._superscriptApplier = window.rangy.createCssClassApplier("editor-superscript");
+    },
+
+    /**
+     * Toggle superscripts in selection
+     *
+     * @method toggleSuperscript
+     */
+    toggleSuperscript: function() {
+        // Replace all the sub and sup tags.
+        this.get('host').changeToCSS('sub', 'editor-subscript');
+        this.get('host').changeToCSS('sup', 'editor-superscript');
+
+        // Remove all subscripts inselection and toggle superscript.
+        this._superscriptApplier.toggleSelection();
+        this._subscriptApplier.undoToSelection();
+
+        // Replace CSS classes with tags.
+        this.get('host').changeToTags('editor-superscript', 'sup');
+        this.get('host').changeToTags('editor-subscript', 'sub');
     }
 });
 

diff --git a/...uperscript/yui/build/moodle-atto_superscript-button/moodle-atto_superscript-button-min.js b/...uperscript/yui/build/moodle-atto_superscript-button/moodle-atto_superscript-button-min.js
diff --git a/...ns/superscript/yui/build/moodle-atto_superscript-button/moodle-atto_superscript-button.js b/...ns/superscript/yui/build/moodle-atto_superscript-button/moodle-atto_superscript-button.js
@@ -34,13 +34,55 @@ YUI.add('moodle-atto_superscript-button', function (Y, NAME) {
  */
 
 Y.namespace('M.atto_superscript').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
+    /**
+     * A rangy object to alter CSS classes.
+     *
+     * @property _subscriptApplier
+     * @type Object
+     * @private
+     */
+    _subscriptApplier: null,
+
+    /**
+     * A rangy object to alter CSS classes.
+     *
+     * @property _superscriptApplier
+     * @type Object
+     * @private
+     */
+    _superscriptApplier: null,
+
     initializer: function() {
-        this.addBasicButton({
-            exec: 'superscript',
+        this.addButton({
+            buttonName: 'superscript',
+            inlineFormat: true,
+            callback: this.toggleSuperscript,
+            icon: 'e/superscript',
 
             // Watch the following tags and add/remove highlighting as appropriate:
             tags: 'sup'
         });
+        this._subscriptApplier = window.rangy.createCssClassApplier("editor-subscript");
+        this._superscriptApplier = window.rangy.createCssClassApplier("editor-superscript");
+    },
+
+    /**
+     * Toggle superscripts in selection
+     *
+     * @method toggleSuperscript
+     */
+    toggleSuperscript: function() {
+        // Replace all the sub and sup tags.
+        this.get('host').changeToCSS('sub', 'editor-subscript');
+        this.get('host').changeToCSS('sup', 'editor-superscript');
+
+        // Remove all subscripts inselection and toggle superscript.
+        this._superscriptApplier.toggleSelection();
+        this._subscriptApplier.undoToSelection();
+
+        // Replace CSS classes with tags.
+        this.get('host').changeToTags('editor-superscript', 'sup');
+        this.get('host').changeToTags('editor-subscript', 'sub');
     }
 });
 

diff --git a/lib/editor/atto/plugins/superscript/yui/src/button/js/button.js b/lib/editor/atto/plugins/superscript/yui/src/button/js/button.js
@@ -32,12 +32,54 @@
  */
 
 Y.namespace('M.atto_superscript').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
+    /**
+     * A rangy object to alter CSS classes.
+     *
+     * @property _subscriptApplier
+     * @type Object
+     * @private
+     */
+    _subscriptApplier: null,
+
+    /**
+     * A rangy object to alter CSS classes.
+     *
+     * @property _superscriptApplier
+     * @type Object
+     * @private
+     */
+    _superscriptApplier: null,
+
     initializer: function() {
-        this.addBasicButton({
-            exec: 'superscript',
+        this.addButton({
+            buttonName: 'superscript',
+            callback: this.toggleSuperscript,
+            icon: 'e/superscript',
+            inlineFormat: true,
 
             // Watch the following tags and add/remove highlighting as appropriate:
             tags: 'sup'
         });
+        this._subscriptApplier = window.rangy.createCssClassApplier("editor-subscript");
+        this._superscriptApplier = window.rangy.createCssClassApplier("editor-superscript");
+    },
+
+    /**
+     * Toggle superscripts in selection
+     *
+     * @method toggleSuperscript
+     */
+    toggleSuperscript: function() {
+        // Replace all the sub and sup tags.
+        this.get('host').changeToCSS('sub', 'editor-subscript');
+        this.get('host').changeToCSS('sup', 'editor-superscript');
+
+        // Remove all subscripts inselection and toggle superscript.
+        this._superscriptApplier.toggleSelection();
+        this._subscriptApplier.undoToSelection();
+
+        // Replace CSS classes with tags.
+        this.get('host').changeToTags('editor-superscript', 'sup');
+        this.get('host').changeToTags('editor-subscript', 'sub');
     }
 });