r881 - in branches/experimental: tests/visual/menu ui
Author: paul.bakaus
Date: Fri Nov 7 07:16:52 2008
New Revision: 881
Modified:
branches/experimental/tests/visual/menu/menu.html
branches/experimental/ui/ui.menu.js
Log:
menu: fixed a couple issues (don't use global selectors in widgets),
partially refactored drilldown
Modified: branches/experimental/tests/visual/menu/menu.html
==============================================================================
--- branches/experimental/tests/visual/menu/menu.html (original)
+++ branches/experimental/tests/visual/menu/menu.html Fri Nov 7 07:16:52
2008
@@ -32,7 +32,7 @@
$('#menu1').menu({
mode: 'static',
type: 'drilldown',
- //selectCategories: true,
+ selectCategories: true,
select: function(e, ui) {
console.log('Selected item ', ui.item);
},
Modified: branches/experimental/ui/ui.menu.js
==============================================================================
--- branches/experimental/ui/ui.menu.js (original)
+++ branches/experimental/ui/ui.menu.js Fri Nov 7 07:16:52 2008
@@ -13,10 +13,8 @@
(function($) {
$(document).ready(function() {
- $(window).bind('click', function(e) {
-
+ $(document).bind('click', function(e) {
$.ui.menu.prototype.closeAll(e);
-
});
});
@@ -50,13 +48,13 @@
//If the menu should be rendered to the page statically, add a wrapper
class that positions it absolutely
if(o.mode != 'static')
this.menu.addClass('ui-menu-container');
-
+
//Attach hover states for items
$('li', this.items)
.hover(function() {
$(this)
.addClass(o.hoverClassSecondary)
- .find('> a').addClass(o.hoverClass +' ui-menu-item-on').focus();
+ .find('a:eq(0)').addClass(o.hoverClass +' ui-menu-item-on').focus();
}, function() {
$(this)
.removeClass(o.hoverClassSecondary)
@@ -97,15 +95,19 @@
},
+ _resetDrilldown: function(stayOpen) {
+ this.breadcrumb.empty().append(this.crumbDefaultHeader);
+ $('.ui-menu-current', this.menu).removeClass('ui-menu-current');
+ if (!stayOpen) { this.menu.find('.ui-menu-dd ul').css({
visibility: 'hidden' }); }
+ },
+
_prepareDrilldown: function() {
+
var self = this;
- var breadcrumb = $('<ul class="ui-menu-dd-breadcrumb
ui-component-content"></ul>');
- var crumbDefaultHeader = $('<li
class="ui-menu-dd-text">'+this.options.crumbDefaultText+'</li>');
- var firstCrumbText = this.options.backLink ? this.options.backLinkText :
this.options.topLinkText;
- var firstCrumbClass = this.options.backLink ? 'ui-menu-prev-list
ui-arrow-left-default' : 'ui-menu-all-lists';
- var firstCrumb = $('<li class="'+firstCrumbClass+'"><a
href="#">'+firstCrumbText+'</a></li>');
+ this.breadcrumb = $('<ul class="ui-menu-dd-breadcrumb
ui-component-content"></ul>');
+ this.crumbDefaultHeader = $('<li
class="ui-menu-dd-text">'+this.options.crumbDefaultText+'</li>');
if (!this.items.is('.ui-menu-dd')) {
@@ -119,7 +121,6 @@
// set up links to be split-button (selectable nodes + navigation
links) or single button (navigation only)
this.items.find('a').each(function(){
-
if($(this).next().is('ul')) {
if (self.options.selectCategories) {
$(this).addClass('ui-menu-split-btn').html('<span>'+
$(this).text()+'</span>')
@@ -129,7 +130,6 @@
$(this).addClass('ui-menu-indicator').html('<span
class="'+self.options.nextMenuClass+'">'+ $(this).text()+'</span>');
};
};
-
});
// standardize all menu heights & widths so that they cover the
previous menu completely
@@ -156,103 +156,107 @@
};
- this.options.backLink ?
breadcrumb.addClass('ui-menu-footer').appendTo(this.menu) :
breadcrumb.addClass('ui-menu-header').prependTo(this.menu);
- breadcrumb.append(crumbDefaultHeader);
-
- this.resetDrilldownMenu = function(stayOpen){
- breadcrumb.empty().append(crumbDefaultHeader);
- $('.ui-menu-current').removeClass('ui-menu-current');
- if (!stayOpen) { self.menu.find('.ui-menu-dd ul').css({
visibility: 'hidden' }); }
- };
+ this.options.backLink ?
this.breadcrumb.addClass('ui-menu-footer').appendTo(this.menu) :
this.breadcrumb.addClass('ui-menu-header').prependTo(this.menu);
+ this.breadcrumb.append(this.crumbDefaultHeader);
+
+
+ self.items.find('a').bind('click.menu', function(e){
+ if ($(this).is('.ui-menu-indicator') ||
$(this).is('.ui-menu-nextlevel')) {
+ self._nextDrilldownLevel(this, e);
+ return false;
+ }
+ else {
+ self._trigger('select', e, { item: $(this.parentNode) });
+ return false;
+ };
+ });
+
+ },
+
+ _nextDrilldownLevel: function(el, e){
- var showNextLevel = function(el, e){
+ var thisLink = $(el),
+ thisList = thisLink.parents('ul:eq(0)'),
+ nextList = thisLink.next(),
+ firstCrumbText = this.options.backLink ? this.options.backLinkText :
this.options.topLinkText,
+ firstCrumbClass = this.options.backLink ? 'ui-menu-prev-list
ui-arrow-left-default' : 'ui-menu-all-lists',
+ firstCrumb = $('<li class="'+firstCrumbClass+'"><a
href="#">'+firstCrumbText+'</a></li>'),
+ self = this
+ ;
+
+ // first breadcrumb link
+ if (this.breadcrumb.find('li').size() == 1){
+
+ this.breadcrumb.empty().append(firstCrumb);
- var thisLink = $(el);
- var thisList = $(el).parents('ul:eq(0)');
- var nextList = $(el).next();
-
- // first breadcrumb link
- if (breadcrumb.find('li').size() == 1){
- breadcrumb.empty().append(firstCrumb);
+ // 'back' link
+ if (firstCrumb.is('.ui-menu-prev-list')) {
- // 'back' link
- if (firstCrumb.is('.ui-menu-prev-list')) {
-
- $('.ui-menu-prev-list a').bind('click.menu', function(){
-
- $('.ui-menu-current').animate({ left: self.options.width },
self.options.crossSpeed);
- if ($('.ui-menu-current').parents('ul').eq(0).is('.ui-menu')) {
- self.resetDrilldownMenu(true);
- }
- else {
- $('.ui-menu-current')
- .removeClass('ui-menu-current')
- .parents('ul').eq(0).addClass('ui-menu-current');
- };
- return false;
- });
+ $('.ui-menu-prev-list a', this.menu).bind('click.menu', function(){
- } // standard breadcrumb
- else if (firstCrumb.is('.ui-menu-all-lists')) {
-
- $('.ui-menu-all-lists a').bind('click.menu', function(){
-
self.menu.find('ul').not('.ui-menu, .ui-menu-dd-breadcrumb').animate({
left: self.options.width }, self.options.crossSpeed);
- if ($(this).next().is('span')) { $(this).next().remove(); }
- self.resetDrilldownMenu(true);
- return false;
- });
+ $('.ui-menu-current', this.menu).animate({ left: self.options.width
}, self.options.crossSpeed);
+ if ($('.ui-menu-current',
this.menu).parents('ul').eq(0).is('.ui-menu')) {
+ self._resetDrilldown(true);
+ } else {
+ $('.ui-menu-current', this.menu)
+ .removeClass('ui-menu-current')
+ .parents('ul').eq(0).addClass('ui-menu-current');
+ };
+ return false;
- };
-
- };
-
- var addNewCrumb = function() {
+ });
- var crumbText = (thisLink.prev().is('a')) ? thisLink.prev().text() :
thisLink.text();
- var newCrumb = $('<li class="ui-menu-current-crumb" style="display:
none;"><a href="javascript://"
class="ui-menu-crumb">'+crumbText+'</a></li>');
- $('.ui-menu-current-crumb').removeClass('ui-menu-current-crumb');
- newCrumb.appendTo(breadcrumb).prev().append(' <span>></span>');
- newCrumb.show().find('a').click(function(e){
- if ($(this).parent().is('.ui-menu-current-crumb')){
- self._trigger('select', e, { item: $(this.parentNode) });
- return false;
- }
- else {
- nextList.find('ul').animate({ left: self.options.width },
self.options.crossSpeed);
- $(this).parent().nextAll().css({ visibility: 'hidden'
}).slideUp(self.options.crossSpeed, function(){$(this).remove();});
-
$(this).parent().addClass('ui-menu-current-crumb').find('a').next().remove();
- self._trigger('browse', e, { item: null }); //TODO: Reference to item
- return false;
- };
+ } else if (firstCrumb.is('.ui-menu-all-lists')) { // standard
breadcrumb
+
+ $('.ui-menu-all-lists a', this.menu).bind('click.menu', function(){
+
self.menu.find('ul').not('.ui-menu, .ui-menu-dd-breadcrumb').animate({
left: self.options.width }, self.options.crossSpeed);
+ if ($(this).next().is('span')) { $(this).next().remove(); }
+ self._resetDrilldown(true);
+ return false;
});
};
-
- if (!self.options.backLink)
- addNewCrumb();
-
- // show the next list
- $('.ui-menu-current').removeClass('ui-menu-current');
- nextList.css({ visibility: 'visible', left: self.options.width })
- .animate({ left: 0 }, self.options.crossSpeed)
- .addClass('ui-menu-current');
+
+ };
+
+
+ //Add a new crumb if we don't have a single back link
+ if (!self.options.backLink) {
+
+ //Remove the current crumb class from the other crumbs
+ $('li.ui-menu-current-crumb',
this.menu).removeClass('ui-menu-current-crumb');
+
+ var crumbText = (thisLink.prev().is('a')) ? thisLink.prev().text() :
thisLink.text();
+ var newCrumb = $('<li class="ui-menu-current-crumb" style="display:
none;"><a href="javascript://"
class="ui-menu-crumb">'+crumbText+'</a></li>')
+ .appendTo(self.breadcrumb).prev().append(' <span>></span>');
+
+ newCrumb.show().find('a').bind('click.menu', function(e){
+
+ if ($(this).parent().is('.ui-menu-current-crumb')){
+ self._trigger('select', e, { item: $(this.parentNode) });
+ return false;
+ }
+ else {
+ nextList.find('ul').animate({ left: self.options.width },
self.options.crossSpeed);
+ $(this).parent().nextAll().css({ visibility: 'hidden'
}).slideUp(self.options.crossSpeed, function(){$(this).remove();});
+
$(this).parent().addClass('ui-menu-current-crumb').find('a').next().remove();
+ self._trigger('browse', e, { item: null }); //TODO: Reference to item
+ return false;
+ };
- self._trigger('browse', e, { item: nextList });
+ });
- };
- // end showNextLevel
-
- self.items.find('a').bind('click.menu', function(e){
- if ($(this).is('.ui-menu-indicator') ||
$(this).is('.ui-menu-nextlevel')) {
- showNextLevel(this, e);
- return false;
- }
- else {
- self._trigger('select', e, { item: $(this.parentNode) });
- return false;
- };
- });
+ }
+
+ // show the next list
+ $('.ui-menu-current', this.menu).removeClass('ui-menu-current');
+ nextList.css({ visibility: 'visible', left: self.options.width })
+ .animate({ left: 0 }, self.options.crossSpeed)
+ .addClass('ui-menu-current');
+
+ self._trigger('browse', e, { item: nextList });
+
},
_prepareFlyout: function() {