Nuanced Pumpkin Mavens

    mkg-up

    0.2.1 • Public • Published

    mkg-up

    npm version GitHub version

    mkg-up focuses to improve user interaction for mobile and web user interfaces. It's for developers who building web applications. It's library agnostic and modular.

    • You can easily mark html element with different states (loading, disable, coverback states)
    • redirect user to html element with smooth scroll. also scroll command places targeted element's position to most readable location. it's calculate spaces throught to golden ratio. (if sizes of element is smaller than viewport)
    • highlight with stylish customizable effect
    • add inform text for html elements
    • easy to use
    • modular usage
    • library agnostic
    • it's cross browser with ie9+ support
    • only css animations

    highlight type

    highlight to highlight target content

    coverback type

    coverback coverup back stage for purpose of highlight to target content

    loading type

    loading to coverup the target content area with loading state (eg. waiting for ajax request)

    disable type

    disable to coverup target area for can not be unaccessable by user

    and aditional features are scroll and displaying inform text for areas.

    Installition

    install with npm

    npm install mkg-up --save
    

    or install via bower

    bower install mkg-up --save
    

    or you can get the latest release of mkg-up

    Usage

    <script type="text/javascript" src="mkg-up.js"></script>
    //or you can prefer minified version
    <script type="text/javascript" src="mkg-up.min.js"></script>

    if you use module system, look modular usage section

    Example

    mUp(document.querySelector('img')).highlight({
        duration:3000,
        color:'#00a988',
        onShow:function functionName() {
            this.tip({text:'Sample Text',position:'right'});
        }
    });

    Shorthand Usage

    //there is shorthand for fast usage directly to html element. It's pretty easy right?
    document.body.loading({fixed:true});

    modular usage with webpack

    // import default mUp function es6 style
    import mUp from 'mkg-up';
    mUp(document.body).disable({text:'this site is unreachable for you for a while'});
     
    //or you can import feature you want
    import {loading} from 'mkg-up';
    loading(document.querySelector('#ajaxArea'));
     
    //commonJS usage
    var mUp = require('mkg-up');
    mUp(document.body).disable({text:'this site is unreachable for you for a while'});
     
    var loading = require('mkg-up').loading;
    loading(document.querySelector('#ajaxArea'));
     

    Options with default values

    {
        duration:null,  //(number), null for auto decide, 0 for infinite
        scroll:true, //(bool)
        scrollSpeed:1, //(float), speed ratio for changin velocity
        fixed:false, //(bool), fixed positioned targets, its also disable scroll feature
        color:null, //(text), null: getting from stylesheet
        textColor:null, //(text), null: getting from stylesheet, setting loaders icon color and tip's text color
        onScrollComplete:null, //(function)
        onShow:null, //(function)
        onHide:null, //(function), also triggers when destroying
        opacity:null //(float), null: getting from stylesheet
    }

    License

    The code is released under the MIT License.

    Install

    npm i mkg-up

    DownloadsWeekly Downloads

    1

    Version

    0.2.1

    License

    MIT

    Last publish

    Collaborators

    • mkg