[MediaWiki-commits] [Gerrit] Make CSS classes in alignable configurable - change (VisualEditor/VisualEditor)

[Esanders (Code Review)]

Esanders has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/189231

Change subject: Make CSS classes in alignable configurable
......................................................................

Make CSS classes in alignable configurable

Also make the classes noflip for Janus

Change-Id: I2865c4fd073819d42bbbecee882b8325b12a5f74
---
M src/ce/styles/nodes/ve.ce.AlignableNode.css
M src/ce/ve.ce.AlignableNode.js
M src/dm/ve.dm.AlignableNode.js
3 files changed, 56 insertions(+), 12 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/VisualEditor/VisualEditor 
refs/changes/31/189231/1

diff --git a/src/ce/styles/nodes/ve.ce.AlignableNode.css 
b/src/ce/styles/nodes/ve.ce.AlignableNode.css
index 00f6655..e40f20d 100644
--- a/src/ce/styles/nodes/ve.ce.AlignableNode.css
+++ b/src/ce/styles/nodes/ve.ce.AlignableNode.css
@@ -5,11 +5,13 @@
  */
 
 .ve-align-right {
+       /* @noflip */
        float: right;
        margin: 0.5em 0 1em 1em;
 }
 
 .ve-align-left {
+       /* @noflip */
        float: left;
        margin: 0.5em 1em 1em 0;
 }
diff --git a/src/ce/ve.ce.AlignableNode.js b/src/ce/ve.ce.AlignableNode.js
index e1eb7c1..ab642f7 100644
--- a/src/ce/ve.ce.AlignableNode.js
+++ b/src/ce/ve.ce.AlignableNode.js
@@ -17,10 +17,8 @@
 
        this.$alignable = $alignable || this.$element;
 
-       if ( this.model.getAttribute( 'align' ) ) {
-               this.$alignable.addClass( 've-align-' + 
this.model.getAttribute( 'align' ) );
-       }
-
+       // Events
+       this.connect( this, { setup: 'onAlignableSetup' } );
        this.model.connect( this, { attributeChange: 
'onAlignableAttributeChange' } );
 };
 
@@ -28,13 +26,33 @@
 
 OO.initClass( ve.ce.AlignableNode );
 
+/**
+ * Handle attribute change events
+ *
+ * @param {string} key Key
+ * @param {string} from Old value
+ * @param {string} to New value
+ */
 ve.ce.AlignableNode.prototype.onAlignableAttributeChange = function ( key, 
from, to ) {
+       var cssClasses;
        if ( key === 'align' ) {
-               if ( from ) {
-                       this.$alignable.removeClass( 've-align-' + from );
+               cssClasses = this.model.constructor.static.cssClasses;
+               if ( from && cssClasses[from] ) {
+                       this.$alignable.removeClass( cssClasses[from] );
                }
-               if ( to ) {
-                       this.$alignable.addClass( 've-align-' + to );
+               if ( to && cssClasses[to] ) {
+                       this.$alignable.addClass( cssClasses[to] );
                }
        }
 };
+
+/**
+ * Handle node setup
+ */
+ve.ce.AlignableNode.prototype.onAlignableSetup = function () {
+       var align = this.model.getAttribute( 'align' ),
+               cssClasses = this.model.constructor.static.cssClasses;
+       if ( align && cssClasses[align] ) {
+               this.$alignable.addClass( cssClasses[align] );
+       }
+};
diff --git a/src/dm/ve.dm.AlignableNode.js b/src/dm/ve.dm.AlignableNode.js
index 365514b..f89e242 100644
--- a/src/dm/ve.dm.AlignableNode.js
+++ b/src/dm/ve.dm.AlignableNode.js
@@ -18,6 +18,21 @@
 
 OO.initClass( ve.dm.AlignableNode );
 
+/* Static properties */
+
+/**
+ * CSS class to use for each alignment
+ *
+ * @static
+ * @property {Object}
+ * @inheritable
+ */
+ve.dm.AlignableNode.static.cssClasses = {
+       left: 've-align-left',
+       right: 've-align-right',
+       center: 've-align-center'
+};
+
 /**
  * Creates attributes for the data element from DOM elements
  *
@@ -27,12 +42,21 @@
  * @return {Object} Attributes for data element
  */
 ve.dm.AlignableNode.static.toDataElementAttributes = function ( domElements ) {
-       var matches = domElements[0].className.match( /ve-align-([A-Za-z]+)/ );
+       var a, align,
+               $element = $( domElements[0] ),
+               cssClasses = this.cssClasses;
 
-       if ( matches ) {
+       for ( a in cssClasses ) {
+               if ( $element.hasClass( cssClasses[a] ) ) {
+                       align = a;
+                       break;
+               }
+       }
+
+       if ( align ) {
                return {
-                       align: matches[1],
-                       originalAlign: matches[1]
+                       align: align,
+                       originalAlign: align
                };
        } else {
                return {};

-- 
To view, visit https://gerrit.wikimedia.org/r/189231
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I2865c4fd073819d42bbbecee882b8325b12a5f74
Gerrit-PatchSet: 1
Gerrit-Project: VisualEditor/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Esanders <esand...@wikimedia.org>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits