maint(pat-collapsible): Modernize code.

Author: thet

src/pat/collapsible/collapsible.js

@@ -1,13 +1,3 @@
-/**
- * Patterns collapsible - Collapsible content
- *
- * Copyright 2012-2013 Florian Friesdorf
- * Copyright 2012-2013 Simplon B.V. - Wichert Akkerman
- * Copyright 2012 Markus Maier
- * Copyright 2013 Peter Lamut
- * Copyright 2012 Jonas Hoersch
- */
-
 import $ from "jquery";
 import "../../core/jquery-ext";
 import inject from "../inject/inject";
@@ -54,8 +44,8 @@ export default Base.extend({
         "slide-horizontal": { closed: "slideOut", open: "slideIn" },
     },
 
-    init: function ($el, opts) {
-        var $content, state, storage;
+    init($el, opts) {
+        let $content;
         this.options = store.updateOptions($el[0], parser.parse($el, opts));
 
         if (this.options.trigger === "::first") {
@@ -81,11 +71,11 @@ export default Base.extend({
             }
         }
 
-        state = this.options.closed || $el.hasClass("closed") ? "closed" : "open";
+        let state = this.options.closed || $el.hasClass("closed") ? "closed" : "open";
         if (this.options.store !== "none") {
-            storage = (this.options.store === "local" ? store.local : store.session)(
-                this.name
-            );
+            const storage = (
+                this.options.store === "local" ? store.local : store.session
+            )(this.name);
             state = storage.get($el.attr("id")) || state;
         }
 
@@ -122,42 +112,42 @@ export default Base.extend({
         return $el;
     },
 
-    open: function () {
+    open() {
         if (!this.$el.hasClass("open")) this.toggle();
         return this.$el;
     },
 
-    close: function () {
+    close() {
         if (!this.$el.hasClass("closed")) this.toggle();
         return this.$el;
     },
 
-    _onClick: function (event) {
+    _onClick(event) {
         this.toggle(event.data);
     },
 
-    _onKeyPress: function (event) {
-        var keycode = event.keyCode ? event.keyCode : event.which;
+    _onKeyPress(event) {
+        const keycode = event.keyCode ? event.keyCode : event.which;
         if (keycode === 13) this.toggle();
     },
 
-    _loadContent: function ($el, url, $target) {
-        var components = url.split("#"),
-            base_url = components[0],
-            id = components[1] ? "#" + components[1] : "body",
-            opts = [
-                {
-                    url: base_url,
-                    source: id,
-                    $target: $target,
-                    dataType: "html",
-                },
-            ];
+    _loadContent($el, url, $target) {
+        const components = url.split("#");
+        const base_url = components[0];
+        const id = components[1] ? "#" + components[1] : "body";
+        const opts = [
+            {
+                url: base_url,
+                source: id,
+                $target: $target,
+                dataType: "html",
+            },
+        ];
         inject.execute(opts, $el);
     },
 
     // jQuery method to force loading of content.
-    loadContent: function ($el) {
+    loadContent($el) {
         return $el.each(
             function (idx, el) {
                 if (this.options.loadContent)
@@ -166,12 +156,12 @@ export default Base.extend({
         );
     },
 
-    toggle: function () {
-        var new_state = this.$el.hasClass("closed") ? "open" : "closed";
+    toggle() {
+        const new_state = this.$el.hasClass("closed") ? "open" : "closed";
         if (this.options.store !== "none") {
-            var storage = (this.options.store === "local" ? store.local : store.session)(
-                this.name
-            );
+            const storage = (
+                this.options.store === "local" ? store.local : store.session
+            )(this.name);
             storage.set(this.$el.attr("id"), new_state);
         }
         if (new_state === "open") {
@@ -198,11 +188,11 @@ export default Base.extend({
         }
     },
 
-    _transit: async function ($el, from_cls, to_cls) {
+    async _transit($el, from_cls, to_cls) {
         if (to_cls === "open" && this.options.loadContent) {
             this._loadContent($el, this.options.loadContent, this.$panel);
         }
-        var duration =
+        const duration =
             this.options.transition === "css" || this.options.transition === "none"
                 ? null
                 : this.options.effect.duration;
@@ -215,7 +205,7 @@ export default Base.extend({
                 transition: "complete",
             });
         } else {
-            var t = this.transitions[this.options.transition];
+            const t = this.transitions[this.options.transition];
             $el.addClass("in-progress").trigger("pat-update", {
                 pattern: "collapsible",
                 transition: "start",

src/pat/collapsible/collapsible.test.js

@@ -10,81 +10,81 @@ describe("pat-collapsible", function () {
         jest.restoreAllMocks();
     });
 
-    it("wraps the collapsible within a div.panel-content", function () {
+    it("1- wraps the collapsible within a div.panel-content", function () {
         document.body.innerHTML = `
             <div class="pat-collapsible">
                 <h3>Trigger header</h3>
                 <p>Collapsible content</p>
             </div>
         `;
 
-        var $collapsible = $(".pat-collapsible");
+        const $collapsible = $(".pat-collapsible");
         pattern.init($collapsible);
         expect($collapsible.find(".panel-content").length).toBe(1);
     });
 
-    it("is open by default", function () {
+    it("2 - is open by default", function () {
         document.body.innerHTML = `
             <div class="pat-collapsible">
                 <h3>Trigger header</h3>
                 <p>Collapsible content</p>
             </div>
         `;
 
-        var $collapsible = $(".pat-collapsible");
+        const $collapsible = $(".pat-collapsible");
         pattern.init($collapsible);
         expect($collapsible.hasClass("open")).toBeTruthy();
     });
 
-    it("can be explicitly closed by adding the class 'closed'", function () {
+    it("3 - can be explicitly closed by adding the class 'closed'", function () {
         document.body.innerHTML = `
             <div class="pat-collapsible closed">
                 <h3>Trigger header</h3>
                 <p>Collapsible content</p>
             </div>"
         `;
 
-        var $collapsible = $(".pat-collapsible");
+        const $collapsible = $(".pat-collapsible");
         pattern.init($collapsible);
         expect($collapsible.hasClass("open")).toBeFalsy();
     });
 
-    it("can be toggled closed if it's open", function () {
+    it("4 - can be toggled closed if it's open", function () {
         document.body.innerHTML = `
             <div class="pat-collapsible">
                 <h3>Trigger header</h3>
                 <p>Collapsible content</p>
             </div>
         `;
 
-        var $collapsible = $(".pat-collapsible");
-        var pat = pattern.init($collapsible, { transition: "none" });
+        const $collapsible = $(".pat-collapsible");
+        const pat = pattern.init($collapsible, { transition: "none" });
         pat.toggle($collapsible);
         expect($collapsible.hasClass("open")).toBe(false);
         expect($collapsible.hasClass("closed")).toBe(true);
-        var $trigger = $("h3");
+        const $trigger = $("h3");
         expect($trigger.hasClass("collapsible-open")).toBe(false);
         expect($trigger.hasClass("collapsible-closed")).toBe(true);
     });
 
-    it("can be toggled open if it's closed", function () {
+    it("5 - can be toggled open if it's closed", function () {
         document.body.innerHTML = `
             <div class="pat-collapsible closed">
                 <h3>Trigger header</h3>
                 <p>Collapsible content</p>
             </div>
         `;
-        var $collapsible = $(".pat-collapsible");
-        var pat = pattern.init($collapsible, { transition: "none" });
+        const $collapsible = $(".pat-collapsible");
+        const pat = pattern.init($collapsible, { transition: "none" });
         pat.toggle($collapsible);
         expect($collapsible.hasClass("open")).toBe(true);
         expect($collapsible.hasClass("closed")).toBe(false);
-        var $trigger = $("h3");
+        const $trigger = $("h3");
         expect($trigger.hasClass("collapsible-open")).toBe(true);
         expect($trigger.hasClass("collapsible-closed")).toBe(false);
     });
 
-    it("can be configured to have trigger which only opens it", async function () {
+    it("6 - can be configured to have trigger which only opens it", async function () {
         document.body.innerHTML = `
             <div class="closed pat-collapsible" data-pat-collapsible="open-trigger: #open">
                 <button>toggle</button>
@@ -102,7 +102,7 @@ describe("pat-collapsible", function () {
         expect($collapsible.hasClass("closed")).toBe(false);
     });
 
-    it("can be configured to have trigger which only closes it", async function () {
+    it("7 - can be configured to have trigger which only closes it", async function () {
         document.body.innerHTML = `
             <div class="pat-collapsible" data-pat-collapsible="close-trigger: #close">
                 <button>toggle</button>
@@ -120,8 +120,8 @@ describe("pat-collapsible", function () {
         expect($collapsible.hasClass("open")).toBe(false);
     });
 
-    describe("scrolling", function () {
-        it("can scroll to itself when opened.", async function () {
+    describe("8 - scrolling", function () {
+        it("8.1 - can scroll to itself when opened.", async function () {
             document.body.innerHTML = `
             <div class="pat-collapsible closed" data-pat-collapsible="scroll-selector: self">
                 <p>Collapsible content</p>
@@ -137,7 +137,7 @@ describe("pat-collapsible", function () {
             expect(spy_scroll).toHaveBeenCalledTimes(1);
         });
 
-        it("does not scroll when being closed.", async function () {
+        it("8.2 - does not scroll when being closed.", async function () {
             document.body.innerHTML = `
             <div class="pat-collapsible opened" data-pat-collapsible="scroll-selector: self">
                 <p>Collapsible content</p>
@@ -153,19 +153,19 @@ describe("pat-collapsible", function () {
             expect(spy_scroll).not.toHaveBeenCalled();
         });
 
-        it("only scrolls once even if multiple collapsible are opened at once.", async function () {
+        it("8.3 - only scrolls once even if multiple collapsible are opened at once.", async function () {
             document.body.innerHTML = `
-            <button class="pat-button" id="open">Open All</button>
-            <div class="pat-collapsible closed c1" data-pat-collapsible="scroll-selector: self; open-trigger: #open; transition: none">
-                <p>Collapsible content</p>
-            </div>
-            <div class="pat-collapsible closed c2" data-pat-collapsible="scroll-selector: self; open-trigger: #open; transition: none">
-                <p>Collapsible content</p>
-            </div>
-            <div class="pat-collapsible closed c3" data-pat-collapsible="scroll-selector: self; open-trigger: #open; transition: none">
-                <p>Collapsible content</p>
-            </div>
-        `;
+                <button class="pat-button" id="open">Open All</button>
+                <div class="pat-collapsible closed c1" data-pat-collapsible="scroll-selector: self; open-trigger: #open; transition: none">
+                    <p>Collapsible content</p>
+                </div>
+                <div class="pat-collapsible closed c2" data-pat-collapsible="scroll-selector: self; open-trigger: #open; transition: none">
+                    <p>Collapsible content</p>
+                </div>
+                <div class="pat-collapsible closed c3" data-pat-collapsible="scroll-selector: self; open-trigger: #open; transition: none">
+                    <p>Collapsible content</p>
+                </div>
+            `;
 
             registry.scan(document.body);
             const spy_animate = jest.spyOn($.fn, "animate");
@@ -181,12 +181,12 @@ describe("pat-collapsible", function () {
             expect(spy_animate).toHaveBeenCalledTimes(1);
         });
 
-        it("can scroll to itself when opened with an offset.", async function () {
+        it("8.4 - can scroll to itself when opened with an offset.", async function () {
             document.body.innerHTML = `
-            <div class="pat-collapsible closed" data-pat-collapsible="scroll-selector: self; scroll-offset: 40; transition: none">
-                <p>Collapsible content</p>
-            </div>
-        `;
+                <div class="pat-collapsible closed" data-pat-collapsible="scroll-selector: self; scroll-offset: 40; transition: none">
+                    <p>Collapsible content</p>
+                </div>
+            `;
             const collapsible = document.querySelector(".pat-collapsible");
             const pat = pattern.init(collapsible);
             const spy_animate = jest.spyOn($.fn, "animate");
@@ -198,12 +198,12 @@ describe("pat-collapsible", function () {
             expect(arg_1.scrollTop).toBe(-40); // the offset is substracted from the scroll position to stop BEFORE the target position.
         });
 
-        it("can scroll to itself when opened with a negative offset.", async function () {
+        it("8.5 - can scroll to itself when opened with a negative offset.", async function () {
             document.body.innerHTML = `
-            <div class="pat-collapsible closed" data-pat-collapsible="scroll-selector: self; scroll-offset: -40; transition: none">
-                <p>Collapsible content</p>
-            </div>
-        `;
+                <div class="pat-collapsible closed" data-pat-collapsible="scroll-selector: self; scroll-offset: -40; transition: none">
+                    <p>Collapsible content</p>
+                </div>
+            `;
             const collapsible = document.querySelector(".pat-collapsible");
             const pat = pattern.init(collapsible);
             const spy_animate = jest.spyOn($.fn, "animate");