prop/attr setter by with value callback 4th parameter

Author: sashafirsov

src/CssChain.d.ts

@@ -25,13 +25,13 @@ export interface CssChainCollection<T> extends  Array<AnyElement&T>, AnyElement
     /** (alias for `setAttribute`) sets elements attribute with value from callback, returns CssChain */
     attr(name:string, valueCallback:( (el:T, i:number, arr:CssChainCollection<T>)=>string) ): CssChainCollection<T>;
     /** (alias for `setAttribute`) sets `css`-defined sub-tree elements attribute, returns CssChain */
-    attr(name:string, valueOrCallback:string | ( (el:T, i:number, arr:CssChainCollection<T>)=>string), css:string): CssChainCollection<T>;
+    attr(name:string, valueOrCallback:string | ( (el:T, i:number, arrCss:CssChainCollection<T>, arrThis:CssChainCollection<T>)=>string), css:string): CssChainCollection<T>;
     /** returns 1st element property value or `undefined` for empty collection */
     prop(name:string): any;
-    /** sets elements attribute, returns CssChain */
-    prop(name:string, value:any): CssChainCollection<T>;
-    /** sets `css`-defined sub-tree elements attribute, returns CssChain */
-    prop(name:string, value:any, css:string): CssChainCollection<T>;
+    /** sets elements property, returns CssChain */
+    prop(name:string, valueOrCallback:any | ( (el:T, i:number, arr:CssChainCollection<T>)=>string)): CssChainCollection<T>;
+    /** sets `css`-defined sub-tree elements property, returns CssChain */
+    prop(name:string, valueOrCallback:any | ( (el:T, i:number, arrCss:CssChainCollection<T>, arrThis:CssChainCollection<T>)=>string), css:string): CssChainCollection<T>;
     /** selects 1st elements by @param css string from each collection element, returns CssChain */
     querySelector(css: string): CssChainT;
     /** selects child elements by @param css string, returns CssChain */

src/CssChain.js

@@ -95,12 +95,22 @@ CssChainT extends Array
         let [k,v,s] = args
         ,        $s = this.$(s);
         if(isFn(v))
-            this.map(v).forEach((V,i)=>$s[i].setAttribute(k,V))
+            $s.map((n,i,arr)=>v(n,i,arr,this)).forEach((V,i)=>$s[i].setAttribute(k,V))
         else
             $s.setAttribute(...args);
         return this
     }
-    prop(...args){  return args.length>1 ? (this.$(args[2]).forEach( el=>el[args[0]]=args[1]),this ): this[0][args[0]] }
+    prop(...args)
+    {   if( args.length < 2 )
+            return this[0][args[0]];
+        let [k,v,s] = args
+        ,        $s = this.$(s);
+        if(isFn(v))
+            $s.map((n,i,arr)=>v(n,i,arr,this)).forEach((V,i)=>$s[i][k]=V)
+        else
+            $s.forEach( el=>el[k]=v);
+        return this
+    }
     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; }

test/CssChain-methods.test.js

@@ -48,13 +48,14 @@ describe( 'CssChain own methods', () =>
     it( 'attr(name,cb,css)',  async ()=>
     {
         const el = await fixture(html`<div><a id="a1"><b>B1</b></a><a id="a2"><b>B2</b></a></div>`);
-        const $X = $$('a',el)
-        const css ='b'
-        expect( $X.attr('title',(el,i)=>el.innerHTML+'-'+i, css).length ).to.equal(2);
-        expect( $X.$(css).getAttribute('title') ).to.equal('<b>B1</b>-0');
-        expect( $X.$(css)[0].getAttribute('title') ).to.equal('<b>B1</b>-0');
-        expect( $X.$(css)[1].getAttribute('title') ).to.equal('<b>B2</b>-1');
-        expect( $X.$(css).attr('title') ).to.equal('<b>B1</b>-0');
+        const $X = $$('a',el);
+        const css ='b';
+        const cb = (n,i,arr,$)=>arr[i].innerText+'-'+$[i].id+'-'+i+'-'+n.innerText;
+        expect( $X.attr('title',cb, css).length ).to.equal(2);
+        expect( $X.$(css).getAttribute('title') ).to.equal('B1-a1-0-B1');
+        expect( $X.$(css)[0].getAttribute('title') ).to.equal('B1-a1-0-B1');
+        expect( $X.$(css)[1].getAttribute('title') ).to.equal('B2-a2-1-B2');
+        expect( $X.$(css).attr('title') ).to.equal('B1-a1-0-B1');
     } );
 
     it( 'prop(name), prop(name,val)',  async ()=>
@@ -72,6 +73,18 @@ describe( 'CssChain own methods', () =>
 
         expect( $X.attr('id') ).to.equal('AZ');
     } );
+    it( 'prop(name,valCallback)',  async ()=>
+    {
+        const el = await fixture(html`<div><a id="a1"></a><a id="a2"></a></div>`);
+        const $X = $$('a',el);
+        const cb = (n,i,arr,$) => `${ n.id }-${ i }-${arr[i].id}-${ $[i].tagName }`;
+        expect( $X.prop('id', cb ).length ).to.equal(2);
+        expect( $X.prop('id') ).to.equal('a1-0-a1-A');
+        expect( $X[0].id ).to.equal('a1-0-a1-A');
+        expect( $X[1].id ).to.equal('a2-1-a2-A');
+
+        expect( $X.attr('id') ).to.equal('a1-0-a1-A');
+    } );
     it( 'prop(name,val,css)',  async ()=>
     {
         const el = await fixture(html`<div><a id="a1"></a><a id="a2"></a></div>`);
@@ -84,6 +97,19 @@ describe( 'CssChain own methods', () =>
 
         expect( $X.$('a').attr('id') ).to.equal('AZ');
     } );
+    it( 'prop(name,valCb,css)',  async ()=>
+    {
+        const el = await fixture(html`<div><a id="a1"></a><a id="a2"></a></div>`);
+        const $X = $$(el)
+        const cb = (n,i,arr,$) => `${ n.id }-${ i }-${arr[i].id}-${ $.tagName }`;
+
+        expect( $X.prop('id', cb, 'a').length ).to.equal(1);
+        expect( $X.$('a').prop('id') ).to.equal('a1-0-a1-DIV');
+        expect( $X.$('a')[0].id ).to.equal('a1-0-a1-DIV');
+        expect( $X.$('a')[1].id ).to.equal('a2-1-a2-DIV');
+
+        expect( $X.$('a').attr('id') ).to.equal('a1-0-a1-DIV');
+    } );
     it( 'attr(name,val,css)',  async ()=>
     {
         const el = await fixture(html`<div><a id="a1"></a><a id="a2"></a></div>`);