From 61ba8bf0526f53f03380627e815ee57fbe088650 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Mon, 25 Jun 2018 22:27:28 +0200
Subject: [PATCH] added tooltips

---
 src/Foundation.hs                   |  1 +
 templates/multiFileField.hamlet     |  7 ++--
 templates/multiFileField.lucius     | 14 -------
 templates/standalone/tooltip.hamlet |  1 +
 templates/standalone/tooltip.julius | 37 ++++++++++++++++++
 templates/standalone/tooltip.lucius | 58 +++++++++++++++++++++++++++++
 6 files changed, 100 insertions(+), 18 deletions(-)
 create mode 100644 templates/standalone/tooltip.hamlet
 create mode 100644 templates/standalone/tooltip.julius
 create mode 100644 templates/standalone/tooltip.lucius

diff --git a/src/Foundation.hs b/src/Foundation.hs
index b2bc859bb..759de00fb 100644
--- a/src/Foundation.hs
+++ b/src/Foundation.hs
@@ -506,6 +506,7 @@ instance Yesod UniWorX where
             $(widgetFile "standalone/modal")
             $(widgetFile "standalone/showHide")
             $(widgetFile "standalone/inputs")
+            $(widgetFile "standalone/tooltip")
             $(widgetFile "standalone/tabber")
             $(widgetFile "standalone/alerts")
             $(widgetFile "standalone/datepicker")
diff --git a/templates/multiFileField.hamlet b/templates/multiFileField.hamlet
index 20539d908..a64e59f9c 100644
--- a/templates/multiFileField.hamlet
+++ b/templates/multiFileField.hamlet
@@ -15,7 +15,6 @@ $# new files
 <div .file-input__unpack>
   <label for=#{fieldId}_zip>ZIPs automatisch entpacken
   <input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips}>
-  <span .unpack-zip-info-toggler>?
-
-$# TODO: make modal available in this scope
-    ^{modal ".unpack-zip-info-toggler" (Just "Entpackt zips automatisch nach dem Upload und fügt den Inhalt im Stamm-Verzeichnis ein.")}
+  <div class="js-tooltip">
+    <div class="tooltip__handle">?
+    <div class="tooltip__content hidden">Entpackt zips automatisch nach dem Upload und fügt den Inhalt im Stamm-Verzeichnis ein.
diff --git a/templates/multiFileField.lucius b/templates/multiFileField.lucius
index 6d757a82f..3ee5988e1 100644
--- a/templates/multiFileField.lucius
+++ b/templates/multiFileField.lucius
@@ -17,20 +17,6 @@
   color: var(--color-fontsec);
 }
 
-.unpack-zip-info-toggler {
-  background-color: var(--color-dark);
-  border-radius: 50%;
-  height: 1.5rem;
-  width: 1.5rem;
-  line-height: 1.5rem;
-  font-size: 1.2rem;
-  color: white;
-  display: inline-block;
-  text-align: center;
-  cursor: pointer;
-  margin: 0 10px;
-}
-
 .file-input__list {
   margin-left: 15px;
   margin-top: 10px;
diff --git a/templates/standalone/tooltip.hamlet b/templates/standalone/tooltip.hamlet
new file mode 100644
index 000000000..f35edf8cd
--- /dev/null
+++ b/templates/standalone/tooltip.hamlet
@@ -0,0 +1 @@
+<!-- only here to be able to include tooltips using `toWidget` -->
diff --git a/templates/standalone/tooltip.julius b/templates/standalone/tooltip.julius
new file mode 100644
index 000000000..e5c33026b
--- /dev/null
+++ b/templates/standalone/tooltip.julius
@@ -0,0 +1,37 @@
+(function() {;
+  'use strict';
+
+  window.utils = window.utils || {};
+
+  // allows for multiple file uploads with separate inputs
+  window.utils.tooltip = function(tt) {
+    var handle = tt.querySelector('.tooltip__handle');
+    var content = tt.querySelector('.tooltip__content');
+
+    var left = false;
+
+    handle.addEventListener('mouseenter', function() {
+      left = false;
+      content.classList.toggle('to-left', handle.getBoundingClientRect().left + 300 > window.innerWidth);
+      content.classList.remove('hidden');
+    });
+
+    handle.addEventListener('mouseleave', function() {
+      left = true;
+      window.setTimeout(function() {
+        if (left) {
+          content.classList.add('hidden');
+        }
+      }, 250);
+    });
+  }
+
+})();
+
+document.addEventListener('DOMContentLoaded', function() {
+
+  // initialize tooltips
+  Array.from(document.querySelectorAll('.js-tooltip')).forEach(function(tt) {
+    window.utils.tooltip(tt);
+  });
+});
diff --git a/templates/standalone/tooltip.lucius b/templates/standalone/tooltip.lucius
new file mode 100644
index 000000000..f3df41d12
--- /dev/null
+++ b/templates/standalone/tooltip.lucius
@@ -0,0 +1,58 @@
+.js-tooltip {
+  position: relative;
+
+  .tooltip__handle {
+    background-color: var(--color-dark);
+    border-radius: 50%;
+    height: 1.5rem;
+    width: 1.5rem;
+    line-height: 1.5rem;
+    font-size: 1.2rem;
+    color: white;
+    display: inline-block;
+    text-align: center;
+    cursor: default;
+    margin: 0 10px;
+  }
+
+  .tooltip__content {
+    position: absolute;
+    top: -10px;
+    transform: translateY(-100%);
+    left: 3px;
+    width: 275px;
+    z-index: 10;
+    background-color: #fafafa;
+    border-radius: 4px;
+    padding: 13px 17px;
+    box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.1);
+    // display: none;
+
+    &.to-left {
+      left: auto;
+      right: 3px;
+
+      &::after {
+        left: auto;
+        right: 10px;
+      }
+    }
+
+    &::after {
+      content: '';
+      width: 16px;
+      height: 16px;
+      background-color: #fafafa;
+      transform: rotate(45deg);
+      position: absolute;
+      left: 10px;
+      // box-shadow: 0 0 4px black;
+      // outline: 1px solid red;
+      bottom: -8px;
+    }
+  }
+
+  .hidden {
+    display: none;
+  }
+}