Added touchscreen UI styles, touchscreen gestures

diff --git a/css/default.css b/css/default.css
index 72e47721219526d34ff7cbf59039806491811773..b55f526c2e2703882662dca24e7d203e3ab2ce30 100644 (file)
--- a/css/default.css
+++ b/css/default.css
@@ -1,6 +1,7 @@
 body, html {\r
        height: 100%; margin:0px;\r
        font-size:14px;\r
+       line-height:1.4em;\r
 }\r
 \r
 \r

diff --git a/css/touchscreen_tweaks.css b/css/touchscreen_tweaks.css
index 5e74a5d0f83d272650295cdf7e88132874b1a23a..a90bce5f4c76a2cd6386901535e2988ab2f6ecd1 100644 (file)
--- a/css/touchscreen_tweaks.css
+++ b/css/touchscreen_tweaks.css
@@ -6,6 +6,8 @@
 \r
 #kiwi .windowlist ul {\r
        /* border: 1px solid blue;*/\r
-       margin-right: 0px; /* i* safaris seem to behave differently here :/ */\r
+       margin-right: 0px; /* i* safari seem to behave differently here :/ */\r
        height: 50px;\r
-}
\ No newline at end of file
+}\r
+\r
+#kiwi.touchscreen .userlist { line-height:1.6em; }
\ No newline at end of file

diff --git a/js/front.js b/js/front.js
index 918da870b76ca1207e063499e0574e4ebe5f7daa..9dcb86da48347511082c5ba9ce11de0f660d3174 100644 (file)
--- a/js/front.js
+++ b/js/front.js
@@ -104,17 +104,19 @@ var front = {
                        kiwi.removeClass('large_kiwi');
                        kiwi.addClass('small_kiwi');
                } else if (kiwi.width() >= 330 && !kiwi.hasClass('large_kiwi')) {
-                       console.log("switching to large kiwi");
                        kiwi.removeClass('small_kiwi');
                        kiwi.addClass('large_kiwi');
                }
 
                var ct = $('#kiwi .cur_topic');
                var ul = $('#kiwi .userlist');
-               var top = ul.css('margin-top').replace('px', '') + ct.css('border-bottom-width').replace('px', '');
-               console.log("TOP="+top);
-               //top = parseInt(ct.offset().top) + parseInt(ct.height()) + parseInt(top);
-               top = parseInt(ct.height(), 10) + parseInt(top, 10) - 8;
+
+               var top = parseInt(ct.offset().top) + parseInt(ct.height());
+        top = top + parseInt(ct.css('border-top-width').replace('px', ''));
+        top = top + parseInt(ct.css('border-bottom-width').replace('px', ''));
+        top = top + parseInt(ct.css('padding-top').replace('px', ''));
+        top = top + parseInt(ct.css('padding-bottom').replace('px', ''));
+        top = top + 1;
 
                $('#kiwi .messages').css('top', top + "px");
                $('#kiwi .userlist').css('top', top + "px");
@@ -732,6 +734,33 @@ var front = {
                var wl = $('#kiwi .windowlist ul');
                var next_left = parseInt(wl.css('text-indent').replace('px', ''))-170;
                wl.css('text-indent', next_left);
+       },
+
+       windowsNext: function(){
+               var tab, next;
+               next = false;
+               for(tab in front.tabviews){
+                       if(!next){
+                               if(front.tabviews[tab] == front.cur_channel){
+                                       next = true;
+                                       continue;
+                               }
+                       } else {
+                               front.tabviews[tab].show();
+                       }
+               };
+       },
+
+       windowsPrevious: function(){
+               var tab, prev_tab, next;
+               next = false;
+               for(tab in front.tabviews){
+                       if(front.tabviews[tab] == front.cur_channel){
+                               prev_tab.show();
+                               return;
+                       }
+                       prev_tab = front.tabviews[tab];
+               };
        }
 }
 
@@ -784,7 +813,7 @@ tabview.prototype.show = function(){
        front.cur_channel = this;
        
        this.scrollBottom();
-       $('#kiwi_msginput').focus();
+       if(!touchscreen) $('#kiwi_msginput').focus();
 }
 
 tabview.prototype.close = function(){

diff --git a/js/touchscreen_tweaks.js b/js/touchscreen_tweaks.js
index ba4d79b870d4846c937bd212645ebeecd9902932..43a50b26f98694a3a63cc40070157ff2f5c5959f 100644 (file)
--- a/js/touchscreen_tweaks.js
+++ b/js/touchscreen_tweaks.js
@@ -1,7 +1,7 @@
 /*
        Orientation stuff
 */
-/*
+
 var supportsOrientationChange = "onorientationchange" in window,
     orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
 
@@ -37,7 +37,7 @@ window.addEventListener(orientationEvent, function() {
        }
        $('#kiwi').addClass(or);
 }, false);
-*/
+
 
 
 
@@ -94,4 +94,124 @@ function registerTouches(obj){
                }
        }
 //});
-}
\ No newline at end of file
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*
+ * jSwipe - jQuery Plugin
+ * http://plugins.jquery.com/project/swipe
+ * http://www.ryanscherf.com/demos/swipe/
+ *
+ * Copyright (c) 2009 Ryan Scherf (www.ryanscherf.com)
+ * Licensed under the MIT license
+ *
+ * $Date: 2009-07-14 (Tue, 14 Jul 2009) $
+ * $version: 0.1.2
+ * 
+ * This jQuery plugin will only run on devices running Mobile Safari
+ * on iPhone or iPod Touch devices running iPhone OS 2.0 or later. 
+ * http://developer.apple.com/iphone/library/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW5
+ */
+(function($) {
+       $.fn.swipe = function(options) {
+               
+               // Default thresholds & swipe functions
+               var defaults = {
+                       threshold: {
+                               x: 30,
+                               y: 10
+                       },
+                       swipeLeft: function() {  },
+                       swipeRight: function() {  }
+               };
+               
+               var options = $.extend(defaults, options);
+               
+               if (!this) return false;
+               
+               return this.each(function() {
+                       
+                       var me = $(this)
+                       
+                       // Private variables for each element
+                       var originalCoord = { x: 0, y: 0 }
+                       var finalCoord = { x: 0, y: 0 }
+                       
+                       // Screen touched, store the original coordinate
+                       function touchStart(event) {
+                               //console.log('Starting swipe gesture...')
+                               originalCoord.x = event.targetTouches[0].pageX
+                               originalCoord.y = event.targetTouches[0].pageY
+                       }
+                       
+                       // Store coordinates as finger is swiping
+                       function touchMove(event) {
+                           //event.preventDefault();
+                               finalCoord.x = event.targetTouches[0].pageX // Updated X,Y coordinates
+                               finalCoord.y = event.targetTouches[0].pageY
+                       }
+                       
+                       // Done Swiping
+                       // Swipe should only be on X axis, ignore if swipe on Y axis
+                       // Calculate if the swipe was left or right
+                       function touchEnd(event) {
+                               //console.log('Ending swipe gesture...')
+                               var changeY = originalCoord.y - finalCoord.y
+                               if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) {
+                                       changeX = originalCoord.x - finalCoord.x
+                                       
+                                       if(changeX > defaults.threshold.x) {
+                                               defaults.swipeLeft()
+                                       }
+                                       if(changeX < (defaults.threshold.x*-1)) {
+                                               defaults.swipeRight()
+                                       }
+                               }
+                       }
+                       
+                       // Swipe was started
+                       function touchStart(event) {
+                               //console.log('Starting swipe gesture...')
+                               originalCoord.x = event.targetTouches[0].pageX
+                               originalCoord.y = event.targetTouches[0].pageY
+
+                               finalCoord.x = originalCoord.x
+                               finalCoord.y = originalCoord.y
+                       }
+                       
+                       // Swipe was canceled
+                       function touchCancel(event) { 
+                               //console.log('Canceling swipe gesture...')
+                       }
+                       
+                       // Add gestures to all swipable areas
+                       this.addEventListener("touchstart", touchStart, false);
+                       this.addEventListener("touchmove", touchMove, false);
+                       this.addEventListener("touchend", touchEnd, false);
+                       this.addEventListener("touchcancel", touchCancel, false);
+                               
+               });
+       };
+})(jQuery);
+
+$(document).swipe({
+       swipeLeft: function(){ front.windowsNext(); },
+       swipeRight: function(){ front.windowsPrevious(); },
+       threshold: {x: 30, y: 20}
+});
\ No newline at end of file