Skip to content

Commit c83bb0a

Browse files
thetthet
committed
maint(pat-depends): Rework to class based pattern.
1 parent c142214 commit c83bb0a

File tree

3 files changed

+112
-129
lines changed

3 files changed

+112
-129
lines changed

‎src/lib/dependshandler.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import $ from "jquery";
22
import parser from "./depends_parse";
33

4-
function DependsHandler($el, expression) {
4+
function DependsHandler(el, expression) {
5+
const $el = $(el);
56
var $context = $el.closest("form");
67
if (!$context.length) $context = $(document);
78
this.$el = $el;

‎src/pat/depends/depends.js

Lines changed: 75 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import $ from "jquery";
2-
import Base from "../../core/base";
3-
import utils from "../../core/utils";
1+
import { BasePattern } from "@patternslib/patternslib/src/core/basepattern";
2+
import events from "../../core/events";
3+
import dom from "../../core/dom";
44
import logging from "../../core/logging";
5-
import Parser from "../../core/parser";
5+
import Parser from "@patternslib/patternslib/src/core/parser";
6+
import registry from "@patternslib/patternslib/src/core/registry";
7+
import utils from "../../core/utils";
68

79
const log = logging.getLogger("depends");
810

@@ -13,127 +15,101 @@ parser.addArgument("transition", "none", ["none", "css", "fade", "slide"]);
1315
parser.addArgument("effect-duration", "fast");
1416
parser.addArgument("effect-easing", "swing");
1517

16-
export default Base.extend({
17-
name: "depends",
18-
trigger: ".pat-depends",
19-
jquery_plugin: true,
18+
class Pattern extends BasePattern {
19+
static name = "depends";
20+
static trigger = ".pat-depends";
21+
static parser = parser;
2022

21-
async init($el, opts) {
23+
async init() {
24+
this.$el = $(this.el);
2225
const DependsHandler = (await import("../../lib/dependshandler")).default; // prettier-ignore
2326

24-
const dependent = this.$el[0];
25-
const options = parser.parse(this.$el, opts);
26-
this.$modal = this.$el.parents(".pat-modal");
27-
28-
let handler;
2927
try {
30-
handler = new DependsHandler(this.$el, options.condition);
28+
this.handler = new DependsHandler(this.el, this.options.condition);
3129
} catch (e) {
32-
log.error("Invalid condition: " + e.message, dependent);
30+
log.error("Invalid condition: " + e.message, this.el);
3331
return;
3432
}
3533

36-
let state = handler.evaluate();
37-
switch (options.action) {
38-
case "show":
39-
utils.hideOrShow($el, state, options, this.name);
40-
this.updateModal();
41-
break;
42-
case "enable":
43-
if (state) this.enable();
44-
else this.disable();
45-
break;
46-
case "both":
47-
if (state) {
48-
utils.hideOrShow($el, state, options, this.name);
49-
this.updateModal();
50-
this.enable();
51-
} else {
52-
utils.hideOrShow($el, state, options, this.name);
53-
this.updateModal();
54-
this.disable();
55-
}
56-
break;
57-
}
34+
// Initialize
35+
this.set_state();
5836

59-
const data = {
60-
handler: handler,
61-
options: options,
62-
dependent: dependent,
63-
};
37+
for (const input of this.handler.getAllInputs()) {
38+
events.add_event_listener(
39+
input,
40+
"change",
41+
`pat-depends--change--${this.uuid}`, // We need to support multiple events per dependant ...
42+
this.set_state.bind(this)
43+
);
44+
events.add_event_listener(
45+
input,
46+
"keyup",
47+
`pat-depends--keyup--${this.uuid}`, // ... therefore we need to add a uuid to the event id ...
48+
this.set_state.bind(this)
49+
);
6450

65-
for (let input of handler.getAllInputs()) {
6651
if (input.form) {
67-
let $form = $(input.form);
68-
let dependents = $form.data("patDepends.dependents");
69-
if (!dependents) {
70-
dependents = [data];
71-
$form.on("reset.pat-depends", () => this.onReset);
72-
} else if (dependents.indexOf(data) === -1) dependents.push(data);
73-
$form.data("patDepends.dependents", dependents);
52+
events.add_event_listener(
53+
input.form,
54+
"reset",
55+
`pat-depends--reset--${this.uuid}`, // ... to not override previously set event handlers.
56+
async () => {
57+
// TODO: note sure, what this timeout is for.
58+
await utils.timeout(50);
59+
this.set_state.bind(this);
60+
}
61+
);
7462
}
75-
$(input).on("change.pat-depends", null, data, this.onChange.bind(this));
76-
$(input).on("keyup.pat-depends", null, data, this.onChange.bind(this));
7763
}
78-
},
64+
}
7965

80-
async onReset(event) {
81-
const dependents = $(event.target).data("patDepends.dependents");
82-
await utils.timeout(50);
83-
for (let dependent of dependents) {
84-
event.data = dependent;
85-
this.onChange(event);
86-
}
87-
},
66+
update_modal() {
67+
const modal = this.el.closest(".pat-modal");
8868

89-
updateModal() {
9069
// If we're in a modal, make sure that it gets resized.
91-
if (this.$modal.length) {
70+
if (this.modal) {
9271
$(document).trigger("pat-update", { pattern: "depends" });
9372
}
94-
},
73+
}
9574

9675
enable() {
97-
if (this.$el.is(":input")) {
98-
this.$el[0].disabled = null;
99-
} else if (this.$el.is("a")) {
100-
this.$el.off("click.patternDepends");
76+
if (dom.is_input(this.el)) {
77+
this.el.disabled = false;
78+
} else if (this.el.tagName === "A") {
79+
events.remove_event_listener(this.el, "pat-depends--click");
10180
}
102-
this.$el.removeClass("disabled");
81+
this.el.classList.remove("disabled");
10382
this.$el.trigger("pat-update", {
10483
pattern: "depends",
10584
action: "attribute-changed",
106-
dom: this.$el[0],
85+
dom: this.el,
10786
enabled: true,
10887
});
109-
},
88+
}
11089

11190
disable() {
112-
if (this.$el.is(":input")) {
113-
this.$el[0].disabled = "disabled";
114-
} else if (this.$el.is("a")) {
115-
this.$el.on("click.patternDepends", (e) => e.preventDefault());
91+
if (dom.is_input(this.el)) {
92+
this.el.disabled = true;
93+
} else if (this.el.tagName === "A") {
94+
events.add_event_listener(this.el, "click", "pat-depends--click", (e) =>
95+
e.preventDefault()
96+
);
11697
}
117-
this.$el.addClass("disabled");
98+
this.el.classList.add("disabled");
11899
this.$el.trigger("pat-update", {
119100
pattern: "depends",
120101
action: "attribute-changed",
121-
dom: this.$el[0],
102+
dom: this.el,
122103
enabled: false,
123104
});
124-
},
125-
126-
onChange(event) {
127-
const handler = event.data.handler;
128-
const options = event.data.options;
129-
const dependent = event.data.dependent;
130-
const $depdendent = $(dependent);
131-
const state = handler.evaluate();
105+
}
132106

133-
switch (options.action) {
107+
set_state() {
108+
const state = this.handler.evaluate();
109+
switch (this.options.action) {
134110
case "show":
135-
utils.hideOrShow($depdendent, state, options, this.name);
136-
this.updateModal();
111+
utils.hideOrShow(this.el, state, this.options, this.name);
112+
this.update_modal();
137113
break;
138114
case "enable":
139115
if (state) {
@@ -143,14 +119,20 @@ export default Base.extend({
143119
}
144120
break;
145121
case "both":
146-
utils.hideOrShow($depdendent, state, options, this.name);
147-
this.updateModal();
122+
utils.hideOrShow(this.el, state, this.options, this.name);
123+
this.update_modal();
148124
if (state) {
149125
this.enable();
150126
} else {
151127
this.disable();
152128
}
153129
break;
154130
}
155-
},
156-
});
131+
}
132+
}
133+
134+
// Register Pattern class in the global pattern registry
135+
registry.register(Pattern);
136+
137+
// Make it available
138+
export default Pattern;

‎src/pat/depends/depends.test.js

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,12 @@ describe("pat-depends", function () {
1919
'<div id="dependent" class="pat-depends"/>',
2020
].join("\n")
2121
);
22-
var $dependent = $("#dependent");
23-
pattern.init($dependent, { condition: "control" });
22+
23+
const el = document.querySelector(".pat-depends");
24+
new pattern(el, { condition: "control" });
2425
await utils.timeout(1); // wait a tick for async to settle.
2526

26-
expect($dependent.css("display")).toBe("none");
27+
expect($(el).css("display")).toBe("none");
2728
});
2829

2930
it("Show if condition is not met initially", async function () {
@@ -33,10 +34,12 @@ describe("pat-depends", function () {
3334
'<div id="dependent" class="pat-depends" style="display: none"/>',
3435
].join("\n")
3536
);
36-
var $dependent = $("#dependent");
37-
pattern.init($dependent, { condition: "control" });
37+
38+
const el = document.querySelector(".pat-depends");
39+
new pattern(el, { condition: "control" });
3840
await utils.timeout(1); // wait a tick for async to settle.
39-
expect($dependent.css("display")).not.toBe("none");
41+
42+
expect($(el).css("display")).not.toBe("none");
4043
});
4144
});
4245

@@ -56,14 +59,14 @@ describe("pat-depends", function () {
5659
'<button id="dependent" class="pat-depends" type="button">Click me</button>',
5760
].join("\n")
5861
);
59-
var pat = pattern.init($(".pat-depends"), {
60-
condition: "control",
61-
});
62+
63+
const el = document.querySelector(".pat-depends");
64+
const instance = new pattern(el, { condition: "control" });
6265
await utils.timeout(1); // wait a tick for async to settle.
63-
var $dependent = $("#dependent");
64-
pat.disable();
65-
expect($dependent[0].disabled).toBeTruthy();
66-
expect($dependent.hasClass("disabled")).toBe(true);
66+
67+
instance.disable();
68+
expect(el.disabled).toBeTruthy();
69+
expect(el.classList.contains("disabled")).toBe(true);
6770
});
6871

6972
it("Anchor", async function () {
@@ -73,14 +76,13 @@ describe("pat-depends", function () {
7376
'<a class="pat-depends" href="#target">Click me</a>',
7477
].join("\n")
7578
);
76-
var pat = pattern.init($(".pat-depends"), { condition: "control" });
79+
80+
const el = document.querySelector(".pat-depends");
81+
const instance = new pattern(el, { condition: "control" });
7782
await utils.timeout(1); // wait a tick for async to settle.
78-
var $dependent = $("#lab a");
79-
pat.disable();
80-
var events = $._data($dependent[0]).events;
81-
expect($dependent.hasClass("disabled")).toBe(true);
82-
expect(events.click).toBeDefined();
83-
expect(events.click[0].namespace).toBe("patternDepends");
83+
84+
instance.disable();
85+
expect(el.classList.contains("disabled")).toBe(true);
8486
});
8587
});
8688

@@ -100,14 +102,14 @@ describe("pat-depends", function () {
100102
'<button disabled="disabled" class="pat-depends disabled" type="button">Click me</button>',
101103
].join("\n")
102104
);
103-
var pat = pattern.init($(".pat-depends"), {
104-
condition: "control",
105-
});
105+
106+
const el = document.querySelector(".pat-depends");
107+
const instance = new pattern(el, { condition: "control" });
106108
await utils.timeout(1); // wait a tick for async to settle.
107-
var $dependent = $("#lab button");
108-
pat.enable();
109-
expect($dependent[0].disabled).toBeFalsy();
110-
expect($dependent.hasClass("disabled")).toBe(false);
109+
110+
instance.enable();
111+
expect(el.disabled).toBeFalsy();
112+
expect(el.classList.contains("disabled")).toBe(false);
111113
});
112114

113115
it("Anchor", async function () {
@@ -117,15 +119,13 @@ describe("pat-depends", function () {
117119
'<a href="#target" class="pat-depends disabled">Click me</a>',
118120
].join("\n")
119121
);
120-
var pat = pattern.init($(".pat-depends"), {
121-
condition: "control",
122-
});
122+
123+
const el = document.querySelector(".pat-depends");
124+
const instance = new pattern(el, { condition: "control" });
123125
await utils.timeout(1); // wait a tick for async to settle.
124-
var $dependent = $("#lab a");
125-
$dependent.on("click.patternDepends", false);
126-
pat.enable();
127-
expect($dependent.hasClass("disabled")).toBe(false);
128-
expect($._data($dependent[0]).events).toBe(undefined);
126+
127+
instance.enable();
128+
expect(el.classList.contains("disabled")).toBe(false);
129129
});
130130
});
131131

0 commit comments

Comments
 (0)