demo-js

if(! ('ace' in window) ) window['ace'] = {}
jQuery(function($) {
    //at some places we try to use 'tap' event instead of 'click' if jquery mobile plugin is available
    window['ace'].clickOrTap = $.fn.tap ? "tap" : "click";
});

jQuery(function($) {

    ace.sidebarHandler(jQuery);

    ace.general(jQuery);

    ace.formHandler(jQuery);

    ace.listHandler(jQuery);

    ace.widget_boxes(jQuery);

    $('.wysiwyg-ckeditor').ckeditor({
        language: 'en-gb',
        filebrowserBrowseUrl : URL.base+'/packages/ultimate/valence/assets/elfinder/elfinder.html',
        // filebrowserImageBrowseUrl: '/admin/media/browse/images',
        // filebrowserImageUploadUrl: '/admin/media/upload/image'
    });
});

ace.listHandler = function() {

    if ($('.table-ajax').length) {

        $('.table-filter').each(function() {

            var searchTimer;
            var searchXhr;
            var $listFilter = $(this);
            var $listTarget = $('#'+$('.table-filter').data('list-id'));

            var filterFunction = function(e) {

                if ($(this).parent().hasClass('chosen-search'))
                    return;

                clearTimeout(searchTimer);
                valLength = $(this).val().length;

                if ('change' == e.type)
                    timeout = 0;
                else
                    timeout = 700;

                if (searchXhr)
                    searchXhr.abort();

                var params = $listFilter.serialize();

                searchTimer = setTimeout(function(){

                    ace.addLoader($listTarget);

                    searchXhr = $.get($listTarget.data('load-url'), params, function(data) {

                        if (data.error) {

                            ace.errorLoader(data.error);

                        } else {

                            $listTarget.html(data.content);

                            if (valLength <= 2) {
                                $listFilter.data('filtered', false);
                                $('.clear-filters', $listFilter).addClass('hide');
                            } else {
                                $listFilter.data('filtered', true);
                                $('.clear-filters', $listFilter).removeClass('hide');
                            }

                            ace.removeLoader();

                        }

                    });

                }, timeout);

                return false;

            }
            $listFilter.on('input keyup paste', 'input[type="text"]:not(".no-search")', filterFunction);
            $listFilter.on('change', 'select', filterFunction);
            $listFilter.on('submit', filterFunction);
            $listFilter.on('ajax_reload', filterFunction);

        });

        $('.table-ajax').on('click', '.pagination a', function(e){

            e.preventDefault();

            ace.addLoader($('.table-ajax'));

            $.get($(this).attr('href'), function(data) {

                if (data.hasOwnProperty('error') && data.error) {

                    ace.errorLoader(data.error);

                } else if (data.hasOwnProperty('content') && data.content) {

                    $('.table-ajax').html(data.content);

                    ace.removeLoader();

                }

            });

        });

    }

}

ace.formHandler = function($) {

    // Multi-checkbox
    $(document).on('click', 'table tr .check-all, table tr .check-row', function(){
        if ($(this).hasClass('check-all')) {
            var that = this;
            $(this).closest('table').find('tr > td:first-child .check-row')
                .each(function(){
                    this.checked = that.checked;
                    $(this).closest('tr').toggleClass('selected');
                });
        } else {
            $(this).closest('tr').toggleClass('selected');
        }
    });

    // Resourceful links
    $(document).on("click", "[data-method]", function(e) {
        e.preventDefault();

        var $this    = $(this);
        var title    = $(this).data('dialog-title');
        var text     = $(this).data('dialog-text');
        var url      = $(this).attr('href');
        var method   = $(this).data('method');
        var ajax     = $(this).data('ajax') ? 1 : 0;

        // Ajax request
        var ajaxCallback = function () {

            $.ajax({
                url: url,
                type: method,
                success: function(data, textStatus, jqXHR) {
                    if (data.hasOwnProperty('error') && data.error) {
                        $.gritter.add({
                            title: 'Error',
                            text: data.hasOwnProperty('message') ? data.message : 'An error occured.',
                            class_name: 'gritter-error'
                        });
                    } else {

                        if (method == 'DELETE') {

                            $this.closest('tr').addClass('removed');
                        }

                        $.gritter.add({
                            title: 'Success',
                            text: data.hasOwnProperty('message') ? data.message : 'Operation successful.',
                            class_name: 'gritter-success'
                        });
                    }
                }
            });
        }

        // Form request
        var formCallback = function () {

            $this.append(function(){
                var methodForm = "\n"
                methodForm += "<form action='"+url+"' method='POST' style='display:none'>\n"
                methodForm += " <input type='hidden' name='_method' value='"+method+"'>\n"

                if ($(this).data('token')) {
                    methodForm +="<input type='hidden' name='_token' value='"+$(this).data('token')+"'>\n"
                }

                methodForm += "</form>\n"
                return methodForm
            })
                .removeAttr('href')
                .find("form")
                .submit();

        }

        // Show dialog
        ace.showDialog(title, text, (ajax ? ajaxCallback : formCallback));
    });

    /* Character limited */

    $('.limited').inputlimiter({
        remText: '%n character%s remaining | ',
        limitText: 'max allowed : %n.'
    });

    /* Slugify */

    $('body').on('blur', '.slugify', function() {

        var toSlug    = $(this).val();
        var $target   = $($(this).data('slug-target'));
        var separator = $(this).data('slug-separator');

        // Check slug value doesn't already exist
        if (!$target.val().length && toSlug.length > 1) {

            // Disable slug field
            $target.attr('disabled', true);

            $.ajax({
                url: URL.base + '/admin/ajax/slugify',
                type: 'GET',
                data: {string: toSlug, separator: separator},
                success: function(data, textStatus, jqXHR) {
                    $target.removeAttr('disabled').val(data);

                    $target.trigger('blur');
                }
            });

        }

    });


    /* BS Typeahead */

    var typeaheadTimer;
    var typeaheadXhr;

    $(':input.autocomplete').typeahead({
        source: function(query, process) {

            clearTimeout(typeaheadTimer);

            if (typeaheadXhr)
                typeaheadXhr.abort();

            var $this = this;

            // Set delay to allow for typing speed
            typeaheadTimer = setTimeout(function(){

                objects = [];
                map = {};

                typeaheadXhr = $.get($this.$element.data('ajax'), { query: query }, function (data) {

                    if (!data.length)
                        return;

                    $.each(data, function(i, object) {
                        map[object.label] = object;
                        objects.push(object.label);
                    });

                    process(objects);
                });

            }, 600);
        },
        updater: function(item) {
            $(this.$element.data('target')).val(map[item].id);
            this.$element.after('<h5>'+map[item].label+'<br><br><a href="#" class="btn btn-default btn-xs typeahead-cancel">Change</a></h5>');
            this.$element.hide();
            this.$element.closest('.table-filter').trigger('ajax_reload');

            return item;
        }
    }).click(function(){
        $(this).trigger('keyup');
    });

    $(document).on('click', '.typeahead-cancel', function(e){
        e.preventDefault();

        parent = $(this).parent().prev();

        $(this).parent().remove();

        parent.show().val('');

        $(parent.data('target')).val('');
    });

    $(':input.autocomplete').each(function(){
        if ($(this).val().length && $($(this).data('target')).val().length) {
            $(this).hide().after('<h5>'+$(this).val()+'<br><br><a href="#" class="btn btn-default btn-xs typeahead-cancel">Change</a></h5>');
        }
    })
}

ace.sidebarHandler = function($) {

    // Open active menus
    $('#sidebar').find('.nav .active').parents('li').addClass('active open');

    $('#menu-toggler').on(ace.clickOrTap, function() {
        $('#sidebar').toggleClass('display');
        $(this).toggleClass('display');
        return false;
    });

    // Collapse
    var collapsed = $('#sidebar').hasClass('menu-min');
    $('#sidebar-collapse').on('click', function(){

        collapsed = $('#sidebar').hasClass('menu-min');

        var $sidebar = $('#sidebar');
        var $icon = $('#sidebar-collapse').find('[class*="fa-"]');
        var icon1 = $icon.data('icon1');//the icon for expanded state
        var icon2 = $icon.data('icon2');//the icon for collapsed state

        if(!collapsed) {
            $sidebar.addClass('menu-min');
            $icon.removeClass(icon1);
            $icon.addClass(icon2);
        } else {
            $sidebar.removeClass('menu-min');
            $icon.removeClass(icon2);
            $icon.addClass(icon1);
        }

    });

    var touch = "ontouchend" in document;
    // Opening submenu
    $('.nav-list').on(ace.clickOrTap, function(e){

        var link_element = $(e.target).closest('a');
        if(!link_element || link_element.length == 0) return;

        $minimized = $('#sidebar').hasClass('menu-min');

        if(! link_element.hasClass('dropdown-toggle') ) {

            if($minimized && ace.clickOrTap == "tap" &&
                link_element.get(0).parentNode.parentNode == this)
            {
                var text = link_element.find('.menu-text').get(0);
                if( e.target != text && !$.contains(text , e.target) )
                    return false;
            }

            return;
        }

        var sub = link_element.next().get(0);

        // If we are opening this submenu, close all other submenus except the ".active" one
        if(! $(sub).is(':visible') ) {
            var parent_ul = $(sub.parentNode).closest('ul');
            if($minimized && parent_ul.hasClass('nav-list')) return;

            parent_ul.find('> .open > .submenu').each(function(){
                // Close all other open submenus except for the active one
                if(this != sub && !$(this.parentNode).hasClass('active')) {
                    $(this).slideUp(200).parent().removeClass('open');
                }
            });
        }

        if($minimized && $(sub.parentNode.parentNode).hasClass('nav-list')) return false;

        $(sub).slideToggle(200).parent().toggleClass('open');
        return false;
    })
}



ace.general = function() {

    // Chosen select boxes
    $(".chosen-select").chosen();

    // BS Date Picker
    $('.date-picker').datepicker({autoclose:true}).prev().on(ace.clickOrTap, function(){
        $(this).next().focus();
    });

    /* Nestable/sortable lists */

    var sortableAjax = function(e){

        // Get Ajax URL (if any)
        var sortUrl = $(this).data('load-url');

        // Get sorted IDs
        var sortedIds = $(this).nestable('serialize');

        // No changes
        if (JSON.stringify($(this).data('sorted')) == JSON.stringify(sortedIds))
            return false;

        // Store sorted IDs as data (to allow them to be used elsewhere)
        $(this).data('sorted', sortedIds);

        // If no URL set, exit
        if (!sortUrl)
            return false;

        ace.addLoader($(this));

        // Perform Ajax request
        $.ajax({
            url: URL.base + sortUrl,
            data: { sorted_ids: sortedIds },
            method: 'POST',
            datatype: 'json',
            success: function(data) {

                ace.removeLoader();

                if (data.hasOwnProperty('error') && data.error) {
                    $.gritter.add({
                        title: 'Error',
                        text: data.hasOwnProperty('message') ? data.message : 'An error occured.',
                        class_name: 'gritter-error'
                    });
                } else {
                    $.gritter.add({
                        title: 'Success',
                        text: data.hasOwnProperty('message') ? data.message : 'Operation successful.',
                        class_name: 'gritter-success'
                    });
                }

            }
        });
    }

    // Sortables / Nestables
    $('.nestable, .sortable').each(function(index, ele) {

        var maxDepth = 1;

        // Nestable list
        if ($(ele).hasClass('nestable')) {
            maxDepth = $(ele).data('max-depth') ? $(ele).data('max-depth') : 3;
        }

        $(ele).nestable({
            maxDepth: maxDepth
        }).on('change', sortableAjax);

        // Save default data
        $(ele).data('sorted', $(ele).nestable('serialize'));

    });

    // Collapse functionality for lists
    $('.dd-list .collapse').on('show.bs.collapse', function () {
        $(this).closest('.dd-list').find('.in').collapse('hide');
    })


    // BS Time Picker
    $('.time-picker').timepicker({
        minuteStep: 5,
        showMeridian: false,
        disableFocus: true
    }).prev().on(ace.clickOrTap, function(){
        $(this).next().focus();
    });

    // Animated icons
    $('.valence-nav [class*="fa-animated-"]').closest('a').on('click', function(){
        var icon   = $(this).find('[class*="fa-animated-"]').eq(0);
        var $match = icon.attr('class').match(/fa\-animated\-([\d\w]+)/);
        icon.removeClass($match[0]);
        $(this).off('click');
    });

    // Go back buttons
    $(document).on('click', '.go-back', function(e){
        e.preventDefault();

        window.history.go(-1);
    })

    // Toggle show buttons
    $(document).on('click', '.toggle-show', function(e){
        e.preventDefault();

        $($(this).data('target')).toggleClass('hide');
    })

    // Tooltips
    $('[data-rel="tooltip"]').tooltip();
    $('.nav-list .badge[title],.nav-list .label[title]').tooltip({'placement':'right'});

    // Scroll to top
    $('#btn-scroll-up').on(ace.clickOrTap, function(){
        var duration = Math.min(400, Math.max(100, parseInt($('html').scrollTop() / 3)));
        $('html,body').animate({scrollTop: 0}, duration);
        return false;
    });

    // Confirmation dialog
    $(document).on('click', '.dialog-confirm', function(e) {
        e.preventDefault();

        var title    = $(this).data('dialog-title');
        var text     = $(this).data('dialog-text');
        var callback = $(this).data('dialog-callback') ? $(this).data('dialog-callback') : function () { window.location = url }
        var url      = $(this).attr('href');

        ace.showDialog(title, text, callback, this);
    });

    //override dialog's title function to allow for HTML titles
    $.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
        _title: function(title) {
            var $title = this.options.title || '&nbsp;'
            if( ("title_html" in this.options) && this.options.title_html == true )
                title.html($title);
            else title.text($title);
        }
    }));

}

ace.showDialog = function(title, text, callback, original) {

    title = title ? title : 'Confirmation Required';
    callback = callback ? callback : null;
    $original = original ? $(original) : null;

    $('#dialogConfirm .text').html(text);

    return $("#dialogConfirm").removeClass('hide').dialog({
        resizable: false,
        modal: true,
        title: "<div class='widget-header'><h4 class='smaller'><i class='fa fa-warning red'></i> " + title + "</h4></div>",
        title_html: true,
        buttons: [
            {
                html: "<i class='fa fa-check bigger-110'></i>&nbsp; Confirm",
                "class" : "btn btn-primary btn-xs",
                click: function() {
                    $( this ).dialog( "close" );

                    if (typeof callback == "function")
                        callback($original);
                    else if (callback)
                        window[callback]($original);

                    return true;
                }
            }
            ,
            {
                html: "<i class='fa fa-times bigger-110'></i>&nbsp; Cancel",
                "class" : "btn btn-xs",
                click: function() {
                    $( this ).dialog( "close" );

                    return;
                }
            }
        ]
    });

}

ace.addLoader = function($this, id, msg) {

    if (typeof msg === "undefined") {
        msg = ($this.data('load-msg')) ? $this.data('load-msg') : '';
    }
    if (msg) {
        msg = '<span>'+msg+'</span>';
    }
    id = (typeof id === "undefined") ? "loader" : id;

    ace.removeLoader(id);

    $this.css({position: 'relative', 'min-height': '130px'}).prepend('<div id="'+id+'" class="load-overlay"><div class="load"></div>'+msg+'</div>').find('#'+id).fadeIn(200);
}

ace.removeLoader = function(id) {

    id = (typeof id === "undefined") ? "loader" : id;

    $('#'+id).fadeOut(200, function() {
        $(this).parent().css({'min-height': '0'});
        $(this).remove();
    });
}

ace.errorLoader = function(msg, id) {

    msg = (typeof msg === "undefined") ? "Error" : msg;
    id = (typeof id === "undefined") ? "loader" : id;

    msgContent = msg+'<a class="load-close" href="#"><i class="icon-remove-sign"></i> close</a>';
    msgBox = $('#'+id).find('span');

    if (msgBox.length)
        msgBox.addClass('error').html(msgContent);
    else
        $('#'+id).find('.load').after('<span>'+msgContent+'</span>');
}

ace.widget_boxes = function($) {
    $(document).on('hide.bs.collapse show.bs.collapse', function (ev) {
        var hidden_id = ev.target.getAttribute('id')
        $('[href*="#'+ hidden_id+'"]').find('[class*="fa-"]').each(function(){
            var $icon = $(this)

            var $match
            var $icon_down = null
            var $icon_up = null
            if( ($icon_down = $icon.attr('data-icon-show')) ) {
                $icon_up = $icon.attr('data-icon-hide')
            }
            else if( $match = $icon.attr('class').match(/fa\-(.*)\-(up|down)/) ) {
                $icon_down = 'fa-'+$match[1]+'-down'
                $icon_up = 'fa-'+$match[1]+'-up'
            }

            if($icon_down) {
                if(ev.type == 'show') $icon.removeClass($icon_down).addClass($icon_up)
                else $icon.removeClass($icon_up).addClass($icon_down)

                return false;//ignore other icons that match, one is enough
            }

        });
    })


    $(document).on('click.ace.widget', '[data-action]', function (ev) {
        ev.preventDefault();

        var $this = $(this);
        var $action = $this.data('action');
        var $box = $this.closest('.widget-box');

        if($box.hasClass('ui-sortable-helper')) return;

        if($action == 'collapse') {
            var event_name = $box.hasClass('collapsed') ? 'show' : 'hide';
            var event_complete_name = event_name == 'show' ? 'shown' : 'hidden';


            var event
            $box.trigger(event = $.Event(event_name+'.ace.widget'))
            if (event.isDefaultPrevented()) return

            var $body = $box.find('.widget-body');
            var $icon = $this.find('[class*=fa-]').eq(0);
            var $match = $icon.attr('class').match(/fa\-(.*)\-(up|down)/);
            var $icon_down = 'fa-'+$match[1]+'-down';
            var $icon_up = 'fa-'+$match[1]+'-up';

            var $body_inner = $body.find('.widget-body-inner')
            if($body_inner.length == 0) {
                $body = $body.wrapInner('<div class="widget-body-inner"></div>').find(':first-child').eq(0);
            } else $body = $body_inner.eq(0);


            var expandSpeed   = 300;
            var collapseSpeed = 200;

            if( event_name == 'show' ) {
                if($icon) $icon.addClass($icon_up).removeClass($icon_down);
                $box.removeClass('collapsed');
                $body.slideUp(0 , function(){$body.slideDown(expandSpeed, function(){$box.trigger(event = $.Event(event_complete_name+'.ace.widget'))})});
            }
            else {
                if($icon) $icon.addClass($icon_down).removeClass($icon_up);
                $body.slideUp(collapseSpeed, function(){$box.addClass('collapsed');$box.trigger(event = $.Event(event_complete_name+'.ace.widget'))});
            }


        }
        else if($action == 'close') {
            var event
            $box.trigger(event = $.Event('close.ace.widget'))
            if (event.isDefaultPrevented()) return

            var closeSpeed = parseInt($this.data('close-speed')) || 300;
            $box.hide(closeSpeed , function(){$box.trigger(event = $.Event('closed.ace.widget'));$box.remove();});
        }
        else if($action == 'reload') {
            var event
            $box.trigger(event = $.Event('reload.ace.widget'))
            if (event.isDefaultPrevented()) return

            $this.blur();

            var $remove = false;
            if($box.css('position') == 'static') {$remove = true; $box.addClass('position-relative');}
            $box.append('<div class="widget-box-overlay"><i class="icon-spinner icon-spin icon-2x white"></i></div>');

            $box.one('reloaded.ace.widget', function() {
                $box.find('.widget-box-overlay').remove();
                if($remove) $box.removeClass('position-relative');
            });

        }
        else if($action == 'settings') {
            var event = $.Event('settings.ace.widget')
            $box.trigger(event)
        }

    });
}