added svn files

benji87 · Jun 30, 2010 · e8efef7 · e8efef7
1 parent a49cfed
commit e8efef7
Show file tree

Hide file tree

Showing 101 changed files with 4,470 additions and 0 deletions.
diff --git a/LICENSE.txt b/LICENSE.txt
@@ -0,0 +1,20 @@
+The MIT License
+Copyright (c) 2009 David Kaneda
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED ‘AS IS’, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/README.txt b/README.txt
@@ -0,0 +1,19 @@
+        _/    _/_/    _/_/_/_/_/                              _/       
+           _/    _/      _/      _/_/    _/    _/    _/_/_/  _/_/_/    
+      _/  _/  _/_/      _/    _/    _/  _/    _/  _/        _/    _/   
+     _/  _/    _/      _/    _/    _/  _/    _/  _/        _/    _/    
+    _/    _/_/  _/    _/      _/_/      _/_/_/    _/_/_/  _/    _/     
+   _/                                                                  
+_/
+
+Created by David Kaneda <http://www.davidkaneda.com>
+Documentation and issue tracking on Google Code <http://code.google.com/p/jqtouch/>
+
+Special thanks to Jonathan Stark <http://jonathanstark.com/>
+and pinch/zoom <http://www.pinchzoom.com/>
+
+(c) 2009 by jQTouch project members.
+See LICENSE.txt for license.
+
+If you use jQTouch, please consider supporting its development:
+http://bit.ly/support-jqt
diff --git a/demos/clock/clock.css b/demos/clock/clock.css
@@ -0,0 +1,54 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+body {
+    font-family: "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
+}
+.clock {
+    background: url(img/face.png);
+    position: relative;
+    width: 78px;
+    height: 78px;
+    margin: 5px auto;
+    overflow: hidden;
+}
+.hour,.min,.sec {
+    width: 9px;
+    height: 78px;
+    position: absolute;
+    top: 0;
+    left: 35px;
+}
+.hour {
+    background: url(img/hour.png);
+}
+.min {
+    background: url(img/minute.png);
+}
+.sec {
+    background: url(img/second.png);
+}
+#clocks > div {
+    background: -webkit-gradient(linear,0% 0%,0% 100%,from(#dadadc),to(#b4b3b8));
+    border-bottom: 1px solid #9a9fa5;
+    border-top: 1px solid #dbdbdd;
+    text-shadow: rgba(255,255,255,.5) 0 1px 0;
+    position: relative;
+}
+.city {
+    display: block;
+    position: absolute;
+    top: 35px;
+    font-weight: bold;
+    color: #333;
+    left: 10px;
+}
+.time {
+    display: block;
+    position: absolute;
+    right: 10px;
+    top: 30px;
+}
+.time span {
+}
diff --git a/demos/clock/icon.png b/demos/clock/icon.png
diff --git a/demos/clock/img/face.png b/demos/clock/img/face.png
diff --git a/demos/clock/img/hour.png b/demos/clock/img/hour.png
diff --git a/demos/clock/img/minute.png b/demos/clock/img/minute.png
diff --git a/demos/clock/img/second.png b/demos/clock/img/second.png
diff --git a/demos/clock/img/startup.png b/demos/clock/img/startup.png
diff --git a/demos/clock/index.html b/demos/clock/index.html
@@ -0,0 +1,144 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <title>jQTouch &beta;</title>
+        <style type="text/css" media="screen">@import "../../jqtouch/jqtouch.css";</style>
+        <style type="text/css" media="screen">@import "../../themes/apple/theme.css";</style>
+        <script src="../../jqtouch/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
+        <script src="../../jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
+        <!-- 
+            jQTouch Clock Demo
+            All custom code is embedded below:
+        -->
+        <link rel="stylesheet" href="clock.css" type="text/css" media="screen" charset="utf-8" />
+        <script type="text/javascript" charset="utf-8">
+            $.jQTouch({
+                icon: 'icon.png',
+                startupScreen: 'img/startup.png'
+            });
+            $(function(){
+                function addClock(label, tz){
+                    var html = '';
+                    html += '<div>'
+                    html +=     '<div class="clock">'
+                    html +=         '<div class="hour"></div>'
+                    html +=         '<div class="min"></div>'
+                    html +=         '<div class="sec"></div>'
+                    html +=     '</div>'
+                    html +=     '<div class="city">GMT</div>'
+                    html +=     '<div class="time">Time</div>'
+                    html += '</div>'
+                    var insert = $(html);
+                    $('#clocks').append(
+                        insert.data('tz_offset', tz).find('.city').html(label).end()
+                    );
+                }
+                function updateClocks(){
+                    var localTime = new Date();
+                    $('#clocks > div').each(function(){
+                        var tz_offset = $(this).data('tz_offset') || 0;
+                        var ms = localTime.getTime() 
+                             + (localTime.getTimezoneOffset() * 60000)
+                             + (tz_offset + 1) * 3600000;
+                        var time = new Date(ms);
+                        var hour = time.getHours();
+                        var minute = time.getMinutes();
+                        var second = time.getSeconds();
+                        var $el = $(this);
+                        var ampm = 'AM';
+                        var nicehour = hour;
+                        if (hour > 12 ) {
+                            nicehour = hour - 12;
+                            ampm = 'PM';
+                        } else if ( hour == 0 ) {
+                            nicehour = 12;
+                        }
+                        $('.hour', $el).css('-webkit-transform', 'rotate(' + ( hour * 30 + (minute/2) ) + 'deg)');
+                        $('.min', $el).css('-webkit-transform', 'rotate(' + ( minute * 6 ) + 'deg)');
+                        $('.sec', $el).css('-webkit-transform', 'rotate(' + ( second * 6 ) + 'deg)');
+                        $('.time', this).html(nicehour + ':' + minute + ':' + second + ' ' + ampm);
+                    });
+                }
+                $('#time').submit(function(){
+                    addClock($('#label').val(), Number($('#timezone').val()));
+                    $('input').blur();
+                    $('#add .cancel').click();
+                    this.reset();
+                    return false;
+                });
+                addClock('Philadelphia', -5.0);
+                addClock('Los Angeles', -8.0);
+                updateClocks();
+                setInterval(updateClocks, 1000);
+            });
+        </script>
+    </head>
+    <body>
+        <div id="jqt">
+            <div id="home">
+                <div class="toolbar">
+                    <h1>World Clock</h1>
+                    <a href="#info" class="button leftButton flip">Info</a>
+                    <a href="#add" class="button add slideup">+</a>
+                </div>
+                <div id="clocks">
+                </div>
+            </div>
+            <div class="form" id="add">
+                <div class="toolbar">
+                    <h1>New Time Zone</h1>
+                    <a href="#add" class="cancel">Cancel</a>
+                </div>
+                <form id="time">
+                    <ul class="rounded">
+                        <li><input type="text" id="label" name="Label" placeholder="Label"></li>
+                        <li><select name="timezone" id="timezone">
+                              <option value="-12.0">(GMT -12:00) Eniwetok</option>
+                              <option value="-11.0">(GMT -11:00) Samoa</option>
+                              <option value="-10.0">(GMT -10:00) Hawaii</option>
+                              <option value="-9.0">(GMT -9:00) Alaska</option>
+                              <option value="-8.0">(GMT -8:00) Pacific Time</option>
+                              <option value="-7.0">(GMT -7:00) Mountain Time</option>
+                              <option value="-6.0">(GMT -6:00) Central Time</option>
+                              <option value="-5.0">(GMT -5:00) Eastern Time</option>
+                              <option value="-4.0">(GMT -4:00) Atlantic Time</option>
+                              <option value="-3.5">(GMT -3:30) Newfoundland</option>
+                              <option value="-3.0">(GMT -3:00) Brazil</option>
+                              <option value="-2.0">(GMT -2:00) Mid-Atlantic</option>
+                              <option value="-1.0">(GMT -1:00 hour) Azores</option>
+                              <option value="0.0" selected>(GMT) Western Europe Time</option>
+                              <option value="1.0">(GMT +1:00 hour) Paris</option>
+                              <option value="2.0">(GMT +2:00) Kaliningrad</option>
+                              <option value="3.0">(GMT +3:00) Baghdad</option>
+                              <option value="3.5">(GMT +3:30) Tehran</option>
+                              <option value="4.0">(GMT +4:00) Abu Dhabi</option>
+                              <option value="4.5">(GMT +4:30) Kabul</option>
+                              <option value="5.0">(GMT +5:00) Ekaterinburg</option>
+                              <option value="5.5">(GMT +5:30) New Delhi</option>
+                              <option value="5.75">(GMT +5:45) Kathmandu</option>
+                              <option value="6.0">(GMT +6:00) Colombo</option>
+                              <option value="7.0">(GMT +7:00) Bangkok</option>
+                              <option value="8.0">(GMT +8:00) Hong Kong</option>
+                              <option value="9.0">(GMT +9:00) Tokyo</option>
+                              <option value="9.5">(GMT +9:30) Adelaide</option>
+                              <option value="10.0">(GMT +10:00) Eastern Australia</option>
+                              <option value="11.0">(GMT +11:00) Solomon Islands</option>
+                              <option value="12.0">(GMT +12:00) Fiji</option>
+                        </select></li>
+                    </ul>
+                    <a href="#" style="margin: 10px;" class="whiteButton submit">Add Clock</a>
+                </form>
+            </div>
+            <div id="info">
+                <div class="toolbar">
+                    <h1>About</h1>
+                    <a href="#add" class="cancel">Cancel</a>
+                </div>
+                <div class="info">
+                    This is a demo for jQTouch.
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/demos/customanimation/index.html b/demos/customanimation/index.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <title>jQTouch &beta;</title>
+        <style type="text/css" media="screen">@import "../../jqtouch/jqtouch.css";</style>
+        <style type="text/css" media="screen">@import "../../themes/jqt/theme.css";</style>
+        <script src="../../jqtouch/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
+        <script src="../../jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
+
+        <script type="text/javascript" charset="utf-8">
+            var jQT = new $.jQTouch({
+                icon: 'jqtouch.png',
+                addGlossToIcon: false,
+                startupScreen: 'jqt_startup.png',
+                statusBar: 'black',
+                preloadImages: [
+                    '../../themes/jqt/img/back_button.png',
+                    '../../themes/jqt/img/back_button_clicked.png',
+                    '../../themes/jqt/img/button_clicked.png',
+                    '../../themes/jqt/img/grayButton.png',
+                    '../../themes/jqt/img/whiteButton.png',
+                    '../../themes/jqt/img/loading.gif'
+                    ]
+            });
+
+            $(function(){
+                jQT.addAnimation({
+                    name: 'reveal',
+                    selector: '.revealme'
+                });
+            });
+        </script>
+        <style type="text/css" media="screen">
+            div#jqt .reveal.in {
+            	-webkit-animation-name: dontmove;
+            	z-index: 0;
+            }
+
+            div#jqt .reveal.out {
+            	-webkit-animation-name: revealout;
+            	z-index: 10;
+            }
+
+            div#jqt .reveal.out.reverse {
+            	z-index: 0;
+            	-webkit-animation-name: dontmove;
+            }
+
+            div#jqt .reveal.in.reverse {
+            	z-index: 10;
+            	-webkit-animation-name: revealin;
+            }
+
+
+            @-webkit-keyframes revealin {
+                from { -webkit-transform: translateX(100%); }
+                to { -webkit-transform: translateX(0); }
+            }
+
+            @-webkit-keyframes revealout {
+                from { -webkit-transform: translateX(0); }
+                to { -webkit-transform: translateX(100%); }
+            }
+        </style>
+    </head>
+    <body>
+        <div id="jqt">
+            <div id="test">
+                <ul class="rounded">
+                    <li><a class="revealme" href="#page2">Test Reveal</a></li>
+                </ul>
+            </div>
+            <div id="page2">
+                <div style="font-size: 1.5em; text-align: center; margin: 160px 0 160px; font-family: Marker felt;">
+                    Pretty smooth, eh?            
+                </div>
+                <a style="margin:0 10px;color:rgba(0,0,0,.9)" href="#" class="whiteButton goback">Go back</a>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/demos/customanimation/jqt_startup.png b/demos/customanimation/jqt_startup.png
diff --git a/demos/customanimation/jqtouch.png b/demos/customanimation/jqtouch.png