Skip to content

Commit

Permalink
Transform data from the form as key-value pair
Browse files Browse the repository at this point in the history
  • Loading branch information
@rigon
rigon committed Feb 25, 2017
1 parent 8fbcf1c commit 8dcf7e1
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 28 deletions.
43 changes: 25 additions & 18 deletions bootpopup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,9 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*************************************************************************/


var bootpopupFormCounter = 0;

function bootpopup(options) {
bootpopupFormCounter++;
// Create a global random ID for the form
this.formid = "bootpopup-form" + String(Math.random()).substr(2);

var opts = {
title: document.title,
Expand Down Expand Up @@ -71,21 +69,21 @@ function bootpopup(options) {

// Body
var body = $('<div class="modal-body"></div>').appendTo(content);
var form = $("<form></form>", { id: "bootpopup-form" + bootpopupFormCounter, class: "form-horizontal" }).appendTo(body);
var form = $("<form></form>", { id: this.formid, class: "form-horizontal" }).appendTo(body);

// Iterate over entries
for(i in opts.content) {
for(var i in opts.content) {
var entry = opts.content[i];
switch(typeof entry) {
case "string":
form.append(entry);
break;
case "object":
for(type in entry) {
for(var type in entry) {
var attrs = entry[type];

// Convert functions to string to be used as callback
for(attribute in attrs)
for(var attribute in attrs)
if(typeof attrs[attribute] === "function")
attrs[attribute] = "("+ attrs[attribute] + ")(this)";

Expand All @@ -100,8 +98,8 @@ function bootpopup(options) {
attrs.type = type;
// Continue for input
case "input":
// Create a random id if none is provided
attrs.id = (typeof attrs.id === "undefined" ? "bootpopup" + String(Math.random()).substr(2) : attrs.id);
// Create a random id for the input if none is 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);

Expand Down Expand Up @@ -147,11 +145,18 @@ function bootpopup(options) {
class: "btn " + btnClass,
"data-dismiss": "modal",
"data-callback": item,
"data-form": "#bootpopup-form" + bootpopupFormCounter,
"data-form": this.formid,

click: function(e) {
var callback = opts[$(e.target).attr("data-callback")];
var form = $(e.target).attr("data-form");
callback($(form).serializeArray(), e);
var button = $(e.target);
var callback = opts[button.attr("data-callback")];
var form = button.attr("data-form");
var array = $("#" + form).serializeArray();
var keyval = {};
for(var i in array)
keyval[array[i].name] = array[i].value;

callback(keyval, array, e);
}
}).appendTo(footer);
}
Expand All @@ -175,7 +180,7 @@ bootpopup.alert = function(message, title, callback) {
bootpopup({
title: title,
content: [{ p: {text: message}}],
dismiss: function(data) { callback(); }
dismiss: function() { callback(); }
});
}

Expand All @@ -194,8 +199,8 @@ bootpopup.confirm = function(message, title, callback) {
showclose: false,
content: [{ p: {text: message}}],
buttons: ["no", "yes"],
yes: function(data) { answer = true; },
dismiss: function(data) { callback(answer); }
yes: function() { answer = true; },
dismiss: function() { callback(answer); }
});
}

Expand All @@ -222,6 +227,8 @@ bootpopup.prompt = function(label, type, message, title, callback) {
{ p: {text: message}},
{ input: {type: type, name: "value", label: label}}],
buttons: ["cancel", "ok"],
ok: callback
ok: function(data) {
callback(data.value);
}
});
}
20 changes: 10 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ <h2 id="prompt">Prompt</h2>
<p><button id="example-prompt-3" class="btn btn-primary">Run example</button></p><hr>

<p>Or if you want a callback without a custom title and message:</p>
<pre><code class="js">bootpopup.prompt("Text", function(data,e) { alert(JSON.stringify(data)); });</code></pre>
<pre><code class="js">bootpopup.prompt("Text", function(data) { alert(data); });</code></pre>
<p><button id="example-prompt-4" class="btn btn-primary">Run example</button></p><hr>


Expand All @@ -208,8 +208,8 @@ <h2 id="customized">Customized dialog</h2>
content: [ { img: {src: $(&apos;#link&apos;).val()}} ]});
}
}}],
cancel: function(data,e) { alert(&quot;Cancel&quot;); },
ok: function(data,e) { alert(&quot;OK\n&quot; + JSON.stringify(data)); },
cancel: function(data, array, event) { alert(&quot;Cancel&quot;); },
ok: function(data, array, event) { alert(&quot;OK\n&quot; + JSON.stringify(data)); },
complete: function() { alert(&quot;Complete&quot;); },
});</code></pre>
<p><button id="example-customized-1" class="btn btn-primary">Run example</button></p><hr>
Expand All @@ -224,8 +224,8 @@ <h2 id="customized">Customized dialog</h2>
&apos;&lt;p class=&quot;lead&quot;&gt;Check out the &lt;a href=&quot;#examples&quot; data-scrollto=&quot;#examples&quot;&gt;examples&lt;/a&gt; to see how easy it is!&lt;/p&gt;&apos;,
&apos;Give us a rate 1-10:&apos;,
{ input: {type: &quot;number&quot;, label: &quot;Rate&quot;, name: &quot;rate&quot;, value: &quot;11&quot;}}],
cancel: function(data,e) { alert(&quot;Cancel&quot;); },
ok: function(data,e) { alert(&quot;OK\n&quot; + JSON.stringify(data)); },
cancel: function(data, array, event) { alert(&quot;Cancel&quot;); },
ok: function(data, array, event) { alert(&quot;OK\n&quot; + JSON.stringify(data)); },
complete: function() { alert(&quot;Complete&quot;); },
});</code></pre>
<p><button id="example-customized-2" class="btn btn-primary">Run example</button></p><hr>
Expand All @@ -252,7 +252,7 @@ <h2 id="customized">Customized dialog</h2>
$("#example-prompt-1").click(function() { bootpopup.prompt("Name"); });
$("#example-prompt-2").click(function() { bootpopup.prompt("Age", "number"); });
$("#example-prompt-3").click(function() { bootpopup.prompt("Text", null, "Insert a random text:"); });
$("#example-prompt-4").click(function() { bootpopup.prompt("Text", function(data,e) { alert(JSON.stringify(data)); }); });
$("#example-prompt-4").click(function() { bootpopup.prompt("Text", function(data) { alert(data); }); });

$("#example-customized-1").click(function() {
bootpopup({
Expand All @@ -267,8 +267,8 @@ <h2 id="customized">Customized dialog</h2>
content: [ { img: {src: $('#link').val()}} ]});
}
}}],
cancel: function(data,e) { alert("Cancel"); },
ok: function(data,e) { alert("OK\n" + JSON.stringify(data)); },
cancel: function(data, array, event) { alert("Cancel"); },
ok: function(data,array, event) { alert("OK\n" + JSON.stringify(data)); },
complete: function() { alert("Complete"); },
});
});
Expand All @@ -283,8 +283,8 @@ <h2 id="customized">Customized dialog</h2>
'<p class="lead">Check out the <a href="#examples" data-scrollto="#examples">examples</a> to see how easy it is!</p>',
'Give us a rate 1-10:',
{ input: {type: "number", label: "Rate", name: "rate", value: "11"}}],
cancel: function(data,e) { alert("Cancel"); },
ok: function(data,e) { alert("OK\n" + JSON.stringify(data)); },
cancel: function(data, array, event) { alert("Cancel"); },
ok: function(data, array, event) { alert("OK\n" + JSON.stringify(data)); },
complete: function() { alert("Complete"); },
});
});
Expand Down

0 comments on commit 8dcf7e1

Please sign in to comment.