muck-engine 0.4.27 → 0.4.29
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
+
};
|