Implemented classList and className

Author: Oskar Eriksson

src/worker/dom/ClassList.js

@@ -0,0 +1,41 @@
+class ClassList {
+    constructor(domElement) {
+        this._domElement = domElement;
+    }
+    add(value) {
+        const classList = this._getCurrentClassList()
+        const newClassNames = (typeof value === 'string') ? [value] : value;
+        classList.push(...newClassNames);
+        this._domElement.setAttribute('class', classList.join(' '));
+    }
+    remove(value) {
+        const classList = this._getCurrentClassList();
+        const classNames = (typeof value === 'string') ? [value] : value;
+        classNames.forEach((className) => {
+            const index = classList.indexOf(value);
+            if (index >= 0) {
+                classList.splice(index, 1);
+            }
+        })
+        this._domElement.setAttribute('class', classList.join(' '));
+    }
+    item(index) {
+        const classList = this._getCurrentClassList();
+        return classList[index];
+    }
+    contains(value) {
+        const classList = this._getCurrentClassList();
+        return classList.includes(value);
+    }
+    toggle(value) {
+        console.log('TODO: Implement classList.toggle()')
+    }
+    _getCurrentClassList() {
+        if (this._domElement.attributes['class']) {
+            return this._domElement.attributes['class'].split(' ');
+        }
+        return [];
+    }
+}
+
+export default ClassList;

src/worker/dom/DomElement.js

@@ -1,5 +1,6 @@
 import TreeNode from './TreeNode';
 import Style from './Style';
+import ClassList from './ClassList';
 import {OPS as _} from './../../common/constants';
 import {ELEMENT_NODE} from './../../common/nodeType'
 
@@ -14,6 +15,7 @@ class DomElement extends TreeNode {
         this._bridge.send(_.createDOMElement, this._guid, [type]);
 
         this.style = Style((key, val) => this._bridge.send(_.setStyle, this._guid, [key, val]));
+        this.classList = new ClassList(this);
 
         inputAttributes.forEach(prop => {
             Object
@@ -30,7 +32,7 @@ class DomElement extends TreeNode {
     }
 
     removeEventListener(eventType, callback, useCapture) {
-        console.log('// TODO Remove event listener')
+        // console.log('// TODO Remove event listener')
     }
 
     set textContent(val) {
@@ -41,6 +43,14 @@ class DomElement extends TreeNode {
     get textContent() {
         return this._textContent;
     }
+
+    set className(value) {
+        this.setAttribute('class', value);
+    }
+
+    get className() {
+        return this.attributes['class'];
+    }
 }
 
 const inputAttributes = ["accept", "align", "alt", "autocomplete ", "autofocus ", "checked", "disabled", "form", "formaction ", "formenctype", "formmethod ", "formnovalidate ", "formtarget ", "height ", "list ", "max ", "maxlength", "min ", "multiple ", "name", "pattern ", "placeholder", "readonly", "required ", "size", "src", "step", "type", "value", "width"];
@@ -58,4 +68,4 @@ export default (tag) => {
     }));
     Object.defineProperties(element, props);
     return element;
-}
+}