Support for checkboxes

rigon · Mar 8, 2017 · efda1a1 · efda1a1
1 parent 62ee9d4
commit efda1a1
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/bootpopup.js b/bootpopup.js
@@ -75,7 +75,7 @@ function bootpopup(options) {
     for(var i in opts.content) {
         var entry = opts.content[i];
         switch(typeof entry) {
-            case "string":
+            case "string":		// HTML string
                 form.append(entry);
                 break;
             case "object":
@@ -93,12 +93,16 @@ function bootpopup(options) {
                         case "email": case "file": case "hidden": case "image": case "month": case "number":
                         case "password": case "radio": case "range": case "reset": case "search":
                         case "submit": case "tel": case "text": case "time": case "url": case "week": */
+                        case "checkbox":
+                            var checkboxLabel = attrs.label;
+                            attrs.label = "";
+                            attrs.class = (typeof attrs.class === "undefined" ? "" : attrs.class);
                         case "button": case "text": case "submit": case "color": case "url": case "password": 
                         case "hidden": case "file": case "number": case "email": case "reset": case "date":
                             attrs.type = type;
                             // Continue for input
                         case "input":
-                            // Create a random id for the input if none is provided
+                            // Create a random id for the input if none provided
                             attrs.id = (typeof attrs.id === "undefined" ? "bootpopup-input" + String(Math.random()).substr(2) : attrs.id);
                             attrs.class = (typeof attrs.class === "undefined" ? "form-control" : attrs.class);
                             attrs.type = (typeof attrs.type === "undefined" ? "text" : attrs.type);
@@ -109,8 +113,14 @@ function bootpopup(options) {
                             $("<label></label>", { for: attrs.id, class: "col-sm-2 control-label", text: attrs.label}).appendTo(formGroup);
                             delete attrs.label;
                             // Input and div to control width
-                            var divColSm = $('<div class="col-sm-10"></div>').appendTo(formGroup);
-                            $("<input />", attrs).appendTo(divColSm);
+                            var input = $("<input />", attrs);
+                            if(type === "checkbox")
+                                input = $('<div class="checkbox"></div>')
+                                    .append($('<label></label>').append(input).append(checkboxLabel));
+
+                            var divColSm = $('<div class="col-sm-10"></div>');
+                            divColSm.append(input);
+                            formGroup.append(divColSm)
                             break;
                         default:
                             form.append($("<" + type + "></" + type + ">", attrs));

diff --git a/index.html b/index.html
@@ -202,6 +202,7 @@ <h2 id="customized">Customized dialog</h2>
         { p: {text: &quot;Insert image info here:&quot;}},
         { input: {type: &quot;text&quot;, label: &quot;Title&quot;, name: &quot;title&quot;, id: &quot;title&quot;, placeholder: &quot;Description for image&quot;, value: &quot;Woman picking flowers&quot;}},
         { url: {label: &quot;Link&quot;, name: &quot;link&quot;, id: &quot;link&quot;, placeholder: &quot;Hyperlink for image&quot;, value: &quot;http://hmp.me/3lv&quot;}},
+        { checkbox: {label: &quot;Add border to the image&quot;, name: &quot;border&quot;, id: &quot;border&quot;}},
         { button: {name: &quot;button&quot;, value: &quot;Open image&quot;, class: &quot;btn btn-info&quot;, onclick: function() {
                 bootpopup({
                     title: $(&apos;#title&apos;).val(),
@@ -261,6 +262,7 @@ <h2 id="customized">Customized dialog</h2>
 						{ p: {text: "Insert image info here:"}},
 						{ input: {type: "text", label: "Title", name: "title", id: "title", placeholder: "Description for image", value: "Woman picking flowers"}},
 						{ url: {label: "Link", name: "link", id: "link", placeholder: "Hyperlink for image", value: "http://hmp.me/3lv"}},
+						{ checkbox: {label: "Add border to the image", name: "border", id: "border"}},
 						{ button: {name: "button", value: "Open image", class: "btn btn-info", onclick: function() {
 								bootpopup({
 									title: $('#title').val(),