jessikitty/Disco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug Fix: Touch support for menu

Browse Source 
Support for Touch, PointerEvents and Mouse event specifications.
This commit is contained in:
Gary Sharp
2013-11-19 16:35:03 +11:00
parent 9b34abfa29
commit eabd9671f0
4 changed files with 269 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Disco.Web/ClientSource/Scripts/Core.js
+166 -60
View File
@@ -39565,70 +39565,176 @@ jQuery.fn.DataTable.defaults.aLengthMenu = [[10, 20, 50, -1], [10, 20, 50, "All"
// Menu Functionality // Menu Functionality
var $menu = $('#menu'); var $menu = $('#menu');
var $menuItems = $menu.find('li');
var $menuItemParents = $menuItems.filter('.hasSubMenu');
var $menuSubMenus = $menuItems.filter('.subMenu');
var menuAllowTouchNavigation = null;
$menuItemParents.each(function () { if ($menu.length > 0) {
var $parent = $(this); if (Modernizr.touch) {
var $subMenu = $parent.children('ul.subMenu'); // Touch Events
$parent.data('menuSubMenu', $subMenu); $menu
}).mouseover(function () { .on('mouseover', 'li.hasSubMenu', function (e) {
var $parent = $(this); var $this = $(this);
var $subMenu = $parent.data('menuSubMenu'); var $subMenu = $this.children('ul.subMenu');
var hideToken = $parent.data('menuHideToken'); var hideToken = $this.data('menuHideToken');
if (hideToken) if (hideToken)
window.clearTimeout(hideToken); window.clearTimeout(hideToken);
if (!$subMenu.is(':visible')) { if (!$subMenu.is(':visible'))
$subMenu.show(); $subMenu.show();
if (menuAllowTouchNavigation !== null) })
menuTouchPreventNavigation(); .on('mouseout', 'li.hasSubMenu', function (e) {
var $this = $(this);
var $subMenu = $this.children('ul.subMenu');
var hideToken = window.setTimeout(function () {
$subMenu.hide();
}, 250);
$this.data('menuHideToken', hideToken);
})
.on('touchstart', 'li.hasSubMenu', function (e) {
var $this = $(this);
var $link = $this.children('a');
var $subMenu = $this.children('ul.subMenu');
if (!$subMenu.is(':visible')) {
$subMenu.show();
e.preventDefault();
e.stopPropagation();
return false;
}
});
} else if (Modernizr.testProp('pointerEvents')) {
// Pointer Events
$menu
.on('pointerover', 'li.hasSubMenu', function (e) {
if (e.originalEvent.pointerType != 'touch') {
var $this = $(this);
var $subMenu = $this.children('ul.subMenu');
var hideToken = $this.data('menuHideToken');
if (hideToken)
window.clearTimeout(hideToken);
if (!$subMenu.is(':visible'))
$subMenu.show();
}
})
.on('pointerout', 'li.hasSubMenu', function (e) {
if (e.originalEvent.pointerType != 'touch') {
var $this = $(this);
var $subMenu = $this.children('ul.subMenu');
var hideToken = window.setTimeout(function () {
$subMenu.hide();
}, 250);
$this.data('menuHideToken', hideToken);
}
})
.on('pointerdown', 'li.hasSubMenu', function (e) {
if (e.originalEvent.pointerType == 'touch') {
var $this = $(this);
var $link = $this.children('a');
var $subMenu = $this.children('ul.subMenu');
if (!$subMenu.is(':visible')) {
$subMenu.show();
e.preventDefault();
e.stopPropagation();
// Stop Click Event
if ($link.length > 0) {
var preventClick = function () { $link.off('click', preventClick); return false; }
$link.on('click', preventClick);
}
return false;
}
}
});
$(document).on('pointerdown', function (e) {
if (e.originalEvent.pointerType == 'touch') {
if ($(e.target).closest('#menu').length == 0)
$menu.find('li.hasSubMenu>ul.subMenu:visible').hide();
}
});
} else {
// Mouse Events
$menu
.on('mouseover', 'li.hasSubMenu', function () {
var $this = $(this);
var $subMenu = $this.children('ul.subMenu');
var hideToken = $this.data('menuHideToken');
if (hideToken)
window.clearTimeout(hideToken);
if (!$subMenu.is(':visible'))
$subMenu.show();
})
.on('mouseout', 'li.hasSubMenu', function () {
var $this = $(this);
var $subMenu = $this.children('ul.subMenu');
var hideToken = window.setTimeout(function () {
$subMenu.hide();
}, 250);
$this.data('menuHideToken', hideToken);
});
} }
}).mouseout(function () { }
var $parent = $(this);
var $subMenu = $parent.data('menuSubMenu');
var hideToken = window.setTimeout(function () {
$subMenu.hide();
}, 250);
$parent.data('menuHideToken', hideToken);
});
if (Modernizr.touch) { //var $menuItems = $menu.find('li');
menuAllowTouchNavigation = true; //var $menuItemParents = $menuItems.filter('.hasSubMenu');
$menuItemParents.children('a').on('touchstart', menuTouchStarted); //var $menuSubMenus = $menuItems.filter('.subMenu');
} else if (window.navigator.msPointerEnabled) { //var menuAllowTouchNavigation = null;
menuAllowTouchNavigation = true;
$menuItemParents.children('a').on('MSPointerUp', menuTouchMSPointerUp);
}
function menuTouchPreventNavigation() {
// Block Touch Navigation for 350ms
allowTouchNavigation = false;
window.setTimeout(function () {
allowTouchNavigation = true;
}, 350);
}
function menuTouchNavigationBlockClick(e) {
$(this).off('click', menuTouchNavigationBlockClick);
e.preventDefault();
}
//#region TouchEvents Implementation
function menuSubMenuVisible($element) {
return $element.closest('li').data('menuSubMenu').is(':visible');
}
function menuTouchStarted(e) {
var $this = $(this);
if (!menuSubMenuVisible($this))
$this.click(menuTouchNavigationBlockClick);
}
//#endregion
//#region MS Pointer Implementation //$menuItemParents.each(function () {
function menuTouchMSPointerUp(e) { // var $parent = $(this);
if (!allowTouchNavigation && e.originalEvent.pointerType == e.originalEvent.MSPOINTER_TYPE_TOUCH) // var $subMenu = $parent.children('ul.subMenu');
$(this).click(menuTouchNavigationBlockClick); // $parent.data('menuSubMenu', $subMenu);
} //}).mouseover(function () {
//#endregion // var $parent = $(this);
// var $subMenu = $parent.data('menuSubMenu');
// var hideToken = $parent.data('menuHideToken');
// if (hideToken)
// window.clearTimeout(hideToken);
// if (!$subMenu.is(':visible')) {
// $subMenu.show();
// if (menuAllowTouchNavigation !== null)
// menuTouchPreventNavigation();
// }
//}).mouseout(function () {
// var $parent = $(this);
// var $subMenu = $parent.data('menuSubMenu');
// var hideToken = window.setTimeout(function () {
// $subMenu.hide();
// }, 250);
// $parent.data('menuHideToken', hideToken);
//});
//if (Modernizr.touch) {
// menuAllowTouchNavigation = true;
// $menuItemParents.children('a').on('touchstart', menuTouchStarted);
//} else if (window.navigator.msPointerEnabled) {
// menuAllowTouchNavigation = true;
// $menuItemParents.children('a').on('MSPointerUp', menuTouchMSPointerUp);
//}
//function menuTouchPreventNavigation() {
// // Block Touch Navigation for 350ms
// allowTouchNavigation = false;
// window.setTimeout(function () {
// allowTouchNavigation = true;
// }, 350);
//}
//function menuTouchNavigationBlockClick(e) {
// $(this).off('click', menuTouchNavigationBlockClick);
// e.preventDefault();
//}
////#region TouchEvents Implementation
//function menuSubMenuVisible($element) {
// return $element.closest('li').data('menuSubMenu').is(':visible');
//}
//function menuTouchStarted(e) {
// var $this = $(this);
// if (!menuSubMenuVisible($this))
// $this.click(menuTouchNavigationBlockClick);
//}
////#endregion
////#region MS Pointer Implementation
//function menuTouchMSPointerUp(e) {
// if (!allowTouchNavigation && e.originalEvent.pointerType == e.originalEvent.MSPOINTER_TYPE_TOUCH)
// $(this).click(menuTouchNavigationBlockClick);
//}
////#endregion
}); });
})(jQuery, window, document, Modernizr); })(jQuery, window, document, Modernizr);
Disco.Web/ClientSource/Scripts/Core.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
Disco.Web/ClientSource/Scripts/Core.min.js.map
+2 -2
View File
File diff suppressed because one or more lines are too long
Disco.Web/ClientSource/Scripts/Core/disco.uicore.js
+100 -61
View File
@@ -15,70 +15,109 @@
// Menu Functionality // Menu Functionality
var $menu = $('#menu'); var $menu = $('#menu');
var $menuItems = $menu.find('li');
var $menuItemParents = $menuItems.filter('.hasSubMenu');
var $menuSubMenus = $menuItems.filter('.subMenu');
var menuAllowTouchNavigation = null;
$menuItemParents.each(function () { if ($menu.length > 0) {
var $parent = $(this); if (Modernizr.touch) {
var $subMenu = $parent.children('ul.subMenu'); // Touch Events
$parent.data('menuSubMenu', $subMenu); $menu
}).mouseover(function () { .on('mouseover', 'li.hasSubMenu', function (e) {
var $parent = $(this); var $this = $(this);
var $subMenu = $parent.data('menuSubMenu'); var $subMenu = $this.children('ul.subMenu');
var hideToken = $parent.data('menuHideToken'); var hideToken = $this.data('menuHideToken');
if (hideToken) if (hideToken)
window.clearTimeout(hideToken); window.clearTimeout(hideToken);
if (!$subMenu.is(':visible')) { if (!$subMenu.is(':visible'))
$subMenu.show(); $subMenu.show();
if (menuAllowTouchNavigation !== null) })
menuTouchPreventNavigation(); .on('mouseout', 'li.hasSubMenu', function (e) {
var $this = $(this);
var $subMenu = $this.children('ul.subMenu');
var hideToken = window.setTimeout(function () {
$subMenu.hide();
}, 250);
$this.data('menuHideToken', hideToken);
})
.on('touchstart', 'li.hasSubMenu', function (e) {
var $this = $(this);
var $link = $this.children('a');
var $subMenu = $this.children('ul.subMenu');
if (!$subMenu.is(':visible')) {
$subMenu.show();
e.preventDefault();
e.stopPropagation();
return false;
}
});
} else if (Modernizr.testProp('pointerEvents')) {
// Pointer Events
$menu
.on('pointerover', 'li.hasSubMenu', function (e) {
if (e.originalEvent.pointerType != 'touch') {
var $this = $(this);
var $subMenu = $this.children('ul.subMenu');
var hideToken = $this.data('menuHideToken');
if (hideToken)
window.clearTimeout(hideToken);
if (!$subMenu.is(':visible'))
$subMenu.show();
}
})
.on('pointerout', 'li.hasSubMenu', function (e) {
if (e.originalEvent.pointerType != 'touch') {
var $this = $(this);
var $subMenu = $this.children('ul.subMenu');
var hideToken = window.setTimeout(function () {
$subMenu.hide();
}, 250);
$this.data('menuHideToken', hideToken);
}
})
.on('pointerdown', 'li.hasSubMenu', function (e) {
if (e.originalEvent.pointerType == 'touch') {
var $this = $(this);
var $link = $this.children('a');
var $subMenu = $this.children('ul.subMenu');
if (!$subMenu.is(':visible')) {
$subMenu.show();
e.preventDefault();
e.stopPropagation();
// Stop Click Event
if ($link.length > 0) {
var preventClick = function () { $link.off('click', preventClick); return false; }
$link.on('click', preventClick);
}
return false;
}
}
});
$(document).on('pointerdown', function (e) {
if (e.originalEvent.pointerType == 'touch') {
if ($(e.target).closest('#menu').length == 0)
$menu.find('li.hasSubMenu>ul.subMenu:visible').hide();
}
});
} else {
// Mouse Events
$menu
.on('mouseover', 'li.hasSubMenu', function () {
var $this = $(this);
var $subMenu = $this.children('ul.subMenu');
var hideToken = $this.data('menuHideToken');
if (hideToken)
window.clearTimeout(hideToken);
if (!$subMenu.is(':visible'))
$subMenu.show();
})
.on('mouseout', 'li.hasSubMenu', function () {
var $this = $(this);
var $subMenu = $this.children('ul.subMenu');
var hideToken = window.setTimeout(function () {
$subMenu.hide();
}, 250);
$this.data('menuHideToken', hideToken);
});
} }
}).mouseout(function () {
var $parent = $(this);
var $subMenu = $parent.data('menuSubMenu');
var hideToken = window.setTimeout(function () {
$subMenu.hide();
}, 250);
$parent.data('menuHideToken', hideToken);
});
if (Modernizr.touch) {
menuAllowTouchNavigation = true;
$menuItemParents.children('a').on('touchstart', menuTouchStarted);
} else if (window.navigator.msPointerEnabled) {
menuAllowTouchNavigation = true;
$menuItemParents.children('a').on('MSPointerUp', menuTouchMSPointerUp);
} }
function menuTouchPreventNavigation() {
// Block Touch Navigation for 350ms
allowTouchNavigation = false;
window.setTimeout(function () {
allowTouchNavigation = true;
}, 350);
}
function menuTouchNavigationBlockClick(e) {
$(this).off('click', menuTouchNavigationBlockClick);
e.preventDefault();
}
//#region TouchEvents Implementation
function menuSubMenuVisible($element) {
return $element.closest('li').data('menuSubMenu').is(':visible');
}
function menuTouchStarted(e) {
var $this = $(this);
if (!menuSubMenuVisible($this))
$this.click(menuTouchNavigationBlockClick);
}
//#endregion
//#region MS Pointer Implementation
function menuTouchMSPointerUp(e) {
if (!allowTouchNavigation && e.originalEvent.pointerType == e.originalEvent.MSPOINTER_TYPE_TOUCH)
$(this).click(menuTouchNavigationBlockClick);
}
//#endregion
}); });
})(jQuery, window, document, Modernizr); })(jQuery, window, document, Modernizr);