Angular-pseudo-class NPM

Angular pseudo-class

Take control on CSS pseudo-classes !

Provides a set of jQuery, Angular and Sass features to easily control the CSS pseudo-classes in Javascript.

Install

npm install --save angular-pseudo-class

Import in Angular

import pseudoClass from 'angular-pseudo-class';

let app = angular.module('myApp', [
  pseudoClass
]);

If you use Sass, import the mixins (path to node_modules can be different).

@import "./node_modules/angular-pseudo-class/angular-pseudo-class";

Usage

Supported pseudo-classes

:construction: The module is still in development. The following pseudo-classes are supported:

active
hover
... work in progress ...

Listen for pseudo-classes

:point_right: Feature from jquery-pseudo-class

$elem.onPseudoClass( pseudo_class, function_in, function_out );

$elem.onPseudoClass( {
    pseudo_class: [function_in, function_out],
    pseudo_class: [function_in, function_out],
    ...
} );

For exemple:

var $elem = $('.js-button');

$elem.onPseudoClass('hover',
    function(e) {
        $elem.html('Mouse is in');
    },
    function(e) {
        $elem.html('Mouse is out');
    }
);

Pseudo-class control

:warning: The pseudo-classes controlled by Js are slower than the standard CSS pseudo-classes. Use it only if you need it.

Make a component pseudo-classes controlled by the JS events. So it can be stopped, prevent or manually triggered. If no pseudo-classes are given, all supported pseudo-classes are controlled.

<button class = "js-button" pseudo-class-ctrl = "hover">
<!-- OR                 ... pseudo-class-ctrl = "active hover" ... -->
<!-- OR                 ... pseudo-class-ctrl ... -->
    My :hover is controlled !
</button>

In the CSS, the pseudo-class is triggered by:

.js-button.pseudo-class--hover {
    ...
}

With Sass:

.js-button {
    @include pseudo-class(hover) {
        ...
    }
}

Pseudo-class scope

In CSS, when you click on a child component, you clicked too on the parent. It can be undesired in some situations.

Make the child like out of his parent with pseudo-class-scope. If no pseudo-classes are given, all supported pseudo-classes are prevent.

<div class = "parent" pseudo-class-ctrl = "active">
    <a class = "child" pseudo-class-scope = "active"> I'm free ! </a>
    <!-- OR        ... pseudo-class-scope = "active hover" ... -->
    <!-- OR        ... pseudo-class-scope ... -->
</div>

For exemple, to color the background in grey or the link in red when you click on them.

.parent.pseudo-class--active {
    background: grey;
}

.child.pseudo-class--active {
    color: red;
}

With Sass:

.parent {
    @include pseudo-class(active) {
        background: grey;
    }
}

.child {
    @include pseudo-class(active) {
        color: red;
    }
}