Skip to content
Browse files

Finished 'pageinit' event implementation. Added css for split screen …

…that shares title bar (not complete yet). Made dialog mechanism go both way by default (need to use pageinit before). Fixed css firefox on flex-box: orient must be defined every level.
  • Loading branch information...
1 parent 0370eee commit b9fcaf79e101fb2e003b6620a4d1b108a938cf05 @thomasyip thomasyip committed Jul 2, 2011
Showing with 76 additions and 13 deletions.
  1. +32 −8 jqtouch/jqtouch.js
  2. +44 −5 themes/apple/theme.css
View
40 jqtouch/jqtouch.js
@@ -31,6 +31,7 @@
var MOVE_EVENT = SUPPORT_TOUCH? 'touchmove' : 'mousemove';
var END_EVENT = SUPPORT_TOUCH? 'touchend' : 'mouseup';
var CANCEL_EVENT = SUPPORT_TOUCH? 'touchcancel' : 'mouseout'; // mouseout on document
+ var KEY_PAGE_INITIALIZED = 'page-initialized';
// Initialize internal variables
var state_started,
@@ -648,6 +649,11 @@
// branch on href.search (ie, ..?abc=1&ijk=2)
if (!match(fromPage.search, toPage.search)) {
$('#' + fromPage.id).trigger('pageout', {hash: '#' + fromPage.id, search: fromPage.search});
+
+ if ($('#' + toPage.id).data(KEY_PAGE_INITIALIZED) !== true) {
+ $('#' + toPage.id).data(KEY_PAGE_INITIALIZED, true);
+ $body.trigger('pageinit', {page: ('#' + toPage.id)});
+ }
$('#' + toPage.id).trigger('pagein', {hash: '#' + toPage.id, search: toPage.search});
removePageInHistory(toPage.i, fromPage.i, {section: fromPage.section});
} else {
@@ -707,6 +713,11 @@
heavy: param.heavy,
pagecallback: function() {
$('#' + fromPage.id).trigger('pagesuspense', {hash: '#' + fromPage.id, search: fromPage.search});
+
+ if (toPage.data(KEY_PAGE_INITIALIZED) !== true) {
+ toPage.data(KEY_PAGE_INITIALIZED, true);
+ $body.trigger('pageinit', {page: ('#' + toPage[0].id)});
+ }
toPage.trigger('pagein', {hash: '#' + toPage.attr('id'), search: param.search});
}
});
@@ -722,6 +733,11 @@
// branch on href.search (ie, ..?abc=1&ijk=2)
if (!match(fromPage.search, search)) {
$('#' + fromPage.id).trigger('pageout', {hash: '#' + fromPage.id, search: fromPage.search});
+
+ if (toPage.data(KEY_PAGE_INITIALIZED) !== true) {
+ toPage.data(KEY_PAGE_INITIALIZED, true);
+ $body.trigger('pageinit', {page: ('#' + toPage[0].id)});
+ }
toPage.trigger('pagein', {hash: '#' + toPage.attr('id'), search: param.search});
removePageInHistory(fromPage.i, 0, {section: fromPage.section});
addPageToHistory(toPage, search, pageback, adjustedName);
@@ -839,7 +855,6 @@
$node.children().find('[section]:not([section~="' + section + '"])').addClass('missection');
$body.trigger('pageInserted', {page: $node.appendTo($body)});
- $body.trigger("pageinit", {page: $node.appendTo($body)});
if ($node.hasClass('current') || !targetPage) {
targetPage = $node;
@@ -1129,12 +1144,12 @@
if (returns) {
for (var i=0, len=returns.length; i<len; i++) {
var item = returns[i];
- var $item = $el.find('input[data-sourcename="' + item.name + '"], input[name="' + item.name + '"]').first();
+ var $item = $el.find('input[data-sourcename="' + item.name + '"], input[name="' + item.name + '"], textarea[data-sourcename="' + item.name + '"], textarea[name="' + item.name + '"]').first();
if (i === 0 && $item.length === 0) {
// sloppy workaround for the simpliest
- var $item = $el.find('input[value]').eq(i);
+ var $item = $el.find('input[value], textarea[value]').eq(i);
}
- console.warn("setting value for item: " + $item.attr("id"));
+ console.warn("setting value for item: " + $item.attr("name"));
$item.val(item.value);
if ($item.attr('type') === 'radio' || $item.attr('type') === 'checkbox') {
$item.attr('checked', true);
@@ -1143,12 +1158,14 @@
} // (!returns) indicates dialog was cancelled
};
- $el.find('input[data-sourcename]').each(function(i, input) {
+ $el.find('input[data-sourcename], textarea[data-sourcename]').each(function(i, input) {
var $input = $(input);
var name = $input.attr('data-sourcename');
if (name) {
search[name] = $input.val();
}
+ var $target = $(hash).data('referrer', $el).find('input[data-sourcename="' + name + '"], input[name="' + name + '"], textarea[data-sourcename="' + name + '"], textarea[name="' + name + '"]').first();
+ $target.val($input.val());
});
}
@@ -1629,6 +1646,11 @@
}
addPageToHistory(currentAside);
+
+ if (currentAside.data(KEY_PAGE_INITIALIZED) !== true) {
+ currentAside.data(KEY_PAGE_INITIALIZED, true);
+ currentAside.trigger('pageinit', {page: currentAside.attr('id')});
+ }
currentAside.trigger('pagein', {hash: '#' + currentAside[0].id, search: {}, referer: document.referrer});
}
defaultSection = "main";
@@ -1654,6 +1676,11 @@
}
currentPage.addClass('current alphapage');
addPageToHistory(currentPage);
+
+ if (currentPage.data(KEY_PAGE_INITIALIZED) !== true) {
+ currentPage.data(KEY_PAGE_INITIALIZED, true);
+ currentPage.trigger('pageinit', {page: currentPage.attr('id')});
+ }
currentPage.trigger('pagein', {hash: '#' + currentPage[0].id, search: search, referer: document.referrer});
// adjust visibiliy of elements
@@ -1666,9 +1693,6 @@
// move to init page be specified in querystring
var $page = $("#jqt > " + startpage);
$page = $("#jqt > " + startpage);
- $page.each(function(i, page) {
- $body.trigger("pageinit");
- });
if (startpage) {
var section = $page.attr("section");
View
49 themes/apple/theme.css
@@ -46,6 +46,9 @@ body {
#jqt > * .contentwrap {
display: -webkit-box; display: -moz-box; display: box;
+ -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical;
+ -webkit-box-pack: justify; -moz-box-pack: justify; box-pack: justify;
+ -webkit-box-align: stretch; -moz-box-align: stretch; box-align: stretch;
position: relative;
-webkit-box-flex: 10; -moz-box-flex: 10; box-flex: 10;
min-height: 100%;
@@ -75,6 +78,40 @@ body {
content: attr(title);
}
+#jqt > * .split {
+ display: -webkit-box; display: -moz-box; display: box;
+ position: relative;
+ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
+ -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal;
+ -webkit-box-pack: justify; -moz-box-pack: justify; box-pack: justify;
+ -webkit-box-align: stretch; -moz-box-align: stretch; box-align: stretch;
+ min-height: 100%; height: 100%; width: 100%;
+ margin: 0;
+}
+
+#jqt > * .split > * {
+ display: -webkit-box; display: -moz-box; display: box;
+ position: relative;
+ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
+ -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical;
+ -webkit-box-pack: justify; -moz-box-pack: justify; box-pack: justify;
+ -webkit-box-align: stretch; -moz-box-align: stretch; box-align: stretch;
+ height: 100%; min-width: 320px;
+ border-radius: 5px;
+ /* border-top workaround the bug/feature that mobile safari skip the child (such as ui) padding */
+ border-top: 1px solid transparent;
+ margin-top: -1px;
+}
+
+#jqt > * .split > .aside {
+ width: 320px;
+}
+
+#jqt > * .split > .main {
+ -webkit-box-flex: 10; -moz-box-flex: 10; box-flex: 10;
+ border-left: 1px solid black;
+}
+
@-moz-document url-prefix() {
#jqt > div, #jqt > form {
}
@@ -83,8 +120,8 @@ body {
}
}
-#jqt > * > div:not(.contentwrap):not(.navibar):not(.toolbar):not(.bar):not(.info):not(.choicefloat):not(.spinnerfloat):not(.sw-slots-wrapper),
-#jqt > * > form:not(.contentwrap):not(.navibar):not(.toolbar):not(.bar):not(.info):not(.choicefloat):not(.spinnerfloat):not(.sw-slots-wrapper) {
+#jqt > * > div:not(.contentwrap):not(.navibar):not(.toolbar):not(.bar):not(.info):not(.choicefloat):not(.spinnerfloat):not(.sw-slots-wrapper):not(.split),
+#jqt > * > form:not(.contentwrap):not(.navibar):not(.toolbar):not(.bar):not(.info):not(.choicefloat):not(.spinnerfloat):not(.sw-slots-wrapper):not(.split) {
/* back-compat worthwhile? */
top: 0; left: 0; right: 0;
/* min-height: 100%; */
@@ -103,7 +140,7 @@ body {
}
#jqt > * .contentwrap > .content,
-#jqt > * .contentwrap > :first-child:not(.noncontent) {
+#jqt > * .contentwrap > :first-child:not(.noncontent):not(.split) {
position: absolute;
display: block;
top: 0; left: 0; right: 0;
@@ -1346,7 +1383,7 @@ div.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -we
height: 1.2em;
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
text-align: center;
- bottom: 27%; right: 0%; top: auto; left: auto;
+ bottom: 27%; right: 0%; top: auto; left: auto;
width: auto;
padding: 1px;
background-color: #C02020;
@@ -1941,6 +1978,7 @@ div.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -we
display: -webkit-box; display: -moz-box; display: box;
-webkit-box-flex: 10; -moz-box-flex: 10; box-flex: 10;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
+ -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal;
}
#jqt form ul li.noflex, #jqt ul.form li.noflex,
@@ -1998,6 +2036,7 @@ div.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -we
border: 0; border: 1px solid transparent;
padding: 0;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
+ -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal;
-webkit-text-size-adjust: none;
-webkit-appearance: none; -moz-appearance: none;
-webkit-user-select: text;
@@ -2572,7 +2611,7 @@ div.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -we
}
#jqt ul.detail li.header {
- background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(127, 127, 127, 0.75)), to(rgba(127, 127, 127, 0)));
+ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(127, 127, 127, 0.75)), to(rgba(127, 127, 127, 0)));
}
#jqt ul.detail li.description {

0 comments on commit b9fcaf7

Please sign in to comment.
Something went wrong with that request. Please try again.