Skip to content

Commit 884ad97

Browse files
asyraf9asyraf9
committed
did a lot of fixes for iOS displays, as well as cleaned up the code. for commit history, check out the gh-pages branch. i develop there so i can test on other platforms
1 parent 194edc6 commit 884ad97

File tree

1 file changed

+78
-82
lines changed

1 file changed

+78
-82
lines changed

‎experiments/splitview/jquery.mobile.splitview.js‎

Lines changed: 78 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
1-
//TODO: need to set panel widths according to media width - is this necessary?
21
//ISSUE: activeBtnClass not removed when a new link is given this class - causing a lot of active buttons.
3-
//ISSUE: history doesn't change when links in main panel is clicked, and the back button points to
4-
// the previous page which don't make sense. idea: use data-history="false,crumb" on panel div
5-
//ISSUE: clicking on a navbar link twice ruins the entire hash history. need to see what happened.
6-
//ISSUE: line 1872 in jqm, in transitionPages adds a history entry anyways - does this affect the transition path for history?
7-
82
(function($,window,undefined){
93
$( window.document ).bind('mobileinit', function(){
104
if ($.mobile.media("screen and (min-width:480px)")) {
@@ -19,6 +13,9 @@
1913
$(window).trigger('orientationchange');
2014
});
2115

16+
//----------------------------------------------------------------------------------
17+
//Main event bindings: click, form submits, hashchange and orientationchange/resize
18+
//----------------------------------------------------------------------------------
2219
//DONE: link click event binding for changePage
2320
$("a").die('click');
2421
//this will mostly be a copy of the original handler with some modifications
@@ -52,7 +49,7 @@
5249
return;
5350
}
5451

55-
//temporary fix to remove activeBtnClass
52+
//TODO: temporary fix to remove activeBtnClass
5653
$(".ui-btn."+$.mobile.activeBtnClass).removeClass($.mobile.activeBtnClass);
5754
$activeClickedLink = $this.closest( ".ui-btn" ).addClass( $.mobile.activeBtnClass );
5855

@@ -102,8 +99,6 @@
10299
}
103100
//if link refers to a page inside the same panel, changePage on that panel
104101
else {
105-
//BUG: this setting is panel insensitive - so links in main panel also behave as specified below
106-
// need to define more data attributes in panels to allow custom panel behaviour
107102
from=$currPanelActivePage;
108103
$.mobile.pageContainer=$currPanel;
109104
var hashChange= (hash == 'false' || hash == 'crumbs')? false : true;
@@ -206,92 +201,30 @@
206201
$.mobile.activePage=$mainPanelActivePage.length? $mainPanelActivePage : undefined;
207202
$.mobile.changePage(to, transition, undefined, false, true );
208203
}
209-
//there's no hash, go to the first page in the dom, and set all other panels to its first page.
204+
//there's no hash, go to the first page in the main panel.
210205
else {
211-
//temp fix - need to get an array of panels and set their first pages to show.
212206
$.mobile.pageContainer=$mainPanel;
213207
$.mobile.activePage=$mainPanelActivePage? $mainPanelActivePage : undefined;
214-
//temp: set false for fromHashChange due to isPageTransitioning causing pageContainer settings to be overriden
215-
$.mobile.changePage($mainPanelFirstPage, 'none', true, false, false );
216-
$.mobile.pageContainer=$menuPanel;
217-
$.mobile.activePage=$menuPanelActivePage? $menuPanelActivePage : undefined;
218-
$.mobile.changePage($menuPanelFirstPage, 'none', false, false, false);
208+
$.mobile.changePage($mainPanelFirstPage, transition, undefined, false, true );
219209
}
220210
});
221211

222-
//DONE: pageshow binding for scrollview
223-
$('div[data-role="page"]').live('pagebeforeshow', function(event){
224-
var $page = $(this);
225-
$page.find('div[data-role="content"]').attr('data-scroll', 'true');
226-
if ($.support.touch) {
227-
$page.find("[data-scroll]:not(.ui-scrollview-clip)").each(function(){
228-
var $this = $(this);
229-
// XXX: Remove this check for ui-scrolllistview once we've
230-
// integrated list divider support into the main scrollview class.
231-
if ($this.hasClass("ui-scrolllistview"))
232-
$this.scrolllistview();
233-
else
234-
{
235-
var st = $this.data("scroll") + "";
236-
var paging = st && st.search(/^[xy]p$/) != -1;
237-
var dir = st && st.search(/^[xy]/) != -1 ? st.charAt(0) : null;
238-
239-
var opts = {};
240-
if (dir)
241-
opts.direction = dir;
242-
if (paging)
243-
opts.pagingEnabled = true;
244-
245-
var method = $this.data("scroll-method");
246-
if (method)
247-
opts.scrollMethod = method;
248-
249-
$this.scrollview(opts);
250-
}
251-
});
252-
}
253-
});
254-
255-
//popover button click handler - from http://www.cagintranet.com/archive/create-an-ipad-like-dropdown-popover/
256-
$('#popover-btn').live('click', function(e){
257-
e.preventDefault();
258-
$('.panel-popover').fadeToggle('fast');
259-
if ($('#popover-btn').hasClass($.mobile.activeBtnClass)) {
260-
$('#popover-btn').removeClass($.mobile.activeBtnClass);
261-
} else {
262-
$('#popover-btn').addClass($.mobile.activeBtnClass);
263-
}
264-
});
265-
266-
$('body').live('vclick', function(event) {
267-
if (!$(event.target).closest('.panel-popover').length && !$(event.target).closest('#popover-btn').length) {
268-
$(".panel-popover").stop(true, true).hide();
269-
$('#popover-btn').removeClass($.mobile.activeBtnClass);
270-
};
271-
});
272-
273-
//TODO: bind orientationchange and resize
274-
//In order to do this, we need to:
275-
//1. hide and resize menu panel
276-
//2. make main panel fullscreen
277-
//3. wrap design divs around menu panel
278-
//4. add menu button to top left of main panel
279-
//5. bind show() menu panel onclick of menu button
212+
//DONE: bind orientationchange and resize
280213
$(window).bind('orientationchange resize', function(event){
281214
var $menu=$('div[data-id="menu"]'),
282215
$main=$('div[data-id="main"]'),
283216
$mainHeader=$main.find('div.'+$.mobile.activePageClass+'> div[data-role="header"]'),
284217
$window=$(window);
285218

286219
function popoverBtn(header) {
287-
if(!header.children('#popover-btn').length){
220+
if(!header.children('.popover-btn').length){
288221
if(header.children('a.ui-btn-left').length){
289-
header.children('a.ui-btn-left').replaceWith('<a id="popover-btn">Navigation</a>');
290-
header.children('a#popover-btn').addClass('ui-btn-left').buttonMarkup();
222+
header.children('a.ui-btn-left').replaceWith('<a class="popover-btn">Navigation</a>');
223+
header.children('a.popover-btn').addClass('ui-btn-left').buttonMarkup();
291224
}
292225
else{
293-
header.prepend('<a id="popover-btn">Navigation</a>');
294-
header.children('a#popover-btn').addClass('ui-btn-left').buttonMarkup()
226+
header.prepend('<a class="popover-btn">Navigation</a>');
227+
header.children('a.popover-btn').addClass('ui-btn-left').buttonMarkup()
295228
}
296229
}
297230
}
@@ -307,7 +240,8 @@
307240
.css('width', '');
308241
popoverBtn($mainHeader);
309242

310-
$main.delegate('div[data-role="page"]','pagecreate.popover', function(){
243+
$main.undelegate('div[data-role="page"]', 'pagebeforeshow.splitview');
244+
$main.delegate('div[data-role="page"]','pagebeforeshow.popover', function(){
311245
var $thisHeader=$(this).children('div[data-role="header"]');
312246
popoverBtn($thisHeader);
313247
});
@@ -322,8 +256,13 @@
322256
.width(function(){
323257
return $(window).width()-$('div[data-id="menu"]').width();
324258
});
325-
$mainHeader.children('#popover-btn').remove();
326-
$main.undelegate('div[data-role="page"]', 'pageshow.popover');
259+
$mainHeader.children('.popover-btn').remove();
260+
261+
$main.undelegate('div[data-role="page"]', 'pagebeforeshow.popover');
262+
$main.delegate('div[data-role="page"]', 'pagebeforeshow.splitview', function(){
263+
var $thisHeader=$(this).children('div[data-role="header"]');
264+
$thisHeader.children('.popover-btn').remove();
265+
});
327266

328267
}
329268

@@ -343,6 +282,63 @@
343282
}
344283
});
345284

285+
//----------------------------------------------------------------------------------
286+
//Other event bindings: scrollview, popover buttons, and toolbar hacks
287+
//----------------------------------------------------------------------------------
288+
289+
//DONE: pageshow binding for scrollview
290+
$('div[data-role="page"]').live('pagebeforeshow', function(event){
291+
var $page = $(this);
292+
$page.find('div[data-role="content"]').attr('data-scroll', 'true');
293+
if ($.support.touch) {
294+
$page.find("[data-scroll]:not(.ui-scrollview-clip)").each(function(){
295+
var $this = $(this);
296+
// XXX: Remove this check for ui-scrolllistview once we've
297+
// integrated list divider support into the main scrollview class.
298+
if ($this.hasClass("ui-scrolllistview"))
299+
$this.scrolllistview();
300+
else
301+
{
302+
var st = $this.data("scroll") + "";
303+
var paging = st && st.search(/^[xy]p$/) != -1;
304+
var dir = st && st.search(/^[xy]/) != -1 ? st.charAt(0) : null;
305+
306+
var opts = {};
307+
if (dir)
308+
opts.direction = dir;
309+
if (paging)
310+
opts.pagingEnabled = true;
311+
312+
var method = $this.data("scroll-method");
313+
if (method)
314+
opts.scrollMethod = method;
315+
316+
$this.scrollview(opts);
317+
}
318+
});
319+
}
320+
});
321+
322+
//popover button click handler - from http://www.cagintranet.com/archive/create-an-ipad-like-dropdown-popover/
323+
$('.popover-btn').live('click', function(e){
324+
e.preventDefault();
325+
$('.panel-popover').fadeToggle('fast');
326+
if ($('.popover-btn').hasClass($.mobile.activeBtnClass)) {
327+
$('.popover-btn').removeClass($.mobile.activeBtnClass);
328+
} else {
329+
$('.popover-btn').addClass($.mobile.activeBtnClass);
330+
}
331+
});
332+
333+
$('body').live('vclick', function(event) {
334+
if (!$(event.target).closest('.panel-popover').length && !$(event.target).closest('.popover-btn').length) {
335+
$(".panel-popover").stop(true, true).hide();
336+
$('.popover-btn').removeClass($.mobile.activeBtnClass);
337+
};
338+
});
339+
340+
341+
346342
//temporary toolbar mods to present better in tablet/desktop view
347343
//TODO: API this so that people can specify using data- attributes how they want their toolbars displayed
348344
//potential toolbar behaviour:

0 commit comments

Comments
 (0)