Router - Complex example

<!doctype html>
<html>

  <head>
    <title>Riot Router: Complex example</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--[if IE]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5-history-api/4.2.4/history.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <app-main></app-main>
    <app-navi></app-navi>
    <app-help></app-help>

    <!-- riot tags -->
    <script type="riot/tag" src="app-main.tag"></script>
    <script type="riot/tag" src="app-navi.tag"></script>
    <script type="riot/tag" src="app-help.tag"></script>

    <!-- scripts we need -->
    <script src="https://rawgit.com/riot/riot/master/riot%2Bcompiler.min.js"></script>
    <script src="https://rawgit.com/riot/route/master/dist/route.min.js"></script>

    <!-- mount this app -->
    <script>
      riot.compile(function() {
        riot.mount('*')
        route.start(true)
      })
    </script>

    <style>
      body { margin: 0 }
    </style>
  </body>

</html>

# Router - Complex example

This is a relatively complex example for showing how to use Riot Router to handle the URL. This example needs Riot 2.3 or more.

## Have a play

[Open this example on Plunker](https://riot.js.org/examples/plunker/?app=router-complex)

## Run locally

Install superstatic if you don't have.

```bash
$ npm install -g superstatic
```

Download or clone this repo, then run the command.

```bash
$ cd to/this/dir
$ superstatic
```

Open the URL shown in your browser.

<app-main>

  <article>
    <h1>{ title }</h1>
    <p>{ body }</p>
    <ul if={ isFirst }>
      <li each={ data }><a href="#first/{ id }">{ title }</a></li>
    </ul>
  </article>

  <script>
    var self = this
    self.title = 'Now loading...'
    self.body = ''
    self.data = [
      { id: 'apple', title: 'Apple', body: "The world biggest fruit company." },
      { id: 'orange', title: 'Orange', body: "I don't have the word for it..." }
    ]

    var r = route.create()
    r('',        home       )
    r('first',   first      )
    r('first/*', firstDetail)
    r('second',  second     )
    r(           home       ) // `notfound` would be nicer!

    function home() {
      self.update({
        title:  "Home of the great app",
        body:  "Timeline or dashboard as you like!",
        isFirst: false
      })
    }
    function first() {
      self.update({
        title: "First feature of your app",
        body: "It could be a list of something for example.",
        isFirst: true
      })
    }
    function firstDetail(id) {
      var selected = self.data.filter(function(d) { return d.id == id })[0] || {}
      self.update({
        title: selected.title,
        body: selected.body,
        isFirst: false
      })
    }
    function second() {
      self.update({
        title: "Second feature of your app",
        body: "It could be a config page for example.",
        isFirst: false
      })
    }
  </script>

  <style>
    :scope {
      display: block;
      font-family: sans-serif;
      margin-right: 0;
      margin-bottom: 130px;
      margin-left: 50px;
      padding: 1em;
      text-align: center;
      color: #666;
    }
    ul {
      padding: 10px;
      list-style: none;
    }
    li {
      display: inline-block;
      margin: 5px;
    }
    a {
      display: block;
      background: #f7f7f7;
      text-decoration: none;
      width: 150px;
      height: 150px;
      line-height: 150px;
      color: inherit;
    }
    a:hover {
      background: #eee;
      color: #000;
    }
    @media (min-width: 480px) {
      :scope {
        margin-right: 200px;
        margin-bottom: 0;
      }
    }
  </style>

</app-main>

<app-navi>

  <a each={ links } href="#{ url }" class={ selected: parent.selectedId === url }>
    { name }
  </a>

  <script>
    var self = this

    this.links = [
      { name: "H", url: "" },
      { name: "F", url: "first" },
      { name: "S", url: "second" }
    ]

    var r = route.create()
    r(highlightCurrent)

    function highlightCurrent(id) {
      self.selectedId = id
      self.update()
    }
  </script>

  <style>
    :scope {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      box-sizing: border-box;
      font-family: sans-serif;
      text-align: center;
      color: #666;
      background: #333;
      width: 50px;
      transition: width .2s;
    }
    :scope:hover {
      width: 60px;
    }
    a {
      display: block;
      box-sizing: border-box;
      width: 100%;
      height: 50px;
      line-height: 50px;
      padding: 0 .8em;
      color: white;
      text-decoration: none;
      background: #444;
    }
    a:hover {
      background: #666;
    }
    a.selected {
      background: teal;
    }
  </style>

</app-navi>

<app-help>

  <h2>Help</h2>
  <p>{ helptext }</p>

  <script>
    var self = this
    self.data = {
      first: "This is the help for the first page.",
      second: "This is the help for the second page."
    }

    var r = route.create()
    r('*', function(id) {
      self.helptext = self.data[id] || 'Help not found.'
      self.update()
    })
    r(function() {
      self.helptext = "Click the navigation on the left edge."
      self.update()
    })
  </script>

  <style>
    :scope {
      position: fixed;
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 130px;
      box-sizing: border-box;
      font-family: sans-serif;
      margin: 0;
      padding: 1em;
      text-align: center;
      color: #666;
      background: #f7f7f7;
    }
    @media (min-width: 480px) {
      :scope {
        top: 0;
        right: 0;
        bottom: auto;
        left: auto;
        width: 200px;
        height: 100%;
      }
    }
  </style>

</app-help>