first commit - report data
This commit is contained in:
@@ -0,0 +1,267 @@
|
||||
"use strict";
|
||||
|
||||
(function($, window, i) {
|
||||
// Bootstrap 4 Modal
|
||||
$.fn.fireModal = function(options) {
|
||||
var options = $.extend({
|
||||
size: 'modal-md',
|
||||
center: false,
|
||||
animation: true,
|
||||
title: 'Modal Title',
|
||||
closeButton: true,
|
||||
header: true,
|
||||
bodyClass: '',
|
||||
footerClass: '',
|
||||
body: '',
|
||||
buttons: [],
|
||||
autoFocus: true,
|
||||
removeOnDismiss: false,
|
||||
created: function() {},
|
||||
appended: function() {},
|
||||
onFormSubmit: function() {},
|
||||
modal: {}
|
||||
}, options);
|
||||
|
||||
this.each(function() {
|
||||
i++;
|
||||
var id = 'fire-modal-' + i,
|
||||
trigger_class = 'trigger--' + id,
|
||||
trigger_button = $('.' + trigger_class);
|
||||
|
||||
$(this).addClass(trigger_class);
|
||||
|
||||
// Get modal body
|
||||
let body = options.body;
|
||||
|
||||
if(typeof body == 'object') {
|
||||
if(body.length) {
|
||||
let part = body;
|
||||
body = body.removeAttr('id').clone().removeClass('modal-part');
|
||||
part.remove();
|
||||
}else{
|
||||
body = '<div class="text-danger">Modal part element not found!</div>';
|
||||
}
|
||||
}
|
||||
|
||||
// Modal base template
|
||||
var modal_template = ' <div class="modal'+ (options.animation == true ? ' fade' : '') +'" tabindex="-1" role="dialog" id="'+ id +'"> ' +
|
||||
' <div class="modal-dialog '+options.size+(options.center ? ' modal-dialog-centered' : '')+'" role="document"> ' +
|
||||
' <div class="modal-content"> ' +
|
||||
((options.header == true) ?
|
||||
' <div class="modal-header"> ' +
|
||||
' <h5 class="modal-title">'+ options.title +'</h5> ' +
|
||||
((options.closeButton == true) ?
|
||||
' <button type="button" class="close" data-dismiss="modal" aria-label="Close"> ' +
|
||||
' <span aria-hidden="true">×</span> ' +
|
||||
' </button> '
|
||||
: '') +
|
||||
' </div> '
|
||||
: '') +
|
||||
' <div class="modal-body"> ' +
|
||||
' </div> ' +
|
||||
(options.buttons.length > 0 ?
|
||||
' <div class="modal-footer"> ' +
|
||||
' </div> '
|
||||
: '')+
|
||||
' </div> ' +
|
||||
' </div> ' +
|
||||
' </div> ' ;
|
||||
|
||||
// Convert modal to object
|
||||
var modal_template = $(modal_template);
|
||||
|
||||
// Start creating buttons from 'buttons' option
|
||||
var this_button;
|
||||
options.buttons.forEach(function(item) {
|
||||
// get option 'id'
|
||||
let id = "id" in item ? item.id : '';
|
||||
|
||||
// Button template
|
||||
this_button = '<button type="'+ ("submit" in item && item.submit == true ? 'submit' : 'button') +'" class="'+ item.class +'" id="'+ id +'">'+ item.text +'</button>';
|
||||
|
||||
// add click event to the button
|
||||
this_button = $(this_button).off('click').on("click", function() {
|
||||
// execute function from 'handler' option
|
||||
item.handler.call(this, modal_template);
|
||||
});
|
||||
// append generated buttons to the modal footer
|
||||
$(modal_template).find('.modal-footer').append(this_button);
|
||||
});
|
||||
|
||||
// append a given body to the modal
|
||||
$(modal_template).find('.modal-body').append(body);
|
||||
|
||||
// add additional body class
|
||||
if(options.bodyClass) $(modal_template).find('.modal-body').addClass(options.bodyClass);
|
||||
|
||||
// add footer body class
|
||||
if(options.footerClass) $(modal_template).find('.modal-footer').addClass(options.footerClass);
|
||||
|
||||
// execute 'created' callback
|
||||
options.created.call(this, modal_template, options);
|
||||
|
||||
// modal form and submit form button
|
||||
let modal_form = $(modal_template).find('.modal-body form'),
|
||||
form_submit_btn = modal_template.find('button[type=submit]');
|
||||
|
||||
// append generated modal to the body
|
||||
$("body").append(modal_template);
|
||||
|
||||
// execute 'appended' callback
|
||||
options.appended.call(this, $('#' + id), modal_form, options);
|
||||
|
||||
// if modal contains form elements
|
||||
if(modal_form.length) {
|
||||
// if `autoFocus` option is true
|
||||
if(options.autoFocus) {
|
||||
// when modal is shown
|
||||
$(modal_template).on('shown.bs.modal', function() {
|
||||
// if type of `autoFocus` option is `boolean`
|
||||
if(typeof options.autoFocus == 'boolean')
|
||||
modal_form.find('input:eq(0)').focus(); // the first input element will be focused
|
||||
// if type of `autoFocus` option is `string` and `autoFocus` option is an HTML element
|
||||
else if(typeof options.autoFocus == 'string' && modal_form.find(options.autoFocus).length)
|
||||
modal_form.find(options.autoFocus).focus(); // find elements and focus on that
|
||||
});
|
||||
}
|
||||
|
||||
// form object
|
||||
let form_object = {
|
||||
startProgress: function() {
|
||||
modal_template.addClass('modal-progress');
|
||||
},
|
||||
stopProgress: function() {
|
||||
modal_template.removeClass('modal-progress');
|
||||
}
|
||||
};
|
||||
|
||||
// if form is not contains button element
|
||||
if(!modal_form.find('button').length) $(modal_form).append('<button class="d-none" id="'+ id +'-submit"></button>');
|
||||
|
||||
// add click event
|
||||
form_submit_btn.click(function() {
|
||||
modal_form.submit();
|
||||
});
|
||||
|
||||
// add submit event
|
||||
modal_form.submit(function(e) {
|
||||
// start form progress
|
||||
form_object.startProgress();
|
||||
|
||||
// execute `onFormSubmit` callback
|
||||
options.onFormSubmit.call(this, modal_template, e, form_object);
|
||||
});
|
||||
}
|
||||
|
||||
$(document).on("click", '.' + trigger_class, function() {
|
||||
let modal = $('#' + id).modal(options.modal);
|
||||
|
||||
if(options.removeOnDismiss) {
|
||||
modal.on('hidden.bs.modal', function() {
|
||||
modal.remove();
|
||||
});
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Bootstrap Modal Destroyer
|
||||
$.destroyModal = function(modal) {
|
||||
modal.modal('hide');
|
||||
modal.on('hidden.bs.modal', function() {
|
||||
});
|
||||
}
|
||||
|
||||
// Card Progress Controller
|
||||
$.cardProgress = function(card, options) {
|
||||
var options = $.extend({
|
||||
dismiss: false,
|
||||
dismissText: 'Cancel',
|
||||
spinner: true,
|
||||
onDismiss: function() {}
|
||||
}, options);
|
||||
|
||||
var me = $(card);
|
||||
|
||||
me.addClass('card-progress');
|
||||
if(options.spinner == false) {
|
||||
me.addClass('remove-spinner');
|
||||
}
|
||||
|
||||
if(options.dismiss == true) {
|
||||
var btn_dismiss = '<a class="btn btn-danger card-progress-dismiss">'+options.dismissText+'</a>';
|
||||
btn_dismiss = $(btn_dismiss).off('click').on('click', function() {
|
||||
me.removeClass('card-progress');
|
||||
me.find('.card-progress-dismiss').remove();
|
||||
options.onDismiss.call(this, me);
|
||||
});
|
||||
me.append(btn_dismiss);
|
||||
}
|
||||
|
||||
return {
|
||||
dismiss: function(dismissed) {
|
||||
$.cardProgressDismiss(me, dismissed);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
$.cardProgressDismiss = function(card, dismissed) {
|
||||
var me = $(card);
|
||||
me.removeClass('card-progress');
|
||||
me.find('.card-progress-dismiss').remove();
|
||||
if(dismissed)
|
||||
dismissed.call(this, me);
|
||||
}
|
||||
|
||||
$.chatCtrl = function(element, chat) {
|
||||
var chat = $.extend({
|
||||
position: 'chat-right',
|
||||
text: '',
|
||||
time: moment(new Date().toISOString()).format('hh:mm'),
|
||||
picture: '',
|
||||
type: 'text', // or typing
|
||||
timeout: 0,
|
||||
onShow: function() {}
|
||||
}, chat);
|
||||
|
||||
var target = $(element),
|
||||
element = '<div class="chat-item '+chat.position+'" style="display:none">' +
|
||||
'<img src="'+chat.picture+'">' +
|
||||
'<div class="chat-details">' +
|
||||
'<div class="chat-text">'+chat.text+'</div>' +
|
||||
'<div class="chat-time">'+chat.time+'</div>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
typing_element = '<div class="chat-item chat-left chat-typing" style="display:none">' +
|
||||
'<img src="'+chat.picture+'">' +
|
||||
'<div class="chat-details">' +
|
||||
'<div class="chat-text"></div>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
|
||||
var append_element = element;
|
||||
if(chat.type == 'typing') {
|
||||
append_element = typing_element;
|
||||
}
|
||||
|
||||
if(chat.timeout > 0) {
|
||||
setTimeout(function() {
|
||||
target.find('.chat-content').append($(append_element).fadeIn());
|
||||
}, chat.timeout);
|
||||
}else{
|
||||
target.find('.chat-content').append($(append_element).fadeIn());
|
||||
}
|
||||
|
||||
var target_height = 0;
|
||||
target.find('.chat-content .chat-item').each(function() {
|
||||
target_height += $(this).outerHeight();
|
||||
});
|
||||
setTimeout(function() {
|
||||
target.find('.chat-content').scrollTop(target_height, -1);
|
||||
}, 100);
|
||||
chat.onShow.call(this, append_element);
|
||||
}
|
||||
})(jQuery, this, 0);
|
||||
|
||||
Reference in New Issue
Block a user