features/nav-view

examples/hello-world/index.html

@@ -6,11 +6,8 @@
 <link rel=stylesheet href=http://www.devpunks.com/typography.css>
 <link rel=stylesheet href=hello-world/index.css>
 
-<style>
-</style>
-
-<script name=polyfill src=//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.0/webcomponents-hi-ce.js></script>
 <script src=/snuggsi.es></script>
+<script name=polyfill src=//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.0/webcomponents-hi-ce.js></script>
 
 <!-- import works inline body -->
 <link rel=import href=/examples/header-group>

examples/index.html

@@ -27,6 +27,9 @@ <h2 slot=header>Look at these examples</h2>
   <li>
     <a href=/examples/hello-world>&lt;hello-world&gt;</a>
 
+  <li>
+    <a href=/examples/nav-view>&lt;nav-view&gt;</a>
+
   <li>
     <a href=/examples/header-group/example.html>&lt;header-group&gt;</a>
 

examples/nav-view/example.html

@@ -0,0 +1,42 @@
+<title>&lt;nav-view&gt;</title>
+
+<meta charset=UTF-8>
+<meta name=viewport content=width=device-width,initial-scale=1>
+
+<link rel=stylesheet href=http://www.devpunks.com/typography.css>
+
+<script src=/snuggsi.es></script>
+<script nomodule src=//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.0/webcomponents-hi-ce.js></script>
+
+<link rel=import href=/examples/header-group>
+<link rel=import href=/examples/nav-view>
+
+<header-group>
+  <h2 slot=header>&lt;nav-view&gt;</h2>
+  <a  slot=subheader Title='See more componentexamples' href=/examples>See more component examples</a>
+</header-group>
+
+<nav-view for=first,second,third>
+  This is content inside the nav-view.
+</nav-view>
+
+<main view id=first role=main title='First View'>
+  <h1>First View</h1>
+
+  <p>Welcome to home.</p>
+</main>
+
+<main view id=second role=main title='Second View'>
+  <h1>Second View</h1>
+
+  <p>Welcome to another view.</p>
+</main>
+
+<main view id=third role=main title='Third View'>
+  <h1>Third View</h1>
+
+  <p>You've come a long way baby!</p>
+</main>
+
+<script src=/browser-sync.es></script>
+

examples/nav-view/index.es

@@ -0,0 +1,48 @@
+Element `nav-view`
+
+(class extends HTMLElement {
+
+  initialize () {
+    /comp|inter|loaded/.test (document.readyState)
+      ? this.onloaded ()
+      : document.addEventListener
+          ('DOMContentLoaded', this.onloaded)
+  }
+
+  onloaded () {
+    (this.context.views = Array.from
+      (document.body.querySelectorAll `[view]`))
+
+        && (this.context.views [0].hidden = false)
+
+    this.render ()
+  }
+
+  onview (event, anchor = event.target) {
+    event.prevent ()
+
+    history.pushState ({}, anchor.title, anchor.href)
+
+    this.context.views.map (this.hide)
+
+    this.identify (event.target)
+      .hidden = false
+  }
+
+  hide (view)
+    { return (view.hidden = true) && view }
+
+  identify (anchor) {
+    return document.getElementById
+      (anchor.href.match (/#(.+)$/)[1])
+  }
+
+  get anchors () {
+    return this.context.views
+      // what's the difference between `hidden`ing and `display: none`
+      .map (this.hide)
+      .map (view => ({ href: `#${view.id}`, text: view.title }))
+  }
+
+})
+

examples/nav-view/index.html

@@ -0,0 +1,25 @@
+
+<template>
+  <template name=anchors>
+    <a href={href} title={text} onclick=onview>{text}</a>
+  </template>
+</template>
+
+<style>
+/*
+Graceful degredation
+
+  body > [view] {
+    background: green;
+    height: 82vh;
+    display: block
+  }
+
+  [view]:not(:target)
+    { display: none }
+*/
+
+</style>
+
+<script src=nav-view/index.es></script>
+