@umbraco-ui/uui-file-preview 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 uui-app
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,31 @@
+# uui-file-preview
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-file-preview?logoColor=%231B264F)
+
+Umbraco style file-preview component.
+
+## Installation
+
+### ES imports
+
+```zsh
+npm i @umbraco-ui/uui-file-preview
+```
+
+Import the registration of `<uui-file-preview>` via:
+
+```javascript
+import '@umbraco-ui/uui-file-preview';
+```
+
+When looking to leverage the `UUIFilePreviewElement` base class as a type and/or for extension purposes, do so via:
+
+```javascript
+import { UUIFilePreviewElement } from '@umbraco-ui/uui-file-preview';
+```
+
+## Usage
+
+```html
+<uui-file-preview></uui-file-preview>
+```

package/custom-elements.json

@@ -0,0 +1,26 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "uui-file-preview",
+      "path": "./lib/uui-file-preview.element.ts",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
+        {
+          "name": "file",
+          "type": "File | undefined"
+        }
+      ],
+      "slots": [
+        {
+          "name": "actions",
+          "description": "To display one or more actions that can be executed on the file."
+        }
+      ]
+    }
+  ]
+}

package/lib/UUIFileSize.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Format bytes as human-readable text.
+ *
+ * @param bytes Number of bytes.
+ * @param si True to use metric (SI) units, aka powers of 1000. False to use
+ *           binary (IEC), aka powers of 1024.
+ * @param dp Number of decimal places to display.
+ *
+ * @return Formatted string.
+ */
+export declare class UUIFileSize {
+    static humanFileSize(bytes: number, si?: boolean, decimalPlaces?: number): string;
+}

package/lib/index.d.ts

@@ -0,0 +1 @@
+export * from './uui-file-preview.element';

package/lib/index.js

@@ -0,0 +1,227 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { state, property } from 'lit/decorators.js';
+import { css, LitElement, html } from 'lit';
+import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
+
+class UUIFileSize {
+  static humanFileSize(bytes, si = false, decimalPlaces = 1) {
+    const thresh = si ? 1e3 : 1024;
+    if (Math.abs(bytes) < thresh) {
+      return bytes + " B";
+    }
+    const units = si ? ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"] : ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
+    let u = -1;
+    const r = 10 ** decimalPlaces;
+    do {
+      bytes /= thresh;
+      ++u;
+    } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
+    return bytes.toFixed(decimalPlaces) + " " + units[u];
+  }
+}
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let UUIFilePreviewElement = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._name = "";
+    this._url = "";
+    this._extension = "";
+    this._src = "";
+    this._size = 0;
+    this._isDirectory = false;
+  }
+  get file() {
+    return this._file;
+  }
+  set file(newValue) {
+    const oldValue = this._file;
+    if (newValue instanceof File) {
+      this._name = newValue.name.split(".")[0];
+      this._extension = newValue.name.split(".")[1];
+      this._isDirectory = false;
+      this._size = newValue.size;
+      if (this._isFileAnImage(newValue)) {
+        this._isImage = true;
+        this._getThumbnail(newValue).then((result) => {
+          this._src = result;
+        });
+      }
+      this.requestUpdate("file", oldValue);
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    demandCustomElement(this, "uui-symbol-file-thumbnail");
+    demandCustomElement(this, "uui-symbol-folder");
+    demandCustomElement(this, "uui-symbol-file");
+  }
+  _openSource() {
+    window.open(this._url, "_blank");
+  }
+  _fileTypeTemplate() {
+    if (this._isDirectory) {
+      return html`<uui-symbol-folder id="file-symbol"></uui-symbol-folder>`;
+    }
+    if (this._isImage) {
+      return html`<uui-symbol-file-thumbnail
+        .src=${this._src}
+        .alt=${this._name}
+        id="file-symbol"></uui-symbol-file-thumbnail>`;
+    }
+    return html`<uui-symbol-file
+      id="file-symbol"
+      .type=${this._extension}></uui-symbol-file>`;
+  }
+  _renderLongName() {
+    const endCharCount = 6;
+    const nameStart = this._name.substring(0, this._name.length - endCharCount);
+    const nameEnd = this._name.substring(this._name.length - endCharCount, this._name.length);
+    return html`
+      <span
+        id="file-name"
+        class=${this._url ? "has-source" : ""}
+        @click=${() => this._url ? this._openSource() : ""}
+        @keydown=${() => ""}>
+        <span id="file-name-start">${nameStart}</span>
+        <span id="file-name-end">${nameEnd}</span>
+      </span>
+    `;
+  }
+  _isFileAnImage(file) {
+    return file ? file["type"].split("/")[0] === "image" : false;
+  }
+  async _getThumbnail(file) {
+    return await new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        resolve(reader.result);
+      };
+    });
+  }
+  render() {
+    return html`
+      <slot id="actions" name="actions"></slot>
+      ${this._fileTypeTemplate()}
+      <div id="file-info">
+        ${this._renderLongName()}
+        <span id="file-size">
+          ${this._size && !this._isDirectory ? html`${UUIFileSize.humanFileSize(this._size, true)}` : ""}
+        </span>
+      </div>
+    `;
+  }
+};
+UUIFilePreviewElement.styles = [
+  css`
+      :host {
+        position: relative;
+        display: grid;
+        /* These have to be changed together */
+        grid-template-rows: 100px 50px;
+        width: 150px;
+        height: 150px;
+        /* --------------------------------- */
+        box-sizing: border-box;
+        aspect-ratio: 1;
+      }
+
+      :host(:hover) slot[name='actions']::slotted(*) {
+        opacity: 1;
+      }
+
+      slot[name='actions']::slotted(*) {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        max-width: 100%;
+        height: 32px;
+        font-size: 13px;
+        opacity: 0;
+        z-index: 1;
+        transition: opacity 150ms;
+      }
+
+      #file-symbol {
+        aspect-ratio: 1 / 1;
+        margin: auto;
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      #file-info {
+        min-width: 0;
+        display: flex;
+        text-align: center;
+        flex-direction: column;
+        font-size: 1rem;
+      }
+
+      #file-name {
+        display: flex;
+        justify-content: center;
+      }
+
+      #file-name-start {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      #file-name-end {
+        white-space: nowrap;
+      }
+
+      #file-size {
+        opacity: 0.6;
+      }
+
+      .has-source:hover {
+        text-decoration: underline;
+        cursor: pointer;
+      }
+    `
+];
+__decorateClass([
+  state()
+], UUIFilePreviewElement.prototype, "_name", 2);
+__decorateClass([
+  state()
+], UUIFilePreviewElement.prototype, "_url", 2);
+__decorateClass([
+  state()
+], UUIFilePreviewElement.prototype, "_extension", 2);
+__decorateClass([
+  state()
+], UUIFilePreviewElement.prototype, "_src", 2);
+__decorateClass([
+  state()
+], UUIFilePreviewElement.prototype, "_size", 2);
+__decorateClass([
+  state()
+], UUIFilePreviewElement.prototype, "_isDirectory", 2);
+__decorateClass([
+  state()
+], UUIFilePreviewElement.prototype, "_file", 2);
+__decorateClass([
+  state()
+], UUIFilePreviewElement.prototype, "_isImage", 2);
+__decorateClass([
+  property({ attribute: false })
+], UUIFilePreviewElement.prototype, "file", 1);
+UUIFilePreviewElement = __decorateClass([
+  defineElement("uui-file-preview")
+], UUIFilePreviewElement);
+
+export { UUIFilePreviewElement };

package/lib/uui-file-preview.element.d.ts

@@ -0,0 +1,67 @@
+import { LitElement } from 'lit';
+/**
+ *  @element uui-file-preview
+ *  @slot actions - To display one or more actions that can be executed on the file.
+ *  @description - A file preview with file size.
+ */
+export declare class UUIFilePreviewElement extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Name of the file.
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    private _name;
+    /**
+     * Link to the source of the file. Applied on the file name.
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    private _url;
+    /**
+     * File extension. Will be shown in the square on the file symbol. If a thumbnail is provided, then that will show instead.
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    private _extension;
+    /**
+     * Source of a thumbnail to be displayed as the file symbol. Often used for images and video thumbnails.
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    private _src;
+    /**
+     * Size of the file in bytes. It will be formatted to a more readable format.
+     * @type {number}
+     * @attr
+     * @default 0
+     */
+    private _size;
+    /**
+     * Dertermines if a folder symbol should be used instead of file symbol.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    private _isDirectory;
+    private _file?;
+    private _isImage?;
+    get file(): File | undefined;
+    set file(newValue: File | undefined);
+    connectedCallback(): void;
+    private _openSource;
+    private _fileTypeTemplate;
+    private _renderLongName;
+    private _isFileAnImage;
+    private _getThumbnail;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-file-preview': UUIFilePreviewElement;
+    }
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@umbraco-ui/uui-file-preview",
+  "version": "0.1.0",
+  "license": "MIT",
+  "keywords": [
+    "Umbraco",
+    "Custom elements",
+    "Web components",
+    "UI",
+    "Lit",
+    "File Preview"
+  ],
+  "description": "Umbraco UI file-preview component.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umbraco/Umbraco.UI.git",
+    "directory": "packages/uui-file-preview"
+  },
+  "bugs": {
+    "url": "https://github.com/umbraco/Umbraco.UI/issues"
+  },
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "type": "module",
+  "customElements": "custom-elements.json",
+  "files": [
+    "lib/**/*.d.ts",
+    "lib/**/*.js",
+    "custom-elements.json"
+  ],
+  "dependencies": {
+    "@umbraco-ui/uui-base": "0.2.0",
+    "@umbraco-ui/uui-symbol-file": "0.2.0",
+    "@umbraco-ui/uui-symbol-file-thumbnail": "0.1.0",
+    "@umbraco-ui/uui-symbol-folder": "0.2.0"
+  },
+  "scripts": {
+    "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
+    "clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
+    "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://uui.umbraco.com/?path=/story/uui-file-preview",
+  "gitHead": "5494b55e03c9fb3ba8f160e693d3ce59c02d21cd"
+}