Skip to content

Commit

Permalink
fix(format): fix all prettier violations
Browse files Browse the repository at this point in the history 
exclude less files from prettier formatting since running the formatter was breaking the syntax
  • Loading branch information
@giamir
giamir committed Nov 28, 2022
1 parent 53937b3 commit b5d1aea
Show file tree
Hide file tree
Showing 13 changed files with 638 additions and 300 deletions.
4 changes: 3 additions & 1 deletion .prettierignore
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
*.md
.vscode/
dist/
dist/
# TODO: prettier is breaking less files while formatting
*.less
3 changes: 2 additions & 1 deletion .prettierrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,6 @@
"singleQuote": false,
"quoteProps": "consistent",
"trailingComma": "es5",
"printWidth": 80
"printWidth": 80,
"endOfLine": "auto"
}
113 changes: 79 additions & 34 deletions lib/ts/controllers/s-expandable-control.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import * as Stacks from '../stacks';
import * as Stacks from "../stacks";

// Radio buttons only trigger a change event when they're *checked*, but not when
// they're *unchecked*. Therefore, if we have an active `s-expandable-control` in
Expand All @@ -12,10 +12,15 @@ const RADIO_OFF_EVENT = "s-expandable-control:radio-off";

function globalChangeListener(e: UIEvent) {
const target = e.target;
if (!(target instanceof HTMLInputElement) || target.nodeName !== "INPUT" || target.type !== "radio") {
if (
!(target instanceof HTMLInputElement) ||
target.nodeName !== "INPUT" ||
target.type !== "radio"
) {
return;
}
document.querySelectorAll('input[type="radio"][name="' + target.name + '"]')
document
.querySelectorAll('input[type="radio"][name="' + target.name + '"]')
.forEach(function (other) {
if (other === e.target) {
return;
Expand All @@ -37,12 +42,18 @@ function globalChangeListenerRequired(required: boolean) {
if (required) {
refCount++;
if (refCount === 1) {
document.body.addEventListener("change", globalChangeListener as EventListener);
document.body.addEventListener(
"change",
globalChangeListener as EventListener
);
}
} else {
refCount--;
if (refCount === 0) {
document.body.removeEventListener("change", globalChangeListener as EventListener);
document.body.removeEventListener(
"change",
globalChangeListener as EventListener
);
}
}
}
Expand All @@ -55,7 +66,12 @@ export class ExpandableController extends Stacks.StacksController {
private lastKeydownClickTimestamp = 0;

initialize() {
if (this.element.nodeName === "INPUT" && ["radio", "checkbox"].indexOf((<HTMLInputElement>this.element).type) >= 0) {
if (
this.element.nodeName === "INPUT" &&
["radio", "checkbox"].indexOf(
(<HTMLInputElement>this.element).type
) >= 0
) {
this.isCollapsed = this._isCollapsedForCheckable.bind(this);
this.events = ["change", RADIO_OFF_EVENT];
this.isCheckable = true;
Expand All @@ -65,40 +81,41 @@ export class ExpandableController extends Stacks.StacksController {
this.events = ["click", "keydown"];
}
this.listener = this.listener.bind(this);
};

}

// for non-checkable elements, the initial source of truth is the collapsed/expanded
// state of the controlled element (unless the element doesn't exist)
_isCollapsedForClickable() {
const cc = this.controlledExpandables;
// the element is considered collapsed if *any* target element is collapsed
return cc.length > 0 ? !cc.every(element => element.classList.contains("is-expanded")) : this.element.getAttribute("aria-expanded") === "false";
};
return cc.length > 0
? !cc.every((element) => element.classList.contains("is-expanded"))
: this.element.getAttribute("aria-expanded") === "false";
}

// for checkable elements, the initial source of truth is the checked state
_isCollapsedForCheckable() {
return !(<HTMLInputElement>this.element).checked;
};

}

get controlledExpandables() {
const attr = this.element.getAttribute("aria-controls");
if (!attr) {
throw `[aria-controls="targetId1 ... targetIdN"] attribute required`;
}
const result = attr.split(/\s+/g)
.map(s => document.getElementById(s))
const result = attr
.split(/\s+/g)
.map((s) => document.getElementById(s))
.filter((e): e is HTMLElement => !!e);
if (!result.length) {
throw "couldn't find controls"
throw "couldn't find controls";
}
return result;
};
}

_dispatchShowHideEvent(isShow: boolean) {
this.triggerEvent(isShow ? "show" : "hide");
};
}

_toggleClass(doAdd: boolean) {
if (!this.data.has("toggle-class")) {
Expand All @@ -107,22 +124,30 @@ export class ExpandableController extends Stacks.StacksController {
const cl = this.element.classList;
const toggleClass = this.data.get("toggle-class");
if (!toggleClass) {
throw "couldn't find toggle class"
throw "couldn't find toggle class";
}
toggleClass.split(/\s+/).forEach(function (cls) {
cl.toggle(cls, !!doAdd);
});
};
}

listener(e: Event) {
let newCollapsed;
if (this.isCheckable) {
newCollapsed = !(<HTMLInputElement>this.element).checked;
} else {
if (e.type == "keydown" && (e instanceof KeyboardEvent && e.keyCode != 13 && e.keyCode != 32)) {
if (
e.type == "keydown" &&
e instanceof KeyboardEvent &&
e.keyCode != 13 &&
e.keyCode != 32
) {
return;
}
if (e.target !== e.currentTarget && ["A", "BUTTON"].indexOf((<HTMLElement>e.target).nodeName) >= 0) {
if (
e.target !== e.currentTarget &&
["A", "BUTTON"].indexOf((<HTMLElement>e.target).nodeName) >= 0
) {
return;
}

Expand All @@ -133,24 +158,31 @@ export class ExpandableController extends Stacks.StacksController {
// doesn't guarantee it.
if (e.type == "keydown") {
this.lastKeydownClickTimestamp = Date.now();
} else if (e.type == "click" && Date.now() - this.lastKeydownClickTimestamp < 300) {
} else if (
e.type == "click" &&
Date.now() - this.lastKeydownClickTimestamp < 300
) {
return;
}
newCollapsed = this.element.getAttribute("aria-expanded") === "true";
newCollapsed =
this.element.getAttribute("aria-expanded") === "true";
if (e.type === "click") {
(<HTMLInputElement>this.element).blur();
}
}
this.element.setAttribute("aria-expanded", newCollapsed ? "false" : "true");
this.element.setAttribute(
"aria-expanded",
newCollapsed ? "false" : "true"
);
for (const controlledElement of this.controlledExpandables) {
controlledElement.classList.toggle("is-expanded", !newCollapsed);
}
this._dispatchShowHideEvent(!newCollapsed);
this._toggleClass(!newCollapsed);
};
}

connect() {
this.events.forEach(e => {
this.events.forEach((e) => {
this.element.addEventListener(e, this.listener.bind(this));
}, this);

Expand All @@ -163,31 +195,44 @@ export class ExpandableController extends Stacks.StacksController {
// Note: aria-expanded is currently an invalid attribute on radio elements
// Support for aria-expanded is being debated by the W3C https://github.com/w3c/aria/issues/1404 as recently as June 2022
if (!this.isRadio) {
this.element.setAttribute("aria-expanded", this.isCollapsed() ? "false" : "true");
this.element.setAttribute(
"aria-expanded",
this.isCollapsed() ? "false" : "true"
);
}
if (this.isCheckable) {
const cc = this.controlledExpandables;
if (cc.length) {
const expected = !this.isCollapsed();
// if any element does not match the expected state, set them all to the expected state
if (cc.some(element => element.classList.contains("is-expanded") !== expected)) {
for (const controlledElement of this.controlledExpandables) {
controlledElement.classList.toggle("is-expanded", expected);
if (
cc.some(
(element) =>
element.classList.contains("is-expanded") !==
expected
)
) {
for (const controlledElement of this
.controlledExpandables) {
controlledElement.classList.toggle(
"is-expanded",
expected
);
}
this._dispatchShowHideEvent(expected);
this._toggleClass(expected);
}
}
}
};
}

disconnect() {
this.events.forEach(e => {
this.events.forEach((e) => {
this.element.removeEventListener(e, this.listener.bind(this));
}, this);

if (this.isRadio) {
globalChangeListenerRequired(false);
}
};
}
}
}
Loading

0 comments on commit b5d1aea

Please sign in to comment.