0.9.2 • Published 8 years ago

selector-checker v0.9.2

Weekly downloads
3
License
MIT
Repository
github
Last release
8 years ago

selector-checker

Module for fast element to selector matching (with custom :hover, :focus etc. handing)

NPM

What does this repo about

The SelectorChecker allows to match a specified DOM element with target css selector.

This module should be useful in cases when you need to handle, force or manipulate a custom hover, focus, active or visited states.

How to use

Basic Example

The following example illustrates the principle the SelectorChecker.checkAll method

checker = new SelectorChecker();
element = document.getElementById("target"); //=> <h1 class="heading-1">...</h1>
matches = checker.checkAll(element, "div, h1");
matches   //=> true

Methods

SelectorChecker has a set of different methods you can find to be useful.

check(element, selector, stateMap);

Check if specified element matches target css selector

checker = new SelectorChecker();
element = document.getElementById("target"); //=> <h1 class="heading-1">...</h1>
matches = checker.check(element, "h1");
matches   //=> true
checkAll(element, multipleSelector, stateMap);

Check if specified element matches target multiple css selector

checker = new SelectorChecker();
element = document.getElementById("target"); //=> <h1 class="heading-1">...</h1>
matches = checker.checkAll(element, "div, h1");
matches   //=> true

How a StateMap works

A StateMap is a plain object of following structure:

var stateMap = {
    ":hover": [elem1, elem2, elemN],
    ":focus": [elem1, elem2, elemN],
    ":active": [elem1, elem2, elemN],
    ":visited": [elem1, elem2, elemN]
}

An approach with a stateMap instead of default browser behavior will be usefull in cases when you need to handle, force or manipulate a custom hover, focus, active or visited states.

Links which are not in array of :visited state will automatically match :link pseudo-class.

CSS Identifiers support table

Selector Checker is supporting the set of following css identifiers so far:

Basic Selectors

CategoryExampleSupports
Type Selectorsdiv, sectionYes
Class Selectors.post, .btnYes
ID Selectors#page, #elementYes
Universal Selectors*Yes
Universal Namespacesns|* *|*No
Attribute Selectors[attr operator value]Yes

Combinators

CategoryExampleSupports
Adjacent sibling selectorsA + BYes
Child selectorsA > BYes
Descendant selectorsA BYes
General sibling selectorsA ~ BYes

Pseudo-Classes

CategoryExampleSupports
Active:activeYes (via StateMap)
Checked:checkedYes
Disabled:disabledYes
Empty:emptyYes
Enabled:enabledYes
First Child:first-childYes
First Of Type:first-of-typeYes
Focus:focusYes (via StateMap)
Hover:hoverYes (via StateMap)
Indeterminate:indeterminateYes
In Range:in-rangeYes
Invalid:invalidYes
Last Child:last-childYes
Last Of Type:last-of-typeYes
Lang:langYes
Link:linkYes (via StateMap)
Not:notYes
Nth Child:nth-childYes
Nth Last Child:nth-last-childYes
Nth Of Type:nth-of-typeYes
Nth Last Of Type:nth-last-of-typeYes
Only Child:only-childYes
Only Of Type:only-of-typeYes
Optional:optionalYes
Out Of Range:out-of-rangeYes
Read Only:read-onlyYes
Read Write:read-writeYes
Required:requiredYes
Root:rootYes
Target:targetYes
Valid:validYes
Visited:visitedYes (via StateMap)
Any:anyNo
Dir:dir()No
Default:defaultNo
First:firstNo
Fullscreen:fullscreenNo
Scope:scopeNo

Building

npm install

Development and Testing

  • npm run gulp will launch dist building
  • npm run watch will launch a watcher for dist building
  • npm run test will launch unit-test building
  • npm run test-watch will launch a watcher for unit-test building

License

It's all about MIT stuff. (C) 2017 Eugene Ford