@xwadex/fesd 0.0.1

package/src/fesd/modal4/modal4.js

@@ -0,0 +1,236 @@
+import ModernModal from './modernModal';
+import SHARED from './../shared/shared';
+import { isString, isElementExist, isFunction, getElement, getAllElements, toHTMLElement, jsonParse, warn } from './../shared/utils';
+
+// define custom element
+if (!customElements.get('modern-modal')) {
+  customElements.define('modern-modal', ModernModal);
+}
+
+const { MODALS } = window;
+
+// use methods (for instance)
+const useMethod = (instance, name, ...args) => {
+  if (!name) return;
+  const handler = instance[name];
+
+  if (handler && isFunction(handler)) {
+    handler.apply(instance, args);
+  }
+};
+
+// use function (for static)
+const useFunction = (handler, ...args) => {
+  if (handler && isFunction(handler)) {
+    handler.apply(Modal4, args);
+  }
+};
+
+// dispatch modal
+const dispatchModal = (options, instance) => {
+  const { target } = options;
+
+  const modal = MODALS[target] || getElement(options.target);
+
+  if (modal) useModal(options, instance);
+  if (!modal) useFetch(options, instance);
+};
+
+//
+const useModal = (options, instance) => {
+  const { target, action, on, e } = options;
+
+  const modal = MODALS[target] || getElement(options.target);
+  const events = ['open', 'close', 'destroy'];
+
+  // trigger events
+  events.forEach(name => {
+    modal.once(name, () => {
+      if (instance) {
+        instance.emit(name, modal, e);
+        useMethod(instance, on[name], modal, e);
+      }
+      if (!instance) {
+        useFunction(on[name], modal);
+      }
+    });
+  });
+
+  // action
+  switch (action) {
+    case 'open':
+      modal.open();
+      break;
+    case 'close':
+      modal.close();
+      break;
+    case 'destroy':
+      modal.destroy();
+      break;
+    default:
+      const state = modal.getAttribute(':state');
+      if (state === 'close') modal.open();
+      if (state === 'open') modal.close();
+      break;
+  }
+};
+
+// fetch modal from files
+const useFetch = async (options, instance) => {
+  const { target, route, container, on, e } = options;
+
+  if (!route) return warn('modal4', 'cannot find target or data-modal-route is not defined');
+
+  // trigger event handler
+  const useEvent = (name, ...args) => {
+    if (instance) {
+      instance.emit(name, ...args);
+      useMethod(instance, on[name], ...args);
+    }
+    if (!instance) {
+      useFunction(on[name], ...args);
+    }
+  };
+
+  // get response
+  fetch(route)
+    .then(res => {
+      // trigger success event
+      useEvent('success', e);
+
+      return res.text();
+    })
+    .then(data => {
+      const doms = toHTMLElement(data); /** modern-modal is initialized in this state */
+      const containerElement = getElement(container) || getElement(fesdDB.modal4.SETTINGS.container);
+
+      // append dom
+      [...doms].forEach(dom => {
+        containerElement.append(dom);
+      });
+
+      const modal = MODALS[target] || getElement(options.target);
+
+      // trigger complete event
+      useEvent('complete', modal);
+      useModal(options, instance);
+    })
+    .catch(error => {
+      // trigger error event
+      useEvent('error', error);
+    });
+};
+
+class Modal4 {
+  constructor(el, options = {}) {
+    this.__storage__ = {
+      el,
+      options,
+    };
+
+    this.#create();
+  }
+
+  #create() {
+    const { el, options } = this.__storage__;
+    if (!isString(el) || !isElementExist(el)) return;
+
+    const { SETTINGS, EVENTS } = fesdDB.modal4;
+
+    this.elements = getAllElements(el);
+    this.options = Object.assign({}, SETTINGS, options);
+    this.__events__ = Object.assign({}, EVENTS);
+
+    if (this.options.on) {
+      for (const [k, v] of Object.entries(this.options.on)) {
+        this.__events__[k] = [v];
+      }
+    }
+
+    this.#init();
+  }
+
+  #init() {
+    const { elements, options } = this;
+
+    elements.forEach(el => {
+      el.modal = {};
+      el.modal.instance = this;
+      el.modal.eventHandler = this.#trigger;
+      el.modal.defaultOptions = options;
+      el.addEventListener('click', el.modal.eventHandler);
+    });
+
+    this.emit('init');
+  }
+
+  #trigger(e) {
+    /** the keyword `this` in this method is pointed to the click target */
+    const { defaultOptions, eventHandler, instance } = this.modal;
+
+    const ons = jsonParse(this.getAttribute('data-modal-on'));
+    if (ons && typeof ons !== 'object') warn('modal4', 'data-modal-on must be a json string.');
+
+    const options = {
+      target: this.getAttribute('data-modal-target') || defaultOptions.target,
+      action: this.getAttribute('data-modal-action') || defaultOptions.action,
+      route: this.getAttribute('data-modal-route') || defaultOptions.route,
+      container: this.getAttribute('data-modal-container') || defaultOptions.container,
+      on: ons && typeof ons === 'object' ? ons : {},
+      e,
+    };
+
+    // prevent multiple click
+    this.removeEventListener('click', eventHandler);
+    setTimeout(() => {
+      this.addEventListener('click', eventHandler);
+    }, 200);
+
+    // get modal
+    dispatchModal(options, instance);
+  }
+
+  destroy() {
+    const { elements } = this;
+
+    elements.forEach(el => {
+      if (!el.modal) return;
+
+      el.removeEventListener('click', el.modal.eventHandler);
+      delete el.modal;
+    });
+
+    return this;
+  }
+
+  update() {
+    this.destroy().#create();
+
+    this.emit('update');
+
+    return this;
+  }
+
+  /** static method 'open' */
+  static open(options) {
+    const { SETTINGS } = fesdDB.modal4;
+    const openOptions = Object.assign({}, SETTINGS, { on: {} }, options);
+    dispatchModal(openOptions);
+  }
+
+  /** static method 'defineMethods' */
+  static defineMethods(obj) {
+    if (!Modal4.prototype.__methods__) Modal4.prototype.__methods__ = {};
+    const methods = Modal4.prototype.__methods__;
+
+    for (const [k, v] of Object.entries(obj)) {
+      if (isFunction(v)) methods[k] = v;
+    }
+
+    Object.assign(Modal4.prototype, Modal4.prototype.__methods__);
+  }
+}
+
+Object.assign(Modal4.prototype, SHARED);
+
+export default Modal4;

package/src/fesd/modal4/modernModal.js

@@ -0,0 +1,182 @@
+import { OverlayScrollbars } from 'overlayscrollbars';
+// self
+import SHARED from './../shared/shared';
+import { createUid, warn } from './../shared/utils';
+
+if (!window.MODALS) window.MODALS = {};
+
+const { MODALS } = window;
+
+// create template method
+const createTemplate = el => {
+  const { TEMPLATE } = fesdDB.modal4;
+  const { childDom } = el;
+  const container = document.createElement('div');
+  container.innerHTML = TEMPLATE(el.getAttribute('data-modal-template-setting'));
+
+  const content = container.querySelector('.modal-content');
+  [...childDom].forEach(child => {
+    content.append(child);
+  });
+
+  return container.children[0];
+};
+
+// class
+class ModernModal extends HTMLElement {
+  constructor() {
+    super();
+    this.initialize = false;
+  }
+
+  static get observedAttributes() {
+    return [':state'];
+  }
+
+  attributeChangedCallback(attr, oldVal, newVal) {
+    switch (attr) {
+      case ':state':
+        this.#stateControl(newVal);
+        break;
+    }
+  }
+
+  connectedCallback() {
+    if (this.initialize) return;
+    this.initialize = true;
+    this.#create();
+  }
+
+  #create() {
+    const { ATTRS } = fesdDB.modal4;
+
+    this.__events__ = {};
+
+    if (!this.getAttribute(':state')) {
+      this.setAttribute(':state', 'close');
+    }
+
+    const id = this.getAttribute(ATTRS.id) || createUid();
+    if (!this.getAttribute(ATTRS.id)) {
+      warn(`modern-modal needs a ${ATTRS.id} attribute with a unique id.`);
+      this.setAttribute(ATTRS.id, id);
+    }
+
+    if (MODALS[id]) warn(`the ${ATTRS.id} "${id}" is already be used.`);
+    MODALS[id] = this;
+
+    this.#mount();
+  }
+
+  #mount() {
+    this.childDom = this.childNodes;
+    this.template = createTemplate(this);
+
+    this.innerHTML = '';
+    this.append(this.template);
+
+    this.#init();
+  }
+
+  #init() {
+    const scroller = this.querySelector('.modal-scroller');
+
+    this.__scroller__ = OverlayScrollbars(scroller, {
+      overflowBehavior: {
+        x: 'hidden',
+      },
+    });
+
+    this.#event();
+  }
+
+  #event() {
+    const $self = this;
+    const { ATTRS } = fesdDB.modal4;
+    const { close, destroy } = ATTRS;
+
+    $self.querySelectorAll(`[${close}]`)?.forEach(el => {
+      el.addEventListener('click', function () {
+        const closeAttr = this.getAttribute(close);
+        const closeTarget = closeAttr && MODALS[closeAttr] ? MODALS[closeAttr] : $self;
+        closeTarget.close();
+      });
+    });
+
+    $self.querySelectorAll(`[${destroy}]`)?.forEach(el => {
+      el.addEventListener('click', function () {
+        const destroyAttr = this.getAttribute(destroy);
+        const destroyTarget = destroyAttr && MODALS[destroyAttr] ? MODALS[destroyAttr] : $self;
+        destroyTarget.destroy();
+      });
+    });
+
+    $self.querySelector('[stop-propagation]')?.addEventListener('click', function (e) {
+      e.stopPropagation();
+    });
+  }
+
+  #stateControl(state) {
+    const { __scroller__ } = this;
+
+    if (state === 'open') {
+      this.style.display = 'block';
+      if (__scroller__) {
+        const { viewport } = __scroller__.elements();
+        viewport.scrollTo({
+          top: 0,
+        });
+      }
+      setTimeout(() => {
+        this.classList.add('show');
+        this.emit('open');
+      }, 100);
+    }
+    if (state === 'close') {
+      if (!this.classList.contains('show')) return;
+      this.classList.remove('show');
+      const transitionEndHandler = () => {
+        this.style.removeProperty('display');
+        this.emit('close');
+        this.removeEventListener('transitionend', transitionEndHandler);
+      };
+      this.addEventListener('transitionend', transitionEndHandler);
+    }
+    if (state === 'destroy') {
+      this.classList.remove('show');
+      const transitionEndHandler = () => {
+        const { ATTRS } = fesdDB.modal4;
+        const id = this.getAttribute(ATTRS.id);
+        this.style.removeProperty('display');
+        this.emit('close');
+        this.remove();
+        this.emit('destroy');
+        if (MODALS[id]) delete MODALS[id];
+      };
+      this.addEventListener('transitionend', transitionEndHandler);
+    }
+  }
+
+  open() {
+    this.setAttribute(':state', 'open');
+
+    return this;
+  }
+
+  close() {
+    this.setAttribute(':state', 'close');
+
+    return this;
+  }
+
+  destroy() {
+    this.setAttribute(':state', 'destroy');
+
+    return this;
+  }
+}
+
+// install on and emit
+Object.assign(ModernModal.prototype, SHARED);
+
+export default ModernModal;

package/src/fesd/multipurpose4/_multipurpose4.sass

@@ -0,0 +1,282 @@
+
+// 共用分類
+multipurpose-nav
+  display: block
+  &[m4-type="drag"]
+    .drag-container
+      padding: 0 20px
+      display: inline-flex
+      position: relative
+      max-width: 500px
+      // width: auto
+      width: 100%
+      text-align: center
+      &.scrollable
+        padding: 0 20px
+        .navigation
+          display: block
+      .navigation
+        // display: none
+        .button
+          display: flex
+          align-items: center
+          position: absolute
+          top: 50%
+          z-index: 2
+          background-color: #fff
+          width: 30px
+          height: 100%
+          opacity: 1
+          transition: opacity .6s
+          &.prev
+            left: 5px
+            transform: translate3d(-50%, -50%, 0)
+            div
+              &::before
+                border-top: 2px solid #333
+                border-left: 2px solid #333
+                transform: rotate(-45deg) translate3d(1px, 1px, 0)
+            &.hide
+              opacity: .3
+              pointer-events: none
+              div
+                &::before
+                  border-top: 2px solid #666
+                  border-left: 2px solid #666
+          &.next
+            right: 5px
+            transform: translate3d(50%, -50%, 0)
+            div
+              &::before
+                border-top: 2px solid #333
+                border-right: 2px solid #333
+                transform: rotate(45deg) translate3d(-1px, 1px, 0)
+            &.hide
+              opacity: .3
+              pointer-events: none
+              div
+                &::before
+                  border-top: 2px solid #666
+                  border-right: 2px solid #666
+          div
+            display: flex
+            align-items: center
+            justify-content: center
+            width: 35px
+            height: 35px
+            cursor: pointer
+            &::before
+              display: block
+              width: 8px
+              height: 8px
+              content: ''
+      .wrapper
+        padding: 2px 0 // 2px 英文字行高, 防止 g y 等被咖掉
+        display: grid
+        grid-auto-flow: column
+        grid-auto-columns: max-content
+        grid-template-rows: none
+        justify-content: flex-start
+
+        gap: 10px 25px !important
+
+        overflow: auto hidden
+        overscroll-behavior-inline: contain
+        scroll-snap-type: inline mandatory
+        scroll-padding-inline: 85px
+
+        -webkit-scrollbar-width: none
+        -moz-scrollbar-width: none
+        -ms-scrollbar-width: none
+        scrollbar-width: none
+        &::-webkit-scrollbar
+          display: none
+
+        &.center
+          mask-image: linear-gradient(270deg, rgba(#fff, 0), #fff 20%, #fff 80%, rgba(#fff, 0))
+        &.start
+          mask-image: linear-gradient(270deg, rgba(#fff, 0), #fff 20%, #fff)
+        &.end
+          mask-image: linear-gradient(90deg, rgba(#fff, 0), #fff 20%, #fff)
+      .item
+        position: relative
+        flex-shrink: 0
+        text-align: center
+        cursor: pointer
+        &.active
+          .category
+            &::after
+              width: 100%
+      .category
+        display: block
+        position: relative
+        padding: 10px 0
+        color: #000
+        font-size: 14px
+        font-weight: 700
+        line-height: 1.5
+        letter-spacing: .5px
+        text-decoration: none
+        &::after
+          display: block
+          position: absolute
+          bottom: 0
+          right: 0
+          background-color: #666
+          width: 0
+          height: 4px
+          transition: width .2s, background .2s
+          content: ''
+  &[m4-type="collapse"]
+    position: relative
+    &.expand
+      .drag-container
+        .wrapper
+          display: none
+        .collapse-placeholder
+          display: block
+        .open-collapse
+          &::before
+            transform: scale(-1)
+      .collapse-container
+        opacity: 1
+        transform: translateZ(0)
+        pointer-events: auto
+    .drag-container
+      display: inline-flex
+      align-items: center
+      position: relative
+      max-width: 500px
+      width: 100%
+      text-align: center
+      .wrapper
+        padding: 2px 0 // 2px 英文字行高, 防止 g y 等被咖掉
+        display: grid
+        grid-auto-flow: column
+        grid-auto-columns: max-content
+        grid-template-rows: none
+        justify-content: flex-start
+
+        gap: 10px 25px !important
+
+        overflow: auto hidden
+        overscroll-behavior-inline: contain
+        scroll-snap-type: inline mandatory
+        scroll-padding-inline: 85px
+
+        -webkit-scrollbar-width: none
+        -moz-scrollbar-width: none
+        -ms-scrollbar-width: none
+        scrollbar-width: none
+        &::-webkit-scrollbar
+          display: none
+
+        &.center
+          mask-image: linear-gradient(270deg, rgba(#fff, 0), #fff 20%, #fff 80%, rgba(#fff, 0))
+        &.start
+          mask-image: linear-gradient(270deg, rgba(#fff, 0), #fff 20%, #fff)
+        &.end
+          mask-image: linear-gradient(90deg, rgba(#fff, 0), #fff 20%, #fff)
+      .item
+        position: relative
+        flex-shrink: 0
+        text-align: center
+        cursor: pointer
+        &.active
+          .category
+            &::after
+              width: 100%
+      .category
+        display: block
+        position: relative
+        padding: 10px 0
+        color: #000
+        font-size: 14px
+        font-weight: 700
+        line-height: 1.5
+        letter-spacing: .5px
+        text-decoration: none
+        &::after
+          display: block
+          position: absolute
+          bottom: 0
+          right: 0
+          background-color: #666
+          width: 0
+          height: 4px
+          transition: width .2s, background .2s
+          content: ''
+      .collapse-placeholder
+        padding: 12px 0
+        display: none
+        width: 100%
+        font-size: 14px
+        font-weight: 700
+        line-height: 1.5
+        letter-spacing: .5px
+        text-align: left
+        user-select: none
+      .open-collapse
+        margin-left: 10px
+        padding-left: 10px
+        order: 1
+        display: flex
+        align-items: center
+        justify-content: center
+        flex-shrink: 0
+        border-left: 1px solid rgba(#000, .3)
+        width: 32px
+        height: 25px
+        cursor: pointer
+        &::before
+          width: 0
+          height: 0
+          border-style: solid
+          border-width: 6px 5px 0 5px
+          border-color: #000 transparent transparent transparent
+          content: ''
+    .collapse-container
+      padding: 20px
+      position: absolute
+      left: 0
+      z-index: 1
+      background-color: #fff
+      border-radius: 5px
+      border: 1px solid rgba(#000, .2)
+      max-width: 500px
+      // width: auto
+      width: 100%
+      opacity: 0
+      transform: translate3d(0, -10px, 0)
+      pointer-events: none
+      transition: opacity .3s, transform .3s
+      .wrapper
+        display: flex
+        flex-wrap: wrap
+        margin: 0 -10px -10px
+      .item
+        margin: 0 10px 10px 
+        padding: 5px 20px
+        position: relative
+        flex-shrink: 0
+        border: 1px solid rgba(#000, .2)
+        border-radius: 500px
+        text-align: center
+        cursor: pointer
+        &:hover
+          background-color: #000
+          .category
+            color: #fff
+        &.active
+          background-color: #000
+          .category
+            color: #fff
+      .category
+        display: block
+        position: relative
+        color: #000
+        font-size: 14px
+        font-weight: 700
+        line-height: 1.5
+        letter-spacing: .5px
+        text-decoration: none