stisla.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. "use strict";
  2. (function($, window, i) {
  3. $.fn.fireModal = function(options) {
  4. var options = $.extend({
  5. size: 'modal-md',
  6. center: false,
  7. animation: true,
  8. title: 'Modal Title',
  9. closeButton: true,
  10. header: true,
  11. bodyClass: '',
  12. footerClass: '',
  13. body: '',
  14. buttons: [],
  15. autoFocus: true,
  16. removeOnDismiss: false,
  17. created: function() {},
  18. appended: function() {},
  19. onFormSubmit: function() {},
  20. modal: {}
  21. }, options);
  22. this.each(function() {
  23. i++;
  24. var id = 'fire-modal-' + i,
  25. trigger_class = 'trigger--' + id,
  26. trigger_button = $('.' + trigger_class);
  27. $(this).addClass(trigger_class);
  28. let body = options.body;
  29. if(typeof body == 'object') {
  30. if(body.length) {
  31. let part = body;
  32. body = body.removeAttr('id').clone().removeClass('modal-part');
  33. part.remove();
  34. }else{
  35. body = '<div class="text-danger">Modal part element not found!</div>';
  36. }
  37. }
  38. var modal_template = ' <div class="modal'+ (options.animation == true ? ' fade' : '') +'" tabindex="-1" role="dialog" id="'+ id +'"> ' +
  39. ' <div class="modal-dialog '+options.size+(options.center ? ' modal-dialog-centered' : '')+'" role="document"> ' +
  40. ' <div class="modal-content"> ' +
  41. ((options.header == true) ?
  42. ' <div class="modal-header"> ' +
  43. ' <h5 class="modal-title">'+ options.title +'</h5> ' +
  44. ((options.closeButton == true) ?
  45. ' <button type="button" class="close" data-dismiss="modal" aria-label="Close"> ' +
  46. ' <span aria-hidden="true">&times;</span> ' +
  47. ' </button> '
  48. : '') +
  49. ' </div> '
  50. : '') +
  51. ' <div class="modal-body"> ' +
  52. ' </div> ' +
  53. (options.buttons.length > 0 ?
  54. ' <div class="modal-footer"> ' +
  55. ' </div> '
  56. : '')+
  57. ' </div> ' +
  58. ' </div> ' +
  59. ' </div> ' ;
  60. var modal_template = $(modal_template);
  61. var this_button;
  62. options.buttons.forEach(function(item) {
  63. let id = "id" in item ? item.id : '';
  64. this_button = '<button type="'+ ("submit" in item && item.submit == true ? 'submit' : 'button') +'" class="'+ item.class +'" id="'+ id +'">'+ item.text +'</button>';
  65. this_button = $(this_button).off('click').on("click", function() {
  66. item.handler.call(this, modal_template);
  67. });
  68. $(modal_template).find('.modal-footer').append(this_button);
  69. });
  70. $(modal_template).find('.modal-body').append(body);
  71. if(options.bodyClass) $(modal_template).find('.modal-body').addClass(options.bodyClass);
  72. if(options.footerClass) $(modal_template).find('.modal-footer').addClass(options.footerClass);
  73. options.created.call(this, modal_template, options);
  74. let modal_form = $(modal_template).find('.modal-body form'),
  75. form_submit_btn = modal_template.find('button[type=submit]');
  76. $("body").append(modal_template);
  77. options.appended.call(this, $('#' + id), modal_form, options);
  78. if(modal_form.length) {
  79. if(options.autoFocus) {
  80. $(modal_template).on('shown.bs.modal', function() {
  81. if(typeof options.autoFocus == 'boolean')
  82. modal_form.find('input:eq(0)').focus();
  83. else if(typeof options.autoFocus == 'string' && modal_form.find(options.autoFocus).length)
  84. modal_form.find(options.autoFocus).focus();
  85. });
  86. }
  87. let form_object = {
  88. startProgress: function() {
  89. modal_template.addClass('modal-progress');
  90. },
  91. stopProgress: function() {
  92. modal_template.removeClass('modal-progress');
  93. }
  94. };
  95. if(!modal_form.find('button').length) $(modal_form).append('<button class="d-none" id="'+ id +'-submit"></button>');
  96. form_submit_btn.on('click',function() {
  97. modal_form.submit();
  98. });
  99. modal_form.on('submit',function(e) {
  100. form_object.startProgress();
  101. options.onFormSubmit.call(this, modal_template, e, form_object);
  102. });
  103. }
  104. $(document).on("click", '.' + trigger_class, function() {
  105. let modal = $('#' + id).modal(options.modal);
  106. if(options.removeOnDismiss) {
  107. modal.on('hidden.bs.modal', function() {
  108. modal.remove();
  109. });
  110. }
  111. return false;
  112. });
  113. });
  114. }
  115. $.destroyModal = function(modal) {
  116. modal.modal('hide');
  117. modal.on('hidden.bs.modal', function() {
  118. });
  119. }
  120. $.cardProgress = function(card, options) {
  121. var options = $.extend({
  122. dismiss: false,
  123. dismissText: 'Cancel',
  124. spinner: true,
  125. onDismiss: function() {}
  126. }, options);
  127. var me = $(card);
  128. me.addClass('card-progress');
  129. if(options.spinner == false) {
  130. me.addClass('remove-spinner');
  131. }
  132. if(options.dismiss == true) {
  133. var btn_dismiss = '<a class="btn btn-danger card-progress-dismiss">'+options.dismissText+'</a>';
  134. btn_dismiss = $(btn_dismiss).off('click').on('click', function() {
  135. me.removeClass('card-progress');
  136. me.find('.card-progress-dismiss').remove();
  137. options.onDismiss.call(this, me);
  138. });
  139. me.append(btn_dismiss);
  140. }
  141. return {
  142. dismiss: function(dismissed) {
  143. $.cardProgressDismiss(me, dismissed);
  144. }
  145. };
  146. }
  147. $.cardProgressDismiss = function(card, dismissed) {
  148. var me = $(card);
  149. me.removeClass('card-progress');
  150. me.find('.card-progress-dismiss').remove();
  151. if(dismissed)
  152. dismissed.call(this, me);
  153. }
  154. $.chatCtrl = function(element, chat) {
  155. var chat = $.extend({
  156. position: 'chat-right',
  157. text: '',
  158. time: moment(new Date().toISOString()).format('hh:mm'),
  159. picture: '',
  160. type: 'text',
  161. timeout: 0,
  162. onShow: function() {}
  163. }, chat);
  164. var target = $(element),
  165. element = '<div class="chat-item '+chat.position+'" style="display:none">' +
  166. '<img src="'+chat.picture+'">' +
  167. '<div class="chat-details">' +
  168. '<div class="chat-text">'+chat.text+'</div>' +
  169. '<div class="chat-time">'+chat.time+'</div>' +
  170. '</div>' +
  171. '</div>',
  172. typing_element = '<div class="chat-item chat-left chat-typing" style="display:none">' +
  173. '<img src="'+chat.picture+'">' +
  174. '<div class="chat-details">' +
  175. '<div class="chat-text"></div>' +
  176. '</div>' +
  177. '</div>';
  178. var append_element = element;
  179. if(chat.type == 'typing') {
  180. append_element = typing_element;
  181. }
  182. if(chat.timeout > 0) {
  183. setTimeout(function() {
  184. target.find('.chat-content').append($(append_element).fadeIn());
  185. }, chat.timeout);
  186. }else{
  187. target.find('.chat-content').append($(append_element).fadeIn());
  188. }
  189. var target_height = 0;
  190. target.find('.chat-content .chat-item').each(function() {
  191. target_height += $(this).outerHeight();
  192. });
  193. setTimeout(function() {
  194. target.find('.chat-content').scrollTop(target_height, -1);
  195. }, 100);
  196. chat.onShow.call(this, append_element);
  197. }
  198. })(jQuery, this, 0);