rails_design 0.0.1

data/app/assets/javascripts/stimulus_com/menu.js

@@ -0,0 +1,34 @@
+import { Controller } from '@hotwired/stimulus'
+
+// data-controller="menu"
+export default class extends Controller {
+
+  static values = {
+    openClass: String,
+    closeClass: String,
+  }
+
+  toggle() {
+    this.element.classList.toggle('is-active')
+  }
+
+  expand(event) {
+    let expander = event.currentTarget
+    if (expander.nextElementSibling !== null) {
+      expander.nextElementSibling.classList.toggle('is-hidden')
+    }
+    if (expander.lastElementChild !== null) {
+      expander.lastElementChild.classList.toggle(this.closeClass)
+      expander.lastElementChild.classList.toggle(this.openClass)
+    }
+  }
+
+  get closeClass() {
+    return this.openClassValue || 'fa-angle-left'
+  }
+
+  get openClass() {
+    return this.closeClassValue || 'fa-angle-down'
+  }
+
+}

data/app/assets/javascripts/stimulus_com/modal.js

@@ -0,0 +1,85 @@
+import { Controller } from '@hotwired/stimulus'
+
+// data-controller="modal"
+export default class extends Controller {
+  static values = {
+    urls: Array,
+    redirect: String
+  }
+
+  connect() {
+    console.debug('modal refer:', document.referrer)
+    this.observer = new MutationObserver(this.loaded)
+    this.observer.observe(this.modal, { childList: true })
+  }
+
+  close() {
+    this.removeClass()
+    this.urlsValue = this.urlsValue.slice(0, this.urlsValue.length - 1)
+    let url = this.urlsValue.pop()
+    if (url) {
+      this.urlsValue = this.urlsValue.slice(0, this.urlsValue.length - 1)
+      this.modal.src = url
+    } else {
+      this.modal.removeAttribute('src')
+    }
+  }
+
+  reloadClose() {
+    this.removeClass()
+    Turbo.visit(location.href, { action: 'replace' })
+  }
+
+  disconnect() {
+    console.debug('disconnected:', this.identifier)
+    this.observer.disconnect()
+    delete this.observer
+  }
+
+  // NOTICE: here this becomes observer
+  loaded(list, observer) {
+    let item = list[0]
+    let ele = item.target.parentNode.parentNode
+    let con = application.getControllerForElementAndIdentifier(ele, 'modal')
+    switch(item.type) {
+      case 'childList':
+        if (typeof item.target.src === 'undefined' || item.target.src === null) {
+          break
+        }
+        ele.classList.add('is-active')
+        document.documentElement.classList.add('is-clipped')
+        if (con.urlsValue.length > 0 && !con.hasRedirectValue) {
+          con.redirectValue = item.target.src
+          con.addEvent()
+        }
+        con.urlsValue = con.urlsValue.concat(item.target.src)
+    }
+  }
+
+  addEvent() {
+    document.addEventListener('turbo:before-fetch-request', this.addHeader)
+  }
+
+  removeEvent() {
+    document.removeEventListener('turbo:before-fetch-request', this.addHeader)
+  }
+
+  // NOTICE: here this become document
+  addHeader(event) {
+    let xhr = event.detail.fetchOptions
+    let ele = document.getElementById('modal').parentNode.parentNode
+    let con = application.getControllerForElementAndIdentifier(ele, 'modal')
+    console.debug('add redirect headers')
+    xhr.headers['Redirect'] = con.redirectValue
+  }
+
+  removeClass() {
+    this.element.classList.remove('is-active')
+    document.documentElement.classList.remove('is-clipped')
+  }
+
+  get modal() {
+    return document.getElementById('modal')
+  }
+
+}

data/app/assets/javascripts/stimulus_com/modal_show.js

@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus'
+
+// data-controller="modal_show"
+export default class extends Controller {
+
+  connect() {
+    this.modal.classList.add('is-active')
+    document.documentElement.classList.add('is-clipped')
+    this.element.remove()
+  }
+
+  get modal() {
+    return document.getElementById('modal').parentNode.parentNode
+  }
+
+}

data/app/assets/javascripts/stimulus_com/navbar.js

@@ -0,0 +1,11 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['menu']
+
+  toggle(element) {
+    element.currentTarget.classList.toggle('is-active')
+    this.menuTarget.classList.toggle('is-active')
+  }
+
+}

data/app/assets/javascripts/stimulus_com/notice.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+
+// data-controller="notice"
+export default class extends Controller {
+
+  close() {
+    this.element.remove()
+  }
+
+}

data/app/assets/javascripts/stimulus_com/picture.js

@@ -0,0 +1,85 @@
+import { DirectUploadController } from '@rails/activestorage/src/direct_upload_controller'
+import { Controller } from '@hotwired/stimulus'
+
+// <input type="file" data-controller="picture">
+export default class extends Controller {
+  static targets = ['src', 'filename', 'preview', 'uploadDiv']
+
+  /*
+  * <input type="file" data-action="picture#upload">
+  **/
+  upload(event) {
+    let input = event.currentTarget
+    let button = input.form.querySelector('input[type=submit], button[type=submit]')
+    input.disabled = true
+    button.disabled = true
+    Array.from(input.files).forEach(file => {
+      this.filenameTarget.innerText = file.name
+      // todo file is image
+      this.previewFile(file)
+      let controller = new DirectUploadController(input, file)
+      if (controller) {
+        controller.start(error => {
+          if (error) {
+            input.disabled = false
+            callback(error)
+            this.dispatch('end')
+          }
+          button.disabled = false
+        })
+      }
+    })
+  }
+
+  dropFile(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    for (var i = 0; i < event.dataTransfer.files.length; i++) {
+      var file = e.dataTransfer.files[i]
+      console.debug('drop文件', file.name)
+    }
+  }
+
+  pasteFile(event) {
+    var result = false,
+      clipboardData = event.clipboardData,
+      items
+
+    if (typeof clipboardData === 'object') {
+      items = clipboardData.items || clipboardData.files || []
+
+      for (var i = 0; i < items.length; i++) {
+        var item = items[i]
+        console.debug('粘贴', item)
+      }
+    }
+
+    if (result) { event.preventDefault() }
+  }
+
+  previewFile(file) {
+    let template = this.previewTarget
+    let cloned = template.cloneNode(true)
+    cloned.style.display = 'block'
+
+    let img = cloned.querySelector('img')
+    img.src = window.URL.createObjectURL(file) //创建一个object URL，并不是你的本地路径
+    img.onload = function(e) {
+      console.debug(e)
+      window.URL.revokeObjectURL(img.src) //图片加载后，释放object URL
+    }
+
+    template.after(cloned)
+  }
+
+  removePreview(event) {
+    let wrap = event.currentTarget.parentNode.parentNode
+    wrap.style.display = 'none'
+    wrap.querySelector('input').remove()
+    let up = this.uploadDivTarget
+    let input = up.querySelector('input[type=file]')
+    up.style.display = 'block'
+    input.disabled = false
+  }
+
+}

data/app/assets/javascripts/stimulus_com/show.js

@@ -0,0 +1,26 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['src', 'item']
+
+  initEvent() {
+    let ele = this.element
+    ele.addEventListener('mouseenter', this.showItem)
+    ele.addEventListener('mouseleave', this.hideItem)
+  }
+
+  show() {
+    //console.log(this)
+    this.itemTargets.forEach(el => {
+      el.style.visibility = 'visible'
+    })
+  }
+
+  hide(event) {
+    //console.log(event.target)
+    this.itemTargets.forEach(el => {
+      el.style.visibility = 'hidden'
+    })
+  }
+
+}

data/app/assets/javascripts/stimulus_com/showcase.js

@@ -0,0 +1,34 @@
+import { Controller } from '@hotwired/stimulus'
+
+// 商品橱窗展示，
+// 点击小图显示对应图片
+// 点击切换箭头，显示上一张或者下一张图片
+export default class extends Controller {
+  static targets = [
+    'window'
+  ]
+  static classes = [
+    'hover'
+  ]
+
+  // data-action="mouseover->showcase#show"
+  show(event) {
+    let ele = event.currentTarget
+    ele.classList.add(this.hoverClass)
+    for (const el of ele.parentElement.children) {
+      if (el !== ele) {
+        el.classList.remove(this.hoverClass)
+      }
+    }
+
+    let target = this.windowTarget.querySelector(`[data-index="${ele.dataset.index}"`)
+    target.style.zIndex = 1
+
+    for (const el of this.windowTarget.children) {
+      if (el.dataset.index !== ele.dataset.index) {
+        el.style.zIndex = 0
+      }
+    }
+  }
+
+}

data/app/assets/javascripts/stimulus_com/slide.js

@@ -0,0 +1,188 @@
+import TouchController from './touch'
+
+// z-index: 0, 当前显示的图片；
+// z-index: -1, 即将显示的图片，touch move 时动态设定；
+// z-index: -2, 未显示的图片；
+export default class extends TouchController {
+
+  connect() {
+    this.element.addEventListener('touchstart', (event) => {
+      this.start(event)
+    }, { passive: true })
+  }
+
+  // data-action="touchmove->slide#move:passive"
+  move(event) {
+    let ele = event.currentTarget
+    console.debug('touch moved by:', ele.dataset.index)
+    if (this.zoomed(event)) {
+      console.error('scale')
+      return
+    }
+    let offset = this.offset(event)
+    let pad = Math.abs(offset.x)
+    let isScrolling = pad > Math.abs(offset.y) ? 1 : 0  // 1 左右滑动，0 上下滑动
+    if (isScrolling === 0) {
+      return
+    }
+
+    if (offset.x < 0) {  // offset.x < 0 表示向左滑动
+      const next = ele.nextElementSibling
+      if (next) {
+        this.slidingToLeft(ele, next, pad)
+      }
+    } else if (offset.x > 0) {  // offset.x > 0 表示向右滑动
+      const prev = ele.previousElementSibling
+      if (prev) {
+        this.slidingToRight(ele, prev, pad)
+      }
+    }
+  }
+
+  // data-action="touchend->slide#end:passive"
+  end(event) {
+    if (this.zoomed(event)) {
+      return
+    }
+    let ele = event.currentTarget
+    let offset = this.offset(event)
+    let pad = Math.abs(offset.x)
+    let isScrolling = pad > Math.abs(offset.y) ? 1 : 0  // 1 左右滑动，0 上下滑动
+    if (isScrolling === 0) {
+      console.debug('not scrolling')
+      this.rollback(offset, ele)
+    }
+
+    if (this.effective(pad)) {
+      this.going(offset, ele)
+    } else {
+      this.rollback(offset, ele)
+    }
+  }
+
+  // 执行翻页
+  going(offset, ele) {
+    const next = ele.nextElementSibling
+    const prev = ele.previousElementSibling
+
+    if (offset.x < 0 && next) {
+      this.closeToLeft(next)
+      next.style.zIndex = 0
+      this.toCurrent(next)
+
+      this.awayFromRight(ele)
+      ele.style.zIndex = -1
+      this.beenCurrent(ele)
+    }
+
+    if (offset.x > 0 && prev) {
+      this.closeToRight(prev)
+      prev.style.zIndex = 0
+      this.toCurrent(prev)
+
+      this.awayFromLeft(ele)
+      ele.style.zIndex = -1
+      this.beenCurrent(ele)
+    }
+  }
+
+  // 回退到之前的状态
+  rollback(offset, ele) {
+    const next = ele.nextElementSibling
+    const prev = ele.previousElementSibling
+
+    if (offset.x < 0 && next) {
+      this.closeToRight(ele)
+      this.toCurrent(ele)
+
+      this.awayFromLeft(next)
+      this.beenCurrent(next)
+    }
+
+    if (offset.x > 0 && prev) {
+      this.closeToLeft(ele)
+      this.toCurrent(ele)
+
+      this.awayFromRight(prev)
+      this.beenCurrent(prev)
+    }
+  }
+
+  // 左滑
+  slidingToLeft(ele, next, pad) {
+    ele.style.right = pad + 'px'
+    next.style.zIndex = -1
+    next.style.left = (this.element.clientWidth - pad) + 'px'
+  }
+
+  // 右滑
+  slidingToRight(ele, prev, pad) {
+    ele.style.left = pad + 'px'
+    prev.style.zIndex = -1
+    prev.style.right = (this.element.clientWidth - pad) + 'px'
+  }
+
+  // xx
+  resetIndex(event) {
+    ['left', 'right', 'transition-property', 'transition-duration'].forEach(rule => {
+      event.currentTarget.style.removeProperty(rule)
+    })
+    event.currentTarget.style.zIndex = -2
+  }
+
+  // 不再展示
+  beenCurrent(ele) {
+    console.debug('add transition event listener for been', ele.dataset.index)
+    ele.addEventListener('transitionend', this.resetIndex, { once: true })
+    ele.addEventListener('transitioncancel', (event) => {
+      this.resetIndex(event)
+      ele.removeEventListener('transitionend', this.resetIndex)
+    }, { once: true })
+  }
+
+  // 即将展示
+  toCurrent(ele) {
+    console.debug('add transition event listener for to', ele.dataset.index)
+    ele.addEventListener('transitionend', (event) => {
+      this.clearStyle(event.currentTarget)
+    }, { once: true })
+    ele.addEventListener('transitioncancel', (event) => {
+      this.clearStyle(event.currentTarget)
+    }, { once: true })
+  }
+
+  // 接近左侧
+  closeToLeft(ele) {
+    ele.style.left = 0
+    ele.style.transitionProperty = 'left'
+    ele.style.transitionDuration = this.duration
+  }
+
+  // 接近右侧
+  closeToRight(ele) {
+    ele.style.right = 0
+    ele.style.transitionProperty = 'right'
+    ele.style.transitionDuration = this.duration
+  }
+
+  // 远离右侧
+  awayFromRight(ele) {
+    ele.style.right = this.element.clientWidth + 'px'
+    ele.style.transitionProperty = 'right'
+    ele.style.transitionDuration = this.duration
+  }
+
+  // 远离左侧
+  awayFromLeft(ele) {
+    ele.style.left = this.element.clientWidth + 'px'
+    ele.style.transitionProperty = 'left'
+    ele.style.transitionDuration = this.duration
+  }
+
+  clearStyle(ele) {
+    ['left', 'right', 'transition-property', 'transition-duration'].forEach(rule => {
+      ele.style.removeProperty(rule)
+    })
+  }
+
+}