@windwalker-io/unicorn-next 0.1.0

package/src/module/field-repeatable.ts

@@ -0,0 +1,202 @@
+import { cloneDeep } from 'lodash-es';
+import { initAlpineComponent, prepareAlpineDefer, uid, useCssImport } from '../service';
+import { mergeDeep } from '../utilities';
+
+export interface RepeatableOptions {
+  id?: string;
+  fieldName?: string;
+  sortable?: boolean;
+  hasKey?: boolean;
+  singleArray?: boolean;
+  ensureFirstRow?: boolean;
+  max?: number | null;
+}
+
+const defaultOptions: RepeatableOptions = {
+  id: '',
+  fieldName: '',
+  sortable: false,
+  hasKey: false,
+  singleArray: false,
+  ensureFirstRow: false,
+  max: null,
+};
+
+function prepareItem(item: any) {
+  if (item.uid == null) {
+    item.uid = uid();
+  }
+  return item;
+}
+
+type RepeatableParams = {
+  items: Record<string, any>[];
+  defaultValues: any;
+  attrs: Record<string, any>;
+};
+
+async function init() {
+  await prepareAlpineDefer(async (Alpine) => {
+    useCssImport('@vue-animate');
+
+    Alpine.data('RepeatableField', ({ items, defaultValues, attrs }: RepeatableParams, options: RepeatableOptions) => ({
+      items,
+      defaultValues,
+      attrs,
+      options: mergeDeep<RepeatableOptions>(defaultOptions, options),
+      init() {
+        // this.items = this.items.filter((item) => item !== '__EMPTY_ARRAY__');
+
+        if (this.options.sortable) {
+          // @see https://github.com/alpinejs/alpine/discussions/1635
+          import('sortablejs').then(({ default: Sortable }) => {
+            Sortable.create(this.$refs.tbody, {
+              handle: '.h-handle',
+              animation: 300,
+              onEnd: (event: any) => {
+                // V3 helper to unwrap the proxy
+                const items = Alpine.raw(this.items);
+
+                // splice mutates the original object, which
+                // you want to avoid. In this case it works because we
+                // created a temporary object that we can control
+                // That way we know there are no side effects
+                const droppedAtItem = items.splice(event.oldIndex, 1)[0];
+                items.splice(event.newIndex, 0, droppedAtItem);
+                //
+                // // Alpine will update when you modify the state,
+                // // so we need to set it back to our new state
+                this.items = items;
+
+                // HACK update prevKeys to new sort order
+                let keys = [];
+                for (let item of items) {
+                  keys.push(item.uid);
+                }
+
+                // HACK update index of dataStack
+                // @ts-ignore
+                this.$refs.steps_template._x_prevKeys = keys;
+                // @ts-ignore
+                const elements = this.$refs.steps_template
+                  .parentElement
+                  .querySelectorAll('tr');
+
+                [].slice.call(elements).forEach((ele, i) => {
+                  // @ts-ignore
+                  if (ele?._x_dataStack[0]?.i != null) {
+                    // @ts-ignore
+                    ele._x_dataStack[0].i = i;
+                  }
+                });
+              }
+            });
+          });
+        }
+
+        this.items.forEach(prepareItem);
+
+        if (this.options.ensureFirstRow) {
+          this.ensureFirstRow();
+        }
+      },
+
+      addItem(i: number) {
+        const item = prepareItem(this.getEmptyItem());
+
+        this.items.splice(i + 1, 0, item);
+      },
+
+      delItem(i: number) {
+        const el = this.getItemElementByUID(this.items[i].uid);
+        let hasAnimate = false;
+
+        el?.addEventListener('animationstart', () => {
+          hasAnimate = true;
+        }, { once: true });
+
+        el?.classList.add('animate__fadeOut');
+
+        setTimeout(() => {
+          if (!hasAnimate) {
+            this._removeItem(i);
+          }
+        }, 100);
+
+        el?.addEventListener('animationend', () => {
+          this._removeItem(i);
+        }, { once: true });
+      },
+
+      _removeItem(i: number) {
+        this.items.splice(i, 1);
+
+        if (this.options.ensureFirstRow) {
+          this.ensureFirstRow();
+        }
+      },
+
+      ensureFirstRow() {
+        if (this.items.length === 0) {
+          this.items.push(prepareItem(this.getEmptyItem()));
+        }
+      },
+
+      getItemElementByUID(uid: string) {
+        return this.$root.querySelector(`[data-item="${uid}"]`);
+      },
+
+      getId(i: number, item: any, field: string) {
+        return `${this.id}-${item.uid}-${field}`;
+      },
+
+      getName(i: number, item: any, field: string) {
+        if (this.options.singleArray) {
+          if (this.options.hasKey) {
+            if (field === 'key') {
+              return '';
+            }
+
+            return `${this.fieldName}[${item.key}]`;
+          }
+
+          return `${this.fieldName}[]`;
+        }
+
+        return `${this.fieldName}[${i}][${field}]`;
+      },
+
+      getEmptyItem() {
+        return cloneDeep(this.defaultValues);
+      },
+
+      get canAdd() {
+        if (!this.options.max) {
+          return true;
+        }
+
+        return this.options.max > this.items.length;
+      },
+
+      get canModify() {
+        return this.attrs.disabled == null && this.attrs.readonly == null;
+      },
+
+      get fieldName() {
+        return this.options.fieldName;
+      },
+
+      get id() {
+        return this.options.id;
+      }
+    }));
+  });
+
+  await initAlpineComponent('data-repeatable');
+}
+
+export const ready = init();
+
+export interface RepeatableModule {
+  ready: typeof ready;
+}

package/src/module/field-single-image-drag.ts

@@ -0,0 +1,468 @@
+
+import { useHttpClient } from '../composable';
+import { __, injectCssToDocument, selectAll, simpleAlert } from '../service';
+import { mergeDeep } from '../utilities';
+import css from '../../scss/field/single-image-drag.scss?inline';
+import { Modal } from 'bootstrap';
+import type Cropper from 'cropperjs';
+import { ApiReturn } from './http-client';
+
+injectCssToDocument(css);
+
+export interface SingleImageDragOptions {
+  accept: string | string[];
+  ajax_url?: string;
+  crop: boolean;
+  width: number;
+  height: number;
+  max_width?: number;
+  min_width?: number;
+  max_height?: number;
+  min_height?: number;
+  modalTarget: string;
+}
+
+const defaultOptions: Partial<SingleImageDragOptions> = {
+  accept: [
+    'image/jpeg',
+    'image/png',
+    'image/webp',
+    'image/avif',
+    'image/gif',
+  ],
+  crop: false,
+  width: 800,
+  height: 800,
+};
+
+export class SingleImageDragElement extends HTMLElement {
+  static is = 'uni-sid';
+
+  currentImage = '';
+  currentFile: File | undefined = undefined;
+  lastZoom = 0;
+  valueBackup = '';
+
+  private options!: SingleImageDragOptions;
+  private valueInput!: HTMLInputElement;
+  private fileInput!: HTMLInputElement;
+  private selectButton!: HTMLButtonElement;
+  private pasteButton!: HTMLButtonElement;
+  private dragarea!: HTMLDivElement;
+  private previewImage!: HTMLImageElement;
+  private removeCheckbox!: HTMLInputElement;
+  private modalElement!: HTMLDivElement;
+  private modal!: Modal;
+  private cropContainer!: HTMLDivElement;
+  private savebutton!: HTMLButtonElement;
+  private modalToolbarButtons!: NodeListOf<HTMLButtonElement>;
+  private cropper!: Cropper;
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.options = mergeDeep(
+      {},
+      defaultOptions,
+      JSON.parse(this.getAttribute('options') || '{}')
+    );
+
+    this.valueInput = this.querySelector<HTMLInputElement>('[data-field-input]')!;
+    this.fileInput = this.querySelector<HTMLInputElement>('[data-sid=file]')!;
+    this.selectButton = this.querySelector<HTMLButtonElement>('[data-sid=select]')!;
+    this.pasteButton = this.querySelector<HTMLButtonElement>('[data-sid=paste]')!;
+    this.dragarea = this.querySelector<HTMLDivElement>('[data-sid=dragarea]')!;
+    this.previewImage = this.querySelector<HTMLImageElement>('[data-sid=preview]')!;
+    this.removeCheckbox = this.querySelector<HTMLInputElement>('[data-sid=remove]')!;
+
+    this.modalElement = document.querySelector<HTMLDivElement>(this.options.modalTarget)!;
+    this.modal = Modal.getOrCreateInstance(this.modalElement);
+    this.cropContainer = this.modalElement.querySelector<HTMLDivElement>('[data-sid="crop-container"]')!;
+    this.savebutton = this.modalElement.querySelector<HTMLButtonElement>('[data-sid=save-button]')!;
+    this.modalToolbarButtons = this.modalElement.querySelectorAll<HTMLButtonElement>('[data-sid-toolbar]');
+
+    const modalShown = async () => {
+      const cropper = await this.getCropper();
+      cropper.replace(this.currentImage);
+      this.cropContainer.style.visibility = '';
+      this.currentImage = '';
+    };
+
+    this.modalElement.addEventListener('shown.bs.modal', modalShown.bind(this));
+
+    this.savebutton.addEventListener('click', () => {
+      this.saveCropped();
+      this.modal.hide();
+    });
+
+    this.bindEvents();
+
+    this.style.visibility = '';
+  }
+
+  bindEvents() {
+    this.dragarea.addEventListener('dragover', (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+
+      this.dragarea.classList.add('hover');
+    });
+
+    this.dragarea.addEventListener('dragleave', (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+
+      this.dragarea.classList.remove('hover');
+    });
+
+    this.dragarea.addEventListener('drop', (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+
+      this.dragarea.classList.remove('hover');
+
+      const files = (event.target as HTMLInputElement).files || event.dataTransfer?.files || [];
+      this.handleFileSelect(files[0]);
+    });
+
+    // Select button
+    this.selectButton.addEventListener('click', () => {
+      const input = document.createElement('input');
+      input.setAttribute('type', 'file');
+      input.setAttribute('accept', this.getInputAccept());
+      input.style.display = 'none';
+      input.addEventListener('change', (e) => {
+        this.handleFileSelect(input.files![0]!);
+
+        input.remove();
+      });
+
+      document.body.appendChild(input);
+      input.click();
+    });
+
+    this.pasteButton.addEventListener('click', () => {
+      navigator.clipboard.read().then((items) => {
+        let types = items[0].types;
+
+        if (types.length === 0) {
+          this.alert('This browser unable to get clipboard data.');
+          return;
+        }
+
+        types = types.slice().sort();
+
+        const type = types[0];
+
+        items[0].getType(type).then((blob) => {
+          this.handleFileSelect(new File([ blob ], 'image.png', { type }));
+        });
+      });
+    });
+
+    // Delete
+    this.removeCheckbox?.addEventListener('click', () => {
+      if (this.removeCheckbox.checked) {
+        this.valueBackup = this.valueInput.value;
+        this.valueInput.value = '';
+      } else {
+        this.valueInput.value = this.valueBackup;
+        this.valueBackup = '';
+      }
+    });
+
+    // Zoom slider
+    selectAll(this.modalToolbarButtons, (button) => {
+      button.addEventListener('click', (event) => {
+        this.toolbarClicked(button, event);
+      });
+    });
+  }
+
+  getInputAccept() {
+    let accept = this.options.accept;
+
+    if (Array.isArray(accept)) {
+      accept = accept.join(',');
+    }
+
+    return accept;
+  }
+
+  handleFileSelect(file: File) {
+    if (!this.checkFile(file)) {
+      return;
+    }
+
+    if (this.options.crop) {
+      const reader = new FileReader();
+
+      reader.addEventListener('load', (event) => {
+        this.cropContainer.style.visibility = 'hidden';
+        this.currentImage = event.target!.result as string;
+        this.currentFile = file;
+
+        // After modal shown, cropper will auto load.
+        this.modal.show();
+      });
+
+      reader.readAsDataURL(file);
+      return;
+    }
+
+    this.saveImage(file);
+  }
+
+  async saveCropped() {
+    const Cropper = await this.getCropper();
+
+    Cropper.getCroppedCanvas({
+        width: this.options.width,
+        height: this.options.height,
+        imageSmoothingEnabled: true
+      })
+      .toBlob((blob) => {
+        const file = new File([ blob! ], this.currentFile!.name, { type: 'image/png' });
+        this.saveImage(file);
+      }, 'image/png');
+  }
+
+  async getCropper() {
+    if (this.cropper) {
+      return this.cropper;
+    }
+
+    const Cropper = await loadCropper();
+
+    return this.cropper = new Cropper(this.cropContainer.querySelector('img')!, {
+      aspectRatio: this.options.width / this.options.height,
+      autoCropArea: 1,
+      viewMode: 1,
+      dragMode: 'move',
+      cropBoxMovable: false,
+      cropBoxResizable: false,
+      ready: (e) => {
+        //
+      },
+    });
+  }
+
+  async toolbarClicked(button: HTMLButtonElement, event: MouseEvent) {
+    const cropper = await this.getCropper();
+
+    const data = cropper.getData();
+
+    switch (button.dataset.sidToolbar) {
+      case 'zoom-in':
+        cropper.zoom(0.1);
+        break;
+
+      case 'zoom-out':
+        cropper.zoom(-0.1);
+        break;
+
+      case 'rotate-left':
+        cropper.rotate(-90);
+        break;
+
+      case 'rotate-right':
+        cropper.rotate(90);
+        break;
+
+      case 'scale-x':
+        cropper.scaleX(-data.scaleX);
+        break;
+
+      case 'scale-y':
+        cropper.scaleY(-data.scaleY);
+        break;
+    }
+  }
+
+  checkFile(file: File): boolean {
+    let accept = this.options.accept;
+
+    if (typeof accept === 'string') {
+      accept = accept.split(',').map(v => v.trim());
+    }
+
+    if (!accept.length) {
+      return true;
+    }
+
+    let allow = false;
+
+    for (const type of accept) {
+      if (type.indexOf('/') !== -1) {
+        allow = allow || this.compareMimeType(type, file.type);
+      } else {
+        allow = allow || type.toLowerCase() === getFileExtension(file)?.toLowerCase();
+      }
+    }
+
+    if (allow) {
+      return true;
+    }
+
+    this.alert(
+      __('unicorn.field.sid.message.invalid.image.title'),
+      __('unicorn.field.sid.message.invalid.image.desc'),
+      'error'
+    );
+
+    return false;
+  }
+
+  compareMimeType(accept: string, mime: string) {
+    const accept2 = accept.split('/');
+    const mime2 = mime.split('/');
+
+    if (accept2[1] === '*') {
+      return accept2[0] === mime2[0];
+    }
+
+    return accept === mime;
+  }
+
+  checkSize(image: HTMLImageElement): boolean {
+    try {
+      if (this.options.max_width && this.options.max_width < image.width) {
+        throw new Error(__('unicorn.field.sid.message.invalid.size.max.width', this.options.max_width));
+      }
+
+      if (this.options.min_width && this.options.min_width > image.width) {
+        throw new Error(__('unicorn.field.sid.message.invalid.size.min.width', this.options.min_width));
+      }
+
+      if (this.options.max_height && this.options.max_height < image.height) {
+        throw new Error(__('unicorn.field.sid.message.invalid.size.max.height', this.options.max_height));
+      }
+
+      if (this.options.min_height && this.options.min_height > image.height) {
+        throw new Error(__('unicorn.field.sid.message.invalid.size.min.height', this.options.min_height));
+      }
+    } catch (e) {
+      this.alert(
+        __('unicorn.field.sid.message.invalid.size.title'),
+        (e as Error).message,
+        'error'
+      );
+
+      return false;
+    }
+
+    return true;
+  }
+
+  alert(title: string, text = '', type = 'info') {
+    return simpleAlert(title, text, type);
+  }
+
+  async saveImage(file: File) {
+    if (this.options.ajax_url) {
+      const loading = this.querySelector<HTMLImageElement>('[data-sid=file-uploading]')!;
+
+      this.previewImage.src = '';
+      this.previewImage.style.display = 'none';
+      loading.style.display = 'flex';
+
+      try {
+        const res = await this.uploadImage(file);
+
+        this.storeValue(res.data.data.url, res.data.data.url);
+      } catch (e) {
+        console.error(e);
+        simpleAlert((e as Error).message);
+        return;
+      } finally {
+        loading.style.display = 'none';
+      }
+
+      return;
+    }
+
+    // @see https://stackoverflow.com/a/47172409
+    // @see https://stackoverflow.com/a/47522812
+    const dt = new DataTransfer();
+    dt.items.add(file);
+
+    // No required for value input to remove validation message
+    this.valueInput.required = false;
+
+    this.fileInput.files = dt.files;
+    this.fileInput.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+    this.fileInput.dispatchEvent(new CustomEvent('input', { bubbles: true }));
+
+    this.storeValue('', URL.createObjectURL(file));
+  }
+
+  async uploadImage(file: File) {
+    const formData = new FormData();
+    formData.append('file', file);
+
+    const { post } = await useHttpClient();
+
+    return post<ApiReturn<{ url: string; }>>(this.options.ajax_url!, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    });
+  }
+
+  storeValue(url: string, preview: string) {
+    this.previewImage.src = preview;
+    this.previewImage.style.display = 'inline-block';
+
+    // Make delete box unchecked
+    if (this.removeCheckbox) {
+      this.removeCheckbox.checked = false;
+    }
+
+    if (url) {
+      this.valueInput.value = url;
+    }
+
+    // Trigger change
+    this.previewImage.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+    this.valueInput.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+    this.valueInput.dispatchEvent(new CustomEvent('input', { bubbles: true }));
+  }
+}
+
+// Promise.all([
+//   import('@cropperjs/cropper.min.js'),
+//   import('@cropperjs/cropper.css'),
+// ])
+//   .then((service) => {
+//     const styleSheet = service[1].default;
+//     document.adoptedStyleSheets = [...document.adoptedStyleSheets, styleSheet];
+//   });
+
+customElements.define(SingleImageDragElement.is, SingleImageDragElement);
+
+function getFileExtension(file: File): string | undefined {
+  const parts = file.name.split('.');
+  if (parts.length > 1) {
+    return parts.pop();
+  }
+  return undefined;
+}
+
+async function loadCropper(): Promise<typeof Cropper> {
+  const [module] = await Promise.all([
+    import('cropperjs'),
+    import('cropperjs/dist/cropper.min.css?inline').then(({ default: css }) => {
+      injectCssToDocument(css);
+    })
+  ]);
+
+  return module.default;
+}
+
+loadCropper();
+
+export interface SingleImageDragModule {
+  SingleImageDragElement: typeof SingleImageDragElement;
+}