js-widget-hooks

    2.0.7 • Public • Published

    js-widget-hooks

    Installation

    npm install --save-dev js-widget-hooks
    

    Philosophy

    A simple js module, which allows to keep an standardized aproach of client side javascript widget implementation. Often client side widgets are developed in a way, that during dom load a certain css class is targeted and then triggers the dynamic javascript enhancement.

    While this is not bad, it makes it quite difficult to debug and identify widget components later on.

    The widget hooks try to provide a super simple jet standardized approach to link and initialize javascript client side widgets and also only load the required sometimes very complex code blocks if te widget is actually present on the side.

    Benefits

    Using a standardized approach to javascript widgets has the following benefits:

    • it is already obvious in the html template and easy to identify, that additional javascript is run on an element
    • reduction of similar code, concentration on the actual widget specific logic
    • easy to expand
    • unobstrusive (You have a easy possibility to program your widget in a way, that the page will still work, if javascript is deactivated)
    • easily understand why there is a html5 data attribute on a certain html tag
    • use similar syntax for a multitude of different widgets
    • don't care about selectors and plugin calls
    • simply call Widgets.init() to reinitialization any widgets, when they are included via ajax
    • new developers can easily find the code, used to handle a widget

    Examples

    Apply a widget in the DOM

    Widgets can this way very easily added directly in your markup:

    <body>
        [markup]
        <div class="widget other-class" data-widgets="your-name">
            [other markup]
        </div>
        
        [more markup]
    </body>
    import Widgets from 'js-widget-hooks';
        
    Widgets.register('your-name', function(domElem){
            // do something with domElem 
    });
     
    Widgets.init();
     
    // or a specific dom-node, if you have it:
     
    Widgets.init(document.querySelector('.page-root'));
     

    Change the default js-class, which is used for triggering

    In case some other javascript functionality beyond your controll is already hooked to the widget class.

    <button class="different-widget other-class" data-different="your-name">Make me functional!</button>
    import Widgets from 'js-widget-hooks';
        
    Widgets.register('your-name', function(domElem){
            // do something with domElem 
    });
     
    Widgets.init(null, {
        widgetClass: 'different-widget',
        widgetDataName: 'different'
    });

    Possible options are:

    • widgetClass: The html-class to mark the elements as widgets (default: widget)
    • widgetDataName: the data attribute name (default: widgets)
    • scriptClass: The html-class set for dynamic script imports

    Install

    npm i js-widget-hooks

    DownloadsWeekly Downloads

    5

    Version

    2.0.7

    License

    MIT

    Unpacked Size

    34.4 kB

    Total Files

    11

    Last publish

    Collaborators

    • andreas-schoenefeldt