@xwadex/fesd 0.0.1 → 0.0.3

package/src/fesd/modal4/modal4.js

@@ -1,236 +0,0 @@
-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

@@ -1,182 +0,0 @@
-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

@@ -1,282 +0,0 @@
-
-// 共用分類
-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