From 28c75ef8a04979a7aea2d1aae05a652066e3b4b5 Mon Sep 17 00:00:00 2001 From: Abdullah Almsaeed Date: Sat, 25 Feb 2017 14:37:38 -0500 Subject: [PATCH] Add BoxWidget plugin --- build/js/BoxWidget.js | 161 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 161 insertions(+) create mode 100644 build/js/BoxWidget.js diff --git a/build/js/BoxWidget.js b/build/js/BoxWidget.js new file mode 100644 index 000000000..c58d6ef82 --- /dev/null +++ b/build/js/BoxWidget.js @@ -0,0 +1,161 @@ +/* BoxWidget() + * ====== + * Adds box widget functions to boxes. + * + * @Usage: $('.my-box').boxWidget(options) + * or add [data-widget="box-widget"] to the ul element + * Pass any option as data-option="value" + */ ++function ($) { + 'use strict' + + var DataKey = 'lte.boxwidget' + + var Default = { + animationSpeed : 500, + collapseTrigger: '[data-widget="collapse"]', + removeTrigger : '[data-widget="remove"]', + collapseIcon : 'fa-minus', + expandIcon : 'fa-plus', + removeIcon : 'fa-times' + } + + var Selector = { + data : '.box', + collapsed: '.collapsed-box', + body : '.box-body', + footer : '.box-footer', + tools : '.box-tools' + } + + var ClassName = { + collapsed: 'collapsed-box' + } + + var Event = { + collapsed: 'collapsed.boxwidget', + expanded : 'expanded.boxwidget', + removed : 'removed.boxwidget' + } + + // BoxWidget Class Definition + // ===================== + var BoxWidget = function (element, options) { + this.element = element + this.options = options + + this._setUpListeners() + } + + BoxWidget.prototype.toggle = function () { + var isOpen = !$(this.element).is(Selector.collapsed) + + if (isOpen) { + this.collapse() + } else { + this.expand() + } + } + + BoxWidget.prototype.expand = function () { + var expandedEvent = $.Event(Event.expanded) + var collapseIcon = this.options.collapseIcon + var expandIcon = this.options.expandIcon + + $(this.element).removeClass(ClassName.collapsed) + + $(Selector.tools) + .find('.' + expandIcon) + .removeClass(expandIcon) + .addClass(collapseIcon) + + $(this.element).find(Selector.body + ', ' + Selector.footer) + .slideDown(this.options.animationSpeed, function () { + $(this.element).trigger(expandedEvent) + }.bind(this)) + } + + BoxWidget.prototype.collapse = function () { + var collapsedEvent = $.Event(Event.collapsed) + var collapseIcon = this.options.collapseIcon + var expandIcon = this.options.expandIcon + + $(Selector.tools) + .find('.' + collapseIcon) + .removeClass(collapseIcon) + .addClass(expandIcon) + + $(this.element).find(Selector.body + ', ' + Selector.footer) + .slideUp(this.options.animationSpeed, function () { + $(this.element).addClass(ClassName.collapsed) + $(this.element).trigger(collapsedEvent) + }.bind(this)) + } + + BoxWidget.prototype.remove = function () { + var removedEvent = $.Event(Event.removed) + + $(this.element).slideUp(this.options.animationSpeed, function () { + $(this.element).trigger(removedEvent) + $(this.element).remove() + }.bind(this)) + } + + // Private + + BoxWidget.prototype._setUpListeners = function () { + var that = this + + $(this.element).on('click', this.options.collapseTrigger, function (event) { + if (event) event.preventDefault() + that.toggle($(this)) + }) + + $(this.element).on('click', this.options.removeTrigger, function (event) { + if (event) event.preventDefault() + that.remove($(this)) + }) + } + + // Plugin Definition + // ================= + function Plugin(option) { + return this.each(function () { + var $this = $(this) + var data = $this.data(DataKey) + + if (!data) { + var options = $.extend({}, Default, $this.data(), typeof option == 'object' && option) + $this.data(DataKey, (data = new BoxWidget($this, options))) + } + + if (typeof option == 'string') { + if (typeof data[option] == 'undefined') { + throw new Error('No method named ' + option) + } + data[option]() + } + }) + } + + var old = $.fn.boxWidget + + $.fn.boxWidget = Plugin + $.fn.boxWidget.Constructor = BoxWidget + + // No Conflict Mode + // ================ + $.fn.boxWidget.noConflict = function () { + $.fn.boxWidget = old + return this + } + + // BoxWidget Data API + // ================== + $(window).on('load', function () { + $(Selector.data).each(function () { + Plugin.call($(this)) + }) + }) + +}(jQuery)