Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

css-chain-test

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

css-chain-test

test and demo for css-chain

  • 1.1.9
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

CssChain & ApiChain test and <css-chain> demo

css-chain hosts ApiChain and CssChain JS. Collection API inherits the element API and Array.

NPM version coverage

Live demo

https://unpkg.com/css-chain-test@1.1.9/dist/demo.html

CssChain

html elements methods

CssChain returns an Array inherited object which has all methods and properties of its elements. When method is called, each element would invoke this method and then same CssChain object is returned.


    function addTooltip( el ){ /* ...el.title */ }
    CssChain( '*[title]' ).forEach( el=>addTooltip( el ) )
                          .forEach( addTooltip )
                          .removeAttribute('title');

^^ calls addTiooltip() twice for each element with title attribute and then removes this attribute

    CssChain( '*[title]', rootEL ).addEventListener( 'click', ev=> alert(ev.target.title) );

^^ adds event listener to all selected elements in rootEl DOM tree

    CssChain( 'a' )
        .addEventListener( 'mouseover', ev=> alert(ev.target.classList.add('hovered') ) )
        .addEventListener( 'mouseleave', ev=> alert(ev.target.classList.remove('hovered') ) )
        .addEventListener( 'focus', ev=> alert(ev.target.classList.add('focused') ) )
        .addEventListener( 'mouseleave', ev=> alert(ev.target.classList.remove('focused') ) )

^^ adds multiple event handlers in chainable dot notation.

special methods

  • forEach() - same as Array.forEach returns CssChain
  • map() - same as Array.map returns new CssChain with elements from callback
  • push(...arr) - same as Array.push returns appended CssChain
  • querySelector(css) - selects 1st element, returns CssChain
  • querySelectorAll(css) - selects all children matching css , returns CssChain
  • $ - alias to querySelectorAll()
  • attr(name) (alias for getAttribute) returns 1st element attribute value or undefined for empty collection
  • attr(name, value) (alias for setAttribute) sets elements attribute, returns CssChain
  • prop(name) returns 1st element property value or undefined for empty collection
  • prop(name, value) sets elements attribute, returns CssChain
  • parent() - set of immediate parents of current collection, duplications removed
  • parent(css) - set of parents of current set which matches the selector, duplications removed
  • on(eventName, cb) - alias to addEventListener
  • remove() - delete all nodes, returns empty CssChain
  • remove(eventName, cb) - alias to removeEventListener

html elements properties

When property is assigned to collection, this property would be set for all elements in collection. The property get would return property from 1st element.

    import { CssChain as $ } from '../src/CssChain.js';
    $( 'input' ).value = 'not defined'; // all INPUT elements would have new value set
    v = $( 'input' ).prop( value,'not defined' ); // same as ^^
    let  v = $( 'input' ).value; // variable would receive the 1st INPUT element value
    v = $( 'input' ).prop( value ); // same as ^^

ApiChain.js

Array of raw objects

    $([ {a:1},{a:2} ]).a=1;    // all arr elements property `a` set to 1
    v = $([ {a:1},{a:2} ]).a;  // 1st element property `a` is returned, i.e. 1
    $( [ { a:1,f(v){ this.a=v} }, { b:2,f(v){ this.b=v}} ])
        .f(3); // method called on each element, result [{a:3},{b:3}]

Array of class objects

Could be initiated in same fashion as raw objects. But for performance better to provide the reference object as a second parameter:

    class A{ f(){} }
    const x = new A(), y = new A();
    $( [x,y], A ).f()

Installation

for development of css-chain or css-chain-test:

git clone https://github.com/sashafirsov/css-chain.git
git clone https://github.com/sashafirsov/css-chain-test.git
cd css-chain
npm i
npm link
cd ../css-chain-test
npm i
npm link css-chain

Usage

<script type="module">
    import 'css-chain/css-chain-element.js';
</script>

<css-chain></css-chain>

Samples of use

PokéAPI Explorer: PokéAPI Explorer

Testing with Web Test Runner

To execute a single test run:

npm run test

To run the tests in interactive watch mode in browser:

npm run test:watch

Tooling configs

For most of the tools, the configuration is in the package.json to minimize the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

FAQs

Package last updated on 05 Aug 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc