als-document 0.5.0 → 0.6.0

package/document/document.js

@@ -0,0 +1,192 @@
+let HtmlSelector = require('../selector/selector')
+let HtmlParser = require('../parser/parser')
+
+class Document extends HtmlSelector {
+   constructor(html) {
+      super(html)
+      this.elements.forEach((element) => {this.addMethods(element)});
+   }
+
+   addMethods(element) {
+      if(element.type == 'tag' && element.status !== 'close') {
+         this.insert(element)
+         this.buildAttribs(element)
+         this.classlistMethods(element)
+         this.style(element)
+         this.id(element)
+      }
+   }
+
+   id(element,self=this) {
+      if(element.id !== undefined)
+      if(!!Object.getOwnPropertyDescriptor(element, 'id')['get']) return
+      if(element.id == null || element.id !== undefined) {
+         if(typeof element.id == 'string') delete element.id
+         Object.defineProperty(element, 'id', { 
+            get() {return this.attribs.id ? this.attribs.id : null},
+            set(value) {
+               this.attribs.id = value
+               self.changeElementText(this)
+            }
+         })
+      }
+   }
+
+   style(element,obj={},self=this) {
+      if(element.style !== undefined) obj = {...element.style}
+      const convertProp = str => str.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
+      const handler = {
+         get(target,prop,receiver) {
+            if(prop === 'target') return target
+            return Reflect.get(...arguments);
+         },
+         set(obj, prop, value) {
+            obj[prop] = value
+            element.attribs.style = Object.keys(obj).map(key => `${convertProp(key)}:${obj[key]};`).join('')
+            self.changeElementText(this)
+         },
+         deleteProperty(obj, prop) {
+            if (prop in obj) {
+               delete obj[prop];
+               element.attribs.style = Object.keys(obj).map(key => `${convertProp(key)}:${obj[key]};`).join('')
+            }
+            self.changeElementText(this)
+         }
+      };
+      element.style = new Proxy(obj, handler);
+   }
+
+   classlistMethods(element,self=this) {
+      if(element.classList == undefined) element.classList = []
+      element.classList.add = function(newClass) {
+         if(element.attribs.class == undefined) element.attribs.class = ''
+         this.push(newClass)
+         element.attribs.class += ' '+newClass
+         self.changeElementText(this)
+      }
+      element.classList.remove = function(clsToRemove) {
+         this.splice(this.indexOf(clsToRemove),1)
+         element.attribs.class = this.filter(c => c !== undefined).join(' ')
+         self.changeElementText(this)
+      }
+      element.classList.toggle = function(clsToToggle) {
+         if(this.includes(clsToToggle)) this.remove(clsToToggle)
+         else this.add(clsToToggle)
+         self.changeElementText(this)
+      }
+   }
+
+   buildAttribs(element,self=this) {
+      if(!element.attr) element.attr = function(name,value) {
+         let notForRemove = ['class','style','id']
+         let notForChange = ['style','id']
+         if(name && value === undefined) return this.attribs[name]
+         else if(name && value === null && !notForRemove.includes(name)) {
+            delete this.attribs[name]
+         } else if(name && value !== undefined && value !== null && !notForChange.includes(name)) {
+            this.attribs[name] = value
+            if(name == 'class') {
+               this.classList = value.split(' ').filter(c => c !== ' ')
+               self.classlistMethods(this)
+            }
+         }
+         self.changeElementText(this)
+      }
+   }
+
+   insert(element) {
+      let self = this
+      element.insert = function(newElement,pos=0) {
+         let elements
+         let $elements = this.$elements
+         if(typeof newElement == 'string') {
+            newElement = new HtmlParser(newElement)
+            newElement.elements.forEach(el => {
+               self.html.getElements(el)
+               self.makeSelectable(el);
+               self.addMethods(el);
+            });
+            elements = newElement.elements
+            newElement = newElement.root.children[0]
+         } else {
+            let {index,endIndex} = newElement
+            let count = isNaN(endIndex - index) ? 1 : endIndex - index+1
+            elements = $elements.splice(index,count)
+            let {parent,childIndex} = newElement
+            parent.children.splice(childIndex,1)
+         }
+         self.rebildElements($elements)
+         self.addElement(this,$elements,newElement,elements,pos)
+      }
+      element.remove = function() {
+         let {$elements,elements,parent,childIndex,index} = this
+         $elements.splice(index,elements.length)
+         parent.children.splice(childIndex,1)
+         parent.endIndex = parent.endIndex-elements.length
+         self.rebildElements($elements)
+      }
+      Object.defineProperty(element, 'before', { set(newEl) {this.insert(newEl,0)}})
+      Object.defineProperty(element, 'after', { set(newEl) {this.insert(newEl,3)}})
+      Object.defineProperty(element, 'last', { set(newEl) {this.insert(newEl,2)}})
+      Object.defineProperty(element, 'first', { set(newEl) {this.insert(newEl,1)}})
+   }
+
+   addElement(element,$elements,newElement,elements,pos) {
+      let {parent,level,index,endIndex} = element
+      if(pos == 0) { // beforebegin
+         $elements.splice(index,0,...elements) // add elements to $elements
+         parent.children.splice(element.childIndex,0,newElement) // add as child before
+      } else if(pos == 3) { // afterend
+         $elements.splice(endIndex+1,0,...elements) // add elements to $elements
+         parent.children.splice(element.childIndex+1,0,newElement) // add element as child after
+      } else if(pos == 1 || pos == 2) {
+         level = level+1
+         parent = element
+         if(pos == 1) { // afterbegin
+            $elements.splice(index+1,0,...elements) // add elements to $elements
+            element.children.unshift(newElement) // add element as first child
+         } else if(pos == 2) { // beforeend
+            $elements.splice(endIndex-1,0,...elements) // add elements to $elements
+            element.children.push(newElement) // add element as last child
+         }
+         element.endIndex = element.endIndex + elements.length
+      }
+      this.rebildElements($elements)
+      this.rebuildChild(elements[0],parent,element.html,level)
+   }
+
+   rebildElements($elements) {
+      for(let i=0; i<$elements.length; i++) {
+         let {endIndex,index} = $elements[i]
+         if(endIndex) {
+            let gap = endIndex - index
+            $elements[i].endIndex = i + gap
+         }
+         $elements[i].index = i
+      }
+   }
+
+   rebuildChild(child,parent,html,level) {
+      if(child.endIndex !== undefined) { // add level to close tag
+         child.elements[child.elements.length-1].level = level
+      }
+      html.getElements(child,html) // bind element to this.$elements
+      child.parent = parent
+      child.level = level
+      if(child.children)
+         if(child.children.length > 0) 
+            child.children.forEach(grandChild => {
+               this.rebuildChild(grandChild,child,html,level+1)
+            });
+   }
+
+   changeElementText(element) {
+      let {type,status,attribs,tag} = element
+      if(type == 'tag' && status !== 'close') {
+         let atts = Object.keys(attribs)
+         atts = atts.length>0 ? ' '+atts.map(name => `${name}${attribs[name] ? `="${attribs[name]}"`: ''}`).join(' ') : ''
+         element.text = `<${tag}${atts}>`
+      }
+   }
+}
+module.exports = Document