rails_design 0.0.1

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

@@ -0,0 +1,34 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['item']
+
+  collapse(event) {
+    const ele = event.currentTarget
+    const par = this.itemTarget
+
+    let el = par.nextElementSibling
+    while (el && el.dataset['depth'] !== par.dataset['depth'] && par.dataset['depth'].endsWith(el.dataset['depth'])) {
+      el.style.display = 'none'
+      el = el.nextElementSibling
+    }
+
+    ele.classList.replace('fa-caret-down', 'fa-caret-right')
+    ele.dataset['action'] = 'click->tree#expand'
+  }
+
+  expand(event) {
+    const ele = event.currentTarget
+    const par = this.itemTarget
+
+    let el = par.nextElementSibling
+    while (el && el.dataset['depth'] !== par.dataset['depth'] && par.dataset['depth'].endsWith(el.dataset['depth'])) {
+      el.style.display = 'table-row'
+      el = el.nextElementSibling
+    }
+
+    ele.classList.replace('fa-caret-right', 'fa-caret-down')
+    ele.dataset['action'] = 'click->tree#collapse'
+  }
+
+}

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

@@ -0,0 +1,64 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['item', 'checkbox']
+  static values = {
+    hide: Boolean
+  }
+
+  connect() {
+    if (this.hideValue) {
+      this.collapseDirect()
+    }
+  }
+
+  collapseDirect() {
+    let el = this.element.nextElementSibling
+    while (el && el.id.startsWith(this.element.id)) {
+      let to_remove = el
+      el = el.nextElementSibling
+      to_remove.remove()
+    }
+  }
+
+  collapseCheckbox() {
+    this.checkboxTargets.forEach(el=> {
+      if (el.elements['expand']) {
+        el.elements['expand'].value = null
+      }
+    })
+  }
+
+  collapse(event) {
+    const ele = event.currentTarget
+    const par = this.itemTarget
+    ele.parentNode.addEventListener('click', this.disableLink)
+
+    let el = par.nextElementSibling
+    while (el && el.id.startsWith(par.id)) {
+      let to_remove = el
+      el = el.nextElementSibling
+      to_remove.remove()
+    }
+
+    this.collapseCheckbox()
+    ele.classList.replace('fa-caret-down', 'fa-caret-right')
+    ele.dataset['action'] = 'click->tree-remote#expand'
+  }
+
+  expand(event) {
+    const ele = event.currentTarget
+    ele.parentNode.removeEventListener('click', this.disableLink)
+
+    ele.classList.replace('fa-caret-right', 'fa-caret-down')
+    ele.dataset['action'] = 'click->tree-remote#collapse'
+  }
+
+  disableLink(event) {
+    event.stopPropagation()
+    event.preventDefault()
+
+    return false
+  }
+
+}

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

@@ -0,0 +1,41 @@
+import { Controller } from '@hotwired/stimulus'
+
+// data-controller="typer"
+export default class extends Controller {
+  static targets = ['input', 'value']
+
+  connect() {
+    this.initInput()
+  }
+
+  initInput() {
+    const ele = this.inputTarget
+    ele.addEventListener('input', this.form)
+    ele.addEventListener('compositionstart', event => {
+      event.target.removeEventListener('input', this.form)
+    })
+    ele.addEventListener('compositionend', event => {
+      event.target.addEventListener('input', this.form)
+      this.form(event)
+    })
+  }
+
+  form(event) {
+    const ele = event.currentTarget
+    if (!ele.value) {
+      return
+    }
+
+    const evt = document.createEvent('Event')
+    evt.initEvent('submit', true, true)
+    ele.form.dispatchEvent(evt)
+  }
+
+  // click->typer#choose
+  choose(event) {
+    const ele = event.currentTarget
+    this.valueTarget.value = ele.dataset['id']
+    this.inputTarget.value = ele.dataset['name']
+  }
+
+}

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

@@ -0,0 +1,61 @@
+import { Controller } from '@hotwired/stimulus'
+
+// data-controller="visit"
+export default class extends Controller {
+  static values = {
+    url: String,
+    frame: String,
+    reload: Boolean,
+    headers: Object
+  }
+
+  connect() {
+    if (this.hasFrameValue) {
+      this.visit()
+    } else {
+      this.addEvent(this.headersValue)
+      this.topVisit()
+    }
+
+    if (this.hasReloadValue && this.reloadValue) {
+      this.replaceAction()
+    }
+
+    document.documentElement.classList.remove('is-clipped')
+    this.element.remove()
+  }
+
+  addEvent(headers) {
+    document.addEventListener('turbo:before-fetch-request', event => {
+      let xhr = event.detail.fetchOptions
+      Object.assign(xhr.headers, headers)
+    }, { once: true })
+  }
+
+  topVisit() {
+    if (this.hasUrlValue) {
+      Turbo.visit(this.urlValue, { action: 'replace' })
+    } else {
+      Turbo.visit(location.href, { action: 'replace' })
+    }
+  }
+
+  visit() {
+    this.modal.visit(this.urlValue)
+  }
+
+  replaceAction() {
+    this.modalWrapper.querySelectorAll('[data-action$="modal#close"]').forEach(ele => {
+      ele.dataset.replace('action', 'modal#close', 'modal#reloadClose')
+    })
+  }
+
+  get modal() {
+    return document.getElementById(this.frameValue).delegate
+  }
+
+  get modalWrapper() {
+    return document.getElementById('modal_wrapper')
+  }
+
+}

data/app/assets/javascripts/stimulus_phone/index.js

@@ -0,0 +1,19 @@
+import { application } from '../rails_ui/stimulus'
+// dependent on Weui
+import QqMapController from './qq_map'
+import SearchController from './search'
+import WechatController from './wechat'
+import WeuiActionsheetController from './weui-actionsheet'
+import WeuiDatepickerController from './weui-datepicker'
+import WeuiDialogController from './weui-dialog'
+import WeuiPickerController from './weui-picker'
+import WxpayController from './wxpay'
+
+application.register('qq-map', QqMapController)
+application.register('search', SearchController)
+application.register('wechat', WechatController)
+application.register('weui-actionsheet', WeuiActionsheetController)
+application.register('weui-dialog', WeuiDialogController)
+application.register('weui-datepicker', WeuiDatepickerController)
+application.register('weui-picker', WeuiPickerController)
+application.register('wxpay', WxpayController)

data/app/assets/javascripts/stimulus_phone/qq_map.js

@@ -0,0 +1,29 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static values = {
+    name: String,
+    index: Number
+  }
+  static targets = ['load']
+
+  connect() {
+    console.debug('connected:', this.identifier)
+  }
+
+  selected(event) {
+    let loc = event.data
+    if (loc && loc.module === 'locationPicker') {
+      document.getElementById(`${this.nameValue}_${this.indexValue}_lat`).value = loc.latlng.lat
+      document.getElementById(`${this.nameValue}_${this.indexValue}_lng`).value = loc.latlng.lng
+      document.getElementById(`${this.nameValue}_${this.indexValue}_poiname`).value = loc.poiname
+      document.getElementById(`${this.nameValue}_${this.indexValue}_poiaddress`).value = loc.poiaddress
+      document.getElementById(`${this.nameValue}_${this.indexValue}_cityname`).value = loc.cityname
+
+      document.getElementById(`${this.indexValue}_name`).innerText = loc.poiname
+
+      this.element.remove()
+    }
+  }
+
+}

data/app/assets/javascripts/stimulus_phone/search.js

@@ -0,0 +1,37 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['input', 'label']
+
+  connect() {
+    console.debug('connected:', this.identifier)
+    if (this.hasInputTarget && this.inputTarget.value.length > 0) {
+      this.focus()
+    }
+  }
+
+  focus() {
+    this.element.classList.add('weui-search-bar_focusing')
+    this.inputTarget.focus()
+  }
+
+  doSearch(element) {
+    let ele = element.currentTarget
+    if (ele.value.length) {
+
+    }
+  }
+
+  clear() {
+    Turbo.visit(location.pathname, { action: 'replace' })
+    this.inputTarget.value = ''
+    this.inputTarget.focus()
+  }
+
+  cancel() {
+    Turbo.visit(location.pathname, { action: 'replace' })
+    this.element.classList.remove('weui-search-bar_focusing')
+    this.inputTarget.blur()
+  }
+
+}

data/app/assets/javascripts/stimulus_phone/wechat.js

@@ -0,0 +1,80 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['preview', 'media']
+
+  connect() {
+    console.debug('connected:', this.identifier)
+  }
+
+  close() {
+    wx.closeWindow()
+  }
+
+  openAddress() {
+    wx.ready(() => {
+      wx.openAddress({
+        success: (res) => {
+          document.getElementById('address_contact').value = res.userName
+          document.getElementById('address_tel').value = res.telNumber
+          document.getElementById('address_detail').value = res.detailInfo
+          document.getElementById('address_post_code').value = res.postalCode
+          document.getElementById('province_name').value = res.provinceName
+          document.getElementById('city_name').value = res.cityName
+          document.getElementById('country_name').value = res.countryName
+
+          let dialog = document.getElementById('dialog')
+          application.getControllerForElementAndIdentifier(dialog, 'weui-dialog').show()
+        }
+      })
+    })
+  }
+
+  location() {
+    wx.ready(() => {
+      wx.getLocation({
+        type: 'gcj02',
+        success: (res) => {
+          wx.openLocation({
+            latitude: res.latitude,
+            longitude: res.longitude,
+            name: '点击右侧打开导航软件',
+            address: '点击测试',
+            scale: 15
+          })
+        },
+        fail: function(res) {
+          alert(res)
+        }
+      })
+    })
+  }
+
+  chooseImage() {
+    wx.ready(() => {
+      wx.chooseImage({
+        count: 1,
+        success: (res) => {
+          let localId = res.localIds[0]
+          this.previewTarget.src = localId
+          wx.uploadImage({
+            localId: localId,
+            success: (res) => {
+              this.mediaTarget.value = res.serverId
+              this.submit(this.mediaTarget.form)
+            }
+          })
+        }
+      })
+    })
+  }
+
+  scan() {
+    wx.scanQRCode({
+      success: function (res) {
+        var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
+      }
+    })
+  }
+
+}

data/app/assets/javascripts/stimulus_phone/weui-actionsheet.js

@@ -0,0 +1,43 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['mask', 'sheet']
+  static values = {
+    id: String
+  }
+
+  connect() {
+    console.debug('connected:', this.identifier)
+  }
+
+  close() {
+    let ele = this.maskTarget
+    ele.style.display = 'none'
+    ele.style.opacity = 0
+    ele.style.transition = 'opacity 2s'
+    this.sheetTarget.classList.remove('weui-actionsheet_toggle')
+  }
+
+  show() {
+    let ele = this.maskTarget
+    ele.style.display = 'block'
+    ele.style.opacity = 1
+    ele.style.transition = 'opacity 2s'
+    this.sheetTarget.classList.add('weui-actionsheet_toggle')
+  }
+
+  toggle() {
+    let x = this.target
+    if (x.sheetTarget.classList.contains('weui-actionsheet_toggle')) {
+      x.close()
+    } else {
+      x.show()
+    }
+  }
+
+  get target() {
+    let ele = document.getElementById(this.idValue)
+    return application.getControllerForElementAndIdentifier(ele, 'weui-actionsheet')
+  }
+
+}

data/app/assets/javascripts/stimulus_phone/weui-datepicker.js

@@ -0,0 +1,38 @@
+import { Controller } from '@hotwired/stimulus'
+import weui from 'weui.js'
+
+export default class extends Controller {
+
+  connect() {
+    console.debug('connected:', this.identifier)
+  }
+
+  // focus->weui#getFocus
+  getFocus() {
+    document.activeElement.blur()
+  }
+
+  // click->weui#select
+  select(e) {
+    let d = new Date()
+    let da = [d.getFullYear(), d.getMonth() + 1, d.getDate()]
+    weui.datePicker({
+      start: da.join('-'),
+      end: '2020-02-31',
+      cron: '* * *',
+      defaultValue: da,
+      onChange: function onChange(result) {
+        console.log(da)
+        console.log(result)
+        console.log(e.currentTarget)
+        console.log(e.target)
+      },
+      onConfirm: function onConfirm(result) {
+        e.target.value = result.join('-')
+      },
+      id: 'datePicker',
+      title: '日期选择器'
+    })
+  }
+
+}