@stackoverflow/stacks 0.75.0 → 0.76.0

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

@@ -1,174 +1,172 @@
-namespace Stacks {
-    interface FilePreview {
-        data?: string | ArrayBuffer;
-        name: string;
-        type: string;
-    };
-
-    export class UploaderController extends Stacks.StacksController {
-        static targets = ["input", "previews", "uploader"];
-        private inputTarget!: HTMLInputElement;
-        private previewsTarget!: HTMLElement;
-        private uploaderTarget!: HTMLElement;
-
-        private boundDragEnter!: any;
-        private boundDragLeave!: any;
-
-        private static readonly FILE_DISPLAY_LIMIT = 10;
-        private static readonly MAX_FILE_SIZE = 1024 * 1024 * 10; // 10 MB
-
-        connect() {
-            super.connect();
-            this.boundDragEnter = this.handleUploaderActive.bind(this, true);
-            this.boundDragLeave = this.handleUploaderActive.bind(this, false);
-
-            this.inputTarget.addEventListener("dragenter", this.boundDragEnter);
-            this.inputTarget.addEventListener("dragleave", this.boundDragLeave);
-        }
-
-        disconnect() {
-            this.inputTarget.removeEventListener("dragenter", this.boundDragEnter);
-            this.inputTarget.removeEventListener("dragleave", this.boundDragLeave);
-            super.disconnect();
-        }
-
-        /**
-         * Handles rendering the file preview state on input change
-         */
-        handleInput() {
-            this.previewsTarget.innerHTML = "";
-
-            if (!this.inputTarget.files) {
-                return;
-            }
-
-            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) {
-                            let 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);
-                    });
-        }
-
-        /**
-         * Resets the Uploader to initial state
-         */
-        reset() {
-            this.inputTarget.value = '';
-            this.previewsTarget.innerHTML = "";
-            this.handleVisible(false);
-        }
-
-        /**
-         * Set hide/show and disabled state on elements depending on preview state
-         * @param  {boolean} shouldPreview - Uploader is entering a preview state
-         */
-        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]');
-
-            if (shouldPreview) {
-                hideElements.map(el => el.classList.add("d-none"));
-                showElements.map(el => el.classList.remove("d-none"));
-                enableElements.map(el => el.removeAttribute("disabled"));
-            } else {
-                hideElements.map(el => el.classList.remove("d-none"));
-                showElements.map(el => el.classList.add("d-none"));
-                enableElements.map(el => el.setAttribute("disabled", "true"))
-                this.handleUploaderActive(false);
-            }
-        }
-
-        /**
-         * Adds a DOM element to preview a selected file
-         * @param  {FilePreview} file
-         */
-        private addFilePreview(file: FilePreview) {
-            if (!file) {
-                return;
-            }
-
-            let previewElement = document.createElement("div");
-            let thumbElement;
-
-            if (file.type.match('image/*') && file.data) {
-                thumbElement = document.createElement("img");
-                thumbElement.src = file.data.toString();
-                thumbElement.alt = file.name;
-            } else {
-                thumbElement = document.createElement("div");
-                thumbElement.innerText = file.name;
-            }
-
-            thumbElement.classList.add("s-uploader--preview-thumbnail");
-            previewElement.appendChild(thumbElement);
-            previewElement.classList.add("s-uploader--preview");
-            previewElement.setAttribute('data-filename', file.name);
-            this.previewsTarget.appendChild(previewElement);
-        }
-
-        /**
-         * Toggles display and disabled state for select elements on valid input
-         * @param  {boolean} active - Uploader is in active state (typically on 'dragenter')
-         */
-        private handleUploaderActive(active: boolean) {
-            this.uploaderTarget.classList.toggle("is-active", active);
-        }
-
-        /**
-         * Converts the file data into a data URL
-         * @param  {File} file
-         * @returns an object containing a FilePreview object
-         */
-        private fileToDataURL(file: File): Promise<FilePreview> {
-            var reader = new FileReader();
-            const { name, size, type } = file;
-
-            if (size < UploaderController.MAX_FILE_SIZE && type.indexOf("image") > -1) {
-                return new Promise((resolve, reject) => {
-                    reader.onload = evt => {
-                        const res = evt?.target?.result;
-                        if (res) {
-                            resolve({ data: res, name, type });
-                        } else {
-                            reject();
-                        }
-                    }
-                    reader.readAsDataURL(file);
-                });
-            } else {
-                return Promise.resolve({ name, type });
-            }
-        }
-
-        /**
-         * Gets an array of FilePreviews from a FileList
-         * @param  {FileList|[]} files
-         * @returns an array of FilePreview objects from a FileList
-         */
-        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));
-
-            return Promise.all(promises);
-        }
-    };
-}
-
-Stacks.application.register("s-uploader", Stacks.UploaderController);
+import * as Stacks from "../stacks";
+
+interface FilePreview {
+    data?: string | ArrayBuffer;
+    name: string;
+    type: string;
+};
+
+export class UploaderController extends Stacks.StacksController {
+    static targets = ["input", "previews", "uploader"];
+    private inputTarget!: HTMLInputElement;
+    private previewsTarget!: HTMLElement;
+    private uploaderTarget!: HTMLElement;
+
+    private boundDragEnter!: any;
+    private boundDragLeave!: any;
+
+    private static readonly FILE_DISPLAY_LIMIT = 10;
+    private static readonly MAX_FILE_SIZE = 1024 * 1024 * 10; // 10 MB
+
+    connect() {
+        super.connect();
+        this.boundDragEnter = this.handleUploaderActive.bind(this, true);
+        this.boundDragLeave = this.handleUploaderActive.bind(this, false);
+
+        this.inputTarget.addEventListener("dragenter", this.boundDragEnter);
+        this.inputTarget.addEventListener("dragleave", this.boundDragLeave);
+    }
+
+    disconnect() {
+        this.inputTarget.removeEventListener("dragenter", this.boundDragEnter);
+        this.inputTarget.removeEventListener("dragleave", this.boundDragLeave);
+        super.disconnect();
+    }
+
+    /**
+     * Handles rendering the file preview state on input change
+     */
+    handleInput() {
+        this.previewsTarget.innerHTML = "";
+
+        if (!this.inputTarget.files) {
+            return;
+        }
+
+        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) {
+                        let 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);
+                });
+    }
+
+    /**
+     * Resets the Uploader to initial state
+     */
+    reset() {
+        this.inputTarget.value = '';
+        this.previewsTarget.innerHTML = "";
+        this.handleVisible(false);
+    }
+
+    /**
+     * Set hide/show and disabled state on elements depending on preview state
+     * @param  {boolean} shouldPreview - Uploader is entering a preview state
+     */
+    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]');
+
+        if (shouldPreview) {
+            hideElements.map(el => el.classList.add("d-none"));
+            showElements.map(el => el.classList.remove("d-none"));
+            enableElements.map(el => el.removeAttribute("disabled"));
+        } else {
+            hideElements.map(el => el.classList.remove("d-none"));
+            showElements.map(el => el.classList.add("d-none"));
+            enableElements.map(el => el.setAttribute("disabled", "true"))
+            this.handleUploaderActive(false);
+        }
+    }
+
+    /**
+     * Adds a DOM element to preview a selected file
+     * @param  {FilePreview} file
+     */
+    private addFilePreview(file: FilePreview) {
+        if (!file) {
+            return;
+        }
+
+        let previewElement = document.createElement("div");
+        let thumbElement;
+
+        if (file.type.match('image/*') && file.data) {
+            thumbElement = document.createElement("img");
+            thumbElement.src = file.data.toString();
+            thumbElement.alt = file.name;
+        } else {
+            thumbElement = document.createElement("div");
+            thumbElement.innerText = file.name;
+        }
+
+        thumbElement.classList.add("s-uploader--preview-thumbnail");
+        previewElement.appendChild(thumbElement);
+        previewElement.classList.add("s-uploader--preview");
+        previewElement.setAttribute('data-filename', file.name);
+        this.previewsTarget.appendChild(previewElement);
+    }
+
+    /**
+     * Toggles display and disabled state for select elements on valid input
+     * @param  {boolean} active - Uploader is in active state (typically on 'dragenter')
+     */
+    private handleUploaderActive(active: boolean) {
+        this.uploaderTarget.classList.toggle("is-active", active);
+    }
+
+    /**
+     * Converts the file data into a data URL
+     * @param  {File} file
+     * @returns an object containing a FilePreview object
+     */
+    private fileToDataURL(file: File): Promise<FilePreview> {
+        var reader = new FileReader();
+        const { name, size, type } = file;
+
+        if (size < UploaderController.MAX_FILE_SIZE && type.indexOf("image") > -1) {
+            return new Promise((resolve, reject) => {
+                reader.onload = evt => {
+                    const res = evt?.target?.result;
+                    if (res) {
+                        resolve({ data: res, name, type });
+                    } else {
+                        reject();
+                    }
+                }
+                reader.readAsDataURL(file);
+            });
+        } else {
+            return Promise.resolve({ name, type });
+        }
+    }
+
+    /**
+     * Gets an array of FilePreviews from a FileList
+     * @param  {FileList|[]} files
+     * @returns an array of FilePreview objects from a FileList
+     */
+    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));
+
+        return Promise.all(promises);
+    }
+};

package/lib/ts/index.ts

@@ -0,0 +1,20 @@
+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);
+application.register("s-modal", ModalController);
+application.register("s-navigation-tablist", TabListController);
+application.register("s-popover", PopoverController);
+application.register("s-table", TableController);
+application.register("s-tooltip", TooltipController);
+application.register("s-uploader", UploaderController);
+
+// finalize the application to guard our controller namespace
+StacksApplication.finalize();
+
+// export all controllers w/ helpers
+export * from "./controllers";
+// export the entirety of the contents of stacks.ts
+export * from "./stacks";

package/lib/ts/stacks.ts

@@ -1,83 +1,88 @@
-namespace Stacks {
-    class StacksApplication extends Stimulus.Application {
-        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) {
-                var hasPrefix = /^s-/.test(definition.identifier);
-                if (_initializing && !hasPrefix) {
-                    throw "Stacks-created Stimulus controller names must start with \"s-\".";
-                }
-                if (!_initializing && hasPrefix) {
-                    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 {
-            const application = new StacksApplication(element, schema);
-            application.start();
-            return application;
-        }
-    }
-
-    export const application: Stimulus.Application = StacksApplication.start();
-    export var _initializing = true;
-    
-    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) {
-            const namespacedName = this.identifier + ":" + eventName;
-            var event : CustomEvent<T>;
-            try {
-                event = new CustomEvent(namespacedName, {bubbles: true, cancelable: true, detail: detail});
-            } catch (ex) {
-                // Internet Explorer
-                event = document.createEvent("CustomEvent");
-                event.initCustomEvent(namespacedName, true, true, detail!);
-            }
-            (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;
-        targets?: string[];
-    }
-    export function createController(controllerDefinition: ControllerDefinition): typeof StacksController {
-        const Controller = controllerDefinition.hasOwnProperty("targets")
-            ? class Controller extends StacksController { static targets = controllerDefinition.targets! }
-            : class Controller extends StacksController {};
-
-        for (var prop in controllerDefinition) {
-            if (prop !== "targets" && controllerDefinition.hasOwnProperty(prop)) {
-                Object.defineProperty(
-                    Controller.prototype,
-                    prop,
-                    Object.getOwnPropertyDescriptor(controllerDefinition, prop)!
-                );
-            }
-        }
-
-        return Controller;
-    }
-
-    export function addController(name: string, controller: ControllerDefinition) {
-        application.register(name, createController(controller));
-    }
-}
+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[]) {
+        const definitions = Array.isArray(head) ? head : [head, ...rest];
+
+        for (const definition of definitions) {
+            var hasPrefix = /^s-/.test(definition.identifier);
+            if (StacksApplication._initializing && !hasPrefix) {
+                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.";
+            }
+        }
+
+        super.load(definitions);
+    }
+
+    static start(element?: Element, schema?: Stimulus.Schema): StacksApplication {
+        const application = new StacksApplication(element, schema);
+        application.start();
+        return application;
+    }
+
+    static finalize() {
+        StacksApplication._initializing = false;
+    }
+}
+
+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) {
+        const namespacedName = this.identifier + ":" + eventName;
+        var event : CustomEvent<T>;
+        try {
+            event = new CustomEvent(namespacedName, {bubbles: true, cancelable: true, detail: detail});
+        } catch (ex) {
+            // Internet Explorer
+            event = document.createEvent("CustomEvent");
+            event.initCustomEvent(namespacedName, true, true, detail!);
+        }
+        (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;
+    targets?: string[];
+}
+export function createController(controllerDefinition: ControllerDefinition): typeof StacksController {
+    const Controller = controllerDefinition.hasOwnProperty("targets")
+        ? class Controller extends StacksController { static targets = controllerDefinition.targets! }
+        : class Controller extends StacksController {};
+
+    for (var prop in controllerDefinition) {
+        if (prop !== "targets" && controllerDefinition.hasOwnProperty(prop)) {
+            Object.defineProperty(
+                Controller.prototype,
+                prop,
+                Object.getOwnPropertyDescriptor(controllerDefinition, prop)!
+            );
+        }
+    }
+
+    return Controller;
+}
+
+export function addController(name: string, controller: ControllerDefinition) {
+    application.register(name, createController(controller));
+}

package/lib/tsconfig.json

@@ -1,11 +1,13 @@
-{
-    "compilerOptions": {
-        "strict": true,
-        "typeRoots": ["../node_modules/@types", "../node_modules/@stimulus/core/src"],
-        "target": "es5",
-        "lib": ["dom", "es6", "dom.iterable", "scripthost"], // es6 stuff is polyfilled by stimulus
-        "outDir": "../build",
-        "rootDir": "."
-    },
-    "include": ["./ts/**/*.ts"]
-}
+{
+    "compilerOptions": {
+        "strict": true,
+        "target": "es5",
+        "lib": ["dom", "es6", "dom.iterable", "scripthost"],  // es6 stuff is polyfilled by stimulus
+        "outDir": "../dist",
+        "sourceMap": true,
+        "moduleResolution": "node",
+        "skipLibCheck": true,
+        "declaration": true
+    },
+    "include": ["ts/**/*"]
+}