Save devices

Author: mlynch

lab/index.html

@@ -18,23 +18,14 @@
           <div class="dropdown">
             <button class="dropdown-toggle" type="button">Platforms <span class="dropdown-caret"></span></button>
             <ul class="dropdown-menu">
-              <li><input type="checkbox" id="device-iphone" name="iphone" checked><label for="device-iphone">iPhone</label></li>
-              <li><input type="checkbox" id="device-android" name="android" checked><label for="device-android">Android</label></li>
+              <li><input type="checkbox" id="device-iphone" name="iphone"><label for="device-iphone">iPhone</label></li>
+              <li><input type="checkbox" id="device-android" name="android"><label for="device-android">Android</label></li>
               <li><input type="checkbox" id="device-windows" name="windows"><label for="device-windows">Windows</label></li>
             </ul>
           </div>
         </div>
       </div>
       <preview>
-        <div class="phone" id="iphone">
-          <div class="phone-frame">
-            <h2><div class="phone-icon"></div> <a href="/?ionicplatform=ios" target="_blank">iOS</a></h2>
-            <div id="iphone-frame" class="phone-frame-wrap">
-              <div class="statusbar"></div>
-              <iframe src="/?ionicplatform=ios&amp;ionicstatusbarpadding=true" class="frame"></iframe>
-            </div>
-          </div>
-        </div>
       </preview>
       <div id="footer">
         <div id="footer-left">
@@ -63,6 +54,17 @@ <h2>Psssst...</h2>
         </div>
       </div>
     </div>
+    <template id="iphone-frame-template">
+      <div class="phone" id="iphone">
+        <div class="phone-frame">
+          <h2><div class="phone-icon"></div> <a href="/?ionicplatform=ios" target="_blank">iOS</a></h2>
+          <div id="iphone-frame" class="phone-frame-wrap">
+            <div class="statusbar"></div>
+            <iframe src="/?ionicplatform=ios&amp;ionicstatusbarpadding=true" class="frame"></iframe>
+          </div>
+        </div>
+      </div>
+    </template>
     <template id="android-frame-template">
       <div class="phone" id="android">
         <div class="phone-frame">

lab/static/js/lab.js

@@ -34,13 +34,52 @@ function bindToggles() {
       console.log('Device changed', device, this.checked);
 
       showDevice(device, this.checked);
+      saveLastDevices(device, this.checked);
     })
   }
 }
 
 // Show one of the devices
 function showDevice(device, isShowing) {
-  $('#' + device).style.display = isShowing ? '' : 'none';
+  $('#device-' + device).checked = isShowing;
+
+  var rendered = $('#' + device);
+  if(!rendered) {
+    var template = $('#' + device + '-frame-template');
+    var clone = document.importNode(template, true);
+    $('preview').appendChild(clone.content);
+  } else {
+    rendered.style.display = isShowing ? '' : 'none';
+  }
+}
+
+function saveLastDevices(newDevice, didAdd) {
+  var last = window.localStorage.getItem('ionic_lastdevices');
+  if(!last && didAdd) {
+    window.localStorage.setItem('ionic_lastdevices', newDevice);
+    return;
+  }
+  var devices = last.split(',');
+  var di = devices.indexOf(newDevice);
+  if(di == -1 && didAdd) {
+    window.localStorage.setItem('ionic_lastdevices', devices.join(',') + ',' + newDevice);
+  } else if(di >= 0) {
+    devices.splice(di, 1);
+    window.localStorage.setItem('ionic_lastdevices', devices.join(','));
+  }
+}
+
+function showLastDevices() {
+  var last = window.localStorage.getItem('ionic_lastdevices');
+  if(!last) {
+    showDevice('iphone', true);
+    return;
+  }
+
+  var devices = last.split(',');
+  for(var i = 0; i < devices.length; i++) {
+    showDevice(devices[i], true);
+  }
 }
 
 function setCordovaInfo(data) {
@@ -60,6 +99,7 @@ function loadCordova() {
   req.send(null);
 }
 
+showLastDevices();
 loadCordova();
 bindToggles();
 tryShowViewPopup();