route.tag

<route aria-current="{ show ? 'page' : null }" class="{ in: animIn, out: animOut }" if="{ show || animIn || animOut }">
  <!--
  # route tag
  This is a part of ikki project
  http://cognitom.github.io/ikki/
  -->

  <yield />

  <script>
    var self = this
    self.show = false

    function match(route, actual) {
      route = route.replace(/^\//, '')
      if ('*' == route) return {}
      var vs = []
      var re = route.replace(/(^|\/):([^\/]+)/g, function(_, b, p) {
        vs.push(p)
        return b + '([^/]+)'
      })
      var ms = actual.match(new RegExp('^' + re + '$'))
      if (!ms) return null

      var param = {}
      vs.map(function(v, i) { param[v] = ms[i+1] })
      return param
    }

    inAnimEnd = function(e) {
      e.target.trigger("remove")
    }

    self.on("mount", function() {
      self.root.trigger = self.trigger
    })

    self.on("remove", function() {
      self.root.classList.remove("in")
      self.root.classList.remove("out")
      self.root.removeEventListener("animationend", inAnimEnd)
      if (self.animOut) {
        self.update()
      }
    })

    self.on('update', function() {
      var path = self.parent.path
      var query = self.parent.query
      var param
      self.animIn = self.animIn
      self.animOut = self.show
      self.show = !self.parent.found &&
                  (param = match(opts.path, path)) !== null

      self.root.addEventListener("animationstart", function inAnimStart() {
        self.root.removeEventListener("animationstart", inAnimStart)
        self.root.addEventListener("animationend", inAnimEnd)
      })

      if (self.show && (typeof self.animIn !== "undefined")) {
        self.animIn = true
      } else {
        self.animIn = false
      }

      param = param || {}

      if (!self.show) return

      if (opts.redirect) {
        // redirect
        if (/^http/.test(opts.redirect)) location.href = opts.redirect
        else location.hash = opts.redirect
      } else {
        // tell descendants
        self.trigger('urlchanged', { path: path, query: query, param: param})
        self.parent.found = true
      }
    })
  </script>

</route>

router.js

riot.tag2('router','<yield></yield>','','',function(opts){var a=this,b=window,c="hashchange";a.path="",a.query={},a.found=!1,a.emit=function(d){var e=location.href.split("#")[1]||"",f=e.split("?")[0].replace(/^\/|\/$/g,""),g={};e.replace(/[?&](.+?)=([^&]*)/g,function(h,i,j){g[i]=j}),a.path=f,a.query=g,a.found=!1,d&&a.update()}.bind(a),a.on("mount",function(){b.addEventListener(c,a.emit)}),a.on("unmount",function(){b.removeEventListener(c,a.emit)}),a.emit()})