rails_design 0.0.1

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

@@ -0,0 +1,189 @@
+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-y#move:passive"
+  move(event) {
+    const 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_y = Math.abs(offset.y)
+    let isScrolling = pad_y > Math.abs(offset.x) ? 1 : 0  // 1 上下滚动，0 左右滑动
+    if (isScrolling === 0) {
+      return
+    }
+
+    if (offset.y < 0) {  // offset.y < 0 表示向上滑动
+      let next = ele.nextElementSibling
+      if (next) {
+        this.slidingToTop(ele, next, pad_y)
+      }
+    } else if (offset.y > 0) {  // offset.y > 0 表示向下滑动
+      let prev = ele.previousElementSibling
+      if (prev) {
+        this.slidingToBottom(ele, prev, pad_y)
+      }
+    }
+  }
+
+  // data-action="touchend->slide-y#end:passive"
+  end(event) {
+    if (this.zoomed(event)) {
+      return
+    }
+    let ele = event.currentTarget
+
+    let offset = this.offset(event)
+    let pad_y = Math.abs(offset.y)
+    let isScrolling = pad_y > Math.abs(offset.x) ? 1 : 0  // 1 上下滑动，0 左右滑动
+    if (isScrolling === 0) {
+      console.debug('not scrolling')
+      this.rollback(offset, ele)
+    }
+
+    if (this.effective(pad_y, false)) {
+      this.going(offset, ele)
+    } else {
+      this.rollback(offset, ele)
+    }
+  }
+
+  // 执行翻页
+  going(offset, ele) {
+    const next = ele.nextElementSibling
+    const prev = ele.previousElementSibling
+
+    if (offset.y < 0 && next) {
+      this.closeToTop(next)
+      next.style.zIndex = 0
+      this.toCurrent(next)
+
+      this.awayFromBottom(ele)
+      ele.style.zIndex = -1
+      this.beenCurrent(ele)
+    }
+
+    if (offset.y > 0 && prev) {
+      this.closeToBottom(prev)
+      prev.style.zIndex = 0
+      this.toCurrent(prev)
+
+      this.awayFromTop(ele)
+      ele.style.zIndex = -1
+      this.beenCurrent(ele)
+    }
+  }
+
+  // 回退到之前的状态
+  rollback(offset, ele) {
+    const next = ele.nextElementSibling
+    const prev = ele.previousElementSibling
+
+    if (offset.y < 0 && next) {
+      this.closeToBottom(ele)
+      this.toCurrent(ele)
+
+      this.awayFromTop(next)
+      this.beenCurrent(next)
+    }
+
+    if (offset.y > 0 && prev) {
+      this.closeToTop(ele)
+      this.toCurrent(ele)
+
+      this.awayFromBottom(prev)
+      this.beenCurrent(prev)
+    }
+  }
+
+  // 上滑
+  slidingToTop(ele, next, pad) {
+    ele.style.bottom = pad + 'px'
+    next.style.zIndex = -1
+    next.style.top = (this.element.clientHeight - pad) + 'px'
+  }
+
+  // 下滑
+  slidingToBottom(ele, prev, pad) {
+    ele.style.top = pad + 'px'
+    prev.style.zIndex = -1
+    prev.style.bottom = (this.element.clientHeight - pad) + 'px'
+  }
+
+  // xx
+  resetIndex(event) {
+    ['top', 'bottom', '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 })
+  }
+
+  // 接近上侧
+  closeToTop(ele) {
+    ele.style.top = 0
+    ele.style.transitionProperty = 'top'
+    ele.style.transitionDuration = this.duration
+  }
+
+  // 接近下侧
+  closeToBottom(ele) {
+    ele.style.bottom = 0
+    ele.style.transitionProperty = 'bottom'
+    ele.style.transitionDuration = this.duration
+  }
+
+  // 远离下侧
+  awayFromBottom(ele) {
+    ele.style.bottom = this.element.clientHeight + 'px'
+    ele.style.transitionProperty = 'bottom'
+    ele.style.transitionDuration = this.duration
+  }
+
+  // 远离上侧
+  awayFromTop(ele) {
+    ele.style.top = this.element.clientHeight + 'px'
+    ele.style.transitionProperty = 'top'
+    ele.style.transitionDuration = this.duration
+  }
+
+  clearStyle(ele) {
+    ['top', 'bottom', 'transition-property', 'transition-duration'].forEach(rule => {
+      ele.style.removeProperty(rule)
+    })
+  }
+
+}

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

@@ -0,0 +1,41 @@
+import { Controller } from '@hotwired/stimulus'
+import Sortable from 'sortablejs'
+
+export default class extends Controller {
+
+  reload(element, controller) {
+    Sortable.create(element, {
+      handle: '.is-drawable',
+      onEnd: function(evt) {
+        if (evt.oldIndex === evt.newIndex) {
+          return
+        }
+        let url = [element.dataset['src'], evt.item.dataset['id'], 'reorder'].join('/')
+        let body = {
+          sort_array: this.toArray(),
+          old_index: evt.oldIndex,
+          new_index: evt.newIndex
+        }
+
+        fetch(url, {
+          method: 'PATCH',
+          headers: {
+            Accept: 'text/vnd.turbo-stream.html',
+            'Content-Type': 'application/json',
+            'X-CSRF-Token': controller.csrfToken()
+          },
+          body: JSON.stringify(body)
+        }).then(response => {
+          return response.text()
+        }).then(body => {
+          Turbo.renderStreamMessage(body)
+        })
+      }
+    })
+  }
+
+  connect() {
+    this.reload(this.element, this)
+  }
+
+}

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

@@ -0,0 +1,11 @@
+import stickybits from 'stickybits'
+import { Controller } from '@hotwired/stimulus'
+
+// data-controller="menu"
+export default class extends Controller {
+
+  connect() {
+    stickybits(this.element)
+  }
+
+}

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

@@ -0,0 +1,78 @@
+import TouchController from './touch'
+
+export default class extends TouchController {
+  static targets = ['open']
+
+  // data-action="touchstart->swipe#start:passive"
+  start(event) {
+    let touch = event.targetTouches[0]
+    this.startPos = {
+      x: touch.pageX,
+      y: touch.pageY
+    }
+    this.startTime = new Date().getTime() // 毫秒，千分之一秒
+    this.barWidth = this.element.clientWidth
+    this.swiperWidth = this.openTarget.clientWidth
+  }
+
+  // data-action="touchmove->swipe#move touchstart->swipe#move"
+  move(event) {
+    if (this.zoomed(event)) {
+      return
+    }
+    let offset = this.offset(event.targetTouches[0])
+    let pad = Math.abs(offset.x)
+    let isScrolling = pad < Math.abs(offset.y) ? 1 : 0 // 1 上下滚动，0 左右滑动
+    if (isScrolling !== 0) {
+      return
+    }
+
+    if (isScrolling === 0 && offset.x < 0) {
+      this.openTarget.style.width = `${this.swiperWidth + pad}px`
+      let styles = {
+        width: `${this.barWidth - this.swiperWidth + this.openTarget.clientWidth}px`,
+        left: `-${this.openTarget.clientWidth}px`
+      }
+      Object.assign(this.element.style, styles)
+    } else if (isScrolling === 0 && offset.x > 0) {
+      let x = pad < this.swiperWidth ? this.swiperWidth - pad : 0
+      this.openTarget.style.width = `${x}px`
+      let styles = {
+        width: `${this.barWidth - (pad < this.swiperWidth ? pad : this.swiperWidth)}px`,
+        left: `-${x}px`
+      }
+      Object.assign(this.element.style, styles)
+    }
+  }
+
+  end(event) {
+    // let styles = {
+    //   width: '150px',
+    //   'transition-property': 'width'
+    // }
+    this.openTarget.style.width = `${this.openTarget.clientWidth}px`
+    // Object.assign(this.element.style, styles)
+  }
+
+  get leftPos() {
+    let left = this.element.style.left.replace(/px$/, '')
+    return parseFloat(left)
+  }
+
+  get barWidth() {
+    return parseFloat(this.data.get('barWidth'))
+  }
+
+  set barWidth(value) {
+    this.data.set('barWidth', value)
+  }
+
+  get swiperWidth() {
+    return parseFloat(this.data.get('swiperWidth'))
+  }
+
+  set swiperWidth(value) {
+    this.data.set('swiperWidth', value)
+  }
+
+}

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

@@ -0,0 +1,45 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static values = {
+    url: String,
+    title: String,
+    params: Object
+  }
+
+  // change
+  choose(event) {
+    let ele = event.currentTarget
+    if (ele.value === '' || ele.value === null) {
+      this.clear(this.element)
+    } else {
+      let search_url = new URL(this.urlValue, location.origin)
+      search_url.searchParams.set('node_id', ele.value)
+      search_url.searchParams.set('html_id', this.element.id)
+      Object.keys(this.paramsValue).forEach(k => {
+        search_url.searchParams.set(k, this.paramsValue[k])
+      })
+
+      fetch(search_url, {
+        method: 'GET',
+        headers: {
+          Accept: 'text/vnd.turbo-stream.html'
+        }
+      }).then(response => {
+        return response.text()
+      }).then(body => {
+        this.clear(this.element)
+        Turbo.renderStreamMessage(body)
+      })
+    }
+  }
+
+  clear(node) {
+    let el = node.nextElementSibling
+    while (el && el.dataset['taxonTitleValue'] === this.titleValue) {
+      el.remove()
+      el = node.nextElementSibling
+    }
+  }
+
+}

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

@@ -0,0 +1,19 @@
+import { Controller } from '@hotwired/stimulus'
+import moment from 'moment'
+
+// data-controller="time"
+export default class extends Controller {
+
+  connect() {
+    this.parse()
+  }
+
+  parse() {
+    if (this.element.textContent.length > 0) {
+      let format = this.element.dataset['format'] || 'YYYY-MM-DD HH:mm'
+      this.element.textContent = moment.utc(this.element.textContent).local().format(format)
+      this.element.dataset['localized'] = 'true'
+    }
+  }
+
+}

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

@@ -0,0 +1,83 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class TouchController extends Controller {
+  static values = {
+    debug: Boolean
+  }
+
+  // data-action="touchstart->slide#start:passive"
+  start(event) {
+    const touch = event.targetTouches[0]
+    this.startPos = {
+      x: touch.pageX,
+      y: touch.pageY
+    }
+    this.startTime = new Date().getTime() // 毫秒，千分之一秒
+  }
+
+  // scale && scale !== 表示缩放了
+  zoomed(event) {
+    return event.changedTouches.length > 1 || (event.scale && event.scale !== 1)
+  }
+
+  // 是否达到触发条件
+  effective(pad, x = true) {
+    const endTime = new Date().getTime()
+    let isMore
+    // 滑动距离是否超过元素宽度一半
+    if (x) {
+      isMore = pad > this.element.clientWidth / 2
+    } else {
+      isMore = pad > this.element.clientHeight / 2
+    }
+    console.debug('是否超过一半：', isMore)
+
+    const speed = pad / (endTime - this.startTime) // 手势速度
+    const isFast = speed > 0.1
+    console.debug('手势速度：', isFast) // 大于 0.1
+
+    return isMore || isFast
+  }
+
+  offset(event) {
+    const touch = event.changedTouches[0]
+    const offset = {
+      x: touch.pageX - this.startPos.x,
+      y: touch.pageY - this.startPos.y
+    }
+    if (this.hasDebugValue && this.debugValue) {
+      console.debug(event.type, 'offset:', offset)
+    }
+
+    return offset
+  }
+
+  get startPos() {
+    let r = this.data.get('startPos').split(',')
+    return {
+      x: parseFloat(r[0]),
+      y: parseFloat(r[1])
+    }
+  }
+
+  set startPos(pos) {
+    this.data.set('startPos', [pos.x, pos.y].join(','))
+  }
+
+  get startTime() {
+    return this.data.get('startTime')
+  }
+
+  set startTime(time) {
+    this.data.set('startTime', time)
+  }
+
+  get duration() {
+    let duration = this.data.get('duration')
+    if (!duration) {
+      duration = '1s'
+    }
+    return duration
+  }
+
+}