Почетна Преглед Помоћ
Пријавите се
pwa
/
Lungo.js
огледало од https://github.com/tapquo/Lungo.js.git
2
0
Креирај огранак 0
Датотеке Дискусије 0 Вики
Преглед изворни кода

Calendar plugin

First version of Lungo.Sugar.Calendar
piniphone пре 13 година
родитељ
879cb1489e
комит
4e8cce0db9
3 измењених фајлова са 354 додато и 10 уклоњено
Један поглед Покажи статистику Diff
  1. 121 0
      example/calendar.html
  2. 208 2
      src/plugins/calendar/lungo.calendar.coffee
  3. 25 8
      src/plugins/calendar/lungo.calendar.styl

+ 121 - 0
example/calendar.html
Прегледај датотеку 

@@ -0,0 +1,121 @@
 
+<!doctype html>
 
+<html>
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>Brownie calendar</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">
 
+
 
+    <!-- iPhone -->
 
+    <link href="http://cdn.tapquo.com/lungo/icon-57.png" sizes="57x57" rel="apple-touch-icon">
 
+    <link href="http://cdn.tapquo.com/lungo/startup-image-320x460.png" media="(device-width: 320px) and (device-height: 480px)
 
+             and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
 
+
 
+    <!-- iPhone (Retina) -->
 
+    <link href="http://cdn.tapquo.com/lungo/icon-114.png" sizes="114x114" rel="apple-touch-icon">
 
+    <link href="http://cdn.tapquo.com/lungo/startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px)
 
+             and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
 
+
 
+    <!-- iPhone 5 -->
 
+    <link href="http://cdn.tapquo.com/lungo/startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px)
 
+             and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
 
+
 
+    <!-- iPad -->
 
+    <link href="http://cdn.tapquo.com/lungo/icon-72.png" sizes="72x72" rel="apple-touch-icon">
 
+    <link href="http://cdn.tapquo.com/lungo/startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px)
 
+             and (orientation: portrait)
 
+             and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
 
+    <link href="http://cdn.tapquo.com/lungo/startup-image-748x1024.png" media="(device-width: 768px) and (device-height: 1024px)
 
+             and (orientation: landscape)
 
+             and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
 
+
 
+    <!-- iPad (Retina) -->
 
+    <link href="http://cdn.tapquo.com/lungo/icon-144.png" sizes="144x144" rel="apple-touch-icon">
 
+    <link href="http://cdn.tapquo.com/lungo/startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px)
 
+             and (orientation: portrait)
 
+             and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
 
+    <link href="http://cdn.tapquo.com/lungo/startup-image-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px)
 
+             and (orientation: landscape)
 
+             and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
 
+
 
+    <!-- Main Stylesheet -->
 
+    <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
 
+    <link rel="stylesheet" href="components/lungo.brownie/lungo.theme.css" id="theme-stylesheet">
 
+    <link rel="stylesheet" href="components/lungo.icon/lungo.icon.css">
 
+    <!-- App Stylesheet -->
 
+    <link rel="stylesheet" href="static/stylesheets/app.css">
 
+    <link rel="stylesheet" href="../packages/lungo.calendar/lungo.calendar.css" />
 
+</head>
 
+
 
+<body>
 
+
 
+    <section id="main" data-transition="" data-aside="features" class="drag">
 
+        <header>
 
+            <img src="static/images/logo.png" class="title centered">
 
+        </header>
 
+        <article id="main-article" class="list indented scroll">
 
+
 
+
 
+            <button class="small">show!</button>
 
+            <br />
 
+            <br />
 
+
 
+            <input data-type="calendar" value="" />
 
+            <input data-type="calendar" value="2000-02-20" />
 
+            <input data-type="calendar" value="2200-12-31" />
 
+            <input data-type="calendar" value="2150-12-31" />
 
+            <input data-type="calendar" value="2140-12-31" />
 
+            <input data-type="calendar" value="2130-12-31" />
 
+            <input data-type="calendar" value="2120-12-31" />
 
+            <input data-type="calendar" value="2110-12-31" />
 
+
 
+            <input data-type="calendar" value="" />
 
+            <input data-type="calendar" value="2000-02-20" />
 
+            <input data-type="calendar" value="2200-12-31" />
 
+            <input data-type="calendar" value="2150-12-31" />
 
+            <input data-type="calendar" value="2140-12-31" />
 
+            <input data-type="calendar" value="2130-12-31" />
 
+            <input data-type="calendar" value="2120-12-31" />
 
+            <input data-type="calendar" value="2110-12-31" />
 
+
 
+            <input data-type="calendar" value="" />
 
+            <input data-type="calendar" value="2000-02-20" />
 
+            <input data-type="calendar" value="2200-12-31" />
 
+            <input data-type="calendar" value="2150-12-31" />
 
+            <input data-type="calendar" value="2140-12-31" />
 
+            <input data-type="calendar" value="2130-12-31" />
 
+            <input data-type="calendar" value="2120-12-31" />
 
+            <input data-type="calendar" value="2110-12-31" />
 
+
 
+
 
+
 
+        </article>
 
+    </section>
 
+
 
+    <script src="components/quojs/quo.js"></script>
 
+    <script src="components/lungo.brownie/lungo.debug.js"></script>
 
+    <script src="../packages/lungo.calendar/lungo.calendar.js"></script>
 
+    <script>
 
+        Lungo.init({
 
+            name: "Calendar test",
 
+            version: "1.0",
 
+            history: false
 
+        });
 
+
 
+        $$(function() {
 
+            $$("button").bind("tap", function() {
 
+                Lungo.Sugar.Calendar.show("2012-01-01", function(date) {
 
+                    alert(date);
 
+                    // Lungo.Sugar.Calendar.hide();
 
+                });
 
+            });
 
+        });
 
+    </script>
 
+</body>
 
+</html>

+ 208 - 2
src/plugins/calendar/lungo.calendar.coffee
Прегледај датотеку 

@@ -5,11 +5,217 @@ Copyright (c) 2011-2013 Tapquo S.L. - Licensed GPLv3, Commercial
 
 
 
 @namespace  Lungo.Sugar
 
 @namespace  Lungo.Sugar
 
 @class      Calendar
 
 @class      Calendar
 
+@author     Ignacio Olalde Ramos <ina@tapquo.com> || @piniphone
 
 @author     Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 
 @author     Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 
 ###
 
 ###
 
 
 
+
 
 Lungo.Sugar.Calendar = do () ->
 
 Lungo.Sugar.Calendar = do () ->
 
 
 
-  init = -> @
 
+  MONTHS = "January,February,March,April,May,June,July,August,September,October,November,December".split(",")
 
+  WEEKDAYS = "Sun,Mon,Tue,Wed,Thu,Fri,Sat".split(",")
 
+  DAYS = "31,0,31,30,31,31,30,31,30,31,30,31".split(",")
 
+
 
+  _shadow = undefined
 
+  _callback = undefined
 
+  _container = undefined
 
+  _element = undefined
 
+  _value = undefined
 
+  _calendarValue = undefined
 
+  _blocked = false
 
+  _config =
 
+    startDay: 1
 
+    format: "yyyy-mm-dd"
 
+
 
+  _show = (event, value) ->
 
+    do event?.preventDefault
 
+    _element = $$ @
 
+    unless value
 
+      validValue = _element? and _element.val()? and _element.val() != ""
 
+      _value = unless validValue then new Date() else _getDate(_element.val())
 
+    else _value = _getDate value
 
+    _openCalendar _value
 
+    _shadow.addClass "show"
 
+
 
+  hide = ->
 
+    _container.attr "class", ""
 
+    setTimeout (->_shadow.removeClass "show"), 200
 
+    return
 
+
 
+  _appendContainer = ->
 
+    _container = $$ """
 
+      <div data-control="calendar">
 
+        <div class="layout horizontal">
 
+          <div data-layout="primary">
 
+            <span class="icon caret-left" data-action="previousMonth"></span>
 
+            <strong data-calendar="month">xxx</strong>
 
+            <span class="icon caret-right" data-action="nextMonth"></span>
 
+          </div>
 
+          <div data-layout="primary">
 
+            <span class="icon caret-left" data-action="previousYear"></span>
 
+            <strong data-calendar="year">yyy</strong>
 
+            <span class="icon caret-right" data-action="nextYear"></span>
 
+          </div>
 
+        </div>
 
+        <table>
 
+          <thead></thead>
 
+          <tbody></tbody>
 
+        </table>
 
+      </div>
 
+    """
 
+    do _headerRow
 
+    $$("body").append _container
 
+
 
+  _headerRow = ->
 
+    headRow = do _createRow
 
+    i = 0
 
+    while i < 7
 
+      day = (_config.startDay + i) % 7
 
+      headRow.append _createDay "", "", WEEKDAYS[day]
 
+      i++
 
+    _container.find("thead").append headRow
 
+
 
+  _bindEvents = ->
 
+    _container.find("[data-action=previousMonth]").bind "tap", _goPreviousMonth
 
+    _container.find("[data-action=nextMonth]").bind "tap", _goNextMonth
 
+    _container.find("[data-action=previousYear]").bind "tap", _goPreviousYear
 
+    _container.find("[data-action=nextYear]").bind "tap", _goNextYear
 
+    $$("body").bind "tap", _checkTap
 
+
 
+  _goPreviousMonth = ->
 
+    _calendarValue.setDate(_calendarValue.getDate() - 30)
 
+    _openCalendar _calendarValue
 
+
 
+  _goNextMonth = ->
 
+    _calendarValue.setDate(_calendarValue.getDate() + 30)
 
+    _openCalendar _calendarValue
 
+
 
+  _goPreviousYear = ->
 
+    _calendarValue.setDate(_calendarValue.getDate() - 365)
 
+    _openCalendar _calendarValue
 
+
 
+  _goNextYear = ->
 
+    _calendarValue.setDate(_calendarValue.getDate() + 365)
 
+    _openCalendar _calendarValue
 
+
 
+  _setValue = (event) ->
 
+    td = $$ event.target
 
+    val = _parseDate td.attr("data-calendar-day")
 
+    unless val.split("-")[0] is ""
 
+      do event.preventDefault
 
+      _container.find(".today").removeClass('today')
 
+      td.addClass "today"
 
+      _element.val val
 
+      if _callback then _callback.call @, val
 
+      else do hide
 
+
 
+  _getDate = (value) ->
 
+    #@TODO :: _config.format...
 
+    parts = value.split(/[-\/]/)
 
+    return new Date(parts[0], parts[1]-1, parts[2])
 
+
 
+  _parseDate = (strDate) ->
 
+    #@TODO :: _config.format...
 
+    parsed = ""
 
+    parts = strDate.split("-")
 
+    parts[1] = _to2Nums parts[1]
 
+    parts[2] = _to2Nums parts[2]
 
+    return parts.join("-")
 
+
 
+  _to2Nums = (n) -> if n.length is 1 then "0#{n}" else n
 
+
 
+  _checkTap = (event) ->
 
+    if _blocked then return true
 
+    target = $$(event.target)
 
+    unless target.closest("[data-control=calendar], [data-type=calendar]").length
 
+      ok = 1
 
+      do hide
 
+
 
+  _openCalendar = (date) ->
 
+    year = date.getFullYear()
 
+    month = date.getMonth()
 
+    _calendarValue = new Date(year, month, 15)
 
+    _bindContainerData _calendarValue
 
+    monthDays = _getMonthDays year, month
 
+    startPos = _getStartPosition new Date(year, month, 1).getDay()
 
+    currentDay = 1
 
+    started = false
 
+    counter = 0
 
+    tableBody = _container.find("tbody").html("")
 
+    currentRow = do _createRow
 
+    while currentDay < monthDays
 
+      currentDate = new Date(year, month, currentDay)
 
+      if not started
 
+        if startPos is counter
 
+          className = _getDayClassName(year, month, currentDay)
 
+          currentRow.append _createDay(year, month, currentDay, className)
 
+          started = true
 
+        else currentRow.append _createDay year, month, "0", ["disabled"]
 
+      else
 
+        currentDay++
 
+        className = _getDayClassName year, month, currentDay
 
+        if counter % 7 is 0
 
+          tableBody.append currentRow
 
+          currentRow = do _createRow
 
+        currentRow.append _createDay(year, month, currentDay, className)
 
+      counter++
 
+
 
+    tableBody.append currentRow if currentRow.children().length
 
+    _container.find("[data-calendar-day]").bind "tap", _setValue
 
+    _container.attr "class", "show"
 
+
 
+  _getDayClassName = (y, m, d) ->
 
+    classes = []
 
+    dayValue = _value.getDate()
 
+    isSameMonth = _value.getFullYear() is y and _value.getMonth() is m
 
+    weekDay = new Date(y, m, d).getDay()
 
+    if d is dayValue and isSameMonth then classes.push "today"
 
+    if weekDay is 0 or weekDay is 6 then classes.push "weekend"
 
+    classes
 
+
 
+  _bindContainerData = (date) ->
 
+    yearLabel = date.getFullYear()
 
+    monthLabel = MONTHS[date.getMonth()]
 
+    _container.find("[data-calendar=month]").html monthLabel
 
+    _container.find("[data-calendar=year]").html yearLabel
 
+
 
+  _createRow = () -> return $$("<tr>")
 
+
 
+  _createDay = (year, month, day, className=[]) ->
 
+    el = $$("<td data-calendar-day=\"#{year}-#{month+1}-#{day}\">")
 
+    return el.html(day).attr("class", className.join(" "))
 
+
 
+  _getStartPosition = (weekday) ->
 
+    pos = weekday - _config.startDay
 
+    if pos < 0 then pos + 7 else pos
 
+
 
+  _getMonthDays = (y, m) ->
 
+    if m is 1 then return _calcFebruaryDays y
 
+    else return DAYS[m]
 
+
 
+  _calcFebruaryDays = (y) ->
 
+    isLeapYear = false
 
+    if y % 4 is 0
 
+      if y % 400 is 0 then isLeapYear = true
 
+      else if y % 100 is 0 then isLeapYear = false
 
+      else isLeapYear = true
 
+    return if isLeapYear then 29 else 28
 
+
 
+  show = (date, callback) ->
 
+    _callback = callback
 
+    _blocked = true
 
+    setTimeout (-> _blocked = false), 100
 
+    _show null, date
 
+
 
+  $$ ->
 
+    do _appendContainer
 
+    do _bindEvents
 
+    _shadow = $$(".notification")
 
+    $$("input[data-type=calendar]").attr("readonly", "true").bind "tap", (event) ->
 
+      _callback = undefined
 
+      _show.call @, event
 
+
 
+
 
+  show: show
 
+  hide: hide
 
 
 
-  init: init

+ 25 - 8
src/plugins/calendar/lungo.calendar.styl
Прегледај датотеку 

@@ -1,12 +1,28 @@
 
+
 
+@import "../../stylesheets/__init.styl"
 
+
 
 [data-control=calendar]
 
 [data-control=calendar]
 
+  transition-property margin-top
 
+  transition-duration TRANSITION_TIME
 
+  transition-timing-function DEFAULT_TRANSITION
 
   position: absolute
 
   position: absolute
 
-  top: 128px
 
+  display: block
 
+  margin-top: -350px
 
   left: 20px
 
   left: 20px
 
-  z-index: 5 !important
 
+  z-index: 1999 !important
 
   width: 280px
 
   width: 280px
 
-  display: block
 
-  font-size: 17px
 
-  margin: 0 auto
 
+  font-size: 15px
 
+
 
+  &.show
 
+    margin-top: 50px
 
+
 
+  & span[data-action]
 
+    display: inline-block
 
+    width: 20px
 
+
 
+  & strong
 
+    display: inline-block
 
+    width: 80px
 
 
 
   & table
 
   & table
 
     background: #fff
 
     background: #fff
 
@@ -28,9 +44,9 @@
 
       font-weight: 600
 
       font-weight: 600
 
       position: relative
 
       position: relative
 
       border: solid 1px #eee
 
       border: solid 1px #eee
 
-      &:hover
 
-        background: green
 
-        border: 0px
 
+      // &:hover
 
+      //   background: green
 
+      //   border: 0px
 
       &.today
 
       &.today
 
         background: blue
 
         background: blue
 
         color: #fff !important
 
         color: #fff !important
 
@@ -47,6 +63,7 @@
 
         color: red
 
         color: red
 
       &.disabled
 
       &.disabled
 
         color: #ddd
 
         color: #ddd
 
+
 
   & .layout
 
   & .layout
 
     line-height: 40px
 
     line-height: 40px
 
     background: #000
 
     background: #000