feat ariatemplates#1086 Deprecation of cssClass in sections and repea…

…ters

`cssClass` property in section and repeater configuration is now deprecated. It has to be replaced by `attributes.classList`.

In the specific case of the `childSections` configuration for the repeater, the `cssClass` could be a function like any other property, with the peculiarity that the function was called every time a change occurred in the bound map/array. This allowed to implement pyjama tables.
With this commit, this feature is replaced and enhanced: if the `attributes` property in the `childSections` configuration is a function, it is called every time there is a data change and its returned value is used to update the section attributes of each entry.

Close ariatemplates#1086

src/aria/templates/Repeater.js

@@ -470,27 +470,38 @@
 
             _updateRemainingItems : function (beginIndex, updateIndex) {
                 var items = this.items;
+                /* BACKWARD-COMPATIBILITY-BEGIN (cssclass) */
                 var cssClassCb = this._childSections.cssClass;
                 if (!_isCallback(cssClassCb)) {
                     cssClassCb = null;
                 }
+                /* BACKWARD-COMPATIBILITY-END (cssclass) */
+                var attributesCB = this._childSections.attributes;
+                if (!_isCallback(attributesCB)) {
+                    attributesCB = null;
+                }
                 for (var i = items.length - 1; i >= beginIndex; i--) {
                     var item = items[i];
                     if (updateIndex) {
                         // we do not update the index for maps, as the index is a key in that case
                         jsonUtils.setValue(item, "index", i);
                     }
                     jsonUtils.setValue(item, "ct", i + 1);
+                    /* BACKWARD-COMPATIBILITY-BEGIN (cssclass) */
                     if (cssClassCb) {
                         var section = this.getSectionById(item.sectionId);
                         var oldCssClass = section.cssClass;
                         var newCssClass = this.tplCtxt.evalCallback(cssClassCb, item);
                         if (oldCssClass != newCssClass) {
-                            var domElt = section.getDom();
-                            domElt.className = newCssClass;
-                            section.cssClass = newCssClass;
+                            var domEltWrapper = section.getWrapper();
+                            domEltWrapper.classList.setClassName(newCssClass);
                         }
                     }
+                    /* BACKWARD-COMPATIBILITY-END (cssclass) */
+                    if (attributesCB) {
+                        var section = this.getSectionById(item.sectionId);
+                        section.updateAttributes(this.tplCtxt.evalCallback(attributesCB, item));
+                    }
                 }
             },
 

src/aria/templates/Section.js

@@ -198,12 +198,18 @@
              */
             this.id = id || "_gen_" + this._domId;
 
+            /* BACKWARD-COMPATIBILITY-BEGIN (cssclass) */
             /**
              * CSS class for the section
              * @type String
              */
             this.cssClass = cfg.cssClass;
 
+            if (cfg.cssClass) {
+                this.$logWarn(this.DEPRECATED_CSSCLASS);
+            }
+            /* BACKWARD-COMPATIBILITY-END (cssclass) */
+
             /**
              * Configuration for keyboard shortcuts
              * @type Object
@@ -281,6 +287,29 @@
                 this.attributes = this.__json.copy(attributeBind.inside[attributeBind.to]);
                 this._attributesChangeListener = this.registerBinding(attributeBind, this._notifyAttributeChange);
             }
+
+            /* BACKWARD-COMPATIBILITY-BEGIN (cssclass) */
+            if (cfg.cssClass) {
+                if (this.attributes) {
+                    if (!this.attributes.classList) {
+                        this.attributes.classList = cfg.cssClass.split(" ");
+                        if (attributeBind) {
+                            this.__json.setValue(attributeBind.inside[attributeBind.to], "classList", cfg.cssClass.split(" "), this._attributesChangeListener);
+                        }
+                    }
+                } else {
+                    this.attributes = {
+                        classList : cfg.cssClass.split(" ")
+                    };
+                    if (attributeBind) {
+                        this.__json.setValue(attributeBind.inside, attributeBind.to, {
+                            classList : cfg.cssClass.split(" ")
+                        }, this._attributesChangeListener);
+                    }
+                }
+            }
+            /* BACKWARD-COMPATIBILITY-END (cssclass) */
+
         },
         $destructor : function () {
 
@@ -327,6 +356,9 @@
         },
         $statics : {
             // ERROR MESSAGES:
+            /* BACKWARD-COMPATIBILITY-BEGIN (cssclass) */
+            DEPRECATED_CSSCLASS : "cssClass property in section configuration is deprecated. Please use attributes.classList instead.",
+            /* BACKWARD-COMPATIBILITY-END (cssclass) */
             MISSING_TO_BINDING : "Invalid Binding Configuration: 'to' is mandatory",
             INVALID_TO_BINDING : "Invalid Binding Configuration: 'to' must be a Boolean value or null",
             WIDGETCALL_ERROR : "Error in '%2' for widget '%1'.",
@@ -564,7 +596,6 @@
 
             /**
              * RegisterBinding is used to add bindings to Templates and sections.
-             * @public
              * @param {aria.templates.CfgBeans:BindingConfiguration} bind
              * @param {Object} callback
              * @return {aria.core.CfgBeans:Callback} Listener that has been actually added
@@ -596,6 +627,7 @@
                     } catch (e) {
                         this.$logError(this.SECTION_BINDING_ERROR, [bind.inside, bind.to, this.id,
                                 this.tplCtxt.tplClasspath]);
+                        jsonChangeCallback = null;
                     }
                     return jsonChangeCallback;
                 }
@@ -725,12 +757,36 @@
              * JSON listener callback: called anytime a bindable attribute property has changed on a holder object
              * defined in one of the bindings
              * @protected
-             * @param {Object} res Object containing information about the attribute that changed
              * @see initWidget()
              */
-            _notifyAttributeChange : function (res) {
+            _notifyAttributeChange : function () {
+                var attrBinding = this._attributesBinding, newValue = attrBinding.inside[attrBinding.to];
+                this._applyNewAttributes(newValue);
+            },
+
+            /**
+             * Apply the new attributes by removing the current ones. If attributes are bound, the data model is updated
+             * @param {aria.templates.CfgBeans:HtmlAttribute} newValue
+             * @protected
+             */
+            updateAttributes : function (attributes) {
+                var attrBinding = this._attributesBinding;
+                if (attrBinding) {
+                    this.__json.setValue(attrBinding.inside, attrBinding.to, attributes);
+                } else {
+                    this._applyNewAttributes(attributes);
+                }
+            },
+
+            /**
+             * Apply the new attributes by removing the current ones. Even if attributes are bound, the data model is
+             * not updated
+             * @param {aria.templates.CfgBeans:HtmlAttribute} newValue
+             * @protected
+             */
+            _applyNewAttributes : function (newValue) {
                 var attribute, domElt = this.getDom(), whiteList = aria.templates.DomElementWrapper.attributesWhiteList, newAttributeValue;
-                var oldValue = this.attributes, attrBinding = this._cfg.bind.attributes, newValue = attrBinding.inside[attrBinding.to];
+                var oldValue = this.attributes;
 
                 // remove old members
                 for (attribute in oldValue) {
@@ -772,7 +828,9 @@
              * @param {String} className
              */
             updateClassList : function (className) {
+                /* BACKWARD-COMPATIBILITY-BEGIN (cssclass) */
                 this.cssClass = className;
+                /* BACKWARD-COMPATIBILITY-END (cssclass) */
                 if (this.attributes && this.attributes.classList) {
                     this.attributes.classList = className.split(" ");
                     var attrBinding = this._attributesBinding;
@@ -828,9 +886,8 @@
                 if (this.domType) {
                     // if domType is empty, we do not output anything for the section
                     // (used in the tooltip)
-                    var cssClass = this.cssClass ? ' class="' + this.cssClass + '"' : '';
                     var attributeList = this.attributes ? aria.utils.Html.buildAttributeList(this.attributes) : '';
-                    var h = ['<', this.domType, attributeList, cssClass, ' id="', this._domId, '" ',
+                    var h = ['<', this.domType, attributeList, ' id="', this._domId, '" ',
                             aria.utils.Delegate.getMarkup(this.delegateId), '>'];
                     out.write(h.join(''));// opening the section
                 }

test/aria/templates/TemplatesTestSuite.js

@@ -89,7 +89,7 @@ Aria.classDefinition({
         this.addTests("test.aria.templates.macrolibs.MacrolibsTestCase");
         this.addTests("test.aria.templates.textTemplates.TextTemplatesTestCase");
         this.addTests("test.aria.templates.section.SectionTestSuite");
-        this.addTests("test.aria.templates.repeater.RepeaterTestCase");
+        this.addTests("test.aria.templates.repeater.RepeaterTestSuite");
         this.addTests("test.aria.templates.visualFocus.VisualFocusTestCase");
         this.addTests("test.aria.templates.testmode.TestIdsTestCase");
         this.addTests("test.aria.templates.memoization.MemoTestCase");