Skip to content

Commit

Permalink
Merge pull request #2830 from XhmikosR/js-string-constants
Browse files Browse the repository at this point in the history 
Switch to String constants
  • Loading branch information
@REJack
REJack committed Jun 13, 2020
2 parents 0a589f6 + 6a7c491 commit fffb131
Show file tree
Hide file tree
Showing 13 changed files with 330 additions and 394 deletions.
2 changes: 1 addition & 1 deletion .bundlewatch.config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
},
{
"path": "./dist/js/adminlte.min.js",
"maxSize": "7 kB"
"maxSize": "6.5 kB"
}
]
}
34 changes: 14 additions & 20 deletions build/js/CardRefresh.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,26 +17,20 @@ const DATA_KEY = 'lte.cardrefresh'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]

const Event = {
LOADED: `loaded${EVENT_KEY}`,
OVERLAY_ADDED: `overlay.added${EVENT_KEY}`,
OVERLAY_REMOVED: `overlay.removed${EVENT_KEY}`
}
const EVENT_LOADED = `loaded${EVENT_KEY}`
const EVENT_OVERLAY_ADDED = `overlay.added${EVENT_KEY}`
const EVENT_OVERLAY_REMOVED = `overlay.removed${EVENT_KEY}`

const ClassName = {
CARD: 'card'
}
const CLASS_NAME_CARD = 'card'

const Selector = {
CARD: `.${ClassName.CARD}`,
DATA_REFRESH: '[data-card-widget="card-refresh"]'
}
const SELECTOR_CARD = `.${CLASS_NAME_CARD}`
const SELECTOR_DATA_REFRESH = '[data-card-widget="card-refresh"]'

const Default = {
source: '',
sourceSelector: '',
params: {},
trigger: Selector.DATA_REFRESH,
trigger: SELECTOR_DATA_REFRESH,
content: '.card-body',
loadInContent: true,
loadOnInit: true,
Expand All @@ -52,11 +46,11 @@ const Default = {
class CardRefresh {
constructor(element, settings) {
this._element = element
this._parent = element.parents(Selector.CARD).first()
this._parent = element.parents(SELECTOR_CARD).first()
this._settings = $.extend({}, Default, settings)
this._overlay = $(this._settings.overlayTemplate)

if (element.hasClass(ClassName.CARD)) {
if (element.hasClass(CLASS_NAME_CARD)) {
this._parent = element
}

Expand All @@ -82,17 +76,17 @@ class CardRefresh {
this._removeOverlay()
}, this._settings.responseType !== '' && this._settings.responseType)

$(this._element).trigger($.Event(Event.LOADED))
$(this._element).trigger($.Event(EVENT_LOADED))
}

_addOverlay() {
this._parent.append(this._overlay)
$(this._element).trigger($.Event(Event.OVERLAY_ADDED))
$(this._element).trigger($.Event(EVENT_OVERLAY_ADDED))
}

_removeOverlay() {
this._parent.find(this._overlay).remove()
$(this._element).trigger($.Event(Event.OVERLAY_REMOVED))
$(this._element).trigger($.Event(EVENT_OVERLAY_REMOVED))
}

// Private
Expand Down Expand Up @@ -131,7 +125,7 @@ class CardRefresh {
* ====================================================
*/

$(document).on('click', Selector.DATA_REFRESH, function (event) {
$(document).on('click', SELECTOR_DATA_REFRESH, function (event) {
if (event) {
event.preventDefault()
}
Expand All @@ -140,7 +134,7 @@ $(document).on('click', Selector.DATA_REFRESH, function (event) {
})

$(() => {
$(Selector.DATA_REFRESH).each(function () {
$(SELECTOR_DATA_REFRESH).each(function () {
CardRefresh._jQueryInterface.call($(this))
})
})
Expand Down
104 changes: 49 additions & 55 deletions build/js/CardWidget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,38 +17,32 @@ 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',
COLLAPSING: 'collapsing-card',
EXPANDING: 'expanding-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'
}
const EVENT_EXPANDED = `expanded${EVENT_KEY}`
const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
const EVENT_MAXIMIZED = `maximized${EVENT_KEY}`
const EVENT_MINIMIZED = `minimized${EVENT_KEY}`
const EVENT_REMOVED = `removed${EVENT_KEY}`

const CLASS_NAME_CARD = 'card'
const CLASS_NAME_COLLAPSED = 'collapsed-card'
const CLASS_NAME_COLLAPSING = 'collapsing-card'
const CLASS_NAME_EXPANDING = 'expanding-card'
const CLASS_NAME_WAS_COLLAPSED = 'was-collapsed'
const CLASS_NAME_MAXIMIZED = 'maximized-card'

const SELECTOR_DATA_REMOVE = '[data-card-widget="remove"]'
const SELECTOR_DATA_COLLAPSE = '[data-card-widget="collapse"]'
const SELECTOR_DATA_MAXIMIZE = '[data-card-widget="maximize"]'
const SELECTOR_CARD = `.${CLASS_NAME_CARD}`
const SELECTOR_CARD_HEADER = '.card-header'
const SELECTOR_CARD_BODY = '.card-body'
const SELECTOR_CARD_FOOTER = '.card-footer'

const Default = {
animationSpeed: 'normal',
collapseTrigger: Selector.DATA_COLLAPSE,
removeTrigger: Selector.DATA_REMOVE,
maximizeTrigger: Selector.DATA_MAXIMIZE,
collapseTrigger: SELECTOR_DATA_COLLAPSE,
removeTrigger: SELECTOR_DATA_REMOVE,
maximizeTrigger: SELECTOR_DATA_MAXIMIZE,
collapseIcon: 'fa-minus',
expandIcon: 'fa-plus',
maximizeIcon: 'fa-expand',
Expand All @@ -58,48 +52,48 @@ const Default = {
class CardWidget {
constructor(element, settings) {
this._element = element
this._parent = element.parents(Selector.CARD).first()
this._parent = element.parents(SELECTOR_CARD).first()

if (element.hasClass(ClassName.CARD)) {
if (element.hasClass(CLASS_NAME_CARD)) {
this._parent = element
}

this._settings = $.extend({}, Default, settings)
}

collapse() {
this._parent.addClass(ClassName.COLLAPSING).children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
this._parent.addClass(CLASS_NAME_COLLAPSING).children(`${SELECTOR_CARD_BODY}, ${SELECTOR_CARD_FOOTER}`)
.slideUp(this._settings.animationSpeed, () => {
this._parent.addClass(ClassName.COLLAPSED).removeClass(ClassName.COLLAPSING)
this._parent.addClass(CLASS_NAME_COLLAPSED).removeClass(CLASS_NAME_COLLAPSING)
})

this._parent.find('> ' + Selector.CARD_HEADER + ' ' + this._settings.collapseTrigger + ' .' + this._settings.collapseIcon)
this._parent.find('> ' + SELECTOR_CARD_HEADER + ' ' + this._settings.collapseTrigger + ' .' + this._settings.collapseIcon)
.addClass(this._settings.expandIcon)
.removeClass(this._settings.collapseIcon)

this._element.trigger($.Event(Event.COLLAPSED), this._parent)
this._element.trigger($.Event(EVENT_COLLAPSED), this._parent)
}

expand() {
this._parent.addClass(ClassName.EXPANDING).children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
this._parent.addClass(CLASS_NAME_EXPANDING).children(`${SELECTOR_CARD_BODY}, ${SELECTOR_CARD_FOOTER}`)
.slideDown(this._settings.animationSpeed, () => {
this._parent.removeClass(ClassName.COLLAPSED).removeClass(ClassName.EXPANDING)
this._parent.removeClass(CLASS_NAME_COLLAPSED).removeClass(CLASS_NAME_EXPANDING)
})

this._parent.find('> ' + Selector.CARD_HEADER + ' ' + this._settings.collapseTrigger + ' .' + this._settings.expandIcon)
this._parent.find('> ' + SELECTOR_CARD_HEADER + ' ' + this._settings.collapseTrigger + ' .' + this._settings.expandIcon)
.addClass(this._settings.collapseIcon)
.removeClass(this._settings.expandIcon)

this._element.trigger($.Event(Event.EXPANDED), this._parent)
this._element.trigger($.Event(EVENT_EXPANDED), this._parent)
}

remove() {
this._parent.slideUp()
this._element.trigger($.Event(Event.REMOVED), this._parent)
this._element.trigger($.Event(EVENT_REMOVED), this._parent)
}

toggle() {
if (this._parent.hasClass(ClassName.COLLAPSED)) {
if (this._parent.hasClass(CLASS_NAME_COLLAPSED)) {
this.expand()
return
}
Expand All @@ -118,16 +112,16 @@ class CardWidget {
}).delay(150).queue(function () {
const $element = $(this)

$element.addClass(ClassName.MAXIMIZED)
$('html').addClass(ClassName.MAXIMIZED)
if ($element.hasClass(ClassName.COLLAPSED)) {
$element.addClass(ClassName.WAS_COLLAPSED)
$element.addClass(CLASS_NAME_MAXIMIZED)
$('html').addClass(CLASS_NAME_MAXIMIZED)
if ($element.hasClass(CLASS_NAME_COLLAPSED)) {
$element.addClass(CLASS_NAME_WAS_COLLAPSED)
}

$element.dequeue()
})

this._element.trigger($.Event(Event.MAXIMIZED), this._parent)
this._element.trigger($.Event(EVENT_MAXIMIZED), this._parent)
}

minimize() {
Expand All @@ -139,24 +133,24 @@ class CardWidget {
).delay(10).queue(function () {
const $element = $(this)

$element.removeClass(ClassName.MAXIMIZED)
$('html').removeClass(ClassName.MAXIMIZED)
$element.removeClass(CLASS_NAME_MAXIMIZED)
$('html').removeClass(CLASS_NAME_MAXIMIZED)
$element.css({
height: 'inherit',
width: 'inherit'
})
if ($element.hasClass(ClassName.WAS_COLLAPSED)) {
$element.removeClass(ClassName.WAS_COLLAPSED)
if ($element.hasClass(CLASS_NAME_WAS_COLLAPSED)) {
$element.removeClass(CLASS_NAME_WAS_COLLAPSED)
}

$element.dequeue()
})

this._element.trigger($.Event(Event.MINIMIZED), this._parent)
this._element.trigger($.Event(EVENT_MINIMIZED), this._parent)
}

toggleMaximize() {
if (this._parent.hasClass(ClassName.MAXIMIZED)) {
if (this._parent.hasClass(CLASS_NAME_MAXIMIZED)) {
this.minimize()
return
}
Expand Down Expand Up @@ -206,23 +200,23 @@ class CardWidget {
* ====================================================
*/

$(document).on('click', Selector.DATA_COLLAPSE, function (event) {
$(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) {
$(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) {
$(document).on('click', SELECTOR_DATA_MAXIMIZE, function (event) {
if (event) {
event.preventDefault()
}
Expand Down

0 comments on commit fffb131

Please sign in to comment.