@windwalker-io/unicorn-next 0.1.0

package/src/module/s3-uploader.ts

@@ -0,0 +1,234 @@
+import { useHttpClient } from '../composable';
+import { data } from '../data';
+import { EventAwareInterface, EventHandler, EventMixin } from '../events';
+import type { UnicornHttpClient } from './http-client';
+import { mergeDeep } from '../utilities';
+import { AxiosProgressEvent, AxiosResponse } from 'axios';
+import { Mixin } from 'ts-mixer';
+
+const instances: Record<string, S3Uploader> = {};
+export function get(name: string, options?: Partial<S3UploaderGlobalOptions>): S3Uploader;
+export function get(
+  name: string,
+  options: Partial<S3UploaderGlobalOptions> = {}
+): S3Uploader | void {
+  return instances[name] ??= create(name, options);
+}
+
+export function create(name: string, options: Partial<S3UploaderGlobalOptions> = {}): S3Uploader {
+  return new S3Uploader(name, options);
+}
+
+export function destroy(name: string) {
+  delete instances[name];
+}
+
+const defaultOptions: S3UploaderGlobalOptions = {
+  endpoint: '',
+  subfolder: '',
+  viewerHost: '',
+  starts_with: [],
+  formInputs: {
+    acl: '',
+    bucket: '',
+    key: '',
+    Policy: '',
+    'X-Amz-Algorithm': '',
+    'X-Amz-Credential': '',
+    'X-Amz-Date': '',
+    'X-Amz-Signature': '',
+  }
+};
+
+export class S3Uploader extends Mixin(EventMixin) implements EventAwareInterface {
+  options: S3UploaderGlobalOptions;
+  http?: UnicornHttpClient;
+
+  constructor(protected name: string, options: Partial<S3UploaderGlobalOptions> = {}) {
+    super();
+
+    const awsOptions = data('@s3.uploader.' + name) || {};
+
+    this.options = mergeDeep<S3UploaderGlobalOptions>({}, defaultOptions, awsOptions, options);
+  }
+
+  async getHttpClient() {
+    return this.http ??= await useHttpClient();
+  }
+
+  /**
+   * Do upload.
+   */
+  async upload(
+    file: string | File | Blob,
+    path: string,
+    options: Partial<S3UploaderRequestOptions> = {}
+  ): Promise<S3UploaderResponse> {
+    const httpClient = await this.getHttpClient();
+
+    const fileData = new FormData();
+    const inputs = mergeDeep({}, this.options.formInputs, options.formInputs || {});
+
+    if (typeof file === 'string') {
+      file = new Blob([file], { type: options['Content-Type'] || 'text/plain' });
+    }
+
+    if (file instanceof Blob && path.endsWith('.{ext}')) {
+      throw new Error('If using Blob or file data string, you must provide a valid file extension in the path.');
+    }
+
+    if ((file instanceof Blob) || (file as any) instanceof File) {
+      options['Content-Type'] = options['Content-Type'] || file.type;
+    }
+
+    if (options['filename']) {
+      const filename = this.replaceExt(options['filename'], file);
+      options['Content-Disposition'] = 'attachment; filename*=UTF-8\'\'' + encodeURIComponent(filename);
+    }
+
+    path = this.replaceExt(path, file);
+
+    options['key'] = trimSlashes(this.options.subfolder || '') + '/'
+      + trimSlashes(path);
+    options['key'] = trimSlashes(options['key']);
+    options['Content-Type'] = options['Content-Type'] || undefined;
+    options['Content-Disposition'] = options['Content-Disposition'] || undefined;
+
+    // Prepare pre-signed data
+    for (let key in inputs) {
+      fileData.set(key, inputs[key]);
+    }
+
+    // Prepare custom data
+    for (let key of Object.keys(this.options.starts_with)) {
+      if (options[key]) {
+        fileData.set(key, options[key]);
+      }
+    }
+
+    fileData.append('file', file);
+
+    this.trigger('start', fileData);
+
+    try {
+      let res = await httpClient.post(
+        this.options.endpoint || '',
+        fileData,
+        {
+          onUploadProgress: (e) => {
+            if (options.onUploadProgress) {
+              options.onUploadProgress(e);
+            }
+
+            this.trigger('upload-progress', e);
+
+            if (e.total != null) {
+              this.trigger('progress', e.loaded / e.total, e);
+            }
+          }
+        }
+      ) as S3UploaderResponse;
+
+      const url = this.options.viewerHost + '/'
+        + trimSlashes(path);
+
+      this.trigger('success', url, res);
+
+      res.url = url;
+
+      return res;
+    } finally {
+      this.trigger('end');
+    }
+  }
+
+  replaceExt(path: string, file: File | Blob): string {
+    if (file instanceof File) {
+      const fileExt = file.name.split('.').pop();
+
+      if (path.endsWith('.{ext}')) {
+        return path.replace(/\.{ext}$/, fileExt ? '.' + fileExt : '');
+      }
+    }
+
+    return path;
+  }
+
+  on(event: 'start', handler: StartEventHandler): this;
+  on(event: 'success', handler: SuccessEventHandler): this;
+  on(event: 'end', handler: EndEventHandler): this;
+  on(event: 'upload-progress', handler: UploadProgressEventHandler): this;
+  on(event: 'progress', handler: ProgressEventHandler): this;
+  on(event: string | string[], handler: EventHandler): this {
+    return super.on(event, handler);
+  }
+
+  onStart(handler: StartEventHandler): this {
+    return this.on('start', handler);
+  }
+
+  onSuccess(handler: SuccessEventHandler): this {
+    return this.on('success', handler);
+  }
+
+  onEnd(handler: EndEventHandler): this {
+    return this.on('end', handler);
+  }
+
+  onProgress(handler: UploadProgressEventHandler): this {
+    return this.on('upload-progress', handler);
+  }
+
+  onProgressWithTotal(handler: ProgressEventHandler): this {
+    return this.on('progress', handler);
+  }
+}
+
+type EndEventHandler = () => void;
+type SuccessEventHandler = (url: string, res: S3UploaderResponse) => void;
+type StartEventHandler = (fileData: FormData) => void;
+type UploadProgressEventHandler = (e: AxiosProgressEvent) => void;
+type ProgressEventHandler = (total: number, e: AxiosProgressEvent) => void;
+
+function trimSlashes(str: string) {
+  return str.replace(/^\/+|\/+$/g, '');
+}
+
+export interface S3UploaderResponse extends AxiosResponse {
+  url: string;
+}
+
+export interface S3UploaderGlobalOptions {
+  endpoint?: string;
+  subfolder?: string;
+  viewerHost?: string;
+  starts_with: any[];
+  formInputs?: {
+    acl: string;
+    bucket: string;
+    key: string;
+    Policy: string;
+    'X-Amz-Algorithm': string;
+    'X-Amz-Credential': string;
+    'X-Amz-Date': string;
+    'X-Amz-Signature': string;
+    [name: string]: any
+  },
+}
+
+export interface S3UploaderRequestOptions {
+  formInputs?: { [name: string]: any };
+  onUploadProgress?: (e: AxiosProgressEvent) => void;
+  'Content-Type'?: string;
+  'Content-Disposition'?: string;
+  key?: string;
+
+  [name: string]: any;
+}
+
+export interface S3UploaderModule {
+  get(name: string, options?: Partial<S3UploaderGlobalOptions>): S3Uploader;
+  create(name: string, options?: Partial<S3UploaderGlobalOptions>): S3Uploader;
+  destroy(name: string): void;
+  S3Uploader: typeof S3Uploader;
+}

package/src/module/show-on.ts

@@ -0,0 +1,173 @@
+
+import { useUniDirective } from '../composable';
+import { fadeIn, fadeOut, selectAll, selectOne, module } from '../service';
+import { difference } from 'lodash-es';
+
+type HTMLInputTypes = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+type Conditions = Record<string, any>;
+
+export class ShowOn {
+  el!: HTMLElement;
+  input!: HTMLInputTypes;
+  conditions: Conditions = {};
+  targets = {};
+  defaultReadonly = false;
+  initialDisplay!: string;
+
+  constructor(el: HTMLElement, conditions: Conditions) {
+    this.el = el;
+    this.input = this.el.querySelector<HTMLInputTypes>(
+      this.el.dataset.inputSelector || '[data-field-input]'
+    )!;
+    this.conditions = conditions;
+
+    this.init();
+  }
+
+  init() {
+    this.initialDisplay = window.getComputedStyle(this.el).display || 'block';
+
+    for (const selector in this.conditions) {
+      const value = this.conditions[selector];
+
+      const target = selectOne<HTMLElement>(selector)!;
+
+      if (this.input) {
+        this.defaultReadonly = this.input.hasAttribute('readonly');
+      }
+
+      let listenTarget: HTMLInputTypes[];
+
+      if (target.nodeName === 'DIV') {
+        listenTarget = Array.from(target.querySelectorAll<HTMLInputTypes>('input, select, textarea'));
+      } else {
+        listenTarget = [target as HTMLInputTypes];
+      }
+
+      selectAll(listenTarget, (ele) => {
+        ele.addEventListener('change', () => {
+          this.updateShowState(target, value);
+        });
+      });
+
+      this.updateShowState(target, value, 1);
+    }
+  }
+
+  updateShowState(target: HTMLElement, value: any, duration = 300) {
+    const matched = this.isValueMatched(target, value);
+
+    if (matched) {
+      setTimeout(() => {
+        fadeIn(this.el, duration, this.initialDisplay);
+      }, duration + 30);
+    } else {
+      if (this.input) {
+        this.defaultReadonly = this.input.hasAttribute('readonly');
+      }
+
+      fadeOut(this.el, duration);
+    }
+
+    if (this.input) {
+      if (matched) {
+        if (!this.defaultReadonly) {
+          this.input.removeAttribute('readonly');
+        }
+      } else {
+        this.input.setAttribute('readonly', 'readonly');
+      }
+    }
+  }
+
+  isValueMatched(target: HTMLElement, value: any) {
+    let targetValue: any = null;
+
+    const type = this.nodeType(target);
+
+    switch (type) {
+      case 'input':
+      case 'textarea':
+        targetValue = (target as HTMLInputElement).value;
+        break;
+      case 'select':
+        if (!(target as HTMLSelectElement).multiple) {
+          targetValue = (target as HTMLSelectElement).value;
+        } else {
+          targetValue = selectAll(target.querySelectorAll('option'))
+            .filter(option => option.selected)
+            .map(option => option.value);
+        }
+        break;
+
+      case 'checkbox':
+        targetValue = (target as HTMLInputElement).checked ? (target as HTMLInputElement).value : [null, false];
+        break;
+
+      case 'radio':
+        targetValue = target.querySelector<HTMLInputElement>('input[type=radio]:checked')?.value;
+        break;
+    }
+
+    if (Array.isArray(value)) {
+      if (Array.isArray(targetValue)) {
+        return difference(value, targetValue).length === 0;
+      }
+
+      return value.indexOf(targetValue) !== -1;
+    }
+
+    if (targetValue && Array.isArray(targetValue)) {
+      return targetValue.indexOf(value) !== -1;
+    }
+
+    return value == targetValue;
+  }
+
+  /**
+   * @see https://github.com/nickjackson/val/blob/master/index.js#L55
+   * @param el
+   * @returns {string}
+   */
+  nodeType(el: HTMLElement): "select" | "textarea" | "checkbox" | "input" | "radio" {
+    var node = el.nodeName.toLowerCase();
+    var type = (el as HTMLInputElement).type;
+
+    if (node === 'select') {
+      return 'select';
+    }
+
+    if (node === 'textarea') {
+      return 'textarea';
+    }
+
+    if (node === 'input') {
+      if (type === 'checkbox') {
+        return 'checkbox';
+      }
+
+      return 'input';
+    }
+
+    if (node === 'div') {
+      if (el.querySelector('input[type=radio]')) {
+        return 'radio';
+      }
+    }
+
+    return 'input';
+  }
+}
+
+export const ready = useUniDirective('show-on', {
+  mounted(el, { value }) {
+    module<HTMLElement, HTMLElement>(el, 'show.on', (el) => {
+      return new ShowOn(el, JSON.parse(value));
+    });
+  }
+});
+
+export interface ShowOnModule {
+  ShowOn: typeof ShowOn;
+  ready: typeof ready;
+}

package/src/module/tinymce.ts

@@ -0,0 +1,263 @@
+import type { Editor, EditorOptions, TinyMCE } from 'tinymce';
+import { useHttpClient, useStack } from '../composable';
+import { useImport } from '../service';
+import { Dictionary, MaybePromise } from '../types';
+import { mergeDeep } from '../utilities';
+
+const instances: Dictionary<TinymceController> = {};
+let hooks: ((tinymce: TinyMCE) => MaybePromise<any>)[] = [];
+
+let imported = false;
+
+declare type UploadHandlerParams = Parameters<NonNullable<EditorOptions['images_upload_handler']>>;
+
+export async function get(
+  selector: string,
+  options: Record<string, any> = {}
+): Promise<TinymceController> {
+  const tinymce = await loadTinymce();
+
+  return instances[selector] ??= new TinymceController(tinymce, document.querySelector(selector)!, options);
+}
+
+export function destroy(selector: string): void {
+  delete instances[selector];
+}
+
+export function addHook(handler: ((tinymce: TinyMCE) => MaybePromise<any>)) {
+  hooks.push(handler);
+}
+
+export function clearHooks() {
+  hooks = [];
+}
+
+async function loadTinymce(): Promise<TinyMCE> {
+  await useImport('@tinymce');
+
+  if (imported) {
+    return tinymce;
+  }
+  imported = true;
+  for (const hook of hooks) {
+    hook(tinymce);
+  }
+  await registerDragPlugin(tinymce);
+  return tinymce;
+}
+
+const defaultOptions: Record<string, any> = {};
+
+export class TinymceController {
+  editor?: Editor;
+  options: Record<string, any> = {};
+
+  constructor(protected tinymce: TinyMCE, public element: HTMLElement, options: Record<string, any>) {
+    options.target = element;
+
+    this.options = mergeDeep(
+      {
+        unicorn: {
+          stack_name: 'uploading'
+        }
+      },
+      defaultOptions,
+      this.prepareOptions(options, tinymce.majorVersion),
+    );
+
+    tinymce.EditorManager.init(this.options).then((editor) => {
+      this.editor = editor[0];
+    });
+  }
+
+  prepareOptions(options: Record<string, any>, version = '6') {
+    const defaults: Partial<EditorOptions> = {};
+
+    if (options.images_upload_url) {
+      defaults.paste_data_images = true;
+      defaults.remove_script_host = false;
+      defaults.relative_urls = false;
+
+      if (Number(version) >= 6) {
+        defaults.images_upload_handler = (blobInfo, progress) =>
+          this.imageUploadHandler(blobInfo, progress);
+      } else {
+        options.plugins.push('paste');
+
+        // @ts-ignore
+        defaults.images_upload_handler = (blobInfo, success, failure, progress) =>
+          this.imageUploadHandler(blobInfo, progress)
+            .then((url) => {
+              success(url);
+              return url;
+            })
+            .catch((e) => {
+              failure(e.message, { remove: true });
+              throw e;
+            });
+      }
+    }
+
+    // defaults.file_picker_callback = (...args) => this.filePickerCallback(...args);
+
+    defaults.plugins = defaults.plugins || [];
+
+    defaults.setup = (editor) => {
+      editor.on('change', () => {
+        this.tinymce.triggerSave();
+      });
+    };
+
+    options = mergeDeep({}, defaults, options);
+
+    if (options.plugins.indexOf('unicorndragdrop') === -1) {
+      options.plugins.push('unicorndragdrop');
+    }
+
+    return options;
+  }
+
+  insert(text: string) {
+    this.editor?.insertContent(text);
+  }
+
+  getValue(): string {
+    return this.editor?.getContent() ?? '';
+  }
+
+  setValue(text: string): void {
+    this.editor?.setContent(text);
+  }
+
+  // filePickerCallback(callback, value, meta) {
+  //   const input = document.createElement('input');
+  //   input.setAttribute('type', 'file');
+  //   input.style.display = 'none';
+  //
+  //   if (meta.filetype === 'image') {
+  //     input.setAttribute('accept', `image/\*`);
+  //   }
+  //
+  //   document.body.appendChild(input);
+  //
+  //   input.onchange = function () {
+  //     const file = this.files[0];
+  //
+  //     const reader = new FileReader();
+  //     reader.onload = function () {
+  //       const id = 'blobid' + (new Date()).getTime();
+  //       const blobCache =  tinymce.activeEditor.editorUpload.blobCache;
+  //       const base64 = reader.result.split(',')[1];
+  //       const blobInfo = blobCache.create(id, file, base64);
+  //       blobCache.add(blobInfo);
+  //
+  //       /* call the callback and populate the Title field with the file name */
+  //       callback(blobInfo.blobUri(), { title: file.name, text: file.name });
+  //     };
+  //     reader.readAsDataURL(file);
+  //     input.remove();
+  //   };
+  //
+  //   input.click();
+  // }
+
+  async imageUploadHandler(blobInfo: UploadHandlerParams[0], progress: UploadHandlerParams[1]) {
+    const element = this.element;
+
+    element.dispatchEvent(new CustomEvent('upload-start'));
+
+    const formData = new FormData();
+    formData.append('file', blobInfo.blob(), blobInfo.filename());
+
+    const stack = useStack(this.options.unicorn.stack_name);
+    stack.push(true);
+
+    const { post, isAxiosError } = await useHttpClient();
+
+    try {
+      let res = await post(
+        this.options.images_upload_url,
+        formData,
+        {
+          withCredentials: false,
+          onUploadProgress: (e) => {
+            progress(e.loaded / e.total! * 100);
+          }
+        }
+      );
+      element.dispatchEvent(new CustomEvent('upload-success'));
+
+      return res.data.data.url;
+    } catch (err) {
+      if (isAxiosError(err)) {
+        const message = err?.response?.data?.message || err.message;
+        console.error(err?.response?.data?.message || err.message, err);
+        element.dispatchEvent(new CustomEvent('upload-error', { detail: err }));
+
+        return Promise.reject({ message, remove: true });
+      }
+
+      throw err;
+    } finally {
+      element.dispatchEvent(new CustomEvent('upload-complete'));
+      stack.pop();
+    }
+  }
+}
+
+function registerDragPlugin(tinymce: TinyMCE) {
+  tinymce.PluginManager.add('unicorndragdrop', function (editor) {
+    // Reset the drop area border
+    tinymce.DOM.bind(document, 'dragleave', function (e) {
+      e.stopPropagation();
+      e.preventDefault();
+
+      if (tinymce.activeEditor) {
+        tinymce.activeEditor.contentAreaContainer.style.transition = 'all .3s';
+        tinymce.activeEditor.contentAreaContainer.style.borderWidth = '';
+      }
+
+      return false;
+    });
+
+    if (typeof FormData !== 'undefined') {
+
+      // Fix for Chrome
+      editor.on('dragenter', e => {
+        e.stopPropagation();
+        return false;
+      });
+
+      // Notify user when file is over the drop area
+      editor.on('dragover', e => {
+        e.preventDefault();
+
+        if (tinymce.activeEditor) {
+          tinymce.activeEditor.contentAreaContainer.style.transition = 'all .3s';
+          tinymce.activeEditor.contentAreaContainer.style.border = '3px dashed rgba(0, 0, 0, .35)';
+        }
+
+        return false;
+      });
+
+      editor.on('drop', e => {
+        editor.contentAreaContainer.style.borderWidth = '';
+        editor.contentAreaContainer.style.borderWidth = '';
+      });
+    }
+  });
+
+  return Promise.resolve();
+}
+
+export interface TinymceModule {
+  get: typeof get;
+  destroy: typeof destroy;
+  addHook: typeof addHook;
+  clearHooks: typeof clearHooks;
+  TinymceController: typeof TinymceController;
+}
+
+declare global {
+  var tinymce: TinyMCE;
+}