@stackoverflow/stacks 1.0.0-beta.0 → 1.1.0

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

@@ -1,172 +1,172 @@
-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);
-    }
-};
+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

@@ -1,20 +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";
+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,88 +1,88 @@
-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));
-}
+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,13 +1,13 @@
-{
-    "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/**/*"]
-}
+{
+    "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/**/*"]
+}