Demo - WIP

Dogstudio · Aug 14, 2018 · 8bd07f9 · 8bd07f9
1 parent daa4dc4
commit 8bd07f9
Show file tree

Hide file tree

Showing 101 changed files with 640 additions and 31,929 deletions.
diff --git a/dist/es5/highway.js → build/es5/highway.js b/dist/es5/highway.js → build/es5/highway.js
@@ -1009,7 +1009,7 @@ function () {
     _classCallCheck(this, Renderer);
 
     // We get the view.
-    this.root = document.querySelector('[router-view]'); // We save fetched informations
+    this.root = document.querySelector('[data-router-view]'); // We save fetched informations
 
     this.page = props.page;
     this.view = props.view;
@@ -1037,8 +1037,8 @@ function () {
   }, {
     key: "add",
     value: function add() {
-      // We update the [router-view] slug
-      this.root.setAttribute('router-view', this.slug); // And HTML
+      // We update the [data-router-view] slug
+      this.root.setAttribute('data-router-view', this.slug); // And HTML
 
       this.root.innerHTML = this.view.innerHTML;
     }
@@ -1356,20 +1356,20 @@ function () {
   }, {
     key: "getView",
     value: function getView(page) {
-      return page.querySelector('[router-view]');
+      return page.querySelector('[data-router-view]');
     }
     /**
      * Get view's slug from view element
      *
-     * @arg    {string} view — [router-view] DOM
+     * @arg    {string} view — [data-router-view] DOM
      * @return {string} Page slug or `null`
      * @static
      */
 
   }, {
     key: "getSlug",
     value: function getSlug(view) {
-      return view.getAttribute('router-view');
+      return view.getAttribute('data-router-view');
     }
     /**
      * Get page renderer
@@ -2691,13 +2691,13 @@ var Transition =
 /*#__PURE__*/
 function () {
   /**
-   * @arg {object} view — [router-view] node
+   * @arg {object} view — [data-router-view] node
    * @constructor
    */
   function Transition(view) {
     _classCallCheck(this, Transition);
 
-    // The [router-view] is the only main information we need since the role of
+    // The [data-router-view] is the only main information we need since the role of
     // the transition is to show/hide the required DOM elements.
     this.view = view;
   }

diff --git a/build/es5/highway.min.js b/build/es5/highway.min.js
diff --git a/build/es5/highway.min.js.gz b/build/es5/highway.min.js.gz
diff --git a/dist/highway.js → build/highway.js b/dist/highway.js → build/highway.js
@@ -191,7 +191,7 @@ class Renderer {
    */
   constructor(props) {
     // We get the view.
-    this.root = document.querySelector('[router-view]');
+    this.root = document.querySelector('[data-router-view]');
 
     // We save fetched informations
     this.page = props.page;
@@ -216,8 +216,8 @@ class Renderer {
    * Add view in DOM.
    */
   add() {
-    // We update the [router-view] slug
-    this.root.setAttribute('router-view', this.slug);
+    // We update the [data-router-view] slug
+    this.root.setAttribute('data-router-view', this.slug);
 
     // And HTML
     this.root.innerHTML = this.view.innerHTML;
@@ -395,18 +395,18 @@ class helpers_Helpers {
    * @static
    */
   static getView(page) {
-    return page.querySelector('[router-view]');
+    return page.querySelector('[data-router-view]');
   }
 
   /**
    * Get view's slug from view element
    *
-   * @arg    {string} view — [router-view] DOM
+   * @arg    {string} view — [data-router-view] DOM
    * @return {string} Page slug or `null`
    * @static
    */
   static getSlug(view) {
-    return view.getAttribute('router-view');
+    return view.getAttribute('data-router-view');
   }
 
   /**
@@ -758,11 +758,11 @@ class core_Core extends tiny_emitter_default.a {
 class Transition {
 
   /**
-   * @arg {object} view — [router-view] node
+   * @arg {object} view — [data-router-view] node
    * @constructor
    */
   constructor(view) {
-    // The [router-view] is the only main information we need since the role of
+    // The [data-router-view] is the only main information we need since the role of
     // the transition is to show/hide the required DOM elements.
     this.view = view;
   }

diff --git a/build/highway.min.js b/build/highway.min.js
diff --git a/build/highway.min.js.gz b/build/highway.min.js.gz
diff --git a/examples/basic-anchor/.gitignore → demo/.gitignore b/examples/basic-anchor/.gitignore → demo/.gitignore
diff --git a/examples/basic-anchor/.npmignore → demo/.npmignore b/examples/basic-anchor/.npmignore → demo/.npmignore
diff --git a/demo/dist/about.html b/demo/dist/about.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Highway - Demo</title>
+</head>
+<body>
+  <main>
+    <header>
+      <nav>
+        <ul>
+          <li><a href="/">Home</a></li>
+          <li><a href="/about.html">About</a></li>
+          <li>
+            <a href="/features.html">Features</a>
+            <ul>
+              <li><a href="/features.html#renderers">Renderers</a></li>
+              <li><a href="/features.html#transitions">Transitions</a></li>
+            </ul>
+          </li>
+          <li><a href="/examples.html">Examples</a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <article data-router-view="about">
+      <h1>About</h1>
+    </article>
+  </main>
+
+  <script src="./js/main.js"></script>
+</body>
+</html>
diff --git a/demo/dist/examples.html b/demo/dist/examples.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Highway - Demo</title>
+</head>
+<body>
+  <main>
+    <header>
+      <nav>
+        <ul>
+          <li><a href="/">Home</a></li>
+          <li><a href="/about.html">About</a></li>
+          <li>
+            <a href="/features.html">Features</a>
+            <ul>
+              <li><a href="/features.html#renderers">Renderers</a></li>
+              <li><a href="/features.html#transitions">Transitions</a></li>
+            </ul>
+          </li>
+          <li><a href="/examples.html">Examples</a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <article data-router-view="features">
+      <h1>Examples</h1>
+    </article>
+  </main>
+
+  <script src="./js/main.js"></script>
+</body>
+</html>
diff --git a/demo/dist/features.html b/demo/dist/features.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Highway - Demo</title>
+</head>
+<body>
+  <main>
+    <header>
+      <nav>
+        <ul>
+          <li><a href="/">Home</a></li>
+          <li><a href="/about.html">About</a></li>
+          <li>
+            <a href="/features.html">Features</a>
+            <ul>
+              <li><a href="/features.html#renderers">Renderers</a></li>
+              <li><a href="/features.html#transitions">Transitions</a></li>
+            </ul>
+          </li>
+          <li><a href="/examples.html">Examples</a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <article data-router-view="features">
+      <h1>Features</h1>
+
+      <ul>
+        <li><a href="#renderers">Renderers</a></li>
+        <li><a href="#transitions">Transitions</a></li>
+      </ul>
+
+      <section id="renderers">
+        <h2>Renderers</h2>
+      </section>
+
+      <section id="transitions">
+        <h2>Transitions</h2>
+      </section>
+    </article>
+  </main>
+
+  <script src="./js/main.js"></script>
+</body>
+</html>
diff --git a/demo/dist/index.html b/demo/dist/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Highway - Demo</title>
+</head>
+<body>
+  <main>
+    <header>
+      <nav>
+        <ul>
+          <li><a href="/">Home</a></li>
+          <li><a href="/about.html">About</a></li>
+          <li>
+            <a href="/features.html">Features</a>
+            <ul>
+              <li><a href="/features.html#renderers">Renderers</a></li>
+              <li><a href="/features.html#transitions">Transitions</a></li>
+            </ul>
+          </li>
+          <li><a href="/examples.html">Examples</a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <article data-router-view="home">
+      <h1>Home</h1>
+    </article>
+  </main>
+
+  <script src="./js/main.js"></script>
+</body>
+</html>