als-document 1.1.1 → 1.2.0

package/document.js

@@ -22,12 +22,14 @@ function buildStyle(attributes){
   const styles=attributes.style || "";
    con
 class NodeClassList{
   constructor(node){ this.node=node }
   get classes(){ return (this.node.attributes.class || "").split(" ").filter(Boolean) }
   set classes(val){ this.node.attributes.class=val.join(" ") }
   contains(className){ return this.classes.includes(className) }
    add(className){
      const currentClasses=this.classes;
      if (!currentClasses.includes(className)) this.classes=[...currentClasses,className];
   }
    remove(className){ this.classes=this.classes.filter(cls=>cls!==className); }
    toggle(className){
      if (this.classes.includes(className)) this.remove(className);
      else this.add(className);
   }
    replace(oldClass,newClass){
      if (this.classes.includes(oldClass)){
         this.remove(oldClass);
         this.add(newClass);
      }
   }
 }
 function insertBefore(arr,index,newItem){
   const existingIndex=arr.indexOf(newItem);
   if (existingIndex!==-1) arr.splice(existingIndex,1);
   arr.splice(index,0,newItem);
-}
  class Node{
   constructor(tagName,attributes={},parent=null){
      this.isSingle=false;
      this.tagName=tagName;
      this.attributes=attributes;
      this.childNodes=[];
      if (parent!==null) parent.childNodes.push(this)
      this.parent=parent;
      this._classList=null;
      this.__style=null;
      this._dataset=null
   }
    get id(){ return this.attributes.id ? this.attributes.id : null; }
   set id(newValue){ this.attributes.id=newValue; }
   get className(){ return this.attributes.class || null }
   get parentNode(){ return this.parent }
   get ancestors(){
      if (!this.parent) return []
      const ancestors=[]
      let element=this.parent
      while (element.tagName!=='ROOT'){
         ancestors.push(element)
         element=element.parent
      }
      return ancestors.reverse()
   }
    get childNodeIndex(){
      if (!this.parent) return null
      return this.parent.childNodes ? this.parent.childNodes.indexOf(this) : null
   }
    get childIndex(){
      if (!this.parent) return null
      return this.parent.children ? this.parent.children.indexOf(this) : null
   }
   get previousElementSibling(){ return this.prev }
   get prev(){
      if (!this.childIndex) return null
      return this.parent.children[this.childIndex-1]
   }
    get nextElementSibling(){ return this.next }
   get next(){
      if (!this.childIndex) return null
      return this.parent.children[this.childIndex+1] || null
   }
    get dataset(){
      if (!this._dataset) this._dataset=getDataset(this);
      return this._dataset;
   }
    get classList(){
      if (!this._classList) this._classList=new NodeClassList(this);
      return this._classList;
   }
    get style(){
      if (!this.__style) this.__style=buildStyle(this.attributes)
      return this.__style
   }
    get outerHTML(){
      const attrs=Object.entries(this.attributes).map(([key,val])=>val.length ? `${key}="${val}"` : key).join(" ");
      return `<${this.tagName}${attrs ? ' '+attrs : ''}>${this.innerHTML}</${this.tagName}>`;
   }
    getAttribute(attrName){ return this.attributes[attrName] || null }
   setAttribute(attrName,value=''){ this.attributes[attrName]=value }
   removeAttribute(attrName){ delete this.attributes[attrName] }
    remove(){
      if (!this.parent) return
      const index=this.childNodeIndex;
      if (index!==null) this.parent.childNodes.splice(index,1);
   }
    get innerHTML(){
      return this.childNodes.map(child=>{
         if (child instanceof Node || child instanceof SingleNode) return child.outerHTML;
         else if (child instanceof TextNode) return child.textContent;
         else return child
      }).join("");
   }
    $$(query){ return this.querySelectorAll(query) }
   querySelectorAll(query){
      const selectors=Query.get(query)
      return find(selectors,this,new Set())
   }
   $(query){ return this.querySelector(query) }
   querySelector(query){
      const selectors=Query.get(query)
      return find(selectors,this,new Set(),true)[0] || null
   }
    getElementsByClassName(query){ return this.querySelectorAll('.'+query) }
   getElementsByTagName(query){ return this.querySelectorAll(query) }
   getElementById(query){ return this.querySelector('#'+query) }
    get children(){
      return this.childNodes.filter(child=>{
         if (!(child instanceof Node)) return false
         if (child.tagName==='#comment') return false
         return true
      });
   }
    insertAdjacentElement(position,newElement){
      if (newElement.tagName==='ROOT' && newElement.childNodes.length>0) newElement=newElement.childNodes[0]
      const pos=position.toLowerCase();
      if (pos==='afterbegin' || pos==='beforeend'){
         if (pos==="afterbegin") this.childNodes.unshift(newElement);
         else if (pos==="beforeend") this.childNodes.push(newElement);
         newElement.parent=this
         return newElement
      }
      if (!this.parent) throw new Error("Can't insert element to element without parent")
      if (pos==="beforebegin") insertBefore(this.parent.childNodes,this.childNodeIndex,newElement)
      else if (pos==="afterend") this.parent.childNodes.splice(this.childNodeIndex+1,0,newElement);
      newElement.parent=this.parent
      return newElement
   }
    insertAdjacentHTML(position,html){
      const newNode=parseHTML(html);
      newNode.childNodes.forEach(node=>{
         this.insertAdjacentElement(position,node);
      });
      return newNode
   }
    insertAdjacentText(position,text){
      return this.insertAdjacentElement(position,new TextNode(text));
   }
    insert(position,element){
      const positions=['beforebegin','afterbegin','beforeend','afterend']
      if (positions[position]) position=positions[position]
      if (typeof element==='string'){
         element=element.trim()
         if (element.startsWith('<') && element.endsWith('>')){
            return this.insertAdjacentHTML(position,element)
         }
         return this.insertAdjacentText(position,element)
      }
      return this.insertAdjacentElement(position,element)
   }
    set innerHTML(html){
      this.childNodes=html.trim().startsWith('<') ? parseHTML(html).childNodes : [html]
   }
    set outerHTML(html){
      const parsed=parseHTML(html);
      if (!this.parent) return console.log('element has no parent node')
      const index=this.childIndex
      if (index!==null) this.parent.childNodes.splice(index,1,...parsed.childNodes);
   }
    appendChild(newChild){
      if (newChild instanceof Node || newChild instanceof TextNode || newChild instanceof SingleNode){
         if (newChild.parent) newChild.parent.childNodes=newChild.parent.childNodes.filter(child=>child!==newChild);
      } else if (typeof newChild==='string') newChild=new TextNode(newChild)
      else return newChild
      this.childNodes.push(newChild);
      newChild.parent=this;
      return newChild;
   }
    get textContent(){
      if (this.childNodes.length===0) return this.nodeName==='#text' ? this.nodeValue : '';
      return this.childNodes.map(child=>{
         if (child instanceof SingleNode) return ''
         if (child instanceof TextNode) return child.nodeValue
         if (child instanceof Node) return child.textContent;
         else return child;
      }).join(" ");
   }
    set textContent(value){
      this.childNodes=[];
      if (value!==null && value!==undefined){
         this.childNodes.push(value.toString());
      }
   }
+}
  class Node{
   constructor(tagName,attributes={},parent=null){
      this.isSingle=false;
      this.tagName=tagName;
      this.attributes=attributes;
      this.childNodes=[];
      if (parent!==null) parent.childNodes.push(this)
      this.parent=parent;
      this._classList=null;
      this.__style=null;
      this._dataset=null
   }
    get id(){ return this.attributes.id ? this.attributes.id : null; }
   set id(newValue){ this.attributes.id=newValue; }
   get className(){ return this.attributes.class || null }
   get parentNode(){ return this.parent }
   get ancestors(){
      if (!this.parent) return []
      const ancestors=[]
      let element=this.parent
      while (element.tagName!=='ROOT'){
         ancestors.push(element)
         element=element.parent
      }
      return ancestors.reverse()
   }
    get childNodeIndex(){
      if (!this.parent) return null
      return this.parent.childNodes ? this.parent.childNodes.indexOf(this) : null
   }
    get childIndex(){
      if (!this.parent) return null
      return this.parent.children ? this.parent.children.indexOf(this) : null
   }
   get previousElementSibling(){ return this.prev }
   get prev(){
      if (!this.childIndex) return null
      return this.parent.children[this.childIndex-1]
   }
    get nextElementSibling(){ return this.next }
   get next(){
      if (!this.childIndex) return null
      return this.parent.children[this.childIndex+1] || null
   }
    get dataset(){
      if (!this._dataset) this._dataset=getDataset(this);
      return this._dataset;
   }
    get classList(){
      if (!this._classList) this._classList=new NodeClassList(this);
      return this._classList;
   }
    get style(){
      if (!this.__style) this.__style=buildStyle(this.attributes)
      return this.__style
   }
    get outerHTML(){
      const attrs=Object.entries(this.attributes).map(([key,val])=>val.length ? `${key}="${val}"` : key).join(" ");
      return `<${this.tagName}${attrs ? ' '+attrs : ''}>${this.innerHTML}</${this.tagName}>`;
   }
    getAttribute(attrName){ return this.attributes[attrName]!==undefined ? this.attributes[attrName] : null }
   setAttribute(attrName,value=''){ this.attributes[attrName]=value }
   removeAttribute(attrName){ delete this.attributes[attrName] }
    remove(){
      if (!this.parent) return
      const index=this.childNodeIndex;
      if (index!==null) this.parent.childNodes.splice(index,1);
   }
    get innerHTML(){
      return this.childNodes.map(child=>{
         if (child instanceof Node || child instanceof SingleNode) return child.outerHTML;
         else if (child instanceof TextNode) return child.textContent;
         else return child
      }).join("");
   }
    $$(query){ return this.querySelectorAll(query) }
   querySelectorAll(query){
      const selectors=Query.get(query)
      return find(selectors,this,new Set())
   }
   $(query){ return this.querySelector(query) }
   querySelector(query){
      const selectors=Query.get(query)
      return find(selectors,this,new Set(),true)[0] || null
   }
    getElementsByClassName(query){ return this.querySelectorAll('.'+query) }
   getElementsByTagName(query){ return this.querySelectorAll(query) }
   getElementById(query){ return this.querySelector('#'+query) }
    get children(){
      return this.childNodes.filter(child=>{
         if (!(child instanceof Node)) return false
         if (child.tagName==='#comment') return false
         return true
      });
   }
    insertAdjacentElement(position,newElement){
      if (newElement.tagName==='ROOT' && newElement.childNodes.length>0) newElement=newElement.childNodes[0]
      const pos=position.toLowerCase();
      if(newElement.parentNode){
         newElement.parentNode.childNodes=newElement.parentNode.childNodes.filter(el=>el!==newElement)
      }
      if (pos==='afterbegin' || pos==='beforeend'){
         if (pos==="afterbegin") this.childNodes.unshift(newElement);
         else if (pos==="beforeend") this.childNodes.push(newElement);
         newElement.parent=this
         return newElement
      }
      if (!this.parent) throw new Error("Can't insert element to element without parent")
      if (pos==="beforebegin") insertBefore(this.parent.childNodes,this.childNodeIndex,newElement)
      else if (pos==="afterend") this.parent.childNodes.splice(this.childNodeIndex+1,0,newElement);
      newElement.parent=this.parent
      return newElement
   }
    insertAdjacentHTML(position,html){
      const newNode=parseHTML(html);
      newNode.childNodes.forEach(node=>{
         this.insertAdjacentElement(position,node);
      });
      return newNode
   }
    insertAdjacentText(position,text){
      return this.insertAdjacentElement(position,new TextNode(text));
   }
    insert(position,element){
      const positions=['beforebegin','afterbegin','beforeend','afterend']
      if (positions[position]) position=positions[position]
      if (typeof element==='string'){
         element=element.trim()
         if (element.startsWith('<') && element.endsWith('>')){
            return this.insertAdjacentHTML(position,element)
         }
         return this.insertAdjacentText(position,element)
      }
      return this.insertAdjacentElement(position,element)
   }
    set innerHTML(html){
      this.childNodes=html.trim().startsWith('<') ? parseHTML(html).childNodes : [html]
   }
    set outerHTML(html){
      const parsed=parseHTML(html);
      if (!this.parent) throw new Error('element has no parent node')
      const index=this.childIndex
      if (index!==null) this.parent.childNodes.splice(index,1,...parsed.childNodes);
   }
    appendChild(newChild){
      if (newChild instanceof Node || newChild instanceof TextNode || newChild instanceof SingleNode){
         if (newChild.parent) newChild.parent.childNodes=newChild.parent.childNodes.filter(child=>child!==newChild);
      } else if (typeof newChild==='string') newChild=new TextNode(newChild)
      else return newChild
      this.childNodes.push(newChild);
      newChild.parent=this;
      return newChild;
   }
    get textContent(){
      if (this.childNodes.length===0) return this.nodeName==='#text' ? this.nodeValue : '';
      return this.childNodes.map(child=>{
         if (child instanceof SingleNode) return ''
         if (child instanceof TextNode) return child.nodeValue
         if (child instanceof Node) return child.textContent;
         else return child;
      }).join('');
   }
    set textContent(value){
      this.childNodes=[];
      if (value!==null && value!==undefined){
         this.childNodes.push(value.toString());
      }
   }
 }
-class SingleNode extends Node{
   constructor(tagName,attributes={},parent=null){
      if(attributes['?'] && tagName==='?xml') delete attributes['?']
      super(tagName,attributes,parent);
      this.isSingle=true
   }
    get outerHTML(){
      if (this.tagName==="#cdata-section") return `<![CDATA[${this.nodeValue}]]>`;
      const attrs=Object.entries(this.attributes).map(([key,val])=>val.length ? `${key}="${val}"` : key).join(" ");
      return `<${this.tagName} ${attrs}${this.tagName==='?xml' ? '?' : ''}>`;
   }
    get innerHTML(){ return ""; }
   set innerHTML(_){ }
   $(_){return null}
   $$(_){return []}
   querySelectorAll(_){ return []; }
   querySelector(_){ return null; }
   getElementsByClassName(_){ return []; }
   getElementsByTagName(_){ return []; }
   getElementById(_){ return null; }
   get children(){ return []; }
   insertAdjacentElement(_,__){ }
   insertAdjacentHTML(_,__){ }
   insertAdjacentText(_,__){ }
   appendChild(_){ }
   insert(_,__){ }
   get textContent(){ return ""; }
   set textContent(_){ }
+class SingleNode extends Node{
   constructor(tagName,attributes={},parent=null){
      if(attributes['?'] && tagName==='?xml') delete attributes['?']
      super(tagName,attributes,parent);
      this.isSingle=true
   }
    get outerHTML(){
      if (this.tagName==="#cdata-section") return `<![CDATA[${this.nodeValue}]]>`;
      const attrs=Object.entries(this.attributes).map(([key,val])=>val.length ? `${key}="${val}"` : key).join(" ");
      return `<${this.tagName} ${attrs}${this.tagName==='?xml' ? '?' : ''}>`;
   }
    get innerHTML(){ return ""; }
   set innerHTML(_){ }
   $(_){return null}
   $$(_){return []}
   querySelectorAll(_){ return []; }
   querySelector(_){ return null; }
   getElementsByClassName(_){ return []; }
   getElementsByTagName(_){ return []; }
   getElementById(_){ return null; }
   get children(){ return []; }
    insertAdjacentElement(position,newElement){
      if(position==='afterbegin') position='beforebegin'
      if(position==='beforeend') position='afterend'
      super.insertAdjacentElement(position,newElement)
   }
   insertAdjacentHTML(position,html){
      if(position==='afterbegin') position='beforebegin'
      if(position==='beforeend') position='afterend'
      super.insertAdjacentHTML(position,html)
   }
   insertAdjacentText(position,text){
      if(position==='afterbegin') position='beforebegin'
      if(position==='beforeend') position='afterend'
      super.insertAdjacentText(position,text)
   }
   insert(position,element){
      if(position===1) position=0
      if(position===2) position=3
      super.insert(position,element)
   }
    appendChild(_){ }
   get textContent(){ return ""; }
   set textContent(_){ }
 }
 
-class Root extends Node{
   constructor(){
      super('ROOT',{},null);
      this.isSingle=false
   }
    get body(){return this.$('body')}
   get head(){return this.$('head')}
   get title(){return this.$('title')}
   set title(title){return this.$('title').innerHTML=title}
+class Root extends Node{
   constructor(){
      super('ROOT',{},null);
      this.isSingle=false
   }
+}
+class Document extends Node{
   constructor(){
      super('DOCUMENT',{},null);
      this.isSingle=false
      this.innerHTML=/*html*/`<!DOCTYPE html><html lang="en"><head><title></title></head><body></body></html>`
   }
    get body(){return this.$('body')}
   get head(){return this.$('head')}
   get title(){return this.$('title')}
   set title(title){return this.$('title').innerHTML=title}
 }
 function parseAttributes(str){
   const attrs={};
   let key="";
   let value="";
   let isKey=true;
   let quoteChar=null;
    for (let i=0; i< str.length; i++){
      const char=str[i];
       if (isKey && (char==='=' || char===' ')){
         if (char==='=') isKey=false;
         else if (key.trim()){
            attrs[key.trim()]=true;
            key="";
         }
         continue;
      }
       if (!quoteChar && (char==='"' || char==="'")){
         quoteChar=char;
         continue;
      } else if (quoteChar && char===quoteChar){
         quoteChar=null;
         attrs[key.trim()]=value.trim();
         key=""; value=""; isKey=true;
         continue;
      }
       if (isKey) key+=char;
      else value+=char;
   }
    if (key.trim() &&!value) attrs[key.trim()]='';
   return attrs;
 }
@@ -38,5 +40,5 @@ function buildFromCache(cached){
   function buildNode(cache,parent=null){
 }
  
 function cacheDoc(doc){
   const props=['isSingle','tagName','attributes']
   function addToCache(element,cache={}){
      if(typeof element==='string') return element
      if(element.nodeName==='#text') return{textContent:element.textContent}
      props.forEach(prop=>{
         if(element[prop]){
            cache[prop]=typeof element[prop]==='object' ?{...element[prop]} : element[prop]
         }
      });
      if(!element.childNodes) return cache
      cache.childNodes=[]
      element.childNodes.forEach(childNode=>{
         cache.childNodes.push(addToCache(childNode))
      });
      return cache
   }
   return addToCache(doc)
 }
-return { parseHTML, Node, Query, TextNode, SingleNode, buildFromCache, cacheDoc, Root }
+return { parseHTML, Node, Query, TextNode, SingleNode, buildFromCache, cacheDoc, Root, Document }
 })()