Skip to content

Instantly share code, notes, and snippets.

@dz1984

dz1984/Beepbox.js

Last active August 29, 2015 14:10
Show Gist options
  • Save dz1984/09474049927ac0ee4789 to your computer and use it in GitHub Desktop.
Save dz1984/09474049927ac0ee4789 to your computer and use it in GitHub Desktop.
Download ZIP
A tiny Javvasript library to create programmatic dialog boxes using Bootstrap modals.
Raw
Beepbox.js
/**
* A tiny Javvasript library to create programmatic dialog boxes using Bootstrap modals.
*
* (require the bootstrap )
*
* @referenc: http://bootboxjs.com
* @author: Donald Zhan
*
* @examples
*
* # Alert
* Turn on the alert popup box.
*
* Beepbox.alert('Alert without the callback.');
*
* Beepbox.alert('Alert with the callback.', function() {
* console.log('Alert callback');
* });
*
* # Info
* Turn on the info popup box.
*
* Beepbox.info('Info without the callback');
*
* Beepbox.info('Info with the callback', function() {
* console.log('Info callback');
* });
*
* # Messagebox
* Customize define the alert popup box.
*
* Beepbox.messagebox('Example Title',
* {
* message: 'This is a Messagebox',
* buttons: {
* ok: {
* label: 'Next',
* callback: function() {
* console.log('Messagebox callbox');
* }
* }
* }
* });
*
* # Confirm
* Must pass a callback function.
*
* Beepbox.confirm('Confirm must pass a callback', function() {
* console.log('Done');
* });
*
* # Dialog
* Customize define the any popup box. ( alert or confirm type)
*
* Beepbox.dialog(
* {
* type: 'confirm',
* title: '<i class="icon-question-sign"></i>Example Title',
* message: 'This is a Messagebox',
* buttons: {
* ok: {
* label: 'Yes',
* className: 'btn-primary'
* },
* cancel: {
* label: 'No',
* className: 'btn-warning'
* }
* }
* });
*
*/
(function(root, factory) {
"use strict";
if (typeof define === "function" && define.amd) {
define(["jquery"], factory);
} else if (typeof exports === "object") {
module.exports = factory(require("jquery"));
} else {
root.Beepbox = factory(root.jQuery);
}
})(this, function($) {
"use strict";
var cancelBtn, exports, okBtn, okCancelBtn, processCallback, templates,
trueFunc, makeButtonTpl;
templates = {
dialog: "<div class='beepbox modal fade'>" +
"<div class='modal-dialog'>" +
"<div class='modal-content'>" +
"<div class='bb-modal-body modal-body'>" +
"<div class='bb-modal-content'></div></div>" +
"</div><!-- end model-content -->" +
"</div><!-- end modal-dialog -->" +
"</div><!-- end modal -->",
header: "<div class='bb-modal-title modal-header'></div>",
footer: "<div class='bb-modal-footer modal-footer'><div class='bb-modal-buttons'></div></div>"
};
okBtn = {
'ok': {
label: 'Ok',
className: 'btn-primary',
callback: function(e) {
return true;
}
}
};
cancelBtn = {
'cancel': {
label: 'Cancel',
className: 'btn-danger',
callback: function(e) {
return true;
}
}
};
okCancelBtn = {
'ok': {
label: 'Ok',
className: 'btn-primary',
callback: function(e) {
return true;
}
},
'cancel': {
label: 'Cancel',
className: 'btn-danger',
callback: function(e) {
return true;
}
}
};
// always return true
trueFunc = function() {
return true;
};
// handle the callback after click the button
processCallback = function(e, dialog, callback) {
var preserveDialog;
e.stopPropagation();
e.preventDefault();
preserveDialog = $.isFunction(callback) && callback(e) === false;
if (!preserveDialog) {
dialog.modal('hide');
}
};
exports = {};
/**
* info popup box
*
*/
exports.info = function() {
var title = '<sapn class="glyphicon glyphicon-info-sign"></span> Information';
var args = [title];
$.each(arguments, function(k, v) {
args.push(v);
});
return exports.messagebox.apply(null, args);
};
/**
* alert popup box
*
*/
exports.alert = function() {
var title = '<sapn class="glyphicon glyphicon-alert"></span> Alert';
var args = [title];
$.each(arguments, function(k, v) {
args.push(v);
});
return exports.messagebox.apply(null, args);
};
/**
* messagebox popup box
*
*/
exports.messagebox = function() {
var options;
var defaultTitle = arguments[0];
var cusOptions = arguments[1];
if (typeof cusOptions === 'string') {
cusOptions = {title: defaultTitle, message: cusOptions};
}
if (arguments.length === 3 && typeof arguments[1] === 'string' && typeof arguments[2] === 'function') {
cusOptions = {
title: defaultTitle,
message: arguments[1],
buttons: {
ok: {
callback: arguments[2]
}
}
};
}
options = $.extend(true, {}, {
type: 'alert',
title: cusOptions.title || defaultTitle,
message: cusOptions.message || '',
buttons: okBtn
});
if (cusOptions.buttons !== void 0) {
$.each(cusOptions.buttons, function(key, button) {
var defaultBtn = options.buttons[key];
defaultBtn.label = button.label || defaultBtn.label;
defaultBtn.callback = button.callback || defaultBtn.callback;
defaultBtn.className = button.className || defaultBtn.className;
});
}
return exports.dialog(options);
};
/**
* confirm popup box
*
*/
exports.confirm = function(cusOptions) {
var options;
if (arguments.length === 2 && typeof arguments[0] === 'string' && typeof arguments[1] === 'function') {
cusOptions = {
message: arguments[0],
buttons: {
ok: {
callback: arguments[1]
}
}
};
}
options = $.extend(true, {}, {
type: 'confirm',
title: cusOptions.title || '<sapn class="glyphicon glyphicon-question-sign"></span> Information',
message: cusOptions.message || '',
buttons: okCancelBtn
});
if (cusOptions.buttons !== void 0) {
$.each(cusOptions.buttons, function(key, button) {
var defaultBtn = options.buttons[key];
defaultBtn.label = button.label || defaultBtn.label;
defaultBtn.callback = button.callback || defaultBtn.callback;
defaultBtn.className = button.className || defaultBtn.className;
});
}
return exports.dialog(options);
};
/**
* dialog popup box
*
*/
exports.dialog = function(options) {
var body, buttonTpl, buttons, callbacks, dialog;
if (typeof options !== 'object') {
throw new Error('Options is not object');
}
dialog = $(templates.dialog);
body = dialog.find('.bb-modal-body');
buttons = options.buttons;
buttonTpl = "";
callbacks = {
onEscape: options.onEscape
};
if ($.fn.modal === void 0) {
throw new Error("$.fn.modal is not defined");
}
$.each(buttons, function(key, button) {
var buttonStr = "";
button.className = button.className || '';
button.label = button.label || '';
buttonStr += '<button type="button" class="btn ' + button.className +
'" ';
buttonStr += 'data-btn-handler="' + key + '">' +
button.label + '</button>';
buttonTpl += buttonStr;
callbacks[key] = button.callback || trueFunc;
});
body.find('.bb-modal-content').html(options.message.replace(/\r?\n/g, '<br />'));
if (options.className) {
dialog.addClass(options.className);
}
if (options.title) {
body.before(templates.header);
dialog.find('.bb-modal-title').html(options.title);
}
if (buttonTpl.length) {
body.after(templates.footer);
dialog.find('.bb-modal-buttons').html(buttonTpl);
}
dialog.on('click', ".bb-modal-buttons .btn", function(e) {
var handlerName;
handlerName = $(this).data('btn-handler');
processCallback(e, dialog, callbacks[handlerName]);
});
dialog.on('hidden', function(e) {
if (e.target === this) {
dialog.remove();
}
});
dialog.modal('show');
return dialog;
};
/**
* hide all modals
*/
exports.hideAll = function() {
$('.beepbox').modal('hide');
};
/**
* return the beepbox version.
*/
exports.version = function() {
return 'v0.0.5';
};
/**
* initial this lib.
*/
exports.init = function(_$) {
return init(_$ || $);
};
return exports;
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Beepbox JS</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Beepbox Demo Button</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">
<button type="button" class="btn btn-default" data-demo="demo-alert">Alert</button>
<span>Turn on the alert popup box. </span>
</li>
<li class="list-group-item">
<button type="button" class="btn btn-default" data-demo="demo-info">Info</button>
<span>Turn on the info popup box.</span>
</li>
<li class="list-group-item">
<button type="button" class="btn btn-default" data-demo="demo-confirm">Confirm</button>
<span>Must pass a callback function.</span>
</li>
</ul>
</div>
</div>
</div>
<script src="Beepbox.js"></script>
<script>
$(document).ready(function(){
var action_list = {
'demo-alert': function() {
Beepbox.alert('Alert without the callback.');
},
'demo-info': function() {
Beepbox.info('Info without the callback');
},
'demo-confirm': function() {
Beepbox.confirm('Confirm must pass a callback', function() {
console.log('Done');
});
}
};
$('button').on('click', function() {
var class_name = $(this).data('demo');
action_list[class_name]();
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment