website-utilities

    1.0.252 • Public • Published

    Project status

    npm version downloads build status code coverage dependencies development dependencies peer dependencies documentation-website

    Use cases

    • Predefined scroll events
    • Client side internationalization support
    • Viewport is on top position detection
    • Triggering media-query change events
    • Handling page load animation
    • Section switching transitions
    • Simple section detection via url hashes
    • Handle google tracking.

    Content

    [TOC]

    Installation

    Classical dom injection

    You can simply download the compiled version as zip file here and inject it after needed dependencies:

    #!HTML
    
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://goo.gl/HEL97d"></script>
    <script src="https://goo.gl/3Axp2L"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
    <!--Inject downloaded file:-->
    <script src="index.compiled.js"></script>
    <!--Or integrate via cdn:
    <script src="https://goo.gl/AqLDSi"></script>
    -->
    

    The compiled bundle supports AMD, commonjs, commonjs2 and variable injection into given context (UMD) as export format: You can use a module bundler if you want.

    Package managed and module bundled

    If you are using npm as package manager you can simply add this tool to your package.json as dependency:

    #!JSON
    
    ...
    "dependencies": {
        ...
        "website-utilities": "latest",
        ...
    },
    ...
    

    After updating your packages you can simply depend on this script and let a module bundler do the hard stuff or access it via an exported variable name in given context.

    #!JavaScript
    
    ...
    $ = require('website-utilities')
    ...
    $.Website().isEquivalentDom('<div>', '<script>') // false
    ...
    
    ...
    import Website from 'website-utilities'
    class SpecialWebsite extends Website...
    Website({options..})
    // or
    import {$} from 'website-utilities'
    $.Website().isEquivalentDom('<div>', '<script>') // false
    class SpecialWebsite extends $.Website.class ...
    // or
    Website = require('website-utilities').default
    value instanceof Website
    // or
    $ = require('website-utilities').$
    $.Website()
    ...
    

    Usage

    Here you can see the initialisation with all available plugin options:

    #!HTML
    
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://goo.gl/HEL97d"></script>
    <script src="https://goo.gl/AqLDSi"></script>
    <script>
        $(($) => $.Website({
            activateLanguageSupport: true,
            additionalPageLoadingTimeInMilliseconds: 0,
            domain: 'auto',
            domNode: {
                mediaQueryIndicator: '<div class="media-query-indicator">',
                top: '> div.navbar-wrapper',
                scrollToTopButton: 'a[href="#top"]',
                startUpAnimationClassPrefix:
                    '.website-start-up-animation-number-',
                windowLoadingCover: 'div.website-window-loading-cover',
                windowLoadingSpinner: 'div.website-window-loading-cover > div'
            },
            domNodeSelectorPrefix: 'body.{1}',
            knownScrollEventNames:
                'scroll mousedown wheel DOMMouseScroll mousewheel keyup ' +
                'touchmove',
            language: {},
            mediaQueryClassNameIndicator: [
                ['extraSmall', 'xs'], ['small', 'sm'], ['medium', 'md'],
                ['large', 'lg']
            ],
            onViewportMovesToTop: $.noop(),
            onViewportMovesAwayFromTop: $.noop(),
            onChangeToLargeMode: $.noop(),
            onChangeToMediumMode: $.noop(),
            onChangeToSmallMode: $.noop(),
            onChangeToExtraSmallMode: $.noop(),
            onChangeMediaQueryMode: $.noop(),
            onSwitchSection: $.noop(),
            onStartUpAnimationComplete: $.noop(),
            startUpAnimationElementDelayInMiliseconds: 100,
            startUpShowAnimation: [{opacity: 1}, {}],
            startUpHide: {opacity: 0},
            switchToManualScrollingIndicator: (event:Object):boolean => (
                event.which > 0 || event.type === 'mousedown' ||
                event.type === 'mousewheel' || event.type === 'touchmove'),
            scrollToTop: {
                inLinearTime: true,
                options: {duration: 'normal'},
                button: {
                    slideDistanceInPixel: 30,
                    showAnimation: {duration: 'normal'},
                    hideAnimation: {duration: 'normal'}
                }
            },
            trackingCode: null,
            windowLoadingCoverHideAnimation: [{opacity: 0}, {}],
            windowLoadingSpinner: {
                lines: 9, // The number of lines to draw
                length: 23, // The length of each line
                width: 11, // The line thickness
                radius: 40, // The radius of the inner circle
                corners: 1, // Corner roundness (0..1)
                rotate: 75, // The rotation offset
                color: '#000', // #rgb or #rrggbb
                speed: 1.1, // Rounds per second
                trail: 58, // Afterglow percentage
                shadow: false, // Whether to render a shadow
                hwaccel: false, // Whether to use hardware acceleration
                className: 'spinner', // CSS class to assign to the spinner
                zIndex: 2e9, // The z-index (defaults to 2000000000)
                top: 'auto', // Top position relative to parent in px
                left: 'auto' // Left position relative to parent in px
            },
            windowLoadedTimeoutAfterDocumentLoadedInMilliseconds: 3000
        }))
    </script>
    

    Install

    npm i website-utilities

    DownloadsWeekly Downloads

    394

    Version

    1.0.252

    License

    CC-BY-3.0

    Unpacked Size

    3.02 MB

    Total Files

    84

    Last publish

    Collaborators

    • thaibault