فهرست منبع

Big refactor for new namespace Lungo.Element

soyjavi 13 سال پیش
والد
کامیت
e3b8c77d75

+ 11 - 8
examples/kitchen-sink/carousel.html

@@ -107,26 +107,29 @@
     <script src="../../src/Lungo.Dom.js"></script>
     <script src="../../src/Lungo.Service.js"></script>
     <script src="../../src/Lungo.Constants.js"></script>
-    <script src="../../src/Lungo.Element.js"></script>
     <script src="../../src/Lungo.Events.js"></script>
     <script src="../../src/Lungo.Notification.js"></script>
+    <script src="../../src/Lungo.Fallback.js"></script>
+
     <script src="../../src/router/Lungo.Router.js"></script>
     <script src="../../src/router/Lungo.Router.History.js" ></script>
-    <script src="../../src/view/Lungo.View.Resize.js"></script>
+
     <script src="../../src/view/Lungo.View.Article.js" ></script>
     <script src="../../src/view/Lungo.View.Aside.js" ></script>
-    <script src="../../src/view/Lungo.View.Element.js"></script>
-
-
-    <script src="../../src/view/Lungo.View.Pull.js"></script>
-    <script src="../../src/view/Lungo.View.Carousel.js"></script>
 
+    <script src="../../src/element/Lungo.Element.Cache.js"></script>
+    <script src="../../src/element/Lungo.Element.Carousel.js"></script>
+    <script src="../../src/element/Lungo.Element.Count.js"></script>
+    <script src="../../src/element/Lungo.Element.Loading.js"></script>
+    <script src="../../src/element/Lungo.Element.Progress.js"></script>
+    <script src="../../src/element/Lungo.Element.Pull.js"></script>
 
     <script src="../../src/data/Lungo.Data.Cache.js"></script>
     <script src="../../src/data/Lungo.Data.Sql.js"></script>
     <script src="../../src/data/Lungo.Data.Storage.js"></script>
+
     <script src="../../src/attributes/Lungo.Attributes.Data.js"></script>
-    <script src="../../src/Lungo.Fallback.js"></script>
+
     <script src="../../src/boot/Lungo.Boot.Resources.js" ></script>
     <script src="../../src/boot/Lungo.Boot.Stats.js" ></script>
     <script src="../../src/boot/Lungo.Boot.Layout.js"></script>

+ 13 - 4
examples/kitchen-sink/index.html

@@ -106,20 +106,29 @@
     <script src="../../src/Lungo.Dom.js"></script>
     <script src="../../src/Lungo.Service.js"></script>
     <script src="../../src/Lungo.Constants.js"></script>
-    <script src="../../src/Lungo.Element.js"></script>
     <script src="../../src/Lungo.Events.js"></script>
     <script src="../../src/Lungo.Notification.js"></script>
+    <script src="../../src/Lungo.Fallback.js"></script>
+
     <script src="../../src/router/Lungo.Router.js"></script>
     <script src="../../src/router/Lungo.Router.History.js" ></script>
-    <script src="../../src/view/Lungo.View.Resize.js"></script>
+
     <script src="../../src/view/Lungo.View.Article.js" ></script>
     <script src="../../src/view/Lungo.View.Aside.js" ></script>
-    <script src="../../src/view/Lungo.View.Element.js"></script>
+
+    <script src="../../src/element/Lungo.Element.Cache.js"></script>
+    <script src="../../src/element/Lungo.Element.Carousel.js"></script>
+    <script src="../../src/element/Lungo.Element.Count.js"></script>
+    <script src="../../src/element/Lungo.Element.Loading.js"></script>
+    <script src="../../src/element/Lungo.Element.Progress.js"></script>
+    <script src="../../src/element/Lungo.Element.Pull.js"></script>
+
     <script src="../../src/data/Lungo.Data.Cache.js"></script>
     <script src="../../src/data/Lungo.Data.Sql.js"></script>
     <script src="../../src/data/Lungo.Data.Storage.js"></script>
+
     <script src="../../src/attributes/Lungo.Attributes.Data.js"></script>
-    <script src="../../src/Lungo.Fallback.js"></script>
+
     <script src="../../src/boot/Lungo.Boot.Resources.js" ></script>
     <script src="../../src/boot/Lungo.Boot.Stats.js" ></script>
     <script src="../../src/boot/Lungo.Boot.Layout.js"></script>

+ 0 - 407
examples/kitchen-sink/old_index.html

@@ -1,407 +0,0 @@
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>Lungo 2.0</title>
-    <meta name="description" content="">
-    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
-    <!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
-    <meta name="HandheldFriendly" content="True">
-    <meta name="MobileOptimized" content="320">
-    <meta name="viewport" content="width=device-width, user-scalable=no">
-
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="format-detection" content="telephone=no">
-    <!-- For iPhone 4 with high-resolution Retina display: -->
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/icon@2x.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/icon-72.png">
-    <link rel="apple-touch-icon-precomposed" href="assets/images/icon.png">
-    <link rel="apple-touch-startup-image" href="assets/images/default.png">
-
-    <meta http-equiv="cleartype" content="on">
-
-    <!-- Main Stylesheet -->
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.base.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.nav.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.aside.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.article.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.list.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.grid.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.splash.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.button.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.form.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.colour.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.icon.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.loading.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.notification.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.theme.scaffold.css">
-    <!--
-    <link rel="stylesheet" href="../../release/lungo.css">
-    <link rel="stylesheet" href="../../release/lungo.icon.css">
-    <link rel="stylesheet" href="../../release/lungo.theme.scaffold.css">
-    -->
-    <!-- App Stylesheet -->
-    <link rel="stylesheet" href="assets/stylesheets/app.css">
-</head>
-
-<body class="app">
-<!--
-    <section id="login">
-        <article class="indented splash current">
-            <h1>New user</h1>
-            <form>
-                <label>Mail</label>
-                <input type="text" placeholder="Your email" id="txt-signup-mail" value="">
-                <label>Mail</label>
-                <input type="text" placeholder="Your username" id="txt-signup-name" value="">
-                <label>Mail</label>
-                <input type="password" placeholder="Your password" id="txt-signup-password" value="">
-                <a href="#" class="button blue big" id="btn-signup-call" data-icon="checkmark">Signup</a>
-                <a href="#back" data-router="section" class="button red big" data-icon="close">Return to login</a>
-                <a href="#back" data-router="section" class="button green " data-icon="user">Return to login</a>
-            </form>
-        </article>
-    </section>
-
-    <section id="foundation">
-        <header data-title="test"></header>
-        <footer class="toolbar with-labels"></footer>
-
-        <article>
-            <div class="row one red">.row.one</div>
-
-            <div class="row six blue">
-                <div class="one column orange"></div>
-                <div class="one column"></div>
-                <div class="four column orange">.four.column.orange</div>
-                <div class="one column"></div>
-                <div class="one column orange tall"></div>
-                <div class="one column "></div>
-                <div class="one column orange "></div>
-            </div>
-
-            <div class="row two green">
-                <div class="two columns centered red"></div>
-            </div>
-
-            <div class="row one yellow">.row.one.yellow</div>
-        </article>
-    </section>
-
-    <section id="a" data-transition="pop" >
-        <header data-title="a">
-            <nav class="right">
-                <a href="#baaaa" data-router="section">B</a>
-            </nav>
-        </header>
-        <article class="">
-            <a href="#" class="button big" data-icon="home">Prueba</a>
-        </article>
-    </section>
-
-    <section id="baaaa" data-transition="pop" >
-        <header data-title="b" data-back="home"></header>
-             <article></article>
-    </section>
-
--->
-    <section id="sec-1"  class="popa" data-transition="slide">
-        <header class="extended">
-            <nav class="left">
-                <a href="#aside-controls" data-router="aside" data-icon="menu"></a>
-                <a href="#kitchen-sink-scroll" data-article="nav-2" data-router="aside" data-icon="heart" data-count="8"></a>
-            </nav>
-            <div class="left">
-                <span class="title with-subtitle">Javi Jiménez Villar</span>
-                <span class="subtitle">@soyjavi</span>
-            </div>
-            <nav class="right ">
-                <!--
-                <a href="#profiles" data-router="aside" data-label="User"></a>
-                <a href="#profiles" data-router="aside" data-icon="users" data-label="User"></a>
-                 -->
-                 <a href="#" data-icon="cloud" id="btn-toggle-loading"></a>
-                <a href="#profiles" data-router="aside" data-icon="user" data-count="1"></a>
-            </nav>
-
-            <nav class="right plain ">
-                <a href="#" data-loading="white disable"></a>
-                <a href="#" data-loading="white "></a>
-            </nav>
-        </header>
-
-        <nav class="groupbar">
-            <a href="#nav-1" data-router="article" class="current"  data-icon="html5">&nbsp;Lists</a>
-            <a href="#nav-2" data-router="article" data-icon="calendar">&nbsp;Form</a>
-        </nav>
-
-        <footer class="toolbar with-labels">
-            <nav>
-                <a href="#nav-0" data-router="article" data-icon="refresh" class="current" data-label="loading">
-                    <span class="bubble count" data-loading="white"></span>
-                </a>
-                <a href="#nav-1" data-router="article" data-title="d" data-icon="settings" data-label="boxes" data-count="1"></a>
-                <a href="#nav-2" data-router="article" data-title="b" data-icon="close" data-count="12" data-label="Form"></a>
-                <a href="#nav-3" data-router="article" data-title="c"  data-icon="share" data-label="Emails" data-count="123"></a>
-                <a href="#nav-4" data-router="article" data-title="lists" data-label="lists" data-loading="white"></a>
-            </nav>
-        </footer>
-
-        <!--
-        <footer class="toolbar">
-            <nav>
-                <a href="#nav-1" data-router="article" class="current"  data-icon="clock"></a>
-                <a href="#nav-2" data-router="article" data-icon="calendar" data-count="17"></a>
-                <a href="#a" data-router="article" data-icon="mail" data-count="124"></a>
-                <a href="#a" data-router="article" data-icon="phone" data-count="12"></a>
-            </nav>
-        </footer>
-        -->
-
-        <article id="nav-0" data-loading="black">
-        </article>
-
-        <article id="nav-1" class="lisst">
-            <div id = "prueba" class="five row list  " style="background: url(http://placehold.it/320x200);">
-            </div>
-
-            <div class="three row grey">
-                <div class="six row green">
-                    <div class="wrapper">
-                        <div class="right" data-icon="calendar">June 9, 2012</div>
-                        <strong>LungoJS.2 Application</strong>
-                        <small>by Javi Jimenez <div class="bubble grey">PRO</div></small>
-                    </div>
-                </div>
-
-                <div class="four row red">
-                    <a href="#" class="four columns">
-                        <div class="wrapper" data-icon="heart">217 Likes</div>
-                    </a>
-                    <a href="#" class="three columns">
-                        <div class="wrapper" data-icon="pushpin">4 Buckets</div>
-                    </a>
-                    <a href="#" class="three columns">
-                        <div class="wrapper" data-icon="picture">389 Views</div>
-                    </a>
-                </div>
-            </div>
-
-            <div class="two row  white list scroll">
-                <ul>
-                    <li class=" selectable" >
-                        <a href="#" data-image="http://placehold.it/32x32">
-
-                            <div class="right" data-icon="calendar">2 days ago</div>
-                            <strong>List: .selectable</strong>
-                            <small>a: data-image</small>
-                        </a>
-                    </li>
-
-                    <li class=" selectable" >
-                        <a href="#" data-image="http://placehold.it/32x32">
-
-                            <div class="right" data-icon="calendar">2 days ago</div>
-                            <strong>List: .selectable</strong>
-                            <small>a: data-image</small>
-                        </a>
-                    </li>
-
-                    <li class=" selectable" >
-                        <a href="#" data-image="http://placehold.it/32x32">
-
-                            <div class="right" data-icon="calendar">2 days ago</div>
-                            <strong>List: .selectable</strong>
-                            <small>a: data-image</small>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-
-        </article>
-
-        <article id="nav-2" class="list indented scroll">
-            <ul class="form minimal">
-                <li data-loading="black big"></li>
-                <li id="loading-code" style="background-color: grey;"></li>
-                <li class="padding">
-                    <label>type="text"</label>
-                    <input type="text" placeholder="Input text"/>
-                    <textarea placeholder="Textarea sample"></textarea>
-                    <label class="select">
-                        <select class="custom">
-                            <option value="1">One</option>
-                            <option value="2">Two</option>
-                            <option value="3">Three</option>
-                        </select>
-                    </label>
-                </li>
-                <li class="padding">
-                    <label class="radio"><input type="radio" name="group-0" id="radio-0" checked="checked"/></label>
-                    <label class="radio"><input type="radio" name="group-0" id="radio-1"/></label>
-                    <label class="radio"><input type="radio" name="group-0" id="radio-2"/></label>
-                </li>
-                <li  class="padding">
-                    <label class="-pop">Do you like LungoJS forms?</label>
-                    <label class="checkbox right"><input type="checkbox" id="checkbox-0" checked/></label>
-                </li>
-
-                <li class="padding">
-                    <div id="progress-normal" data-progress="25%"></div>
-                    <div id="progress-big" data-progress="50%" class="big"></div>
-                    <label>type="range"</label>
-                    <input type="range">
-                </li>
-            </ul>
-            <ul>
-                <li class="anchor " data-icon="small user">Examples of anchors</li>
-                <li class="padding">
-                    <strong>Lorem Ipsum</strong>
-                    <small>is simply dummy text of the printing and typesetting industry</small>
-                </li>
-                <li class="anchor" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
-                <li class="anchor contrast" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
-
-                <li class="anchor" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
-                <li class="anchor contrast" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
-
-
-                <li class="anchor contrast" data-icon="question small">It's a special form element you must set the label with class "select"</li>
-            </ul>
-        </article>
-
-
-
-        <article id="nav-4" class="list scroll">
-            <ul>
-                <li>
-                    <a href="#" >
-                        <strong>List: none</strong>
-                        <small>a: none</small>
-                    </a>
-                </li>
-
-                <li class=" selectable" >
-                    <a href="#" data-image="http://placehold.it/32x32">
-
-                        <div class="right" data-icon="calendar">2 days ago</div>
-                        <strong>List: .selectable</strong>
-                        <small>a: data-image</small>
-                    </a>
-                </li>
-                 <li class="arrow thumb">
-                    <a href="#" data-image="http://placehold.it/48x48">
-                        <strong>List: .arrow .thumb </strong>
-                         <small>a: data-image</small>
-                    </a>
-                </li>
-                <li class="red">
-                    <a href="#"  data-icon="home">
-                        <div class="bubble red right"><span class="icon map"></span>125m</div>
-                        <strong>List: .red</strong>
-                        <small data-icon="clock">a: data-icon & .bubble</small>
-                    </a>
-                </li>
-
-                <li class="padding" data-icon="user">
-                    <strong>List: .padding & data-icon</strong>
-                    <small><span class="icon home"></span>a: undefined</small>
-                </li>
-
-                <li class="padding">
-                    <input type="text" placeholder="Input text"/>
-                    <textarea placeholder="Textarea sample"></textarea>
-                    <label class="select">
-                        <select class="custom">
-                            <option value="1">One</option>
-                            <option value="2">Two</option>
-                            <option value="3">Three</option>
-                        </select>
-                    </label>
-                </li>
-            </ul>
-
-        </article>
-
-        <article id="nav-3" class="list indented">
-            <div>
-                <a href="#sec-2" data-router="section" class="button big" data-icon="check">Test 2</a>
-                <a href="#sec-2"  class="button big red " data-icon="check">Test 2</a>
-                <a href="#sec-2" class="button big green" data-icon="check">Test 2</a>
-            </div>
-        </article>
-    </section>
-
-
-    <section id="sec-2" data-transition="pop">
-        <header data-title="Auto title centered">
-            <nav class="left">
-                <a href="#back" data-router="section" class="cancel" data-icon="close" data-label="CANCEL"></a>
-            </nav>
-
-            <nav class="right ">
-                <a href="#" class="accept" data-icon="check" data-label="ACCEPT"></a>
-            </nav>
-        </header>
-        <article>
-            None
-        </article>
-    </section>
-
-    <!-- Lungo dependencies -->
-    <script src="../../src/lib/quo.debug.js"></script>
-    <!--
-    <script src="../../release/lungo.js"></script>
-    -->
-    <script src="../../src/Lungo.js"></script>
-    <script src="../../src/Lungo.init.js"></script>
-    <script src="../../src/Lungo.Core.js"></script>
-    <script src="../../src/Lungo.Dom.js"></script>
-    <script src="../../src/Lungo.Service.js"></script>
-    <script src="../../src/Lungo.Constants.js"></script>
-    <script src="../../src/Lungo.Element.js"></script>
-    <script src="../../src/Lungo.Events.js"></script>
-    <script src="../../src/Lungo.Notification.js"></script>
-    <script src="../../src/router/Lungo.Router.js"></script>
-    <script src="../../src/router/Lungo.Router.History.js" ></script>
-    <script src="../../src/view/Lungo.View.Resize.js"></script>
-    <script src="../../src/view/Lungo.View.Article.js" ></script>
-    <script src="../../src/view/Lungo.View.Aside.js" ></script>
-    <script src="../../src/view/Lungo.View.Element.js"></script>
-    <script src="../../src/data/Lungo.Data.Cache.js"></script>
-    <script src="../../src/data/Lungo.Data.Sql.js"></script>
-    <script src="../../src/data/Lungo.Data.Storage.js"></script>
-    <script src="../../src/attributes/Lungo.Attributes.Data.js"></script>
-    <script src="../../src/Lungo.Fallback.js"></script>
-    <script src="../../src/boot/Lungo.Boot.Resources.js" ></script>
-    <script src="../../src/boot/Lungo.Boot.Stats.js" ></script>
-    <script src="../../src/boot/Lungo.Boot.Layout.js"></script>
-    <script src="../../src/boot/Lungo.Boot.Events.js"></script>
-    <script src="../../src/boot/Lungo.Boot.Data.js"></script>
-    <script src="../../src/boot/Lungo.Boot.Section.js"></script>
-    <script src="../../src/boot/Lungo.Boot.Article.js"></script>
-
-    <!-- LungoJS - Sandbox App -->
-    <script>
-        Lungo.init({
-            name: 'Kitchen Sink',
-            version: '2.0',
-            sugars: ['map', 'pull'],
-            resources: {
-                sections: ['aside.html', 'aside-profiles.html', 'notification.html'],
-                templates: [],
-                asides: []
-            }
-        });
-    </script>
-    <script src="app/app.js"></script>
-    <script src="app/view.js"></script>
-    <script src="app/data.js"></script>
-    <script src="app/services.js"></script>
-    <script src="app/events.js"></script>
-        <script src="app/events.notification.js"></script>
-</body>
-</html>

+ 12 - 5
examples/kitchen-sink/pull.html

@@ -137,22 +137,29 @@
     <script src="../../src/Lungo.Dom.js"></script>
     <script src="../../src/Lungo.Service.js"></script>
     <script src="../../src/Lungo.Constants.js"></script>
-    <script src="../../src/Lungo.Element.js"></script>
     <script src="../../src/Lungo.Events.js"></script>
     <script src="../../src/Lungo.Notification.js"></script>
+    <script src="../../src/Lungo.Fallback.js"></script>
+
     <script src="../../src/router/Lungo.Router.js"></script>
     <script src="../../src/router/Lungo.Router.History.js" ></script>
-    <script src="../../src/view/Lungo.View.Resize.js"></script>
+
     <script src="../../src/view/Lungo.View.Article.js" ></script>
     <script src="../../src/view/Lungo.View.Aside.js" ></script>
-    <script src="../../src/view/Lungo.View.Element.js"></script>
-    <script src="../../src/view/Lungo.View.Pull.js"></script>
+
+    <script src="../../src/element/Lungo.Element.Cache.js"></script>
+    <script src="../../src/element/Lungo.Element.Carousel.js"></script>
+    <script src="../../src/element/Lungo.Element.Count.js"></script>
+    <script src="../../src/element/Lungo.Element.Loading.js"></script>
+    <script src="../../src/element/Lungo.Element.Progress.js"></script>
+    <script src="../../src/element/Lungo.Element.Pull.js"></script>
 
     <script src="../../src/data/Lungo.Data.Cache.js"></script>
     <script src="../../src/data/Lungo.Data.Sql.js"></script>
     <script src="../../src/data/Lungo.Data.Storage.js"></script>
+
     <script src="../../src/attributes/Lungo.Attributes.Data.js"></script>
-    <script src="../../src/Lungo.Fallback.js"></script>
+
     <script src="../../src/boot/Lungo.Boot.Resources.js" ></script>
     <script src="../../src/boot/Lungo.Boot.Stats.js" ></script>
     <script src="../../src/boot/Lungo.Boot.Layout.js"></script>

+ 48 - 9
examples/kitchen-sink/test.html

@@ -51,17 +51,27 @@
 
         <footer>
             <nav class="with-labelss">
-                <a href="#layout-art1" data-router="article" data-label="Home" data-icon="home"></a>
-                <a href="#layout-art2" data-router="article" data-label="Inbox" data-icon="inbox" class="current"  data-count="2"></a>
+                <a href="#layout-art1" data-router="article" data-label="Home" data-icon="home" class="current"></a>
+                <a href="#layout-art2" data-router="article" data-label="Inbox" data-icon="inbox"  data-count="2"></a>
                 <a href="#layout-art3" data-router="article" data-label="Profile" data-icon="user"></a>
-                <a href="#layout-art4" data-router="article" data-label="Settings" data-icon="settings"></a>
+                <a href="#layout-art4" id="bb"  data-router="article" data-label="Settings" data-icon="settings"></a>
             </nav>
         </footer>
 
         <article id="layout-art1" class="padding scroll">
 
+            <form>
+                <label>Progress</label>
+                <div id="kaka" data-progress="30%"></div>
+
+                <div data-loading="black"></div>
+
+                <div id="cargador"></div>
+            </form>
+        </article>
+        <article id="layout-art2">
+
         </article>
-        <article id="layout-art2"></article>
         <article id="layout-art3"></article>
         <article id="layout-art4"></article>
     </section>
@@ -72,25 +82,34 @@
     <script src="../../release/lungo.js"></script>
     -->
     <script src="../../src/Lungo.js"></script>
-    <script src="../../src/Lungo.init.js"></script>
+    <script src="../../src/Lungo.Init.js"></script>
     <script src="../../src/Lungo.Core.js"></script>
     <script src="../../src/Lungo.Dom.js"></script>
     <script src="../../src/Lungo.Service.js"></script>
     <script src="../../src/Lungo.Constants.js"></script>
-    <script src="../../src/Lungo.Element.js"></script>
     <script src="../../src/Lungo.Events.js"></script>
     <script src="../../src/Lungo.Notification.js"></script>
+    <script src="../../src/Lungo.Fallback.js"></script>
+
     <script src="../../src/router/Lungo.Router.js"></script>
     <script src="../../src/router/Lungo.Router.History.js" ></script>
-    <script src="../../src/view/Lungo.View.Resize.js"></script>
+
     <script src="../../src/view/Lungo.View.Article.js" ></script>
     <script src="../../src/view/Lungo.View.Aside.js" ></script>
-    <script src="../../src/view/Lungo.View.Element.js"></script>
+
+    <script src="../../src/element/Lungo.Element.Cache.js"></script>
+    <script src="../../src/element/Lungo.Element.Carousel.js"></script>
+    <script src="../../src/element/Lungo.Element.Count.js"></script>
+    <script src="../../src/element/Lungo.Element.Loading.js"></script>
+    <script src="../../src/element/Lungo.Element.Progress.js"></script>
+    <script src="../../src/element/Lungo.Element.Pull.js"></script>
+
     <script src="../../src/data/Lungo.Data.Cache.js"></script>
     <script src="../../src/data/Lungo.Data.Sql.js"></script>
     <script src="../../src/data/Lungo.Data.Storage.js"></script>
+
     <script src="../../src/attributes/Lungo.Attributes.Data.js"></script>
-    <script src="../../src/Lungo.Fallback.js"></script>
+
     <script src="../../src/boot/Lungo.Boot.Resources.js" ></script>
     <script src="../../src/boot/Lungo.Boot.Stats.js" ></script>
     <script src="../../src/boot/Lungo.Boot.Layout.js"></script>
@@ -102,6 +121,26 @@
     <!-- LungoJS - Sandbox App -->
     <script>
         Lungo.init();
+
+        Lungo.Element.count('#bb', 29);
+        setTimeout(function(){
+            Lungo.Element.count('#bb', 0);
+        }, 1000);
+
+
+
+        setTimeout(function(){
+            Lungo.Element.progress('#kaka', 70);
+        }, 300);
+
+        setTimeout(function(){
+            Lungo.Element.loading('#cargador', "white");
+        }, 300);
+
+
+        setTimeout(function(){
+            Lungo.Element.loading('#cargador', null);
+        }, 1300);
     </script>
 </body>
 </html>

+ 2 - 1
src/Lungo.Constants.js

@@ -56,7 +56,8 @@ Lungo.Constants = {
     BINDING: {
         START: '{{',
         END: '}}',
-        KEY: 'value'
+        KEY: 'value',
+        SELECTOR: '{{value}}'
     },
 
     ERROR: {

+ 1 - 0
src/Lungo.js

@@ -25,6 +25,7 @@ var Lungo = Lungo || {};
 Lungo.VERSION = '2.0';
 
 Lungo.Attributes || (Lungo.Attributes = {});
+Lungo.Element || (Lungo.Element = {});
 Lungo.Data || (Lungo.Data = {});
 Lungo.Sugar || (Lungo.Sugar = {});
 Lungo.View || (Lungo.View = {});

+ 1 - 1
src/attributes/Lungo.Attributes.Data.js

@@ -23,7 +23,7 @@ Lungo.Attributes.Data = {
         tag: 'progress',
         selector: '*',
         html: '<div class="progress">\
-                    <span class="bar"><span class="value" style="width:{{value}};"><span class="label"></span></span></span>\
+                    <span class="bar"><span class="value" style="width:{{value}};"></span></span>\
                 </div>'
     },
     Label: {

+ 1 - 1
src/boot/Lungo.Boot.Events.js

@@ -79,7 +79,7 @@ Lungo.Boot.Events = (function(lng, undefined) {
         if (id === '#back') {
             lng.Router.back();
         } else {
-            var aside = lng.Element.Current.aside;
+            var aside = lng.Element.Cache.aside;
             if (aside && aside.hasClass(CLASS.SHOW)) {
                 setTimeout(function(){
                     lng.Router.section(id);

+ 10 - 12
src/boot/Lungo.Boot.Section.js

@@ -24,14 +24,12 @@ Lungo.Boot.Section = (function(lng, undefined) {
         _initFirstSection();
         _initAllSections();
         _initAllAsides();
-
-        lng.View.Resize.navigation();
     };
 
     var _initFirstSection = function() {
-        var first_section = lng.Element.sections.first();
-        lng.Element.Current.section = first_section;
-        lng.Element.Current.article = first_section.children(ELEMENT.ARTICLE).first();
+        var first_section = lng.Element.Cache.sections.first();
+        lng.Element.Cache.section = first_section;
+        lng.Element.Cache.article = first_section.children(ELEMENT.ARTICLE).first();
 
         var first_section_id = '#' + first_section.attr(ATTRIBUTE.ID);
         first_section.addClass(CLASS.CURRENT);
@@ -40,23 +38,23 @@ Lungo.Boot.Section = (function(lng, undefined) {
 
     var _initAllSections = function() {
         //@todo: position fixed
-        //lng.Fallback.positionFixed(lng.Element.sections);
+        //lng.Fallback.positionFixed(lng.Element.Cache.sections);
 
-        for (var i = 0, len = lng.Element.sections.length; i < len; i++) {
+        for (var i = 0, len = lng.Element.Cache.sections.length; i < len; i++) {
             _initArticles(i);
         }
     };
 
     var _initAllAsides = function() {
         var aside = null;
-        for (var i = 0, len = lng.Element.asides.length; i < len; i++) {
-            aside = lng.dom(lng.Element.asides[i]);
+        for (var i = 0, len = lng.Element.Cache.asides.length; i < len; i++) {
+            aside = lng.dom(lng.Element.Cache.asides[i]);
             aside.children(ELEMENT.ARTICLE).addClass(CLASS.CURRENT);
         }
     };
 
     var _initArticles = function(section_index) {
-        var section = lng.dom(lng.Element.sections[section_index]);
+        var section = lng.dom(lng.Element.Cache.sections[section_index]);
 
         var first_article = section.children(ELEMENT.ARTICLE).first();
         first_article.addClass(CLASS.CURRENT);
@@ -66,8 +64,8 @@ Lungo.Boot.Section = (function(lng, undefined) {
     };
 
     var _cacheDOMElements = function() {
-        lng.Element.sections = lng.dom(ELEMENT.SECTION);
-        lng.Element.asides = lng.dom(ELEMENT.ASIDE);
+        lng.Element.Cache.sections = lng.dom(ELEMENT.SECTION);
+        lng.Element.Cache.asides = lng.dom(ELEMENT.ASIDE);
     };
 
     return {

+ 7 - 7
src/Lungo.Element.js

@@ -7,14 +7,14 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-Lungo.Element = {
-
+Lungo.Element.Cache = {
     sections: null,
-    Current: {
-        section: null,
-        article: null,
-        aside: null
-    },
+    section: null,
+
+    article: null,
+
     asides: null,
+    aside: null,
+
     navigation: null
 };

+ 3 - 3
src/view/Lungo.View.Carousel.js

@@ -10,7 +10,7 @@
  */
 
 
-Lungo.View.Carousel = function(element, callback) {
+Lungo.Element.Carousel = function(element, callback) {
 
     var _instance = {
         index: 0,
@@ -27,7 +27,7 @@ Lungo.View.Carousel = function(element, callback) {
         deltaX: 0
     };
 
-    var getPos = function() {
+    var position = function() {
         return _instance.index;
     };
 
@@ -154,6 +154,6 @@ Lungo.View.Carousel = function(element, callback) {
     return {
         prev: prev,
         next: next,
-        getPos: getPos
+        position: position
     };
 };

+ 22 - 0
src/element/Lungo.Element.Count.js

@@ -0,0 +1,22 @@
+/**
+  * Set a counter to the element
+ *
+ * @namespace Lungo.Element
+ * @class count
+ *
+ * @param  {string} Element query selector
+ * @param  {number} Value for counter
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+Lungo.Element.count = function(selector, count) {
+    var element = Lungo.dom(selector);
+    element.children('.bubble.count').remove();
+
+    if (element && count) {
+        var binding = Lungo.Constants.BINDING.SELECTOR;
+        html = Lungo.Attributes.Data.Count.html.replace(binding, count);
+        element.append(html);
+    }
+};

+ 25 - 0
src/element/Lungo.Element.Loading.js

@@ -0,0 +1,25 @@
+/**
+ * Initialize the <articles> layout of a certain <section>
+ *
+ * @namespace Lungo.Element
+ * @method loading
+ *
+ * @param  {string}  Element query selector
+ * @param  {number}  stylesheet (null for hide)
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+Lungo.Element.loading = function(selector, stylesheet) {
+    var element = Lungo.dom(selector);
+
+    if (element) {
+        var html = null;
+
+        if (stylesheet) {
+            var binding = Lungo.Constants.BINDING.SELECTOR;
+            html = Lungo.Attributes.Data.Loading.html.replace(binding, stylesheet);
+        }
+        element.html(html);
+    }
+};

+ 20 - 0
src/element/Lungo.Element.Progress.js

@@ -0,0 +1,20 @@
+/**
+ * Set a progress to the element
+ *
+ * @namespace Lungo.Element
+ * @method Progress
+ *
+ * @param  {string}  Element query selector
+ * @param  {number}  Percentage
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+Lungo.Element.progress = function(selector, percentage) {
+    var element = Lungo.dom(selector);
+
+    if (element) {
+        percentage += Lungo.Constants.ATTRIBUTE.PERCENT;
+        element.find('.value').style(Lungo.Constants.ATTRIBUTE.WIDTH, percentage);
+    }
+};

+ 3 - 3
src/view/Lungo.View.Pull.js

@@ -1,7 +1,7 @@
 /**
  * PULL & REFRESH
  *
- * @namespace Lungo.View
+ * @namespace Lungo.Element
  * @class Pull
  * @version 1.0
  *
@@ -9,7 +9,7 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-Lungo.View.Pull = function(element_selector, config_data) {
+Lungo.Element.Pull = function(element_selector, config_data) {
 
     var REFRESHING_HEIGHT = 60;
     var MAX_HEIGHT = 100;
@@ -106,4 +106,4 @@ Lungo.View.Pull = function(element_selector, config_data) {
     return {
         hide: hide
     };
-};
+};

+ 12 - 12
src/router/Lungo.Router.js

@@ -26,10 +26,10 @@ Lungo.Router = (function(lng, undefined) {
      */
     var section = function(section_id) {
         section_id = lng.Core.parseUrl(section_id);
-        var current =  lng.Element.Current.section;
+        var current =  lng.Element.Cache.section;
 
         if (_notCurrentTarget(section_id, current)) {
-            var target = lng.Element.sections.siblings(ELEMENT.SECTION + section_id);
+            var target = lng.Element.Cache.sections.siblings(ELEMENT.SECTION + section_id);
             if (target.length > 0) {
 
                 target_transition = target.data('transition');
@@ -40,8 +40,8 @@ Lungo.Router = (function(lng, undefined) {
 
                 current.removeClass(CLASS.SHOW).addClass(CLASS.HIDE);
                 target.addClass(CLASS.SHOW);
-                lng.Element.Current.section = target;
-                lng.Element.Current.article = target.find(ELEMENT.ARTICLE + '.' + CLASS.CURRENT);
+                lng.Element.Cache.section = target;
+                lng.Element.Cache.article = target.find(ELEMENT.ARTICLE + '.' + CLASS.CURRENT);
 
                 lng.Router.History.add(section_id);
                 _sectionTriggers(current, target);
@@ -60,23 +60,23 @@ Lungo.Router = (function(lng, undefined) {
     var article = function(section_id, article_id, element) {
         article_id = lng.Core.parseUrl(article_id);
 
-        var current =  lng.Element.Current.article;
+        var current =  lng.Element.Cache.article;
 
         if (_notCurrentTarget(article_id, current)) {
             section(section_id);
-            var target = lng.Element.Current.section.find(ELEMENT.ARTICLE + article_id);
+            var target = lng.Element.Cache.section.find(ELEMENT.ARTICLE + article_id);
 
             if (target.length > 0) {
                 if (_sectionId(current) === _sectionId(target)) {
                     current.removeClass(CLASS.CURRENT);
                 } else {
-                    lng.Element.Current.section.children(ELEMENT.ARTICLE).removeClass(CLASS.CURRENT);
+                    lng.Element.Cache.section.children(ELEMENT.ARTICLE).removeClass(CLASS.CURRENT);
                 }
                 target.addClass(CLASS.CURRENT);
-                lng.Element.Current.article = target;
+                lng.Element.Cache.article = target;
 
                 lng.View.Article.switchNavItems(article_id);
-                lng.View.Article.switchReferenceItems(article_id, lng.Element.Current.section);
+                lng.View.Article.switchReferenceItems(article_id, lng.Element.Cache.section);
 
                 if (element) lng.View.Article.title(element.data(ATTRIBUTE.TITLE));
             }
@@ -102,15 +102,15 @@ Lungo.Router = (function(lng, undefined) {
      * @method back
      */
     var back = function() {
-        var current = lng.Element.Current.section;
+        var current = lng.Element.Cache.section;
         current.removeClass(CLASS.SHOW);
 
         lng.Router.History.removeLast();
-        target = lng.Element.sections.siblings(ELEMENT.SECTION + lng.Router.History.current());
+        target = lng.Element.Cache.sections.siblings(ELEMENT.SECTION + lng.Router.History.current());
 
         _assignTransition(target, target.data('transition-origin'));
         target.removeClass(CLASS.HIDE).addClass(CLASS.SHOW);
-        lng.Element.Current.section = target;
+        lng.Element.Cache.section = target;
 
         _sectionTriggers(current, target);
     };

+ 5 - 5
src/view/Lungo.View.Article.js

@@ -28,7 +28,7 @@ Lungo.View.Article = (function(lng, undefined) {
      */
     var title = function(value) {
         if (value) {
-            lng.Element.Current.section.find(SELECTORS.TITLE_OF_ARTICLE).text(value);
+            lng.Element.Cache.section.find(SELECTORS.TITLE_OF_ARTICLE).text(value);
         }
         //@todo: Fallback android Inputs
         //lng.Fallback.androidInputs(current_active_article_id, false);
@@ -36,13 +36,13 @@ Lungo.View.Article = (function(lng, undefined) {
     };
 
     var switchNavItems = function(article_id) {
-        lng.Element.Current.section.find(SELECTORS.NAVIGATION_ITEM).removeClass(CLASS.CURRENT);
+        lng.Element.Cache.section.find(SELECTORS.NAVIGATION_ITEM).removeClass(CLASS.CURRENT);
 
         var active_nav_items = 'a[href="' + article_id + '"][data-router="article"]';
-        lng.Element.Current.section.find(active_nav_items).addClass(CLASS.CURRENT);
+        lng.Element.Cache.section.find(active_nav_items).addClass(CLASS.CURRENT);
 
-        if (lng.Element.Current.aside) {
-            aside = lng.Element.Current.aside;
+        if (lng.Element.Cache.aside) {
+            aside = lng.Element.Cache.aside;
 
             aside.find(SELECTORS.ASIDE_REFERENCE_LIST).removeClass(CLASS.CURRENT);
             aside.find(active_nav_items).addClass(CLASS.CURRENT).parent().addClass(CLASS.CURRENT);

+ 10 - 10
src/view/Lungo.View.Aside.js

@@ -43,11 +43,11 @@ Lungo.View.Aside = (function(lng, undefined) {
     var show = function(aside) {
         if (lng.Core.toType(aside) == 'string') aside = _findAside(lng.Core.parseUrl(aside));
         if (aside) {
-            lng.Element.Current.aside = aside;
+            lng.Element.Cache.aside = aside;
             var aside_stylesheet = _asideStylesheet(aside);
 
             aside.addClass(CLASS.SHOW);
-            lng.Element.Current.section.addClass(aside_stylesheet).addClass(CLASS.ASIDE);
+            lng.Element.Cache.section.addClass(aside_stylesheet).addClass(CLASS.ASIDE);
         }
 
         aside = null;
@@ -59,34 +59,34 @@ Lungo.View.Aside = (function(lng, undefined) {
      * @method hide
      */
     var hide = function() {
-        var aside = lng.Element.Current.aside;
+        var aside = lng.Element.Cache.aside;
         if (aside) {
-            lng.Element.Current.section.removeClass(CLASS.ASIDE).removeClass(CLASS.RIGHT).removeClass(CLASS.SMALL);
+            lng.Element.Cache.section.removeClass(CLASS.ASIDE).removeClass(CLASS.RIGHT).removeClass(CLASS.SMALL);
 
             var aside_stylesheet = _asideStylesheet(aside);
             if (aside_stylesheet) {
-                lng.Element.Current.section.removeClass(aside_stylesheet);
+                lng.Element.Cache.section.removeClass(aside_stylesheet);
             }
 
             setTimeout(function() {
                 aside.removeClass(CLASS.SHOW);
-                lng.Element.Current.aside = null;
+                lng.Element.Cache.aside = null;
             }, 250);
         }
     };
 
     var _findAside = function(aside_id) {
         var aside = null;
-        var asides_length = lng.Element.asides.length;
+        var asides_length = lng.Element.Cache.asides.length;
 
         if (asides_length == 1) {
-            var current_id = '#' + lng.Element.asides[0].id ;
+            var current_id = '#' + lng.Element.Cache.asides[0].id ;
             if (current_id == aside_id) {
-                aside = lng.dom(lng.Element.asides[0]);
+                aside = lng.dom(lng.Element.Cache.asides[0]);
             }
         }
         else if (asides_length > 1) {
-            aside = lng.Element.asides.siblings(ELEMENT.ASIDE + aside_id);
+            aside = lng.Element.Cache.asides.siblings(ELEMENT.ASIDE + aside_id);
         }
 
         return aside;

+ 0 - 104
src/view/Lungo.View.Element.js

@@ -1,104 +0,0 @@
-/**
- * Initialize the <articles> layout of a certain <section>
- *
- * @namespace Lungo.View
- * @class Element
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-Lungo.View.Element = (function(lng, undefined) {
-
-    var ATTRIBUTE = lng.Constants.ATTRIBUTE;
-    var BINDING = lng.Constants.BINDING;
-    var SELECTORS = {
-        BUBBLE: '.bubble.count',
-        PROGRESS_VALUE: ' .value',
-        PROGRESS_PERCENTAGE: ' .value .label'
-    };
-
-    /**
-     * Set a counter to the element
-     *
-     * @method count
-     *
-     * @param  {string} Element query selector
-     * @param  {number} Value for counter
-     */
-    var count = function(selector, count) {
-        var element = lng.dom(selector);
-
-        if (element) {
-            if (count > 0) {
-                _setBubble(element, count);
-            } else {
-                element.children(SELECTORS.BUBBLE).remove();
-            }
-        }
-    };
-
-    /**
-     * Set a progress to the element
-     *
-     * @method progress
-     *
-     * @param  {string}  Element query selector
-     * @param  {number}  Percentage
-     * @param  {boolean} Show the labels: description and current percentage
-     * @param  {string}  Description
-     */
-    var progress = function(selector, percentage, with_label) {
-        var element = lng.dom(selector);
-
-        if (element) {
-            percentage += ATTRIBUTE.PERCENT;
-
-            lng.dom(selector + SELECTORS.PROGRESS_VALUE).style(ATTRIBUTE.WIDTH, percentage);
-            lng.dom(selector + SELECTORS.PROGRESS_PERCENTAGE).html((with_label) ? percentage : ATTRIBUTE.EMPTY);
-        }
-    };
-
-    /**
-     * Set a progress to the element
-     *
-     * @method loading
-     *
-     * @param  {string}  Element query selector
-     * @param  {number}  stylesheet (null for hide)
-     */
-    var loading = function(selector, stylesheet) {
-        var element = lng.dom(selector);
-
-        if (element) {
-            if (stylesheet) {
-                _bindAttribute(element, Lungo.Attributes.Data.Loading, stylesheet);
-            }
-            else {
-                element.children('.loading').remove();
-            }
-        }
-    };
-
-    var _setBubble = function(element, count) {
-        var bubbles = element.children(SELECTORS.BUBBLE);
-        var total_bubbles = bubbles.length;
-
-        if (total_bubbles > 0) {
-            bubbles.html(count);
-        } else {
-            _bindAttribute(element, Lungo.Attributes.Data.Count, count);
-        }
-    };
-
-    var _bindAttribute = function(element, attribute, data) {
-        var html_binded = attribute.html.replace(BINDING.START + BINDING.KEY + BINDING.END, data);
-        element.append(html_binded);
-    };
-
-    return {
-        count: count,
-        progress: progress,
-        loading: loading
-    };
-
-})(Lungo);

+ 12 - 2
vendor/build.sh

@@ -19,7 +19,7 @@ echo -e "\033[0m"============================ LUNGO COMPILER ===================
     #Main
     DIR=$LUNGO_SOURCES$LUNGO_NAMESPACE
     echo -e "\033[33m  [DIR]: "$LUNGO_SOURCES
-    FILES=(js Init.js Core.js Dom.js Service.js Constants.js Element.js Events.js Notification.js Fallback.js)
+    FILES=(js Init.js Core.js Dom.js Service.js Constants.js Events.js Notification.js Fallback.js)
     for file in "${FILES[@]}"
     do
         FILES_TO_COMPILE=$FILES_TO_COMPILE" --js "$DIR$file
@@ -39,7 +39,17 @@ echo -e "\033[0m"============================ LUNGO COMPILER ===================
     #View
     DIR=$LUNGO_SOURCES"view/"$LUNGO_NAMESPACE"View."
     echo -e "\033[33m  [DIR]: "$LUNGO_SOURCES"view/"
-    FILES=(Article.js Aside.js Element.js)
+    FILES=(Article.js Aside.js)
+    for file in "${FILES[@]}"
+    do
+        FILES_TO_COMPILE=$FILES_TO_COMPILE" --js "$DIR$file
+        FILES_TO_JOIN=$FILES_TO_JOIN" "$DIR$file
+    done
+
+    #View
+    DIR=$LUNGO_SOURCES"element/"$LUNGO_NAMESPACE"Element."
+    echo -e "\033[33m  [DIR]: "$LUNGO_SOURCES"element/"
+    FILES=(Cache.js Carousel.js Count.js Loading.js Progress.js Pull.js)
     for file in "${FILES[@]}"
     do
         FILES_TO_COMPILE=$FILES_TO_COMPILE" --js "$DIR$file