Bug 9572 - Opac info tooltip from branches is not well positioned

This patch removes the jQuery plugin previously used to display the
library information tooltip on opac-detail.pl and implements the
functionality using jQueryUI's tooltip widget. jQueryUI has been
upgraded to 1.9.2 in the process, which required some ammendments to
jQueryUI-related CSS.

To test, make sure at least one of your libraries has "OPAC info" stored
as part of its configuration. View a record in the OPAC which is owned
by that library. Hover over the library's name in the holdings table and
you should see a properly-positioned tooltip showing the "OPAC info."

Also test other jQueryUI-related functionality to confirm that the
upgrade didn't break anything: Tabs and datepickers should still work
correctly.

Signed-off-by: Frederic Durand <frederic.durand@unilim.fr>
Signed-off-by: Katrin Fischer <Katrin.Fischer.83@web.de>
Works nicely in prog theme, feature seems not to be available
for ccsr yet.
Signed-off-by: Jared Camins-Esakov <jcamins@cpbibliography.com>

koha-tmpl/opac-tmpl/prog/en/css/opac.css

@@ -2491,10 +2491,10 @@ span.sep {
 
 /* jQueryUI Core */
 
-.ui-widget-content { border: 1px solid #B9D8D9; background: #ffffff none; color: #222222; }
-.ui-widget-header { border: 1px solid #B9D8D9; background: #E6F0F2 none; color: #222222; font-weight: bold; }
-.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #B9D8D9; background: #F4F8F9 none; font-weight: normal; color: #555555; }
-.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #B9D8D9; background: #E6F0F2 none; font-weight: normal; color: #212121; }
+.ui-widget-content { border: 1px solid #AAA; background: #ffffff none; color: #222222; }
+.ui-widget-header { border: 1px solid #AAA; background: #E6F0F2 none; color: #222222; font-weight: bold; }
+.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #AAA; background: #F4F8F9 none; font-weight: normal; color: #555555; }
+.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #AAA; background: #E6F0F2 none; font-weight: normal; color: #212121; }
 .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa; background: #ffffff none; font-weight: normal; color: #212121; }
 .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #fcefa1; background: #fbf9ee; color: #363636; }
 .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec; color: #cd0a0a; }
@@ -2502,7 +2502,7 @@ span.sep {
 /* jQueryUI autocomplete */
 
 .ui-autocomplete { position: absolute; cursor: default; -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.3); -moz-box-shadow: 2px 2px 2px rgba(0,0,0,.3); box-shadow: 2px 2px 2px rgba(0,0,0,.3); }
-.ui-autocomplete.ui-widget-content .ui-state-hover { border: 1px solid #B9D8D9; background: #E6F0F2 none; font-weight: normal; color: #212121; }
+.ui-autocomplete.ui-widget-content .ui-state-hover { border: 1px solid #AAA; background: #E6F0F2 none; font-weight: normal; color: #212121; }
 .ui-autocomplete-loading { background: #FFF url("../../img/loading-small.gif") right center no-repeat; }
 .ui-menu li { list-style:none; }
 
@@ -2549,7 +2549,7 @@ span.sep {
 }
 
 /* jQuery UI standard tabs */
-.ui-tabs-nav .ui-tabs-selected a,
+.ui-tabs-nav .ui-tabs-active a,
 .ui-tabs-nav a:hover,
 .ui-tabs-nav a:focus,
 .ui-tabs-nav a:active,
@@ -2558,11 +2558,6 @@ span.sep {
     outline: 0 none;
 }
 
-.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
-    background-color : #FFF;
-    border : 1px solid #D8D8D8;
-}
-
 .ui-widget,
 .ui-widget input,
 .ui-widget select,
@@ -2589,10 +2584,16 @@ ul.ui-tabs-nav li {
 }
 .ui-tabs .ui-tabs-nav li {
     background: #F3F3F3 none;
-    border: 1px solid #D8D8D8;
+    border-color: #D8D8D8;
     margin-right : .4em;
 }
-.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
+
+.ui-tabs .ui-tabs-nav li.ui-tabs-active {
+    background-color : #FFF;
+    border : 1px solid #D8D8D8;
+    border-bottom: 0;
+}
+.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
     color : #000;
     font-weight : bold;
 }
@@ -2601,7 +2602,7 @@ ul.ui-tabs-nav li {
     background : #F3F3F3 none;
 }
 
-.ui-tabs .ui-tabs-nav li.ui-tabs-selected.ui-state-hover {
+.ui-tabs .ui-tabs-nav li.ui-tabs-active.ui-state-hover {
     background : #FFF none;
 }
 
@@ -2933,3 +2934,7 @@ a.reviewlink,a.reviewlink:visited {
 .highlight-row-detail {
     font-weight: bold;
 }
+
+.branch-info-tooltip {
+    display: none;
+}

koha-tmpl/opac-tmpl/prog/en/lib/jquery/plugins/jquery.tools.min.js

@@ -1,11 +0,0 @@
-/*!
- * jQuery Tools v1.2.6 - The missing UI library for the Web
- *
- * tooltip/tooltip.js
- *
- * NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE.
- *
- * http://flowplayer.org/tools/
- *
- */
-(function(a){a.tools=a.tools||{version:"v1.2.6"},a.tools.tooltip={conf:{effect:"toggle",fadeOutSpeed:"fast",predelay:0,delay:30,opacity:1,tip:0,fadeIE:!1,position:["top","center"],offset:[0,0],relative:!1,cancelDefault:!0,events:{def:"mouseenter,mouseleave",input:"focus,blur",widget:"focus mouseenter,blur mouseleave",tooltip:"mouseenter,mouseleave"},layout:"<div/>",tipClass:"tooltip"},addEffect:function(a,c,d){b[a]=[c,d]}};var b={toggle:[function(a){var b=this.getConf(),c=this.getTip(),d=b.opacity;d<1&&c.css({opacity:d}),c.show(),a.call()},function(a){this.getTip().hide(),a.call()}],fade:[function(b){var c=this.getConf();!a.browser.msie||c.fadeIE?this.getTip().fadeTo(c.fadeInSpeed,c.opacity,b):(this.getTip().show(),b())},function(b){var c=this.getConf();!a.browser.msie||c.fadeIE?this.getTip().fadeOut(c.fadeOutSpeed,b):(this.getTip().hide(),b())}]};function c(b,c,d){var e=d.relative?b.position().top:b.offset().top,f=d.relative?b.position().left:b.offset().left,g=d.position[0];e-=c.outerHeight()-d.offset[0],f+=b.outerWidth()+d.offset[1],/iPad/i.test(navigator.userAgent)&&(e-=a(window).scrollTop());var h=c.outerHeight()+b.outerHeight();g=="center"&&(e+=h/2),g=="bottom"&&(e+=h),g=d.position[1];var i=c.outerWidth()+b.outerWidth();g=="center"&&(f-=i/2),g=="left"&&(f-=i);return{top:e,left:f}}function d(d,e){var f=this,g=d.add(f),h,i=0,j=0,k=d.attr("title"),l=d.attr("data-tooltip"),m=b[e.effect],n,o=d.is(":input"),p=o&&d.is(":checkbox, :radio, select, :button, :submit"),q=d.attr("type"),r=e.events[q]||e.events[o?p?"widget":"input":"def"];if(!m)throw"Nonexistent effect \""+e.effect+"\"";r=r.split(/,\s*/);if(r.length!=2)throw"Tooltip: bad events configuration for "+q;d.bind(r[0],function(a){clearTimeout(i),e.predelay?j=setTimeout(function(){f.show(a)},e.predelay):f.show(a)}).bind(r[1],function(a){clearTimeout(j),e.delay?i=setTimeout(function(){f.hide(a)},e.delay):f.hide(a)}),k&&e.cancelDefault&&(d.removeAttr("title"),d.data("title",k)),a.extend(f,{show:function(b){if(!h){l?h=a(l):e.tip?h=a(e.tip).eq(0):k?h=a(e.layout).addClass(e.tipClass).appendTo(document.body).hide().append(k):(h=d.next(),h.length||(h=d.parent().next()));if(!h.length)throw"Cannot find tooltip for "+d}if(f.isShown())return f;h.stop(!0,!0);var o=c(d,h,e);e.tip&&h.html(d.data("title")),b=a.Event(),b.type="onBeforeShow",g.trigger(b,[o]);if(b.isDefaultPrevented())return f;o=c(d,h,e),h.css({position:"absolute",top:o.top,left:o.left}),n=!0,m[0].call(f,function(){b.type="onShow",n="full",g.trigger(b)});var p=e.events.tooltip.split(/,\s*/);h.data("__set")||(h.unbind(p[0]).bind(p[0],function(){clearTimeout(i),clearTimeout(j)}),p[1]&&!d.is("input:not(:checkbox, :radio), textarea")&&h.unbind(p[1]).bind(p[1],function(a){a.relatedTarget!=d[0]&&d.trigger(r[1].split(" ")[0])}),e.tip||h.data("__set",!0));return f},hide:function(c){if(!h||!f.isShown())return f;c=a.Event(),c.type="onBeforeHide",g.trigger(c);if(!c.isDefaultPrevented()){n=!1,b[e.effect][1].call(f,function(){c.type="onHide",g.trigger(c)});return f}},isShown:function(a){return a?n=="full":n},getConf:function(){return e},getTip:function(){return h},getTrigger:function(){return d}}),a.each("onHide,onBeforeShow,onShow,onBeforeHide".split(","),function(b,c){a.isFunction(e[c])&&a(f).bind(c,e[c]),f[c]=function(b){b&&a(f).bind(c,b);return f}})}a.fn.tooltip=function(b){var c=this.data("tooltip");if(c)return c;b=a.extend(!0,{},a.tools.tooltip.conf,b),typeof b.position=="string"&&(b.position=b.position.split(/,?\s/)),this.each(function(){c=new d(a(this),b),a(this).data("tooltip",c)});return b.api?c:this}})(jQuery);

koha-tmpl/opac-tmpl/prog/en/modules/opac-detail.tt

@@ -5,7 +5,6 @@
 [% INCLUDE 'doc-head-open.inc' %][% IF ( LibraryNameTitle ) %][% LibraryNameTitle %][% ELSE %]Koha online[% END %] catalog › Details for: [% title |html %][% FOREACH subtitl IN subtitle %], [% subtitl.subfield |html %][% END %]
 [% INCLUDE 'doc-head-close.inc' %]
 <script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.tablesorter.min.js"></script>
-<script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.tools.min.js"></script>
 [% IF ( SocialNetworks ) %]
     <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
     //<![CDATA[
@@ -51,7 +50,15 @@
 
      $(document).ready(function() { 
         $('#bibliodescriptions').tabs();
-
+        $(".branch-info-tooltip-trigger").tooltip({
+            position: { my: "left+15 center", at: "right center" },
+            show: 50,
+            hide: 50,
+            content: function(){
+                var element = $(this).next("div");
+                return element.html();
+            }
+        });
 [% IF ( TagsInputEnabled && loggedinusername ) %]
         $(".tag_add").click(function(){
             var thisid = $(this).attr("id");
@@ -133,7 +140,6 @@
         });
     [% END %]
 
-        $(".branch-info-tooltip-trigger").tooltip({delay: 100, position: "top right"});
 [% IF ( OpacStarRatings != 'disable' ) %]
 // -----------------------------------------------------
 // star-ratings code
@@ -475,15 +481,6 @@ YAHOO.util.Event.onContentReady("furtherm", function () {
 </script>
 [% END %]
 
-<style type="text/css">
-.branch-info-tooltip {
-  display: none;
-  padding: 20px;
-  background: #fff;
-  border: 1px solid black;
-}
-</style>
-
 </head>
 <body id="opac-detail">
 <div id="doc3" class="yui-t7">
@@ -1481,14 +1478,14 @@ YAHOO.util.Event.onContentReady("furtherm", function () {
       [% IF ( item_level_itypes ) %]<td class="itype">[% UNLESS ( noItemTypeImages ) %][% IF ( ITEM_RESULT.imageurl ) %]<img src="[% ITEM_RESULT.imageurl %]" title="[% ITEM_RESULT.description %]" alt="[% ITEM_RESULT.description %]" />[% END %][% END %] [% ITEM_RESULT.description %]</td>[% END %]
              <td class="location">
     [% UNLESS ( singleBranchMode ) %]
-        <span class="[% ITEM_RESULT.branch_opac_info ? 'branch-info-tooltip-trigger' : '' %]">
+        <div class="[% ITEM_RESULT.branch_opac_info ? 'branch-info-tooltip-trigger' : '' %]">
         [% IF ( ITEM_RESULT.branchurl ) %]
-        <a href="[% ITEM_RESULT.branchurl %]">[% ITEM_RESULT.branchname %]</a>
+            <a href="[% ITEM_RESULT.branchurl %]" title="">[% ITEM_RESULT.branchname %]</a>
         [% ELSE %]
-        [% ITEM_RESULT.branchname %]
+            <span title="">[% ITEM_RESULT.branchname %]</span>
         [% END %]
-        </span>
-        <div class="branch-info-tooltip">[% ITEM_RESULT.branch_opac_info %]</div>
+            <div class="branch-info-tooltip">[% ITEM_RESULT.branch_opac_info %]</div>
+        </div>
     [% END %]
     <span class="shelvingloc">[% ITEM_RESULT.location_description %]</span>
     </td>