Use CSS3 box-shadow property for Cart tooltip

The OPAC Cart tooltip ("Your cart is empty," "1 item(s) added to your
Cart") currently uses a jQuery plugin to generate a drop shadow.
This works cross-browser, but has a high failure rate with regard
to hiding the shadow consistently, resulting in an orphan shadow
after the tooltip has been hidden. I propose to instead use the
new CSS3 property "box-shadow" (-moz-box-shadow and -webkit-box-
shadow for FireFox and Safari/Chrome). Currently Internet Explorer
does not support this property. I think this is an
acceptable tradeoff for more stable functionality.

Signed-off-by: Galen Charlton <gmcharlt@gmail.com>

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 3519187..13ac2c7 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
+++ b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
@@ -1822,8 +1822,9 @@ h1#xml a {
 #cartDetails {
        background-color : #FFF;
        border: 1px solid #739acf;
-       border-right-width : 2px;
-       border-bottom-width : 2px;
+        -moz-box-shadow: 1px 1px 3px 0 #666;
+        -webkit-box-shadow: 1px 1px 3px 0 #666;
+        box-shadow: 1px 1px 3px 0 #666;
        color : black;
        display : none;
        margin : 0;

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 845ceeb..1970440 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc
@@ -29,7 +29,6 @@
 <script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/jquery.js"></script>
 <script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/plugins/ui.tabs.js"></script>
 <script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/plugins/jquery.hotkeys.min.js"></script>
-<script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/plugins/jquery.dropshadow-min.js"></script>
 <script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/plugins/jquery.highlight-3.js"></script>
 
 <!-- TMPL_IF NAME="js_libs" -->

diff --git a/koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/jquery.dropshadow-min.js b/koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/jquery.dropshadow-min.js
deleted file mode 100644 (file)
index 9b1b1fb..0000000
--- a/koha-tmpl/intranet-tmpl/prog/en/lib/jquery/plugins/jquery.dropshadow-min.js
+++ /dev/null
@@ -1 +0,0 @@
-(function(B){var A=1;B.fn.dropShadow=function(C){var D=B.extend({left:4,top:4,blur:2,opacity:0.5,color:"black",swap:false},C);var E=B([]);this.not(".dropShadow").each(function(){var N=B(this);var J=[];var G=(D.blur<=0)?0:D.blur;var M=(G==0)?D.opacity:D.opacity/(G*8);var O=(D.swap)?A:A+1;var F=(D.swap)?A+1:A;var P;if(this.id){P=this.id+"_dropShadow"}else{P="ds"+(1+Math.floor(9999*Math.random()))}B.data(this,"shadowId",P);B.data(this,"shadowOptions",C);N.attr("shadowId",P).css("zIndex",O);if(N.css("position")!="absolute"){N.css({position:"relative",zoom:1})}bgColor=N.css("backgroundColor");if(bgColor=="rgba(0, 0, 0, 0)"){bgColor="transparent"}if(bgColor!="transparent"||N.css("backgroundImage")!="none"||this.nodeName=="SELECT"||this.nodeName=="INPUT"||this.nodeName=="TEXTAREA"){J[0]=B("<div></div>").css("background",D.color)}else{J[0]=N.clone().removeAttr("id").removeAttr("name").removeAttr("shadowId").css("color",D.color)}J[0].addClass("dropShadow").css({height:N.outerHeight(),left:G,opacity:M,position:"absolute",top:G,width:N.outerWidth(),zIndex:F});var L=(8*G)+1;for(K=1;K<L;K++){J[K]=J[0].clone()}var K=1;var I=G;while(I>0){J[K].css({left:I*2,top:0});J[K+1].css({left:I*4,top:I*2});J[K+2].css({left:I*2,top:I*4});J[K+3].css({left:0,top:I*2});J[K+4].css({left:I*3,top:I});J[K+5].css({left:I*3,top:I*3});J[K+6].css({left:I,top:I*3});J[K+7].css({left:I,top:I});K+=8;I--}var H=B("<div></div>").attr("id",P).addClass("dropShadow").css({left:N.position().left+D.left-G,marginTop:N.css("marginTop"),marginRight:N.css("marginRight"),marginBottom:N.css("marginBottom"),marginLeft:N.css("marginLeft"),position:"absolute",top:N.position().top+D.top-G,zIndex:F});for(K=0;K<L;K++){H.append(J[K])}N.after(H);E=E.add(H);B(window).resize(function(){try{H.css({left:N.position().left+D.left-G,top:N.position().top+D.top-G})}catch(Q){}});A+=2});return this.pushStack(E)};B.fn.redrawShadow=function(){this.removeShadow();return this.each(function(){var C=B.data(this,"shadowOptions");B(this).dropShadow(C)})};B.fn.removeShadow=function(){return this.each(function(){var C=B(this).shadowId();B("div#"+C).remove()})};B.fn.shadowId=function(){return B.data(this[0],"shadowId")};B(function(){var C="<style type='text/css' media='print'>";C+=".dropShadow{visibility:hidden;}</style>";B("head").append(C)})})(jQuery);
\ No newline at end of file

diff --git a/koha-tmpl/opac-tmpl/prog/en/css/opac.css b/koha-tmpl/opac-tmpl/prog/en/css/opac.css
index bd072fb..d54e5d6 100644 (file)
--- a/koha-tmpl/opac-tmpl/prog/en/css/opac.css
+++ b/koha-tmpl/opac-tmpl/prog/en/css/opac.css
@@ -1438,6 +1438,10 @@ div#changelanguage li.yuimenuitem a.yuimenuitemlabel {
        padding : 10px;
        text-align : center;
        width : 180px;
+       box-shadow: 1px 1px 3px #666;
+       -moz-box-shadow: 1px 1px 3px #666;
+       -webkit-box-shadow: 1px 1px 3px #666;
+
 }
 
 .yui-panel .hd, .yui-panel .bd, .yui-panel .ft {

diff --git a/koha-tmpl/opac-tmpl/prog/en/includes/doc-head-close.inc b/koha-tmpl/opac-tmpl/prog/en/includes/doc-head-close.inc
index a94acd2..fe7e7db 100644 (file)
--- a/koha-tmpl/opac-tmpl/prog/en/includes/doc-head-close.inc
+++ b/koha-tmpl/opac-tmpl/prog/en/includes/doc-head-close.inc
@@ -20,7 +20,6 @@
 <script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/jquery.js"></script>
 <script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/plugins/ui.tabs.js"></script>
 <script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/plugins/jquery.hoverIntent.minified.js"></script>
-<script type="text/javascript" src="<!-- TMPL_VAR name="themelang" -->/lib/jquery/plugins/jquery.dropshadow-min.js"></script>
 <script type="text/javascript" language="javascript" src="<!-- TMPL_VAR NAME="themelang" -->/js/script.js"></script>
 <!-- TMPL_IF NAME="OPACAmazonCoverImages" -->
 <script type="text/javascript" language="javascript">//<![CDATA[

diff --git a/koha-tmpl/opac-tmpl/prog/en/js/basket.js b/koha-tmpl/opac-tmpl/prog/en/js/basket.js
index 736fdc9..c83e001 100644 (file)
--- a/koha-tmpl/opac-tmpl/prog/en/js/basket.js
+++ b/koha-tmpl/opac-tmpl/prog/en/js/basket.js
@@ -435,9 +435,7 @@ function showCart(){
                var left = position.left -  buttonOffset;
                $("#cartDetails").css("position","absolute").css("top",top);
                $("#cartDetails").css("position","absolute").css("left",left);
-               $("#cartDetails").fadeIn("fast",function(){
-                       $("#cartDetails").dropShadow({left: 3, top: 3, blur: 0,  color: "#000", opacity: 0.1});
-        });
+               $("#cartDetails").fadeIn("fast");
 }
 
 function showLists(){
@@ -449,25 +447,21 @@ function showLists(){
                var left = position.left -  buttonOffset;
                $("#listsDetails").css("position","absolute").css("top",top);
                $("#listsDetails").css("position","absolute").css("left",left);
-               $("#listsDetails").fadeIn("fast",function(){
-                       $("#listsDetails").dropShadow({left: 3, top: 3, blur: 0,  color: "#000", opacity: 0.1});
-        });
+               $("#listsDetails").fadeIn("fast");
 }
 
 function hideCart(){
-    $("#cartDetails").removeShadow();
     $("#cartDetails").fadeOut("fast");
 }
 
 function hideLists(){
-    $("#listsDetails").removeShadow();
     $("#listsDetails").fadeOut("fast");
 }
 
 $("#cartDetails").ready(function(){
        $("#cartDetails,#cartmenulink").click(function(){ hideCart(); });
        $("#cartmenulink").click(function(){ openBasket(); return false; });
-       $("#cartmenulink").hover(function(){
+       $("#cartmenulink").hoverIntent(function(){
                showCart();
        },function(){
                hideCart();

diff --git a/koha-tmpl/opac-tmpl/prog/en/lib/jquery/plugins/jquery.dropshadow-min.js b/koha-tmpl/opac-tmpl/prog/en/lib/jquery/plugins/jquery.dropshadow-min.js
deleted file mode 100644 (file)
index 9b1b1fb..0000000
--- a/koha-tmpl/opac-tmpl/prog/en/lib/jquery/plugins/jquery.dropshadow-min.js
+++ /dev/null
@@ -1 +0,0 @@
-(function(B){var A=1;B.fn.dropShadow=function(C){var D=B.extend({left:4,top:4,blur:2,opacity:0.5,color:"black",swap:false},C);var E=B([]);this.not(".dropShadow").each(function(){var N=B(this);var J=[];var G=(D.blur<=0)?0:D.blur;var M=(G==0)?D.opacity:D.opacity/(G*8);var O=(D.swap)?A:A+1;var F=(D.swap)?A+1:A;var P;if(this.id){P=this.id+"_dropShadow"}else{P="ds"+(1+Math.floor(9999*Math.random()))}B.data(this,"shadowId",P);B.data(this,"shadowOptions",C);N.attr("shadowId",P).css("zIndex",O);if(N.css("position")!="absolute"){N.css({position:"relative",zoom:1})}bgColor=N.css("backgroundColor");if(bgColor=="rgba(0, 0, 0, 0)"){bgColor="transparent"}if(bgColor!="transparent"||N.css("backgroundImage")!="none"||this.nodeName=="SELECT"||this.nodeName=="INPUT"||this.nodeName=="TEXTAREA"){J[0]=B("<div></div>").css("background",D.color)}else{J[0]=N.clone().removeAttr("id").removeAttr("name").removeAttr("shadowId").css("color",D.color)}J[0].addClass("dropShadow").css({height:N.outerHeight(),left:G,opacity:M,position:"absolute",top:G,width:N.outerWidth(),zIndex:F});var L=(8*G)+1;for(K=1;K<L;K++){J[K]=J[0].clone()}var K=1;var I=G;while(I>0){J[K].css({left:I*2,top:0});J[K+1].css({left:I*4,top:I*2});J[K+2].css({left:I*2,top:I*4});J[K+3].css({left:0,top:I*2});J[K+4].css({left:I*3,top:I});J[K+5].css({left:I*3,top:I*3});J[K+6].css({left:I,top:I*3});J[K+7].css({left:I,top:I});K+=8;I--}var H=B("<div></div>").attr("id",P).addClass("dropShadow").css({left:N.position().left+D.left-G,marginTop:N.css("marginTop"),marginRight:N.css("marginRight"),marginBottom:N.css("marginBottom"),marginLeft:N.css("marginLeft"),position:"absolute",top:N.position().top+D.top-G,zIndex:F});for(K=0;K<L;K++){H.append(J[K])}N.after(H);E=E.add(H);B(window).resize(function(){try{H.css({left:N.position().left+D.left-G,top:N.position().top+D.top-G})}catch(Q){}});A+=2});return this.pushStack(E)};B.fn.redrawShadow=function(){this.removeShadow();return this.each(function(){var C=B.data(this,"shadowOptions");B(this).dropShadow(C)})};B.fn.removeShadow=function(){return this.each(function(){var C=B(this).shadowId();B("div#"+C).remove()})};B.fn.shadowId=function(){return B.data(this[0],"shadowId")};B(function(){var C="<style type='text/css' media='print'>";C+=".dropShadow{visibility:hidden;}</style>";B("head").append(C)})})(jQuery);
\ No newline at end of file