BoxWidget.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. /* BoxWidget()
  2. * ======
  3. * Adds box widget functions to boxes.
  4. *
  5. * @Usage: $('.my-box').boxWidget(options)
  6. * This plugin auto activates on any element using the `.box` class
  7. * Pass any option as data-option="value"
  8. */
  9. +function ($) {
  10. 'use strict';
  11. var DataKey = 'lte.boxwidget';
  12. var Default = {
  13. animationSpeed : 500,
  14. collapseTrigger: '[data-widget="collapse"]',
  15. removeTrigger : '[data-widget="remove"]',
  16. collapseIcon : 'fa-minus',
  17. expandIcon : 'fa-plus',
  18. removeIcon : 'fa-times'
  19. };
  20. var Selector = {
  21. data : '.box',
  22. collapsed: '.collapsed-box',
  23. header : '.box-header',
  24. body : '.box-body',
  25. footer : '.box-footer',
  26. tools : '.box-tools'
  27. };
  28. var ClassName = {
  29. collapsed: 'collapsed-box'
  30. };
  31. var Event = {
  32. collapsing: 'collapsing.boxwidget',
  33. collapsed: 'collapsed.boxwidget',
  34. expanding: 'expanding.boxwidget',
  35. expanded: 'expanded.boxwidget',
  36. removing: 'removing.boxwidget',
  37. removed: 'removed.boxwidget'
  38. };
  39. // BoxWidget Class Definition
  40. // =====================
  41. var BoxWidget = function (element, options) {
  42. this.element = element;
  43. this.options = options;
  44. this._setUpListeners();
  45. };
  46. BoxWidget.prototype.toggle = function () {
  47. var isOpen = !$(this.element).is(Selector.collapsed);
  48. if (isOpen) {
  49. this.collapse();
  50. } else {
  51. this.expand();
  52. }
  53. };
  54. BoxWidget.prototype.expand = function () {
  55. var expandedEvent = $.Event(Event.expanded);
  56. var expandingEvent = $.Event(Event.expanding);
  57. var collapseIcon = this.options.collapseIcon;
  58. var expandIcon = this.options.expandIcon;
  59. $(this.element).removeClass(ClassName.collapsed);
  60. $(this.element)
  61. .children(Selector.header + ', ' + Selector.body + ', ' + Selector.footer)
  62. .children(Selector.tools)
  63. .find('.' + expandIcon)
  64. .removeClass(expandIcon)
  65. .addClass(collapseIcon);
  66. $(this.element).children(Selector.body + ', ' + Selector.footer)
  67. .slideDown(this.options.animationSpeed, function () {
  68. $(this.element).trigger(expandedEvent);
  69. }.bind(this))
  70. .trigger(expandingEvent);
  71. };
  72. BoxWidget.prototype.collapse = function () {
  73. var collapsedEvent = $.Event(Event.collapsed);
  74. var collapsingEvent = $.Event(Event.collapsing);
  75. var collapseIcon = this.options.collapseIcon;
  76. var expandIcon = this.options.expandIcon;
  77. $(this.element)
  78. .children(Selector.header + ', ' + Selector.body + ', ' + Selector.footer)
  79. .children(Selector.tools)
  80. .find('.' + collapseIcon)
  81. .removeClass(collapseIcon)
  82. .addClass(expandIcon);
  83. $(this.element).children(Selector.body + ', ' + Selector.footer)
  84. .slideUp(this.options.animationSpeed, function () {
  85. $(this.element).addClass(ClassName.collapsed);
  86. $(this.element).trigger(collapsedEvent);
  87. }.bind(this))
  88. .trigger(collapsingEvent);
  89. };
  90. BoxWidget.prototype.remove = function () {
  91. var removedEvent = $.Event(Event.removed);
  92. var removingEvent = $.Event(Event.removing);
  93. $(this.element).slideUp(this.options.animationSpeed, function () {
  94. $(this.element).trigger(removedEvent);
  95. $(this.element).remove();
  96. }.bind(this))
  97. .trigger(removingEvent);
  98. };
  99. // Private
  100. BoxWidget.prototype._setUpListeners = function () {
  101. var that = this;
  102. $(this.element).on('click', this.options.collapseTrigger, function (event) {
  103. if (event) event.preventDefault();
  104. that.toggle($(this));
  105. return false;
  106. });
  107. $(this.element).on('click', this.options.removeTrigger, function (event) {
  108. if (event) event.preventDefault();
  109. that.remove($(this));
  110. return false;
  111. });
  112. };
  113. // Plugin Definition
  114. // =================
  115. function Plugin(option) {
  116. return this.each(function () {
  117. var $this = $(this);
  118. var data = $this.data(DataKey);
  119. if (!data) {
  120. var options = $.extend({}, Default, $this.data(), typeof option == 'object' && option);
  121. $this.data(DataKey, (data = new BoxWidget($this, options)));
  122. }
  123. if (typeof option == 'string') {
  124. if (typeof data[option] == 'undefined') {
  125. throw new Error('No method named ' + option);
  126. }
  127. data[option]();
  128. }
  129. });
  130. }
  131. var old = $.fn.boxWidget;
  132. $.fn.boxWidget = Plugin;
  133. $.fn.boxWidget.Constructor = BoxWidget;
  134. // No Conflict Mode
  135. // ================
  136. $.fn.boxWidget.noConflict = function () {
  137. $.fn.boxWidget = old;
  138. return this;
  139. };
  140. // BoxWidget Data API
  141. // ==================
  142. $(window).on('load', function () {
  143. $(Selector.data).each(function () {
  144. Plugin.call($(this));
  145. });
  146. });
  147. }(jQuery);