add tooltip (tlite) to POD button

diff --git a/src/catalogue/templates/catalogue/book_short.html b/src/catalogue/templates/catalogue/book_short.html
index 0b33f23..edd9f6b 100644 (file)
--- 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 2caf798..17ac2bc 100644 (file)
--- 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 (file)
index 0000000..af70a05
--- /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 1dde322..adc340b 100644 (file)
--- 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 (file)
index 0000000..ed33034
--- /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