From 68ddaa54aaad6429ad49b660f4726c3f68bb2cde Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Mon, 14 Jan 2008 12:58:59 -0600 Subject: [PATCH] Overhaul to Koha's js-menu systems. New language-picker in the footer required more flexibility than jquery's clickmenu plugin offered, so both the language picker and the main navigation menu now use YUI's menu plugin. The necessary dependencies have been added, and ClickMenu-related files removed. Signed-off-by: Chris Cormack Signed-off-by: Joshua Ferraro --- .../prog/en/css/staff-global.css | 292 ++++++++-------- .../prog/en/includes/doc-head-close.inc | 29 +- .../intranet-tmpl/prog/en/includes/header.inc | 4 +- .../prog/en/includes/intranet-bottom.inc | 9 +- .../intranet-tmpl/prog/en/js/staff-global.js | 62 +++- .../prog/en/lib/jquery/plugins/clickmenu.css | 115 ------- .../jquery/plugins/jquery.clickmenu.pack.js | 1 - .../prog/en/lib/yui/container.css | 318 ++++++++++++++++++ .../lib/yui/container/container_core-min.js | 14 +- .../prog/en/modules/intranet-main.tmpl | 2 +- .../intranet-tmpl/prog/img/more-up-arrow.gif | Bin 0 -> 155 bytes 11 files changed, 554 insertions(+), 292 deletions(-) delete mode 100644 koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/clickmenu.css delete mode 100644 koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/jquery.clickmenu.pack.js create mode 100644 koha-tmpl/intranet-tmpl/prog/en/lib/yui/container.css create mode 100644 koha-tmpl/intranet-tmpl/prog/img/more-up-arrow.gif diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css index 8c4ec9896a..b3bd2be8ac 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css +++ b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css @@ -10,6 +10,7 @@ a:hover { body { text-align : left; + padding:0 0 2em 0; } br.clear { @@ -55,6 +56,9 @@ h1,h2,h3,h4,h5,h6 { margin : .3em 0; } +html { +} + p { margin: .5em 0 .5em 0; } @@ -133,6 +137,7 @@ ol li { #header { background-color : #F3F3F3; border-bottom : 1px solid #E8E8E8; + line-height : 2em; } #header:after { /* clearing without presentational markup, IE gets extra treatment */ @@ -160,11 +165,6 @@ ol li { text-decoration : none; } -#toplevelnav { - float : left; - line-height : 2em; -} - #submenu { margin : 0 0 .5em 0; padding : 0; @@ -322,114 +322,6 @@ div#reserves,div#checkouts { font-weight : bold; } -/* ClickMenu Overrides */ - -ul#toplevelmenu li { - display : inline; - list-style: none; -} - -ul#toplevelmenu li ul { -} - -div.cmDiv -{ - border: 0; - background-color: #F3F3F3; -} - -.clickMenu li.more a { - background-image: url("../../img/more-arrow.gif"); - background-position: right; - background-repeat: no-repeat; - padding-right : 13px; -} - -.clickMenu li.more li a { - background-image : none; - padding-right : 0; - white-space : nowrap; -} - -.clickMenu -{ - margin: 0; - padding: 0; - cursor: default; -} -.clickMenu, .clickMenu ul -{ - list-style: none; -} -.clickMenu ul -{ - margin: 0; - padding: 2px; - border: 0; - background-color: #F3F3F3; - min-width: 100px; /* ie doesnt know this :/ */ - //float: left;/*ie again*/ - //width: 100%;/*and again*/ -} -.clickMenu div.outerbox -{ - display: none; - min-width: 106px; /* firefox produces animation-flickering when the box is bigger than this :/ */ -} -.clickMenu div.inner -{ - //top: 20px; /* for ie */ - left: 0; - margin: 0; -} -.clickMenu div.inner div.outerbox -{ - margin: 0; - left: 98px; - //left: 90px; /* for ie */ - top: -3px; -} -.clickMenu li -{ - list-style-type : none; - position: relative; - padding: 0 20px 0 2px; - /*white-space: nowrap; does not really work in ie */ -} -.clickMenu li.main -{ - float: left; - padding: 0 10px; - background-color: #F3F3F3; - //height: 20px; /* for ie */ -} -.clickMenu li.main li -{ - z-index: 2; - min-width: 78px; -} -.clickMenu li.hover -{ - z-index: 1 !important; /* the hover z-index has to be below the normal one the hovering items may be drawn over a submenu */ - background-color : transparent; -} -.clickMenu img.liArrow -{ - position: absolute; - right: 5px; - top: 0.41em; -} -.clickMenu ul a { - cursor: default; -} - -ul.innerBox a { - cursor : pointer; -} - -ul.innerBox { - border: 1px solid #E8E8E8; -} div.yui-b h5 { font-size : 100%; @@ -1134,30 +1026,6 @@ div.message input.approve { text-decoration : underline; } - #changelanguage { - background-color : #F3F3F3; - border-top : 1px solid #E8E8E8; - font-size : 93%; - margin-top : 2em; - padding : .3em .5em .5em .5em; - } - - #changelanguage ul { - margin : 0; - padding : 0; - } - - #changelanguage li { - border-left : 1px solid #CCC; - display : inline; - list-style : none; - padding : 0 .5em; - } - - #changelanguage li:first-child { - border-left : 0; - } - .required { color : #C00; } @@ -1414,4 +1282,152 @@ input[type=submit]:active, input[type=button]:active, input.submit:active { .searchhighlightblob { font-size:75%; font-style : italic; -} \ No newline at end of file +} + +/* Define a new style for each menu */ + +.yui-skin-sam .yuimenu { + line-height: 2;/* ~24px */ + *line-height: 1.9; /* For IE */ +} + +a.yuimenuitemlabel { +} + +.yui-skin-sam .yuimenu .bd { + border-width: 1px; + border-color: #ddd #666 #666 #ddd; + border-style: solid; + background-color: #fff; +} + +.yui-skin-sam #sublangs li.yuimenuitem { + /* + For IE 7 Quirks and IE 6 Strict Mode and Quirks Mode: + Used to collapse superfluous white space between
  • + elements that is triggered by the "display" property of the + elements being set to "block." + */ + _border-bottom: solid 1px #ccc; +} + + +/* Define a new style for a MenuItem instance's "selected" state. */ +.yui-skin-sam #sublangs .yuimenuitem-selected { + background-color: #82AAE1; +} +.yui-skin-sam #sublangs .yuimenuitemlabel-selected { + color: #fff; +} + +#toplevelnav { + float : left; + margin-left : .5em; +} + +ul#toplevelmenu { + padding : 0; +} + +ul#toplevelmenu li { + display: inline; + padding : 0 .6em; +} + +ul#toplevelmenu li.more a { + background-image:url(../../img/more-arrow.gif); + background-position:right center; + background-repeat:no-repeat; + padding-right:13px; +} + +ul#toplevelmenu li.more ul li a { + background-image : none; + padding-right : 20px; +} + +ul#toplevelmenu li.more ul li a.yuimenuitemlabel { + padding: .2em 20px .2em 20px; +} + +ul#menu li a, ul#toplevelmenu li a { + text-decoration : none; +} +ul#menu li ul li, ul#toplevelmenu li ul li { + display :block; + padding :0; +} +ul#menu li ul li a, ul#toplevelmenu li ul li a { + text-decoration : none; +} + +ul#i18nMenu { + margin : 0; + padding : .2em 0; + } + +ul#i18nMenu li { + border-left : 1px solid #CCC; + display : inline; + list-style : none; + padding : 0 10px; + } + +ul#i18nMenu li:first-child { + border-left : 0; + } + +ul#i18nMenu li ul li { + border : 0; + display : block; + padding : 0; + } + + +ul#i18nMenu li.more a { + background-image:url(../../img/more-up-arrow.gif); + background-position:right center; + background-repeat:no-repeat; + padding-right:13px; +} + +ul#i18nMenu li.more ul li a { + background-image : none; + padding-right : 20px; +} + + div#changelanguage{ + background-color: #fff; + border-top: 1px solid #CCC; + position:absolute; + bottom:0; + left:0; + width:100%; + height: 2em; + } + + @media screen{ + body>div#changelanguage { + position: fixed; + } + } + + * html body{ + overflow:hidden; + } + + * html div#doc1{ + height:100%; + overflow:auto; + } + + * html div#doc2{ + height:100%; + overflow:auto; + } + + * html div#doc3{ + height:100%; + overflow:auto; + } + \ No newline at end of file diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc index bdefd0c376..f086752a49 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc @@ -1,6 +1,5 @@ /includes/favicon.ico" type="image/x-icon" /> -/lib/jquery/plugins/clickmenu.css" /> /lib/jquery/plugins/jquery.tabs.css" /> " /> @@ -11,18 +10,10 @@ /lib/jquery/plugins/jquery.tabs-ie.css" type="text/css" media="projection, screen"> - - -/" /> - - +/" /> - -/css/modules/" /> - - -/css/pages/" /> - +/css/modules/" /> +/css/pages/" /> @@ -30,12 +21,9 @@ - - - - + @@ -59,20 +47,17 @@ /css/" /> - /lib/yui/button.css" /> - /lib/yui/menu.css" /> - +/lib/yui/container.css" /> - - - + /lib/yui/autocomplete.css" /> + \ No newline at end of file diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc index bbb39bcea7..fc978f9e4b 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc @@ -6,7 +6,7 @@
  • Patrons
  • Catalogue
    • -
  • More
    • diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/intranet-bottom.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/intranet-bottom.inc index d02d295d1e..f7402fb32f 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/intranet-bottom.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/intranet-bottom.inc @@ -2,21 +2,22 @@
    -
    diff --git a/koha-tmpl/intranet-tmpl/prog/en/js/staff-global.js b/koha-tmpl/intranet-tmpl/prog/en/js/staff-global.js index 45e6c7ed38..a754500eea 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/js/staff-global.js +++ b/koha-tmpl/intranet-tmpl/prog/en/js/staff-global.js @@ -4,8 +4,6 @@ function _(s) { return s } // dummy function for gettext $(document).ready(function() { $(".focus").focus(); - $('#toplevelmenu').clickMenu(); - $('#i18nMenu').clickMenu(); $('#header_search').tabs({ onShow: function() { $('#header_search').find('div:visible').find('input').eq(0).focus(); @@ -30,3 +28,63 @@ function verify_patron_images() { } } } + + YAHOO.util.Event.onContentReady("header", function () { + var oMoremenu = new YAHOO.widget.Menu("moremenu", { zindex: 2 }); + + function positionoMoremenu() { + oMoremenu.align("tl", "bl"); + } + + oMoremenu.subscribe("beforeShow", function () { + if (this.getRoot() == this) { + positionoMoremenu(); + } + }); + + oMoremenu.render(); + + oMoremenu.cfg.setProperty("context", ["showmore", "tl", "bl"]); + + function onShowMoreClick(p_oEvent) { + // Position and display the menu + positionoMoremenu(); + oMoremenu.show(); + // Stop propagation and prevent the default "click" behavior + YAHOO.util.Event.stopEvent(p_oEvent); + } + + YAHOO.util.Event.addListener("showmore", "click", onShowMoreClick); + + YAHOO.widget.Overlay.windowResizeEvent.subscribe(positionoMoremenu); + }); + +YAHOO.util.Event.onContentReady("changelanguage", function () { + var oMenu = new YAHOO.widget.Menu("sublangs", { zindex: 2 }); + + function positionoMenu() { + oMenu.align("bl", "tl"); + } + + oMenu.subscribe("beforeShow", function () { + if (this.getRoot() == this) { + positionoMenu(); + } + }); + + oMenu.render(); + + oMenu.cfg.setProperty("context", ["showlang", "bl", "tl"]); + + function onYahooClick(p_oEvent) { + // Position and display the menu + positionoMenu(); + oMenu.show(); + // Stop propagation and prevent the default "click" behavior + YAHOO.util.Event.stopEvent(p_oEvent); + } + + YAHOO.util.Event.addListener("showlang", "click", onYahooClick); + + YAHOO.widget.Overlay.windowResizeEvent.subscribe(positionoMenu); + }); \ No newline at end of file diff --git a/koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/clickmenu.css b/koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/clickmenu.css deleted file mode 100644 index c062794704..0000000000 --- a/koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/clickmenu.css +++ /dev/null @@ -1,115 +0,0 @@ -div.cmDiv -{ - border: 1px solid black; - background-color: #eee; -} -.clickMenu -{ - margin: 0; - padding: 0; - cursor: default; -} -.clickMenu, .clickMenu ul -{ - list-style: none; -} -.clickMenu ul -{ - margin: 0; - padding: 2px; - border: 1px solid black; - background-color: #eee; - min-width: 100px; /* ie doesnt know this :/ */ - //float: left;/*ie again*/ - //width: 100%;/*and again*/ -} -.clickMenu div.outerbox -{ - display: none; - min-width: 106px; /* firefox produces animation-flickering when the box is bigger than this :/ */ -} -.clickMenu div.inner -{ - //top: 20px; /* for ie */ - left: 0; - margin: 0; -} -.clickMenu div.inner div.outerbox -{ - margin: 0; - left: 98px; - //left: 90px; /* for ie */ - top: -3px; -} -.clickMenu li -{ - position: relative; - padding: 0 20px 0 2px; - /*white-space: nowrap; does not really work in ie */ -} -.clickMenu li.main -{ - float: left; - padding: 0 10px; - background-color: #eee; - //height: 20px; /* for ie */ -} -.clickMenu li.main li -{ - z-index: 2; - min-width: 78px; -} -.clickMenu li.hover -{ - z-index: 1 !important; /* the hover z-index has to be below the normal one the hovering items may be drawn over a submenu */ - background-color: #aaa; -} -.clickMenu img.liArrow -{ - position: absolute; - right: 5px; - top: 0.41em; -} -.clickMenu a -{ - text-decoration: none; - color: black; - cursor: default; -} -/* thats for the shadowbox */ -html>body div.outerbox -{ - padding: 0 5px 5px 0; -} -html>body div.shadowbox1 -{ - position: absolute; - right: 0; - bottom: 5px; - width: 5px; - height: 100%; - background: url(myshadow.png) no-repeat right top; -} -html>body div.shadowbox2 -{ - position: absolute; - bottom: 0; - right: 5px; - height: 5px; - width: 100%; - background: url(myshadow.png) left bottom; -} -html>body 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; -} \ No newline at end of file diff --git a/koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/jquery.clickmenu.pack.js b/koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/jquery.clickmenu.pack.js deleted file mode 100644 index 545d6b3dfe..0000000000 --- a/koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/jquery.clickmenu.pack.js +++ /dev/null @@ -1 +0,0 @@ -eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(8($){7 E={1e:8(){$(5).1D(\'>a\').X(8(){3(5.1L){1K.24=5.1L}})},1k:\'\',1x:2u,1t:10};$.1f.L=8(f){7 g=K;7 h=(($.13.1n)?4:2);7 k=$.1y({},E,f);7 l=8(a,b){3(a.F&&!a.J){Y(a.F)}R 3(a.F){9}3(a.J){a.F=1M(8(){$(A(z(a,\'U\'),\'W\')).S(\'1d\',s).S(\'1p\',u).S(\'1b\',k.1e);$(a).1H();a.J=K;a.F=N},b)}};7 m=8(b,c){3(b.F){Y(b.F)}3(!b.J){b.F=1M(8(){3(!C(b.H,\'I\')){9}$(A(z(b,\'U\'),\'W\')).1d(s).1p(u).1b(k.1e);3(!C(b.H,\'1E\')){$(b).17(\'1C\',b.H.1o-h)}b.J=V;$(b).20();3($.13.1n){7 a=$(z(b,\'U\')).18();3(a<1w){a=1w}$(b).17(\'18\',a)}b.F=N},c)}};7 o=8(e){7 p=(e.2o=="1d"?e.2m:e.1N)||e.1P;2h(p&&p!=5){2f{p=p.H}2c(e){p=5}}3(p==5){9 K}9 V};7 q=8(e){7 a=A(5.H,\'W\');7 b=1u 1v("(^|\\\\s)I(\\\\s|$)");P(7 i=0;i1m 1m\').S(\'1d\',s).S(\'1p\',u).S(\'1b\',k.1e);$(1J).S(\'1F\',x);g=K};7 z=8(a,b){3(!a){9 N}7 n=a.1c;P(;n;n=n.19){3(n.15==1&&n.11.14()==b){9 n}}9 N};7 A=8(a,b){3(!a){9[]}7 r=[];7 n=a.1c;P(;n;n=n.19){3(n.15==1&&n.11.14()==b){r[r.1s]=n}}9 r};7 B=8(a,b,c){7 d=a.H;7 e=1u 1v("(^|\\\\s)"+c+"(\\\\s|$)");P(;d;d=d.H){3(d.15==1&&d.11.14()==b&&e.1r(d.1q)){9 d}}9 N};7 C=8(a,b){7 c=1u 1v("(^|\\\\s)"+b+"(\\\\s|$)");3(c.1r(a.1q)){9 V}9 K};7 D=8(a,b){7 n=a.1c;P(;n;n=n.19){3(n==b){9 V}}9 K};9 5.X(8(){3(1K.1g&&1g.1l&&!1g.1l.1a){1g.1l.1a=8(a){9!!(5.23(a)&16)}}3(!C(5,\'L\')){$(5).O(\'L\')}$(\'1i\',5).1B();3($.13.1n&&(!$.13.1V||22($.13.1V)<=6)){3($.1f.1A){$(\'G.12\',5).1A()}R{$(\'G.12\',5).21(\'<1Z 1z="1Y:1X;1h:1j;2t:0;1C:0;z-2r:-1;2q:2p();\'+\'18:1W(5.H.1o);1U:1W(5.H.1T)"/>\')}}$(5).1G(\'2n\',8(){y()});7 b=A(5,\'W\');P(7 j=0;jG\').O(\'1R\');3(k.1k){$(\'G.1R G.12\',5).1Q(\'<2l 2i="\'+k.1k+\'" Z="2g" />\')}$(5).1O(\'\').2d(\'\')})};$.1f.L.29=8(o){$.1y(E,o)}})(1S);(8($){$.1f.1B=8(){9 5.X(8(){7 a=$(\'\').28(0);3($(5).17(\'1h\')==\'1j\'){$(a).17({1h:\'27\',18:5.1o,1U:5.1T})}R{$(a).17(\'1h\',\'1j\')}$(5).O(\'26\').1O(a).1Q(\'\')})}})(1S);',62,156,'|||if||this||var|function|return||||||||||||||||||||||||||||||||timer|div|parentNode|hover|isVisible|false|clickMenu|DIV|null|addClass|for|removeClass|else|unbind|target|UL|true|LI|each|clearTimeout|class||nodeName|outerbox|browser|toUpperCase|nodeType||css|width|nextSibling|contains|click|firstChild|mouseover|onClick|fn|Node|position|ul|absolute|arrowSrc|prototype|li|msie|offsetWidth|mouseout|className|test|length|mainDelay|new|RegExp|100|subDelay|extend|style|bgiframe|shadowBox|left|find|main|mousedown|bind|hide|getElementsByTagName|document|window|href|setTimeout|toElement|wrap|relatedTarget|before|inner|jQuery|offsetHeight|height|version|expression|block|display|iframe|show|append|parseInt|compareDocumentPosition|location|shadowbox2|innerBox|relative|get|setDefaults|hidden|visibility|catch|after|cmDiv|try|liArrow|while|src|clear|both|img|fromElement|closemenu|type|mask|filter|index|shadowbox1|top|300|shadowbox3'.split('|'),0,{})) \ No newline at end of file diff --git a/koha-tmpl/intranet-tmpl/prog/en/lib/yui/container.css b/koha-tmpl/intranet-tmpl/prog/en/lib/yui/container.css new file mode 100644 index 0000000000..90e11f57d4 --- /dev/null +++ b/koha-tmpl/intranet-tmpl/prog/en/lib/yui/container.css @@ -0,0 +1,318 @@ +/* +Copyright (c) 2007, Yahoo! Inc. All rights reserved. +Code licensed under the BSD License: +http://developer.yahoo.net/yui/license.txt +version: 2.4.1 +*/ +.yui-overlay, +.yui-panel-container { + visibility:hidden; + position:absolute; + z-index: 2; +} + +.yui-tt { + visibility:hidden; + position:absolute; + color:#333; + background-color:#FDFFB4; + font-family:arial,helvetica,verdana,sans-serif; + padding:2px; + border:1px solid #FCC90D; + font:100% sans-serif; + width:auto; +} + +/* + PLEASE NOTE: The
    element used for a Tooltip's shadow is appended + to its root element via JavaScript once it has been rendered. The + code that creates the shadow lives in the Tooltip's public "onRender" + event handler that is a prototype method of YAHOO.widget.Tooltip. + Implementers wishing to remove a Tooltip's shadow or add any other markup + required for a given skin for Tooltip should override the "onRender" method. +*/ + +.yui-tt-shadow { + display: none; +} + +* html body.masked select { + visibility:hidden; +} + +* html div.yui-panel-container select { + visibility:inherit; +} + +* html div.drag select { + visibility:hidden; +} + +* html div.hide-select select { + visibility:hidden; +} + +.mask { + z-index: 1; + display:none; + position:absolute; + top:0; + left:0; + -moz-opacity: 0.5; + opacity:.50; + filter: alpha(opacity=50); + background-color:#CCC; +} + +/* + +There are two known issues with YAHOO.widget.Overlay (and its subclasses) that +manifest in Gecko-based browsers on Mac OS X: + + 1) Elements with scrollbars will poke through Overlay instances floating + above them. + + 2) An Overlay's scrollbars and the scrollbars of its child nodes remain + visible when the Overlay is hidden. + +To fix these bugs: + + 1) The "overflow" property of an Overlay instance's root element and child + nodes is toggled between "hidden" and "auto" (through the application + and removal of the "hide-scrollbars" and "show-scrollbars" CSS classes) + as its "visibility" configuration property is toggled between + "false" and "true." + + 2) The "display" property of