Refolder example (kitchen-sink)

components/QuoJS/component.json

@@ -1,12 +0,0 @@
-{
-  "name": "QuoJS",
-  "description": "Micro #JavaScript Library for Mobile Devices",
-  "version": "2.3.0",
-  "homepage": "http://quojs.tapquo.com",
-  "author": {
-    "name": "Tapquo S.L.",
-    "site": "http://tapquo.com"},
-  "main": ["quo.js"],
-  "keywords": [ "mobile" ],
-  "license": [{"type": "MIT"}]
-}

example/components/lungo/component.json

@@ -0,0 +1,13 @@
+{
+  "name": "lungo",
+  "description": "HTML5 Cross-Device Framework.",
+  "version": "2.1.0",
+  "homepage": "http://lungo.tapquo.com",
+  "author": {
+    "name": "Tapquo S.L.",
+    "site": "http://tapquo.com"},
+  "main": ["./lungo.js", "./lungo.css"],
+  "keywords": [ "mobile" ],
+  "dependencies": {"quojs": "latest"},
+  "license": [ {"type": "GPLv3"}, {"type": "Commercial"}]
+}

example/components/lungo/theme.lungo.css

@@ -0,0 +1,567 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Default
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
+/* -------------------------- THEME -------------------------- */
+body {
+  background-color: #222;
+  font-family: "Helvetica Neue", "Open Sans", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 1.3em;
+  letter-spacing: -0.05em;
+}
+.theme,
+li.theme,
+a.theme {
+  background-color: THEME-light;
+}
+.theme:active,
+li.theme:active,
+a.theme:active {
+  background-color: #0093d5;
+}
+[data-control="pull"] {
+  color: #666;
+  -webkit-text-shadow: 0 1px 0 #fff;
+  -moz-text-shadow: 0 1px 0 #fff;
+  text-shadow: 0 1px 0 #fff;
+}
+/* -------------------------- LAYOUT COLORS -------------------------- */
+section > header {
+  background-color: #0093d5;
+  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #03b1ff, inset 0 -1px 0 #007db5;
+  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #03b1ff, inset 0 -1px 0 #007db5;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #03b1ff, inset 0 -1px 0 #007db5;
+  color: #fff;
+}
+section > footer,
+section nav.groupbar {
+  background-color: #222;
+  -webkit-box-shadow: inset 0 3px 0 #1d1d1d;
+  -moz-box-shadow: inset 0 3px 0 #1d1d1d;
+  box-shadow: inset 0 3px 0 #1d1d1d;
+}
+section > article,
+section > [data-control="pull"] {
+  background-color: #f4f5f5;
+}
+section > article.splash,
+section > [data-control="pull"].splash {
+  background: #0093d5;
+  color: #fff;
+}
+section.aside {
+  -webkit-box-shadow: -1px 0 2px rgba(0,0,0,0.2);
+  -moz-box-shadow: -1px 0 2px rgba(0,0,0,0.2);
+  box-shadow: -1px 0 2px rgba(0,0,0,0.2);
+}
+section.aside.right {
+  -webkit-box-shadow: 1px 0 2px rgba(0,0,0,0.2);
+  -moz-box-shadow: 1px 0 2px rgba(0,0,0,0.2);
+  box-shadow: 1px 0 2px rgba(0,0,0,0.2);
+}
+aside {
+  background-color: #1d1d1d;
+  color: #fff;
+}
+aside > header,
+aside > footer {
+  background-color: #181818;
+}
+aside > header {
+  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
+  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
+}
+/* -------------------------- NAVIGATION -------------------------- */
+section > header > nav a {
+  color: #fff;
+}
+section > header > nav.box:not(.right) a {
+  -webkit-box-shadow: 1px 0 0 #03b1ff, inset -1px 0 0 #007db5;
+  -moz-box-shadow: 1px 0 0 #03b1ff, inset -1px 0 0 #007db5;
+  box-shadow: 1px 0 0 #03b1ff, inset -1px 0 0 #007db5;
+}
+section > header > nav.box.right a {
+  -webkit-box-shadow: -1px 0 0 #03b1ff, inset 1px 0 0 #007db5;
+  -moz-box-shadow: -1px 0 0 #03b1ff, inset 1px 0 0 #007db5;
+  box-shadow: -1px 0 0 #03b1ff, inset 1px 0 0 #007db5;
+}
+section > header > nav.box a:active {
+  background: #007db5;
+}
+section > nav.groupbar > a.active {
+  -webkit-box-shadow: inset 0 -3px 0 #0093d5;
+  -moz-box-shadow: inset 0 -3px 0 #0093d5;
+  box-shadow: inset 0 -3px 0 #0093d5;
+}
+section > footer > nav > a,
+nav.groupbar > a {
+  color: #888;
+}
+section > footer > nav > a.active,
+nav.groupbar > a.active {
+  color: #fff;
+}
+section > footer > nav > a {
+  -webkit-box-shadow: 1px 0 0 #1d1d1d;
+  -moz-box-shadow: 1px 0 0 #1d1d1d;
+  box-shadow: 1px 0 0 #1d1d1d;
+}
+section > footer > nav > a.active {
+  color: #fff;
+  background-color: #1d1d1d;
+  -webkit-box-shadow: inset 0 3px 0 #0093d5;
+  -moz-box-shadow: inset 0 3px 0 #0093d5;
+  box-shadow: inset 0 3px 0 #0093d5;
+}
+aside nav a.active .icon {
+  color: #fff;
+}
+aside nav a:not(.active) .icon {
+  color: #888;
+}
+aside nav.box:not(.right) a {
+  -webkit-box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
+  -moz-box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
+  box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
+}
+aside nav.box.right a {
+  -webkit-box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
+  -moz-box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
+  box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
+}
+aside nav.box a:active {
+  background: #141414;
+}
+/* -------------------------- LISTS -------------------------- */
+section .list li {
+  background: #fff;
+}
+section .list li:not(.anchor) {
+  border-bottom: inset 1px #ebebeb;
+}
+section .list li.secondary {
+  -webkit-box-shadow: inset 4px 0px 0px #bfbfbf;
+  -moz-box-shadow: inset 4px 0px 0px #bfbfbf;
+  box-shadow: inset 4px 0px 0px #bfbfbf;
+}
+section .list li.accept {
+  -webkit-box-shadow: inset 4px 0px 0px #3fb58e;
+  -moz-box-shadow: inset 4px 0px 0px #3fb58e;
+  box-shadow: inset 4px 0px 0px #3fb58e;
+}
+section .list li.cancel {
+  -webkit-box-shadow: inset 4px 0px 0px #ee6557;
+  -moz-box-shadow: inset 4px 0px 0px #ee6557;
+  box-shadow: inset 4px 0px 0px #ee6557;
+}
+section .list li,
+section .list li a {
+  color: #333;
+}
+section .list li.anchor,
+section .list li a.anchor {
+  background: #222;
+}
+section .list li.dark,
+section .list li a.dark {
+  background: #595959;
+}
+section .list li.selectable:active,
+section .list li a.selectable:active,
+section .list li.theme,
+section .list li a.theme,
+section .list li.active,
+section .list li a.active {
+  background: #03b1ff;
+}
+section .list li.light,
+section .list li a.light {
+  background: #ebebeb;
+  color: #7a7a7a;
+}
+section .list li.dark,
+section .list li a.dark,
+section .list li.selectable:active,
+section .list li a.selectable:active,
+section .list li.theme,
+section .list li a.theme,
+section .list li.anchor,
+section .list li a.anchor,
+section .list li.dark small,
+section .list li a.dark small,
+section .list li.selectable:active small,
+section .list li a.selectable:active small,
+section .list li.theme small,
+section .list li a.theme small,
+section .list li.anchor small,
+section .list li a.anchor small,
+section .list li.dark .right:not(.tag),
+section .list li a.dark .right:not(.tag),
+section .list li.selectable:active .right:not(.tag),
+section .list li a.selectable:active .right:not(.tag),
+section .list li.theme .right:not(.tag),
+section .list li a.theme .right:not(.tag),
+section .list li.anchor .right:not(.tag),
+section .list li a.anchor .right:not(.tag) {
+  color: #fff;
+}
+section .list li small,
+section .list li a small,
+section .list li .right:not(.tag),
+section .list li a .right:not(.tag) {
+  color: #7a7a7a;
+}
+.list:not(.indented) li.dark,
+.list:not(.indented) li.theme,
+.list:not(.indented) li.light {
+  border-bottom-color: rgba(0,0,0,0.1);
+}
+aside .list li {
+  background: none;
+}
+aside .list li:not(:first-child) {
+  border-top: solid 1px #222;
+}
+aside .list li:not(:last-child) {
+  border-bottom: solid 1px #141414;
+}
+aside .list li.active {
+  background: #0093d5;
+  border-color: transparent;
+}
+aside .list li.active strong,
+aside .list li.active small,
+aside .list li.active .icon {
+  color: #fff;
+}
+aside .list li strong {
+  color: #999;
+}
+aside .list li small,
+aside .list li .icon {
+  color: #666;
+}
+/* -------------------------- TAG -------------------------- */
+.tag {
+  color: #fff;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  font-weight: 700 !important;
+}
+.tag.count {
+  background-color: #0093d5;
+}
+.tag header .count {
+  background-color: THEME-dark !important;
+}
+footer .tag {
+  -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+  -moz-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+}
+/* -------------------------- NOTIFICATION -------------------------- */
+.notification {
+  color: #fff;
+}
+.notification .window.growl {
+  background: rgba(0,0,0,0.8);
+}
+.notification .window:not(.growl) {
+  background: #e6e6e6;
+  color: #222;
+  -webkit-box-shadow: 0 0 8px #000;
+  -moz-box-shadow: 0 0 8px #000;
+  box-shadow: 0 0 8px #000;
+}
+.notification .window:not(.growl) button,
+.notification .window:not(.growl) .button {
+  background: #fff !important;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
+  color: #007db5 !important;
+  -webkit-border-radius: 0px !important;
+  -moz-border-radius: 0px !important;
+  border-radius: 0px !important;
+  border: none !important;
+  margin-bottom: 1px;
+}
+.notification .window:not(.growl).error {
+  background: #dd2916;
+  color: #fff;
+}
+.notification .window:not(.growl).success {
+  background: #2f886b;
+  color: #fff;
+}
+/* -------------------------- BUTTONS -------------------------- */
+a.button,
+button {
+  -webkit-border-radius: FORM-border-radius;
+  -moz-border-radius: FORM-border-radius;
+  border-radius: FORM-border-radius;
+  color: #fff;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+  border: solid 1px rgba(0,0,0,0.1);
+}
+a.button:active,
+button:active {
+  -webkit-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
+  -moz-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
+  box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
+  border-color: none;
+}
+a.button.secondary,
+button.secondary {
+  color: #666 !important;
+}
+a.button[disabled],
+button[disabled] {
+  background-color: #000;
+}
+button,
+.button,
+.tag {
+  background-color: #007db5;
+}
+button.secondary,
+.button.secondary,
+.tag.secondary {
+  background-color: #bfbfbf;
+}
+button.accept,
+.button.accept,
+.tag.accept {
+  background-color: #3fb58e;
+}
+button.cancel,
+.button.cancel,
+.tag.cancel {
+  background-color: #ee6557;
+}
+/* -------------------------- BUTTONS -------------------------- */
+form label,
+.form label {
+  color: #aaa;
+  font-weight: 300;
+}
+form fieldset,
+.form fieldset {
+  background: #fff;
+  border-bottom: solid 1px #eee;
+}
+form fieldset .icon,
+.form fieldset .icon {
+  color: #ccc;
+}
+form input[type="text"],
+.form input[type="text"],
+form input[type="password"],
+.form input[type="password"],
+form input[type="date"],
+.form input[type="date"],
+form input[type="datetime"],
+.form input[type="datetime"],
+form input[type="email"],
+.form input[type="email"],
+form input[type="number"],
+.form input[type="number"],
+form input[type="search"],
+.form input[type="search"],
+form input[type="tel"],
+.form input[type="tel"],
+form input[type="time"],
+.form input[type="time"],
+form input[type="url"],
+.form input[type="url"],
+form select,
+.form select,
+form textarea,
+.form textarea {
+  background-color: #fff;
+  color: rgba(0,0,0,0.75);
+  border: 1px solid #ddd;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+}
+form input[type="text"].error,
+.form input[type="text"].error,
+form input[type="password"].error,
+.form input[type="password"].error,
+form input[type="date"].error,
+.form input[type="date"].error,
+form input[type="datetime"].error,
+.form input[type="datetime"].error,
+form input[type="email"].error,
+.form input[type="email"].error,
+form input[type="number"].error,
+.form input[type="number"].error,
+form input[type="search"].error,
+.form input[type="search"].error,
+form input[type="tel"].error,
+.form input[type="tel"].error,
+form input[type="time"].error,
+.form input[type="time"].error,
+form input[type="url"].error,
+.form input[type="url"].error,
+form select.error,
+.form select.error,
+form textarea.error,
+.form textarea.error,
+form input[type="text"]:required,
+.form input[type="text"]:required,
+form input[type="password"]:required,
+.form input[type="password"]:required,
+form input[type="date"]:required,
+.form input[type="date"]:required,
+form input[type="datetime"]:required,
+.form input[type="datetime"]:required,
+form input[type="email"]:required,
+.form input[type="email"]:required,
+form input[type="number"]:required,
+.form input[type="number"]:required,
+form input[type="search"]:required,
+.form input[type="search"]:required,
+form input[type="tel"]:required,
+.form input[type="tel"]:required,
+form input[type="time"]:required,
+.form input[type="time"]:required,
+form input[type="url"]:required,
+.form input[type="url"]:required,
+form select:required,
+.form select:required,
+form textarea:required,
+.form textarea:required {
+  border-color: color_alert;
+  color: color_alert;
+  background-color: rgba(198,15,19,0.1);
+}
+form input[type="text"]:focus,
+.form input[type="text"]:focus,
+form input[type="password"]:focus,
+.form input[type="password"]:focus,
+form input[type="date"]:focus,
+.form input[type="date"]:focus,
+form input[type="datetime"]:focus,
+.form input[type="datetime"]:focus,
+form input[type="email"]:focus,
+.form input[type="email"]:focus,
+form input[type="number"]:focus,
+.form input[type="number"]:focus,
+form input[type="search"]:focus,
+.form input[type="search"]:focus,
+form input[type="tel"]:focus,
+.form input[type="tel"]:focus,
+form input[type="time"]:focus,
+.form input[type="time"]:focus,
+form input[type="url"]:focus,
+.form input[type="url"]:focus,
+form select:focus,
+.form select:focus,
+form textarea:focus,
+.form textarea:focus {
+  background: #fafafa;
+  border-color: #0093d5;
+  color: rgba(0,0,0,0.75);
+}
+form input[type="text"][disabled],
+.form input[type="text"][disabled],
+form input[type="password"][disabled],
+.form input[type="password"][disabled],
+form input[type="date"][disabled],
+.form input[type="date"][disabled],
+form input[type="datetime"][disabled],
+.form input[type="datetime"][disabled],
+form input[type="email"][disabled],
+.form input[type="email"][disabled],
+form input[type="number"][disabled],
+.form input[type="number"][disabled],
+form input[type="search"][disabled],
+.form input[type="search"][disabled],
+form input[type="tel"][disabled],
+.form input[type="tel"][disabled],
+form input[type="time"][disabled],
+.form input[type="time"][disabled],
+form input[type="url"][disabled],
+.form input[type="url"][disabled],
+form select[disabled],
+.form select[disabled],
+form textarea[disabled],
+.form textarea[disabled] {
+  background: #eee;
+  border-color: #aaa;
+  color: #999;
+}
+form .select:after,
+.form .select:after {
+  background: #d0d4c6;
+  color: #fff;
+  border-top-right-radius: 1px;
+  border-bottom-right-radius: 1px;
+}
+form input[type=range],
+.form input[type=range] {
+  -webkit-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
+  -moz-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
+  box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  border-radius: 1px;
+}
+form input[type=range]:not(.checkbox),
+.form input[type=range]:not(.checkbox) {
+  background-color: #ddd;
+}
+form input[type=range]:not(.checkbox):active,
+.form input[type=range]:not(.checkbox):active {
+  background-color: #03b1ff;
+}
+form input[type=range].checkbox,
+.form input[type=range].checkbox {
+  background-color: #aaa;
+  color: rgba(255,255,255,0.6);
+}
+form input[type=range].checkbox.active,
+.form input[type=range].checkbox.active {
+  background-color: #03b1ff;
+}
+form input[type=range]::-webkit-slider-thumb,
+.form input[type=range]::-webkit-slider-thumb {
+  -webkit-border-radius: FORM-border-radius;
+  -moz-border-radius: FORM-border-radius;
+  border-radius: FORM-border-radius;
+  background: #eee;
+  -webkit-box-shadow: inset 0 0 1px #bbb;
+  -moz-box-shadow: inset 0 0 1px #bbb;
+  box-shadow: inset 0 0 1px #bbb;
+}
+form input[type=range]::-webkit-slider-thumb::after,
+.form input[type=range]::-webkit-slider-thumb::after {
+  background: #fff;
+}
+form .progress .bar,
+.form .progress .bar {
+  background-color: #ddd;
+}
+form .progress .bar .value,
+.form .progress .bar .value {
+  background-color: #03b1ff;
+}

example/components/quojs

@@ -0,0 +1 @@
+Subproject commit 346e432dc69ec0e1143ad63ef98e7c171b0aa9c6

example/firefox_os.webapp

@@ -0,0 +1,13 @@
+{
+  "name": "Lungo",
+  "description": "Lungo SDK Kitchen-Sink",
+  "launch_path": "/index.html",
+  "icons": {
+    "128": "http://lungo.tapquo.com/resources/icon-114.png"
+  },
+  "developer": {
+    "name": "Tapquo",
+    "url": "http://tapquo.com"
+  },
+  "default_locale": "en"
+}

example/index.html

@@ -45,12 +45,12 @@
              and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
 
     <!-- Main Stylesheet -->
-    <link rel="stylesheet" href="../packages/lungo/lungo.css">
-    <link rel="stylesheet" href="../packages/lungo/lungo.icon.css">
-    <link rel="stylesheet" href="../packages/lungo/lungo.icon.brand.css">
-    <link rel="stylesheet" href="../packages/lungo/lungo.css">
+    <link rel="stylesheet" href="components/lungo/lungo.css">
+    <link rel="stylesheet" href="components/lungo/lungo.icon.css">
+    <link rel="stylesheet" href="components/lungo/lungo.icon.brand.css">
+    <link rel="stylesheet" href="components/lungo/lungo.css">
 
-    <link rel="stylesheet" href="../packages/lungo/theme.lungo.css">
+    <link rel="stylesheet" href="components/lungo/theme.lungo.css">
 
     <!-- App Stylesheet -->
     <link rel="stylesheet" href="stylesheets/app.css">
@@ -162,8 +162,8 @@
     </section>
 
     <!-- Lungo dependencies -->
-    <script src="../components/QuoJS/quo.js"></script>
-    <script src="../packages/lungo/lungo.js"></script>
+    <script src="components/quojs/quo.js"></script>
+    <script src="components/lungo/lungo.js"></script>
 
     <!-- LungoJS - Sandbox App -->
     <script>

grunt.js

@@ -63,9 +63,13 @@ module.exports = function(grunt) {
     },
 
     copy: {
+    example: {
+        files: { 'example/components/lungo/': ['packages/lungo/*'] }
+      },
       target: {
         files: { 'packages/lungo.theme/': ['<config:resources.themes>'] }
       },
+
       imports: {
         files: { 'packages/lungo.theme/import/': ['src/**/vendor.styl'] }
       }

src/element/Lungo.Element.Pull.js

@@ -41,6 +41,7 @@ Lungo.Element.Pull = function(element_selector, config_data) {
     var _moveElementTo = function(posY, animate) {
         var newPos = posY > MAX_HEIGHT ? MAX_HEIGHT : posY;
         if(animate) ELEMENT.addClass('pull');
+
         ELEMENT.style('-webkit-transform', 'translate(0, ' + (newPos) + 'px)');
         if(animate) {
             setTimeout(function() {