Use template literals (#2835)

.eslintrc.json

@@ -39,6 +39,7 @@
       "error",
       "always"
     ],
+    "prefer-template": "error",
     "prefer-named-capture-group": "off",
     "semi": [
       "error",

build/js/CardWidget.js

@@ -67,7 +67,7 @@ class CardWidget {
         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)
 
@@ -80,7 +80,7 @@ class CardWidget {
         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)
 
@@ -102,7 +102,7 @@ class CardWidget {
   }
 
   maximize() {
-    this._parent.find(this._settings.maximizeTrigger + ' .' + this._settings.maximizeIcon)
+    this._parent.find(`${this._settings.maximizeTrigger} .${this._settings.maximizeIcon}`)
       .addClass(this._settings.minimizeIcon)
       .removeClass(this._settings.maximizeIcon)
     this._parent.css({
@@ -125,11 +125,10 @@ class CardWidget {
   }
 
   minimize() {
-    this._parent.find(this._settings.maximizeTrigger + ' .' + this._settings.minimizeIcon)
+    this._parent.find(`${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;'
+    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 () {
       const $element = $(this)
 

build/js/ControlSidebar.js

@@ -184,7 +184,7 @@ class ControlSidebar {
     }
 
     const $controlSidebar = $(SELECTOR_CONTROL_SIDEBAR)
-    const $controlsidebarContent = $(SELECTOR_CONTROL_SIDEBAR + ', ' + SELECTOR_CONTROL_SIDEBAR + ' ' + SELECTOR_CONTROL_SIDEBAR_CONTENT)
+    const $controlsidebarContent = $(`${SELECTOR_CONTROL_SIDEBAR}, ${SELECTOR_CONTROL_SIDEBAR} ${SELECTOR_CONTROL_SIDEBAR_CONTENT}`)
 
     if (positions.top === 0 && positions.bottom === 0) {
       $controlSidebar.css({
@@ -241,7 +241,7 @@ class ControlSidebar {
       }
     }
 
-    const $controlSidebar = $(SELECTOR_CONTROL_SIDEBAR + ' ' + SELECTOR_CONTROL_SIDEBAR_CONTENT)
+    const $controlSidebar = $(`${SELECTOR_CONTROL_SIDEBAR} ${SELECTOR_CONTROL_SIDEBAR_CONTENT}`)
     $controlSidebar.css('height', sidebarHeight)
 
     if (typeof $.fn.overlayScrollbars !== 'undefined') {

build/js/Dropdown.js

@@ -112,14 +112,14 @@ class Dropdown {
  * ====================================================
  */
 
-$(SELECTOR_DROPDOWN_MENU + ' ' + SELECTOR_DROPDOWN_TOGGLE).on('click', function (event) {
+$(`${SELECTOR_DROPDOWN_MENU} ${SELECTOR_DROPDOWN_TOGGLE}`).on('click', function (event) {
   event.preventDefault()
   event.stopPropagation()
 
   Dropdown._jQueryInterface.call($(this), 'toggleSubmenu')
 })
 
-$(SELECTOR_NAVBAR + ' ' + SELECTOR_DROPDOWN_TOGGLE).on('click', event => {
+$(`${SELECTOR_NAVBAR} ${SELECTOR_DROPDOWN_TOGGLE}`).on('click', event => {
   event.preventDefault()
 
   setTimeout(function () {

build/js/Layout.js

@@ -115,7 +115,7 @@ class Layout {
 
   fixLoginRegisterHeight() {
     const $body = $('body')
-    const $selector = $(SELECTOR_LOGIN_BOX + ', ' + SELECTOR_REGISTER_BOX)
+    const $selector = $(`${SELECTOR_LOGIN_BOX}, ${SELECTOR_REGISTER_BOX}`)
 
     if ($selector.length === 0) {
       $body.css('height', 'auto')
@@ -215,11 +215,11 @@ $(window).on('load', () => {
   Layout._jQueryInterface.call($('body'))
 })
 
-$(SELECTOR_SIDEBAR + ' a').on('focusin', () => {
+$(`${SELECTOR_SIDEBAR} a`).on('focusin', () => {
   $(SELECTOR_MAIN_SIDEBAR).addClass(CLASS_NAME_SIDEBAR_FOCUSED)
 })
 
-$(SELECTOR_SIDEBAR + ' a').on('focusout', () => {
+$(`${SELECTOR_SIDEBAR} a`).on('focusout', () => {
   $(SELECTOR_MAIN_SIDEBAR).removeClass(CLASS_NAME_SIDEBAR_FOCUSED)
 })
 

build/js/Treeview.js

@@ -91,11 +91,11 @@ class Treeview {
     const $relativeTarget = $(event.currentTarget)
     const $parent = $relativeTarget.parent()
 
-    let treeviewMenu = $parent.find('> ' + SELECTOR_TREEVIEW_MENU)
+    let treeviewMenu = $parent.find(`> ${SELECTOR_TREEVIEW_MENU}`)
 
     if (!treeviewMenu.is(SELECTOR_TREEVIEW_MENU)) {
       if (!$parent.is(SELECTOR_LI)) {
-        treeviewMenu = $parent.parent().find('> ' + SELECTOR_TREEVIEW_MENU)
+        treeviewMenu = $parent.parent().find(`> ${SELECTOR_TREEVIEW_MENU}`)
       }
 
       if (!treeviewMenu.is(SELECTOR_TREEVIEW_MENU)) {