aboutsummaryrefslogtreecommitdiffstats
path: root/jsquery/src/main/java/gwtquery/jsplugins/menu
diff options
context:
space:
mode:
Diffstat (limited to 'jsquery/src/main/java/gwtquery/jsplugins/menu')
-rw-r--r--jsquery/src/main/java/gwtquery/jsplugins/menu/JsQueryMenu.gwt.xml7
-rw-r--r--jsquery/src/main/java/gwtquery/jsplugins/menu/client/JsMenu.java946
-rw-r--r--jsquery/src/main/java/gwtquery/jsplugins/menu/client/JsQueryMenu.java12
-rw-r--r--jsquery/src/main/java/gwtquery/jsplugins/menu/client/jsmenu.diff69
-rw-r--r--jsquery/src/main/java/gwtquery/jsplugins/menu/public/arrow_right.gifbin0 -> 55 bytes
-rw-r--r--jsquery/src/main/java/gwtquery/jsplugins/menu/public/arrowdown.pngbin0 -> 661 bytes
-rw-r--r--jsquery/src/main/java/gwtquery/jsplugins/menu/public/demo.html358
-rw-r--r--jsquery/src/main/java/gwtquery/jsplugins/menu/public/myshadow.pngbin0 -> 5741 bytes
-rw-r--r--jsquery/src/main/java/gwtquery/jsplugins/menu/public/style.css358
9 files changed, 1750 insertions, 0 deletions
diff --git a/jsquery/src/main/java/gwtquery/jsplugins/menu/JsQueryMenu.gwt.xml b/jsquery/src/main/java/gwtquery/jsplugins/menu/JsQueryMenu.gwt.xml
new file mode 100644
index 00000000..81153c56
--- /dev/null
+++ b/jsquery/src/main/java/gwtquery/jsplugins/menu/JsQueryMenu.gwt.xml
@@ -0,0 +1,7 @@
+<module rename-to='jsmenu'>
+ <inherits name='com.google.gwt.query.jsquery.JsQuery' />
+ <entry-point class="gwtquery.jsplugins.menu.client.JsQueryMenu" />
+
+
+</module>
+
diff --git a/jsquery/src/main/java/gwtquery/jsplugins/menu/client/JsMenu.java b/jsquery/src/main/java/gwtquery/jsplugins/menu/client/JsMenu.java
new file mode 100644
index 00000000..0977f6ce
--- /dev/null
+++ b/jsquery/src/main/java/gwtquery/jsplugins/menu/client/JsMenu.java
@@ -0,0 +1,946 @@
+package gwtquery.jsplugins.menu.client;
+
+/**
+ *
+ * This class wraps the jquery menu plugin from:
+ *
+ * http://p.sohei.org/jquery-plugins/menu/
+ *
+ */
+public abstract class JsMenu {
+
+ public static native void loadPlugin() /*-{
+ var l = @com.google.gwt.query.jsquery.client.JsQueryUtils::log(Ljava/lang/Object;);
+ var window = $wnd;
+ var document = $doc;
+ var jQuery = $wnd.$;
+
+(function($)
+{
+ var menus = [], //list of all menus
+ visibleMenus = [], //list of all visible menus
+ activeMenu = activeItem = null,
+ menuDIVElement = $('<div class="menu-div outerbox" style="position:absolute;top:0;left:0;display:none;"><div class="shadowbox1"></div><div class="shadowbox2"></div><div class="shadowbox3"></div></div>')[0],
+ menuULElement = $('<ul class="menu-ul innerbox"></ul>')[0],
+ menuItemElement = $('<li style="position:relative;"><div class="menu-item"></div></li>')[0],
+ arrowElement = $('<img class="menu-item-arrow" />')[0],
+ $rootDiv = $('<div id="root-menu-div" style="position:absolute;top:0;left:0;"></div>'), //create main menu div
+ defaults = {
+ // $.Menu options
+ showDelay : 200,
+ hideDelay : 200,
+ hoverOpenDelay: 0,
+ offsetTop : 0,
+ offsetLeft : 0,
+ minWidth: 0,
+ onOpen: null,
+ onClose: null,
+
+ // $.MenuItem options
+ onClick: null,
+ arrowSrc: null,
+ addExpando: false,
+
+ // $.fn.menuFromElement options
+ copyClassAttr: false
+ };
+
+ $(function(){
+ $rootDiv.appendTo('body');
+ });
+
+ $.extend({
+ MenuCollection : function(items) {
+
+ this.menus = [];
+
+ this.init(items);
+ }
+ });
+ $.extend($.MenuCollection, {
+ prototype : {
+ init : function(items)
+ {
+ if ( items && items.length )
+ {
+ for ( var i = 0; i < items.length; i++ )
+ {
+ this.addMenu(items[i]);
+ items[i].menuCollection = this;
+ }
+ }
+ },
+ addMenu : function(menu)
+ {
+ if ( menu instanceof $.Menu )
+ this.menus.push(menu);
+
+ menu.menuCollection = this;
+
+ var self = this;
+ $(menu.target).hover(function(){
+ if ( menu.visible )
+ return;
+
+ //when there is an open menu in this collection, hide it and show the new one
+ for ( var i = 0; i < self.menus.length; i++ )
+ {
+ if ( self.menus[i].visible )
+ {
+ self.menus[i].hide();
+ menu.show();
+ return;
+ }
+ }
+ }, function(){});
+ }
+ }
+ });
+
+ $.extend({
+ Menu : function(target, items, options) {
+ this.menuItems = []; //all direct child $.MenuItem objects
+ this.subMenus = []; //all subMenus from this.menuItems
+ this.visible = false;
+ this.active = false; //this menu has hover or one of its submenus is open
+ this.parentMenuItem = null;
+ this.settings = $.extend({}, defaults, options);
+ this.target = target;
+ this.$eDIV = null;
+ this.$eUL = null;
+ this.timer = null;
+ this.menuCollection = null;
+ this.openTimer = null;
+
+ this.init();
+ if ( items && $.isArray(items) )
+ this.addItems(items);
+ }
+ });
+ $.extend($.Menu, {
+ checkMouse : function(e)
+ {
+ var t = e.target;
+ //the user clicked on the target of the currenty open menu
+ if ( visibleMenus.length && t == visibleMenus[0].target )
+ return;
+
+ //get the last node before the #root-menu-div
+ while ( t.parentNode && t.parentNode != $rootDiv[0] )
+ t = t.parentNode;
+
+ // FIXME: why do we need a timeout
+ setTimeout($.Menu.closeAll, 100);
+
+ // FIXME: JsQuery each doesn't work with arrays
+ // if ( !$(visibleMenus).filter(function(){ return this.$eDIV[0] == t }).length )
+ // {
+ // $.Menu.closeAll();
+ // }
+ return true;
+ },
+ checkKey : function(e)
+ {
+ switch ( e.keyCode )
+ {
+ case 13: //return
+ if ( activeItem )
+ activeItem.click(e, activeItem.$eLI[0]);
+ break;
+ case 27: //ESC
+ $.Menu.closeAll();
+ break;
+ case 37: //left
+ if ( !activeMenu )
+ activeMenu = visibleMenus[0];
+ var a = activeMenu;
+ if ( a && a.parentMenuItem ) //select the parent menu and close the submenu
+ {
+ //unbind the events temporary, as we dont want the hoverout event to fire
+ var pmi = a.parentMenuItem;
+ pmi.$eLI.unbind('mouseout').unbind('mouseover');
+ a.hide();
+ pmi.hoverIn(true);
+ setTimeout(function(){ //bind again..but delay it
+ pmi.bindHover();
+ });
+ }
+ else if ( a && a.menuCollection ) //select the previous menu in the collection
+ {
+ var pos,
+ mcm = a.menuCollection.menus;
+ if ( (pos = $.inArray(a, mcm)) > -1 )
+ {
+ if ( --pos < 0 )
+ pos = mcm.length - 1;
+ $.Menu.closeAll();
+ mcm[pos].show();
+ mcm[pos].setActive();
+ if ( mcm[pos].menuItems.length ) //select the first item
+ mcm[pos].menuItems[0].hoverIn(true);
+ }
+ }
+ break;
+ case 38: //up
+ if ( activeMenu )
+ activeMenu.selectNextItem(-1);
+ break;
+ case 39: //right
+ if ( !activeMenu )
+ activeMenu = visibleMenus[0];
+ var m,
+ a = activeMenu,
+ asm = activeItem ? activeItem.subMenu : null;
+ if ( a )
+ {
+ if ( asm && asm.menuItems.length ) //select the submenu
+ {
+ asm.show();
+ asm.menuItems[0].hoverIn();
+ }
+ else if ( (a = a.inMenuCollection()) ) //select the next menu in the collection
+ {
+ var pos,
+ mcm = a.menuCollection.menus;
+ if ( (pos = $.inArray(a, mcm)) > -1 )
+ {
+ if ( ++pos >= mcm.length )
+ pos = 0;
+ $.Menu.closeAll();
+ mcm[pos].show();
+ mcm[pos].setActive();
+ if ( mcm[pos].menuItems.length ) //select the first item
+ mcm[pos].menuItems[0].hoverIn(true);
+ }
+ }
+ }
+ break;
+ case 40: //down
+ if ( !activeMenu )
+ {
+ if ( visibleMenus.length && visibleMenus[0].menuItems.length )
+ visibleMenus[0].menuItems[0].hoverIn();
+ }
+ else
+ activeMenu.selectNextItem();
+ break;
+ }
+ if ( e.keyCode > 36 && e.keyCode < 41 )
+ return false; //this will prevent scrolling
+ },
+ closeAll : function()
+ {
+ while ( visibleMenus.length )
+ visibleMenus[0].hide();
+ },
+ setDefaults : function(d)
+ {
+ $.extend(defaults, d);
+ },
+ prototype : {
+
+ init : function()
+ {
+ var self = this;
+ if ( !this.target )
+ return;
+ else if ( this.target instanceof $.MenuItem )
+ {
+ this.parentMenuItem = this.target;
+ this.target.addSubMenu(this);
+ this.target = this.target.$eLI;
+ }
+
+ menus.push(this);
+
+ //use the dom methods instead the ones from jquery (faster)
+ this.$eDIV = $(menuDIVElement.cloneNode(1));
+ this.$eUL = $(menuULElement.cloneNode(1));
+ this.$eDIV[0].appendChild(this.$eUL[0]);
+ $rootDiv[0].appendChild(this.$eDIV[0]);
+
+ //bind events
+ if ( !this.parentMenuItem )
+ {
+ $(this.target).click(function(e){
+ self.onClick(e);
+ }).hover(function(e){
+ self.setActive();
+
+ if ( self.settings.hoverOpenDelay )
+ {
+ self.openTimer = setTimeout(function(){
+ if ( !self.visible )
+ self.onClick(e);
+ }, self.settings.hoverOpenDelay);
+ }
+ }, function(){
+ if ( !self.visible )
+ $(this).removeClass('activetarget');
+
+ if ( self.openTimer )
+ clearTimeout(self.openTimer);
+ });
+ }
+ else
+ {
+ this.$eDIV.hover(function(){
+ self.setActive();
+ }, function(){});
+ }
+ },
+ setActive : function()
+ {
+ if ( !this.parentMenuItem )
+ $(this.target).addClass('activetarget');
+ else
+ this.active = true;
+ },
+ addItem : function(item)
+ {
+ if ( item instanceof $.MenuItem )
+ {
+ if ( $.inArray(item, this.menuItems) == -1 )
+ {
+ this.$eUL.append(item.$eLI);
+ this.menuItems.push(item);
+ item.parentMenu = this;
+ if ( item.subMenu )
+ this.subMenus.push(item.subMenu);
+ }
+ }
+ else
+ {
+ this.addItem(new $.MenuItem(item, this.settings));
+ }
+ },
+ addItems : function(items)
+ {
+ for ( var i = 0; i < items.length; i++ )
+ {
+ this.addItem(items[i]);
+ }
+ },
+ removeItem : function(item)
+ {
+ var pos = $.inArray(item, this.menuItems);
+ if ( pos > -1 )
+ this.menuItems.splice(pos, 1);
+ item.parentMenu = null;
+ },
+ hide : function()
+ {
+ if ( !this.visible )
+ return;
+
+ var i,
+ pos = $.inArray(this, visibleMenus);
+
+ this.$eDIV.hide();
+
+ if ( pos >= 0 )
+ visibleMenus.splice(pos, 1);
+ this.visible = this.active = false;
+
+ $(this.target).removeClass('activetarget');
+
+ //hide all submenus
+ for ( i = 0; i < this.subMenus.length; i++ )
+ {
+ this.subMenus[i].hide();
+ }
+
+ //set all items inactive (e.g. remove hover class..)
+ for ( i = 0; i < this.menuItems.length; i++ )
+ {
+ if ( this.menuItems[i].active )
+ this.menuItems[i].setInactive();
+ }
+
+ if ( !visibleMenus.length ) //unbind events when the last menu was closed
+ $(document).unbind('mousedown', $.Menu.checkMouse).unbind('keydown', $.Menu.checkKey);
+
+ if ( activeMenu == this )
+ activeMenu = null;
+
+ if ( this.settings.onClose )
+ this.settings.onClose.call(this);
+ },
+ show : function(e)
+ {
+ if ( this.visible )
+ return;
+
+ var zi,
+ pmi = this.parentMenuItem;
+
+ if ( this.menuItems.length ) //show only when it has items
+ {
+ if ( pmi ) //set z-index
+ {
+ zi = parseInt(pmi.parentMenu.$eDIV.css('z-index'));
+ this.$eDIV.css('z-index', (isNaN(zi) ? 1 : zi + 1));
+ }
+ this.$eDIV.css({visibility: 'hidden', display:'block'});
+
+ //set min-width
+ if ( this.settings.minWidth )
+ {
+ if ( this.$eDIV.width() < this.settings.minWidth )
+ this.$eDIV.css('width', this.settings.minWidth);
+ }
+
+ this.setPosition();
+ this.$eDIV.css({display:'none', visibility: ''}).show();
+
+ //IEs default width: auto is bad! ie6 and ie7 have are producing different errors.. (7 = 5px shadowbox + 2px border)
+ if ( 0) //$.browser.msie )
+ this.$eUL.css('width', parseInt($.browser.version) == 6 ? this.$eDIV.width() - 7 : this.$eUL.width());
+
+ if ( this.settings.onOpen )
+ this.settings.onOpen.call(this);
+ }
+
+ if ( visibleMenus.length == 0 )
+ $(document).bind('mousedown', $.Menu.checkMouse).bind('keydown', $.Menu.checkKey);
+
+ this.visible = true;
+ visibleMenus.push(this);
+ },
+ setPosition : function()
+ {
+ var $t, o, posX, posY,
+ pmo, //parent menu offset
+ wst, //window scroll top
+ wsl, //window scroll left
+ ww = $(window).width(),
+ wh = $(window).height(),
+ pmi = this.parentMenuItem,
+ height = this.$eDIV[0].clientHeight,
+ width = this.$eDIV[0].clientWidth,
+ pheight; //parent height
+
+ if ( pmi )
+ {
+ //position on the right side of the parent menu item
+ o = pmi.$eLI.offset();
+ posX = o.left + pmi.$eLI.width();
+ posY = o.top;
+ }
+ else
+ {
+ //position right below the target
+ $t = $(this.target);
+ o = $t.offset();
+
+ posX = o.left + this.settings.offsetLeft;
+ posY = o.top + $t.height() + this.settings.offsetTop;
+ }
+
+ //y-pos
+ if ($().scrollTop )
+ {
+ wst = $(window).scrollTop();
+ if ( wh < height ) //menu is bigger than the window
+ {
+ //position the menu at the top of the visible area
+ posY = wst;
+ }
+ else if ( wh + wst < posY + height ) //outside on the bottom?
+ {
+ if ( pmi )
+ {
+ pmo = pmi.parentMenu.$eDIV.offset();
+ pheight = pmi.parentMenu.$eDIV[0].clientHeight;
+ if ( height <= pheight )
+ {
+ //bottom position = parentmenu-bottom position
+ posY = pmo.top + pheight - height;
+ }
+ else
+ {
+ //top position = parentmenu-top position
+ posY = pmo.top;
+ }
+ //still outside on the bottom?
+ if ( wh + wst < posY + height )
+ {
+ //shift the menu upwards till the bottom is visible
+ posY -= posY + height - (wh + wst);
+ }
+ }
+ else
+ {
+ //shift the menu upwards till the bottom is visible
+ posY -= posY + height - (wh + wst);
+ }
+ }
+ }
+ //x-pos
+ if ($().scrollLeft )
+ {
+ wsl = $(window).scrollLeft();
+ if ( ww + wsl < posX + width )
+ {
+ if ( pmi )
+ {
+ //display the menu not on the right side but on the left side
+ posX -= pmi.$eLI.width() + width;
+ //outside on the left now?
+ if ( posX < wsl )
+ posX = wsl;
+ }
+ else
+ {
+ //shift the menu to the left until it fits
+ posX -= posX + width - (ww + wsl);
+ }
+ }
+ }
+
+ //set position
+ this.$eDIV.css({left: posX, top: posY});
+ },
+ onClick : function(e)
+ {
+ if ( this.visible )
+ {
+ this.hide();
+ this.setActive(); //the class is removed in the hide() method..add it again
+ }
+ else
+ {
+ //close all open menus
+ $.Menu.closeAll();
+ this.show(e);
+ }
+ },
+ addTimer : function(callback, delay)
+ {
+ var self = this;
+ this.timer = setTimeout(function(){
+ callback.call(self);
+ self.timer = null;
+ }, delay);
+ },
+ removeTimer : function()
+ {
+ if ( this.timer )
+ {
+ clearTimeout(this.timer);
+ this.timer = null;
+ }
+ },
+ selectNextItem : function(offset)
+ {
+ var i, pos = 0,
+ mil = this.menuItems.length,
+ o = offset || 1;
+
+ //get current pos
+ for ( i = 0; i < mil; i++ )
+ {
+ if ( this.menuItems[i].active )
+ {
+ pos = i;
+ break;
+ }
+ }
+ this.menuItems[pos].hoverOut();
+
+ do //jump over the separators
+ {
+ pos += o;
+ if ( pos >= mil )
+ pos = 0;
+ else if ( pos < 0 )
+ pos = mil - 1;
+ } while ( this.menuItems[pos].separator );
+ this.menuItems[pos].hoverIn(true);
+ },
+ inMenuCollection : function()
+ {
+ var m = this;
+ while ( m.parentMenuItem )
+ m = m.parentMenuItem.parentMenu;
+ return m.menuCollection ? m : null;
+ },
+ destroy : function() //delete menu
+ {
+ var pos, item;
+
+ this.hide();
+
+ //unbind events
+ if ( !this.parentMenuItem )
+ $(this.target).unbind('click').unbind('mouseover').unbind('mouseout');
+ else
+ this.$eDIV.unbind('mouseover').unbind('mouseout');
+
+ //destroy all items
+ while ( this.menuItems.length )
+ {
+ item = this.menuItems[0];
+ item.destroy();
+ delete item;
+ }
+
+ if ( (pos = $.inArray(this, menus)) > -1 )
+ menus.splice(pos, 1);
+
+ if ( this.menuCollection )
+ {
+ if ( (pos = $.inArray(this, this.menuCollection.menus)) > -1 )
+ this.menuCollection.menus.splice(pos, 1);
+ }
+
+ this.$eDIV.remove();
+ }
+ }
+ });
+
+ $.extend({
+ MenuItem : function(obj, options)
+ {
+ if ( typeof obj == 'string' )
+ obj = {src: obj};
+
+ this.src = obj.src || '';
+ this.url = obj.url || null;
+ this.urlTarget = obj.target || null;
+ this.addClass = obj.addClass || null;
+ this.data = obj.data || null;
+
+ this.$eLI = null;
+ this.parentMenu = null;
+ this.subMenu = null;
+ this.settings = $.extend({}, defaults, options);
+ this.active = false;
+ this.enabled = true;
+ this.separator = false;
+
+ this.init();
+
+ if ( obj.subMenu )
+ new $.Menu(this, obj.subMenu, options);
+ }
+ });
+
+ $.extend($.MenuItem, {
+ prototype : {
+ init : function()
+ {
+ var i, isStr,
+ src = this.src,
+ self = this;
+
+ this.$eLI = $(menuItemElement.cloneNode(1));
+ if ( this.addClass )
+ this.$eLI[0].setAttribute('class', this.addClass);
+
+ if ( this.settings.addExpando && this.data )
+ this.$eLI[0].menuData = this.data;
+
+ if ( src == '' )
+ {
+ this.$eLI.addClass('menu-separator');
+ this.separator = true;
+ }
+ else
+ {
+ isStr = typeof src == 'string';
+ if ( isStr && this.url ) //create a link node, when we have an url
+ src = $('<a href="' + this.url + '"' + (this.urlTarget ? 'target="' + this.urlTarget + '"' : '') + '>' + src + '</a>');
+ else if ( isStr || !src.length )
+ src = [src];
+ //go through the passed DOM-Elements (or jquery objects or text nodes.) and append them to the menus list item
+ //this.$eLI.append(this.src) is really slow when having a lot(!!!) of items
+ for ( i = 0; i < src.length; i++ )
+ {
+ if ( typeof src[i] == 'string' )
+ {
+ //we cant use createTextNode, as html entities won't be displayed correctly (eg. &copy;)
+ elem = document.createElement('span');
+ elem.innerHTML = src[i];
+ this.$eLI[0].firstChild.appendChild(elem);
+ }
+ else
+ this.$eLI[0].firstChild.appendChild(src[i].cloneNode(1));
+ }
+ }
+
+ this.$eLI.click(function(e){
+ self.click(e, this);
+ });
+ this.bindHover();
+ },
+ click : function(e, scope)
+ {
+ if ( this.enabled && this.settings.onClick )
+ this.settings.onClick.call(scope, e, this);
+ },
+ bindHover : function()
+ {
+ var self = this;
+ this.$eLI.hover(function(){
+ self.hoverIn();
+ }, function(){
+ self.hoverOut();
+ });
+ },
+ hoverIn : function(noSubMenu)
+ {
+ this.removeTimer();
+
+ var i,
+ pms = this.parentMenu.subMenus,
+ pmi = this.parentMenu.menuItems,
+ self = this;
+
+ //remove the timer from the parent item, when there is one (e.g. to close the menu)
+ if ( this.parentMenu.timer )
+ this.parentMenu.removeTimer();
+
+ if ( !this.enabled )
+ return;
+
+ //deactivate all menuItems on the same level
+ for ( i = 0; i < pmi.length; i++ )
+ {
+ if ( pmi[i].active )
+ pmi[i].setInactive();
+ }
+
+ this.setActive();
+ activeMenu = this.parentMenu;
+
+ //are there open submenus on the same level? close them!
+ for ( i = 0; i < pms.length; i++ )
+ {
+ if ( pms[i].visible && pms[i] != this.subMenu && !pms[i].timer ) //close if there is no closetimer running already
+ pms[i].addTimer(function(){
+ this.hide();
+ }, pms[i].settings.hideDelay);
+ }
+
+ if ( this.subMenu && !noSubMenu )
+ {
+ //set timeout to show menu
+ this.subMenu.addTimer(function(){
+ this.show();
+ }, this.subMenu.settings.showDelay);
+ }
+ },
+ hoverOut : function()
+ {
+ this.removeTimer();
+
+ if ( !this.enabled )
+ return;
+
+ if ( !this.subMenu || !this.subMenu.visible )
+ this.setInactive();
+ },
+ removeTimer : function()
+ {
+ if ( this.subMenu )
+ {
+ this.subMenu.removeTimer();
+ }
+ },
+ setActive : function()
+ {
+ this.active = true;
+ this.$eLI.addClass('active');
+
+ //set the parent menu item active too if necessary
+ var pmi = this.parentMenu.parentMenuItem;
+ if ( pmi && !pmi.active )
+ pmi.setActive();
+
+ activeItem = this;
+ },
+ setInactive : function()
+ {
+ this.active = false;
+ this.$eLI.removeClass('active');
+ if ( this == activeItem )
+ activeItem = null;
+ },
+ enable : function()
+ {
+ this.$eLI.removeClass('disabled');
+ this.enabled = true;
+ },
+ disable : function()
+ {
+ this.$eLI.addClass('disabled');
+ this.enabled = false;
+ },
+ destroy : function()
+ {
+ this.removeTimer();
+
+ this.$eLI.remove();
+
+ //unbind events
+ this.$eLI.unbind('mouseover').unbind('mouseout').unbind('click');
+ //delete submenu
+ if ( this.subMenu )
+ {
+ this.subMenu.destroy();
+ delete this.subMenu;
+ }
+ this.parentMenu.removeItem(this);
+ },
+ addSubMenu : function(menu)
+ {
+ if ( this.subMenu )
+ return;
+ this.subMenu = menu;
+ if ( this.parentMenu && $.inArray(menu, this.parentMenu.subMenus) == -1 )
+ this.parentMenu.subMenus.push(menu);
+ if ( this.settings.arrowSrc )
+ {
+ var a = arrowElement.cloneNode(0);
+ a.setAttribute('src', this.settings.arrowSrc);
+ this.$eLI[0].firstChild.appendChild(a);
+ }
+ }
+ }
+ });
+
+
+ $.extend($.fn, {
+ menuFromElement : function(options, list, bar)
+ {
+ var createItems = function(ul)
+ {
+ var menuItems = [],
+ subItems,
+ menuItem,
+ lis, $li, i, subUL, submenu, target,
+ classNames = null;
+
+ lis = getAllChilds(ul, 'LI');
+ for ( i = 0; i < lis.length; i++ )
+ {
+ subItems = [];
+
+ if ( !lis[i].childNodes.length ) //empty item? add separator
+ {
+ menuItems.push(new $.MenuItem('', options));
+ continue;
+ }
+
+ if ( (subUL = getOneChild(lis[i], 'UL')) )
+ {
+ subItems = createItems(subUL);
+ //remove subUL from DOM
+ $(subUL).remove();
+ }
+
+ //select the target...get the elements inside the li
+ $li = $(lis[i]);
+ if ( $li[0].childNodes.length == 1 && $li[0].childNodes[0].nodeType == 3 )
+ target = $li[0].childNodes[0].nodeValue;
+ else
+ target = $li[0].childNodes;
+
+ if ( options && options.copyClassAttr )
+ classNames = $li.attr('class');
+
+ //create item
+ menuItem = new $.MenuItem({src: target, addClass: classNames}, options);
+ menuItems.push(menuItem);
+ //add submenu
+ if ( subItems.length )
+ new $.Menu(menuItem, subItems, options);
+
+ }
+ return menuItems;
+ };
+ return this.each(function()
+ {
+ var ul, m;
+ //get the list element
+ if ( list || (ul = getOneChild(this, 'UL')) )
+ {
+ //if a specific list element is used, clone it, as we probably need it more than once
+ ul = list ? $(list).clone(true)[0] : ul;
+ menuItems = createItems(ul);
+ if ( menuItems.length )
+ {
+ m = new $.Menu(this, menuItems, options);
+ if ( bar )
+ bar.addMenu(m);
+ }
+ $(ul).hide();
+ }
+ });
+ },
+ menuBarFromUL : function(options)
+ {
+ return this.each(function()
+ {
+ var i,
+ lis = getAllChilds(this, 'LI');
+ if ( lis.length )
+ {
+ bar = new $.MenuCollection();
+ for ( i = 0; i < lis.length; i++ )
+ $(lis[i]).menuFromElement(options, null, bar);
+ }
+ });
+ },
+ menu : function(options, items)
+ {
+ return this.each(function()
+ {
+ if ( items && $.isArray(items) )
+ new $.Menu(this, items, options);
+ else
+ {
+ if ( this.nodeName.toUpperCase() == 'UL' )
+ $(this).menuBarFromUL(options);
+ else
+ $(this).menuFromElement(options, items);
+ }
+ });
+ }
+ });
+
+ //faster than using jquery
+ var getOneChild = function(elem, name)
+ {
+ if ( !elem )
+ return null;
+
+ var n = elem.firstChild;
+ for ( ; n; n = n.nextSibling )
+ {
+ if ( n.nodeType == 1 && n.nodeName.toUpperCase() == name )
+ return n;
+ }
+ return null;
+ };
+ //faster than using jquery
+ var getAllChilds = function(elem, name)
+ {
+ if ( !elem )
+ return [];
+
+ var r = [],
+ n = elem.firstChild;
+ for ( ; n; n = n.nextSibling )
+ {
+ if ( n.nodeType == 1 && n.nodeName.toUpperCase() == name )
+ r[r.length] = n;
+ }
+ return r;
+ };
+
+})(jQuery);
+
+ }-*/;
+}
diff --git a/jsquery/src/main/java/gwtquery/jsplugins/menu/client/JsQueryMenu.java b/jsquery/src/main/java/gwtquery/jsplugins/menu/client/JsQueryMenu.java
new file mode 100644
index 00000000..438075d2
--- /dev/null
+++ b/jsquery/src/main/java/gwtquery/jsplugins/menu/client/JsQueryMenu.java
@@ -0,0 +1,12 @@
+package gwtquery.jsplugins.menu.client;
+
+import com.google.gwt.core.client.EntryPoint;
+import com.google.gwt.query.jsquery.client.JsQuery;
+
+public class JsQueryMenu implements EntryPoint {
+
+ public void onModuleLoad() {
+ JsMenu.loadPlugin();
+ JsQuery.onLoad();
+ }
+}
diff --git a/jsquery/src/main/java/gwtquery/jsplugins/menu/client/jsmenu.diff b/jsquery/src/main/java/gwtquery/jsplugins/menu/client/jsmenu.diff
new file mode 100644
index 00000000..a9ac0d20
--- /dev/null
+++ b/jsquery/src/main/java/gwtquery/jsplugins/menu/client/jsmenu.diff
@@ -0,0 +1,69 @@
+--- query.menu.js 2012-03-17 21:13:29.000000000 +0100
++++ JsMenu.java 2012-03-17 21:04:09.000000000 +0100
+@@ -114,7 +113,7 @@
+ this.openTimer = null;
+
+ this.init();
+- if ( items && items.constructor == Array )
++ if ( items && $.isArray(items) )
+ this.addItems(items);
+ }
+ });
+@@ -132,11 +129,15 @@
+ while ( t.parentNode && t.parentNode != $rootDiv[0] )
+ t = t.parentNode;
+
+- //is the found node one of the visible menu elements?
+- if ( !$(visibleMenus).filter(function(){ return this.$eDIV[0] == t }).length )
+- {
+- $.Menu.closeAll();
+- }
++ // FIXME: why do we need a timeout
++ setTimeout($.Menu.closeAll, 100);
++
++ // FIXME: JsQuery each doesn't work with arrays
++ // if ( !$(visibleMenus).filter(function(){ return this.$eDIV[0] == t }).length )
++ // {
++ // $.Menu.closeAll();
++ // }
++ return true;
+ },
+ checkKey : function(e)
+ {
+@@ -395,7 +394,7 @@
+ this.$eDIV.css({display:'none', visibility: ''}).show();
+
+ //IEs default width: auto is bad! ie6 and ie7 have are producing different errors.. (7 = 5px shadowbox + 2px border)
+- if ( $.browser.msie )
++ if ( 0) //$.browser.msie )
+ this.$eUL.css('width', parseInt($.browser.version) == 6 ? this.$eDIV.width() - 7 : this.$eUL.width());
+
+ if ( this.settings.onOpen )
+@@ -437,7 +438,7 @@
+ }
+
+ //y-pos
+- if ( $.fn.scrollTop )
++ if ($().scrollTop )
+ {
+ wst = $(window).scrollTop();
+ if ( wh < height ) //menu is bigger than the window
+@@ -476,7 +477,7 @@
+ }
+ }
+ //x-pos
+- if ( $.fn.scrollLeft )
++ if ($().scrollLeft )
+ {
+ wsl = $(window).scrollLeft();
+ if ( ww + wsl < posX + width )
+@@ -898,7 +897,7 @@
+ {
+ return this.each(function()
+ {
+- if ( items && items.constructor == Array )
++ if ( items && $.isArray(items) )
+ new $.Menu(this, items, options);
+ else
+ {
+
diff --git a/jsquery/src/main/java/gwtquery/jsplugins/menu/public/arrow_right.gif b/jsquery/src/main/java/gwtquery/jsplugins/menu/public/arrow_right.gif
new file mode 100644
index 00000000..610344d7
--- /dev/null
+++ b/jsquery/src/main/java/gwtquery/jsplugins/menu/public/arrow_right.gif
Binary files differ
diff --git a/jsquery/src/main/java/gwtquery/jsplugins/menu/public/arrowdown.png b/jsquery/src/main/java/gwtquery/jsplugins/menu/public/arrowdown.png
new file mode 100644
index 00000000..637c8d94
--- /dev/null
+++ b/jsquery/src/main/java/gwtquery/jsplugins/menu/public/arrowdown.png
Binary files differ
diff --git a/jsquery/src/main/java/gwtquery/jsplugins/menu/public/demo.html b/jsquery/src/main/java/gwtquery/jsplugins/menu/public/demo.html
new file mode 100644
index 00000000..1e55c326
--- /dev/null
+++ b/jsquery/src/main/java/gwtquery/jsplugins/menu/public/demo.html
@@ -0,0 +1,358 @@
+<?xml version="1.0" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>jQuery menu plugin demo page</title>
+<link rel="stylesheet" type="text/css" href="style.css" />
+<script src="jsmenu.nocache.js" ></script>
+<script type="text/javascript">
+
+// JsQuery will run this function after it is asynchronously loaded
+onJsQueryLoad = function(){
+ var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', copyClassAttr: true, onClick: function(e, menuItem){
+ alert('you clicked item "' + $(this).text() + '"');
+ }};
+ $('#menuone').menu(options);
+
+ var items = [ {src: 'test', url:'http://www.jquery.com'},
+ {src: ''}, // separator
+ {src: 'test2', subMenu: [ {src: 'sub 1'},
+ {src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'},
+ {src: 'sub 3'}]}];
+ $('#menutwo').menu(options, items);
+ $('#menuthree').menu(options);
+ $('#menufive>img').menu(options, '#menufivelist');
+
+ //creating a menu without items
+ var menu = new $.Menu('#menufour', null, options);
+ //adding items to the menu
+ menu.addItems([
+ new $.MenuItem({src: 'test', url:'http://www.jquery.com'}, options),
+ new $.MenuItem({src: ''}) // separator
+ ]);
+ var itemWithSubmenu = new $.MenuItem({src: 'test2'}, options);
+ //creating a menu with items (as child of itemWithSubmenu)
+ new $.Menu(itemWithSubmenu, [
+ new $.MenuItem({src: 'sub 1'}, options),
+ new $.MenuItem({src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'}, options),
+ new $.MenuItem({src: 'sub 3'}, options)
+ ], options);
+ //adding the submenu to the main menu
+ menu.addItem(itemWithSubmenu);
+}
+
+// If jsQuery or jQuery was already loaded we use the normal way
+if (window.$) {
+ $(document).ready(onJsQueryLoad);
+ onJsQueryLoad = null;
+}
+
+-->
+</script>
+</head>
+<body>
+<div id="header">
+<div class="title">jQuery Menu plugin demo</div>
+<div class="link"><a href="http://p.sohei.org/jquery-plugins/menu">plugin page</a></div>
+</div>
+
+<div class="exa">
+<h1>Available options:</h1>
+ options which affect the menu:
+ <ul>
+ <li><strong>showDelay</strong> - The number of milliseconds to wait before opening the menu after hovering over the target. Default value: 200</li>
+ <li><strong>hideDelay</strong> - The number of milliseconds to wait before closing the menu. Default value: 200</li>
+ <li><strong>hoverOpenDelay</strong> - The number of milliseconds to wait before opening the topmost-menu (root) (without clicking it!). Default value: 0 (disabled!)</li>
+ <li><strong>offsetTop</strong> - The number of pixels to offset the position of the topmost-menu (root) to the top. Default value: 0</li>
+ <li><strong>offsetLeft</strong> - The number of pixels to offset the position of the topmost-menu (root) to the left. Default value: 0</li>
+ <li><strong>minWidth</strong> - The minimal number of pixels of the menus width. Default value: 0</li></li>
+ <li><strong>onOpen</strong> - Callback function which is triggered when a menu is opened. Default value: null</li>
+ <li><strong>onClose</strong> - Callback function which is triggered when a menu is closed. Default value: null</li>
+ </ul>
+ options which affect the menuItems:
+ <ul>
+ <li><strong>onClick</strong> - Callback function which is triggered when a menuItem is clicked. The passed parameters are: the event object and the menuItem instance. Default value: null</li>
+ <li><strong>arrowSrc</strong> - URL of the image to be used as an arrow indicating a submenu. Default value: null (no arrow image!)</li>
+ </ul>
+ options which are only used, when building a menu from HTML markup:
+ <ul>
+ <li><strong>copyClassAttr</strong> - Copies the class attribute of the LI elements to the equivalent menuItems. Default value: false</li>
+ </ul>
+</div>
+
+<div class="exa">
+<h1>Example one:</h1>
+ <ul>
+ <li>create a menubar from an unordered list</li>
+ <li>used on an unordered list, the plugin takes its direct &lt;li&gt;-children, which will be the root items (File, Edit...),
+ and searches each for an &lt;ul&gt;-child, which holds the menu-items (New window, Save, Print...).</li>
+ <li>empty &lt;li&gt;-elements are used as seperators</li>
+ </ul>
+ <div class="codeheader">JavaScript code:</div>
+ <pre name="code" class="JScript">
+ var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', onClick: function(e, menuItem){
+ alert('you clicked item "' + $(this).text() + '"');
+ }};
+ $('#menuone').menu(options);
+ </pre>
+ <div class="codeheader">HTML markup:</div>
+ <pre name="code" class="html">
+ &lt;!-- note: the plugin doesn't need the classes, they're only used for styling! --&gt;
+ &lt;ul id="menuone" class="menu"&gt;
+ &lt;li class="menumain"&gt;File
+ &lt;ul&gt;&lt;li&gt;New&nbsp;window&lt;/li&gt;
+ &lt;li&gt;&lt;/li&gt; &lt;!-- separator --&gt;
+ &lt;li&gt;Save...&lt;/li&gt;
+ &lt;li&gt;Print...&lt;/li&gt;
+ &lt;li&gt;&lt;/li&gt; &lt;!-- separator --&gt;
+ &lt;li&gt;Exit&lt;/li&gt;
+ &lt;/ul&gt;
+ &lt;/li&gt;
+ &lt;li class="menumain"&gt;Edit
+ &lt;ul&gt;&lt;li&gt;Undo&lt;/li&gt;
+ &lt;li&gt;Redo&lt;/li&gt;
+ &lt;li&gt;&lt;/li&gt; &lt;!-- separator --&gt;
+ &lt;li&gt;Cut&lt;/li&gt;
+ &lt;li&gt;Copy&lt;/li&gt;
+ &lt;li&gt;Paste&lt;ul&gt;&lt;li&gt;All&lt;/li&gt;&lt;li&gt;Something&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;
+ &lt;li&gt;Delete&lt;/li&gt;
+ &lt;/ul&gt;
+ &lt;/li&gt;
+ &lt;!-- ...and even more... --&gt;
+ &lt;/ul&gt;
+ </pre>
+ <div class="resultheader">Result:</div>
+ <div class="result" style="padding:0;">
+ <div style="border-bottom: 1px solid #000;background:#eee;">
+ <ul id="menuone" class="menu">
+ <li class="menumain">File
+ <ul><li>New&nbsp;window</li>
+ <li></li>
+ <li>Save...</li>
+ <li>Print...</li>
+ <li></li>
+ <li>Exit</li>
+ </ul>
+ </li>
+ <li class="menumain">Edit
+ <ul><li>Undo</li>
+ <li>Redo</li>
+ <li></li>
+ <li>Cut</li>
+ <li>Copy</li>
+ <li>Paste<ul><li>All</li><li>Something</li></ul></li>
+ <li>Delete</li>
+ </ul>
+ </li>
+ <li class="menumain">Bookmarks
+ <ul><li>Bookmark&nbsp;manager</li>
+ <li></li>
+ <li>some&nbsp;bookmark</li>
+ <li>another&nbsp;bookmark</li>
+ <li></li>
+ <li>Imported&nbsp;bookmarks
+ <ul><li>bookmark&nbsp;one</li>
+ <li>bookmark&nbsp;two</li>
+ <li>bookmark&nbsp;three</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li class="menumain" style="float:right;">Help
+ <ul><li>Help&nbsp;index</li>
+ <li></li>
+ <li>About...
+ <ul>
+ <li>me</li>
+ <li>you</li>
+ <li>them</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <div style="clear:both;"></div>
+ </div>
+ <p>..some content..</p>
+ <p>..some content..</p>
+ <p>..some content..</p>
+ </div>
+</div>
+
+<div class="exa">
+<h1>Example two:</h1>
+ <ul>
+ <li>create a menu from javascript and open it when clicking on the element with the id &quot;menutwo&quot;</li>
+ <li>when a second parameter ist passed (items), the plugin will use it as menu content</li>
+ </ul>
+ <div class="codeheader">JavaScript code:</div>
+ <pre name="code" class="JScript">
+ var options = {minWidth: 120, arrowSrc: 'arrow_right.gif'};
+ var items = [ {src: 'test', url:'http://www.jquery.com'},
+ {src: ''}, /* separator */
+ {src: 'test2', subMenu: [ {src: 'sub 1'},
+ {src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'},
+ {src: 'sub 3'}]}];
+ $('#menutwo').menu(options, items);
+ </pre>
+ <div class="codeheader">HTML markup:</div>
+ <pre name="code" class="html">
+ &lt;p&gt;&lt;span id="menutwo"&gt;Menu Button&lt;/span&gt;&lt;/p&gt;
+ </pre>
+ <div class="resultheader">Result:</div>
+ <div class="result">
+ <p>..some content..</p>
+ <p><span id="menutwo">Menu Button</span></p>
+ <p>..some content..</p>
+ </div>
+</div>
+
+<div class="exa">
+<h1>Example three:</h1>
+ <ul>
+ <li>same as example two, but without passing the items as parameter to the plugin</li>
+ <li>the plugin looks inside the elment for an unordered list, which holds the menu content</li>
+ </ul>
+ <div class="codeheader">JavaScript code:</div>
+ <pre name="code" class="JScript">
+ var options = {minWidth: 120, arrowSrc: 'arrow_right.gif'};
+ $('#menuthree').menu(options);
+ </pre>
+ <div class="codeheader">HTML markup:</div>
+ <pre name="code" class="html">
+ &lt;div id="menuthree"&gt;Menu Button
+ &lt;ul&gt;
+ &lt;li&gt;&lt;a href="http://www.jquery.com"&gt;test&lt;/a&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;/li&gt; &lt;!-- separator --&gt;
+ &lt;li&gt;test2
+ &lt;ul&gt;
+ &lt;li&gt;sub 1&lt;/li&gt;
+ &lt;li&gt;&lt;a href="http://p.sohei.org" target="_blank"&gt;sub 2&lt;/a&gt;&lt;/li&gt;
+ &lt;li&gt;sub 3&lt;/li&gt;
+ &lt;/ul&gt;
+ &lt;/li&gt;
+ &lt;/ul&gt;
+ &lt;/div&gt;
+ </pre>
+ <div class="resultheader">Result:</div>
+ <div class="result">
+ <p>..some content..</p>
+ <div id="menuthree">Menu Button
+ <ul>
+ <li><a href="http://www.jquery.com">test</a></li>
+ <li></li>
+ <li>test2
+ <ul>
+ <li>sub 1</li>
+ <li><a href="http://p.sohei.org" target="_blank">sub 2</a></li>
+ <li>sub 3</li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ <p>..some content..</p>
+ </div>
+</div>
+
+<div class="exa">
+<h1>Example four:</h1>
+ <ul>
+ <li>same (result) as example two, but this time creating the menu by using the $.Menu and $.MenuItem classes and its methods</li>
+ </ul>
+ <div class="codeheader">JavaScript code:</div>
+ <pre name="code" class="JScript">
+ var options = {minWidth: 120, arrowSrc: 'arrow_right.gif'};
+
+ //creating a menu without items
+ var menu = new $.Menu('#menufour', null, options);
+
+ //adding items to the menu
+ menu.addItems([
+ new $.MenuItem({src: 'test', url:'http://www.jquery.com'}, options),
+ new $.MenuItem({src: ''}) /* separator */
+ ]);
+ var itemWithSubmenu = new $.MenuItem({src: 'test2'}, options);
+
+ //creating a menu with items (as child of itemWithSubmenu)
+ new $.Menu(itemWithSubmenu, [
+ new $.MenuItem({src: 'sub 1'}, options),
+ new $.MenuItem({src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'}, options),
+ new $.MenuItem({src: 'sub 3'}, options)
+ ], options);
+
+ //adding the submenu to the main menu
+ menu.addItem(itemWithSubmenu);
+ </pre>
+ <div class="codeheader">HTML markup:</div>
+ <pre name="code" class="html">
+ &lt;p&gt;&lt;span id="menufour"&gt;Menu Button&lt;/span&gt;&lt;/p&gt;
+ </pre>
+ <div class="resultheader">Result:</div>
+ <div class="result">
+ <p>..some content..</p>
+ <p><span id="menufour">Menu Button</span></p>
+ <p>..some content..</p>
+ </div>
+</div>
+
+<div class="exa">
+<h1>Example five:</h1>
+ <ul>
+ <li>related to example two, the menu items can also be passed as a jquery selector (selecting an &lt;ul&gt;-element!)</li>
+ </ul>
+ <div class="codeheader">JavaScript code:</div>
+ <pre name="code" class="JScript">
+ var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', copyClassAttr: true};
+ $('#menufive>img').menu(options, '#menufivelist');
+ </pre>
+ <div class="codeheader">HTML markup:</div>
+ <pre name="code" class="html">
+ &lt;p id="menufive"&gt;Menu Button &lt;img src="arrowdown.png" /&gt; - Menu Button &lt;img src="arrowdown.png" /&gt; - Menu Button &lt;img src="arrowdown.png" /&gt;&lt;/p&gt;
+
+ &lt;ul id="menufivelist" style="display:none;"&gt;
+ &lt;li&gt;one&lt;/li&gt;
+ &lt;li class="red"&gt;two&lt;/li&gt;
+ &lt;li class="blue"&gt;three&lt;/li&gt;
+ &lt;li&gt;four
+ &lt;ul&gt;
+ &lt;li&gt;four.1
+ &lt;ul&gt;
+ &lt;li&gt;four.1.1&lt;/li&gt;
+ &lt;li&gt;four.1.2&lt;/li&gt;
+ &lt;li&gt;four.1.3&lt;/li&gt;
+ &lt;/ul&gt;
+ &lt;/li&gt;
+ &lt;li&gt;four.2&lt;/li&gt;
+ &lt;li&gt;four.3&lt;/li&gt;
+ &lt;/ul&gt;
+ &lt;/li&gt;
+ &lt;/ul&gt;
+ </pre>
+ <div class="resultheader">Result:</div>
+ <div class="result">
+ <p>..some content..</p>
+ <p id="menufive">Menu Button <img src="arrowdown.png" /> - Menu Button <img src="arrowdown.png" /> - Menu Button <img src="arrowdown.png" /></p>
+ <p>..some content..</p>
+ </div>
+ <ul id="menufivelist" style="display:none;">
+ <li>one</li>
+ <li class="red">two</li>
+ <li class="blue">three</li>
+ <li>four
+ <ul>
+ <li>four.1
+ <ul>
+ <li>four.1.1</li>
+ <li>four.1.2</li>
+ <li>four.1.3</li>
+ </ul>
+ </li>
+ <li>four.2</li>
+ <li>four.3</li>
+ </ul>
+ </li>
+ </ul>
+</div>
+
+</body>
+</html>
diff --git a/jsquery/src/main/java/gwtquery/jsplugins/menu/public/myshadow.png b/jsquery/src/main/java/gwtquery/jsplugins/menu/public/myshadow.png
new file mode 100644
index 00000000..fb6c71b5
--- /dev/null
+++ b/jsquery/src/main/java/gwtquery/jsplugins/menu/public/myshadow.png
Binary files differ
diff --git a/jsquery/src/main/java/gwtquery/jsplugins/menu/public/style.css b/jsquery/src/main/java/gwtquery/jsplugins/menu/public/style.css
new file mode 100644
index 00000000..965233bc
--- /dev/null
+++ b/jsquery/src/main/java/gwtquery/jsplugins/menu/public/style.css
@@ -0,0 +1,358 @@
+body
+{
+ background-color: #888;
+ font-family: verdana, arial;
+ margin: 10px;
+ font-size: 0.8em;
+}
+h1
+{
+ font-size: 1.3em;
+}
+table
+{
+ margin: 10px 50px;
+ width: 300px;
+ border: 1px solid gray;
+ border-collapse: collapse;
+ border-spacing: 0;
+ float: left;
+}
+thead
+{
+ background: bisque;
+}
+tfoot
+{
+ background: khaki;
+ text-align: center;
+}
+td, th
+{
+ border: 1px solid gray;
+}
+pre
+{
+ background-color: LemonChiffon;
+ border: 1px solid gray;
+}
+#header {
+ background-color: #fffff0;
+ border: 1px solid #000;
+ margin-bottom: 20px;
+ padding: 10px;
+}
+div.title
+{
+ text-align: center;
+ font-size: 1.5em;
+ font-weight: bold;
+}
+div.link
+{
+ text-align: center;
+}
+div.clear
+{
+ clear: both;
+}
+div.exa
+{
+ background-color: #fffff0;
+ border: 1px solid #000;
+ padding: 0 15px;
+ margin-bottom: 20px;
+}
+div.codeheader {
+ margin-bottom: -15px;
+}
+div.resultheader{
+ margin-bottom: 5px;
+}
+div.result{
+ background: #fff;
+ border: 1px solid #000;
+ margin-bottom: 10px;
+ padding: 0 10px;
+}
+html>body div.outerbox
+{
+ padding: 0 5px 5px 0;
+}
+html>body div.outerbox div.shadowbox1
+{
+ position: absolute;
+ right: 0;
+ bottom: 5px;
+ width: 5px;
+ height: 100%;
+ background: url(myshadow.png) no-repeat right top;
+}
+html>body div.outerbox div.shadowbox2
+{
+ position: absolute;
+ bottom: 0;
+ right: 5px;
+ height: 5px;
+ width: 100%;
+ background: url(myshadow.png) left bottom;
+}
+html>body div.outerbox div.shadowbox3
+{
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ height: 5px;
+ width: 5px;
+ background: url(myshadow.png) no-repeat right bottom;
+}
+html>body .innerbox
+{
+ margin: 0;
+ display: inherit;
+}
+
+#root-menu-div ul {
+ border: 1px solid #000;
+}
+#root-menu-div li{
+ white-space:nowrap;
+}
+* html #root-menu-div li{
+ height: 1.5em; /* fixing ie6 problem */
+}
+ul.menu,
+#root-menu-div ul {
+ background-color: #fff;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+li.menu-separator.active{
+ background-color: transparent;
+}
+li.active {
+ background-color: #888;
+}
+.activetarget{
+ background-color: white;
+}
+
+* html div.menu-item {
+ display: inline; /* fixes problem in ie6 */
+}
+
+li.menumain {
+ float: left;
+ padding: 0 10px;
+}
+div.menu-item {
+ padding: 1px 10px 1px 4px;
+}
+img.menu-item-arrow{
+ position: absolute;
+ right: 4px;
+ top: 8px;
+}
+li.menu-separator{
+ border-bottom: 1px solid #000;
+ font-size: 0; /* for ie */
+ height: 0;
+ line-height: 0; /* for ie */
+ margin: 2px 0;
+}
+li.red {
+ color: red;
+}
+li.blue {
+ color: blue;
+}
+
+
+
+/* syntaxhighlight stuff */
+.dp-highlighter
+{
+ font-family: "Consolas", "Courier New", Courier, mono, serif;
+ font-size: 12px;
+ background-color: #E7E5DC;
+ width: 99%;
+ overflow: auto;
+ margin: 18px 0 18px 0 !important;
+ padding-top: 1px; /* adds a little border on top when controls are hidden */
+}
+
+/* clear styles */
+.dp-highlighter ol,
+.dp-highlighter ol li,
+.dp-highlighter ol li span
+{
+ margin: 0;
+ padding: 0;
+ border: none;
+}
+
+.dp-highlighter a,
+.dp-highlighter a:hover
+{
+ background: none;
+ border: none;
+ padding: 0;
+ margin: 0;
+}
+
+.dp-highlighter .bar
+{
+ padding-left: 45px;
+}
+
+.dp-highlighter.collapsed .bar,
+.dp-highlighter.nogutter .bar
+{
+ padding-left: 0px;
+}
+
+.dp-highlighter ol
+{
+ list-style: decimal; /* for ie */
+ background-color: #fff;
+ margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
+ padding: 0px;
+ color: #5C5C5C;
+}
+
+.dp-highlighter.nogutter ol,
+.dp-highlighter.nogutter ol li
+{
+ list-style: none !important;
+ margin-left: 0px !important;
+}
+
+.dp-highlighter ol li,
+.dp-highlighter .columns div
+{
+ list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
+ list-style-position: outside !important;
+ border-left: 3px solid #6CE26C;
+ background-color: #F8F8F8;
+ color: #5C5C5C;
+ padding: 0 3px 0 10px !important;
+ margin: 0 !important;
+ line-height: 14px;
+}
+
+.dp-highlighter.nogutter ol li,
+.dp-highlighter.nogutter .columns div
+{
+ border: 0;
+}
+
+.dp-highlighter .columns
+{
+ background-color: #F8F8F8;
+ color: gray;
+ overflow: hidden;
+ width: 100%;
+}
+
+.dp-highlighter .columns div
+{
+ padding-bottom: 5px;
+}
+
+.dp-highlighter ol li.alt
+{
+ background-color: #FFF;
+ color: inherit;
+}
+
+.dp-highlighter ol li span
+{
+ color: black;
+ background-color: inherit;
+}
+
+/* Adjust some properties when collapsed */
+
+.dp-highlighter.collapsed ol
+{
+ margin: 0px;
+}
+
+.dp-highlighter.collapsed ol li
+{
+ display: none;
+}
+
+/* Additional modifications when in print-view */
+
+.dp-highlighter.printing
+{
+ border: none;
+}
+
+.dp-highlighter.printing .tools
+{
+ display: none !important;
+}
+
+.dp-highlighter.printing li
+{
+ display: list-item !important;
+}
+
+/* Styles for the tools */
+
+.dp-highlighter .tools
+{
+ padding: 3px 8px 3px 10px;
+ font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
+ color: silver;
+ background-color: #f8f8f8;
+ padding-bottom: 10px;
+ border-left: 3px solid #6CE26C;
+}
+
+.dp-highlighter.nogutter .tools
+{
+ border-left: 0;
+}
+
+.dp-highlighter.collapsed .tools
+{
+ border-bottom: 0;
+}
+
+.dp-highlighter .tools a
+{
+ font-size: 9px;
+ color: #a0a0a0;
+ background-color: inherit;
+ text-decoration: none;
+ margin-right: 10px;
+}
+
+.dp-highlighter .tools a:hover
+{
+ color: red;
+ background-color: inherit;
+ text-decoration: underline;
+}
+
+/* About dialog styles */
+
+.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
+.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
+.dp-about td { padding: 10px; vertical-align: top; }
+.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
+.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
+.dp-about .para { margin: 0 0 4px 0; }
+.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
+.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
+
+/* Language specific styles */
+
+.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
+.dp-highlighter .string { color: blue; background-color: inherit; }
+.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
+.dp-highlighter .preprocessor { color: gray; background-color: inherit; }