muck-engine 0.4.27 → 0.4.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/VERSION +1 -1
- data/app/views/layouts/admin/_head.html.erb +4 -2
- data/muck-engine.gemspec +19 -2
- data/public/javascripts/jquery/fg.menu.js +517 -0
- data/public/javascripts/muck_admin.js +13 -0
- data/public/stylesheets/admin.css +14 -0
- data/public/stylesheets/fgmenu/fg.menu.css +114 -0
- data/public/stylesheets/flick/images/ui-bg_flat_0_aaaaaa_40x100.png +0 -0
- data/public/stylesheets/flick/images/ui-bg_flat_0_eeeeee_40x100.png +0 -0
- data/public/stylesheets/flick/images/ui-bg_flat_55_ffffff_40x100.png +0 -0
- data/public/stylesheets/flick/images/ui-bg_flat_75_ffffff_40x100.png +0 -0
- data/public/stylesheets/flick/images/ui-bg_glass_65_ffffff_1x400.png +0 -0
- data/public/stylesheets/flick/images/ui-bg_highlight-soft_100_f6f6f6_1x100.png +0 -0
- data/public/stylesheets/flick/images/ui-bg_highlight-soft_25_0073ea_1x100.png +0 -0
- data/public/stylesheets/flick/images/ui-bg_highlight-soft_50_dddddd_1x100.png +0 -0
- data/public/stylesheets/flick/images/ui-icons_0073ea_256x240.png +0 -0
- data/public/stylesheets/flick/images/ui-icons_454545_256x240.png +0 -0
- data/public/stylesheets/flick/images/ui-icons_666666_256x240.png +0 -0
- data/public/stylesheets/flick/images/ui-icons_ff0084_256x240.png +0 -0
- data/public/stylesheets/flick/images/ui-icons_ffffff_256x240.png +0 -0
- data/public/stylesheets/flick/jquery-ui-1.8.1.custom.css +486 -0
- metadata +21 -4
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
0.4.
|
1
|
+
0.4.29
|
@@ -1,9 +1,9 @@
|
|
1
1
|
<title><%= @page_title || GlobalConfig.application_name %></title>
|
2
2
|
<meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />
|
3
|
+
<%= google_load_jquery_ui_css(http_protocol) %>
|
3
4
|
<%= stylesheet_link_tag 'blueprint/print.css', :media => "print" %>
|
4
5
|
<!--[if IE]><link rel="stylesheet" href="/stylesheets/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
|
5
|
-
<%= stylesheet_link_tag %W{ reset styles blueprint/liquid_screen jquery/jquery.autocomplete jquery/jquery.fancybox admin }, :cache => 'admin_styles' %>
|
6
|
-
<%= google_load_jquery_ui_css(http_protocol) %>
|
6
|
+
<%= stylesheet_link_tag %W{ reset styles blueprint/liquid_screen jquery/jquery.autocomplete jquery/jquery.fancybox fgmenu/fg.menu.css admin }, :cache => 'admin_styles' %>
|
7
7
|
<%= stylesheet_link_tag MuckEngine.muck_admin_css -%>
|
8
8
|
<%= google_load_jquery(http_protocol) %>
|
9
9
|
<%= google_load_jquery_ui(http_protocol) %>
|
@@ -12,6 +12,8 @@
|
|
12
12
|
jquery/jquery.jgrowl.js
|
13
13
|
jquery/jquery.tips.js
|
14
14
|
jquery/jquery.fancybox.js
|
15
|
+
jquery/fg.menu.js
|
16
|
+
muck_admin.js
|
15
17
|
muck.js
|
16
18
|
application.js }, :cache => 'admin_js_cached' %>
|
17
19
|
<%= javascript_tag %[const AUTH_TOKEN = #{form_authenticity_token.inspect};] if protect_against_forgery? %>
|
data/muck-engine.gemspec
CHANGED
@@ -5,11 +5,11 @@
|
|
5
5
|
|
6
6
|
Gem::Specification.new do |s|
|
7
7
|
s.name = %q{muck-engine}
|
8
|
-
s.version = "0.4.
|
8
|
+
s.version = "0.4.29"
|
9
9
|
|
10
10
|
s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
|
11
11
|
s.authors = ["Justin Ball", "Joel Duffin"]
|
12
|
-
s.date = %q{2010-
|
12
|
+
s.date = %q{2010-06-01}
|
13
13
|
s.description = %q{The base engine for the muck system. Contains common tables, custom for, css and javascript.}
|
14
14
|
s.email = %q{justin@tatemae.com}
|
15
15
|
s.extra_rdoc_files = [
|
@@ -542,6 +542,7 @@ Gem::Specification.new do |s|
|
|
542
542
|
"public/images/sprites.png",
|
543
543
|
"public/javascripts/fancyzoom.min.js",
|
544
544
|
"public/javascripts/jquery/colorpicker.js",
|
545
|
+
"public/javascripts/jquery/fg.menu.js",
|
545
546
|
"public/javascripts/jquery/jquery-ui.js",
|
546
547
|
"public/javascripts/jquery/jquery.autocomplete.js.readme",
|
547
548
|
"public/javascripts/jquery/jquery.autocomplete.min.js",
|
@@ -562,6 +563,7 @@ Gem::Specification.new do |s|
|
|
562
563
|
"public/javascripts/muck-countries.js",
|
563
564
|
"public/javascripts/muck-src.js",
|
564
565
|
"public/javascripts/muck.js",
|
566
|
+
"public/javascripts/muck_admin.js",
|
565
567
|
"public/javascripts/muck_time/en.js",
|
566
568
|
"public/javascripts/tree.js",
|
567
569
|
"public/stylesheets/admin.css",
|
@@ -598,6 +600,21 @@ Gem::Specification.new do |s|
|
|
598
600
|
"public/stylesheets/blueprint/src/print.css",
|
599
601
|
"public/stylesheets/blueprint/src/reset.css",
|
600
602
|
"public/stylesheets/blueprint/src/typography.css",
|
603
|
+
"public/stylesheets/fgmenu/fg.menu.css",
|
604
|
+
"public/stylesheets/flick/images/ui-bg_flat_0_aaaaaa_40x100.png",
|
605
|
+
"public/stylesheets/flick/images/ui-bg_flat_0_eeeeee_40x100.png",
|
606
|
+
"public/stylesheets/flick/images/ui-bg_flat_55_ffffff_40x100.png",
|
607
|
+
"public/stylesheets/flick/images/ui-bg_flat_75_ffffff_40x100.png",
|
608
|
+
"public/stylesheets/flick/images/ui-bg_glass_65_ffffff_1x400.png",
|
609
|
+
"public/stylesheets/flick/images/ui-bg_highlight-soft_100_f6f6f6_1x100.png",
|
610
|
+
"public/stylesheets/flick/images/ui-bg_highlight-soft_25_0073ea_1x100.png",
|
611
|
+
"public/stylesheets/flick/images/ui-bg_highlight-soft_50_dddddd_1x100.png",
|
612
|
+
"public/stylesheets/flick/images/ui-icons_0073ea_256x240.png",
|
613
|
+
"public/stylesheets/flick/images/ui-icons_454545_256x240.png",
|
614
|
+
"public/stylesheets/flick/images/ui-icons_666666_256x240.png",
|
615
|
+
"public/stylesheets/flick/images/ui-icons_ff0084_256x240.png",
|
616
|
+
"public/stylesheets/flick/images/ui-icons_ffffff_256x240.png",
|
617
|
+
"public/stylesheets/flick/jquery-ui-1.8.1.custom.css",
|
601
618
|
"public/stylesheets/jquery/cupertino/jquery-ui-1.7.2.custom.css",
|
602
619
|
"public/stylesheets/jquery/jquery.autocomplete.css",
|
603
620
|
"public/stylesheets/jquery/jquery.fancybox.css",
|
@@ -0,0 +1,517 @@
|
|
1
|
+
/*--------------------------------------------------------------------
|
2
|
+
Scripts for creating and manipulating custom menus based on standard <ul> markup
|
3
|
+
Version: 3.0, 03.31.2009
|
4
|
+
|
5
|
+
By: Maggie Costello Wachs (maggie@filamentgroup.com) and Scott Jehl (scott@filamentgroup.com)
|
6
|
+
http://www.filamentgroup.com
|
7
|
+
* reference articles: http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu/
|
8
|
+
|
9
|
+
Copyright (c) 2009 Filament Group
|
10
|
+
Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
|
11
|
+
--------------------------------------------------------------------*/
|
12
|
+
|
13
|
+
|
14
|
+
var allUIMenus = [];
|
15
|
+
|
16
|
+
$.fn.menu = function(options){
|
17
|
+
var caller = this;
|
18
|
+
var options = options;
|
19
|
+
var m = new Menu(caller, options);
|
20
|
+
allUIMenus.push(m);
|
21
|
+
|
22
|
+
$(this)
|
23
|
+
.mousedown(function(){
|
24
|
+
if (!m.menuOpen) { m.showLoading(); };
|
25
|
+
})
|
26
|
+
.click(function(){
|
27
|
+
if (m.menuOpen == false) { m.showMenu(); }
|
28
|
+
else { m.kill(); };
|
29
|
+
return false;
|
30
|
+
});
|
31
|
+
};
|
32
|
+
|
33
|
+
function Menu(caller, options){
|
34
|
+
var menu = this;
|
35
|
+
var caller = $(caller);
|
36
|
+
var container = $('<div class="fg-menu-container ui-widget ui-widget-content ui-corner-all">'+options.content+'</div>');
|
37
|
+
|
38
|
+
this.menuOpen = false;
|
39
|
+
this.menuExists = false;
|
40
|
+
|
41
|
+
var options = jQuery.extend({
|
42
|
+
content: null,
|
43
|
+
width: 180, // width of menu container, must be set or passed in to calculate widths of child menus
|
44
|
+
maxHeight: 180, // max height of menu (if a drilldown: height does not include breadcrumb)
|
45
|
+
positionOpts: {
|
46
|
+
posX: 'left',
|
47
|
+
posY: 'bottom',
|
48
|
+
offsetX: 0,
|
49
|
+
offsetY: 0,
|
50
|
+
directionH: 'right',
|
51
|
+
directionV: 'down',
|
52
|
+
detectH: true, // do horizontal collision detection
|
53
|
+
detectV: true, // do vertical collision detection
|
54
|
+
linkToFront: false
|
55
|
+
},
|
56
|
+
showSpeed: 200, // show/hide speed in milliseconds
|
57
|
+
callerOnState: 'ui-state-active', // class to change the appearance of the link/button when the menu is showing
|
58
|
+
loadingState: 'ui-state-loading', // class added to the link/button while the menu is created
|
59
|
+
linkHover: 'ui-state-hover', // class for menu option hover state
|
60
|
+
linkHoverSecondary: 'li-hover', // alternate class, may be used for multi-level menus
|
61
|
+
// ----- multi-level menu defaults -----
|
62
|
+
crossSpeed: 200, // cross-fade speed for multi-level menus
|
63
|
+
crumbDefaultText: 'Choose an option:',
|
64
|
+
backLink: true, // in the ipod-style menu: instead of breadcrumbs, show only a 'back' link
|
65
|
+
backLinkText: 'Back',
|
66
|
+
flyOut: false, // multi-level menus are ipod-style by default; this parameter overrides to make a flyout instead
|
67
|
+
flyOutOnState: 'ui-state-default',
|
68
|
+
nextMenuLink: 'ui-icon-triangle-1-e', // class to style the link (specifically, a span within the link) used in the multi-level menu to show the next level
|
69
|
+
topLinkText: 'All',
|
70
|
+
nextCrumbLink: 'ui-icon-carat-1-e'
|
71
|
+
}, options);
|
72
|
+
|
73
|
+
var killAllMenus = function(){
|
74
|
+
$.each(allUIMenus, function(i){
|
75
|
+
if (allUIMenus[i].menuOpen) { allUIMenus[i].kill(); };
|
76
|
+
});
|
77
|
+
};
|
78
|
+
|
79
|
+
this.kill = function(){
|
80
|
+
caller
|
81
|
+
.removeClass(options.loadingState)
|
82
|
+
.removeClass('fg-menu-open')
|
83
|
+
.removeClass(options.callerOnState);
|
84
|
+
container.find('li').removeClass(options.linkHoverSecondary).find('a').removeClass(options.linkHover);
|
85
|
+
if (options.flyOutOnState) { container.find('li a').removeClass(options.flyOutOnState); };
|
86
|
+
if (options.callerOnState) { caller.removeClass(options.callerOnState); };
|
87
|
+
if (container.is('.fg-menu-ipod')) { menu.resetDrilldownMenu(); };
|
88
|
+
if (container.is('.fg-menu-flyout')) { menu.resetFlyoutMenu(); };
|
89
|
+
container.parent().hide();
|
90
|
+
menu.menuOpen = false;
|
91
|
+
$(document).unbind('click', killAllMenus);
|
92
|
+
$(document).unbind('keydown');
|
93
|
+
};
|
94
|
+
|
95
|
+
this.showLoading = function(){
|
96
|
+
caller.addClass(options.loadingState);
|
97
|
+
};
|
98
|
+
|
99
|
+
this.showMenu = function(){
|
100
|
+
killAllMenus();
|
101
|
+
if (!menu.menuExists) { menu.create() };
|
102
|
+
caller
|
103
|
+
.addClass('fg-menu-open')
|
104
|
+
.addClass(options.callerOnState);
|
105
|
+
container.parent().show().click(function(){ menu.kill(); return false; });
|
106
|
+
container.hide().slideDown(options.showSpeed).find('.fg-menu:eq(0)');
|
107
|
+
menu.menuOpen = true;
|
108
|
+
caller.removeClass(options.loadingState);
|
109
|
+
$(document).click(killAllMenus);
|
110
|
+
|
111
|
+
// assign key events
|
112
|
+
$(document).keydown(function(event){
|
113
|
+
var e;
|
114
|
+
if (event.which !="") { e = event.which; }
|
115
|
+
else if (event.charCode != "") { e = event.charCode; }
|
116
|
+
else if (event.keyCode != "") { e = event.keyCode; }
|
117
|
+
|
118
|
+
var menuType = ($(event.target).parents('div').is('.fg-menu-flyout')) ? 'flyout' : 'ipod' ;
|
119
|
+
|
120
|
+
switch(e) {
|
121
|
+
case 37: // left arrow
|
122
|
+
if (menuType == 'flyout') {
|
123
|
+
$(event.target).trigger('mouseout');
|
124
|
+
if ($('.'+options.flyOutOnState).size() > 0) { $('.'+options.flyOutOnState).trigger('mouseover'); };
|
125
|
+
};
|
126
|
+
|
127
|
+
if (menuType == 'ipod') {
|
128
|
+
$(event.target).trigger('mouseout');
|
129
|
+
if ($('.fg-menu-footer').find('a').size() > 0) { $('.fg-menu-footer').find('a').trigger('click'); };
|
130
|
+
if ($('.fg-menu-header').find('a').size() > 0) { $('.fg-menu-current-crumb').prev().find('a').trigger('click'); };
|
131
|
+
if ($('.fg-menu-current').prev().is('.fg-menu-indicator')) {
|
132
|
+
$('.fg-menu-current').prev().trigger('mouseover');
|
133
|
+
};
|
134
|
+
};
|
135
|
+
return false;
|
136
|
+
break;
|
137
|
+
|
138
|
+
case 38: // up arrow
|
139
|
+
if ($(event.target).is('.' + options.linkHover)) {
|
140
|
+
var prevLink = $(event.target).parent().prev().find('a:eq(0)');
|
141
|
+
if (prevLink.size() > 0) {
|
142
|
+
$(event.target).trigger('mouseout');
|
143
|
+
prevLink.trigger('mouseover');
|
144
|
+
};
|
145
|
+
}
|
146
|
+
else { container.find('a:eq(0)').trigger('mouseover'); }
|
147
|
+
return false;
|
148
|
+
break;
|
149
|
+
|
150
|
+
case 39: // right arrow
|
151
|
+
if ($(event.target).is('.fg-menu-indicator')) {
|
152
|
+
if (menuType == 'flyout') {
|
153
|
+
$(event.target).next().find('a:eq(0)').trigger('mouseover');
|
154
|
+
}
|
155
|
+
else if (menuType == 'ipod') {
|
156
|
+
$(event.target).trigger('click');
|
157
|
+
setTimeout(function(){
|
158
|
+
$(event.target).next().find('a:eq(0)').trigger('mouseover');
|
159
|
+
}, options.crossSpeed);
|
160
|
+
};
|
161
|
+
};
|
162
|
+
return false;
|
163
|
+
break;
|
164
|
+
|
165
|
+
case 40: // down arrow
|
166
|
+
if ($(event.target).is('.' + options.linkHover)) {
|
167
|
+
var nextLink = $(event.target).parent().next().find('a:eq(0)');
|
168
|
+
if (nextLink.size() > 0) {
|
169
|
+
$(event.target).trigger('mouseout');
|
170
|
+
nextLink.trigger('mouseover');
|
171
|
+
};
|
172
|
+
}
|
173
|
+
else { container.find('a:eq(0)').trigger('mouseover'); }
|
174
|
+
return false;
|
175
|
+
break;
|
176
|
+
|
177
|
+
case 27: // escape
|
178
|
+
killAllMenus();
|
179
|
+
break;
|
180
|
+
|
181
|
+
case 13: // enter
|
182
|
+
if ($(event.target).is('.fg-menu-indicator') && menuType == 'ipod') {
|
183
|
+
$(event.target).trigger('click');
|
184
|
+
setTimeout(function(){
|
185
|
+
$(event.target).next().find('a:eq(0)').trigger('mouseover');
|
186
|
+
}, options.crossSpeed);
|
187
|
+
};
|
188
|
+
break;
|
189
|
+
};
|
190
|
+
});
|
191
|
+
};
|
192
|
+
|
193
|
+
this.create = function(){
|
194
|
+
container.css({ width: options.width }).appendTo('body').find('ul:first').not('.fg-menu-breadcrumb').addClass('fg-menu');
|
195
|
+
container.find('ul, li a').addClass('ui-corner-all');
|
196
|
+
|
197
|
+
// aria roles & attributes
|
198
|
+
container.find('ul').attr('role', 'menu').eq(0).attr('aria-activedescendant','active-menuitem').attr('aria-labelledby', caller.attr('id'));
|
199
|
+
container.find('li').attr('role', 'menuitem');
|
200
|
+
container.find('li:has(ul)').attr('aria-haspopup', 'true').find('ul').attr('aria-expanded', 'false');
|
201
|
+
container.find('a').attr('tabindex', '-1');
|
202
|
+
|
203
|
+
// when there are multiple levels of hierarchy, create flyout or drilldown menu
|
204
|
+
if (container.find('ul').size() > 1) {
|
205
|
+
if (options.flyOut) { menu.flyout(container, options); }
|
206
|
+
else { menu.drilldown(container, options); }
|
207
|
+
}
|
208
|
+
else {
|
209
|
+
container.find('a').click(function(){
|
210
|
+
menu.chooseItem(this);
|
211
|
+
return false;
|
212
|
+
});
|
213
|
+
};
|
214
|
+
|
215
|
+
if (options.linkHover) {
|
216
|
+
var allLinks = container.find('.fg-menu li a');
|
217
|
+
allLinks.hover(
|
218
|
+
function(){
|
219
|
+
var menuitem = $(this);
|
220
|
+
$('.'+options.linkHover).removeClass(options.linkHover).blur().parent().removeAttr('id');
|
221
|
+
$(this).addClass(options.linkHover).focus().parent().attr('id','active-menuitem');
|
222
|
+
},
|
223
|
+
function(){
|
224
|
+
$(this).removeClass(options.linkHover).blur().parent().removeAttr('id');
|
225
|
+
}
|
226
|
+
);
|
227
|
+
};
|
228
|
+
|
229
|
+
if (options.linkHoverSecondary) {
|
230
|
+
container.find('.fg-menu li').hover(
|
231
|
+
function(){
|
232
|
+
$(this).siblings('li').removeClass(options.linkHoverSecondary);
|
233
|
+
if (options.flyOutOnState) { $(this).siblings('li').find('a').removeClass(options.flyOutOnState); }
|
234
|
+
$(this).addClass(options.linkHoverSecondary);
|
235
|
+
},
|
236
|
+
function(){ $(this).removeClass(options.linkHoverSecondary); }
|
237
|
+
);
|
238
|
+
};
|
239
|
+
|
240
|
+
menu.setPosition(container, caller, options);
|
241
|
+
menu.menuExists = true;
|
242
|
+
};
|
243
|
+
|
244
|
+
this.chooseItem = function(item){
|
245
|
+
// edit this for your own custom function/callback:
|
246
|
+
if ($(item).attr('alt') == "pop")
|
247
|
+
{
|
248
|
+
var d = jQuery('<div class="dialog"><div style="width:32px; margin:20px auto 0px auto"><img src="/images/loading-spinner.gif"/></div></div>').appendTo("body");
|
249
|
+
d.dialog({ modal: true, autoOpen: true, width: 'auto', title: $(item).attr('title') });
|
250
|
+
d.load($(item).attr('href'), '', function(){
|
251
|
+
d.dialog("open");
|
252
|
+
apply_ajax_forms();
|
253
|
+
});
|
254
|
+
}
|
255
|
+
else
|
256
|
+
{
|
257
|
+
location.href = $(item).attr('href');
|
258
|
+
}
|
259
|
+
menu.kill();
|
260
|
+
};
|
261
|
+
};
|
262
|
+
|
263
|
+
Menu.prototype.flyout = function(container, options) {
|
264
|
+
var menu = this;
|
265
|
+
|
266
|
+
this.resetFlyoutMenu = function(){
|
267
|
+
var allLists = container.find('ul ul');
|
268
|
+
allLists.removeClass('ui-widget-content').hide();
|
269
|
+
};
|
270
|
+
|
271
|
+
container.addClass('fg-menu-flyout').find('li:has(ul)').each(function(){
|
272
|
+
var linkWidth = container.width();
|
273
|
+
var showTimer, hideTimer;
|
274
|
+
var allSubLists = $(this).find('ul');
|
275
|
+
|
276
|
+
allSubLists.css({ left: linkWidth, width: linkWidth }).hide();
|
277
|
+
|
278
|
+
$(this).find('a:eq(0)').addClass('fg-menu-indicator').html('<span>' + $(this).find('a:eq(0)').text() + '</span><span class="ui-icon '+options.nextMenuLink+'"></span>').hover(
|
279
|
+
function(){
|
280
|
+
clearTimeout(hideTimer);
|
281
|
+
var subList = $(this).next();
|
282
|
+
if (!fitVertical(subList, $(this).offset().top)) { subList.css({ top: 'auto', bottom: 0 }); };
|
283
|
+
if (!fitHorizontal(subList, $(this).offset().left + 100)) { subList.css({ left: 'auto', right: linkWidth, 'z-index': 999 }); };
|
284
|
+
showTimer = setTimeout(function(){
|
285
|
+
subList.addClass('ui-widget-content').show(options.showSpeed).attr('aria-expanded', 'true');
|
286
|
+
}, 300);
|
287
|
+
},
|
288
|
+
function(){
|
289
|
+
clearTimeout(showTimer);
|
290
|
+
var subList = $(this).next();
|
291
|
+
hideTimer = setTimeout(function(){
|
292
|
+
subList.removeClass('ui-widget-content').hide(options.showSpeed).attr('aria-expanded', 'false');
|
293
|
+
}, 400);
|
294
|
+
}
|
295
|
+
);
|
296
|
+
|
297
|
+
$(this).find('ul a').hover(
|
298
|
+
function(){
|
299
|
+
clearTimeout(hideTimer);
|
300
|
+
if ($(this).parents('ul').prev().is('a.fg-menu-indicator')) {
|
301
|
+
$(this).parents('ul').prev().addClass(options.flyOutOnState);
|
302
|
+
}
|
303
|
+
},
|
304
|
+
function(){
|
305
|
+
hideTimer = setTimeout(function(){
|
306
|
+
allSubLists.hide(options.showSpeed);
|
307
|
+
container.find(options.flyOutOnState).removeClass(options.flyOutOnState);
|
308
|
+
}, 500);
|
309
|
+
}
|
310
|
+
);
|
311
|
+
});
|
312
|
+
|
313
|
+
container.find('a').click(function(){
|
314
|
+
menu.chooseItem(this);
|
315
|
+
alert("FOO");
|
316
|
+
return false;
|
317
|
+
});
|
318
|
+
};
|
319
|
+
|
320
|
+
|
321
|
+
/* Menu.prototype.setPosition parameters (defaults noted with *):
|
322
|
+
referrer = the link (or other element) used to show the overlaid object
|
323
|
+
settings = can override the defaults:
|
324
|
+
- posX/Y: where the top left corner of the object should be positioned in relation to its referrer.
|
325
|
+
X: left*, center, right
|
326
|
+
Y: top, center, bottom*
|
327
|
+
- offsetX/Y: the number of pixels to be offset from the x or y position. Can be a positive or negative number.
|
328
|
+
- directionH/V: where the entire menu should appear in relation to its referrer.
|
329
|
+
Horizontal: left*, right
|
330
|
+
Vertical: up, down*
|
331
|
+
- detectH/V: detect the viewport horizontally / vertically
|
332
|
+
- linkToFront: copy the menu link and place it on top of the menu (visual effect to make it look like it overlaps the object) */
|
333
|
+
|
334
|
+
Menu.prototype.setPosition = function(widget, caller, options) {
|
335
|
+
var el = widget;
|
336
|
+
var referrer = caller;
|
337
|
+
var dims = {
|
338
|
+
refX: referrer.offset().left,
|
339
|
+
refY: referrer.offset().top,
|
340
|
+
refW: referrer.getTotalWidth(),
|
341
|
+
refH: referrer.getTotalHeight()
|
342
|
+
};
|
343
|
+
var options = options;
|
344
|
+
var xVal, yVal;
|
345
|
+
|
346
|
+
var helper = $('<div class="positionHelper"></div>');
|
347
|
+
helper.css({ position: 'absolute', left: dims.refX, top: dims.refY, width: dims.refW, height: dims.refH });
|
348
|
+
el.wrap(helper);
|
349
|
+
|
350
|
+
// get X pos
|
351
|
+
switch(options.positionOpts.posX) {
|
352
|
+
case 'left': xVal = 0;
|
353
|
+
break;
|
354
|
+
case 'center': xVal = dims.refW / 2;
|
355
|
+
break;
|
356
|
+
case 'right': xVal = dims.refW;
|
357
|
+
break;
|
358
|
+
};
|
359
|
+
|
360
|
+
// get Y pos
|
361
|
+
switch(options.positionOpts.posY) {
|
362
|
+
case 'top': yVal = 0;
|
363
|
+
break;
|
364
|
+
case 'center': yVal = dims.refH / 2;
|
365
|
+
break;
|
366
|
+
case 'bottom': yVal = dims.refH;
|
367
|
+
break;
|
368
|
+
};
|
369
|
+
|
370
|
+
// add the offsets (zero by default)
|
371
|
+
xVal += options.positionOpts.offsetX;
|
372
|
+
yVal += options.positionOpts.offsetY;
|
373
|
+
|
374
|
+
// position the object vertically
|
375
|
+
if (options.positionOpts.directionV == 'up') {
|
376
|
+
el.css({ top: 'auto', bottom: yVal });
|
377
|
+
if (options.positionOpts.detectV && !fitVertical(el)) {
|
378
|
+
el.css({ bottom: 'auto', top: yVal });
|
379
|
+
}
|
380
|
+
}
|
381
|
+
else {
|
382
|
+
el.css({ bottom: 'auto', top: yVal });
|
383
|
+
if (options.positionOpts.detectV && !fitVertical(el)) {
|
384
|
+
el.css({ top: 'auto', bottom: yVal });
|
385
|
+
}
|
386
|
+
};
|
387
|
+
|
388
|
+
// and horizontally
|
389
|
+
if (options.positionOpts.directionH == 'left') {
|
390
|
+
el.css({ left: 'auto', right: xVal });
|
391
|
+
if (options.positionOpts.detectH && !fitHorizontal(el)) {
|
392
|
+
el.css({ right: 'auto', left: xVal });
|
393
|
+
}
|
394
|
+
}
|
395
|
+
else {
|
396
|
+
el.css({ right: 'auto', left: xVal });
|
397
|
+
if (options.positionOpts.detectH && !fitHorizontal(el)) {
|
398
|
+
el.css({ left: 'auto', right: xVal });
|
399
|
+
}
|
400
|
+
};
|
401
|
+
|
402
|
+
// if specified, clone the referring element and position it so that it appears on top of the menu
|
403
|
+
if (options.positionOpts.linkToFront) {
|
404
|
+
referrer.clone().addClass('linkClone').css({
|
405
|
+
position: 'absolute',
|
406
|
+
top: 0,
|
407
|
+
right: 'auto',
|
408
|
+
bottom: 'auto',
|
409
|
+
left: 0,
|
410
|
+
width: referrer.width(),
|
411
|
+
height: referrer.height()
|
412
|
+
}).insertAfter(el);
|
413
|
+
};
|
414
|
+
};
|
415
|
+
|
416
|
+
|
417
|
+
/* Utilities to sort and find viewport dimensions */
|
418
|
+
|
419
|
+
function sortBigToSmall(a, b) { return b - a; };
|
420
|
+
|
421
|
+
jQuery.fn.getTotalWidth = function(){
|
422
|
+
return $(this).width() + parseInt($(this).css('paddingRight')) + parseInt($(this).css('paddingLeft')) + parseInt($(this).css('borderRightWidth')) + parseInt($(this).css('borderLeftWidth'));
|
423
|
+
};
|
424
|
+
|
425
|
+
jQuery.fn.getTotalHeight = function(){
|
426
|
+
return $(this).height() + parseInt($(this).css('paddingTop')) + parseInt($(this).css('paddingBottom')) + parseInt($(this).css('borderTopWidth')) + parseInt($(this).css('borderBottomWidth'));
|
427
|
+
};
|
428
|
+
|
429
|
+
function getScrollTop(){
|
430
|
+
return self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
431
|
+
};
|
432
|
+
|
433
|
+
function getScrollLeft(){
|
434
|
+
return self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
|
435
|
+
};
|
436
|
+
|
437
|
+
function getWindowHeight(){
|
438
|
+
var de = document.documentElement;
|
439
|
+
return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
|
440
|
+
};
|
441
|
+
|
442
|
+
function getWindowWidth(){
|
443
|
+
var de = document.documentElement;
|
444
|
+
return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
|
445
|
+
};
|
446
|
+
|
447
|
+
/* Utilities to test whether an element will fit in the viewport
|
448
|
+
Parameters:
|
449
|
+
el = element to position, required
|
450
|
+
leftOffset / topOffset = optional parameter if the offset cannot be calculated (i.e., if the object is in the DOM but is set to display: 'none') */
|
451
|
+
|
452
|
+
function fitHorizontal(el, leftOffset){
|
453
|
+
var leftVal = parseInt(leftOffset) || $(el).offset().left;
|
454
|
+
return (leftVal + $(el).width() <= getWindowWidth() + getScrollLeft() && leftVal - getScrollLeft() >= 0);
|
455
|
+
};
|
456
|
+
|
457
|
+
function fitVertical(el, topOffset){
|
458
|
+
var topVal = parseInt(topOffset) || $(el).offset().top;
|
459
|
+
return (topVal + $(el).height() <= getWindowHeight() + getScrollTop() && topVal - getScrollTop() >= 0);
|
460
|
+
};
|
461
|
+
|
462
|
+
/*--------------------------------------------------------------------
|
463
|
+
* javascript method: "pxToEm"
|
464
|
+
* by:
|
465
|
+
Scott Jehl (scott@filamentgroup.com)
|
466
|
+
Maggie Wachs (maggie@filamentgroup.com)
|
467
|
+
http://www.filamentgroup.com
|
468
|
+
*
|
469
|
+
* Copyright (c) 2008 Filament Group
|
470
|
+
* Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
|
471
|
+
*
|
472
|
+
* Description: Extends the native Number and String objects with pxToEm method. pxToEm converts a pixel value to ems depending on inherited font size.
|
473
|
+
* Article: http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/
|
474
|
+
* Demo: http://www.filamentgroup.com/examples/pxToEm/
|
475
|
+
*
|
476
|
+
* Options:
|
477
|
+
scope: string or jQuery selector for font-size scoping
|
478
|
+
reverse: Boolean, true reverses the conversion to em-px
|
479
|
+
* Dependencies: jQuery library
|
480
|
+
* Usage Example: myPixelValue.pxToEm(); or myPixelValue.pxToEm({'scope':'#navigation', reverse: true});
|
481
|
+
*
|
482
|
+
* Version: 2.0, 08.01.2008
|
483
|
+
* Changelog:
|
484
|
+
* 08.02.2007 initial Version 1.0
|
485
|
+
* 08.01.2008 - fixed font-size calculation for IE
|
486
|
+
--------------------------------------------------------------------*/
|
487
|
+
|
488
|
+
Number.prototype.pxToEm = String.prototype.pxToEm = function(settings){
|
489
|
+
//set defaults
|
490
|
+
settings = jQuery.extend({
|
491
|
+
scope: 'body',
|
492
|
+
reverse: false
|
493
|
+
}, settings);
|
494
|
+
|
495
|
+
var pxVal = (this == '') ? 0 : parseFloat(this);
|
496
|
+
var scopeVal;
|
497
|
+
var getWindowWidth = function(){
|
498
|
+
var de = document.documentElement;
|
499
|
+
return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
|
500
|
+
};
|
501
|
+
|
502
|
+
/* When a percentage-based font-size is set on the body, IE returns that percent of the window width as the font-size.
|
503
|
+
For example, if the body font-size is 62.5% and the window width is 1000px, IE will return 625px as the font-size.
|
504
|
+
When this happens, we calculate the correct body font-size (%) and multiply it by 16 (the standard browser font size)
|
505
|
+
to get an accurate em value. */
|
506
|
+
|
507
|
+
if (settings.scope == 'body' && $.browser.msie && (parseFloat($('body').css('font-size')) / getWindowWidth()).toFixed(1) > 0.0) {
|
508
|
+
var calcFontSize = function(){
|
509
|
+
return (parseFloat($('body').css('font-size'))/getWindowWidth()).toFixed(3) * 16;
|
510
|
+
};
|
511
|
+
scopeVal = calcFontSize();
|
512
|
+
}
|
513
|
+
else { scopeVal = parseFloat(jQuery(settings.scope).css("font-size")); };
|
514
|
+
|
515
|
+
var result = (settings.reverse == true) ? (pxVal * scopeVal).toFixed(2) + 'px' : (pxVal / scopeVal).toFixed(2) + 'em';
|
516
|
+
return result;
|
517
|
+
};
|