Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/*
* jQuery UI jb.overflowmenu
*
* Copyright 2011, Jesse Baird <jebaird@gmail.com> jebaird.com
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* http://jebaird.com/blog/overflow-menu-jquery-ui-widget
*
* Depends:
* jquery.ui.core.js
* jquery.ui.widget.js
*
*
* suggested markup
* <nav>
* <ul>
* <li>
* </ul>
* </nav>
*
* $('nav').overflowmenu()
*
*
*
* events
* change - after items are moved to / from the secondary menu
* beforeChange - called before items are moved to / from the secondary menu
* open - when the secondary menu is shown
* close - when the secondary menu is closed
*/
(function( $, undefined ) {
$.widget( "jb.overflowmenu", {
options: {
items: '> *',
itemsParentTag: 'ul',
label: '<i class="icon-ellipsis-vertical"></i>',
//call the refresh method when this element changes size, with out a special event window is the only element that this gets called on
refreshOn: $( window ),
//attempt to guess the height of the menu, if not the target element needs to have a height
guessHeight: true
},
_create: function() {
var self = this;
this.element
.addClass('jb-overflowmenu');
this.primaryMenu = this.element
.children( this.options.itemsParentTag )
.addClass( 'jb-overflowmenu-menu jb-overflowmenu-menu-primary jb-overflowmenu-helper-postion' );
this._setHeight();
//TODO: allow the user to change the markup for this because they might not be using ul -> li
this.secondaryMenuContainer = $(
[
'<div class="jb-overflowmenu-container jb-overflowmenu-helper-postion">',
'<a href="javascript://" class="jb-overflowmenu-menu-secondary-handle"></a>',
'<' + this.options.itemsParentTag + ' class="jb-overflowmenu-menu jb-overflowmenu-menu-secondary jb-overflowmenu-helper-postion"></' + this.options.itemsParentTag + '>',
'</div>'
].join('')
)
.appendTo( this.element )
this.secondaryMenu = this.secondaryMenuContainer.find('ul');
this.secondaryMenuContainer.children( 'a' ).bind( 'click.overflowmenu', function( e ){
self.toggle();
});
//has to be set first
this._setOption( 'label', this.options.label )
this._setOption( 'refreshOn', this.options.refreshOn )
this.secondaryMenuContainer.find('i.icon-sort-down').remove('i.icon-sort-down');
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
},
destroy: function() {
this.element
.removeClass('jb-overflowmenu')
this.primaryMenu
.removeClass('jb-overflowmenu-menu-primary jb-overflowmenu-helper-postion')
.find( this.options.items )
.filter( ':hidden' )
.css( 'display', '' )
this.options.refreshOn.unbind( 'resize.overflowmenu' );
this.secondaryMenuContainer.remove()
//TODO: possibly clean up the height & right on the ul
$.Widget.prototype.destroy.apply( this, arguments );
},
refresh: function() {
this._trigger( 'beforeChange', {}, this._uiHash() );
//move any items in the secondary menu back in to the primary
this.secondaryMenu
.children()
.appendTo( this.primaryMenu )
var vHeight = this.primaryMenuHeight,
hWidth = this.secondaryMenuContainer.find('.jb-overflowmenu-menu-secondary-handle')
.outerWidth(),
vWidth = this.primaryMenuWidth - hWidth,
previousRight = this.primaryMenu.offset().left;
// Items classed 'primary-only' should always be primary
this._getItems()
.each(function() {
var $this = $(this);
if ($this.hasClass('primary-only'))
vWidth -= $this.outerWidth(true);
});
//get the items, filter out the visible ones
itemsToHide = this._getItems()
.filter(function() {
var $this = $(this),
left = $this.offset().left,
dLeft = Math.max(0, left - previousRight);
previousRight = left + $this.width();
if ($this.hasClass('primary-only'))
return false;
vWidth -= dLeft + $this.outerWidth(true);
return vWidth < 1;
});
itemsToHide.appendTo( this.secondaryMenu )
.find('i.icon-sort-down').remove('i.icon-sort-down');
if( itemsToHide.length == 0 ){
this.close();
}
//TODO: add the items to the UI Hash
this._trigger( 'change', {}, this._uiHash() );
return this;
},
//more menu opitons
open: function(){
if( this.secondaryMenu.find( this.options.items ).length == 0){
return;
}
this.primaryMenu.css( 'right', this.primaryMenu.data( 'right' ) )
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
this.secondaryMenu.show();
this._trigger( 'open', {}, this._uiHash() );
return this;
},
close: function(){
this.secondaryMenu.hide();
this._trigger( 'close', {}, this._uiHash() );
return this;
},
toggle: function(){
if( this.secondaryMenu.is( ':visible') ){
this.close();
}else{
this.open();
}
return this;
},
_getItems: function(){
return this.primaryMenu.find( this.options.items );
},
_setHeight: function(){
if( this.options.guessHeight ){
//get the first items height and set that as the height of the parent
this.primaryMenuHeight = this.primaryMenu.find( this.options.items ).filter(':first').outerHeight();
this.primaryMenu.css('height', this.primaryMenuHeight )
}else{
this.primaryMenuHeight = this.element.innerHeight();
}
this.primaryMenuWidth = this.options.width ||
this.element.innerWidth();
},
_setOption: function( key, value ) {
var self = this;
if( key == 'refreshOn' && value ){
this.options.refreshOn.unbind( 'resize.overflowmenu' );
this.options.refreshOn = $( value )
.bind( 'resize.overflowmenu', function(){
self.refresh();
})
//call to set option
self.refresh();
}else if( key == 'label' && value ){
//figure out the width of the hadel and subtract that from the parend with and set that as the right
var width = this.secondaryMenuContainer.find('.jb-overflowmenu-menu-secondary-handle')
.html( value )
.outerWidth();
this.primaryMenu.data( 'right', width )
}
$.Widget.prototype._setOption.apply( this, arguments );
},
_uiHash: function(){
return {
primary: this.primaryMenu,
secondary: this.secondaryMenu,
container: this.secondaryMenuContainer
};
}
});
})( jQuery );