diff options
Diffstat (limited to 'jsquery/src/main/java/gwtquery/jsplugins/menu')
-rw-r--r-- | jsquery/src/main/java/gwtquery/jsplugins/menu/JsQueryMenu.gwt.xml | 7 | ||||
-rw-r--r-- | jsquery/src/main/java/gwtquery/jsplugins/menu/client/JsMenu.java | 946 | ||||
-rw-r--r-- | jsquery/src/main/java/gwtquery/jsplugins/menu/client/JsQueryMenu.java | 12 | ||||
-rw-r--r-- | jsquery/src/main/java/gwtquery/jsplugins/menu/client/jsmenu.diff | 69 | ||||
-rw-r--r-- | jsquery/src/main/java/gwtquery/jsplugins/menu/public/arrow_right.gif | bin | 0 -> 55 bytes | |||
-rw-r--r-- | jsquery/src/main/java/gwtquery/jsplugins/menu/public/arrowdown.png | bin | 0 -> 661 bytes | |||
-rw-r--r-- | jsquery/src/main/java/gwtquery/jsplugins/menu/public/demo.html | 358 | ||||
-rw-r--r-- | jsquery/src/main/java/gwtquery/jsplugins/menu/public/myshadow.png | bin | 0 -> 5741 bytes | |||
-rw-r--r-- | jsquery/src/main/java/gwtquery/jsplugins/menu/public/style.css | 358 |
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. ©) + 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 Binary files differnew file mode 100644 index 00000000..610344d7 --- /dev/null +++ b/jsquery/src/main/java/gwtquery/jsplugins/menu/public/arrow_right.gif diff --git a/jsquery/src/main/java/gwtquery/jsplugins/menu/public/arrowdown.png b/jsquery/src/main/java/gwtquery/jsplugins/menu/public/arrowdown.png Binary files differnew file mode 100644 index 00000000..637c8d94 --- /dev/null +++ b/jsquery/src/main/java/gwtquery/jsplugins/menu/public/arrowdown.png 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 <li>-children, which will be the root items (File, Edit...), + and searches each for an <ul>-child, which holds the menu-items (New window, Save, Print...).</li> + <li>empty <li>-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"> + <!-- note: the plugin doesn't need the classes, they're only used for styling! --> + <ul id="menuone" class="menu"> + <li class="menumain">File + <ul><li>New window</li> + <li></li> <!-- separator --> + <li>Save...</li> + <li>Print...</li> + <li></li> <!-- separator --> + <li>Exit</li> + </ul> + </li> + <li class="menumain">Edit + <ul><li>Undo</li> + <li>Redo</li> + <li></li> <!-- separator --> + <li>Cut</li> + <li>Copy</li> + <li>Paste<ul><li>All</li><li>Something</li></ul></li> + <li>Delete</li> + </ul> + </li> + <!-- ...and even more... --> + </ul> + </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 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 manager</li> + <li></li> + <li>some bookmark</li> + <li>another bookmark</li> + <li></li> + <li>Imported bookmarks + <ul><li>bookmark one</li> + <li>bookmark two</li> + <li>bookmark three</li> + </ul> + </li> + </ul> + </li> + <li class="menumain" style="float:right;">Help + <ul><li>Help 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 "menutwo"</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"> + <p><span id="menutwo">Menu Button</span></p> + </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"> + <div id="menuthree">Menu Button + <ul> + <li><a href="http://www.jquery.com">test</a></li> + <li></li> <!-- separator --> + <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> + </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"> + <p><span id="menufour">Menu Button</span></p> + </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 <ul>-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"> + <p id="menufive">Menu Button <img src="arrowdown.png" /> - Menu Button <img src="arrowdown.png" /> - Menu Button <img src="arrowdown.png" /></p> + + <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> + </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 Binary files differnew file mode 100644 index 00000000..fb6c71b5 --- /dev/null +++ b/jsquery/src/main/java/gwtquery/jsplugins/menu/public/myshadow.png 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; }
|