').attr({
id: chartID.substring(1)
}).css({
width : chartWidth + 'px',
height : chartHeight + 'px'})
.appendTo(canvasParent);
$(chartID).vectorMap({
map: 'usa_en',
backgroundColor: '#FFFFFF',
hoverOpacity: 0.5,
enableZoom: true,
showTooltip: true,
selectedColor: null,
hoverColor: null,
colors: {
mo: colorSelected,
fl: colorSelected,
tx: colorSelected,
or: colorSelected
},
onRegionClick: function(event, code, region){
event.preventDefault();
}
});
}
// Loads the actual map function
load_chart();
// Reloads the map function on window resize
$(window).resize(function () {
waitForFinalEvent(function(){
// functions here...
load_chart();
}, 500, uniqueTimeStamp + 15);
});
}
}
function qp_task_list(){
var taskList = '.card-task-list';
if($(taskList).length){
if($(taskList).closest('.card').hasClass('card-xs') || $(taskList).closest('.card').hasClass('card-sm') || $(taskList).closest('.card').hasClass('card-md') || $(taskList).closest('.card').hasClass('card-lg')){
qp_add_scrollbar(taskList, 'dark');
}
var taskListItem = taskList + ' .task-list-item .custom-control-label';
$(document).on('click', taskListItem, function(){
var checkedStatus = $(this).closest('.custom-control').find('.custom-control-input').is(':checked');
if(checkedStatus){
$(this).closest('.custom-control').find('.custom-control-input').prop('checked', false);
}else{
$(this).closest('.custom-control').find('.custom-control-input').prop('checked', true);
}
$(this).closest('.custom-control').toggleClass('active');
// Update task count
taskCount();
// This creates an "anti-active" class which prevents the item from being striked-out
if($(taskList).hasClass('no-strike-out')){
$(this).addClass('anti-active');
}
});
if(!$(taskList).hasClass('no-strike-out')){
$(taskListItem).each(function(){
var checkedStatus = $(this).closest('.custom-control').find('.custom-control-input').is(':checked');
// Wrap the checkbox label with a div
$(this).wrapInner("
");
if(checkedStatus){
$(this).closest('.custom-control').addClass('active');
// $(this).addClass('active');
}
});
}
// Get the starting task count
taskCount();
$(taskList).find(".task-item-controls .show-task").on("click", function(e){
$(this).closest(".task-list-item").find(".task-item-details").slideToggle(300);
e.preventDefault();
});
// Count Completed & Total Tasks
function taskCount(addCount){
if(typeof(addCount) === 'undefined'){
addCount = 0;
}
var tasksCompleted = $(taskListItem).closest('.card-task-list').find(".active").length + addCount;
var tasksTotal = $(taskListItem).closest('.card-task-list').find(".task-list-item").length;
$(taskListItem).closest('.card').find(".card-header .task-list-stats .task-list-completed").text(tasksCompleted);
$(taskListItem).closest('.card').find(".card-header .task-list-stats .task-list-total").text(tasksTotal);
// Update Progress Bar
var completionPercentage = (tasksCompleted / tasksTotal) * 100;
var progressBar = $(taskListItem).closest('.card').find(".card-header .progress-bar");
progressBar.css({"width": completionPercentage + "%"}).attr("aria-valuenow", completionPercentage);
}
}
}
function qp_task_manager(){
var placeholder = ".create-task-block";
if($(placeholder).length){
/* Get Predefined User List. This function contains SAMPLE DATA. Please go through it and add your own data. */
var users = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'assets/plugins/typeahead/json/data-sample-users.json' // SAMPLE DATA: You will have to pass data from your database instead
});
users.initialize();
var elt = $(placeholder).find(".input-task-users");
elt.tagsinput({
tagClass: 'badge badge-primary',
itemValue: 'value',
itemText: 'text',
typeaheadjs: {
name: 'users',
displayKey: 'text',
source: users.ttAdapter()
}
});
/* Disable "Optional" checkbox when task is set to High or Critical */
// Critical = 4, High = 3
var taskPriority = $(placeholder).find(".input-task-priority");
if((taskPriority.val() == 4) || (taskPriority.val() == 3)){
$(placeholder).find(".input-task-optional").attr("disabled", true);
$(placeholder).find(".input-task-optional").removeAttr("checked");
}else{
$(placeholder).find(".input-task-optional").removeAttr("disabled");
}
taskPriority.on("change", function(){
if((taskPriority.val() == 4) || (taskPriority.val() == 3)){
$(placeholder).find(".input-task-optional").attr("disabled", true);
$(placeholder).find(".input-task-optional").removeAttr("checked");
var optionalTask = $(placeholder + ' .input-task-optional-checkbox.custom-checkbox');
optionalTask.button('reset');
}else{
$(placeholder).find(".input-task-optional").removeAttr("disabled");
}
});
/* Create Task */
$(".assign-task").on("click", function(){
var taskTitle = $(this).closest(".create-task-block").find(".input-task-title").val().trim();
var taskDetails = $(this).closest(".create-task-block").find(".input-task-details").val().replace(/\n/g, '
').trim();
if(taskDetails == ""){
taskDetails = '
(no description provided)';
}
var taskUsers = $(this).closest(".create-task-block").find(".input-task-users").val().trim();
var taskUsersObj = $(this).closest(".create-task-block").find(".input-task-users").tagsinput('items');
var taskOptional = $(this).closest(".create-task-block").find(".input-task-optional").is(":checked");
var taskPriority = $(this).closest(".create-task-block").find(".input-task-priority").val();
/* USE AJAX TO CALL YOUR DATABASE/SERVER HERE - START */
// On success, run the code below
/* --- RUN THIS CODE - START ---*/
var taskUsersContent = [];
for(var n = 0; n < taskUsersObj.length; n++){
var tempUserName = taskUsersObj[n].text;
var tempUserImage = taskUsersObj[n].image;
var tempString = '
';
taskUsersContent.push(tempString);
};
taskUsersContent = taskUsersContent.join("");
if(taskTitle == ""){
$(this).closest(".create-task-block").find(".input-task-title").focus();
}else if(taskUsers == ""){
$(this).closest(".create-task-block").find(".tt-input").focus();
// elt.tagsinput('add', { "value": 1, "text": "Ken Adams (Auto)", "image": "http://placehold.it/25x25"});
}else{
var taskManagerContainer = $(this).closest(".task-manager");
var taskManagerTaskList = $(this).closest(".task-manager").find(".card-task-list");
var priorityBadge = "";
var optionalBadge = "";
if(taskOptional){
optionalBadge = '
Optional';
}
// Critical = 4, High Prority = 3, Normal = 2, Low Priority = 1
// If priority is either High or Critical, the optional badge will not be displayed
if((taskPriority === undefined) || (taskPriority === null) || (taskPriority === 2)){
priorityBadge = "";
}else if(taskPriority == 1){
priorityBadge = '
Low Priority ';
}else if(taskPriority == 3){
priorityBadge = '
High Priority ';
optionalBadge = "";
}else if(taskPriority == 4){
priorityBadge = '
Critical ';
optionalBadge = "";
}else{
priorityBadge = "";
}
var newTaskContent = '
' + taskDetails + '
' + taskUsersContent + '
';
taskManagerContainer.find(".card-task-list .task-list").prepend(newTaskContent);
taskManagerTaskList.find(".task-list-item").first().delay(200).animate({"opacity":"1"}, 300, function(){
$(this).removeAttr('style');
$(this).find(".task-item-users").attr("data-assigned-users",taskUsers);
var optionalTask = $(this).find('.custom-checkbox');
// optionalTask.on('click', function(){
// $(this).button('toggle');
// });
$(this).find(".task-item-controls .show-task").on("click", function(e){
$(this).closest(".task-list-item").find(".task-item-details").slideToggle(300);
e.preventDefault();
});
if(taskManagerTaskList.hasClass('no-strike-out')){
$(this).find('.custom-checkbox').addClass('anti-active');
}
taskCount();
});
// // Update Count
// taskCount();
// Finally, clear form and prep for next task
$(this).closest(".create-task-block").find(".input-task-title").val("");
$(this).closest(".create-task-block").find(".input-task-details").val("");
}
/* --- RUN THIS CODE - END ---*/
/* USE AJAX TO CALL YOUR DATABASE/SERVER HERE - END */
});
/* Delete Task */
$('#delete-task').on('click', function(e){
e.preventDefault();
$(this).closest('.card').find('.card-task-list .task-list .task-list-item .custom-checkbox.active').closest('.task-list-item').velocity('slideUp', {
easing: 'easeOutCubic',
duration: dynamicDuration,
delay: dynamicDelay,
complete:
function(elements){
$(this).remove();
taskCount();
}
});
});
// Count Completed & Total Tasks
function taskCount(){
var taskManagerTaskList = $(".task-manager .card-task-list");
var tasksTotal = taskManagerTaskList.find(".task-list-item").length;
taskManagerTaskList.siblings('.card-header').find(".task-list-stats .task-list-total").text(tasksTotal);
}
}
}
function qp_timeline(){
var timelineContainer = '.timeline';
if($(timelineContainer).length){
$(timelineContainer).each(function(){
$(this).timelify({
animRight: "fadeInRight",
animLeft: "fadeInLeft",
animCenter: "fadeInUp"
});
});
}
}
function qp_calendar(){
var calendarContainer = '#calendar';
if($(calendarContainer).length){
/* Update the preview text */
$('#input-new-event').on('keyup input', function(){
$('#preview-event-name').text($('#input-new-event').val());
});
/* Set Event Color In Dropdown List */
$(calendarContainer).closest(".card-body").find(".calendar-controls .create-event .dropdown-menu .legend-block-item .legend-block-color-box, .calendar-controls .available-events .fc-event .legend-block-item .legend-block-color-box").each(function(){
// Set variables
var eventColor = $(this).data("event-color");
var highlightColor = "highlight-color-" + eventColor;
var bgColor = "highlight-color-" + eventColor;
// Set Dropdown Color
$(this).addClass(bgColor);
});
/* Create Event */
$("#add-available-event").on("click", function(){
// Set variables
var eventColorActive = $(this).siblings(".dropdown-menu").find(".legend-block-item.active .legend-block-color-box").data("event-color");
var eventName = $(this).parent().siblings("#input-new-event").val().trim();
$(this).parent().siblings("#input-new-event").val("");
// Actual event creation
if(eventName != ""){
var newEventContent = "
";
$(this).closest(".calendar-controls").find(".available-events .event-list").prepend(newEventContent);
$(this).closest(".calendar-controls").find(".available-events .fc-event").first().delay(200).animate({"opacity":"1"}, 300);
$(this).closest(".card-body").find('.calendar-controls .fc-event').each(function(){
var thisEventColor = $(this).find(".legend-block-color-box").data("event-color");
// create an Event Object
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()), // use the element's text as the event title
className: "highlight-color-" + thisEventColor, // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('event', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
// Return text to default
$('#preview-event-name').text('Your Event Name');
}else{
$("#input-new-event").focus();
}
});
/* Call Functions getActiveColor() */
// Set Event Colors
getActiveColor();
/* Set Active Icon Color */
/**
* getActiveColor handles the selected colors
*/
function getActiveColor(){
var eventColorActive = $(calendarContainer).closest(".card-body").find(".calendar-controls .create-event .dropdown-menu .legend-block-item.active .legend-block-color-box").data("event-color");
// Set data-event-color. Then create the highlight class
var theButton = $(calendarContainer).closest(".card-body").find(".calendar-controls .create-event .dropdown-toggle");
var colorIndicator = $('.event-preview-item .legend-block-color-box');
// theButton.attr("data-event-color",eventColorActive);
theButton.addClass("highlight-color-" + eventColorActive);
colorIndicator.addClass("highlight-color-" + eventColorActive);
// Change the active icon color on click
var listItem = $(calendarContainer).closest(".card-body").find(".calendar-controls .create-event .dropdown-menu .legend-block-item");
listItem.on("click", function(){
var newEventColor = $(this).find(".legend-block-color-box").data("event-color");
var regex = new RegExp('\\b' + 'highlight-color-' + '.+?\\b', 'g');
theButton[0].className = theButton[0].className.replace(regex, '');
theButton.addClass("highlight-color-" + newEventColor);
colorIndicator.removeAttr('class').addClass("legend-block-color-box highlight-color-" + newEventColor);
// Remove active class from siblings then add to this item
$(this).siblings().removeClass("active");
$(this).addClass('active');
$("#input-new-event").focus();
});
}
/* Initialize the external events */
$(calendarContainer).closest(".card-body").find('.calendar-controls .fc-event').each(function() {
var thisEventColor = $(this).find(".legend-block-color-box").data("event-color");
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
className: "highlight-color-" + thisEventColor, // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* Initialize the calendar */
$(calendarContainer).fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
themeSystem: 'bootstrap3',
defaultDate: '2017-11-12',
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2017-11-01',
className: "highlight-color-red"
},
{
title: 'Long Event',
start: '2017-11-07',
end: '2017-11-10',
className: "highlight-color-yellow"
},
{
id: 999,
title: 'Repeating Event',
start: '2017-11-09T16:00:00',
color: "#ff0097"
},
{
id: 999,
title: 'Repeating Event',
start: '2017-11-16T16:00:00',
className: "highlight-color-purple"
},
{
title: 'Conference',
start: '2017-11-11',
end: '2017-11-13',
className: "highlight-color-green"
},
{
title: 'Meeting',
start: '2017-11-12T10:30:00',
end: '2017-11-12T12:30:00',
className: "highlight-color-green"
},
{
title: 'Lunch',
start: '2017-11-12T12:00:00',
color: "#6ec06e"
},
{
title: 'Meeting',
start: '2017-11-12T14:30:00',
className: "highlight-color-red"
},
{
title: 'Happy Hour',
start: '2017-11-12T17:30:00',
className: "highlight-color-red"
},
{
title: 'Dinner',
start: '2017-11-12T20:00:00',
className: "highlight-color-blue"
},
{
title: 'Birthday Party',
start: '2017-11-13T07:00:00'
},
{
title: 'Click for Google',
url: 'https://base5builder.com/',
start: '2017-11-28'
}
],
drop: function() {
$(this).remove();
},
eventAfterAllRender: function() {
$(calendarContainer).find('.glyphicon.glyphicon-chevron-right').removeAttr('class').addClass('batch-icon batch-icon-arrow-right');
$(calendarContainer).find('.glyphicon.glyphicon-chevron-left').removeAttr('class').addClass('batch-icon batch-icon-arrow-left');
}
});
}
}
function qp_mailbox_list(){
var placeholder = '.mailbox-email-list';
if($(placeholder).length){
// First clear all checkboxes on page load
$(placeholder + ' .email-item-checkbox .custom-control-input').removeAttr('checked');
/* Select All Feature */
var selectAll = $(placeholder + ' .email-select-all .custom-checkbox');
selectAll.on('click', function(){
if($(this).hasClass('active')){
$(this).find('.custom-control-input').removeAttr('checked');
$(placeholder + ' .email-item-checkbox .custom-control-input').removeAttr('checked');
$(this).removeClass('active');
// Then disable the menu controls
$(placeholder + ' .mailbox-control-group .btn').addClass('disabled');
$(placeholder + ' tr').removeClass("highlighted");
}else{
$(this).find('.custom-control-input').attr('checked', 'checked');
$(placeholder + ' .email-item-checkbox .custom-control-input').attr('checked', 'checked');
$(this).addClass('active');
// Then enable the menu controls
$(placeholder + ' .mailbox-control-group .btn').removeClass('disabled');
$(placeholder + ' tr').addClass("highlighted");
}
return false;
});
// Individual Checkbox
$(placeholder + ' .email-item-checkbox').on('click', function(){
var thisCheckbox = $(this);
var checkedCount = 0;
if(thisCheckbox.find('.custom-control-input').is(':checked')){
thisCheckbox.find('.custom-control-input').removeAttr('checked');
thisCheckbox.closest('tr').removeClass("highlighted");
// Then disable the menu controls
thisCheckbox.closest('tr').siblings('tr').each(function(){
if($(this).find('.custom-control-input').is(':checked')){
checkedCount++;
}
});
if(checkedCount < 1){
$(placeholder + ' .mailbox-control-group .btn').addClass('disabled');
}
}else{
thisCheckbox.find('.custom-control-input').attr('checked', 'checked');
thisCheckbox.closest('tr').addClass("highlighted");
// Then enable the menu controls
$(placeholder + ' .mailbox-control-group .btn').removeClass('disabled');
}
return false;
});
/* B5B Documentation: Control Actions - You will have to connect your Server and Database to these code chunks - Start */
// Refresh Email
$(".email-refresh").on("click", function(e){
// B5B Documentation:
// Use Ajax to pull your own data from the database
// ADD YOUR AJAX CODE HERE. On success, call the code below or write a one that suits your needs
// B5B Documentation: End
location.reload();
e.preventDefault();
});
// Mark Read
$(".email-mark-read").on("click", function(e){
// B5B Documentation:
// Use Ajax to pull your own data from the database
// ADD YOUR AJAX CODE HERE. On success, call the code below or write a one that suits your needs
// B5B Documentation: End
$(".mailbox-email-list tr").each(function(){
if($(this).hasClass('email-status-unread') && $(this).find('.email-checkbox .custom-control-input').is(':checked')){
$(this).removeClass("email-status-unread");
}else if(!$(this).hasClass('email-status-unread') && $(this).find('.email-checkbox .custom-control-input').is(':checked')){
$(this).addClass("email-status-unread");
}
});
// After mark as read, then change the button to mark as unread and allow the person to click the button again. Maybe just change the icon to something else
e.preventDefault();
});
// Delete Email
$(".email-delete").on("click", function(e){
// B5B Documentation:
// Use Ajax to pull your own data from the database
// ADD YOUR AJAX CODE HERE. On success, call the code below or write a one that suits your needs
// B5B Documentation: End
$(".mailbox-email-list tr").each(function(){
if($(this).find('.email-checkbox .custom-control-input').is(':checked')){
// $(this).removeClass("email-status-unread");
$(this).velocity('slideUp', {
easing: 'easeOutCubic',
duration: dynamicDuration,
delay: dynamicDelay,
complete:
function(elements){
// callback here
$(this).remove();
}
});
}
});
$(".alert").remove();
var messageDeleteText = '
Deleted! Email(s) deleted.';
var messageDelete = '
' + messageDeleteText + '
';
$(".mailbox-controls").after(messageDelete);
$(".alert").animate({"opacity":1}, 300);
$(".email-mark-read, .email-mark-important, .email-mark-junk, .email-delete").addClass("disabled");
selectAll.find('.custom-control-input').removeAttr('checked');
e.preventDefault();
});
// Mark as Junk
$(".email-mark-junk").on("click", function(e){
// B5B Documentation:
// Use Ajax to pull your own data from the database
// ADD YOUR AJAX CODE HERE. On success, call the code below or write a one that suits your needs
// B5B Documentation: End
$(".mailbox-email-list tr").each(function(){
if($(this).find('.email-checkbox .custom-control-input').is(':checked')){
// $(this).removeClass("email-status-unread");
$(this).velocity('slideUp', {
easing: 'easeOutCubic',
duration: dynamicDuration,
delay: dynamicDelay,
complete:
function(elements){
// callback here
$(this).remove();
}
});
}
});
$(".alert").remove();
var messageJunkText = '
Moved! Email(s) have been moved to the Junk Folder.';
var messageJunk = '
' + messageJunkText + '
';
$(".mailbox-controls").after(messageJunk);
$(".alert").animate({"opacity":1}, 300);
$(".email-mark-read, .email-mark-important, .email-mark-junk, .email-delete").addClass("disabled");
selectAll.find('.custom-control-input').removeAttr('checked');
e.preventDefault();
});
/* Control Actions - You will have to connect your Server and Database to these code chunks - End */
/* Individual Email Features */
$(".mailbox-email-list tr").each(function(){
/* Star Email Feature */
$(this).find(".email-star").on("click", function(){
$(this).find(".email-star-status").toggleClass("checked");
});
/* Get and Set Email URL */
var emailURL = $(this).data("email-url");
$(this).find(".email-sender, .email-subject, .email-datetime").on("click", function(){
window.location.href = emailURL;
});
});
}
}
function qp_mailbox_message_view(){
if($("#show-others").length){
$("#show-others").on("click", function(e){
$(".message-recepient-others").slideToggle(300);
e.preventDefault();
});
}
}
function qp_mailbox_message_compose(){
var placeholder = $('.email-recepient');
if(placeholder.length){
/* Handles Email Input */
placeholder.each(function(e){
var placeholderObj = $(this);
var itemExists = false;
var emails = {};
emails["email" + e] = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: 'assets/plugins/typeahead/json/data-sample-emails.json'
}
});
emails["email" + e].initialize();
placeholderObj.tagsinput({
// NOT TO SELF: BEcause itemValue and itemText are set, you cannot add "free texts" that don't exist is the json...
// Need solution
tagClass: function(item) {
if(placeholderObj.hasClass("email-recepient-main")){
return 'badge badge-success';
}else if(placeholderObj.hasClass("email-recepient-cc")){
return 'badge badge-primary';
}else if(placeholderObj.hasClass("email-recepient-bcc")){
return 'badge badge-secondary';
}else{
return 'badge badge-info';
}
},
itemValue: function(item){
return item.value;
},
itemText: function(item){
if(item.text == item.email){
return item.email;
}else{
return item.text + " (" + item.email + ")";
}
},
typeaheadjs: {
name: 'emails',
displayKey: 'text',
source: emails["email" + e].ttAdapter()
}
});
placeholderObj.on('itemAdded', function(event){
itemExists = 1;
});
if(!itemExists){
placeholderObj.siblings(".bootstrap-tagsinput").find('input.tt-input').bind("enterKey",function(e){
var newEmail = $(this).val();
var isValidEmail = qp_form_validation(newEmail, "email");
if($(this).val().trim() != ""){
if(isValidEmail == true){
// dynamicID is for DEMO PURPOSES ONLY. You will have to use the ID generated by your Database or Server,
// so you don't wipe out othe email addresses.
var dynamicID = placeholderObj.siblings(".bootstrap-tagsinput").find(".tag").length + 1000;
placeholderObj.tagsinput('add', {"value": dynamicID, "text": newEmail, "email": newEmail});
$(this).val('');
placeholderObj.siblings(".bootstrap-tagsinput").find(".tag").last().removeAttr("class").addClass("tag label label-default");
placeholderObj.parent().find(".help-block.text-danger").fadeOut(300, function(){
$(this).remove();
});
}else{
// display error message
placeholderObj.parent().find(".help-block.text-danger").remove();
var errorMessage = '
' + isValidEmail + '
';
placeholderObj.parent().append(errorMessage);
placeholderObj.parent().find(".help-block.text-danger").fadeIn(300);
}
}
});
placeholderObj.siblings(".bootstrap-tagsinput").find('input.tt-input').keydown(function(e){
if(e.keyCode == 13){
$(this).trigger("enterKey");
e.preventDefault();
}
});
}
});
// Bug fix: Removes duplicate email from Tags Input's input field when field is no longer in focus
$("input.tt-input, input.tt-hint").on("blur", function(){
$("input.tt-input, input.tt-hint").val("");
});
// DEMO ONLY: Delete on production site - Start
$("#email-recepient-main").tagsinput('add', {"value": 5, "text": "Teal'c Jafar", "email": "tealc@example.com"});
$("#email-recepient-cc").tagsinput('add', {"value": 2, "text": "Samantha Carter", "email": "samantha@example.com"});
$("#email-recepient-cc").tagsinput('add', {"value": 4, "text": "Danielle Jackson", "email": "danielle@example.com"});
$("#email-recepient-bcc").tagsinput('add', {"value": 6, "text": "George Hammond", "email": "george@example.com"});
$("#email-recepient-bcc").tagsinput('add', {"value": 3, "text": "Jack O'Neill", "email": "jack@example.com"});
// DEMO ONLY: Delete on production site - End
// Fix width on Tags Input field
$("input.tt-input, input.tt-hint").css({"width":"auto"});
/* Handles Show/Hide Cc/Bcc */
$("#add-cc").on("click", function(e){
$(".email-recepient-cc-container").slideToggle(300);
$(this).fadeToggle(300);
e.preventDefault();
});
$("#remove-cc").on("click", function(e){
$(".email-recepient-cc-container").slideToggle(300);
$(".email-recepient-cc").tagsinput('removeAll');
$("#add-cc").fadeToggle(300);
e.preventDefault();
});
$("#add-bcc").on("click", function(e){
$(".email-recepient-bcc-container").slideToggle(300);
$(this).fadeToggle(300);
e.preventDefault();
});
$("#remove-bcc").on("click", function(e){
$(".email-recepient-bcc-container").slideToggle(300);
$(".email-recepient-bcc").tagsinput('removeAll');
$("#add-bcc").fadeToggle(300);
e.preventDefault();
});
/* Handles Email Body */
// CKEditor
// CKEditor is automatically loaded when the 'load-ckeditor' class is used
/* Handles Email Sending */
$("#send-email").on("click", function(e){
e.preventDefault();
// B5B Documentation:
// The variables avalable once you press "send" are at the end of this function
// Use them in creating your email app
// B5B Documentation:
// IMPORTANT: Please read the documentation concerning Bootstrap Tags Input in order to get the data in the way you need it
var emailsMainObj = $("#email-recepient-main").tagsinput('items');
var emailsCcObj = $("#email-recepient-cc").tagsinput('items');
var emailsBccObj = $("#email-recepient-bcc").tagsinput('items');
var emailsMain = [];
var emailsCc = [];
var emailsBcc = [];
var emailSubject = $("#email-subject").val().trim();
if(emailsMainObj == ""){
$(".alert").remove();
var errorMessage = '
ERROR (DEMO ONLY)
The "To" field cannot be empty
';
$(".mailbox-controls").after(errorMessage);
$(".mailbox-controls").next().fadeIn(300);
}else if(emailSubject == ""){
$(".alert").remove();
var errorMessage = '
ERROR (DEMO ONLY)
The "Subject" field cannot be empty
';
$(".mailbox-controls").after(errorMessage);
$(".mailbox-controls").next().fadeIn(300);
}else{
$(".alert").remove();
// DEMO ONLY: The code below only collects the data from the email form and displays it for demo purposes only. You will have to alter it and connect your Database and Server in order to store the data.
for(var i = 0; i < emailsMainObj.length; i++){
emailsMain.push(emailsMainObj[i].email);
};
var emailsMainRecepient = "
To: " + emailsMain.toString() + "
";
for(var i = 0; i < emailsCcObj.length; i++){
emailsCc.push(emailsCcObj[i].email);
};
var emailsCcText = "
Cc: " + emailsCc.toString() + "
";
for(var i = 0; i < emailsBccObj.length; i++){
emailsBcc.push(emailsBccObj[i].email);
};
var emailsBccText = "
Bcc: " + emailsBcc.toString() + "
";
// Main Message Content
var emailContent = $("#email-body").html();
var successMessage = '
MESSAGE SENT (DEMO ONLY)
' + emailsMainRecepient + emailsCcText + emailsBccText + '
';
$(".mailbox-controls").eq(0).after(successMessage);
$(".mailbox-controls").next().fadeIn(300);
// B5B Documentation:
// The following variables contain the output once you click "send"
// Use them in creating your email app
//
// emailsMainRecepient : The main recepients of the emails
// emailsCcText : The CC emails
// emailsBccText : The BCC emails
// emailContent : The body of the email
}
});
}
}
function qp_datatables(){
// All datatables must have the class ".datatables" added to their table tag
var placeholder = '.table-datatable';
if($(placeholder).length){
$(placeholder).each(function(){
$(this).DataTable();
});
}
}
function qp_form_wizard(){
var thisForm = '#rootwizard-1';
if($(thisForm).length){
// Prevent page from jumping when +
$('.pager li a, .pager li span').on('click', function(e){
e.preventDefault();
});
var wizardStagesTotal = $(thisForm + ' .tab-pane').length;
$(thisForm).bootstrapWizard({onNext: function(tab, navigation, index) {
// Note: index is the next frame not the current one
if(index == 1) {
if(qp_form_validation('#wizard-stage-1 .wizard-stage-1-username', 'alphanumeric') !== true){
return false;
}
if(qp_form_validation('#wizard-stage-1 .wizard-stage-1-email', 'email') !== true){
return false;
}
if(qp_form_validation('#wizard-stage-1 .wizard-stage-1-password', 'password') !== true){
return false;
}
// $('#tab1').removeClass('active');
// $('#tab2').addClass('active');
}
if(index == 2){
$(".form-wizard-review-block").html("");
$(".form-wizard-review-block").append("
Username: " + $(".wizard-stage-1-username").val() + "
");
$(".form-wizard-review-block").append("
Email: " + $(".wizard-stage-1-email").val() + "
");
$(".form-wizard-review-block").append("
password: *******
");
$(".form-wizard-review-block").append("
Telephone: " + $(".wizard-stage-2-optional-1").val() + "
");
$(".form-wizard-review-block").append("
Your Address: " + $(".wizard-stage-2-optional-2").val() + "
");
$(".form-wizard-review-block").append("
Write something about yourself: " + $(".wizard-stage-2-optional-3").val() + "
");
// $('#tab2').removeClass('active');
// $('#tab3').addClass('active');
}
if(index <= wizardStagesTotal){
$(thisForm + ' .tab-pane').eq(index).addClass('active');
$(thisForm + ' .tab-pane').eq(index - 1).removeClass('active');
}
}, onPrevious: function(tab, navigation, index) {
// Note: index is the previous frame not the current one
if(index !== -1){
$(thisForm + ' .tab-pane').eq(index).addClass('active');
$(thisForm + ' .tab-pane').eq(index + 1).removeClass('active');
}
}, onTabShow: function(tab, navigation, index) {
// Update Progress Bar
var total = navigation.find('li').length;
var current = index + 1;
var completionPercentage = (current / total) * 100;
var progressBar = $(thisForm).closest('.card').find(".card-header .progress-bar");
progressBar.css({"width": completionPercentage + "%"}).attr("aria-valuenow", completionPercentage);
}, onTabClick: function(tab, navigation, index){
return false;
}});
}
}
/**
* @param {string} fieldID: the ID of the field you are validating
* @param {string} type: accepts: [email, numeric, alphanumeric, alphabet, password]
* @param {int} required: (optional field) accepts: 0 or 1. whether or not this feild is required
* @param {integer} lengthMin: (optional field) the min length of the password
* @param {integer} lengthMax: (optional field) the max length of the password
* @return {string, integer or Boolean} this will return an error message or boolean or integer
*/
function qp_form_validation(fieldID, type, required, lengthMin, lengthMax){
/* Set defaults */
if(required === undefined || !required || required == ""){
required = 0;
}else{
required = 1;
}
if(lengthMin === undefined || !lengthMin || lengthMin == ""){
lengthMin = 6;
}
if(lengthMax === undefined || !lengthMax || lengthMax == ""){
lengthMax = 30;
}
var value = $(fieldID).val();
$(fieldID).closest('form').find('*').removeClass('border-danger');
$(fieldID).closest('form').find('*').removeClass('has-danger');
$(fieldID).closest('form').find('*').removeClass('text-danger');
$(fieldID).closest('form').find('.form-control-feedback').remove();
/* Calls the appropriate function based on the "type" variable */
switch(type){
case "email":
if((required) && (value.trim() == "")){
var message = "This field is required.";
return message;
}
if(qp_form_validate_email(value) === true){
return true;
}else{
var message = '
Please enter a valid email.
';
$(fieldID).after(message);
$(fieldID).addClass('border-danger');
$(fieldID).closest('.form-group').addClass('has-danger');
$(fieldID).closest('.form-group').find('label').addClass('text-danger');
return false;
}
break;
case "numeric":
if((required) && (value.trim() == "")){
var message = '
This field is required.
';
$(fieldID).after(message);
$(fieldID).addClass('border-danger');
$(fieldID).closest('.form-group').addClass('has-danger');
$(fieldID).closest('.form-group').find('label').addClass('text-danger');
return false;
}
if(qp_form_validate_numeric(value) === true){
return true;
}else{
var message = '
Please enter numbers only.
';
$(fieldID).after(message);
$(fieldID).addClass('border-danger');
$(fieldID).closest('.form-group').addClass('has-danger');
$(fieldID).closest('.form-group').find('label').addClass('text-danger');
return false;
}
break;
case "alphanumeric":
if((required) && (value.trim() == "")){
var message = '
This field is required.
';
$(fieldID).after(message);
$(fieldID).addClass('border-danger');
$(fieldID).closest('.form-group').addClass('has-danger');
$(fieldID).closest('.form-group').find('label').addClass('text-danger');
return false;
}
if(qp_form_validate_alphanumeric(value) == true){
return true;
}else{
var message = '
This field allows only letters numbers, commas and fullstops but NO spaces.
';
$(fieldID).after(message);
$(fieldID).addClass('border-danger');
$(fieldID).closest('.form-group').addClass('has-danger');
$(fieldID).closest('.form-group').find('label').addClass('text-danger');
return false;
}
break;
case "alphabet":
if((required) && (value.trim() == "")){
var message = '
This field is required.
';
$(fieldID).after(message);
$(fieldID).addClass('border-danger');
$(fieldID).closest('.form-group').addClass('has-danger');
$(fieldID).closest('.form-group').find('label').addClass('text-danger');
return false;
}
if(qp_form_validate_alphabet(value) == true){
return true;
}else{
var message = '
This field allows letters only.
';
$(fieldID).after(message);
$(fieldID).addClass('border-danger');
$(fieldID).closest('.form-group').addClass('has-danger');
$(fieldID).closest('.form-group').find('label').addClass('text-danger');
return false;
}
break;
case "password":
if((required) && (value.trim() == "")){
var message = '
This field is required.
';
$(fieldID).after(message);
$(fieldID).addClass('border-danger');
$(fieldID).closest('.form-group').addClass('has-danger');
$(fieldID).closest('.form-group').find('label').addClass('text-danger');
return false;
}
if(qp_form_validate_password(value, lengthMin, lengthMax) == true){
return true;
}else{
var message = '
' + qp_form_validate_password(value, lengthMin, lengthMax) + '
';
$(fieldID).after(message);
$(fieldID).addClass('border-danger');
$(fieldID).closest('.form-group').addClass('has-danger');
$(fieldID).closest('.form-group').find('label').addClass('text-danger');
return false;
}
break;
default:
if((required) && (value.trim() == "")){
var message = '
This field is required
';
$(fieldID).after(message);
$(fieldID).addClass('border-danger');
$(fieldID).closest('.form-group').addClass('has-danger');
$(fieldID).closest('.form-group').find('label').addClass('text-danger');
return false;
}
return true;
break;
}
/**
* qp_form_validate_email handles email validation
* @param {string} email: enter valid email
* @return {boolean}
*/
function qp_form_validate_email(email){
var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
}
/**
* qp_form_validate_numeric handles numeric validation
* @param {integer} numeric: enter numbers only
* @return {boolean}
*/
function qp_form_validate_numeric(numeric){
var reg = new RegExp("^[0-9]+$");
return reg.test(numeric);
}
/**
* qp_form_validate_alphanumeric handles text, numbers and space validation
* @param {string} alphanumeric: enter text, numbers and space only
* @return {boolean}
*/
function qp_form_validate_alphanumeric(alphanumeric){
var reg = new RegExp("^[a-zA-Z 0-9,.]+$");
return reg.test(alphanumeric);
}
/**
* qp_form_validate_alphabet handles text and space
* @param {string} alphabet: enter text and space
* @return {boolean}
*/
function qp_form_validate_alphabet(alphabet){
var reg = new RegExp("^[a-zA-Z ]+$");
return reg.test(alphabet);
}
/**
* qp_form_validate_password handles password validation
* @param {string} password: accepts alphanumeric characters
* @param {integer} lengthMin: the minimum length the password should be
* @param {integer} lengthMax: the maximum length the password should be
* @return {boolean or string} returns an error message or the boolean response
*/
function qp_form_validate_password(password, lengthMin, lengthMax){
var passwordLengthStatus = qp_form_validate_stringlength(password, lengthMin, lengthMax);
if(passwordLengthStatus != true){
return passwordLengthStatus;
}else{
var passwordStatus = qp_form_validate_alphanumeric(password);
if(passwordStatus == true){
return true;
}else{
var message = "Password field can only contain letters, numbers, commas and fullstops but NO spaces.";
return message;
}
}
}
/**
* qp_form_validate_stringlength checks the string length
* @param {string} str accepts any string
* @param {integer} lengthMin: the minimum length the password should be
* @param {integer} lengthMax: the maximum length the password should be
* @return {boolean or string} returns an error message or the boolean response
*/
function qp_form_validate_stringlength(str, lengthMin, lengthMax){
var n = str.length;
if(n < lengthMin){
var message = "This field must be at least " + lengthMin + " characters long";
return message;
}else if(n > lengthMax){
var message = "This field must not be more than " + lengthMax + " characters long";
return message;
}else{
return true;
}
}
}
function qp_gallery(galleryClass){
if($(galleryClass).length){
baguetteBox.run(galleryClass, {
fullScreen : false,
// Add other custom options here
});
}
}
/**
* REQUIRED FUNCTIONS - START
*/
// DO NOT REMOVE THIS!!!
qp_required_misc();
/* Resize certain elements on window resize */
// Copy the functions loaded above and paste them below. Only works for certain functions
// Line Charts functions should be copied here too
$(window).resize(function () {
waitForFinalEvent(function(){
// functions here...
}, 500, 'thisstringisunsdsaique');
});
/* REQUIRED FUNCTIONS - END */
/**
* DEMO USE ONLY - START
* Do not copy the content below when you are building your site.
*/
qp_line_chart('#sales-overview');
qp_doughnut_pie_chart('#traffic-source');
qp_map_chart('#customer-location');
qp_bar_chart('#profit-loss');
qp_line_chart('#database-load');
qp_task_list();
qp_timeline();
qp_calendar();
qp_task_manager();
qp_mailbox_list();
qp_mailbox_message_view();
qp_mailbox_message_compose();
qp_datatables();
qp_form_validation();
qp_form_wizard();
qp_dial_chart('#epc-demo-1');
qp_dial_chart('#epc-demo-2');
qp_dial_chart('#epc-demo-3');
qp_dial_chart('#epc-demo-4');
qp_dial_chart('#epc-demo-5');
qp_dial_chart('#epc-demo-6');
// ecommerce-dashboard.html
qp_bar_chart('#average-order-value', 'bar', true);
qp_map_chart('#most-active-salesforce');
// ui-charts.html
qp_line_chart('#demo-line-chart');
qp_bar_chart('#demo-bar-chart');
qp_bar_chart('#demo-stacked-chart');
qp_bar_chart('#demo-horizontal-chart', 'horizontalBar', true);
qp_doughnut_pie_chart('#demo-doughnut-chart');
qp_doughnut_pie_chart('#demo-pie-chart', 'pie');
qp_doughnut_pie_chart('#demo-radar-chart', 'polarArea');
qp_gallery('.qp-gallery-one');
qp_gallery('.qp-gallery-two');
/* Resize certain elements on window resize */
// Copy the functions loaded above and paste them below. Only works for certain functions
$(window).resize(function () {
waitForFinalEvent(function(){
// functions here...
qp_line_chart('#sales-overview');
qp_line_chart('#database-load');
qp_bar_chart('#profit-loss');
// ecommerce-dashboard.html
qp_bar_chart('#average-order-value', 'bar', true);
// ui-charts.html
qp_line_chart('#demo-line-chart');
qp_bar_chart('#demo-bar-chart');
qp_bar_chart('#demo-stacked-chart');
qp_bar_chart('#demo-horizontal-chart', 'horizontalBar', true);
}, 500, 'thisstringisuniquedemo');
});
/* DEMO CALLS - END */
});