km_utils.js

// UTIL library for having an common tools for handy use 
// Author : Dipak

var KMUTIL = (function (util) {

    // This is ninja function which will tell If there gonna be CSS restriction gottca in IE 9
    var countCSSRules = function () {
        var results = '',
        log = '';
        var totalSheets = document.styleSheets.length;
        if (!document.styleSheets) {
            return;
        }

        for (var i = 0; i < document.styleSheets.length; i++) {
            countSheet(document.styleSheets[i]);

        }
        function countSheet(sheet) {
            var count = 0;
            if (sheet && sheet.cssRules) {
                for (var j = 0, l = sheet.cssRules.length; j < l; j++) {
                    if (!sheet.cssRules[j].selectorText) {
                        if (sheet.cssRules[j].cssRules) {
                            for (var m = 0, n = sheet.cssRules[j].cssRules.length; m < n; m++) {
                                if (sheet.cssRules[j].cssRules[m].selectorText) {
                                    count += sheet.cssRules[j].cssRules[m].selectorText.split(',').length;
                                }
                            }
                        }
                    }
                    else {
                        count += sheet.cssRules[j].selectorText.split(',').length;
                    }
                }

                log += '\nFile: ' + (sheet.href ? sheet.href : 'inline <style> tag');
                log += '\nRules: ' + sheet.cssRules.length;
                log += '\nSelectors: ' + count;
                log += '\n--------------------------';
                if (count >= 4096) {
                    results += '\n********************************\nWARNING:\n There are ' + count + ' CSS rules in the stylesheet ' + sheet.href + ' - IE will ignore the last ' + (count - 4096) + ' rules!\n';
                }
            }
        }
        console.log(log);
        console.log(results);
        if (totalSheets > 31) {

            console.log("\n********************************\nWARNING:\n There are " + totalSheets + " Stylesheet." +
                        "IE have restriction to max 31 stylesheet." +
                        "You are fired ! "

            );
        }
    };

    var getRidOfUnwantedCss = function ($selector) {
        $selector.remove();
    };

    var showProcessing = function ($target) {
        $target.addClass('loader_img');
        var $processingDiv = $('<div class="km_processing_icon custom_loader" style="display: block;">');
        var $processingImage = $('<img src="../../Theme/Boots/images/demo_wait.gif" alt="processing">');
        $processingDiv.append($processingImage);
        $target.append($processingDiv);

    };

    var hideProcessing = function ($target) {
        var $processingDiv = $target.find('.km_processing_icon');
        $processingDiv.hide();
    };

    var disableElement = function ($element) {
        $element.attr("disabled", "disabled");
        $element.addClass('km_disabled_element');
    };
    var enableElement = function ($element) {
        $element.removeAttr("disabled");
        $element.removeClass('km_disabled_element');
    };

    // Create an  event 
    util.createEvent = function (event) {
        var evt = document.createEvent("Event");
        evt.initEvent(event, true, true);
        return evt;
    };

    /// Event Data
    util.createCustomEvent = function (event, data) {
        var evt = document.createEvent("CustomEvent");
        evt.initCustomEvent(event, true, true, data);
        return evt;
    };

    // UI Dialogs 

    util.kmYesNoDialog = function (options) {        
        var options = options || {};
        var defer = $.Deferred();
        $('<div></div>')
        .html(options.message || 'Provide message')
        .dialog({
            autoOpen: true,
            modal: true,
            title: options.title || 'Confirmation',
            dialogClass: options.class || 'km_message_dialog',
            buttons: {
                "Yes": function () {
                    defer.resolve("Yes");  //This will recieve in callback resoponce
                    $(this).dialog("close");
                },
                "No": function () {
                    defer.resolve("No");  //This will recieve in callback resoponce
                    $(this).dialog("close");
                }
            },
            close: function () {
                $(this).remove();
            }
        });
        return defer.promise();
    };  // kmYesNoDialog
    
    // Custom OK Dialog 
    // Usage : 
    /*KMUTIL.kmOkDialog({ message: responce.message }).then(function (userResponce) {  // userResponce can be "Ok", "Close"
               if(userResponce == "Ok")
                    console.log("You said OK");
            }); */
    util.kmOkDialog = function (options) {
        var options = options || {};
        var defer = $.Deferred();
        $('<div></div>')
        .html(options.message || 'Provide message')
        .dialog({
            autoOpen: true,
            modal: true,
            title: options.title || 'Information',
            dialogClass: options.class || 'km_message_dialog',
            buttons: {
                "Ok": function () {
                    defer.resolve("Ok"); //This will recieve in callback resoponce
                    $(this).dialog("close");
                }
            },
            close: function () {
                defer.resolve("Close"); //This will recieve in callback resoponce                
                $(this).remove();
            }
        });
        return defer.promise();
    };  // kmOkDialog
    
    //---------------------------
    // Create the message element that can be appended 
    // Usage : var $message = KMUTIL.buildMessageElement({ message: "Something went wrong, please try again!", messageClass: "km_error_message" });
    util.buildMessageElement = function (option) {
        var $messageDiv = $("<div class='km_message form_message'>").html(option.message).addClass(option.messageClass)
                              .append(" <a href='' class='glyphicon glyphicon-remove'>");
        return $messageDiv;
    };

    
    // Custom Ajax 
    util.kmAjax = function (options) {
        var settings = {
            method: 'GET'
        };
        $.extend(settings, options);

        var jqXHR = $.ajax(settings);
        return jqXHR;
    };

    // requestAccess 
    util.requestAccess = function (options, callback) {
        var ajaxOption = {
            url: options.url,
            data: { userId: options.userId, topicId: options.entityId, topictitle: options.entityTitle }
        };

        util.kmAjax(ajaxOption).done(function (res) {
            callback({ isSuccess: true, data: res });
        })
        .fail(function () {
            callback({ isSuccess: false });
        });
    };

    //**************************************************
    // add my methods to parent util 
    util.countCSSRules = countCSSRules;
    util.getRidOfUnwantedCss = getRidOfUnwantedCss;
    util.showProcessing = showProcessing;
    util.hideProcessing = hideProcessing;
    util.disableElement = disableElement;
    util.enableElement = enableElement;
    return util;  // take what you given to me with full stuff

})(KMUTIL || {});

/// Additional butter to Kaams toolkit
var KMUTIL = (function (parent, $) {

    parent.newFeature = function(){};
    return parent;

})(KMUTIL || {}, jQuery);

CustomEvent :-

Create Event and Dispatch with custom data

 var event = createCustomEvent('emitNotificationDeleted', dataObject);
                                    document.dispatchEvent(event);

Listen to event

document.addEventListener("emitNotificationSubmited", handleNotificationSubmited, false);

document.addEventListener("emitNotificationDeleted", function (e) {
  var data = e.detail;
}