BoxWidget.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. /* BoxWidget()
  2. * ======
  3. * Adds box widget functions to boxes.
  4. *
  5. * @Usage: $('.my-box').boxWidget(options)
  6. * or add [data-widget="box-widget"] to the ul element
  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. $(Selector.tools)
  56. .find('.' + expandIcon)
  57. .removeClass(expandIcon)
  58. .addClass(collapseIcon)
  59. $(this.element).find(Selector.body + ', ' + Selector.footer)
  60. .slideDown(this.options.animationSpeed, function () {
  61. $(this.element).trigger(expandedEvent)
  62. }.bind(this))
  63. }
  64. BoxWidget.prototype.collapse = function () {
  65. var collapsedEvent = $.Event(Event.collapsed)
  66. var collapseIcon = this.options.collapseIcon
  67. var expandIcon = this.options.expandIcon
  68. $(Selector.tools)
  69. .find('.' + collapseIcon)
  70. .removeClass(collapseIcon)
  71. .addClass(expandIcon)
  72. $(this.element).find(Selector.body + ', ' + Selector.footer)
  73. .slideUp(this.options.animationSpeed, function () {
  74. $(this.element).addClass(ClassName.collapsed)
  75. $(this.element).trigger(collapsedEvent)
  76. }.bind(this))
  77. }
  78. BoxWidget.prototype.remove = function () {
  79. var removedEvent = $.Event(Event.removed)
  80. $(this.element).slideUp(this.options.animationSpeed, function () {
  81. $(this.element).trigger(removedEvent)
  82. $(this.element).remove()
  83. }.bind(this))
  84. }
  85. // Private
  86. BoxWidget.prototype._setUpListeners = function () {
  87. var that = this
  88. $(this.element).on('click', this.options.collapseTrigger, function (event) {
  89. if (event) event.preventDefault()
  90. that.toggle($(this))
  91. })
  92. $(this.element).on('click', this.options.removeTrigger, function (event) {
  93. if (event) event.preventDefault()
  94. that.remove($(this))
  95. })
  96. }
  97. // Plugin Definition
  98. // =================
  99. function Plugin(option) {
  100. return this.each(function () {
  101. var $this = $(this)
  102. var data = $this.data(DataKey)
  103. if (!data) {
  104. var options = $.extend({}, Default, $this.data(), typeof option == 'object' && option)
  105. $this.data(DataKey, (data = new BoxWidget($this, options)))
  106. }
  107. if (typeof option == 'string') {
  108. if (typeof data[option] == 'undefined') {
  109. throw new Error('No method named ' + option)
  110. }
  111. data[option]()
  112. }
  113. })
  114. }
  115. var old = $.fn.boxWidget
  116. $.fn.boxWidget = Plugin
  117. $.fn.boxWidget.Constructor = BoxWidget
  118. // No Conflict Mode
  119. // ================
  120. $.fn.boxWidget.noConflict = function () {
  121. $.fn.boxWidget = old
  122. return this
  123. }
  124. // BoxWidget Data API
  125. // ==================
  126. $(window).on('load', function () {
  127. $(Selector.data).each(function () {
  128. Plugin.call($(this))
  129. })
  130. })
  131. }(jQuery)