Store menu status

Author: mlynch

lab/index.html

@@ -31,20 +31,17 @@
         </div>
       </div>
       <div id="main">
-        <div id="sidebar">
+        <div id="sidebar" class="hidden">
           <div class="title">Quick reference</div>
           <div class="close"><i class="icon ion-close-circled"></i></div>
-          <ul id="menu">
+          <ul id="menu" class="menu">
             <li><a>Components</a>
               <ul id="components-menu">
-                <li><a data-href="#overview">Overview</a></li>
-                <li><a data-href="#action-sheets">Action Sheets</a></li>
-                <li><a data-href="#alert">Alerts</a></li>
               </ul>
             </li>
-            <li><a href="https://ionicframework.com/docs/api">API Reference</a></li>
-            <li><a href="https://ionicframework.com/docs/native">Ionic Native</a></li>
-            <li><a href="https://ionicframework.com/docs/">All Documentation</a></li>
+            <li><a target="_blank" href="https://ionicframework.com/docs/api">API Reference</a></li>
+            <li><a target="_blank" href="https://ionicframework.com/docs/native">Ionic Native</a></li>
+            <li><a target="_blank" href="https://ionicframework.com/docs/">All Documentation</a></li>
           </ul>
           <div id="view-ad" class="ad">
             <img class="logo" src="/ionic-lab/static/img/view-logo.jpg" style="height: 64px"/>

lab/static/css/style.css

@@ -335,6 +335,7 @@ preview {
 #sidebar.hidden {
   display: none;
 }
+
 #sidebar .close {
   cursor: pointer;
   position: absolute;
@@ -343,13 +344,14 @@ preview {
   color: #a2a9b4;
   font-size: 24px;
 }
+
 #sidebar .title {
   font-size: 20px;
   margin-top: 5px;
   color: white;
 }
 
-#menu {
+.menu {
   padding: 0;
   margin: 0;
   -webkit-touch-callout: none; /* iOS Safari */
@@ -360,26 +362,39 @@ preview {
           user-select: none; /* Non-prefixed version, currently
                                 supported by Chrome and Opera */
 }
-#menu li {
+.menu li {
   list-style: none;
   margin: 15px 0;
 }
-#menu li a {
+.menu li a {
   color: #a2a9b4;
   text-decoration: none;
   cursor: pointer;
 }
-#menu > li > ul {
+.menu > li > ul {
   display: none;
   padding: 0;
   margin: 0;
 }
-#menu > li > ul li {
+.menu > li > ul li {
   padding-left: 15px;
 }
-#menu > li.expanded > ul {
+.menu > li.expanded > ul {
   display: block;
 }
+.menu hr {
+  height: 1px;
+  border: 0;
+  background-color: #2b3642;
+}
+.menu .version {
+  color: #a2a9b4;
+  opacity: 0.5;
+  font-size: 12px;
+}
+
+#menu {
+}
 
 .ad {
   background-color: #232A31;

lab/static/js/lab.js

@@ -1,23 +1,33 @@
-
-
 var $ = document.querySelector.bind(document);
 
 var API_ROOT = '/ionic-lab/api/v1';
 
-function loadSearchIndex() {
-  var index = 'http://ionicframework.com/docs/data/index.json';
-  fetch(index, {
-  }).then((r) => {
-    return r.json();
-  }).then(json => {
-    console.log('Loaded search index', json);
+var APP_CONFIG = {}
+
+function loadAppConfig() {
+  var req = new XMLHttpRequest();
+  req.addEventListener('load', function(e) {
+    setAppConfig(JSON.parse(req.response));
   })
+  req.open('GET', API_ROOT + '/app-config', true)
+  req.send(null);
 }
 
+function setAppConfig(data) {
+  APP_CONFIG = data;
+}
+
+
 function buildMenu() {
   buildComponentsMenu();
   const sidebar = $('#sidebar');
   const topLevels = sidebar.querySelectorAll('#menu > li > a');
+
+  const lastMenuConfig = window.localStorage.getItem('ionic_labmenu');
+  if(lastMenuConfig === 'true' || lastMenuConfig === null) {
+    sidebar.classList.remove('hidden');
+  }
+
   Array.prototype.map.call(topLevels, a => {
     if(!a.href) {
       a.addEventListener('click', e => {
@@ -36,13 +46,13 @@ function buildMenu() {
     win.focus();
   })
 
-  const s = $('#sidebar');
-
   const toggleMenu = e => {
-    if(s.classList.contains('hidden')) {
-      s.classList.remove('hidden');
+    if(sidebar.classList.contains('hidden')) {
+      sidebar.classList.remove('hidden');
+      window.localStorage.setItem('ionic_labmenu', 'true');
     } else {
-      s.classList.add('hidden');
+      sidebar.classList.add('hidden');
+      window.localStorage.setItem('ionic_labmenu', 'false');
     }
   }
 
@@ -170,6 +180,7 @@ function loadCordova() {
 }
 
 //loadSearchIndex();
+loadAppConfig();
 buildMenu();
 showLastDevices();
 loadCordova();

src/dev-server/http-server.ts

@@ -18,7 +18,7 @@ import * as Constants from '../util/constants';
 import { getBooleanPropertyValue } from '../util/helpers';
 import { getProjectJson, IonicProject } from '../util/ionic-project';
 
-import { LabAppView, ApiCordovaProject } from './lab';
+import { LabAppView, ApiCordovaProject, ApiPackageJson } from './lab';
 
 
 /**
@@ -40,6 +40,7 @@ export function createHttpServer(config: ServeConfig): express.Application {
   app.use(IONIC_LAB_URL + '/static', express.static(path.join(__dirname, '..', '..', 'lab', 'static')));
   app.get(IONIC_LAB_URL, LabAppView);
   app.get(IONIC_LAB_URL + '/api/v1/cordova', ApiCordovaProject );
+  app.get(IONIC_LAB_URL + '/api/v1/app-config', ApiPackageJson);
 
   app.get('/cordova.js', servePlatformResource, serveMockCordovaJS);
   app.get('/cordova_plugins.js', servePlatformResource);

src/dev-server/lab.ts

@@ -16,3 +16,11 @@ export let ApiCordovaProject = (req: any, res: any) => {
     res.json(config);
   });
 };
+
+export let ApiPackageJson = (req: any, res: any) => {
+  res.sendFile(path.join(process.cwd(), 'package.json'), {
+    headers: {
+      'content-type': 'application/json'
+    }
+  })
+};