BoxWidget.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  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. body : '.box-body',
  24. footer : '.box-footer',
  25. tools : '.box-tools'
  26. }
  27. var ClassName = {
  28. collapsed: 'collapsed-box'
  29. }
  30. var Event = {
  31. collapsed: 'collapsed.boxwidget',
  32. expanded : 'expanded.boxwidget',
  33. removed : 'removed.boxwidget'
  34. }
  35. // BoxWidget Class Definition
  36. // =====================
  37. var BoxWidget = function (element, options) {
  38. this.element = element
  39. this.options = options
  40. this._setUpListeners()
  41. }
  42. BoxWidget.prototype.toggle = function () {
  43. var isOpen = !$(this.element).is(Selector.collapsed)
  44. if (isOpen) {
  45. this.collapse()
  46. } else {
  47. this.expand()
  48. }
  49. }
  50. BoxWidget.prototype.expand = function () {
  51. var expandedEvent = $.Event(Event.expanded)
  52. var collapseIcon = this.options.collapseIcon
  53. var expandIcon = this.options.expandIcon
  54. $(this.element).removeClass(ClassName.collapsed)
  55. $(this.element)
  56. .find(Selector.tools)
  57. .find('.' + expandIcon)
  58. .removeClass(expandIcon)
  59. .addClass(collapseIcon)
  60. $(this.element).find(Selector.body + ', ' + Selector.footer)
  61. .slideDown(this.options.animationSpeed, function () {
  62. $(this.element).trigger(expandedEvent)
  63. }.bind(this))
  64. }
  65. BoxWidget.prototype.collapse = function () {
  66. var collapsedEvent = $.Event(Event.collapsed)
  67. var collapseIcon = this.options.collapseIcon
  68. var expandIcon = this.options.expandIcon
  69. $(this.element)
  70. .find(Selector.tools)
  71. .find('.' + collapseIcon)
  72. .removeClass(collapseIcon)
  73. .addClass(expandIcon)
  74. $(this.element).find(Selector.body + ', ' + Selector.footer)
  75. .slideUp(this.options.animationSpeed, function () {
  76. $(this.element).addClass(ClassName.collapsed)
  77. $(this.element).trigger(collapsedEvent)
  78. }.bind(this))
  79. }
  80. BoxWidget.prototype.remove = function () {
  81. var removedEvent = $.Event(Event.removed)
  82. $(this.element).slideUp(this.options.animationSpeed, function () {
  83. $(this.element).trigger(removedEvent)
  84. $(this.element).remove()
  85. }.bind(this))
  86. }
  87. // Private
  88. BoxWidget.prototype._setUpListeners = function () {
  89. var that = this
  90. $(this.element).on('click', this.options.collapseTrigger, function (event) {
  91. if (event) event.preventDefault()
  92. that.toggle()
  93. })
  94. $(this.element).on('click', this.options.removeTrigger, function (event) {
  95. if (event) event.preventDefault()
  96. that.remove()
  97. })
  98. }
  99. // Plugin Definition
  100. // =================
  101. function Plugin(option) {
  102. return this.each(function () {
  103. var $this = $(this)
  104. var data = $this.data(DataKey)
  105. if (!data) {
  106. var options = $.extend({}, Default, $this.data(), typeof option == 'object' && option)
  107. $this.data(DataKey, (data = new BoxWidget($this, options)))
  108. }
  109. if (typeof option == 'string') {
  110. if (typeof data[option] == 'undefined') {
  111. throw new Error('No method named ' + option)
  112. }
  113. data[option]()
  114. }
  115. })
  116. }
  117. var old = $.fn.boxWidget
  118. $.fn.boxWidget = Plugin
  119. $.fn.boxWidget.Constructor = BoxWidget
  120. // No Conflict Mode
  121. // ================
  122. $.fn.boxWidget.noConflict = function () {
  123. $.fn.boxWidget = old
  124. return this
  125. }
  126. // BoxWidget Data API
  127. // ==================
  128. $(window).on('load', function () {
  129. $(Selector.data).each(function () {
  130. Plugin.call($(this))
  131. })
  132. })
  133. }(jQuery)