diff --git a/build/js/AdminLTE.js b/build/js/AdminLTE.js
index 934b26174..7d60a641a 100644
--- a/build/js/AdminLTE.js
+++ b/build/js/AdminLTE.js
@@ -4,7 +4,7 @@ import PushMenu from './PushMenu'
import Treeview from './Treeview'
import DirectChat from './DirectChat'
import TodoList from './TodoList'
-import Widget from './Widget'
+import CardWidget from './CardWidget'
export {
ControlSidebar,
@@ -13,5 +13,5 @@ export {
Treeview,
DirectChat,
TodoList,
- Widget
+ CardWidget
}
diff --git a/build/js/CardWidget.js b/build/js/CardWidget.js
new file mode 100644
index 000000000..cf55e0fd6
--- /dev/null
+++ b/build/js/CardWidget.js
@@ -0,0 +1,249 @@
+/**
+ * --------------------------------------------
+ * AdminLTE CardWidget.js
+ * License MIT
+ * --------------------------------------------
+ */
+
+const CardWidget = (($) => {
+ /**
+ * Constants
+ * ====================================================
+ */
+
+ const NAME = 'CardWidget'
+ const DATA_KEY = 'lte.cardwidget'
+ const EVENT_KEY = `.${DATA_KEY}`
+ const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+ const Event = {
+ EXPANDED: `expanded${EVENT_KEY}`,
+ COLLAPSED: `collapsed${EVENT_KEY}`,
+ MAXIMIZED: `maximized${EVENT_KEY}`,
+ MINIMIZED: `minimized${EVENT_KEY}`,
+ REMOVED: `removed${EVENT_KEY}`
+ }
+
+ const ClassName = {
+ CARD: 'card',
+ COLLAPSED: 'collapsed-card',
+ WAS_COLLAPSED: 'was-collapsed',
+ MAXIMIZED: 'maximized-card',
+ }
+
+ const Selector = {
+ DATA_REMOVE: '[data-card-widget="remove"]',
+ DATA_COLLAPSE: '[data-card-widget="collapse"]',
+ DATA_MAXIMIZE: '[data-card-widget="maximize"]',
+ CARD: `.${ClassName.CARD}`,
+ CARD_HEADER: '.card-header',
+ CARD_BODY: '.card-body',
+ CARD_FOOTER: '.card-footer',
+ COLLAPSED: `.${ClassName.COLLAPSED}`,
+ }
+
+ const Default = {
+ animationSpeed: 'normal',
+ collapseTrigger: Selector.DATA_COLLAPSE,
+ removeTrigger: Selector.DATA_REMOVE,
+ maximizeTrigger: Selector.DATA_MAXIMIZE,
+ collapseIcon: 'fa-minus',
+ expandIcon: 'fa-plus',
+ maximizeIcon: 'fa-expand',
+ minimizeIcon: 'fa-compress',
+ }
+
+ class CardWidget {
+ constructor(element, settings) {
+ this._element = element
+ this._parent = element.parents(Selector.CARD).first()
+
+ if (element.hasClass(ClassName.CARD)) {
+ this._parent = element
+ }
+
+ this._settings = $.extend({}, Default, settings)
+ }
+
+ collapse() {
+ this._parent.children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
+ .slideUp(this._settings.animationSpeed, () => {
+ this._parent.addClass(ClassName.COLLAPSED)
+ })
+ this._element.children(this._settings.collapseTrigger + ' .' + this._settings.collapseIcon)
+ .addClass(this._settings.expandIcon)
+ .removeClass(this._settings.collapseIcon)
+
+ const collapsed = $.Event(Event.COLLAPSED)
+
+ this._element.trigger(collapsed, this._parent)
+ }
+
+ expand() {
+ this._parent.children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
+ .slideDown(this._settings.animationSpeed, () => {
+ this._parent.removeClass(ClassName.COLLAPSED)
+ })
+
+ this._element.children(this._settings.collapseTrigger + ' .' + this._settings.expandIcon)
+ .addClass(this._settings.collapseIcon)
+ .removeClass(this._settings.expandIcon)
+
+ const expanded = $.Event(Event.EXPANDED)
+
+ this._element.trigger(expanded, this._parent)
+ }
+
+ remove() {
+ this._parent.slideUp()
+
+ const removed = $.Event(Event.REMOVED)
+
+ this._element.trigger(removed, this._parent)
+ }
+
+ toggle() {
+ if (this._parent.hasClass(ClassName.COLLAPSED)) {
+ this.expand()
+ return
+ }
+
+ this.collapse()
+ }
+
+ maximize() {
+ this._element.children(this._settings.maximizeTrigger + ' .' + this._settings.maximizeIcon)
+ .addClass(this._settings.minimizeIcon)
+ .removeClass(this._settings.maximizeIcon)
+ this._parent.css({
+ 'height': this._parent.height(),
+ 'width': this._parent.width(),
+ 'transition': 'all .15s'
+ }).delay(150).queue(function(){
+ $(this).addClass(ClassName.MAXIMIZED)
+ $('html').addClass(ClassName.MAXIMIZED)
+ if ($(this).hasClass(ClassName.COLLAPSED)) {
+ $(this).addClass(ClassName.WAS_COLLAPSED)
+ }
+ $(this).dequeue()
+ })
+
+ const maximized = $.Event(Event.MAXIMIZED)
+
+ this._element.trigger(maximized, this._parent)
+ }
+
+ minimize() {
+ this._element.children(this._settings.maximizeTrigger + ' .' + this._settings.minimizeIcon)
+ .addClass(this._settings.maximizeIcon)
+ .removeClass(this._settings.minimizeIcon)
+ this._parent.css('cssText', 'height:' + this._parent[0].style.height + ' !important;' +
+ 'width:' + this._parent[0].style.width + ' !important; transition: all .15s;'
+ ).delay(10).queue(function(){
+ $(this).removeClass(ClassName.MAXIMIZED)
+ $('html').removeClass(ClassName.MAXIMIZED)
+ $(this).css({
+ 'height': 'inherit',
+ 'width': 'inherit'
+ })
+ if ($(this).hasClass(ClassName.WAS_COLLAPSED)) {
+ $(this).removeClass(ClassName.WAS_COLLAPSED)
+ }
+ $(this).dequeue()
+ })
+
+ const MINIMIZED = $.Event(Event.MINIMIZED)
+
+ this._element.trigger(MINIMIZED, this._parent)
+ }
+
+ toggleMaximize() {
+ if (this._parent.hasClass(ClassName.MAXIMIZED)) {
+ this.minimize()
+ return
+ }
+
+ this.maximize()
+ }
+
+ // Private
+
+ _init(card) {
+ this._parent = card
+
+ $(this).find(this._settings.collapseTrigger).click(() => {
+ this.toggle()
+ })
+
+ $(this).find(this._settings.maximizeTrigger).click(() => {
+ this.toggleMaximize()
+ })
+
+ $(this).find(this._settings.removeTrigger).click(() => {
+ this.remove()
+ })
+ }
+
+ // Static
+
+ static _jQueryInterface(config) {
+ let data = $(this).data(DATA_KEY)
+
+ if (!data) {
+ data = new CardWidget($(this), data)
+ $(this).data(DATA_KEY, typeof config === 'string' ? data: config)
+ }
+
+ if (typeof config === 'string' && config.match(/collapse|expand|remove|toggle|maximize|minimize|toggleMaximize/)) {
+ data[config]()
+ } else if (typeof config === 'object') {
+ data._init($(this))
+ }
+ }
+ }
+
+ /**
+ * Data API
+ * ====================================================
+ */
+
+ $(document).on('click', Selector.DATA_COLLAPSE, function (event) {
+ if (event) {
+ event.preventDefault()
+ }
+
+ CardWidget._jQueryInterface.call($(this), 'toggle')
+ })
+
+ $(document).on('click', Selector.DATA_REMOVE, function (event) {
+ if (event) {
+ event.preventDefault()
+ }
+
+ CardWidget._jQueryInterface.call($(this), 'remove')
+ })
+
+ $(document).on('click', Selector.DATA_MAXIMIZE, function (event) {
+ if (event) {
+ event.preventDefault()
+ }
+
+ CardWidget._jQueryInterface.call($(this), 'toggleMaximize')
+ })
+
+ /**
+ * jQuery API
+ * ====================================================
+ */
+
+ $.fn[NAME] = CardWidget._jQueryInterface
+ $.fn[NAME].Constructor = CardWidget
+ $.fn[NAME].noConflict = function () {
+ $.fn[NAME] = JQUERY_NO_CONFLICT
+ return CardWidget._jQueryInterface
+ }
+
+ return CardWidget
+})(jQuery)
+
+export default CardWidget
diff --git a/build/js/Widget.js b/build/js/Widget.js
deleted file mode 100644
index 261f26cf9..000000000
--- a/build/js/Widget.js
+++ /dev/null
@@ -1,226 +0,0 @@
-/**
- * --------------------------------------------
- * AdminLTE Widget.js
- * License MIT
- * --------------------------------------------
- */
-
-const Widget = (($) => {
- /**
- * Constants
- * ====================================================
- */
-
- const NAME = 'Widget'
- const DATA_KEY = 'lte.widget'
- const EVENT_KEY = `.${DATA_KEY}`
- const JQUERY_NO_CONFLICT = $.fn[NAME]
-
- const Event = {
- EXPANDED : `expanded${EVENT_KEY}`,
- COLLAPSED: `collapsed${EVENT_KEY}`,
- MAXIMIZED: `maximized${EVENT_KEY}`,
- MINIMIZED: `minimized${EVENT_KEY}`,
- REMOVED : `removed${EVENT_KEY}`
- }
-
- const Selector = {
- DATA_REMOVE : '[data-widget="remove"]',
- DATA_COLLAPSE : '[data-widget="collapse"]',
- DATA_MAXIMIZE : '[data-widget="maximize"]',
- CARD : '.card',
- CARD_HEADER : '.card-header',
- CARD_BODY : '.card-body',
- CARD_FOOTER : '.card-footer',
- COLLAPSED : '.collapsed-card',
- COLLAPSE_ICON : '.fa-minus',
- EXPAND_ICON : '.fa-plus'
- }
-
- const ClassName = {
- COLLAPSED : 'collapsed-card',
- WAS_COLLAPSED : 'was-collapsed',
- MAXIMIZED : 'maximized-card',
- COLLAPSE_ICON : 'fa-minus',
- EXPAND_ICON : 'fa-plus',
- MAXIMIZE_ICON : 'fa-expand',
- MINIMIZE_ICON : 'fa-compress',
- }
-
- const Default = {
- animationSpeed : 'normal',
- collapseTrigger: Selector.DATA_COLLAPSE,
- removeTrigger : Selector.DATA_REMOVE
- }
-
- class Widget {
- constructor(element, settings) {
- this._element = element
- this._parent = element.parents(Selector.CARD).first()
- this._settings = $.extend({}, Default, settings)
- }
-
- collapse() {
- this._parent.children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
- .slideUp(this._settings.animationSpeed, () => {
- this._parent.addClass(ClassName.COLLAPSED)
- })
-
- this._element.children(Selector.COLLAPSE_ICON)
- .addClass(ClassName.EXPAND_ICON)
- .removeClass(ClassName.COLLAPSE_ICON)
-
- const collapsed = $.Event(Event.COLLAPSED)
-
- this._element.trigger(collapsed, this._parent)
- }
-
- expand() {
- this._parent.children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
- .slideDown(this._settings.animationSpeed, () => {
- this._parent.removeClass(ClassName.COLLAPSED)
- })
-
- this._element.children(Selector.EXPAND_ICON)
- .addClass(ClassName.COLLAPSE_ICON)
- .removeClass(ClassName.EXPAND_ICON)
-
- const expanded = $.Event(Event.EXPANDED)
-
- this._element.trigger(expanded, this._parent)
- }
-
- remove() {
- this._parent.slideUp()
-
- const removed = $.Event(Event.REMOVED)
-
- this._element.trigger(removed, this._parent)
- }
-
- toggle() {
- if (this._parent.hasClass(ClassName.COLLAPSED)) {
- this.expand()
- return
- }
-
- this.collapse()
- }
-
- toggleMaximize() {
- var button = this._element.find('i')
-
- if (this._parent.hasClass(ClassName.MAXIMIZED)) {
- button.addClass(ClassName.MAXIMIZE_ICON).removeClass(ClassName.MINIMIZE_ICON)
- this._parent.css('cssText', 'height:' + this._parent[0].style.height + ' !important;' +
- 'width:' + this._parent[0].style.width + ' !important; transition: all .15s;'
- ).delay(100).queue(function(){
- $(this).removeClass(ClassName.MAXIMIZED)
- $('html').removeClass(ClassName.MAXIMIZED)
- $(this).trigger(Event.MINIMIZED)
- $(this).css({
- 'height': 'inherit',
- 'width': 'inherit'
- })
- if ($(this).hasClass(ClassName.WAS_COLLAPSED)) {
- $(this).removeClass(ClassName.WAS_COLLAPSED)
- }
- $(this).dequeue()
- })
- } else {
- button.addClass(ClassName.MINIMIZE_ICON).removeClass(ClassName.MAXIMIZE_ICON)
- this._parent.css({
- 'height': this._parent.height(),
- 'width': this._parent.width(),
- 'transition': 'all .15s'
- }).delay(150).queue(function(){
- $(this).addClass(ClassName.MAXIMIZED)
- $('html').addClass(ClassName.MAXIMIZED)
- $(this).trigger(Event.MAXIMIZED)
- if ($(this).hasClass(ClassName.COLLAPSED)) {
- $(this).addClass(ClassName.WAS_COLLAPSED)
- }
- $(this).dequeue()
- })
- }
- }
-
- // Private
-
- _init(card) {
- this._parent = card
-
- $(this).find(this._settings.collapseTrigger).click(() => {
- this.toggle()
- })
-
- $(this).find(this._settings.removeTrigger).click(() => {
- this.remove()
- })
- }
-
- // Static
-
- static _jQueryInterface(config) {
- return this.each(function () {
- let data = $(this).data(DATA_KEY)
-
- if (!data) {
- data = new Widget($(this), data)
- $(this).data(DATA_KEY, typeof config === 'string' ? data : config)
- }
-
- if (typeof config === 'string' && config.match(/collapse|expand|remove|toggle|toggleMaximize/)) {
- data[config]()
- } else if (typeof config === 'object') {
- data._init($(this))
- }
- })
- }
- }
-
- /**
- * Data API
- * ====================================================
- */
-
- $(document).on('click', Selector.DATA_COLLAPSE, function (event) {
- if (event) {
- event.preventDefault()
- }
-
- Widget._jQueryInterface.call($(this), 'toggle')
- })
-
- $(document).on('click', Selector.DATA_REMOVE, function (event) {
- if (event) {
- event.preventDefault()
- }
-
- Widget._jQueryInterface.call($(this), 'remove')
- })
-
- $(document).on('click', Selector.DATA_MAXIMIZE, function (event) {
- if (event) {
- event.preventDefault()
- }
-
- Widget._jQueryInterface.call($(this), 'toggleMaximize')
- })
-
- /**
- * jQuery API
- * ====================================================
- */
-
- $.fn[NAME] = Widget._jQueryInterface
- $.fn[NAME].Constructor = Widget
- $.fn[NAME].noConflict = function () {
- $.fn[NAME] = JQUERY_NO_CONFLICT
- return Widget._jQueryInterface
- }
-
- return Widget
-})(jQuery)
-
-export default Widget
diff --git a/docs/_config.yml b/docs/_config.yml
index e93d253b0..407e777bd 100755
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -62,8 +62,8 @@ navigation:
url: javascript/push-menu.html
- title: Treeview
url: javascript/treeview.html
- - title: Widget
- url: javascript/widget.html
+ - title: Card Widget
+ url: javascript/card-widget.html
# - title: CardRefresh
# url: javascript/card-refresh.html
- title: Control Sidebar
diff --git a/docs/javascript/widget.md b/docs/javascript/card-widget.md
similarity index 67%
rename from docs/javascript/widget.md
rename to docs/javascript/card-widget.md
index 2a2ff4425..fef418c62 100644
--- a/docs/javascript/widget.md
+++ b/docs/javascript/card-widget.md
@@ -1,9 +1,9 @@
---
layout: page
-title: Widget Plugin
+title: Card Widget Plugin
---
-The widget plugin provides the functionality for collapsing, expanding and removing a card.
+The card widget plugin provides the functionality for collapsing, expanding and removing a card.
##### Usage
This plugin can be activated as a jQuery plugin or using the data api.
@@ -13,7 +13,7 @@ This plugin can be activated as a jQuery plugin or using the data api.
This plugin provides two data-api attributes. Any element using one of the following attributes should be placed within the `.card-tools` div, which is usually in the card header. For more information about the [card HTML structure]({% link components/cards.md %}), visit the card component documentation
-`data-widget="collapse"`
+`data-card-widget="collapse"`
This attribute, when attached to a button, allows the box to be collapsed/expanded when clicked.