Components: support for hassClass, addClass, setClass, removeClass

[verpeteren]

I am experimenting with the component branch (b1f1f7a) and was wondering if it is planned to dynamically update classes.

A naive impletentaiton in src/Embed/framework/elements/node.js

index b15a021..8feeb9b 100644
--- a/src/Embed/framework/elements/node.js
+++ b/src/Embed/framework/elements/node.js
@@ -147,6 +147,33 @@
             return (attr in this.attributes);
         }
 
+        hasClass(className) {
+            let classNames = this.attributes.class || '';
+            return new RegExp('(\\s|^)' + className + '(\\s|$)').test(classNames);
+        }
+
+        addClass(className) {
+            if (!this.hasClass(className)) {
+                let classNames = this.attributes.class || '';
+                classNames += (classNames == '') ? classNames : ' ' + className;
+                this.setClass(classNames);
+            }
+        }
+
+        setClass(classNames) {
+            this.setAttribute('class', classNames);
+        }
+
+        removeClass(className) {
+            let classNames = this.attributes.class || '';
+            let classes = classNames.split(" ");
+            let pos = classes.indexOf(className);
+            if (pos != -1 ) {
+                classes.splice(pos, 1)
+                this.setClass(classes.join(' '))
+            }
+        }
+
         set innerHTML(value) {
             this.replaceWith(value);
         }

Here is a simple test script.

<meta>
        <viewport>300x300</viewport> 
</meta>
<nss>
        normal: {
                maxWidth: 30,
        },
        box: {
                position: 'relative',
                backgroundColor: 'pink',
                top: 100,
        },
        left: {
                backgroundColor: 'red',
                left: 10,
        },
        right: {
                backgroundColor: 'green',
                right: 10,
        },
        bottom: {
                backgroundColor: 'purple',
                right: 200,
        }
</nss>
<layout>
        <button class="normal" id="1">left</button>
        <button class="normal" id="2">right</button>
        <button class="normal" id="3">right</button>
</layout>

<script>
        var i1 = document.getElementById("1");
        var i2 = document.getElementById("2");
        setTimeout(() =>{
                i1.addClass("box");
                i2.addClass("box");
                setTimeout(() =>{
                        i1.addClass("left");
                        i2.addClass("right");
                        setTimeout(() =>{
                                i1.removeClass("normal");
                                i2.removeClass("normal");
                        }, 500);
                }, 500);
        }, 500);
        var i3 = document.getElementById("2");
        i3.attributes.class = 'box bottom';
</script>

</application>

Currently this test script produces the following layout (which is not what I expected)

[efyx]

Indeed, adding or removing class is not supported at the time, we need to support this feature following W3C specs (adding a property className to Elements and this property should have a setter, when it's called, we should re-compute all the NSS style and apply them to the element)