"use strict"; //type: error, question, information //options: can contain id for component which use this dialog //options: can contain parent id where will append the dialog template(mandatory) //options: can contain a map object which overwrite the dialog content; // ex:{information:text, question: text, error: text }(optional) var Dialog = function(type, options){ this.$template; this.messages = { information: "Information", error: "This is an error", question: "You sure you want to delete this?" } this.config = {}; this.setConfig = function(){ if(!options) alert("dialog with incorrect params"); this.config = { parentID: (options.parentID) ? options.parentID : alert("parent ID is missing"), creatorID: (options.creatorID) ? options.creatorID : alert("creator ID is missing") } if(options.map){ this.config.messages = { information: (options.map.information) ? options.map.information : this.messages.information, error: (options.map.error) ? options.map.error : this.messages.error, question: (options.map.question) ? options.map.question : this.messages.question } }else{ this.config.messages = this.messages; } return this; } this.createTemplate = function(){ this.$template = $("
").addClass("dialog-wrapper") .append($("
") .addClass("dialog-content") .append($("

").addClass("dialog-content-title").text(type.toUpperCase())) .append($("

").addClass("dialog-content-text").html((type) ? this.config.messages[type] : "").css("margin-top","20px")) .append($("

") .addClass("dialog-content-buttons") .css("margin-top","20px") .append( $("
").addClass("dialog-button button-ok") .text("OK") .attr("data-action", "true") ) .append( $("
").addClass("dialog-button button-cancel") .text("Cancel") .attr("data-action", "false") ) ) ) return this; } this.addTemplate = function(){ $("#"+this.config.parentID).append(this.$template); } this.addEventListeners = function(){ var self = this; this.$template.find(".dialog-content-buttons").on("click", ".dialog-button", function(){ var target = $(this).attr("data-action"); if(target === "true"){ var ev = new $.Event("dialog_response", {response: true}) }else{ var ev = new $.Event("dialog_response", {response: false}) } $("#"+self.config.creatorID).trigger(ev); self.hide(); }); return this; } this.show = function(){ this.$template.fadeIn(200); return this; } this.hide = function(){ this.$template.fadeOut(500); return this; } this.init = function(){ this.setConfig().createTemplate().addEventListeners().addTemplate(); return this; } }