From 4cadef92cdc776f7da86edfd1bd3547f4d91c816 Mon Sep 17 00:00:00 2001
From: Jan Szejko <janek37@gmail.com>
Date: Mon, 4 Sep 2017 17:00:34 +0200
Subject: [PATCH] add tooltip (tlite) to POD button

---
 .../templates/catalogue/book_short.html       |  2 +-
 src/wolnelektury/settings/static.py           |  4 +
 src/wolnelektury/static/css/tlite.css         | 83 +++++++++++++++++++
 src/wolnelektury/static/js/base.js            |  5 ++
 .../static/js/contrib/tlite.min.js            |  2 +
 5 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 src/wolnelektury/static/css/tlite.css
 create mode 100644 src/wolnelektury/static/js/contrib/tlite.min.js

diff --git a/src/catalogue/templates/catalogue/book_short.html b/src/catalogue/templates/catalogue/book_short.html
index 0b33f23a7..edd9f6b28 100644
--- a/src/catalogue/templates/catalogue/book_short.html
+++ b/src/catalogue/templates/catalogue/book_short.html
@@ -91,7 +91,7 @@
             <a href="{% url 'book_text' book.slug %}" class="downarrow">{% trans "Read online" %}</a>
           {% endif %}
           {% if book.print_on_demand %}
-            <a href="{{ book.ridero_link }}" class="downarrow print">{% trans "Print on demand –" %}
+            <a href="{{ book.ridero_link }}" class="downarrow print tlite-tooltip" title="{% trans "Cena książki w druku cyfrowym jest zależna od liczby stron.<br>Przed zakupem upewnij się, że cena druku na żądanie jest dla Ciebie odpowiednia.<br>Wszystkie nasze zasoby w wersji elektronicznej są zawsze dostępne bezpłatnie." %}">{% trans "Print on demand –" %}
                 <img src="{% static 'img/ridero.png' %}" style="height: 0.8em;"/></a>
           {% endif %}
         </li>
diff --git a/src/wolnelektury/settings/static.py b/src/wolnelektury/settings/static.py
index 2caf7986e..17ac2bc95 100644
--- a/src/wolnelektury/settings/static.py
+++ b/src/wolnelektury/settings/static.py
@@ -38,6 +38,8 @@ PIPELINE = {
 
                 'css/ui-lightness/jquery-ui-1.8.16.custom.css',
 
+                'css/tlite.css',
+
                 'scss/main.scss',
             ],
             'output_filename': 'css/compressed/main.css',
@@ -94,6 +96,8 @@ PIPELINE = {
 
                 'js/contrib/jquery-ui-1.8.16.custom.min.js',
 
+                'js/contrib/tlite.min.js',
+
                 'jplayer/jquery.jplayer.min.js',
                 'jplayer/jplayer.playlist.min.js',
                 'player/player.js',
diff --git a/src/wolnelektury/static/css/tlite.css b/src/wolnelektury/static/css/tlite.css
new file mode 100644
index 000000000..af70a05fc
--- /dev/null
+++ b/src/wolnelektury/static/css/tlite.css
@@ -0,0 +1,83 @@
+.tlite {
+  background: #111;
+  color: white;
+  font-family: sans-serif;
+  font-size: 0.8rem;
+  font-weight: normal;
+  text-decoration: none;
+  text-align: left;
+  padding: 0.6em 0.75rem;
+  border-radius: 4px;
+  position: absolute;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.4s;
+  white-space: nowrap;
+  box-shadow: 0 0.5rem 1rem -0.5rem black;
+  z-index: 1000;
+  -webkit-backface-visibility: hidden;
+}
+
+.tlite-table td,
+.tlite-table th {
+  position: relative;
+}
+
+.tlite-visible {
+  visibility: visible;
+  opacity: 0.9;
+}
+
+.tlite::before {
+  content: ' ';
+  display: block;
+  background: inherit;
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  transform: rotate(45deg);
+}
+
+.tlite-n::before {
+  top: -3px;
+  left: 50%;
+  margin-left: -5px;
+}
+
+.tlite-nw::before {
+  top: -3px;
+  left: 10px;
+}
+
+.tlite-ne::before {
+  top: -3px;
+  right: 10px;
+}
+
+.tlite-s::before {
+  bottom: -3px;
+  left: 50%;
+  margin-left: -5px;
+}
+
+.tlite-se::before {
+  bottom: -3px;
+  right: 10px;
+}
+
+.tlite-sw::before {
+  bottom: -3px;
+  left: 10px;
+}
+
+.tlite-w::before {
+  left: -3px;
+  top: 50%;
+  margin-top: -5px;
+}
+
+.tlite-e::before {
+  right: -3px;
+  top: 50%;
+  margin-top: -5px;
+}
diff --git a/src/wolnelektury/static/js/base.js b/src/wolnelektury/static/js/base.js
index 1dde3221c..adc340bfb 100644
--- a/src/wolnelektury/static/js/base.js
+++ b/src/wolnelektury/static/js/base.js
@@ -229,6 +229,11 @@
                 });
             }
         });
+
+        /* global tlite */
+        tlite(function (el) {
+            return $(el).hasClass('tlite-tooltip');
+        });
     });
 })(jQuery);
 
diff --git a/src/wolnelektury/static/js/contrib/tlite.min.js b/src/wolnelektury/static/js/contrib/tlite.min.js
new file mode 100644
index 000000000..ed330343e
--- /dev/null
+++ b/src/wolnelektury/static/js/contrib/tlite.min.js
@@ -0,0 +1,2 @@
+function tlite(t){document.addEventListener("mouseover",function(e){var i=e.target,n=t(i);n||(i=i.parentElement,n=i&&t(i)),n&&tlite.show(i,n,!0)})}tlite.show=function(t,e,i){function n(t,e){function n(){u=t.title||t.getAttribute(l)||u,t.title="",t.setAttribute(l,""),u&&!a&&(a=setTimeout(d,i?150:1))}function r(){tlite.hide(t,!0)}function s(e){i===e&&(a=clearTimeout(a),f&&t.removeChild(f),f=void 0)}function d(){f||(f=o(t,u,e))}var f,a,u;return t.addEventListener("mousedown",r),t.addEventListener("mouseleave",r),t.tooltip={show:n,hide:s}}function o(t,e,i){function n(){o.className="tlite tlite-"+r+s;var e=10,i=t.offsetTop,n=t.offsetLeft;o.offsetParent===t&&(i=n=0);var l=t.offsetWidth,d=t.offsetHeight,f=o.offsetHeight,a=o.offsetWidth,u=n+l/2;o.style.top=("s"===r?i-f-e:"n"===r?i+d+e:i+d/2-f/2)+"px",o.style.left=("w"===s?n:"e"===s?n+l-a:"w"===r?n+l+e:"e"===r?n-a-e:u-a/2)+"px"}var o=document.createElement("span"),l=i.grav||t.getAttribute("data-tlite")||"n";o.innerHTML=e,t.appendChild(o);var r=l[0]||"",s=l[1]||"";n();var d=o.getBoundingClientRect();return"s"===r&&d.top<0?(r="n",n()):"n"===r&&d.bottom>window.innerHeight?(r="s",n()):"e"===r&&d.left<0?(r="w",n()):"w"===r&&d.right>window.innerWidth&&(r="e",n()),o.className+=" tlite-visible",o}var l="data-tlite";e=e||{},(t.tooltip||n(t,e)).show()},tlite.hide=function(t,e){t.tooltip&&t.tooltip.hide(e)},"undefined"!=typeof module&&module.exports&&(module.exports=tlite);
+//# sourceMappingURL=tlite.min.js.map
\ No newline at end of file
-- 
2.20.1