Upgrade to Pro — share decks privately, control downloads, hide ads and more …

RiotでSPAなう #meguroes

mizuki_r
August 04, 2016

RiotでSPAなう #meguroes

Meguro.es #5 の発表資料です

mizuki_r

August 04, 2016
Tweet

More Decks by mizuki_r

Other Decks in Technology

Transcript

  1. 魔改造1. コンポーネントのマウント <example> <router-view name="router" route={ state.route } routes={ routes

    } params={ state } /> <script> this.routes = [ { path: '/', component: 'home', param_keys: [ 'pickup_list', 'popular_list' ] }, { path: '/user/:user_id', component: 'user', param_keys: [ 'user' ] } { path: '/user..', component: 'user-list', param_keys: ['user_list'] }, ] </script> </example> ͜Μͳײ͡Ͱ࢖͑ΔΑ͏ʹϥοϓ
  2. 魔改造2. パラメータマッチングの拡張 function secondParser (path, filter) { let keys =

    [] let format = filter .replace(/\*/g, '([^/?#]+?)') .replace(/\.\./, '.*') .replace(/:([^/?#]+)/g, (pattern, key) => { keys.push(key); return '([^/?#]+?)'}) let re = new RegExp('^' + format + '$') let args = path.match(re) if (args) { args = args.slice(1) let params = _.reduce(keys, (prev, key) => { prev[key] = args.shift(); return prev }, {}) args.unshift(params) return args } } riot.route.parser(null, secondParser) ͜͏͍͏ͷΛఆٛͯ͋͛͠Δͱ…
  3. function changeClass (item, action, name) { item.classList[action]('riot-'+name) } function init

    () { this.elements = [] const requestAnimation = function () { for (let i = 0; i<this.elements.length; i++) { let item = this.elements[i] let action = item.getAttribute('animate-show') ? 'show' : 'hide' if (action == 'show') changeClass(item, 'remove', 'hide') changeClass(item, 'add', action == 'show' ? 'hide-leave' : 'hide-add') setTimeout(() => { changeClass(item, 'add', action == 'show' ? 'hide-leave-active' : 'hide-add-active') }, 0) let onAnimationEnd = function () { changeClass(item, 'remove', action == 'show' ? 'hide-leave-active' : 'hide-add-active') changeClass(item, 'remove', action == 'show' ? 'hide-leave' : 'hide-add') if (action == 'hide') changeClass(item, 'add', 'hide') item.removeEventListener('animationend', onAnimationEnd, false) item.removeEventListener('transitionend', onAnimationEnd, false) } item.addEventListener('animationend', onAnimationEnd, false) item.addEventListener('transitionend', onAnimationEnd, false) } }.bind(this) this.on('mount', function () { this.elements = this.root.querySelectorAll('[animate]') }) this.on('update', function () { for (var i = 0; i<this.elements.length; i++) { let item = this.elements[i] let value = item.getAttribute('animate-show') this.previous || (this.previous = {}) if (this.previous[i] === undefined) this.previous[i] = value if (this.previous[i] != value) { this.previous[i] = value window.requestAnimationFrame(requestAnimation) } } }) } export default { init, }
  4. <example> <div animate animate-show={ show_fg }> animate target </div> <style

    type="sass"> example { &[animate] { transition: 500ms linear; &.riot-hide { display: none; } &.riot-hide-leave { opacity: 0; &.riot-hide-leave-active { opacity: 1; } } &.riot-hide-add { opacity: 1; &.riot-hide-active { opacity: 0; } } } } </style> <script> this.mixin(require('riot-animate-show')) </script> </example>