als-document 0.5.0 → 0.6.0

package/document.js

@@ -1,3 +1,124 @@
+class HtmlSelector {
+   constructor(html) {
+      if(typeof html == 'string') {
+         this.html = new HtmlParser(html)
+         this.elements.forEach((element,i) => {this.makeSelectable(element)});
+      } else console.log('Parameter is not string')
+   }
+   get elements() {return this.html.elements}
+
+   makeSelectable(element) {
+      if(element.type == 'tag' && element.status !== 'close') {
+         element.$$ = (query) => this.$$(query,element.index,element.endIndex)
+         element.$ = (query) => this.$(query,element.index,element.endIndex)
+      }
+   }
+
+   $(query,start=0,end=this.elements.length) {
+      return this.$$(query,start,end,true)
+   }
+
+   $$(query,start=0,end=this.elements.length,single=false) {
+      let result = []
+      this.selectors = new Query(query).selectors
+      this.query = query
+      this.selectors.forEach(selector => {
+         for(let i=start; i<end; i++) {
+            let el = this.elements[i]
+            if(this.checkElement(el,selector) && !result.includes(el)) result.push(el)
+            if(single && result.length == 1) break
+         }
+      });
+      if(single && result.length == 1) return result[0]
+      else if(single && result.length == 0) return null
+      else return result
+   }
+
+   checkElement(el,selector) {
+      if(selector == undefined) return true
+      if(el == null) return false
+      let {tag,classList,attribs,id,prev,ancestors,parents,prevAny} = selector
+      
+      if(el.status == 'close' || el.type == 'text') return false
+      if(id !== undefined && el.id == undefined) return false
+      if(id && id !== el.id) return false
+      if(tag && el.tag == undefined) return false
+      else if(tag && tag !== el.tag) return false
+      if(classList !== undefined && el.classList == undefined) return false
+      else if(classList !== undefined && Array.isArray(el.classList)) {
+         if(classList.every(e => el.classList.includes(e)) == false) return false
+      }
+      if(this.checkAttribs(attribs,el) == false) return false
+      if(this.checkElement(el.prev,prev) == false) return false
+      if(this.checkAncestors(el.ancestors,ancestors) == false) return false
+      if(this.checkParents(el.ancestors,parents) == false) return false
+      if(el.parent) {
+         if(this.prevAny(el.parent.children,el.childIndex,prevAny) == false) return false
+      }
+      return true
+   }
+
+   prevAny(children=[],index,prevAny) {
+      let size = children.length
+      if((size == 0 || index == 0) && prevAny) return false
+      for(let i=index; i>=0; i--) {
+         if(this.checkElement(children[i],prevAny)) return true
+      }
+      return false
+   }
+
+   checkAncestors(ancestors=[],selectorAncestors=[]) {
+      let count = 0
+      if(selectorAncestors.length == 0) return true
+      let endIndex = ancestors.length-1
+      let selectorIndex = selectorAncestors.length-1
+      while(selectorIndex>=0) {
+         for(let i=endIndex; i>=0; i--) {
+            endIndex=i-1
+            if(this.checkElement(ancestors[i],selectorAncestors[selectorIndex]) == true) {
+               count++
+               break
+            }
+         }
+         selectorIndex--
+      }
+      if(count == selectorAncestors.length) return true
+      else return false
+   }
+
+   checkParents(ancestors=[],selectorParents=[]) {
+      if(selectorParents.length == 0) return true
+      if(ancestors.length < selectorParents.length) return false
+      let index = ancestors.length-1
+      for(let i=selectorParents.length-1; i>=0; i--) {
+         if(this.checkElement(ancestors[index],selectorParents[i]) == false) return false
+         index--
+      }
+      return true
+   }
+
+   checkAttribs(attribs=[],el) {
+      let elAttribs = el.attribs
+      let names = Object.keys(elAttribs)
+      let passedTests = 0
+      if(attribs) for(let i=0; i<attribs.length; i++) {
+         let {name,value,check} = attribs[i]
+         if(name == 'inner' && value !== undefined && check && el.innerText) {
+            if(check(el.innerText)) passedTests++
+         }
+         
+         if(!names.includes(name)) continue
+         else if(value == undefined) passedTests++
+         else if(value && elAttribs[name]) {
+            if(check(elAttribs[name]) == false) continue
+            else passedTests++
+         } 
+      }
+      if(passedTests == attribs.length) return true
+      else return false
+   }
+}
+
 class Query {
    static get(query) {
       let q = new Query(query)
@@ -144,7 +265,7 @@ class Query {
       return selector
    }
 }
-
+
 class HtmlParser {
    static parse(html) {
       let result = new HtmlParser(html)
@@ -155,14 +276,22 @@ class HtmlParser {
          this.indexes = []
          this.events = []
          this.html = this.htmlString = html
+         this.htmlString = this.htmlString.replace(/\<\!\-\-([\S\s]*?)\-\-\>/gm,'') // remove all comments
          this.removeScripts()
          this.removeStyles()
          this.removeEventStrings()
-         this.htmlString = this.htmlString.replace(/\<\!\-\-([\S\s]*?)\-\-\>/gm,'') // remove all comments
          this.root = this.parse()
+         this.clean()
       }
    }
 
+   clean() {
+      let toDelete = ['events','indexes','scripts','styles','htmlString','html']
+      toDelete.forEach(name => {
+         delete this[name]
+      });
+   }
+
    checkHtml(html,isGood=false) {
       if(html == '') console.log('html parameter is empty')
       else if(typeof html !== 'string') console.log(`html parameter has to be string. Recieved ${typeof html}`)
@@ -222,6 +351,9 @@ class HtmlParser {
       }
       this.elements = elements
       let root = this.getPairs()
+      root.level = 0
+      root.elements = this.elements
+      this.innerHTML(root)
       return root
    }
   
@@ -252,19 +384,18 @@ class HtmlParser {
    getPairs(parent={type:'root',children:[]},startIndex = 0,endIndex=this.elements.length,level=0,childIndex=0) {
       for(let index = startIndex; index < endIndex; index++) {
          if(this.indexes.includes(index)) continue
-         const element = this.elements[index];
+         let element = this.elements[index];
          let child
          if(typeof element == 'string') child = element
          else if(element.type == 'tag') {
             if(element.status == 'single') {
                child = element
                child.parent = parent
-            }
-            else if(element.status == 'open') {
+            } else if(element.status == 'open') {
                child = this.lookForPair(element,index,parent,level)
-            }
-         }
-         this.addChild(parent,child,index,level,childIndex/2)
+            } else element.index = index
+         } 
+         this.addChild(parent,child,index,level)
          childIndex++
       }
       return parent
@@ -289,30 +420,25 @@ class HtmlParser {
       return child
    }
 
-   addChild(parent,child,index,level,childIndex) {
+   addChild(parent,child,index,level) {
       if(typeof child == 'string') {
          child = this.addScriptsAndStyles(parent,child,index)
-         child = {type:'text',text:child}
+         child = {type:'text',text:child,parent}
          this.elements[index] = child
       } 
       if(child) {
          delete child.status
+         if(child.type !== 'text') {
+            this.innerHTML(child)
+            this.outerHTML(child)
+            this.innerText(child)
+         }
          this.getElements(child)
-         this.innerHTML(child)
-         this.outerHTML(child)
-         this.innerText(child)
          this.getAncestors(child)
          this.getAttribute(child)
-         child.childIndex = childIndex
+         this.nextAndPrev(child)
          child.index = index
          child.level = level
-         child.prev = null
-         child.next = null
-         if(parent.children.length > 0) {
-            let prevI = parent.children.length-1
-            parent.children[prevI].next = child
-            child.prev = parent.children[prevI]
-         }
          parent.children.push(child)
       }
       this.indexes.push(index)
@@ -337,10 +463,45 @@ class HtmlParser {
       }});
    }
 
-   getElements(element,elements=this.elements) {
-      Object.defineProperty(element, 'elements', { get() {
-         return elements.slice(this.index,this.endIndex+1)
-      }});
+   nextAndPrev(element) {
+      Object.defineProperty(element, 'childIndex', { 
+         get() {return this.parent.children.map(o => o.index).indexOf(this.index)}
+      });
+      Object.defineProperty(element, 'prev', { 
+         get() {
+            let i = this.childIndex, brothers = this.parent.children
+            return i == 0 ? null : brothers[i-1]
+         }
+      });
+      Object.defineProperty(element, 'next', { 
+         get() {
+            let i = this.childIndex, brothers = this.parent.children
+            return i == brothers.length-1 ? null : brothers[i+1]
+         }
+      });
+   }
+
+   getElements(element,self=this) {
+      if(element.type !== 'text')
+      Object.defineProperty(element, 'elements', { 
+         configurable:true,
+         get() {
+            let endIndex = isNaN(this.endIndex) ? this.index + 1 : this.endIndex+1
+            return self.elements.slice(this.index,endIndex)
+         }
+      });
+      Object.defineProperty(element, '$elements', { 
+         configurable:true,
+         get() {return self.elements}
+      });
+      Object.defineProperty(element, 'root', {
+         configurable:true,
+         get() {return self.root}
+      });
+      Object.defineProperty(element, 'html', {
+         configurable:true,
+         get() {return self}
+      });
    }
 
    outerHTML(element) {
@@ -357,62 +518,71 @@ class HtmlParser {
          else return ''
       }})
    }
-
    innerHTML(element) {
+      element.tab = '   '
+      element.n = '\n'
       Object.defineProperty(element, 'innerHTML', { get() {
-         let tab = '   ',result = '',firstLevel,space=''
+         // let tab = '   ',result = '',firstLevel,space=''
+         let {tab,n} = this
+         let result = '',firstLevel,space=''
             let {elements} = this
             let endIndex = elements.length
-         for (let i = 1; i < endIndex-1; i++) {
+            let end = endIndex-1,start=1
+            if(this.type == 'root') {
+               end = endIndex
+               start = 0
+            }
+         for(let i = start; i < end; i++) {
             let element = elements[i]
-            let {level,tag,text} = element
+            let {level,text} = element
             if(firstLevel == undefined) firstLevel = level
-            if(i == endIndex-1) space = ''
+            if(i == end) space = ''
             else if(level) space = Array.from(Array(level-firstLevel).keys()).map(n => tab).join('')
             result += space + text
-            if(endIndex > 3) result += '\n'
+            if(endIndex > 3) result += n
          }
          return result
       }});
    }
 
    parseElement(tagString) {
-      let text = tagString
       let type = 'tag'
-      if(tagString == '<!DOCTYPE html>') return {tag:'!DOCTYPE html',status:'single',attribs:{},type}
+      if(tagString == '<!DOCTYPE html>') return {tag:'!DOCTYPE html',status:'single',attribs:{},type,text:tagString}
       let status = 'close'
       let tag = tagString.match(/(?<=\<\/)(\w*\-?)*/)
       if(tag == null) {
          tag = tagString.match(/(?<=\<)(\w*\-?)*/)
          if(tag) {
             tag = tag[0]
-            if(this.singleTags.includes(tag)) status='single'
+            if(HtmlParser.singleTags.includes(tag)) status='single'
             else status = 'open'
          }
       } else tag = tag[0]
-      let {classList,attribs,style,id} = this.parseAttributes(tagString)
+      let {classList,attribs,style,id,text} = this.parseAttributes(tagString)
       let obj = {tag,status,attribs,type,classList,text,style,id}
       return obj
    }
-   singleTags = ['comment','area','base','br','col','command','embed','hr','img','input','keygen','link','meta','param','source','track','wbr']
+   static singleTags = ['comment','area','base','br','col','command','embed','hr','img','input','keygen','link','meta','param','source','track','wbr']
 
    parseAttributes(tagString,classList=[],attribs={},style={},id=null) {
+      let text = tagString
       let attributes = tagString.match(/(?<=\s)(\w*\-?)*(\s*?\=\s*?\"[\s\S]*?\")?/g)
       if(attributes) attributes.forEach(attribString => {
          let [name,value] = attribString.split('=')
          if(value !== undefined && name !== '') {
             value = value.trim().replace(/^\"/,'').replace(/\"$/m,'')
-
             let eventIndex = value.match(/(?<=\{\{\{\{event\s)(\d*)?/)
-            if(eventIndex !== null) value = this.events[eventIndex[0]]
-
+            if(eventIndex !== null) {
+               value = this.events[eventIndex[0]]
+               text = tagString.replace(`{{{{event ${eventIndex[0]}`,value)
+            }
             if(name == 'class') classList = value.split(/\s\s?\s?/)
             else if(name == 'style') style = this.parseInlineCss(value)
             else if(name == 'id') id = value
             attribs[name] = value
          } else if(name !== '') attribs[name] = undefined
       });
-      return {classList,attribs,style,id}
+      return {classList,attribs,style,id,text}
    }
 
    parseInlineCss(textCss) {
@@ -432,131 +602,191 @@ class HtmlParser {
    }
 }
 
-
-class HtmlSelector {
+class Document extends HtmlSelector {
    constructor(html) {
-      if(typeof html == 'string') {
-         html = new HtmlParser(html)
-         this.html = html
-         this.elements = html.elements
-         this.makeSelectable()
-      } else console.log('Parameter is not string')
+      super(html)
+      this.elements.forEach((element) => {this.addMethods(element)});
    }
-   
-   makeSelectable() {
-      this.elements.forEach(element => {
-         if(element.type == 'tag' && element.status !== 'close') {
-            element.$$ = (query) => this.$$(query,element.index,element.endIndex)
-            element.$ = (query) => this.$(query,element.index,element.endIndex)
-         }
-      })
+
+   addMethods(element) {
+      if(element.type == 'tag' && element.status !== 'close') {
+         this.insert(element)
+         this.buildAttribs(element)
+         this.classlistMethods(element)
+         this.style(element)
+         this.id(element)
+      }
    }
 
-   $(query,start=0,end=this.elements.length) {
-      return this.$$(query,start,end,true)
+   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)
+            }
+         })
+      }
    }
 
-   $$(query,start=0,end=this.elements.length,single=false) {
-      let result = []
-      this.selectors = new Query(query).selectors
-      this.query = query
-      this.selectors.forEach(selector => {
-         for(let i=start; i<end; i++) {
-            let el = this.elements[i]
-            if(this.checkElement(el,selector) && !result.includes(el)) result.push(el)
-            if(single && result.length == 1) break
+   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)
          }
-      });
-      if(single && result.length == 1) return result[0]
-      else if(single && result.length == 0) return null
-      else return result
+      };
+      element.style = new Proxy(obj, handler);
    }
 
-   checkElement(el,selector) {
-      if(selector == undefined) return true
-      if(el == null) return false
-      let {tag,classList,attribs,id,prev,ancestors,parents,prevAny} = selector
-      
-      if(el.status == 'close' || el.type == 'text') return false
-      if(id !== undefined && el.id == undefined) return false
-      if(id && id !== el.id) return false
-      if(tag && el.tag == undefined) return false
-      else if(tag && tag !== el.tag) return false
-      if(classList !== undefined && el.classList == undefined) return false
-      else if(classList !== undefined && Array.isArray(el.classList)) {
-         if(classList.every(e => el.classList.includes(e)) == false) return false
+   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)
       }
-      if(this.checkAttribs(attribs,el) == false) return false
-      if(this.checkElement(el.prev,prev) == false) return false
-      if(this.checkAncestors(el.ancestors,ancestors) == false) return false
-      if(this.checkParents(el.ancestors,parents) == false) return false
-      if(el.parent) {
-         if(this.prevAny(el.parent.children,el.childIndex,prevAny) == false) return false
+      element.classList.remove = function(clsToRemove) {
+         this.splice(this.indexOf(clsToRemove),1)
+         element.attribs.class = this.filter(c => c !== undefined).join(' ')
+         self.changeElementText(this)
       }
-      return true
-   }
-
-   prevAny(children=[],index,prevAny) {
-      let size = children.length
-      if((size == 0 || index == 0) && prevAny) return false
-      for(let i=index; i>=0; i--) {
-         if(this.checkElement(children[i],prevAny)) return true
+      element.classList.toggle = function(clsToToggle) {
+         if(this.includes(clsToToggle)) this.remove(clsToToggle)
+         else this.add(clsToToggle)
+         self.changeElementText(this)
       }
-      return false
    }
 
-   checkAncestors(ancestors=[],selectorAncestors=[]) {
-      let count = 0
-      if(selectorAncestors.length == 0) return true
-      let endIndex = ancestors.length-1
-      let selectorIndex = selectorAncestors.length-1
-      while(selectorIndex>=0) {
-         for(let i=endIndex; i>=0; i--) {
-            endIndex=i-1
-            if(this.checkElement(ancestors[i],selectorAncestors[selectorIndex]) == true) {
-               count++
-               break
+   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)
             }
          }
-         selectorIndex--
+         self.changeElementText(this)
       }
-      if(count == selectorAncestors.length) return true
-      else return false
    }
 
-   checkParents(ancestors=[],selectorParents=[]) {
-      if(selectorParents.length == 0) return true
-      if(ancestors.length < selectorParents.length) return false
-      let index = ancestors.length-1
-      for(let i=selectorParents.length-1; i>=0; i--) {
-         if(this.checkElement(ancestors[index],selectorParents[i]) == false) return false
-         index--
+   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)
       }
-      return true
+      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)
    }
 
-   checkAttribs(attribs=[],el) {
-      let elAttribs = el.attribs
-      let names = Object.keys(elAttribs)
-      let passedTests = 0
-      if(attribs) for(let i=0; i<attribs.length; i++) {
-         let {name,value,check} = attribs[i]
-         if(name == 'inner' && value !== undefined && check && el.innerText) {
-            if(check(el.innerText)) passedTests++
+   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
          }
-         
-         if(!names.includes(name)) continue
-         else if(value == undefined) passedTests++
-         else if(value && elAttribs[name]) {
-            if(check(elAttribs[name]) == false) continue
-            else passedTests++
-         } 
+         $elements[i].index = i
       }
-      if(passedTests == attribs.length) return true
-      else return false
    }
-}
 
-
-
-try {module.exports = {HtmlSelector,Query,HtmlParser}} catch{}
+   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}>`
+      }
+   }
+}