From ccb389437d772a7464176963487a0dfce338967b Mon Sep 17 00:00:00 2001 From: Darren Date: Sat, 16 Jul 2011 16:18:43 +0100 Subject: [PATCH] Added touchscreen UI styles, touchscreen gestures --- css/default.css | 1 + css/touchscreen_tweaks.css | 6 +- js/front.js | 41 ++++++++++-- js/touchscreen_tweaks.js | 126 ++++++++++++++++++++++++++++++++++++- 4 files changed, 163 insertions(+), 11 deletions(-) diff --git a/css/default.css b/css/default.css index 72e4772..b55f526 100644 --- a/css/default.css +++ b/css/default.css @@ -1,6 +1,7 @@ body, html { height: 100%; margin:0px; font-size:14px; + line-height:1.4em; } diff --git a/css/touchscreen_tweaks.css b/css/touchscreen_tweaks.css index 5e74a5d..a90bce5 100644 --- a/css/touchscreen_tweaks.css +++ b/css/touchscreen_tweaks.css @@ -6,6 +6,8 @@ #kiwi .windowlist ul { /* border: 1px solid blue;*/ - margin-right: 0px; /* i* safaris seem to behave differently here :/ */ + margin-right: 0px; /* i* safari seem to behave differently here :/ */ height: 50px; -} \ No newline at end of file +} + +#kiwi.touchscreen .userlist { line-height:1.6em; } \ No newline at end of file diff --git a/js/front.js b/js/front.js index 918da87..9dcb86d 100644 --- 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 ba4d79b..43a50b2 100644 --- 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 -- 2.25.1