App Logo
Logo
Unified Javascript API Sample Module Loader Audio Player Carousel Timers Counters Circle COunters Flipbox Lightbox Gallery Parallax Progress Bars Social Sharing Typing Text Video Player

A Unified Javascript API For All Components

While developing WoodPecker® we wanted to focus on the developers pain and wanted to ensure that we solve problems in such a way that it reduces the time developers spend on micro level tasks and hence reducing the development time. A developer works on a lot of open source javascript libraries and each one of them has its own way on including it in the web page and then finally passing the required options to it. With WoodPecker® we solve the following problems for you:

  1. We Choose The Best Libraries: We choose the best libraries for you and update them as well so you don't need to think about which one to choose and when and how to update.
  2. One Single Syntax: When including a component on the page, you just have to follow one syntax. No Need to include multiple files and use different syntax for every library.
  3. Zero Overheads: WoodPecker uses AMD modules and RequireJs to include various javascript modules. These modules are only loaded asynchronously on the page if they are required by your code. No Bulky JavascriptFiles Like Other Themes On The Marketplace
  4. No Global Scopes, No Compatibility Issues: None of our modules have been written using a global scope and all the modules have proper prefixes to ensure they do not have compatibility issues with any other Javascript files that you use while building your application.

Sample Syntax For Loading A Module On The Page

This is a sample syntax of how you would load a javascript module on any page that you are developing using WoodPecker. The beauty of this is that this single syntax works across all the modules in the theme

                
jQuery(document).ready(function ()
{
    // A jQuery or a javascript condition
    if (jQuery(".wdpk-light-gallery").length !== 0)
    {
        // Create an Object of all the options that are needed for the module
        let obj = {
            selectorID: 'wdpk-light-gallery-1',
            thumbnail: true,
            animateThumb: false,
            showThumbByDefault: false
        };

        // Require call for the module that needs to be loaded
        require(["app/shortcodes/wdpkLightGallery"], function (e)
        {
            // Pass the object that you created to the public call
            e.publicCall(obj);

        });
    }
});

Various options available and what they do can be checked in each component section of this documentation itself.

Audio Player

Module used to create and HTML5 Audio player with all the styling picked up form Scss variables.

Key Possible Values
selectorID ID of the audio element
Sample HTML
                
<audio class = "wdpk-audio" id = "html5-audio" controls>
    <source src = "/assets/audio/audio.mp3" type = "audio/mp3" />
</audio>

Sample Javascript

                
jQuery(document).ready(function ()
{
    if (jQuery(".wdpk-audio").length !== 0)
    {
        let obj = {
                selectorID: 'html5-audio'
            }
        ;

        require(["app/shortcodes/wdpkPlayer"], function (e)
        {
            e.publicCall(obj);
        });
    }
});

Carousel

Create an image carousel

Key Possible Values
draggable Set this to true if you need the carousel to be draggable. If set to false the carousel will not be draggable and will move only using the controls
dragThreshold Threshold in px until which the carousel item will not drag. A value of 10 will mean that the dragging will not start until it is moved by 10px
cellAlign Possible values 'left', 'right', 'center' . Impacts the alignment of the elements of the carousel.
freeScroll Enables content to be freely scrolled and flicked without aligning cells to an end position.
wrapAround At the end of cells, wrap-around to the other end for infinite scrolling.
adaptiveHeight Changes height of carousel to fit height of selected slide.
groupCells Groups cells together in slides. Flicking, page dots, and previous/next buttons are mapped to group slides, not individual cells. Accepts Values in numbers eg. 2 format and boolean
autoPlay Automatically advances to the next cell. Auto-playing will pause when mouse is hovered over, and resume when mouse is hovered off. Auto-playing will stop when the carousel is clicked or a cell is selected. Accepts Values in milliseconds 1000 format and boolean
pauseAutoPlayOnHover Auto-playing will pause when the user hovers over the carousel. Set pauseAutoPlayOnHover: false to disable this behavior.
contain Contains cells to carousel element to prevent excess scroll at beginning or end. Has no effect if wrapAround: true.
imagesLoaded Unloaded images have no size, which can throw off cell positions. To fix this, the imagesLoaded option re-positions cells once their images have loaded.
prevNextButtons Creates and enables previous & next buttons. Enabled by default prevNextButtons: true.
selector Selector for the carousel

Sample HTML

                
<div class = "main-carousel">
    <div class = "carousel-cell"><img src="..."/></div>
    <div class = "carousel-cell"><img src="..."/></div>
</div>

Sample Javascript

                
jQuery(document).ready(function ()
{
    if (jQuery(".main-carousel").length !== 0)
    {
        let obj = {
            draggable: true,
            dragThreshold: 10, // dragging doesn't start until 10px moved
            cellAlign: 'center',
            freeScroll: false,
            wrapAround: true,
            adaptiveHeight: true,
            groupCells: 1, // Accepts Values in numbers eg. 2 format and boolean
            autoPlay: false, // Accepts Values in 1000 format and boolean
            pauseAutoPlayOnHover: false,
            contain: true,
            imagesLoaded: true,
            prevNextButtons: true,
            selector: '.main-carousel',
        };
        require(["app/shortcodes/wdpkCarousel"], function (e)
        {
            e.publicCall(obj);
        });
    }
});

Timers

Create a Timer

Key Possible Values
finalDate End time in the following format YYYY/MM/DD hh:mm:ss
selector Selector for the timer can be an ID or a class like '#wdpk-timer'
enableYears Set to true to enable years
yearsString String used for years
enableMonths Set to true to enable months
monthsString String used for months
enableDaysOfMonth Set to true to enable days of month left
daysOfMonthString String used for days of month
enableWeeks Set to true to enable weeks
weeksString String used for weeks
enableDays Set to true to enable days
dasysString String used for days
enableHours Set to true to enable hours
hoursString String used for hours
enableMinutes Set to true to enable minutes
minutesString String used for minute
enableSeconds Set to true to enable seconds
secondsString String used for seconds

Sample HTML

                
<div class = "col-lg-12 mb-4">
    <div id = "wdpk-timer"></div>
</div>

Sample Javascript

                
jQuery(document).ready(function ()
{
    if (jQuery("#wdpk-timer").length !== 0)
    {
        let obj = {
            finalDate: '2020/12/31 23:24:50', // In the following format YYYY/MM/DD hh:mm:ss
            selector: '#wdpk-timer',
            enableYears: false,
            yearsString: 'Years',
            enableMonths: true,
            monthsString: 'Months',
            enableDaysOfMonth: false,
            daysOfMonthString: 'Days Left',
            enableWeeks: true,
            weeksString: 'Weeks',
            enableDays: true,
            dasysString: 'Days',
            enableHours: true,
            hoursString: 'Hours',
            enableMinutes: true,
            minutesString: 'Minutes',
            enableSeconds: true,
            secondsString: 'Seconds',
        };
        require(["app/shortcodes/wdpkTimer"], function (e)
        {
            e.publicCall(obj);
        });
    }
});

Counters

Create a counter to a value

Key Possible Values
selectorID The ID of the counter element without selector for example. 'wdpk-counter'
startNumber The number from where the counter should start
EndNumber The end number of the counter
decimalPlaces Number of decimal places to be displayed in the counter
countDuration The total duration of the counter in seconds
useEasing Use easing in animation set this to true else set to false
useGrouping Use grounping to display numbers example 1,000 vs 1000
separator The separator to be used between groups example '.' or ','
decimal The character to be used for decimal exmaple '.'
prefix Add any prefix that you want to use example '$'
suffix Add any suffix that you want to use example '%'

Sample HTML

                
<div class = "wdpk-counter-wrapper">

    <div class = "wdpk-counter-icon">
        <div class = "wdpk-counter-icon-wrapper">
            <i class = "far fa fa-star"></i>
        </div>
    </div>

    <div id = "wdpk-counter"></div>
    <div class = "wdpk-counter-footnote">Clients</div>
</div>

Sample Javascript

                
jQuery(document).ready(function ()
{
    if (jQuery("#wdpk-counter").length !== 0)
    {
        let obj = {
            selectorID: 'wdpk-counter',
            startNumber: 0,
            EndNumber: 9840,
            decimalPlaces: 0,
            countDuration: 2.5, // in seconds
            useEasing: true,
            useGrouping: true,
            separator: ',',
            decimal: '.',
            prefix: '',
            suffix: ''
        };
        require(["app/shortcodes/wdpkCounter"], function (e)
        {
            e.publicCall(obj);
        });
    }
});

Circle Counters

Create a Circle Counter

Key Possible Values
selectorID The selector ID for the counter example 'wdpkCircle',
value Value in decimal for example 0.57, maximum can be 1
size Size will be applied as a diameter in px
startAngle Angle to start with can accept example -Math.PI / 2,
reverse Set to true if you need the circle to animate in a reverse direction
thickness Thickneds of the circumference
lineCap The kind of line cap for the circumfrence, example - 'butt', // Arc line cap: "butt", "round" or "square"
fill Object for the fill example - {color: "#0056c6"}, { gradient: [["red", .2], ["green", .3], ["blue", .8]] } , { image: "http://i.imgur.com/pT0i89v.png" }, "#ff1e41"
emptyFill Color of the "empty" arc. Only a color fill supported by now Default: "rgba(0, 0, 0, .1)"
valueProgress Display the progress value or not default true
animationProgress Displau animation progress defult value false
valueTotal Can either be 1 or 100. Set 1 for one and 2 for 100
decimalPlaces Only applicable if valueTotal is set to 1
suffixSymbol Symbol used or Suffix example - '%',
animation Object for the duration of the animation exmaple - {duration: 1600, easing: "circleProgressEasing"},

Sample HTML

                
<div class = "wdpk-cicles">
    <div class = "wdpk-cicles-wrapper">
        <div id = "wdpkCircle">
            <div class="wdpk-cicles-counter-number"></div>
        </div>
    </div>
    <h6 class="my-3 text-center">Value Progress</h6>
</div>

Sample Javascript

                
jQuery(document).ready(function ()
{
    if (jQuery(".wdpk-cicles").length !== 0)
    {
        let obj = {
            selectorID: 'wdpkCircle',
            value: 0.57,
            size: 125,
            startAngle: -Math.PI / 2,
            reverse: false,
            thickness: '15',
            lineCap: 'butt',  // Arc line cap: "butt", "round" or "square"
            fill: {color: "#0056c6"},
            emptyFill: 'rgba(0,0,0,.1)',
            valueProgress: true,
            animationProgress: false,
            valueTotal: 2, /// can either be 1 or 100. Set `1` for one and `2` for 100
            decimalPlaces: 2, // only applicable if valueTotal is set to 1
            suffixSymbol: '%',
            animation: {duration: 1600, easing: "circleProgressEasing"},
        };
        require(["app/shortcodes/wdpkCircle"], function (e)
        {
            e.publicCall(obj);
        });
    }
});

Flip Box

Create a Flipbox

Key Possible Values
selectorID The ID of the selector of flipbox 'flipBox1'
axis Axis on which the card should flip opetions 'x' and 'y'
trigger 'click', 'hover', 'manual' - Event that activates the flip action. Using manual means that you have to activate it via javascript. When this is set to click and the tap event is available (through e.g. jQuery Mobile or jQuery Touch Events), flip will bind to that instead of to click as a regular click will also instantaneously trigger a tap event, but not vice-versa.
reverse Set to true if you want to reverse the direction of the flip.
speed Speed in milliseconds, example 500,
front '#front', // Selector class or ID for Front of the flipbox
back '#back', // Selector class or ID for back of the flipbox

Sample HTML

                
<!-- Flipbox Front -->
<div id = "front" class = "card py-3">
    <div class = "card-body text-center">
        <h5 class = "card-title">Front Side</h5>
        <p class = "card-text">Some quick example text to build on the card
                                title and make up
                                the bulk of the card's content.</p>
    </div>
</div>
<!-- /Flipbox 1 Front -->

<!-- Flipbox  Back -->
<div id = "back" class = "card bg-primary py-3">
    <div class = "card-body text-center">
        <h5 class = "card-title text-white ">Back Side</h5>
        <p class = "card-text text-white">Some quick example text to build on
                                          the card
                                          title and make up
                                          the bulk of the card's content.</p>
    </div>
</div>
<!-- /Flipbox  Back -->

Sample Javascript

                
jQuery(document).ready(function ()
{
    if (jQuery(".wdpkFlipbox").length !== 0)
    {
        let obj = {
            selectorID: 'flipBox1',
            axis: 'x',
            trigger: 'hover',  //'click', 'hover', 'manual' - Event that activates the flip action. Using manual means that you have to activate it via javascript. When this is set to click and the tap event is available (through e.g. jQuery Mobile or jQuery Touch Events), flip will bind to that instead of to click as a regular click will also instantaneously trigger a tap event, but not vice-versa.
            reverse: false, // Set to true if you want to reverse the direction of the flip.
            speed: 500,
            front: '#front', // Selector class or ID for Front of the flipbox
            back: '#back', // Selector class or ID for back of the flipbox
        };

        require(["app/shortcodes/wdpkFlip"], function (e)
        {
            e.publicCall(obj);
        });
    }
});

Lightbox Gallery

Create a Lightbox Gallery

Key Possible Values
selectorID The ID of the lightbox wrapper 'wdpk-light-gallery-1',
thumbnail Set this to true if the thumnails need to be displayed in the lightbox Gallery
animateThumb Set this to true if the thumnails need to be animated in the lightbox Gallery
showThumbByDefault If this is set to true thumnails will be visible by default else would beed to be toggled

Sample HTML

                
<div id = "wdpk-light-gallery-1" class = "card-columns wdpk-light-gallery">
    <div class = "card">
        <div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-1.jpg">
            <span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
            <img src = "/assets/images/gallery/gallery-1.jpg" class = "wdpk-light-gallery-img">
        </div>
    </div>
    <div class = "card">
        <div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-2.jpg">
            <span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
            <img src = "/assets/images/gallery/gallery-2.jpg" class = "wdpk-light-gallery-img">
        </div>
    </div>
</div>

Sample Javascript

                
jQuery(document).ready(function ()
{
    if (jQuery(".wdpk-light-gallery").length !== 0)
    {
        let obj = {
            selectorID: 'wdpk-light-gallery-1',
            thumbnail: true,
            animateThumb: true,
            showThumbByDefault: true,
        };

        require(["app/shortcodes/wdpkLightGallery"], function (e)
        {
            e.publicCall(obj);
        });
    }
});

Parallax

Create a paralla effect with background or foreground objects.

Key Possible Values
selectorID Select ID for the parallax object 'parallax-1',
factor Sets offset and speed. It can be positive (0.3) or negative (-0.3). +/- gives direction, Less means slower if no other breakpoint factor is set this value is selected
factorXs Factor for xtra small devices
factorSm Factor for small devices
factorMd Factor for xtra medium devices
factorLg Factor for xtra large devices
factorXl Factor for xtra extra large devices
type Whether to apply parallax to a background or a foreground object. Available options 'background', 'foreground'
direction Direction of the parallax. Available options 'vertical', 'horizontal'
transition CSS transition, added on elements where type:'foreground'

Sample HTML

                
<div class = "col-lg-12 wdpk-parallax" id = "parallax-1"></div>

Sample Javascript

                
jQuery(document).ready(function ()
{
    if (jQuery(".wdpk-parallax").length !== 0)
    {
        let obj = {
            selectorID: 'parallax-1',
            factor: 0.8,        // +/- gives direction, Less means slower if no other breakpoint factor is set this value is selected
            factorXs: 0.1,      // factorXs, factorSm, factorMd, factorLg, factorXl
            factorSm: 0.2,      // factorXs, factorSm, factorMd, factorLg, factorXl
            factorMd: 0.3,      // factorXs, factorSm, factorMd, factorLg, factorXl
            factorLg: 0.4,      // factorXs, factorSm, factorMd, factorLg, factorXl
            factorXl: 0.5,       // factorXs, factorSm, factorMd, factorLg, factorXl
            type: 'background',     // background, foreground
            direction: 'vertical',// vertical, horizontal
            transition: 'translate 0.1s ease' // CSS transition, added on elements where type:'foreground'
        };
        require(["app/shortcodes/wdpkParallax"], function (e)
        {
            e.publicCall(obj);
        });
    }
});

Progress Bars

Create Animated Progress Bars

Key Possible Values
selectorID The select ID for the progress bar example - 'wdpk-progress-width-1',
duration The duration of the animation in milliseconds
width The width of the progress bar in % upon the completion of the animation

Sample HTML

                
<div class = "progress wdpk-width-animated">
    <div class = "progress-bar bg-success progress-bar-striped progress-bar-animated "
         role = "progressbar"
         style = "width: 0%"
         id = "wdpk-progress-width-1"
         aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100">25% PHP Score
    </div>
</div>

Sample Javascript

                
jQuery(document).ready(function ()
{
    if (jQuery(".progress").length !== 0)
    {
        let obj = {
            selectorID: 'wdpk-progress-width-1',
            duration: 2500,
            width: '25%',
        };
        require(["app/shortcodes/wdpkAnimateProgress"], function (e)
        {
            e.publicCall(obj);
        });
    }
});

Social Sharing

Create Social Sharing Buttons

Key Possible Values
shares An array of social shares that need to be enabled. Check the source code below for available options
url The URl that needs to be shared, example - "https://uneebox.com/woodpecker-html/",
text Sharing text, example - "WoodPecker is an HTML theme that is modular and fast",
showLabel Set to true if you want the social shaing label to be displayed
showCount Set to true if you want the social share counts to be displayed
shareIn Set the taget value for the browser over here
selectorID The ID of the social share element, example - 'wdpkSocial',

Sample HTML

                
<div id = "wdpkSocial"></div>

Sample Javascript

                
jQuery(document).ready(function ()
    {
        if (jQuery("#wdpkSocial").length !== 0)
        {
            let obj = {
                shares: [
                    "email",
                    "twitter",
                    "facebook",
                    "googleplus",
                    "linkedin",
                    "pinterest",
                    "stumbleupon",
                    "pocket",
                    "whatsapp",
                    "viber",
                    "messenger",
                    "vkontakte",
                    "telegram",
                    "line",
                    "rss"],
                url: "https://uneebox.com/woodpecker-html/",
                text: "WoodPecker is an HTML theme that is modular and fast",
                showLabel: true,
                showCount: false,
                shareIn: "blank",
                selectorID: 'wdpkSocial',
            };
            require(["app/shortcodes/wdpkSocialShare"], function (e)
            {
                e.publicCall(obj);
            });
        }
    });

Typing Text

Create Social Sharing Buttons

Key Possible Values
selector Selector for trigger (must be a valid css selector), example - '#wdpk-type-text'
smartBackspace When set to true backspace will not delete the common part of the string
stringsElement Div that contains the text to be typed this is to make text SEO friendly, example - '#typed-strings'
typeSpeed Typing Speed in millinseconds higher the slower
startDelay Delay in millinseconds before the typing starts
backSpeed Speed for backspace in millinseconds the higher the slower
backDelay Delay in millinseconds after which the backsspace starts
fadeOut Fade out instead of backspace if set to true
fadeOutClass Css class for fade animation
fadeOutDelay Fade out delay in milliseconds
contentType Can be 'html' or 'text'

Sample HTML

                
<div class = "col-lg-12 my-5 wdpk-typing-text">
        <div id = "typed-strings">
            <h2>WoodPecker lets you add <strong>Typing Text</strong> easily.</h2>
            <h2>It's Very <em>intelligent</em> and types out only the difference in the strings.</h2>
            <h2>See the demo in next typed string.</h2>
            <h2>Typing text is <mark>Simple To Implement</mark></h2>
            <h2>Typing text is <mark>SEO Friendly</mark></h2>
            <h2>Typing text is <mark>Intelligent</mark></h2>
        </div>
        <span id = "wdpk-type-text"></span>
</div>

Sample Javascript

                
jQuery(document).ready(function ()
{
    if (jQuery("#wdpk-type-text").length !== 0) // Laods the JS only of the element exists
    {
        let obj = {
            selector: '#wdpk-type-text', // Selector for trigger (must be a valid css selector)
            smartBackspace: true, // Default value
            stringsElement: '#typed-strings', // Div that contains the text to be typed
            typeSpeed: 50, // Typing Speed higher the slower
            startDelay: 1000, // Delay before the typing starts
            backSpeed: 50, // Speed for backspace the higher the slower
            backDelay: 3000, // Delay after which the backsspace starts
            fadeOut: false, //Fade out instead of backspace
            fadeOutClass: 'class-name', //css class for fade animation
            fadeOutDelay: false,  //Fade out delay in milliseconds
            contentType: 'html',
        };
        require(["app/shortcodes/wdpkTypeText"], function (e)
        {
            e.publicCall(obj);
        });
    }
});

Video Player

Using WoodPecker® you can fully customise the look behaviour of any video player. So be it HTML5 or YouTube we've covered them for you.

Key Possible Values
selectorID The ID of the video element, eexample - 'html5-player',
captions an object for captions. See the js source code below for details.

Sample HTML for HTML5 Video

                
<video class = "wdpk-video" poster = "/assets/images/video-poster.jpg" id = "html5-player"
       playsinline controls>
    <source src = "/assets/video/video.mp4" type = "video/mp4" />
    <!-- Captions are optional -->
    <track kind = "captions" label = "English captions" src = "/assets/video/video-captions.vtt"
           srclang = "en"
           default />
</video>

Sample HTML for YouTube Video

                
<div class = "wdpk-plyr-video-embed" id = "wdpk-youtube-player">
    <iframe
            src = "https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
            allowfullscreen
            allowtransparency
            allow = "autoplay"
    ></iframe>
</div>

Sample Javascript

                
jQuery(document).ready(function ()
{
    if (jQuery(".wdpk-video").length !== 0)
    {
        let obj = {
            selectorID: 'html5-player',
            captions: {
                active: true,
                language: 'en',
                update: false
            },
        };
        require(["app/shortcodes/wdpkPlayer"], function (e)
        {
            e.publicCall(obj);
        });
    }
});