Home Esplora Aiuto
Accedi
pwa
/
Lungo.js
mirror da https://github.com/tapquo/Lungo.js.git
2
0
Forka 0
File Problemi 0 Wiki
Sfoglia il codice sorgente

First version of data-control-checkbox

Javi Jimenez Villar 13 anni fa
parent
ac3e96dc51
commit
070d40e5a9
4 ha cambiato i file con 252 aggiunte e 58 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 184 0
      example/test.html
  2. 6 6
      src/boot/Lungo.Boot.Events.coffee
  3. 1 1
      src/modules/Lungo.Constants.coffee
  4. 61 51
      src/stylesheets/lungo.widgets.form.styl

+ 184 - 0
example/test.html
Vedi File 

@@ -25,6 +25,190 @@
 
 
 <body class="app">
 
 
+<section id="form" data-transition="slide">
 
+    <header data-title="Form Elements" data-back="home"></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>
 
+
 
+            <!-- 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 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 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="active 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 class="custom">
 
+                    <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="Return to normal Elements"></button>
 
+            <button class="anchor accept margin-bottom" data-label="Return to normal Elements"></button>
 
+            <button class="anchor cancel margin-bottom" data-label="Return to normal Elements"></button>
 
+            <button class="anchor secondary margin-bottom" data-label="Return to normal Elements"></button>
 
+            <button class="anchor disabled" data-label="Return to normal Elements"></button>
 
+        </div>
 
+    </article>
 
+</section>
 
+
 
     <section id="main" data-transition="slide" data-aside="features" data-children="folk">
 
         <header>
 
             <nav class="left">

+ 6 - 6
src/boot/Lungo.Boot.Events.coffee
Vedi File 

@@ -14,7 +14,6 @@ Lungo.Boot.Events = do(lng = Lungo) ->
 
   CLASS = lng.Constants.CLASS
 
   ELEMENT = lng.Constants.ELEMENT
 
   QUERY = lng.Constants.QUERY
 
-  SELECTORS = INPUT_CHECKBOX: "input[type=range].checkbox"
 
 
   ###
 
   Initializes the automatic subscription events by markup of the project.
 
@@ -29,8 +28,7 @@ Lungo.Boot.Events = do(lng = Lungo) ->
 
     lng.dom(C.QUERY.ASIDE_ROUTER).touch _onAside
 
     lng.dom(C.QUERY.MENU_ROUTER).touch _onMenu
 
     lng.dom(QUERY.MENU_HREF).touch _closeMenu
 
-    lng.dom(QUERY.INPUT_CHECKBOX).touch _changeCheckboxValue
 
-
 
+    lng.dom(QUERY.CONTROL_CHECKBOX).on "change", _changeCheckboxValue
 
 
   _onSection = (event) ->
 
     event.preventDefault()
 
@@ -41,7 +39,6 @@ Lungo.Boot.Events = do(lng = Lungo) ->
 
       section_id = el.data "view-section"
 
       if section_id isnt "back" then lng.Router.section(section_id) else lng.Router.back()
 
 
-
 
   _onArticle = (event) ->
 
     event.preventDefault()
 
     el = lng.dom @
 
@@ -90,7 +87,10 @@ Lungo.Boot.Events = do(lng = Lungo) ->
 
   _changeCheckboxValue = (event) ->
 
     event.preventDefault()
 
     el = lng.dom(this)
 
-    current_value = (if el.val() > 0 then 0 else 1)
 
-    el.toggleClass("active").attr "value", current_value
 
+    input = el.find "input"
 
+    checked = input[0].checked
 
+    input.val checked.toString()
 
+    el.removeClass "checked"
 
+    if checked  then el.addClass "checked"
 
 
   init: init

+ 1 - 1
src/modules/Lungo.Constants.coffee
Vedi File 

@@ -33,7 +33,7 @@ Lungo.Constants =
 
     HREF_ASIDE          : "section[data-aside].drag"
 
     HREF_ROUTER         : "a[href][data-router]"
 
     MENU_HREF           : "[data-control=menu] a[href]"
 
-    INPUT_CHECKBOX      : "input[type=range].checkbox"
 
+    CONTROL_CHECKBOX    : "[data-control-checkbox]"
 
     NAVIGATION_ITEM     : "a[href][data-router=\"article\"]"
 
     ARTICLE_REFERENCE   : "[data-article]"
 
     TITLE               : "header .title, footer .title"

+ 61 - 51
src/stylesheets/lungo.widgets.form.styl
Vedi File 

@@ -16,7 +16,7 @@ form, .form
 
     line-height: FORM_HEIGHT
 
     text-indent: 8px
 
 
-  & input, textarea, select, .progress, label.select
 
+  & input:not([type="checkbox"]), textarea, select, .progress, label.select
 
     margin-bottom: 8px
 
     font-size: FONT_SIZE_BIG
 
     &.large
 
@@ -33,12 +33,13 @@ form, .form
 
     -webkit-user-select: text
 
     -webkit-font-smoothing: antialiased
 
     border: none
 
-    border-radius 0px
 
     &:focus
 
       outline: none !important
 
+    &.border
 
+      height: (FORM_HEIGHT * 1.3)
 
 
   & textarea
 
-    min-height: 64px
 
+    min-height: (FORM_HEIGHT * 2)
 
 
   & fieldset
 
     padding: 8px 8px 0 8px
 
@@ -70,8 +71,6 @@ form, .form
 
       width: 25% !important
 
     & label:not(.absolute) + input, label:not(.absolute) + label.select
 
       width: 75% !important
 
-    & .icon
 
-      right: (INDENT * 2)
 
 
   & label.select
 
     position: relative
 
@@ -96,60 +95,25 @@ form, .form
 
     -webkit-appearance: none
 
     outline: none
 
 
-    &:not(.checkbox)
 
-      height: FORM_PROGRESS_HEIGHT
 
-      width: 100%
 
-      padding: 0px
 
-      border: 0
 
-      &::-webkit-slider-thumb
 
-        top: -1px
 
-
 
-    &.checkbox
 
-      width: 64px
 
-      height: FORM_HEIGHT
 
-      line-height: FORM_HEIGHT
 
-      padding: 0px 1px
 
-      border-radius 2px
 
-
 
-      &:after
 
-        top: -(FORM_HEIGHT - 2)
 
-        position: relative
 
-        content: "OFF"
 
-        float: right
 
-        padding: 0 8px
 
-        font-weight: 700
 
-        font-size: 12px
 
-        line-height: (FORM_HEIGHT - 2)
 
-
 
-      &.active:after
 
-        float: left
 
-        content: "ON"
 
+    height: FORM_PROGRESS_HEIGHT
 
+    width: 100%
 
+    padding: 0px
 
+    border: none
 
 
     &::-webkit-slider-thumb
 
-        position: relative
 
-        width: 24px
 
-        height: 24px
 
-        margin: 2px
 
-        -webkit-appearance: none
 
-
 
-    &::-webkit-slider-thumb::after
 
-      SIZE = 6px
 
-      width: SIZE
 
-      height: SIZE
 
-      display: block
 
-      content: ""
 
       position: relative
 
-      border-radius (SIZE / 2)
 
-      z-index: 9
 
-      top: 8.5px
 
-      left: 8.5px
 
-
 
-  & .progress
 
+      width: SIZE = (FORM_PROGRESS_HEIGHT * 2)
 
+      height: SIZE
 
+      -webkit-appearance: none
 
+      border: none
 
+  /* -------------------------- PROGRESS -------------------------- */
 
+  & [data-progress]
 
     width: 100%
 
     & .bar
 
       height: FORM_PROGRESS_HEIGHT
 
       line-height: FORM_PROGRESS_HEIGHT
 
       display: block
 
+
 
       & .value
 
         display: block
 
         height: inherit
 
@@ -160,3 +124,49 @@ form, .form
 
   .custom-select
 
     select
 
       padding-right:30px
 
+
 
+
 
+/* -------------------------- CHECKBOX -------------------------- */
 
+[data-control-checkbox]
 
+  HEIGHT = (FORM_HEIGHT * 1.1)
 
+  width: 76px
 
+  height: HEIGHT
 
+  margin: 20px auto
 
+  position: relative
 
+  line-height: HEIGHT !important
 
+  &, & label
 
+    transition all 200ms ease
 
+
 
+  input[type=checkbox]
 
+    visibility: hidden
 
+
 
+  &:after, &:before
 
+    z-index: 0
 
+    position: absolute
 
+  &:before
 
+    content: "ON"
 
+    left: (HEIGHT / 2.2)
 
+    opacity: 0
 
+  &:after
 
+    content: "OFF"
 
+    right: (HEIGHT / 2.2)
 
+  &.checked
 
+    &:before
 
+      opacity: 1
 
+      z-index: 1
 
+    &:after
 
+      opacity: 0
 
+      z-index: 0
 
+
 
+  & label
 
+    display: block
 
+    height: S = (HEIGHT - 6)
 
+    width: S
 
+    cursor: pointer
 
+    position: absolute
 
+    top: 3px
 
+    left: 3px
 
+    z-index: 1
 
+
 
+  & input[type=checkbox]:checked + label
 
+    left: 46px