Bootstrap Component Helper

component-helper.js

/* =========================================================
 *
 * Component Helper
 *
 * =========================================================
 *
 *                @@@         @@@
 *              @@@@@@       @@@@@@
 *             @@@@@@@@     @@@@@@@@
 *            @@@    @@     @@    @@@
 *           @@@                   @@@
 *           @@@   @@         @@   @@@
 *           @@@  @@@@       @@@@  @@@
 *           @@@  @@@@  @@@  @@@@  @@@
 *           @@@  @@@@ @@@@@ @@@@  @@@
 *           @@@  @@@@@@@ @@@@@@@  @@@
 *           @@@  @@@@@@   @@@@@@  @@@
 *           @@@  @@@@@     @@@@@  @@@
 *           @@@   @@@       @@@   @@@
 *           @@@                   @@@
 *            @@@    @@     @@    @@@
 *             @@@@@@@@     @@@@@@@@
 *              @@@@@@       @@@@@@
 *                @@@         @@@
 *
 *     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *             CWD_Tech_Services ©2017
 *
 * ========================================================= */


ComponentHelper =
{

    CarouselPrimary: function( carouselSel = '' )
    {
        var StartCarouselPrimary =
        {
            init: function()
            {
                $CarouselPrimaryObj = $( carouselSel );
                this.getViewportDimension();
            },

            getViewportDimension: function()
            {
                ViewPortArr = [];

                  // Standards compliant client
                if ( typeof window.innerWidth != 'undefined' )
                {
                    ViewPortArr.Width = window.innerWidth
                    ViewPortArr.Height = window.innerHeight
                } // IE6 compliant mode
                else if (   typeof document.documentElement != 'undefined'    
                            && typeof document.documentElement.clientWidth !=
                            'undefined' && document.documentElement.clientWidth != 0 )
                {
                    ViewPortArr.Width = document.documentElement.clientWidth
                    ViewPortArr.Height = document.documentElement.clientHeight
                } // IE6 older, other
                else    
                {
                    ViewPortArr.Width = document.getElementsByTagName( 'body' )[0].clientWidth
                    ViewPortArr.Height = document.getElementsByTagName( 'body' )[0].clientHeight
                }

                return ViewPortArr;
            }
        };

        StartCarouselPrimary.init();
    },

    SetCarouselHeight: function()
    {
        $CarouselPrimaryObj.height( ViewPortArr.Height );
    },

    StyleCarouselPrimaryItems: function( height, bgColorArr )
    {
        var $CarouselPrimaryItemsObj = $.extend( $CarouselPrimaryObj, $( '.item' ) );

        $CarouselPrimaryItemsObj.each( function( i )
        {
            $( this ).css(
            {
                'background-color' : '#' + bgColorArr[ i ],
                'background-size' : 'auto ' + height, 
                height : height
            });
        });
    },

    StyleCarouselPrimaryCaptions: function( cpClrArr )
    {
        // Caption Key Name & Pallet Arrays
        var KeyNameArr      = [ 'Top', 'Btm' ],
            CapPltArr       = [];

            $CarouselPrimaryCaptionsObj = $.extend( $CarouselPrimaryObj, $( '.carousel-caption' ) );

        // Populate Caption Pallet Array with Delcared Caption Pallet Associative Objects
        $.each( cpClrArr, function( i )
        {
            var CapPltObj   = {}; // Caption Pallet Object

            CapPltObj[ KeyNameArr[ 0 ] ] = this[ i , 0 ], CapPltObj[ KeyNameArr[ 1 ] ] = this[ i , 1 ];

            CapPltArr.push( CapPltObj );
        });

        // Style Item Captions
        $CarouselPrimaryCaptionsObj.each( function( i )
        {
            var $Obj        = $( this ),
                StyleArr    = [ [ "h1", { "color" : "#" + CapPltArr[ i ].Top } ], [ "h2", { "color" : "#" + CapPltArr[ i ].Btm, "font-style" : "italic" } ],
                              [ "button", { "background-color" : "#" + CapPltArr[ i ].Top, "color" : "#" + CapPltArr[ i ].Btm }  ],
                              [ $( '.btn' ), { "background-color" : CapPltArr[ i ].Top } ] ];

            $.each( StyleArr, function()
            {
                $Obj.find( this[ 0, 0 ] ).css( this[ 0, 1 ] );
            });
        });
    },

    InjectCarouselPrimaryCaptionVectors: function( vecTitleArr, dims, itemNum, uri )
    {
        vecTitleArr.reverse(); // reverse array so prepending order works correctly

        // parse caption collection object
        $CarouselPrimaryCaptionsObj.each( function( i )
        {
            var $caption = $( this );

            if ( i == itemNum )
            {
                // parse vector & title arr
                $.each( vecTitleArr, function( i )
                {   // add vector to caption element
                    $caption.prepend( '<img src="' + uri + '/assets/img/' + this[ 0, 0 ] 
                                    + '_' + dims + '.svg" class="pln-carousel-primary-vector-' + i
                                    + '" alt="" rel="tooltip" data-placement="bottom" data-html="true">' );

                    $( '.pln-carousel-primary-vector-' + i ).tooltip( { title : this[ 0, 1 ] } );
                });
            }
        })
    }
};

example-call.js

		ComponentHelper.CarouselPrimary( '.pln-carousel-primary .pln-carousel-primary-inner' );

		ComponentHelper.SetCarouselHeight();

		ComponentHelper.StyleCarouselPrimaryItems( '100%', [ 'F10', '0F0', '70F' ] );

		ComponentHelper.StyleCarouselPrimaryCaptions( [ [ 'EA7B1F', '890C00' ], [ 'B6F8B9', '005304' ], [ 'F28BC3', '390079' ] ] );

		ComponentHelper.InjectCarouselPrimaryCaptionVectors(  [ 
									[ 'Finger_Button', 'Simplify Repetitive Tasks' ], 
									[ 'WWW_Pointer', 'Draw & Keep Customers With Intelligent Design' ], 
									[ 'Circuit_Board', 'Hardware Repairs & Upgrades' ], 
									[ 'Light_Bulb', 'Creative & Reliable Efficiency Solutions' ]
								      ]	, '150x150', 0, '<?php get_theme_url(); ?>' )