rails_design 0.0.1

data/app/assets/javascripts/rails_design/cable.js

@@ -0,0 +1,3 @@
+import { createConsumer } from '@rails/actioncable'
+
+export default createConsumer()

data/app/assets/javascripts/rails_design/dataset.js

@@ -0,0 +1,39 @@
+// el.dataset.add('controller', 'xx')
+// el.dataset.add('', 'xx')
+DOMStringMap.prototype.add = function(name, value) {
+  if (typeof this[name] === 'string') {
+    let values = this[name].split(' ')
+    if (!values.includes(value)) {
+      values.push(value)
+    }
+    this[name] = values.join(' ')
+  } else {
+    this[name] = value
+  }
+}
+
+// el.dataset.remove('controller', 'xx')
+DOMStringMap.prototype.remove = function(name, value) {
+  if (typeof this[name] === 'string') {
+    let values = this[name].split(' ')
+    let index = values.indexOf(value)
+    if (index > -1) {
+      values.splice(index, 1)
+    }
+    this[name] = values.join(' ')
+  }
+}
+
+// el.dataset.replace('action', old, 'new')
+DOMStringMap.prototype.replace = function(name, old_value, new_value) {
+  if (typeof this[name] === 'string') {
+    let values = this[name].split(' ')
+    let reg = new RegExp(old_value)
+    values.forEach((ele, index) => {
+      if (reg.test(ele)) {
+        values[index] = String(ele).replace(old_value, new_value)
+      }
+    })
+    this[name] = values.join(' ')
+  }
+}

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

@@ -0,0 +1,4 @@
+import '../stimulus_com'
+import '../default_form'
+import './dataset'
+import './turbo'

data/app/assets/javascripts/rails_design/stimulus.js

@@ -0,0 +1,19 @@
+import { Application, Controller } from '@hotwired/stimulus'
+export const application = Application.start()
+application.debug = true
+window.application = application
+
+Controller.prototype.submit = function(form) {
+  let evt = document.createEvent('Event')
+  evt.initEvent('submit', true, true)
+  form.dispatchEvent(evt)
+}
+
+Controller.prototype.csrfToken = function() {
+  let meta = document.querySelector('meta[name=csrf-token]')
+  return meta && meta.content
+}
+
+HTMLElement.prototype.controller = function(identifier) {
+  return application.getControllerForElementAndIdentifier(this, identifier)
+}

data/app/assets/javascripts/rails_design/turbo.js

@@ -0,0 +1,35 @@
+import * as Turbo from '@hotwired/turbo'
+window.Turbo = Turbo
+
+document.addEventListener('turbo:before-fetch-request', event => {
+  let xhr = event.detail.fetchOptions
+  xhr.headers['Utc-Offset'] = (new Date).getTimezoneOffset()
+  //xhr.headers['X-Csp-Nonce'] = Rails.cspNonce()
+})
+
+document.addEventListener('turbo:before-cache', event => {
+  let modal = document.getElementById('modal')
+  if (modal) {
+    modal.removeAttribute('src')
+  }
+})
+
+// 当 target 为 body 的时候，则不用 getElementById 的逻辑，而是直接使用body
+Object.defineProperties(customElements.get('turbo-stream').prototype, {
+  targetElementsById: {
+    get: function() {
+      let element
+      if (this.target === 'body') {
+        element = this.ownerDocument.body
+      } else if (this.target) {
+        element = this.ownerDocument.getElementById(this.target)
+      }
+
+      if (element !== null) {
+        return [ element ]
+      } else {
+        return []
+      }
+    }
+  }
+})

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

@@ -0,0 +1,77 @@
+import { Controller } from '@hotwired/stimulus'
+
+// data-controller="check"
+export default class extends Controller {
+  static targets = ['added', 'moved']
+
+  applyFor(event) {
+    const link = event.currentTarget
+    const url = new URL(link.href)
+    const added = this.addedIds()
+    const moved = this.movedIds()
+    if (added.length > 0) {
+      url.searchParams.set('add_ids', added)
+    }
+    if (moved.length > 0) {
+      url.searchParams.set('remove_ids', added)
+    }
+
+    link.href = url
+  }
+
+  addedIds() {
+    const ids = []
+    this.addedTargets.forEach(item => {
+      ids.push(item.value)
+    })
+    return ids.join(',')
+  }
+
+  movedIds() {
+    const ids = []
+    this.movedTargets.forEach(item => {
+      ids.push(item.value)
+    })
+    return ids.join(',')
+  }
+
+  // data-action="check#toggle"
+  toggle(event) {
+    this.doToggle(event.currentTarget)
+  }
+
+  // data-action="check#toggleAll"
+  // value: 'xx'
+  toggleAll(event) {
+    const element = event.currentTarget
+    const checkboxes = document.getElementsByName(element.value)
+
+    for (let checkbox of checkboxes) {
+      checkbox.checked = element.checked
+      this.doToggle(checkbox)
+    }
+  }
+
+  toggleAllName(event) {
+    const element = event.currentTarget
+    const checkboxes = document.querySelectorAll(`input[data-name='${element.value}']`)
+
+    for (let checkbox of checkboxes) {
+      checkbox.checked = element.checked
+      this.doToggle(checkbox)
+    }
+  }
+
+  doToggle(checkbox) {
+    const changed = checkbox.checked !== checkbox.defaultChecked
+
+    if (changed && checkbox.checked) {
+      checkbox.dataset.add_target('check.added')
+    } else if (changed && !checkbox.checked) {
+      checkbox.dataset.add_target('check.moved')
+    } else {
+      checkbox.dataset.remove_target('check.added')
+      checkbox.dataset.remove_target('check.moved')
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+import { Controller } from '@hotwired/stimulus'
+import Choices from 'choices.js'
+
+export default class extends Controller {
+
+  reload(element) {
+    new Choices(element, {
+      noChoicesText: '无可选项',
+      itemSelectText: '点击选择',
+      removeItemButton: true
+    })
+  }
+
+  connect() {
+    this.reload(this.element)
+  }
+
+}

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

@@ -0,0 +1,52 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static values = {
+    url: String,
+    params: Object
+  }
+
+  cancel(event) {
+    event.preventDefault()
+    Turbo.visit(location.href, { action: 'replace' })
+  }
+
+  // 用于兼容 rails ujs data-method 的逻辑
+  link(event) {
+    event.preventDefault()
+    const ele = event.currentTarget
+    const method = (ele.dataset.method && ele.dataset.method.toUpperCase()) || 'GET'
+
+    fetch(ele.href, {
+      method: method,
+      headers: {
+        Accept: 'text/vnd.turbo-stream.html'
+      }
+    }).then(response => {
+      return response.text()
+    }).then(body => {
+      Turbo.renderStreamMessage(body)
+    })
+  }
+
+  stream(event) {
+    const ele = event.currentTarget
+    const search_url = new URL(this.urlValue, location.origin)
+    search_url.searchParams.set('node_id', ele.value)
+    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 => {
+      Turbo.renderStreamMessage(body)
+    })
+  }
+
+}

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

@@ -0,0 +1,27 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static values = {
+    time: Number
+  }
+
+  connect() {
+    this.countDown()
+  }
+
+  countDown() {
+    let countdown = this.timeValue || 60
+    this.element.innerText = '重新发送(' + countdown + ')'
+
+    let timer = setInterval(() => {
+      countdown--
+      if (countdown <= 0) {
+        this.element.removeAttribute('disabled')
+        this.element.innerText = '获取验证码'
+        clearInterval(timer)
+      } else {
+        this.element.innerText = '重新发送(' + countdown + ')'
+      }
+    }, 1000, countdown, this.element)
+  }
+}

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

@@ -0,0 +1,26 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static values = {
+    id: String,
+    url: String
+  }
+
+  submit() {
+    let ele = document.getElementById(this.idValue)
+    let data = new FormData(ele)
+
+    fetch(this.urlValue, {
+      method: 'POST',
+      headers: {
+        Accept: 'text/vnd.turbo-stream.html',
+        'X-CSRF-Token': this.csrfToken()
+      },
+      body: data
+    }).then(response => {
+      return response.text()
+    }).then(body => {
+      Turbo.renderStreamMessage(body)
+    })
+  }
+}

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

@@ -0,0 +1,40 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['card']
+  static values = {
+    url: String
+  }
+
+  show(event) {
+    let ele = event.currentTarget
+    if (this.hasCardTarget) {
+      this.cardTarget.classList.remove('is-hidden')
+    } else if (this.urlValue) {
+      Rails.ajax({
+        url: this.urlValue,
+        type: 'GET',
+        dataType: 'text/html',
+        success: function(html) {
+          ele.insertAdjacentHTML('beforebegin', html.body.innerHTML)
+        },
+        error: function(data) {
+          console.debug('error', data)
+        }
+      })
+    }
+  }
+
+  hide() {
+    if (this.hasCardTarget) {
+      this.cardTarget.classList.add('is-hidden')
+    }
+  }
+
+  disconnect() {
+    if (this.hasCardTarget) {
+      this.cardTarget.remove()
+    }
+  }
+
+}

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

@@ -0,0 +1,58 @@
+import { application } from '../rails_ui/stimulus'
+
+import CheckboxController from './checkbox'
+import CommonController from './common'
+import CountDownController from './count_down'
+import FormerController from './former'
+import HoverController from './hover'
+import InputController from './input'
+import MenuController from './menu'
+import NavbarController from './navbar'
+import NoticeController from './notice'
+import PictureController from './picture'
+import ShowController from './show'
+import ShowcaseController from './showcase'  // 点击小图，显示大图
+import SlideController from './slide'
+import SlideYController from './slide_y'
+import StickyController from './sticky'
+import SwipeController from './swipe'
+import TaxonController from './taxon'
+import TimeController from './time'  // 时间格式根据浏览器时区等进行转化
+import TreeController from  './tree'
+import TreeRemoteController from './tree_remote'
+import TyperController from './typer'
+import VisitController from './visit'
+
+import SortableController from './sortable' // dependent on sortable
+import ChoiceController from './choice' // Dependent on Choices.js
+
+// Dependent on Bulma CSS
+import ModalController from './modal'
+import ModalShowController from './modal_show'
+
+application.register('check', CheckboxController)
+application.register('choice', ChoiceController)
+application.register('common', CommonController)
+application.register('count-down', CountDownController)
+application.register('former', FormerController)
+application.register('hover', HoverController)
+application.register('input', InputController)
+application.register('menu', MenuController)
+application.register('modal', ModalController)
+application.register('modal-show', ModalShowController)
+application.register('navbar', NavbarController)
+application.register('notice', NoticeController)
+application.register('picture', PictureController)
+application.register('show', ShowController)
+application.register('showcase', ShowcaseController)
+application.register('slide', SlideController)
+application.register('slide-y', SlideYController)
+application.register('sortable', SortableController)
+application.register('sticky', StickyController)
+application.register('swipe', SwipeController)
+application.register('taxon', TaxonController)
+application.register('time', TimeController)
+application.register('tree', TreeController)
+application.register('tree-remote', TreeRemoteController)
+application.register('typer', TyperController)
+application.register('visit', VisitController)

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

@@ -0,0 +1,36 @@
+import { Controller } from '@hotwired/stimulus'
+
+// data-controller="input"
+export default class extends Controller {
+  static targets = ['checkbox']
+
+  // <label data-action="click->input#check"></label>
+  // label out of check
+  check() {
+    if (this.hasCheckboxTarget) {
+      this.checkboxTarget.checked = !this.checkboxTarget.checked
+      this.submit(this.checkboxTarget.form)
+    }
+  }
+
+  form(event) {
+    const el = event.currentTarget
+
+    if (el.value.length > 0) {
+      this.submit(event.currentTarget.form)
+    }
+  }
+
+  filter(event) {
+    const ele = event.currentTarget
+    if (!ele.value) {
+      return
+    }
+    this.submit(ele.form)
+  }
+
+  remove() {
+    this.element.remove()
+  }
+
+}