https://app.fluidtechs.com/js/admin/js/main.js

1/*
2 *  Document   : main.js
3 *  Author     : pixelcave
4 *  Description: Custom scripts and plugin initializations
5 */
6
7var webApp = function() {
8
9    /* Cache variables of some often used jquery objects */
10    var body    = $('body');
11    var header  = $('header');
12
13    // Used for sidebar functionality, check handleSidebars()
14    var sLToggle = $('#sidebar-left-toggle');
15    var sRToggle = $('#sidebar-right-toggle');
16    var sLScroll = $('.sidebar-left-scroll');
17    var sRScroll = $('.sidebar-right-scroll');
18
19    // 50 is the height of .sidebar-search and .user-info in pixels
20    var sScrollHeight = $(window).height() - 51;
21
22    /* Initialization UI Code */
23    var uiInit = function() {
24
25        // Add the correct copyright year at the footer
26        var yearCopy = $('#year-copy'), d = new Date();
27
28        if (d.getFullYear() === 2013) {
29            yearCopy.html('2013');
30        } else {
31            yearCopy.html('2013-' + d.getFullYear());
32        }
33
34        // Add opacity to the header when scrolling (you can comment/remove the following line if you prefer a solid header)
35        $(window).scroll(function() { if ($(this).scrollTop() > 60) { header.addClass(''); } else { header.removeClass(''); } });
36
37        // Initialize tabs
38        $('[data-toggle="tabs"] a, .enable-tabs a').click(function(e){ e.preventDefault(); $(this).tab('show'); });
39
40        // Initialize Tooltips
41        $('[data-toggle="tooltip"], .enable-tooltip').tooltip({container: 'body', animation: false});
42
43        // Initialize Popovers
44        $('[data-toggle="popover"], .enable-popover').popover({container: 'body', animation: false});
45
46        // Initialize single image lightbox
47        $('[data-toggle="lightbox-image"]').magnificPopup({type: 'image', image: {titleSrc: 'title'}});
48
49        // Initialize image gallery lightbox
50        $('[data-toggle="lightbox-gallery"]').magnificPopup({
51            delegate: 'a.gallery-link',
52            type: 'image',
53            gallery: {
54                enabled: true,
55                navigateByImgClick: true,
56                arrowMarkup: '<button type="button" class="mfp-arrow mfp-arrow-%dir%" title="%title%"></button>',
57                tPrev: 'Previous',
58                tNext: 'Next',
59                tCounter: '<span class="mfp-counter">%curr% of %total%</span>'
60            },
61            image: {titleSrc: 'title'}
62        });
63
64        // Initialize Elastic
65        $('textarea.textarea-elastic').elastic();
66
67        // Initialize Editor
68        $('.textarea-editor').wysihtml5();
69
70        // Initialize Chosen
71        $('.select-chosen').chosen();
72
73        // Initialize Datepicker
74        $('.input-datepicker, .input-daterange').datepicker();
75
76        // Initialize Timepicker
77        $('.input-timepicker').timepicker({minuteStep: 1,showSeconds: true,showMeridian: true});
78        $('.input-timepicker24').timepicker({minuteStep: 1,showSeconds: true,showMeridian: false});
79
80        /* Easy Pie Chart */
81        $('.pie-chart').easyPieChart({
82            barColor: '#f39c12',
83            trackColor: '#eeeeee',
84            scaleColor: false,
85            lineWidth: 3,
86            size: $(this).data('size'),
87            animate: 1200
88        });
89    };
90
91    /* Sidebar Navigation functionality */
92    var handleNav = function() {
93
94        // Animation Speed, change the values for different results
95        var upSpeed = 250;
96        var downSpeed = 300;
97
98        // Get all vital links
99        var allTopLinks = $('.sidebar-nav a');
100        var menuLinks = $('.menu-link');
101
102        // Initialize number idicators on menu links
103        menuLinks.each(function(n, e){ $(e).append('<span>' + $(e).next('ul').find('a').not('.submenu-link').length + '</span>'); });
104
105        // Icon animation on hover
106        allTopLinks
107            .mouseenter(function(){ $('i', this).addClass('animation-bigEntrance'); })
108            .mouseleave(function(){ $('i', this).removeClass('animation-bigEntrance'); });
109
110        // Primary Accordion functionality
111        menuLinks.click(function() {
112            var link = $(this);
113
114            if (link.parent().hasClass('active') !== true) {
115                if (link.hasClass('open')) {
116                    link.removeClass('open').next().slideUp(upSpeed);
117                }
118                else {
119                    $('.menu-link.open').removeClass('open').next().slideUp(upSpeed);
120                    link.addClass('open').next().slideDown(downSpeed);
121                }
122            }
123
124            return false;

125        });
126    };
127
128    /* Handle Sidebars, show/hide sidebars */
129    var handleSidebars = function(mode) {
130
131        if (mode === 'init') {
132
133            // Init Sidebar Scrolling
134            sLScroll.add(sRScroll).slimScroll({ height: sScrollHeight, color: '#fff', size: '3px', touchScrollStep: 750 });
135            $(window).resize(function(){ handleSidebars('resize-scroll'); });
136            $(window).bind('orientationchange', handleSidebars('resize-scroll'));
137
138            // Init Left Sidebar
139            sLToggle.click(function(){ handleSidebars('toggle-left'); });
140            $('#sidebar-left')
141                .mouseenter(function(){ handleSidebars('open-left'); })
142                .mouseleave(function(){ handleSidebars('close-left'); });
143
144            // Init Right Sidebar
145            sRToggle.click(function(){ handleSidebars('toggle-right'); });
146            $('#sidebar-right').mouseleave(function(){ handleSidebars('close-right'); });
147
148            // Init Swipe Functionality
149            $('.sidebars-swipe').swipe({
150                swipeRight: function(event, direction, distance, duration, fingerCount) {
151                    if (body.hasClass('sidebar-right-open')) {
152                        handleSidebars('close-right');
153                    } else {
154                        handleSidebars('open-left');
155                    }
156                },
157                swipeLeft: function(event, direction, distance, duration, fingerCount) {
158                    if (body.hasClass('sidebar-left-open')) {
159                        handleSidebars('close-left');
160                    } else {
161                        handleSidebars('open-right');
162                    }
163                }
164            });
165        }
166        else if (mode === 'resize-scroll') { // Resize Scroll Height
167
168            // 50 is the height of .sidebar-search and .user-info in pixels
169            sLScroll.add(sRScroll).css('height', $(window).height() - 51);
170        }
171        else if (mode === 'open-left') { // Open Left Sidebar
172
173            body.removeClass('sidebar-right-open').addClass('sidebar-left-open');
174
175            sLToggle.parent('li').addClass('active');
176            sRToggle.parent('li').removeClass('active');
177        }
178        else if (mode === 'close-left') { // Close Left Sidebar
179
180            body.removeClass('sidebar-left-open');
181
182            sLToggle.parent('li').removeClass('active');
183        }
184        else if (mode === 'toggle-left') { // Toggle Left Sidebar
185
186            body.removeClass('sidebar-right-open').toggleClass('sidebar-left-open');
187
188            sLToggle.parent('li').toggleClass('active');
189            sRToggle.parent('li').removeClass('active');
190        }
191        else if (mode === 'open-right') { // Open Right Sidebar
192
193            body.removeClass('sidebar-left-open').addClass('sidebar-right-open');
194
195            sRToggle.parent('li').addClass('active');
196            sLToggle.parent('li').removeClass('active');
197        }
198        else if (mode === 'close-right') { // Close Right Sidebar
199
200            body.removeClass('sidebar-right-open');
201
202            sRToggle.parent('li').removeClass('active');
203        }
204        else if (mode === 'toggle-right') { // Toggle Left Sidebar
205
206            body.removeClass('sidebar-left-open').toggleClass('sidebar-right-open');
207
208            sRToggle.parent('li').toggleClass('active');
209            sLToggle.parent('li').removeClass('active');
210        }
211    };
212
213    /* Scroll to top functionality */
214    var scrollToTop = function() {
215
216        // Get link
217        var link = $('#to-top');
218
219        $(window).scroll(function() {
220            // If the user scrolled a bit (150 pixels) show the link
221            if ($(this).scrollTop() > 150) {
222                link.fadeIn(100);
223            } else {
224                link.fadeOut(100);
225            }
226        });
227
228        // On click get to top
229        link.click(function() {
230            $('html, body').animate({scrollTop: 0}, 200);
231            return false;
232        });
233    };
234
235    /* Template Options, change features functionality */
236    var templateOptions = function() {
237
238        /*
239         * Color Themes
240         */
241        var colorList = $('.theme-colors');
242        var themeLink = $('#theme-link');
243        var theme;
244
245        if (themeLink.length) {
246            theme = themeLink.attr('href');
247
248            $('li', colorList).removeClass('active');
249            $('a[data-theme="' + theme + '"]', colorList).parent('li').addClass('active');
250        }
251
252        $('a', colorList).click(function(e){
253            // Get theme name
254            theme = $(this).data('theme');
255
256            $('li', colorList).removeClass('active');
257            $(this).parent('li').addClass('active');
258
259            if (theme === 'default') {
260                if (themeLink.length) {
261                    themeLink.remove();
262                    themeLink = $('#theme-link');
263                }
264            } else {
265                if (themeLink.length) {
266                    themeLink.attr('href', theme);
267                } else {
268                    $('link[href="css/themes.css"]').before('<link id="theme-link" rel="stylesheet" href="' + theme + '">');
269                    themeLink = $('#theme-link');
270                }
271            }
272        });
273
274        // Prevent template options dropdown from closing on clicking options
275        $('.dropdown-custom a').click(function(e){ e.stopPropagation(); });
276
277        /* Full width page option */
278        var pageCon         = $('#page-container');
279        var optFwDisable    = $('#options-fw-disable');
280        var optFwEnable     = $('#options-fw-enable');
281
282        if (pageCon.hasClass('full-width')) {
283            optFwEnable.addClass('active');
284        } else {
285            optFwDisable.addClass('active');
286        }
287
288        optFwDisable.click(function() {
289            pageCon.removeClass('full-width');
290            $(this).addClass('active');
291            optFwEnable.removeClass('active');
292        });
293
294        optFwEnable.click(function() {
295            pageCon.addClass('full-width');
296            $(this).addClass('active');
297            optFwDisable.removeClass('active');
298        });
299
300        /* Pin Sidebars Option */
301        var optPinLeft      = $('#options-pin-left');
302        var optPinRight     = $('#options-pin-right');
303
304        if (body.hasClass('sidebar-left-pinned')) {
305            optPinLeft.addClass('active');
306        }
307
308        if (body.hasClass('sidebar-right-pinned')) {
309            optPinRight.addClass('active');
310        }
311
312        optPinLeft.click(function() {
313            if ($(this).hasClass('active')) {
314                body.removeClass('sidebar-left-pinned');
315                $(this).removeClass('active');
316            }
317            else
318            {
319                body.addClass('sidebar-left-pinned');
320                $(this).addClass('active');
321            }
322        });
323
324        optPinRight.click(function() {
325            if ($(this).hasClass('active')) {
326                body.removeClass('sidebar-right-pinned');
327                $(this).removeClass('active');
328            }
329            else
330            {
331                body.addClass('sidebar-right-pinned');
332                $(this).addClass('active');
333            }
334        });
335
336        /* Header options */
337        var optHeaderDefault = $('#options-header-default');
338        var optHeaderInverse = $('#options-header-inverse');
339        var optHeaderTop = $('#options-header-top');
340        var optHeaderBottom = $('#options-header-bottom');
341
342        if (header.hasClass('navbar-default')) {
343            optHeaderDefault.addClass('active');
344        } else {
345            optHeaderInverse.addClass('active');
346        }
347
348        if (header.hasClass('navbar-fixed-top')) {
349            optHeaderTop.addClass('active');
350        } else {
351            optHeaderBottom.addClass('active');
352        }
353
354        optHeaderDefault.click(function() {
355            header.removeClass('navbar-inverse').addClass('navbar-default');
356            $(this).addClass('active');
357            optHeaderInverse.removeClass('active');
358        });
359
360        optHeaderInverse.click(function() {
361            header.removeClass('navbar-default').addClass('navbar-inverse');
362            $(this).addClass('active');
363            optHeaderDefault.removeClass('active');
364        });
365
366        optHeaderTop.click(function() {
367            body.removeClass('header-fixed-bottom').addClass('header-fixed-top');
368            header.removeClass('navbar-fixed-bottom').addClass('navbar-fixed-top');
369            $(this).addClass('active');
370            optHeaderBottom.removeClass('active');
371        });
372
373        optHeaderBottom.click(function() {
374            body.removeClass('header-fixed-top').addClass('header-fixed-bottom');
375            header.removeClass('navbar-fixed-top').addClass('navbar-fixed-bottom');
376            $(this).addClass('active');
377            optHeaderTop.removeClass('active');
378        });
379
380        /* Left sidebar mouse hover option */
381        var leftSidebar = $('#sidebar-left');
382        var optHoverEnable = $('#options-hover-enable');
383        var optHoverDisable = $('#options-hover-disable');
384
385        if (leftSidebar.hasClass('enable-hover')) {
386            optHoverEnable.addClass('active');
387        } else {
388            optHoverDisable.addClass('active');
389        }
390
391        optHoverEnable.click(function() {
392            leftSidebar.addClass('enable-hover');
393            $(this).addClass('active');
394            optHoverDisable.removeClass('active');
395        });
396
397        optHoverDisable.click(function() {
398            leftSidebar.removeClass('enable-hover');
399            $(this).addClass('active');
400            optHoverEnable.removeClass('active');
401        });
402
403        /* Effect when sidebars open options */
404        var fxCon    = $('#fx-container');
405        var optEffects  = $('#option-effects');
406
407        $("button[data-fx='" + fxCon.attr('class') + "']", optEffects).addClass('active');
408
409        $('button', optEffects).click(function() {
410            fxCon.removeClass().addClass($(this).data('fx'));
411            $('button', optEffects).removeClass('active');
412            $(this).addClass('active');
413        });
414    };
415
416    /* Input placeholder for older browsers */
417    var oldiePlaceholder = function() {
418
419        // Check if placeholder feature is supported by the browser
420        if (!Modernizr.input.placeholder) {
421            // If not, add the functionality
422            $('[placeholder]').focus(function() {
423                var input = $(this);
424                if (input.val() === input.attr('placeholder')) {
425                    input.val('');
426                    input.removeClass('ph');
427                }
428            }).blur(function() {
429                var input = $(this);
430                if (input.val() === '' || input.val() === input.attr('placeholder')) {
431                    input.addClass('ph');
432                    input.val(input.attr('placeholder'));
433                }
434            }).blur().parents('form').submit(function() {
435                $(this).find('[placeholder]').each(function() {
436                    var input = $(this);
437                    if (input.val() === input.attr('placeholder')) {
438                        input.val('');
439                    }
440                });
441            });
442        }
443    };
444
445    /* Datatables Bootstrap integration */
446    var dtIntegration = function() {
447
448        // Set the defaults for DataTables initialization
449        $.extend(true, $.fn.dataTable.defaults, {
450            "sDom": "<'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-5'i><'col-md-7'p>>",
451            "sPaginationType": "bootstrap",
452            "oLanguage": {
453                "sLengthMenu": "_MENU_",
454                "sSearch": "<div class=\"input-group\">_INPUT_<span class=\"input-group-addon\"><i class=\"icon-search\"></i></span></div>",
455                "sInfo": "<strong>_START_</strong>-<strong>_END_</strong> of <strong>_TOTAL_</strong>",
456                "oPaginate": {
457                    "sPrevious": "",
458                    "sNext": ""
459                }
460            }
461        });
462
463        // Default class modification
464        $.extend($.fn.dataTableExt.oStdClasses, {
465            "sWrapper": "dataTables_wrapper form-inline"
466        });
467
468        // API method to get paging information

469        $.fn.dataTableExt.oApi.fnPagingInfo = function(oSettings)
470        {
471            return {
472                "iStart": oSettings._iDisplayStart,
473                "iEnd": oSettings.fnDisplayEnd(),
474                "iLength": oSettings._iDisplayLength,
475                "iTotal": oSettings.fnRecordsTotal(),
476                "iFilteredTotal": oSettings.fnRecordsDisplay(),
477                "iPage": Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
478                "iTotalPages": Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
479            };
480        };
481
482        // Bootstrap style pagination control
483        $.extend($.fn.dataTableExt.oPagination, {
484            "bootstrap": {
485                "fnInit": function(oSettings, nPaging, fnDraw) {
486                    var oLang = oSettings.oLanguage.oPaginate;
487                    var fnClickHandler = function(e) {
488                        e.preventDefault();
489                        if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
490                            fnDraw(oSettings);
491                        }
492                    };
493
494                    $(nPaging).append(
495                        '<ul class="pagination pagination-sm remove-margin">' +
496                        '<li class="prev disabled"><a href="javascript:void(0)"><i class="icon-chevron-left"></i> ' + oLang.sPrevious + '</a></li>' +
497                        '<li class="next disabled"><a href="javascript:void(0)">' + oLang.sNext + ' <i class="icon-chevron-right"></i></a></li>' +
498                        '</ul>'
499                        );
500                    var els = $('a', nPaging);
501                    $(els[0]).bind('click.DT', {action: "previous"}, fnClickHandler);
502                    $(els[1]).bind('click.DT', {action: "next"}, fnClickHandler);
503                },
504                "fnUpdate": function(oSettings, fnDraw) {
505                    var iListLength = 5;
506                    var oPaging = oSettings.oInstance.fnPagingInfo();
507                    var an = oSettings.aanFeatures.p;
508                    var i, j, sClass, iStart, iEnd, iHalf = Math.floor(iListLength / 2);
509
510                    if (oPaging.iTotalPages < iListLength) {
511                        iStart = 1;
512                        iEnd = oPaging.iTotalPages;
513                    }
514                    else if (oPaging.iPage <= iHalf) {
515                        iStart = 1;
516                        iEnd = iListLength;
517                    } else if (oPaging.iPage >= (oPaging.iTotalPages - iHalf)) {
518                        iStart = oPaging.iTotalPages - iListLength + 1;
519                        iEnd = oPaging.iTotalPages;
520                    } else {
521                        iStart = oPaging.iPage - iHalf + 1;
522                        iEnd = iStart + iListLength - 1;
523                    }
524
525                    for (i = 0, iLen = an.length; i < iLen; i++) {
526                        // Remove the middle elements
527                        $('li:gt(0)', an[i]).filter(':not(:last)').remove();
528
529                        // Add the new list items and their event handlers
530                        for (j = iStart; j <= iEnd; j++) {
531                            sClass = (j === oPaging.iPage + 1) ? 'class="active"' : '';
532                            $('<li ' + sClass + '><a href="javascript:void(0)">' + j + '</a></li>')
533                                .insertBefore($('li:last', an[i])[0])
534                                .bind('click', function(e) {
535                                e.preventDefault();
536                                oSettings._iDisplayStart = (parseInt($('a', this).text(), 10) - 1) * oPaging.iLength;
537                                fnDraw(oSettings);
538                            });
539                        }
540
541                        // Add / remove disabled classes from the static elements
542                        if (oPaging.iPage === 0) {
543                            $('li:first', an[i]).addClass('disabled');
544                        } else {
545                            $('li:first', an[i]).removeClass('disabled');
546                        }
547
548                        if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) {
549                            $('li:last', an[i]).addClass('disabled');
550                        } else {
551                            $('li:last', an[i]).removeClass('disabled');
552                        }
553                    }
554                }
555            }
556        });
557    };
558
559    return {
560        init: function() {

561            uiInit(); // Initialize UI Code
562            handleSidebars('init'); // Initialize Sidebars Functionality
563            handleNav(); // Sidebar Navigation functionality
564            scrollToTop(); // Scroll to top functionality
565            templateOptions(); // Template Options, change features
566            oldiePlaceholder(); // Make input placeholder work in older browsers
567        },
568        sidebars: function(mode) {
569            handleSidebars(mode); // Handle Sidebars Functionality
570        },
571        datatables: function() {
572            dtIntegration(); // Datatables Bootstrap integration
573        }
574    };
575}();
576
577/* Initialize WebApp when page loads */
578$(function() { webApp.init(); });