Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 | 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 4x 5x 5x 5x 3x 3x 3x 3x 5x 5x 5x 5x 5x 5x 4x 4x 5x 5x 5x 5x 5x 5x 5x 5x 4x 4x 4x 5x 5x 5x 4x 4x 3x 3x 3x 4x 4x 2x 2x 4x 4x 4x 4x 4x 4x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 1x 1x 1x 1x 1x 1x 1x 1x 5x 5x 5x 1x 1x 1x 1x 1x 5x 5x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 5x 5x 5x 4x 4x 4x 4x 4x 4x 5x 5x 5x 5x 5x 5x 3x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 1x 5x 5x 5x 5x 5x 5x 5x | import { setProp } from './ApiChain.js';
export const map = (arr, ...args ) => Array.prototype.map.apply( arr, args );
export const csv = (arr, ...args ) => map( arr, ...args ).join(',');
export const collectionText = arr=> map(arr, e=>getNodeText(e)).join('')
const nop = ()=>''
, isArr = a => Array.isArray(a)
, isStr = a => typeof a === 'string'
, inWC = n => n.getRootNode().host
, hasAssigned = n=> inWC(n) && n.assignedElements
, each = (arr, cb )=> (arr.forEach(cb),arr)
, clear = n => hasAssigned(n)
? n.assignedElements().forEach( a => a.remove() )
: n.innerHTML='' ;
const node2text = { 1: n=>n.assignedElements
? collectionText(n.assignedElements()) || n.innerText
: ['SCRIPT','AUDIO','STYLE','CANVAS','DATALIST','EMBED','OBJECT','PICTURE','IFRAME','METER','NOSCRIPT'
,'SELECT','OPTGROUP','PROGRESS','TEMPLATE','VIDEO']
.includes(n.nodeName) ? ''
: n.innerText //collectionText(n.children)
, 3: n=>n.nodeValue
, 11:n=>collectionText(n.children)
};
export const getNodeText = n => (node2text[n.nodeType] || nop)(n);
export const setNodeText = ( n, val ) =>
hasAssigned(n)
? n.assignedElements().forEach( e => e.innerText = val )
: n.innerText = val;
export const assignParent = (arr,n)=>arr.map( e=>n.appendChild(e))
export const collectionHtml = arr => map( arr, n=>n.assignedElements
? map( n.assignedElements(), e=>e.outerHTML ).join('')
: n.innerHTML
).join('');
export const html2NodeArr = html =>
{ const n = document.createElement('div');
n.innerHTML = html;
return [...n.childNodes].map(e=>(e.remove(),e));
};
export const addNodeHtml = ( n, val ) =>
{
const set = ( to, v )=> ( v instanceof Node
? v.remove() || to.append(v)
: html2NodeArr(v).forEach( e=>to.append(e) )
)
, append = v => hasAssigned(n)
? n.assign( ...n.assignedNodes()
, ...assignParent( each( html2NodeArr(v), e=>e.slot=n.name )
, n.getRootNode().host ) )
: set(n,v);
val instanceof NodeList || isArr(val)
? [ ...val ].forEach( append )
: append(val);
}
export const setNodeHtml = ( n, val ) => { clear(n); addNodeHtml(n,val) };
class
CssChainLocal extends Array
{
attr(...args){ return args.length>1 ? this.setAttribute(...args) : this.getAttribute(...args) }
prop(...args){ return args.length>1 ? this.forEach( el=>el[args[0]]=args[1]) : this[0][args[0]] }
forEach( ...args){ Array.prototype.forEach.apply(this,args); return this }
map( ...args){ return map(this,...args) }
push(...args){ Array.prototype.push.apply(this,args); return this; }
querySelector(css){ return new CssChainLocal().push( this.querySelectorAll(css)[0] ) }
querySelectorAll(css){ return this.reduce( ($,el)=> $.push(...el.querySelectorAll(css) ), new CssChainLocal()) }
$(...args){ return this.querySelectorAll(...args) }
parent(css)
{ const s = new Set()
, add = n=> s.has(n) ? 0 : (s.add(n), n)
, parentLoop = n=> { while( n=n.parentElement )
if( n.matches(css) )
return add(n);
};
return CssChain(this.map( css ? parentLoop : n=>add(n.parentElement) ).filter(n=>n));
}
on(...args){ return this.addEventListener(...args) }
append(val){ return this.forEach( n=> addNodeHtml(n,val)) }
remove(...args)
{ if( !args.length )
{ this.forEach(el=>el.remove()); return new CssChainLocal() }
const p = args[0], t = typeof args[1];
return 'function' === t ? this.removeEventListener(...args) : this.map(el=>el.matches(p)).filter(el=>el) ;
}
clear(){ this.innerHTML=''; return this }
slot(...arr)
{ return this.$( arr.length
? csv( arr
, name=>
csv( name.split(',')
, n=> ['""',"''"].includes(n) || !n
? `slot:not([name])`
: `slot[name="${n}"]`
)
)
: 'slot');
}
get innerText(){ return this.text() }
set innerText( val ){ return this.text( val ) }
text( val )
{ return val === undefined
? collectionText( this )
: this.forEach( typeof val === 'function'
? (n,i)=>setNodeText(n,val(n,i,this))
: n=>setNodeText(n,val) );
}
get innerHTML(){ return this.html() }
set innerHTML( val ){ return this.html(val) }
html( val )
{ return val === undefined
? collectionHtml( this )
: this.forEach( typeof val === 'function'
? (n,i)=>setNodeHtml(n,val(n,i,this))
: n=>setNodeHtml(n,val) );
}
assignedElements(){ return CssChain([].concat( ...this.map( el=>el.assignedElements ? el.assignedElements():[] ) ) ) }
cloneNode(...args){ return this.map( el=>el.cloneNode && el.cloneNode(...args) ) }
clone(doc){ return this.map( el=> doc? doc.importNode( el,true ): el.cloneNode ? el.cloneNode(true):Object.assign({},el) ) }
}
const appliedTypes = new Set()
, OBJ_prototype = Object.getPrototypeOf( {} );
export function
applyPrototype( nodeOrTag, ApiChain )
{ const node = isStr(nodeOrTag) ? document.createElement(nodeOrTag) : nodeOrTag;
if( appliedTypes.has(node.tagName) )
return;
appliedTypes.add( node.tagName );
for( let k in node )
if( !( k in ApiChain.prototype ) )
setProp( node, k, ApiChain );
for ( let proto; (proto= Object.getPrototypeOf(node)) !== OBJ_prototype && proto != null && !appliedTypes.has(proto) ; )
{ appliedTypes.add(proto);
for( let k of Object.getOwnPropertyNames(proto) )
if( !( k in ApiChain.prototype ) )
setProp( node, k, ApiChain );
}
}
Object.getOwnPropertyNames(window)
.filter(key => key.startsWith('HTML') && key.endsWith('Element')&& key.length > 11 )
.map( key=>key.substring(4,key.length-7).toLowerCase() )
.forEach( tag=>applyPrototype( document.createElement(tag), CssChainLocal ) );
export function
CssChain( css, el=document, protoArr=[] )
{
const arr = 'string'===typeof css
? el.querySelectorAll( css )
: isArr(css) ? css : [css? css.shadowRoot || css : document];
if( isArr( protoArr ) )
{ if( !protoArr.length )
protoArr = [...arr].slice(0,256);
}else
protoArr = [ protoArr ];
protoArr.forEach( el => applyPrototype(el,CssChainLocal) );
const ret = new CssChainLocal();
ret.push(...arr);
return ret;
}
export default CssChain;
|