pwa
/
Lungo.js
mirror de https://github.com/tapquo/Lungo.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531
							<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Lungo Flexbox - SDK</title>
    <meta name="description" content="">
    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, 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">
    <meta http-equiv="cleartype" content="on">

    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
    <link rel="stylesheet" href="components/lungo.brownie/lungo.theme.css">
    <link rel="stylesheet" href="components/lungo.icon/lungo.icon.css">
</head>

<body class="app">


<section id="form" data-transition="slide">
    <header data-title="Form Elements" data-back="home">
        <nav class="right">
            <button data-label="test"></button>
            <button data-icon="edit"></button>
        </nav>
    </header>

    <nav data-control="groupbar">
        <a href="#" data-view-article="form-normal" data-label="Normal" class="active"></a>
        <a href="#" data-view-article="form-indented" data-label="Indented"></a>
        <a href="#" data-view-article="form-special" data-label="Specials"></a>
    </nav>

    <article id="form-normal" class="scroll">
        <div class="form">
            <!-- LABEL + INPUT -->
            <fieldset>
                <label>label</label>
                <input type="text" placeholder="value">

                <label>label</label>
                <input type="text" placeholder="value on right" class="text align_right error">

                <label class="absolute">label</label>
                <input type="text" placeholder="value on center" class="large text  bold align_center">

                <label>label</label>
                <label class="select ">
                    <select class="custom">
                        <option value="1">HTML5 Jedi</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>
                </label>

                <label>label</label>
                <input type="date" class="align_right" placeholder="Select finish" value="10/04/1980"/>
            </fieldset>


            </fieldset>
            <!-- INPUT -->
            <fieldset>
                <input type="text" id="description" class="text align_center" placeholder="value"/>
            </fieldset>
            <fieldset>
                <textarea placeholder="Write something..."></textarea>
            </fieldset>
            <fieldset>
                <label class="select">
                    <select class="custom">
                        <option value="1">HTML5 Jedi</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>
                </label>
            </fieldset>

            <fieldset>
                <input type="date" class="align_right" placeholder="Select finish" value="10/04/1980"/>
            </fieldset>

            <fieldset>
                <label class="anchor">label Lorem ipsum dolor sit amet</label>
                 <div data-control-checkbox="check" class="inline right"></div>
             </fieldset>

            <fieldset data-icon="plus">
                <label>label</label>
                <input type="text" value="value" />
            </fieldset>
        </div>
    </article>

    <article id="form-indented" class="indented scroll">
        <div class="form">
            <!-- LABEL + INPUT -->
            <label>label +  input</label>
            <fieldset class="radius shadow">
                <label>label</label>
                <input type="text" placeholder="value">

                <label>label</label>
                <input type="text" placeholder="value on right" class="text align_right error">

                <label class="absolute">label</label>
                <input type="text" placeholder="value on center" class="large text align_center">

                <label>label</label>
                <label class="select ">
                    <select class="custom">
                        <option value="1">HTML5 Jedi</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>
                </label>

                <label>label</label>
                <input type="date" class="align_right" placeholder="Select date" value="10/04/1980"/>
            </fieldset>

            <!-- INPUT -->
            <label>input</label>
            <fieldset class="radius-top">
                <input type="text" id="description" class="text align_center" placeholder="value"/>
            </fieldset>
            <fieldset>
                <textarea placeholder="Write something..."></textarea>
            </fieldset>
            <fieldset>
                <label class="select">
                    <select class="custom">
                        <option value="1">HTML5 Jedi</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>
                </label>
            </fieldset>


            <fieldset>
                <label class="anchor">label Lorem ipsum dolor sit amet</label>
                <div data-control-checkbox="check_indent" class="inline right"></div>
             </fieldset>


            <fieldset class="radius-bottom shadow">
                <input type="date" class="align_right" placeholder="Select finish" value="10/04/1980"/>
            </fieldset>


            <label>label + input +  icon</label>
            <fieldset data-icon="plus">
                <label>label</label>
                <input type="text" value="value" />
            </fieldset>
        </div>
    </article>

    <article id="form-special" class=" indented scroll">
        <div class="form" >
            <label>Specials</label>
            <fieldset data-icon="search">
                <input type="search" placeholder="Search..."/>
            </fieldset>


            <label>Address</label>
            <input type="text" placeholder="placeholder" class="border" />
            <input type="text" placeholder="placeholder" class="border error" value="error" />
            <input type="text" placeholder="placeholder" class="border success" value="success" />

            <div class="layout horizontal">
                <div data-layout="third">
                    <label>Address</label>
                    <input type="text" placeholder="placeholder" class="border" />
                </div>
                <div data-layout="primary">
                    <label>Pin Code</label>
                    <input type="password" value="value" class="border" disabled/>
                </div>
            </div>

            <label>Select your skill</label>
            <label class="select border">
                <select>
                    <option value="1">HTML5 Jedi</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
            </label>

            <label>Progress</label>
            <div id="progress-normal" data-progress="25%"></div>

            <label>Range</label>
            <input type="range" placeholder="type your name" min="0" max="8" />


            <label>Checkbox</label>
            <div class="layout horizontal">
                <div>
                    <div data-control-checkbox="normal"></div>
                </div>
                <div>
                    <div data-control-checkbox="twit-example" class="twitter"></div>
                </div>
                <div>
                    <div data-control-checkbox="ok-example" class="ok"></div>
                </div>
            </div>
            <br/>

            <button class="anchor margin-bottom" data-label="Normal"></button>
            <button class="anchor accept margin-bottom" data-icon="ok" data-label="Accept"></button>
            <button class="anchor cancel margin-bottom" data-icon="remove" data-label="Cancel"></button>
            <button class="anchor secondary margin-bottom" data-icon="plus" data-label="Secondary"></button>
            <button class="anchor disabled" data-label="Disabled"></button>
        </div>
    </article>
</section>

    <section id="main" data-transition="slide" data-aside="features" data-children="folk">
        <header>
            <nav class="left">
                <a href="#" data-view-aside="features" data-icon="menu"></a>
                <a href="#" data-view-menu="options" data-icon="star"></a>
                <a href="#" data-icon="user" class="button" data-article="products" data-label="Folks" data-view-article="folks"></a>
                <a href="#" class="button" data-article="products" data-label="Folks" data-view-article="folks"></a>
                <a href="#" data-icon="user" class="button" data-article="products" data-view-article="folks"></a>
            </nav>

            <div class="title centered">Folks</div>

            <nav class="right">
                <button data-icon="user" class="button" data-article="folks" data-label="Products" data-view-article="products" data-async="static/articles/products.html"></button>
            </nav>
        </header>

        <nav id="options" data-control="menu" class="icons">
            <a href="#" data-view-article="folks" data-icon="star" data-title="Folks">Folks</a>
            <a href="#" data-view-article="products" data-icon="heart" data-title="Explore">Explore</a>
            <a href="#" data-view-article="article" data-icon="comments">Activity</a>
            <a href="#" data-view-article="article" data-icon="user">Profile</a>
            <a href="#" data-view-section="folk" data-icon="thumbs-up">Folk</a>
        </nav>

        <nav data-control="groupbar" data-article="folks">
            <a href="#" data-view-article="folks" data-label="Folks" data-count="11"></a>
            <a href="#" data-view-article="products" data-async="static/articles/products.html" data-label="Products" id="products"></a>
        </nav>

        <article id="folks" class="active list scroll indente-d">
            <ul>
                <li class="thumb selectable arrow" data-view-section="folk" data-image="http://cdn.tapquo.com/photos/javi.jpg">
                    <a href="#" >
                        <strong>Javi Jiménez</strong>
                        <small>Founder & CTO</small>
                    </a>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/ina.jpg">
                    <strong>Ignacio Olalde</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/aitor.jpg">
                    <strong>Aitor Jimenez</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/manrique.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/josu.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/inigo.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/jany.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/german.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/cata.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/oihane.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/aritz.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
            </ul>
        </article>

        <article id="sub">
            sub
        </article>

        <!--
        <article id="products" class="list scroll">
            <ul>
                <li class="selectable" data-image="http://cdn.tapquo.com/lungo/icon-144.png">
                    <a href="#" data-view-section="quojs">
                        <strong>QuoJS</strong>
                        <small>Micro Mobile JavaScript Library</small>
                    </a>
                </li>
                <li data-image="http://cdn.tapquo.com/lungo/icon-144.png" data-view-section="list"  data-async="static/sections/list.html">
                    <strong>TukTuk</strong>
                    <small>Lorem ipsum dolor sit amet</small>
                </li>
                <li data-image="http://cdn.tapquo.com/lungo/icon-144.png">
                    <strong>Monocle</strong>
                    <small>Lorem ipsum dolor sit amet</small>
                </li>
                <li data-image="http://cdn.tapquo.com/lungo/icon-144.png">
                    <strong>LungoJS</strong>
                    <small>Lorem ipsum dolor sit amet</small>
                </li>
            </ul>
        </article>
        -->

        <footer>
            <nav>
                <a href="#" data-view-article="folks" data-icon="desktop" data-count="11"></a>
                <a href="#" data-view-article="products" data-icon="tablet" data-count="5"></a>
            </nav>
        </footer>
    </section>

    <section id="test">
        <header data-title="Test" data-back="home"></header>
        <article></article>
    </section>

    <section id='folk' data-transition="slide" data-aside="features" data-children="x">
        <header data-title='Javi Jimenez'>
            <nav>
                <a href="#" data-view-section="back" data-label="Back" class="button"></a>
            </nav>
        </header>

        <article id='f1' class='active list scroll'>
            <ul>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
            </ul>

        </article>
    </section>


    <section id='quojs' data-transition="slide" data-aside="features2">
        <header data-title='QuoJS'>
            <nav>
                <a href="#" data-view-section="back" data-label="Back" class="button"></a>
            </nav>
        </header>
        <article id='q1' class='active'></article>
    </section>


    <aside id="features" >
        <header data-title="Features">
            <nav class="right">
                <a href="#" class="buttons" data-icon="settings"></a>
            </nav>
        </header>

        <article class="list scroll active">
            <ul>
                <!-- Basic Layout -->
                <li data-view-article="folks" data-title="Profile" data-icon="user">
                    <a href="#">
                        <div class="tag right">11</div>
                        <strong>Folks</strong>
                        <small>Discover our team!</small>
                    </a>
                </li>

                <li data-view-article="products" data-title="Third Parties" data-async="static/articles/products.html">
                    <div class="tag right">5</div>
                    <strong>Products</strong>
                    <small>Fueled by coffee</small>
                </li>
                <li data-view-section="test" data-icon="desktop">
                    <strong>Section TEST</strong>
                </li>

                <li data-view-section="folk" data-view-article="f1" data-icon="desktop">
                    <div class="tag right">5</div>
                    <strong>Folk F1</strong>
                    <small>Fueled by coffee</small>
                </li>
            </ul>
        </article>
    </aside>

    <aside id="features2" class="right">
        <header data-title="Features 2"></header>

        <article class="list scroll active">
            <ul>
                <!-- Basic Layout -->
                <li class="active">
                    <a href="#layout-art1" data-router="article" data-title="Profile" class="active">
                        <strong>Profile</strong></a>
                </li>
            </ul>
        </article>
    </aside>

    <!-- Lungo dependencies -->
    <script src="components/quojs/quo.js"></script>
    <script src="components/lungo.brownie/lungo.debug.js"></script>

    <!-- LungoJS - Sandbox App -->
    <script>
        Lungo.init({
            name: 'Flexbox',
            version: '2.2',
            history: false
            //,
            // resources: ['static/sections/list.html']
        });

        Lungo.ready(function() {
            // Lungo.Router.article("main", "sub");
            Lungo.Element.count("section#main nav #products", 5);

                // Lungo.Notification.success('Title', 'Description', 'ok', 10000);

            // Lungo.Notification.push("Connection stablished.", "ok");


            // setTimeout(function() {
            //     Lungo.Notification.show();
            // }, 2000);
            // setTimeout(function() {
            //     Lungo.Notification.error('Title', 'Description', 'ok', 10000);
            // }, 4000);


            // Lungo.Article.clean("form-normal", "edit", "Form empty", "Please check if you have an internet connection.", "Ok, I'll check tomorrow")
            // Lungo.Article.clean("form-normal")
        });


        // Lungo.Notification.show("hola", "user");

        // Lungo.Notification.show();


        // Lungo.Notification.confirm({
        //     icon: 'user',
        //     title: 'Lorem ipsum dolor sit amet, consectetur adipisicing.',
        //     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo amet nulla dolorum hic eum debitis dolorem expedita? Commodi molestiae tempora totam explicabo sed deserunt cum iusto eos perspiciatis ea in.',
        //     accept: {
        //         icon: 'checkmark',
        //         label: 'Accept',
        //         callback: function(){ alert("Yes!"); }
        //     },
        //     cancel: {
        //         icon: 'close',
        //         label: 'Cancel',
        //         callback: function(){ alert("No!"); }
        //     }
        // });


    </script>
</body>
</html>