Added readme

README.md

@@ -0,0 +1,34 @@
+# BSDialog
+
+> BSDialog is a JavaScript helper for improving Bootstrap 3 modals. Add (and remove) modals to a page dynamically and load content with jQuery/AJAX. Bootstrap 3 is required.
+
+---
+
+## Features
+
+- Add (inject) and remove modals into a page
+- Load modal-content or modal-body from URL with jQuery-AJAX
+- Stack multiple modals
+
+---
+
+## Releases & Builds
+
+See [Releases](/Ray/bsdialog)
+
+## Documentation
+
+See [Usage](wiki/USAGE.md)
+
+## Acknowledgements
+
+This software uses a number of dependencies and assets from third-parties. 
+These developers and artists deserve due credit for their work and for their commitment to sharing their work freely. 
+Each product is released under their own particular license, for more information please visit their websites.
+
+- [Bootstrap](https://getbootstrap.com/)
+- [jQuery](https://jquery.com/)
+
+## License
+
+This project is licensed under the least restrictive terms of its dependencies, viz. MIT License.

bsdialog.js

@@ -1,116 +1,186 @@
-/**
- * BSHelper 
- * Bootstrap Helper
- * @version v0.1.0.023 (2015/07/14 1157)
- */
-
-
 /**
  * BSDialog
- *
+ * @version v0.1.0.029a (2019/11/09 2239)
  */
 var BSDialog = {
-  Create:function(id, title, url, is_big){
-    id = "dlg" + id;
-    if ($("#" + id).length <= 0) this.Add(id, title, ((is_big == undefined)? false : is_big));
-    //--
-    $("#" + id).find(".modal-content").load(url);
-    $("#" + id).modal('show');
-    $("#" + id).on('hide.bs.modal', function(){
-      $("body > div[id='" + id + "']").remove();
-      $("body > div[class~='modal-backdrop']").remove();
-      $("body").removeClass("modal-open");
-    });
-  },
-  Add:function(id, title, is_big){
-    if ($("body > div#" + id).length > 0) return;
-    //--
-    var html = "";
-    html += "<div class=\"modal fade\" id=\"" + id + "\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"" + id + "Label\" aria-hidden=\"true\">";
-    html += "  <div class=\"modal-dialog" + ((is_big)? " modal-lg" : "") + "\">";
-    html += "    <div class=\"modal-content\">";
-    html += "      <div class=\"modal-header\">";
-    html += "        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>";
-    html += "        <strong class=\"modal-title\" id=\"" + id + "Label\">" + title + "</strong>";
-    html += "      </div>";
-    html += "      <div class=\"modal-body custom-loading\"></div>";
-    html += "      <div class=\"modal-footer\">";
-    html += "        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>";
-    html += "      </div>";
-    html += "    </div>";
-    html += "  </div>";
-    html += "</div>";
-    //--
-    $("body").append(html);
-  },
-  Close: function (id) {
-    if (typeof (id) == "object")
-    {
-      var sender = null;
+	Create: function (id, title, url, is_big, update_body, show_size) {
+		var a = this;
 
-      do
-      {
-        if (typeof (id.target) != "undefined") 
-		{
-          sender = id.target;
-          break;
+		a.id = id;
+		a.title = title;
+		a.url = url;
+		a.isBig = ((typeof (is_big) == "undefined") ? false : (is_big == true) ? true : false);
+		a.showSize = ((typeof (show_size) == "undefined") ? true : (show_size == true) ? true : false);
+
+		var updateBody = ((typeof (update_body) == "undefined") ? true : (update_body == true) ? true : false);
+
+		if (!a.Exists(id)) {
+			a.renderContent(null);
 		}
 
-        if (typeof (id) != "undefined") 
-		{
-          sender = id;
-          break;
-        }
-	  } while (false);
-          
-      if (sender == null) return;
-
-      var panel = $(sender).parentsUntil("div[id^='dlg']").parent();
-      if ($(panel).length > 0) 
-	  {
-        var dialogID = $(panel).attr("id").substr(3);
-
-        this.Close(dialogID);
+		if (url != null) {
+			$.ajax({
+				url: url,
+				cache: false,
+				xhrFields: {
+					withCredentials:true
+				},
+				timeout: 60000,
+				success: function (result, status, xhr) {
+					if ((xhr.status == 200) || (xhr.status == 302) || (xhr.status == 301)) {
+						if (updateBody) {
+							a.updateContentBody(id, result);
+						} else {
+							$("#dlg" + id).find(".modal-content").html(result);
 						}
 					} else {
-        if ($("body > div#dlg" + id).length <= 0) return;
-
-        $("body > div#dlg" + id).remove();
-        $("body > div[class~='modal-backdrop']").remove();
-        $("body").removeClass("modal-open");
+						a.updateContentBody(id, xhr.statusText + " (" + xhr.status + ")");
 					}
 				},
+				error: function (xhr) {
+					a.updateContentBody(id, xhr.statusText + " (" + xhr.status + ")");
+				},
+				complete: function (xhr, status) {
+					// do nothing yet
+				}
+			});
+		}
+
+		a.initialiseComponents();
+	},
+	Close: function (id) {
+		$("#dlg" + id).modal('hide');
+	},
 	Clear: function () {
 		$("body > div[class~='modal'][role='dialog']").remove();
 		$("body > div[class~='modal-backdrop']").remove();
 		$("body").removeClass("modal-open");
 	},
 	ShowToast: function (id, title, message, is_big) {
-    if ($("body > div#" + id).length > 0) return;
-    //--
+		var a = this;
+
+		if (a.Exists(id)) {
+			return;
+		}
+
+		a.id = id;
+		a.title = title;
+		a.url = null;
+		a.isBig = ((typeof (is_big) == "undefined") ? false : (is_big == true) ? true : false);
+
+		a.renderContent(message);
+		a.initialiseComponents();
+	},
+	Exists: function (id) {
+		return ($("body > div[id='dlg" + id + "']").length > 0);
+	},
+	generateModalHtml: function (message) {
+		var a = this;
+		var size = (a.isBig == true ? "lg" : "md");
+
 		var html = "";
-    html += "<div class=\"modal fade\" id=\"" + id + "\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"" + id + "Label\" aria-hidden=\"true\">";
-    html += "  <div class=\"modal-dialog" + ((is_big)? " modal-lg" : "") + "\">";
+		html += "<div class=\"modal fade\" id=\"dlg" + a.id + "\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"dlg" + a.id + "Label\" aria-hidden=\"true\">";
+		html += "  <div class=\"modal-dialog modal-" + size + "\">";
 		html += "    <div class=\"modal-content\">";
 		html += "      <div class=\"modal-header\">";
 		html += "        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>";
-    html += "        <strong class=\"modal-title\" id=\"" + id + "Label\">" + title + "</strong>";
+
+		if (a.showSize)
+		{
+			html += "        <span class=\"close\">&nbsp;</span>";
+			html += "        <button type=\"button\" class=\"close\" data-modal-action=\"restore\" aria-hidden=\"true\">&#8722;</button>";
+		}
+
+		html += "        <strong class=\"modal-title\" style=\"cursor:default; \">" + a.title + "</strong>";
 		html += "      </div>";
+
+		if ($.trim(message).length <= 0) {
+			html += "      <div class=\"modal-body custom-loading\" style=\"background-position: center center; background-repeat: no-repeat;\"></div>";
+		} else {
 			html += "      <div class=\"modal-body\">" + message + "</div>";
+		}
+
 		html += "      <div class=\"modal-footer\">";
 		html += "        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>";
 		html += "      </div>";
 		html += "    </div>";
 		html += "  </div>";
 		html += "</div>";
-    //--
-    $("body").append(html);
-    //--
-    $("#" + id).modal('show');
-    $("#" + id).on('hide.bs.modal', function(){
-      $("body > div[id='" + id + "']").remove();
-      $("body > div[class~='modal-backdrop']").remove();
-      $("body").removeClass("modal-open");
+
+		return html;
+	},
+	renderContent: function (content) {
+		$("body").append(this.generateModalHtml(content));
+	},
+	initialiseComponents: function () {
+		var a = this;
+		var dialog = a.getElement();
+
+		if (a.showSize)
+		{
+			var btnToggleSize = $(dialog).find("button[data-modal-action='restore']");
+			if ($(btnToggleSize).length > 0) {
+				$(btnToggleSize).off('click');
+				$(btnToggleSize).on('click', function () {
+					a.toggleSize();
 				});
 			}
+		}
+
+		$(dialog).modal('show');
+
+		$(dialog).off('hide.bs.modal');
+		$(dialog).on('hide.bs.modal', function () {
+			if ($(dialog).next().is("div[class~='modal-backdrop']")) {
+				$(dialog).next().remove();
+			}
+
+			$(dialog).remove();
+		});
+
+		$(dialog).find(".modal-header").off("mousedown");
+		$(dialog).find(".modal-header").on("mousedown", function(e) {
+			var posX = e.pageX - $(this).offset().left;
+			var posY = e.pageY - $(this).offset().top;
+
+			$("body").off("mousemove.draggable");
+			$("body").on("mousemove.draggable", function(e2) {
+				$(dialog).children(".modal-dialog").offset({ "left": (e2.pageX - posX), "top": (e2.pageY - posY) });
+			});
+
+			$("body").off("mouseup");
+			$("body").on("mouseup", function() {
+					$("body").off("mousemove.draggable");
+			});
+
+			$(dialog).off("bs.modal.hide");
+			$(dialog).on("bs.modal.hide", function() {
+					$("body").off("mousemove.draggable");
+			});
+		});
+	},
+	updateContentBody: function (id, text) {
+		var body = $("#dlg" + id).find(".modal-body");
+
+		if ($(body).hasClass("custom-loading")) $(body).removeClass("custom-loading");
+
+		$(body).html(text);
+	},
+	getElement: function () {
+		return $("#dlg" + this.id);
+	},
+	toggleSize: function () {
+		var div = $(this.getElement()).find("div[class^='modal-dialog']");
+		if ($(div).length <= 0) {
+			return;
+		}
+
+		if ($(div).hasClass("modal-md")) {
+			$(div).removeClass("modal-md");
+			$(div).addClass("modal-lg");
+		} else if ($(div).hasClass("modal-lg")) {
+			$(div).removeClass("modal-lg");
+			$(div).addClass("modal-md");
+		}
+	}
 };

bsdialog.min.js

@@ -1,7 +1,5 @@
 /**
- * BSHelper 
- * Bootstrap Helper
- * @version v0.1.0.023 (2015/07/14 1157)
+ * BSDialog
+ * @version v0.1.0.029a (2019/11/09 2239)
  */
-var BSDialog={Create:function(id,title,url,is_big){id="dlg"+id;if($("#"+id).length<=0)this.Add(id,title,((is_big==undefined)?!1:is_big));$("#"+id).find(".modal-content").load(url);$("#"+id).modal('show');$("#"+id).on('hide.bs.modal',function(){$("body > div[id='"+id+"']").remove();$("body > div[class~='modal-backdrop']").remove();$("body").removeClass("modal-open")})},Add:function(id,title,is_big){if($("body > div#"+id).length>0)return;var html="";html+="<div class=\"modal fade\" id=\""+id+"\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\""+id+"Label\" aria-hidden=\"true\">";html+="  <div class=\"modal-dialog"+((is_big)?" modal-lg":"")+"\">";html+="    <div class=\"modal-content\">";html+="      <div class=\"modal-header\">";html+="        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>";html+="        <strong class=\"modal-title\" id=\""+id+"Label\">"+title+"</strong>";html+="      </div>";html+="      <div class=\"modal-body custom-loading\"></div>";html+="      <div class=\"modal-footer\">";html+="        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>";html+="      </div>";html+="    </div>";html+="  </div>";html+="</div>";$("body").append(html)},Close:function(id){if(typeof(id)=="object"){var sender=null;do{if(typeof(id.target)!="undefined"){sender=id.target;break}
-if(typeof(id)!="undefined"){sender=id;break}}while(!1);if(sender==null)return;var panel=$(sender).parentsUntil("div[id^='dlg']").parent();if($(panel).length>0){var dialogID=$(panel).attr("id").substr(3);this.Close(dialogID)}}else{if($("body > div#dlg"+id).length<=0)return;$("body > div#dlg"+id).remove();$("body > div[class~='modal-backdrop']").remove();$("body").removeClass("modal-open")}},Clear:function(){$("body > div[class~='modal'][role='dialog']").remove();$("body > div[class~='modal-backdrop']").remove();$("body").removeClass("modal-open")},ShowToast:function(id,title,message,is_big){if($("body > div#"+id).length>0)return;var html="";html+="<div class=\"modal fade\" id=\""+id+"\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\""+id+"Label\" aria-hidden=\"true\">";html+="  <div class=\"modal-dialog"+((is_big)?" modal-lg":"")+"\">";html+="    <div class=\"modal-content\">";html+="      <div class=\"modal-header\">";html+="        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>";html+="        <strong class=\"modal-title\" id=\""+id+"Label\">"+title+"</strong>";html+="      </div>";html+="      <div class=\"modal-body\">"+message+"</div>";html+="      <div class=\"modal-footer\">";html+="        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>";html+="      </div>";html+="    </div>";html+="  </div>";html+="</div>";$("body").append(html);$("#"+id).modal('show');$("#"+id).on('hide.bs.modal',function(){$("body > div[id='"+id+"']").remove();$("body > div[class~='modal-backdrop']").remove();$("body").removeClass("modal-open")})}}
+var BSDialog={Create:function(o,t,e,d,a,s){var l=this;l.id=o,l.title=t,l.url=e,l.isBig=void 0!==d&&1==d,l.showSize=void 0===s||1==s;var n=void 0===a||1==a;l.Exists(o)||l.renderContent(null),null!=e&&$.ajax({url:e,cache:!1,xhrFields:{withCredentials:!0},timeout:6e4,success:function(t,e,d){200==d.status||302==d.status||301==d.status?n?l.updateContentBody(o,t):$("#dlg"+o).find(".modal-content").html(t):l.updateContentBody(o,d.statusText+" ("+d.status+")")},error:function(t){l.updateContentBody(o,t.statusText+" ("+t.status+")")},complete:function(o,t){}}),l.initialiseComponents()},Close:function(o){$("#dlg"+o).modal("hide")},Clear:function(){$("body > div[class~='modal'][role='dialog']").remove(),$("body > div[class~='modal-backdrop']").remove(),$("body").removeClass("modal-open")},ShowToast:function(o,t,e,d){var a=this;a.Exists(o)||(a.id=o,a.title=t,a.url=null,a.isBig=void 0!==d&&1==d,a.renderContent(e),a.initialiseComponents())},Exists:function(o){return $("body > div[id='dlg"+o+"']").length>0},generateModalHtml:function(o){var t=this,e=1==t.isBig?"lg":"md",d="";return d+='<div class="modal fade" id="dlg'+t.id+'" tabindex="-1" role="dialog" aria-labelledby="dlg'+t.id+'Label" aria-hidden="true">',d+='  <div class="modal-dialog modal-'+e+'">',d+='    <div class="modal-content">',d+='      <div class="modal-header">',d+='        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>',t.showSize&&(d+='        <span class="close">&nbsp;</span>',d+='        <button type="button" class="close" data-modal-action="restore" aria-hidden="true">&#8722;</button>'),d+='        <strong class="modal-title" style="cursor:default; ">'+t.title+"</strong>",d+="      </div>",$.trim(o).length<=0?d+='      <div class="modal-body custom-loading" style="background-position: center center; background-repeat: no-repeat;"></div>':d+='      <div class="modal-body">'+o+"</div>",d+='      <div class="modal-footer">',d+='        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>',d+="      </div>",d+="    </div>",d+="  </div>",d+="</div>"},renderContent:function(o){$("body").append(this.generateModalHtml(o))},initialiseComponents:function(){var o=this,t=o.getElement();if(o.showSize){var e=$(t).find("button[data-modal-action='restore']");$(e).length>0&&($(e).off("click"),$(e).on("click",function(){o.toggleSize()}))}$(t).modal("show"),$(t).off("hide.bs.modal"),$(t).on("hide.bs.modal",function(){$(t).next().is("div[class~='modal-backdrop']")&&$(t).next().remove(),$(t).remove()}),$(t).find(".modal-header").off("mousedown"),$(t).find(".modal-header").on("mousedown",function(o){var e=o.pageX-$(this).offset().left,d=o.pageY-$(this).offset().top;$("body").off("mousemove.draggable"),$("body").on("mousemove.draggable",function(o){$(t).children(".modal-dialog").offset({left:o.pageX-e,top:o.pageY-d})}),$("body").off("mouseup"),$("body").on("mouseup",function(){$("body").off("mousemove.draggable")}),$(t).off("bs.modal.hide"),$(t).on("bs.modal.hide",function(){$("body").off("mousemove.draggable")})})},updateContentBody:function(o,t){var e=$("#dlg"+o).find(".modal-body");$(e).hasClass("custom-loading")&&$(e).removeClass("custom-loading"),$(e).html(t)},getElement:function(){return $("#dlg"+this.id)},toggleSize:function(){var o=$(this.getElement()).find("div[class^='modal-dialog']");$(o).length<=0||($(o).hasClass("modal-md")?($(o).removeClass("modal-md"),$(o).addClass("modal-lg")):$(o).hasClass("modal-lg")&&($(o).removeClass("modal-lg"),$(o).addClass("modal-md")))}};

wiki/USAGE.md

@@ -0,0 +1,43 @@
+# Usage: v0.1.0.029a
+
+This is the usage guide for [BSDialog](/bootstrapjs-bsdialog), v0.1.0.029a.
+
+## Usage
+
+### Create(id, title, url, [is_big], [update_body])
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| id | string | Unique identifier for the modal, so you can refer to multiple modal |
+| title | string | Label at the top of the modal |
+| url | string | URL to load into the modal body |
+| is_big | boolean | Use large width or small width on the modal. (Optional. Default is false) |
+| update_body | boolean | Update modal-body with content, otherwise model-content. (Optional. Default is false) |
+
+Creates the Modal on the page and loads the body from a URL. An existing box will be reused if the ID already exists.
+
+```javascript
+BSDialog.Create("123", "My Modal Box 123", "/my-modal-box.html");
+BSDialog.Create("123", "My Modal Box 123", "/my-modal-box.html", false);
+BSDialog.Create("123", "My Modal Box 123", "/my-modal-box.html", false, false);
+```
+
+### Close(id)
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| id | string | Unique identifier for the modal, so you can refer to multiple modal |
+
+Close the Modal box by the box identifier.
+
+```javascript
+BSDialog.Close("123");
+```
+
+### Clear()
+
+Close all Modal boxes on the page.
+
+```javascript
+BSDialog.Clear();
+```