@stackoverflow/stacks 1.6.2 → 1.6.3

package/lib/ts/controllers/s-tooltip.ts

@@ -45,9 +45,13 @@ export class TooltipController extends BasePopoverController {
      * Attempts to show the tooltip popover so long as no other Stacks-managed popover is
      * present on the page.
      */
-    show(dispatcher: Event|Element|null = null) {
+    show(dispatcher: Event | Element | null = null) {
         // check and see if this controller coexists with a popover
-        const controller = Stacks.application.getControllerForElementAndIdentifier(this.element, "s-popover");
+        const controller =
+            Stacks.application.getControllerForElementAndIdentifier(
+                this.element,
+                "s-popover"
+            );
 
         // if the controller exists and already has a visible popover, don't show the tooltip
         if (controller && (<PopoverController>controller).isVisible) {
@@ -62,7 +66,10 @@ export class TooltipController extends BasePopoverController {
      */
     scheduleShow(dispatcher: Event | Element | null = null) {
         window.clearTimeout(this.activeTimeout);
-        this.activeTimeout = window.setTimeout(() => this.show(dispatcher), 300);
+        this.activeTimeout = window.setTimeout(
+            () => this.show(dispatcher),
+            300
+        );
     }
 
     /**
@@ -70,13 +77,16 @@ export class TooltipController extends BasePopoverController {
      */
     scheduleHide(dispatcher: Event | Element | null = null) {
         window.clearTimeout(this.activeTimeout);
-        this.activeTimeout = window.setTimeout(() => super.hide(dispatcher), 100);
+        this.activeTimeout = window.setTimeout(
+            () => super.hide(dispatcher),
+            100
+        );
     }
 
     /**
      * Cancels the activeTimeout
      */
-     clearActiveTimeout() {
+    clearActiveTimeout() {
         clearTimeout(this.activeTimeout);
     }
 
@@ -84,13 +94,14 @@ export class TooltipController extends BasePopoverController {
      * Applies data-s-tooltip-html-title and title attributes.
      */
     applyTitleAttributes() {
-
         let content: Node;
 
         const htmlTitle = this.data.get("html-title");
         if (htmlTitle) {
             // eslint-disable-next-line no-unsanitized/method
-            content = document.createRange().createContextualFragment(htmlTitle);
+            content = document
+                .createRange()
+                .createContextualFragment(htmlTitle);
         } else {
             const plainTitle = this.element.getAttribute("title");
             if (plainTitle) {
@@ -135,7 +146,10 @@ export class TooltipController extends BasePopoverController {
         if (arrow) {
             popover.appendChild(arrow);
         } else {
-            popover.insertAdjacentHTML("beforeend", `<div class="s-popover--arrow"></div>`);
+            popover.insertAdjacentHTML(
+                "beforeend",
+                `<div class="s-popover--arrow"></div>`
+            );
         }
 
         this.scheduleUpdate();
@@ -148,7 +162,8 @@ export class TooltipController extends BasePopoverController {
      * the page.
      */
     protected bindDocumentEvents() {
-        this.boundHideIfWithin = this.boundHideIfWithin || this.hideIfWithin.bind(this);
+        this.boundHideIfWithin =
+            this.boundHideIfWithin || this.hideIfWithin.bind(this);
 
         document.addEventListener("s-popover:shown", this.boundHideIfWithin);
     }
@@ -173,7 +188,7 @@ export class TooltipController extends BasePopoverController {
      * @param event An event object from s-popover:shown
      */
     private hideIfWithin(event: Event) {
-        if ((<Element>event.target!).contains(this.referenceElement)) {
+        if ((<Element>event.target).contains(this.referenceElement)) {
             this.scheduleHide();
         }
     }
@@ -186,10 +201,13 @@ export class TooltipController extends BasePopoverController {
     /**
      * Binds mouse events to show/hide on reference element hover
      */
-     private bindKeyboardEvents() {
-        this.boundScheduleShow = this.boundScheduleShow || this.scheduleShow.bind(this);
+    private bindKeyboardEvents() {
+        this.boundScheduleShow =
+            this.boundScheduleShow || this.scheduleShow.bind(this);
         this.boundHide = this.boundHide || this.scheduleHide.bind(this);
-        this.boundHideOnEscapeKeyEvent = this.boundHideOnEscapeKeyEvent || this.hideOnEscapeKeyEvent.bind(this);
+        this.boundHideOnEscapeKeyEvent =
+            this.boundHideOnEscapeKeyEvent ||
+            this.hideOnEscapeKeyEvent.bind(this);
 
         this.referenceElement.addEventListener("focus", this.boundScheduleShow);
         this.referenceElement.addEventListener("blur", this.boundHide);
@@ -198,24 +216,34 @@ export class TooltipController extends BasePopoverController {
     /**
      * Unbinds all mouse events
      */
-     private unbindKeyboardEvents() {
-        this.referenceElement.removeEventListener("focus", this.boundScheduleShow);
+    private unbindKeyboardEvents() {
+        this.referenceElement.removeEventListener(
+            "focus",
+            this.boundScheduleShow
+        );
         this.referenceElement.removeEventListener("blur", this.boundHide);
         document.removeEventListener("keyup", this.boundHideOnEscapeKeyEvent);
     }
 
-
     /**
      * Binds mouse events to show/hide on reference element hover
      */
     private bindMouseEvents() {
-        this.boundScheduleShow = this.boundScheduleShow || this.scheduleShow.bind(this);
+        this.boundScheduleShow =
+            this.boundScheduleShow || this.scheduleShow.bind(this);
         this.boundHide = this.boundHide || this.scheduleHide.bind(this);
-        this.boundClearActiveTimeout = this.boundClearActiveTimeout || this.clearActiveTimeout.bind(this);
+        this.boundClearActiveTimeout =
+            this.boundClearActiveTimeout || this.clearActiveTimeout.bind(this);
 
-        this.referenceElement.addEventListener("mouseover", this.boundScheduleShow);
+        this.referenceElement.addEventListener(
+            "mouseover",
+            this.boundScheduleShow
+        );
         this.referenceElement.addEventListener("mouseout", this.boundHide);
-        this.popoverElement.addEventListener("mouseover", this.boundClearActiveTimeout);
+        this.popoverElement.addEventListener(
+            "mouseover",
+            this.boundClearActiveTimeout
+        );
         this.popoverElement.addEventListener("mouseout", this.boundHide);
     }
 
@@ -223,11 +251,20 @@ export class TooltipController extends BasePopoverController {
      * Unbinds all mouse events
      */
     private unbindMouseEvents() {
-        this.referenceElement.removeEventListener("mouseover", this.boundScheduleShow);
+        this.referenceElement.removeEventListener(
+            "mouseover",
+            this.boundScheduleShow
+        );
         this.referenceElement.removeEventListener("mouseout", this.boundHide);
-        this.referenceElement.removeEventListener("focus", this.boundScheduleShow);
+        this.referenceElement.removeEventListener(
+            "focus",
+            this.boundScheduleShow
+        );
         this.referenceElement.removeEventListener("blur", this.boundHide);
-        this.popoverElement.removeEventListener("mouseover", this.boundClearActiveTimeout);
+        this.popoverElement.removeEventListener(
+            "mouseover",
+            this.boundClearActiveTimeout
+        );
         this.popoverElement.removeEventListener("mouseout", this.boundHide);
     }
 
@@ -236,7 +273,9 @@ export class TooltipController extends BasePopoverController {
      */
     private static generateId() {
         // generate a random number, then convert to a well formatted string
-        return "--stacks-s-tooltip-" + Math.random().toString(36).substring(2, 10);
+        return (
+            "--stacks-s-tooltip-" + Math.random().toString(36).substring(2, 10)
+        );
     }
 }
 
@@ -246,7 +285,11 @@ export class TooltipController extends BasePopoverController {
  * @param html An HTML string to populate the tooltip with.
  * @param options Options for rendering the tooltip.
  */
-export function setTooltipHtml(element: Element, html: string, options?: TooltipOptions) {
+export function setTooltipHtml(
+    element: Element,
+    html: string,
+    options?: TooltipOptions
+) {
     element.setAttribute("data-s-tooltip-html-title", html);
     element.removeAttribute("title");
     applyOptionsAndTitleAttributes(element, options);
@@ -258,7 +301,11 @@ export function setTooltipHtml(element: Element, html: string, options?: Tooltip
  * @param text A plain text string to populate the tooltip with.
  * @param options Options for rendering the tooltip.
  */
-export function setTooltipText(element: Element, text: string, options?: TooltipOptions) {
+export function setTooltipText(
+    element: Element,
+    text: string,
+    options?: TooltipOptions
+) {
     element.setAttribute("title", text);
     element.removeAttribute("data-s-tooltip-html-title");
     applyOptionsAndTitleAttributes(element, options);
@@ -269,17 +316,28 @@ export function setTooltipText(element: Element, text: string, options?: Tooltip
  * @param element The element to add a tooltip to.
  * @param options Options for rendering the tooltip.
  */
-function applyOptionsAndTitleAttributes(element: Element, options?: TooltipOptions) {
+function applyOptionsAndTitleAttributes(
+    element: Element,
+    options?: TooltipOptions
+) {
     if (options && options.placement) {
         element.setAttribute("data-s-tooltip-placement", options.placement);
     }
 
-    const controller = <TooltipController>Stacks.application.getControllerForElementAndIdentifier(element, "s-tooltip");
+    const controller = <TooltipController>(
+        Stacks.application.getControllerForElementAndIdentifier(
+            element,
+            "s-tooltip"
+        )
+    );
 
     if (controller) {
         controller.applyTitleAttributes();
     } else {
         const dataController = element.getAttribute("data-controller");
-        element.setAttribute("data-controller", `${dataController ? dataController : ""} s-tooltip`);
+        element.setAttribute(
+            "data-controller",
+            `${dataController ? dataController : ""} s-tooltip`
+        );
     }
 }

package/lib/ts/controllers/s-uploader.ts

@@ -4,7 +4,7 @@ interface FilePreview {
     data?: string | ArrayBuffer;
     name: string;
     type: string;
-};
+}
 
 export class UploaderController extends Stacks.StacksController {
     static targets = ["input", "previews", "uploader"];
@@ -44,33 +44,40 @@ export class UploaderController extends Stacks.StacksController {
         }
 
         const count = this.inputTarget.files.length;
-            this.getDataURLs(this.inputTarget.files, UploaderController.FILE_DISPLAY_LIMIT)
-                .then((res: FilePreview[]) => {
-                    this.handleVisible(true);
-                    const hasMultipleFiles = res.length > 1;
-
-                    if (hasMultipleFiles) {
-                        const headingElement = document.createElement("div");
-                        headingElement.classList.add("s-uploader--previews-heading");
-                        headingElement.innerText = res.length < count ?
-                            `Showing ${res.length} of ${count} files` : `${count} items`;
-                        this.previewsTarget.appendChild(headingElement);
-                        this.previewsTarget.classList.add("has-multiple");
-                    } else {
-                        this.previewsTarget.classList.remove("has-multiple");
-                    }
-                    res.forEach((file) => this.addFilePreview(file));
-                    this.handleUploaderActive(true);
-                })
-                // TODO consider rendering an error message
-                .catch(() => null);
+        this.getDataURLs(
+            this.inputTarget.files,
+            UploaderController.FILE_DISPLAY_LIMIT
+        )
+            .then((res: FilePreview[]) => {
+                this.handleVisible(true);
+                const hasMultipleFiles = res.length > 1;
+
+                if (hasMultipleFiles) {
+                    const headingElement = document.createElement("div");
+                    headingElement.classList.add(
+                        "s-uploader--previews-heading"
+                    );
+                    headingElement.innerText =
+                        res.length < count
+                            ? `Showing ${res.length} of ${count} files`
+                            : `${count} items`;
+                    this.previewsTarget.appendChild(headingElement);
+                    this.previewsTarget.classList.add("has-multiple");
+                } else {
+                    this.previewsTarget.classList.remove("has-multiple");
+                }
+                res.forEach((file) => this.addFilePreview(file));
+                this.handleUploaderActive(true);
+            })
+            // TODO consider rendering an error message
+            .catch(() => null);
     }
 
     /**
      * Resets the Uploader to initial state
      */
     reset() {
-        this.inputTarget.value = '';
+        this.inputTarget.value = "";
         this.previewsTarget.innerHTML = "";
         this.handleVisible(false);
     }
@@ -81,28 +88,34 @@ export class UploaderController extends Stacks.StacksController {
      */
     private handleVisible(shouldPreview: boolean) {
         const { scope } = this.targets;
-        const hideElements = scope.findAllElements('[data-s-uploader-hide-on-input]');
-        const showElements = scope.findAllElements('[data-s-uploader-show-on-input]');
-        const enableElements = scope.findAllElements('[data-s-uploader-enable-on-input]');
+        const hideElements = scope.findAllElements(
+            "[data-s-uploader-hide-on-input]"
+        );
+        const showElements = scope.findAllElements(
+            "[data-s-uploader-show-on-input]"
+        );
+        const enableElements = scope.findAllElements(
+            "[data-s-uploader-enable-on-input]"
+        );
 
         if (shouldPreview) {
-            hideElements.forEach(el => {
+            hideElements.forEach((el) => {
                 el.classList.add("d-none");
             });
-            showElements.forEach(el => {
+            showElements.forEach((el) => {
                 el.classList.remove("d-none");
             });
-            enableElements.forEach(el => {
+            enableElements.forEach((el) => {
                 el.removeAttribute("disabled");
             });
         } else {
-            hideElements.forEach(el => {
+            hideElements.forEach((el) => {
                 el.classList.remove("d-none");
             });
-            showElements.forEach(el => {
+            showElements.forEach((el) => {
                 el.classList.add("d-none");
             });
-            enableElements.forEach(el => {
+            enableElements.forEach((el) => {
                 el.setAttribute("disabled", "true");
             });
             this.handleUploaderActive(false);
@@ -121,7 +134,7 @@ export class UploaderController extends Stacks.StacksController {
         const previewElement = document.createElement("div");
         let thumbElement;
 
-        if (file.type.match('image/*') && file.data) {
+        if (file.type.match("image/*") && file.data) {
             thumbElement = document.createElement("img");
             thumbElement.src = file.data.toString();
             thumbElement.alt = file.name;
@@ -133,7 +146,7 @@ export class UploaderController extends Stacks.StacksController {
         thumbElement.classList.add("s-uploader--preview-thumbnail");
         previewElement.appendChild(thumbElement);
         previewElement.classList.add("s-uploader--preview");
-        previewElement.setAttribute('data-filename', file.name);
+        previewElement.setAttribute("data-filename", file.name);
         this.previewsTarget.appendChild(previewElement);
     }
 
@@ -154,16 +167,19 @@ export class UploaderController extends Stacks.StacksController {
         const reader = new FileReader();
         const { name, size, type } = file;
 
-        if (size < UploaderController.MAX_FILE_SIZE && type.indexOf("image") > -1) {
+        if (
+            size < UploaderController.MAX_FILE_SIZE &&
+            type.indexOf("image") > -1
+        ) {
             return new Promise((resolve, reject) => {
-                reader.onload = evt => {
+                reader.onload = (evt) => {
                     const res = evt?.target?.result;
                     if (res) {
                         resolve({ data: res, name, type });
                     } else {
                         reject();
                     }
-                }
+                };
                 reader.readAsDataURL(file);
             });
         } else {
@@ -176,11 +192,14 @@ export class UploaderController extends Stacks.StacksController {
      * @param  {FileList|[]} files
      * @returns an array of FilePreview objects from a FileList
      */
-    private getDataURLs(files: FileList, limit: number): Promise<FilePreview[]> {
+    private getDataURLs(
+        files: FileList,
+        limit: number
+    ): Promise<FilePreview[]> {
         const promises = Array.from(files)
             .slice(0, Math.min(limit, files.length))
-            .map(f => this.fileToDataURL(f));
+            .map((f) => this.fileToDataURL(f));
 
         return Promise.all(promises);
     }
-};
+}

package/lib/ts/index.ts

@@ -1,6 +1,14 @@
-import '../css/stacks.less';
-import { ExpandableController, ModalController, PopoverController, TableController, TabListController, TooltipController, UploaderController } from './controllers';
-import { application, StacksApplication } from './stacks';
+import "../css/stacks.less";
+import {
+    ExpandableController,
+    ModalController,
+    PopoverController,
+    TableController,
+    TabListController,
+    TooltipController,
+    UploaderController,
+} from "./controllers";
+import { application, StacksApplication } from "./stacks";
 
 // register all built-in controllers
 application.register("s-expandable-control", ExpandableController);

package/lib/ts/stacks.ts

@@ -3,25 +3,31 @@ import * as Stimulus from "stimulus";
 export class StacksApplication extends Stimulus.Application {
     static _initializing = true;
 
-    load(...definitions: Stimulus.Definition[]): void
-    load(definitions: Stimulus.Definition[]): void
-    load(head: Stimulus.Definition | Stimulus.Definition[], ...rest: Stimulus.Definition[]) {
+    load(...definitions: Stimulus.Definition[]): void;
+    load(definitions: Stimulus.Definition[]): void;
+    load(
+        head: Stimulus.Definition | Stimulus.Definition[],
+        ...rest: Stimulus.Definition[]
+    ) {
         const definitions = Array.isArray(head) ? head : [head, ...rest];
 
         for (const definition of definitions) {
             const hasPrefix = /^s-/.test(definition.identifier);
             if (StacksApplication._initializing && !hasPrefix) {
-                throw "Stacks-created Stimulus controller names must start with \"s-\".";
+                throw 'Stacks-created Stimulus controller names must start with "s-".';
             }
             if (!StacksApplication._initializing && hasPrefix) {
-                throw "The \"s-\" prefix on Stimulus controller names is reserved for Stacks-created controllers.";
+                throw 'The "s-" prefix on Stimulus controller names is reserved for Stacks-created controllers.';
             }
         }
 
         super.load(definitions);
     }
 
-    static start(element?: Element, schema?: Stimulus.Schema): StacksApplication {
+    static start(
+        element?: Element,
+        schema?: Stimulus.Schema
+    ): StacksApplication {
         const application = new StacksApplication(element, schema);
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
         application.start();
@@ -38,18 +44,26 @@ export const application: Stimulus.Application = StacksApplication.start();
 export class StacksController extends Stimulus.Controller {
     protected getElementData(element: Element, key: string) {
         return element.getAttribute("data-" + this.identifier + "-" + key);
-    };
+    }
     protected setElementData(element: Element, key: string, value: string) {
         element.setAttribute("data-" + this.identifier + "-" + key, value);
-    };
+    }
     protected removeElementData(element: Element, key: string) {
         element.removeAttribute("data-" + this.identifier + "-" + key);
-    };
-    protected triggerEvent<T>(eventName: string, detail?: T, optionalElement?: Element) {
+    }
+    protected triggerEvent<T>(
+        eventName: string,
+        detail?: T,
+        optionalElement?: Element
+    ) {
         const namespacedName = this.identifier + ":" + eventName;
-        let event : CustomEvent<T>;
+        let event: CustomEvent<T>;
         try {
-            event = new CustomEvent(namespacedName, {bubbles: true, cancelable: true, detail: detail});
+            event = new CustomEvent(namespacedName, {
+                bubbles: true,
+                cancelable: true,
+                detail: detail,
+            });
         } catch (ex) {
             // Internet Explorer
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -58,28 +72,35 @@ export class StacksController extends Stimulus.Controller {
         }
         (optionalElement || this.element).dispatchEvent(event);
         return event;
-    };
+    }
 }
 
 // ControllerDefinition/createController/addController is here to make
 // it easier to consume Stimulus from ES5 files (without classes)
 export interface ControllerDefinition {
-    [name: string]: any;
+    [name: string]: unknown;
     targets?: string[];
 }
-export function createController(controllerDefinition: ControllerDefinition): typeof StacksController {
+export function createController(
+    controllerDefinition: ControllerDefinition
+): typeof StacksController {
     // eslint-disable-next-line no-prototype-builtins
     const Controller = controllerDefinition.hasOwnProperty("targets")
-        ? class Controller extends StacksController { static targets = controllerDefinition.targets! }
+        ? class Controller extends StacksController {
+              static targets = controllerDefinition.targets ?? [];
+          }
         : class Controller extends StacksController {};
 
     for (const prop in controllerDefinition) {
-        // eslint-disable-next-line no-prototype-builtins
-        if (prop !== "targets" && controllerDefinition.hasOwnProperty(prop)) {
+        const ownPropDescriptor =
+            // eslint-disable-next-line no-prototype-builtins
+            controllerDefinition.hasOwnProperty(prop) &&
+            Object.getOwnPropertyDescriptor(controllerDefinition, prop);
+        if (prop !== "targets" && ownPropDescriptor) {
             Object.defineProperty(
                 Controller.prototype,
                 prop,
-                Object.getOwnPropertyDescriptor(controllerDefinition, prop)!
+                ownPropDescriptor
             );
         }
     }

package/lib/tsconfig.json

@@ -2,7 +2,7 @@
     "compilerOptions": {
         "strict": true,
         "target": "es5",
-        "lib": ["dom", "es6", "dom.iterable", "scripthost"],  // es6 stuff is polyfilled by stimulus
+        "lib": ["dom", "es6", "dom.iterable", "scripthost"], // es6 stuff is polyfilled by stimulus
         "outDir": "../dist",
         "sourceMap": true,
         "moduleResolution": "node",

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/StackExchange/Stacks.git"
   },
-  "version": "1.6.2",
+  "version": "1.6.3",
   "files": [
     "dist",
     "lib"
@@ -25,8 +25,10 @@
     "test": "backstop test",
     "approve": "backstop approve",
     "prepublishOnly": "npm run build",
-    "lint:eslint": "eslint .",
-    "lint:prettier": "prettier --check . --end-of-line auto"
+    "lint": "concurrently -n w: npm:lint:*",
+    "lint:ts": "eslint ./lib/ts",
+    "lint:css": "stylelint ./lib/css",
+    "lint:format": "prettier --check ./lib"
   },
   "license": "MIT",
   "dependencies": {
@@ -47,7 +49,7 @@
     "docsearch.js": "^2.6.3",
     "eleventy-plugin-highlightjs": "^1.1.0",
     "eleventy-plugin-nesting-toc": "^1.3.0",
-    "eslint": "^8.27.0",
+    "eslint": "^8.29.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-no-unsanitized": "^4.0.1",
     "jquery": "^3.6.1",
@@ -58,12 +60,12 @@
     "postcss-less": "^6.0.0",
     "postcss-loader": "^7.0.1",
     "prettier": "^2.7.1",
-    "stylelint": "^14.15.0",
+    "stylelint": "^14.16.0",
     "stylelint-config-recommended": "^9.0.0",
     "stylelint-config-standard": "^29.0.0",
     "terser-webpack-plugin": "^5.3.6",
     "ts-loader": "^9.4.1",
-    "typescript": "^4.8.4",
+    "typescript": "^4.9.3",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.0",
     "webpack-merge": "^5.8.0"