Skip to content

Commit

Permalink
Tabs bug is fixed, .loadContent method added, other bug fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@vitmalina
vitmalina committed Oct 4, 2011
1 parent d116814 commit 2d13017
Show file tree
Hide file tree
Showing 20 changed files with 109 additions and 59 deletions.
127 changes: 96 additions & 31 deletions includes/jsTouch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,21 @@ var jsTouch = {
}
},

loadContent: function(url, params, callBack) {
if (window.event) { var currObj = this.getCurrentBox(window.event.target); }
// if target is defined - open there
if (params && typeof(params) == 'object' && params['target']) {
window.elements[params['target']].loadContent(url, params, callBack);
} else {
if (currObj) {
currObj.loadContent(url, params, callBack);
} else {
// no current object -> loading into last current
this.lastCurrObj.loadContent(url, params, callBack);
}
}
},

overlayHTML: function(HTML, params, callBack) {
// parse parameters
var top = 52;
Expand Down Expand Up @@ -65,6 +80,10 @@ var jsTouch = {
div.style.cssText += 'left: '+ left +'px; top: '+ top +'px; width: '+ width +'px; height: '+ height +'px; -webkit-border-radius: 5px; '+
'-webkit-transition: all .4s ease-in-out; opacity: 0;';
div.innerHTML = HTML;
// isert another DIV (needed for iScroll)
var tmp = $('.content', div)[0];
if (tmp) tmp.innerHTML = '<div>' + tmp.innerHTML + '</div>';

$(document.body).append(div);
setTimeout("$('#overlay_box').css('opacity', '1');", 1); // otherwise transition is not working
// add clicked class when clicked on the link
Expand All @@ -79,6 +98,10 @@ var jsTouch = {
// load overlay content
$.get(url, {}, function (data) {
$('#overlay_box').html(data);
// isert another DIV (needed for iScroll)
var tmp = $('.content', $('#overlay_box'))[0];
if (tmp) tmp.innerHTML = '<div>' + tmp.innerHTML + '</div>';

// check presens of footer and toolbar
var isToolbar = ($('div.overlay div.toolbar').length > 0 ? true : false);
var isFooter = ($('div.overlay div.footer').length > 0 ? true : false);
Expand Down Expand Up @@ -113,29 +136,31 @@ var jsTouch = {
getCurrentBox: function(el) {
var currObj = null;
var tmp = el;
while (tmp.tagName != 'BODY') {
while (tmp && tmp.tagName != 'BODY') {
if (tmp.tagName == 'DIV' && window.elements[tmp.id]) {
currObj = window.elements[tmp.id];
break;
}
tmp = tmp.parentNode;
}
if (currObj != null) this.lastCurrObj = currObj; // remember last real current
return currObj;
}
}

function jsTouchBox(name, params) {
// -- variables
this.name = name; // - unique name for the element
this.width = ''; // - if empty - then full screen
this.height = ''; // - if empty - then full screen
this.name = name; // - unique name for the element
this.width = ''; // - if empty - then full screen
this.height = ''; // - if empty - then full screen
// -- init function
this.loadPage = jsTouch_loadPage;
this.animate = jsTouch_animate;
this.initScroll = jsTouch_initScroll;
this.initTabs = jsTouch_initTabs;
this.initLinks = jsTouch_initLinks;
this.resize = jsTouch_resize;
this.loadPage = jsTouch_loadPage;
this.loadContent = jsTouch_loadContent;
this.animate = jsTouch_animate;
this.initScroll = jsTouch_initScroll;
this.initTabs = jsTouch_initTabs;
this.initLinks = jsTouch_initLinks;
this.resize = jsTouch_resize;
// -- internal variables
this._tmpCallBack;
this._tmpTimer;
Expand All @@ -159,6 +184,28 @@ function jsTouchBox(name, params) {
);
}

function jsTouch_loadContent(url, params, callBack) {
// -- save some temp variables
this._tmpCallBack = callBack;
// -- get the page
this._tmpTimer = window.setTimeout(new Function("$('#"+ this.name +"').append('<div class=\"progress\">Loading...</div>')"), 200);
$.get(url, {}, new Function("data",
"$('#"+ this.name +" > .progress').remove();"+
"var obj = window.elements['"+ ((typeof(params) == 'object' && params['target']) ? params['target'] : this.name) +"']; "+
"if (obj && typeof(obj) == 'object') { "+
" clearTimeout(obj._tmpTimer); "+
" if (obj._lastDiv) {"+
" $('#"+ this.name +" > .jsTouch.div1 > div.content').html('<div>'+ data +'</div>');"+
" } else { "+
" $('#"+ this.name +" > .jsTouch.div2 > div.content').html('<div>'+ data +'</div>');"+
" }"+
" obj.initLinks();"+
" obj.initScroll();"+
" if (obj._tmpCallBack && obj._tmpCallBack == 'function') { obj._tmpCallBack(); } "+
"}")
);
}

function jsTouch_animate(HTML, transition) {
// get width and height of the div
var width = this.width;
Expand Down Expand Up @@ -189,6 +236,9 @@ function jsTouchBox(name, params) {
div_old.style.cssText += comcss +'-webkit-transform: translate3d(0, 0, 0);';
div_new.style.cssText += comcss +'-webkit-transform: translate3d('+ width +'px, 0, 0);';
div_new.innerHTML = HTML;
// isert another DIV (needed for iScroll)
var tmp = $('.content', div_new)[0];
if (tmp) tmp.innerHTML = '<div>' + tmp.innerHTML + '</div>';
// -- need a timing function because otherwise not working
window.setTimeout(function() {
div_new.style.cssText += '-webkit-transition: .5s; -webkit-transform: translate3d(0px, 0, 0);';
Expand All @@ -201,6 +251,9 @@ function jsTouchBox(name, params) {
div_old.style.cssText += comcss +'-webkit-transform: translate3d(0, 0, 0);';
div_new.style.cssText += comcss +'-webkit-transform: translate3d(-'+ width +'px, 0, 0);';
div_new.innerHTML = HTML;
// isert another DIV (needed for iScroll)
var tmp = $('.content', div_new)[0];
if (tmp) tmp.innerHTML = '<div>' + tmp.innerHTML + '</div>';
// -- need a timing function because otherwise not working
window.setTimeout(function() {
div_new.style.cssText += '-webkit-transition: .5s; -webkit-transform: translate3d(0px, 0, 0);';
Expand All @@ -213,6 +266,9 @@ function jsTouchBox(name, params) {
div_old.style.cssText += comcss +'z-index: 1; -webkit-transform: translate3d(0, 0, 0);';
div_new.style.cssText += comcss +'z-index: 0; -webkit-transform: translate3d(0, 0, 0);';
div_new.innerHTML = HTML;
// isert another DIV (needed for iScroll)
var tmp = $('.content', div_new)[0];
if (tmp) tmp.innerHTML = '<div>' + tmp.innerHTML + '</div>';
// -- need a timing function because otherwise not working
window.setTimeout(function() {
div_new.style.cssText += '-webkit-transition: .5s; -webkit-transform: translate3d(0, 0, 0);';
Expand All @@ -225,6 +281,9 @@ function jsTouchBox(name, params) {
div_old.style.cssText += comcss +'-webkit-transform: translate3d(0, 0, 0);';
div_new.style.cssText += comcss +'-webkit-transform: translate3d(0, '+ height +'px, 0);';
div_new.innerHTML = HTML;
// isert another DIV (needed for iScroll)
var tmp = $('.content', div_new)[0];
if (tmp) tmp.innerHTML = '<div>' + tmp.innerHTML + '</div>';
// -- need a timing function because otherwise not working
window.setTimeout(function() {
div_new.style.cssText += '-webkit-transition: .5s; -webkit-transform: translate3d(0, 0, 0);';
Expand All @@ -237,6 +296,9 @@ function jsTouchBox(name, params) {
div_old.style.cssText += comcss +'-webkit-transform: rotateY(0deg);';
div_new.style.cssText += comcss +'-webkit-transform: rotateY(-180deg);';
div_new.innerHTML = HTML;
// isert another DIV (needed for iScroll)
var tmp = $('.content', div_new)[0];
if (tmp) tmp.innerHTML = '<div>' + tmp.innerHTML + '</div>';
// -- need a timing function because otherwise not working
window.setTimeout(function() {
div_new.style.cssText += '-webkit-transition: .5s; -webkit-transform: rotateY(0deg);';
Expand All @@ -249,6 +311,9 @@ function jsTouchBox(name, params) {
div_old.style.cssText += comcss +'-webkit-transform: rotateY(0deg);';
div_new.style.cssText += comcss +'-webkit-transform: rotateY(180deg);';
div_new.innerHTML = HTML;
// isert another DIV (needed for iScroll)
var tmp = $('.content', div_new)[0];
if (tmp) tmp.innerHTML = '<div>' + tmp.innerHTML + '</div>';
// -- need a timing function because otherwise not working
window.setTimeout(function() {
div_new.style.cssText += '-webkit-transition: .5s; -webkit-transform: rotateY(0deg);';
Expand All @@ -261,6 +326,9 @@ function jsTouchBox(name, params) {
div_old.style.cssText += comcss +'-webkit-transform: rotateX(0deg);';
div_new.style.cssText += comcss +'-webkit-transform: rotateX(180deg);';
div_new.innerHTML = HTML;
// isert another DIV (needed for iScroll)
var tmp = $('.content', div_new)[0];
if (tmp) tmp.innerHTML = '<div>' + tmp.innerHTML + '</div>';
// -- need a timing function because otherwise not working
window.setTimeout(function() {
div_new.style.cssText += '-webkit-transition: .5s; -webkit-transform: rotateX(0deg);';
Expand All @@ -273,6 +341,9 @@ function jsTouchBox(name, params) {
div_old.style.cssText += comcss +'-webkit-transform: rotateX(0deg);';
div_new.style.cssText += comcss +'-webkit-transform: rotateX(-180deg);';
div_new.innerHTML = HTML;
// isert another DIV (needed for iScroll)
var tmp = $('.content', div_new)[0];
if (tmp) tmp.innerHTML = '<div>' + tmp.innerHTML + '</div>';
// -- need a timing function because otherwise not working
window.setTimeout(function() {
div_new.style.cssText += '-webkit-transition: .5s; -webkit-transform: rotateX(0deg);';
Expand All @@ -285,6 +356,9 @@ function jsTouchBox(name, params) {
div_old.style.cssText += comcss +'-webkit-transform: translate3d(0, 0, 0);';
div_new.style.cssText += comcss +'-webkit-transform: translate3d(0, 0, 0); -webkit-transform: scale(.8); opacity: 0;';
div_new.innerHTML = HTML;
// isert another DIV (needed for iScroll)
var tmp = $('.content', div_new)[0];
if (tmp) tmp.innerHTML = '<div>' + tmp.innerHTML + '</div>';
// -- need a timing function because otherwise not working
window.setTimeout(function() {
div_new.style.cssText += '-webkit-transition: .5s; -webkit-transform: scale(1); opacity: 1;';
Expand All @@ -297,6 +371,9 @@ function jsTouchBox(name, params) {
div_old.style.cssText += comcss +'-webkit-transform: translate3d(0, 0, 0); -webkit-transform: scale(1); opacity: 1;';
div_new.style.cssText += comcss +'-webkit-transform: translate3d(0, 0, 0); opacity: 0;';
div_new.innerHTML = HTML;
// isert another DIV (needed for iScroll)
var tmp = $('.content', div_new)[0];
if (tmp) tmp.innerHTML = '<div>' + tmp.innerHTML + '</div>';
// -- need a timing function because otherwise not working
window.setTimeout(function() {
div_new.style.cssText += '-webkit-transition: .5s; opacity: 1;';
Expand All @@ -309,6 +386,9 @@ function jsTouchBox(name, params) {
div_old.style.cssText += comcss +'-webkit-transform: translate3d(0, 0, 0); opacity: 1;';
div_new.style.cssText += comcss +'-webkit-transform: translate3d(0, 0, 0); opacity: 0;';
div_new.innerHTML = HTML;
// isert another DIV (needed for iScroll)
var tmp = $('.content', div_new)[0];
if (tmp) tmp.innerHTML = '<div>' + tmp.innerHTML + '</div>';
// -- need a timing function because otherwise not working
window.setTimeout(function() {
div_new.style.cssText += '-webkit-transition: .5s; opacity: 1;';
Expand All @@ -329,6 +409,7 @@ function jsTouchBox(name, params) {
// -------
this.resize();
this.initScroll();
//setTimeout("window.elements['"+ this.name +"'].initScroll();", 600); // if init scroll right away, then it slides upwards
}

function jsTouch_initScroll() {
Expand All @@ -343,35 +424,19 @@ function jsTouchBox(name, params) {
} else {
var div = $('#'+ this.name +' > .jsTouch.div2 > div.content')[0];
}
// destroy previous scroll
if (this.scroll) { this.scroll.destroy(); this.scroll = null; }
// init scroll
// if (this.scroll) this.scroll.destroy(); // if destoyed - it flicks
this.scroll = new iScroll(div, { desktopCompatibility: true, zoom: false });
window.tmp_scroll = this.scroll;
setTimeout(new Function("window.tmp_scroll.refresh()"), 100);
setTimeout(new Function("window.elements['"+ this.name +"'].scroll.refresh()"), 100);
}

function jsTouch_initTabs() {
// if there are tabs - show/hide them, create onclick function
$('#'+ this.name +' div.footer a').each( function (i, el) {
var tmp = String(el.href).split('#');
var id = tmp[1];
if ($(el).hasClass('clicked')) { $('#'+id).show(); } else { $('#'+id).hide(); }
$(el).bind('touchstart', function() { $(window.event.currentTarget).addClass('clicked'); });
$(el).click(function () {
$('#'+ this.name +' div.footer a').each( function (i, el) {
$(el).bind('touchstart', function () { $(this).click(); });
$(el).bind('click', function() {
var currObj = jsTouch.getCurrentBox(window.event.currentTarget);
// change clicked tab
$('#'+ currObj.name +' a').removeClass('clicked');
$(window.event.currentTarget).addClass('clicked');
// show/hide tabs
$('#'+ currObj.name +' div.footer a').each( function (i, el) {
var tmp = String(el.href).split('#');
var id = tmp[1];
if ($(el).hasClass('clicked')) { $('#'+id).show(); } else { $('#'+id).hide(); }
});
// init scroll
currObj.resize();
currObj.initScroll();
});
});
}
Expand Down
2 changes: 0 additions & 2 deletions pages/animations.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ <h1>Animations</h1>
<a class="button back" onclick="jsTouch.loadPage('pages/home.html', { transition: 'slide-right' });"><span></span>Back</a>
</div>
<div class="content">
<div>
<h2>Flip Transitions</h2>
<ul class="rounded">
<li><a onclick="jsTouch.loadPage('pages/animations.html', { transition: 'flip-left' });">
Expand Down Expand Up @@ -38,5 +37,4 @@ <h2>Slide Transitions</h2>
<div style="padding: 0px 15px">
All animations are done with CSS3 which allows to utilize hardware acceleration.
</div>
</div>
</div>
2 changes: 0 additions & 2 deletions pages/buttons.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
</div>
</div>
<div class="content">
<div>
<div style="padding: 10px;">
<a href="javascript:" class="button-black" style="margin-top: 10px; width: 270px"> Black Button </a>
<a href="javascript:" class="button-gray" style="margin-top: 10px; width: 270px"> Gray Button </a>
Expand All @@ -18,4 +17,3 @@
<a href="javascript:" class="button-blue" style="margin-top: 10px; width: 270px"> Blue Button </a>
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion pages/forms.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<div class="toolbar"> <h1>Forms</h1> <a class="button back" onclick="jsTouch.loadPage('pages/home.html', { transition: 'slide-right' });"><span></span>Back</a></div><div class="content"><div> <form name="lform" method="post" target="lframe" action="pages/forms_save.php"> <ul class="rounded"> <!--li> <div class="label">Active</div> <div class="field"><input type="checkbox" name="active" onclick="alert(1); if ($(this)[0].checked) $(this).addClass('checked'); else $(this).removeClass('checked');"></div> <div class="clear"></div> </li--> <li> <div class="label">First Name</div> <div class="field"><input type="text" name="fname" value=""></div> <div class="clear"></div> </li> <li> <div class="label">Last Name</div> <div class="field"><input type="text" name="lname" value=""></div> <div class="clear"></div> </li> <li> <div class="label">URL</div> <div class="field"><input type="url" name="url" value="" autocapitalize="off"></div> <div class="clear"></div> </li> <li> <div class="label">Email</div> <div class="field"><input type="email" name="email" value="" autocapitalize="off"></div> <div class="clear"></div> </li> <li> <div class="label">Login</div> <div class="field"><input type="text" name="login" value="" autocapitalize="off"></div> <div class="clear"></div> </li> <li> <div class="label">Password</div> <div class="field"><input type="password" name="password" value="" autocapitalize="off"></div> <div class="clear"></div> </li> </ul> <div style="text-align: center"> <a href="javascript: document.lform.submit();" class="button-green" style="width: 270px">Save Record</a> <br><br> <iframe name="lframe"></iframe> <br><br> </div> </form></div></div>
<div class="toolbar"> <h1>Forms</h1> <a class="button back" onclick="jsTouch.loadPage('pages/home.html', { transition: 'slide-right' });"><span></span>Back</a></div><div class="content"> <form name="lform" method="post" target="lframe" action="pages/forms_save.php"> <ul class="rounded"> <!--li> <div class="label">Active</div> <div class="field"><input type="checkbox" name="active" onclick="alert(1); if ($(this)[0].checked) $(this).addClass('checked'); else $(this).removeClass('checked');"></div> <div class="clear"></div> </li--> <li> <div class="label">First Name</div> <div class="field"><input type="text" name="fname" value=""></div> <div class="clear"></div> </li> <li> <div class="label">Last Name</div> <div class="field"><input type="text" name="lname" value=""></div> <div class="clear"></div> </li> <li> <div class="label">URL</div> <div class="field"><input type="url" name="url" value="" autocapitalize="off"></div> <div class="clear"></div> </li> <li> <div class="label">Email</div> <div class="field"><input type="email" name="email" value="" autocapitalize="off"></div> <div class="clear"></div> </li> <li> <div class="label">Login</div> <div class="field"><input type="text" name="login" value="" autocapitalize="off"></div> <div class="clear"></div> </li> <li> <div class="label">Password</div> <div class="field"><input type="password" name="password" value="" autocapitalize="off"></div> <div class="clear"></div> </li> </ul> <div style="text-align: center"> <a href="javascript: document.lform.submit();" class="button-green" style="width: 270px">Save Record</a> <br><br> <iframe name="lframe"></iframe> <br><br> </div> </form></div>
Expand Down
6 changes: 3 additions & 3 deletions pages/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
<h1>Web 2.0 Touch</h1>
</div>
<div class="content">
<div>
<div style="padding: 5px 15px">
Welcome to Web 2.0 Touch - a Concise Mini JavaScript frame work for touch devices (iPhone, iPad, Android).
</div>
Expand All @@ -28,7 +27,7 @@ <h1>Web 2.0 Touch</h1>
</a>
</li>
<li>
<a onclick="jsTouch.loadPage('pages/tabs.html', { transition: 'slide-left' });">
<a onclick="jsTouch.loadPage('pages/tabs.html', { transition: 'slide-left' }, function () { alert(load);} );">
<img src="images/tabs/aim.png" class="icon greenbox"> Tabs <span class="arrow"></span>
</a>
</li>
Expand All @@ -50,5 +49,6 @@ <h2>External Links</h2>
<li><a href="http://web20boom.com/touch">Web 2.0 Touch Home <span class="arrow"></span> </a></li>
<li><a href="http://web20boom.com">Web 2.0 UI Library <span class="arrow"></span> </a></li>
</ul>
</div>

<div style="clear: both; height: 15px"></div>
</div>
2 changes: 0 additions & 2 deletions pages/list-edgetoedge.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ <h1>EdgeToEdge List</h1>
<a class="button back" onclick="jsTouch.loadPage('pages/lists.html', { transition: 'slide-right' });"><span></span>Back</a>
</div>
<div class="content">
<div>
<div class="edgetoedge-title">A</div>
<ul class="edgetoedge">
<li><a onclick="jsTouch.loadPage('pages/list-edgetoedge.html', { transition: 'slide-left' });">Item 1<span class="count">4</span></a></li>
Expand Down Expand Up @@ -43,4 +42,3 @@ <h1>EdgeToEdge List</h1>
<li><a onclick="jsTouch.loadPage('pages/list-edgetoedge.html', { transition: 'slide-left' });">Item 29<span class="arrow"></span></a></li>
</ul>
</div>
</div>
4 changes: 1 addition & 3 deletions pages/list-rounded.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ <h1>Rounded List</h1>
<a class="button back" onclick="jsTouch.loadPage('pages/lists.html', { transition: 'slide-right' });"><span></span>Back</a>
</div>
<div class="content">
<div>
<ul class="rounded">
<li><a onclick="jsTouch.loadPage('pages/list-rounded.html', { transition: 'slide-left'});">Item 1<span class="count">4</span></a></li>
<li><a onclick="jsTouch.loadPage('pages/list-rounded.html', { transition: 'slide-left'});">Item 2<span class="count">6</span></a></li>
Expand Down Expand Up @@ -39,6 +38,5 @@ <h1>Rounded List</h1>
<li><a onclick="jsTouch.loadPage('pages/list-rounded.html', { transition: 'slide-left'});">Item 28</a></li>
<li><a onclick="jsTouch.loadPage('pages/list-rounded.html', { transition: 'slide-left'});">Item 29<span class="arrow"></span></a></li>
</ul>
<div style="height: 10px"></div>
</div>
<div style="clear: both; 15px"></div>
</div>
Loading

0 comments on commit 2d13017

Please sign in to comment.