Feature "Environment"

kitchen-sink/app/app.js

@@ -1,25 +1,31 @@
 var App = (function(lng, undefined) {
 
-    var _getEnvironmentFromQuoJS = (function() {
-        var environment = lng.Core.environment();
-        if (environment.isMobile) {
-            alert('Your Device is ' + environment.os.name + ' (' + environment.os.version + ')');
-        }
-    })();
-
     eventConsole = function(event) {
         $$('#touchevents-console').html($$(event.target).data('event'));
     };
 
     triggerCapture = function(event) {
         event.stopPropagation();
-        Lungo.Notification.success("Event: " + event.type, "Layout events manager", "info", 2);
+        lng.Notification.success("Event: " + event.type, "Layout events manager", "info", 2);
+    };
+
+    environment = function(event) {
+        var environment = lng.Core.environment();
+        var el = lng.dom("section#environment > article");
+
+        if (environment.os) {
+            el.find("#os > strong").html(environment.os.name);
+            el.find("#os > small").html(environment.os.version);
+        }
+        el.find("#resolution > strong").html(environment.screen.height + "p x " + environment.screen.width + "p");
+        el.find("#navigator > strong").html(environment.browser);
+        el.find("#navigator > small").html("Mobile: " + environment.isMobile);
     };
 
     return {
         eventConsole: eventConsole,
-        triggerCapture: triggerCapture
-
+        triggerCapture: triggerCapture,
+        environment: environment
     };
 
 })(Lungo);

kitchen-sink/app/asides/features.html

@@ -1,11 +1,11 @@
 <aside id="features" class="left">
-    <header data-title="BETA Features"></header>
+    <header data-title="Features"></header>
     <article class="list scroll">
         <ul>
             <!-- Basic Layout -->
             <li class="current">
                 <a href="#main-article" data-router="article">
-                    <strong>Meet the frameworks</strong>
+                    <strong>Meet the framework</strong>
                     <small>A brief summary of features.</small>
                 </a>
             </li>
@@ -115,6 +115,14 @@
                 </a>
             </li>
 
+            <!-- Environment -->
+            <li>
+                <a href="#environment" data-router="section">
+                    <strong>Environment</strong>
+                    <small>How much do you know of your device?</small>
+                </a>
+            </li>
+
             <!-- Colours -->
             <li>
                 <a href="#color" data-router="section" data-title="Colours">

kitchen-sink/app/build/scaffold.js

@@ -1,123 +0,0 @@
-// Generated by CoffeeScript 1.3.3
-(function() {
-  var section_login, section_main, sections;
-
-  sections = [
-    {
-      id: "main",
-      transition: "slide",
-      header: {
-        title: "hola",
-        back: true,
-        nav: {
-          position: "right",
-          items: [
-            {
-              href: "#",
-              icon: "home",
-              label: "Home",
-              tap: App.Session
-            }, {
-              href: "b",
-              router: "section",
-              label: "Section B"
-            }
-          ]
-        }
-      },
-      footer: {
-        nav: {
-          "class": "with-labels",
-          items: [
-            {
-              href: "#",
-              "data-icon": "home",
-              "data-label": "ir"
-            }, {
-              href: "#",
-              "data-icon": "home",
-              "data-label": "ir"
-            }
-          ]
-        }
-      },
-      articles: [
-        {
-          id: "main-article"
-        }, {
-          id: "sksks"
-        }
-      ]
-    }, {
-      id: "item",
-      header: {
-        back: true
-      },
-      articles: [
-        {
-          id: "pending",
-          "class": "list scroll"
-        }, {
-          id: "finished",
-          "class": "list scroll"
-        }
-      ]
-    }
-  ];
-
-  section_main = {
-    id: "main",
-    transition: "slide",
-    header: {
-      title: "Lungo Scaffold",
-      subtitle: "definition",
-      nav: {
-        position: "left",
-        items: [
-          {
-            href: "back",
-            icon: "home",
-            label: "return"
-          }
-        ]
-      }
-    },
-    footer: {
-      nav: {
-        "class": "with-labels",
-        items: [
-          {
-            href: "#",
-            icon: "user",
-            label: "Profile",
-            callback: function() {
-              return alert("user");
-            }
-          }, {
-            href: "#",
-            icon: "map",
-            label: "Map",
-            callback: function() {
-              return alert("map");
-            }
-          }, {
-            href: "#",
-            icon: "settings",
-            label: "Config",
-            callback: function() {
-              return alert("Congiguration");
-            }
-          }
-        ]
-      }
-    }
-  };
-
-  section_login = {
-    id: "login",
-    article: {
-      "class": "list scroll"
-    }
-  };
-
-}).call(this);

kitchen-sink/app/events.js

@@ -1,12 +0,0 @@
-
-Lungo.Events.init({
-    'tap section#a article a': function(){
-        Lungo.Notification.loading('hole', '1', 'user');
-    },
-    'tap section#sec-1 header #btn-toggle-loading': App.View.toggleLoading,
-    'load section#sec-2 load': App.View.toggleLoading,
-    'tap section#pull article': function(){
-        alert(1);
-    }
-});
-

kitchen-sink/app/events.trigger.js

@@ -3,3 +3,8 @@ Lungo.Events.init({
     'load section#layoutevents': App.triggerCapture,
     'unload section#layoutevents': App.triggerCapture
 });
+
+Lungo.ready(function() {
+    Lungo.View.Aside.show('features');
+    App.environment();
+});

kitchen-sink/app/sections/environment.html

@@ -0,0 +1,25 @@
+<section id="environment" data-transition="slide">
+    <header data-title="Environment">
+        <nav class="box">
+            <a href="#back" data-router="section" data-label="back"></a>
+        </nav>
+    </header>
+    <article class="list">
+        <ul>
+            <li id="os" class="dark" data-icon="mobile">
+                <strong>Desktop</strong>
+                <small>unknown</small>
+            </li>
+
+            <li id="resolution" data-icon="picture">
+                <strong>0p x 0p</strong>
+                <small>Screen Resolution</small>
+            </li>
+
+            <li id="navigator" data-icon="brand html5">
+                <strong>webkit</strong>
+                <small>Mobile: </small>
+            </li>
+        </ul>
+    </article>
+</section>

kitchen-sink/index.html

@@ -150,22 +150,18 @@
                         'app/sections/aside.html',
                         'app/sections/touchevents.html',
                         'app/sections/layoutevents.html',
-
                         'app/sections/splash.html',
                         'app/sections/data-attribute.html',
                         'app/sections/scroll.html',
                         'app/sections/color.html',
                         'app/sections/pull.html',
                         'app/sections/carousel.html',
+                        'app/sections/environment.html',
                         'app/asides/features.html',
                         'app/asides/left.html',
                         'app/asides/right.html']
 
         });
-
-        Lungo.ready(function() {
-            Lungo.View.Aside.show('features');
-        });
     </script>
     <script src="app/app.js"></script>
         <script src="app/events.notification.js"></script>