beyond-rails 0.0.188 → 0.0.189

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a72c8e57a80e8c6a653ea5356f23c3be9ce034f88d23ec5e42c3a2a6256bda6f
-  data.tar.gz: cb191ff4300f1f09c79162109b85d44f0e07f0c86f4926b40654f83f25d2dc98
+  metadata.gz: d267ba7a547c15723330eee12769f3902a397c29827ca1f86ca869ce532e0f95
+  data.tar.gz: 9591c982bac2e9f92c4e6615f7220fe30b4c0801a3cee29c21529f45aacaa0e3
 SHA512:
-  metadata.gz: 12b25834e8759f6c421a785e1fc6e41d5095e197a383f8df7c8f8c85ed9cb35bd6651793e63dfcdb8071cf7a94cb495ac95b42c924f02c453b9e45599a25af00
-  data.tar.gz: 6b308a81c3ae0cadb78dcacf76fcf41ef76b5f0bae1b79685333632938eb697690093cba2f4db84d3fb131e9fdb934a9b57407809191c9f7d86719c962f8118c
+  metadata.gz: 28c9d93b2579b5dfc806702ecacb468aecf10684a00068afd4e44552da0fecdda0b195d0b3d4fe08f877122df51febf9d0fe9730735b96661c812b1bfbca96aa
+  data.tar.gz: 19b3c86011070fc942892147d0b57402798c1862fea976f58f01e9be431d82eca5b067739ae7078229007ab79aad8aacf0bd3a4e0889b8a74c1fb3da053b1620

data/src/js/components/Modal.js

@@ -1,6 +1,8 @@
 import supportDom from '../utils/supportDom'
 import { noop } from '../utils'
 
+let globalModalId = 0
+
 @supportDom
 export default class Modal {
 
@@ -15,19 +17,41 @@ export default class Modal {
   }
 
   init() {
-    this.modalId = this.dom.dataset.modalOpener
-    const selector = `[data-modal="${this.modalId}"]`
-    this.modal = document.querySelector(selector)
-    if (! this.modal) {
-      throw new Error(`${selector} is not defined.`)
-    }
+    this.bindEvents()
+  }
+
+  bindEvents() {
+    this.setModalDom()
     this.closeBtn = this.modal.querySelector('[data-close]')
     this.cancelBtn = this.modal.querySelector('[data-cancel]')
     this.confirmBtn = this.modal.querySelector('[data-confirm]')
     this.addEvents()
   }
 
-  show() {
+  setModalDom() {
+    const { modalOpener, modal } = this.dom.dataset
+
+    if (modalOpener) {
+      this.modalId = this.dom.dataset.modalOpener
+      const selector = `[data-modal="${this.modalId}"]`
+      this.modal = document.querySelector(selector)
+      return
+    }
+
+    if (modal) {
+      this.modalId = modal
+    }
+    else {
+      this.modalId = `modal-${++globalModalId}`
+      this.dom.dataset.modal = this.modalId
+    }
+    this.modal = this.dom
+  }
+
+  show(html) {
+    if (html) {
+      this.replace(html)
+    }
     this.isVisible = true
     this.modal.style.display = 'block'
     setTimeout(() => {
@@ -43,24 +67,47 @@ export default class Modal {
     }, 300)
   }
 
-  addEvents() {
-    this.addEvent(this.dom, 'click', () => this.show())
+  replace(html) {
+    this.destroy()
+    this.modalId = null
 
-    if (this.closeBtn) {
-      this.addEvent(this.closeBtn, 'click', () => {
-        this.hide()
-        this.options.cancel('close')
-      })
+    // replace with new dom
+    const div = document.createElement('div')
+    div.innerHTML = html.trim()
+    const dom = div.firstChild
+    this.dom.parentNode.replaceChild(dom, this.dom)
+
+    this.dom = dom
+    this.dom._modal = this
+    this.init()
+  }
+
+  visible() {
+    return this.isVisible
+  }
+
+  addEventIfDomExists(dom, event, cb) {
+    if (dom) {
+      this.addEvent(dom, event, cb)
     }
+  }
 
-    if (this.cancelBtn) {
-      this.addEvent(this.cancelBtn, 'click', () => {
-        this.hide()
-        this.options.cancel('cancel')
-      })
+  addEvents() {
+    if (this.dom.dataset.modalOpener) {
+      this.addEventIfDomExists(this.dom, 'click', () => this.show())
     }
 
-    this.addEvent(this.modal, 'click', event => {
+    this.addEventIfDomExists(this.closeBtn, 'click', () => {
+      this.hide()
+      this.options.cancel('close')
+    })
+
+    this.addEventIfDomExists(this.cancelBtn, 'click', () => {
+      this.hide()
+      this.options.cancel('cancel')
+    })
+
+    this.addEventIfDomExists(this.modal, 'click', event => {
       // is backdrop
       if (event.target.dataset.modal === this.modalId) {
         this.hide()
@@ -68,15 +115,13 @@ export default class Modal {
       }
     })
 
-    if (this.confirmBtn) {
-      this.addEvent(this.confirmBtn, 'click', () => {
-        if (typeof this.options.confirm === 'function') {
-          this.options.confirm()
-        }
-        else {
-          this.hide()
-        }
-      })
-    }
+    this.addEventIfDomExists(this.confirmBtn, 'click', () => {
+      if (typeof this.options.confirm === 'function') {
+        this.options.confirm()
+      }
+      else {
+        this.hide()
+      }
+    })
   }
 }

data/src/js/jquery/bindModalFn.js

@@ -1,14 +1,65 @@
 export default function bindModalFn(beyond, $) {
 
-  const { Modal } = beyond
-
-  $.fn.modal = function(settings) {
+  $.fn.modal = function(settings, html) {
 
-    const options = $.extend({}, $.fn.modal.defaults, settings)
-    const modals = this.map((i, dom) => new Modal(dom, options))
+    if (typeof settings === 'string') {
+      const method = settings
+      initModals(this, $.fn.modal.defaults)
+      if (method === 'open?') {
+        return this.map((i, dom) => dom._modal.visible())
+      }
+      this.each((i, dom) => dom._modal[method](html))
+    }
+    else {
+      const options = $.extend({}, $.fn.modal.defaults, settings)
+      initModals(this, options)
+    }
 
-    this.destroy = () => modals.each((i, m) => m.destroy())
+    this.destroy = () => this.each((i, dom) => dom._modal && dom._modal.destroy())
 
     return this
   }
+
+  $.uniqModal = getUniqModalSelector
+}
+
+function initModals(self, options) {
+  const { Modal } = beyond
+  self.each((i, dom) => {
+    if (! dom._modal) {
+      dom._modal = new Modal(dom, options)
+    }
+  })
+}
+
+function getUniqModalSelector() {
+  const id = 'beyond-uniq-modal'
+  const dom = document.getElementById(id)
+  if (dom) {
+    return $(`#${id}`)
+  }
+  const div = document.createElement('div')
+  div.id = id
+  div.className = 'modal'
+  div.innerHTML = `
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">視窗標題</h5>
+          <button type="button" class="btn-close" data-close aria-label="Close">
+            <i class="icon icon-cross"></i>
+          </button>
+        </div>
+        <div class="modal-body bg-content">
+          視窗內文
+        </div>
+        <div class="modal-footer">
+          <button data-cancel class="btn btn-outline">取消</button>
+          <button data-confirm class="btn btn-primary">確認</button>
+        </div>
+      </div>
+    </div>
+  `
+  document.body.appendChild(div)
+  return $(div)
 }

data/src/sass/components/_breadcrumb.scss

@@ -14,4 +14,7 @@
   .breadcrumb-item.active {
     color: #6c757d;
   }
+  .breadcrumb-item a {
+    color: #000;
+  }
 }

data/src/sass/components/_mega-menu.scss

@@ -1,6 +1,16 @@
+$mega-menu-text-color: #0a2540;
+$mega-menu-text-color-ex: #8A8D90;
+
+@mixin mega-menu-text() {
+  transition: .3s color;
+  color: $mega-menu-text-color;
+  &:hover {
+    color: $mega-menu-text-color-ex;
+  }
+}
+
 .mega-menu {
-  padding-top: .2rem;
-  padding-bottom: .2rem;
+  font-size: .9375rem;
 }
 .mega-menu-divider {
   border-bottom: 1px solid #ebebeb;
@@ -8,35 +18,16 @@
 .mega-menu-col {
   padding: .7rem 1.5rem;
   flex-grow: 1;
-  transition: .3s background-color;
   min-width: 180px;
-  color: $text-color;
   display: flex;
   align-items: center;
-  &:hover {
-    color: $text-color-strong;
-    background-color: #f6f6f6;
-  }
-  i {
-    margin-right: .6rem;
-  }
-}
-.mega-menu-label {
-  padding-left: 1.5rem;
-  margin-top: 1rem;
-  margin-bottom: .5rem;
-  color: $text-color-light;
-  font-size: 12px;
+  @include mega-menu-text;
 }
 .mega-menu-item {
   transition: .3s background-color;
-  color: $text-color;
   display: block;
-  padding: .5rem 2.2rem;
-  &:hover {
-    color: $text-color-strong;
-    background-color: #f6f6f6;
-  }
+  padding: .7rem 1.5rem;
+  @include mega-menu-text;
 }
 .mega-menu-icon-box {
   display: table;
@@ -49,14 +40,17 @@
   cursor: pointer;
   transition: .3s all;
   display: table-cell;
-  padding: 1rem 1.8rem;
-  color: $color-primary;
+  padding: 1rem 1.5rem;
   text-align: center;
+  @include mega-menu-text;
   &:hover {
-    color: $text-color-strong;
-    background-color: #f6f6f6;
+    i {
+      color: $mega-menu-text-color;
+    }
   }
   i {
+    transition: .3s color;
+    color: #88add2;
     display: block;
     margin-bottom: .4rem;
   }

data/src/sass/components/_nav.scss

@@ -43,6 +43,7 @@
       margin-right: .8rem;
     }
   }
+  .nav-item:active,
   .nav-item.active {
     color: $color-primary;
   }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: beyond-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.188
+  version: 0.0.189
 platform: ruby
 authors:
 - kmsheng
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-08-31 00:00:00.000000000 Z
+date: 2020-09-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sassc
@@ -18,6 +18,9 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 2.0.0
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -25,46 +28,55 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 2.0.0
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '9.7'
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.2.1
+        version: 9.7.6
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '9.7'
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.2.1
+        version: 9.7.6
 - !ruby/object:Gem::Dependency
   name: actionpack
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '5.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '5.0'
 - !ruby/object:Gem::Dependency
   name: activemodel
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '5.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '5.0'
 description: