Added popup message, when user opens draw annotation tool [Enhancemen…

…t] (#299)

* Added popup message, when user opens draw annotation tool
The popup message display : 'For more options, right click anywhere on image'

Co-Authored-By: Chirag Jain <chirag.18je0254@cse.iitism.ac.in>

apps/viewer/popup.css

@@ -0,0 +1,51 @@
+#popup-container {
+  z-index: 700;
+}
+#popup-container .popup-msg {
+  background-color: #111;
+  color: #fff;
+  border: 1px solid #ddd;
+  bottom: 25px;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
+  left: 25px;
+  padding: 15px;
+  position: absolute;
+  z-index: 7500;
+  font-size: medium;
+}
+
+@media only screen and (max-width: 720px) {
+  #popup-container .popup-msg {
+  bottom: 0px;
+  left: 0px;
+  }
+}
+
+.slide-in {
+  animation-name: slideIn;
+  animation-duration: 0.8s;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(-400px);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+.slide-out {
+  animation-name: slideOut;
+  animation-duration: 0.8s;
+}
+
+@keyframes slideOut {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(80px);
+    opacity: 0;
+  }
+}

apps/viewer/uicallbacks.js

@@ -245,6 +245,22 @@ function draw(e) {
     // measurementOff();
 
     // turn off annotaiton
+    if (state==1) {
+      // show pop-up message to user
+      let popups = document.getElementById('popup-container');
+      if (popups.childElementCount < 2) {
+        let popupBox = document.createElement('div');
+        popupBox.classList.add('popup-msg', 'slide-in');
+        popupBox.innerHTML = `<i class="small material-icons">info</i>
+    For more options, right click anywhere on the image`;
+        // Add popup box to parent
+        popups.insertBefore(popupBox, popups.childNodes[0]);
+        setTimeout(function() {
+          // popups.lastChild.classList.add('slideOut');
+          popups.removeChild(popups.lastChild);
+        }, 3000);
+      }
+    }
     if ($CAMIC.status == 'normal') {
       annotationOn.call(this, state, target);
       return;

apps/viewer/viewer.html

@@ -153,6 +153,14 @@
     />
     <!-- osd & core css END -->
 
+    <!-- popup css -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="all"
+      href="./popup.css"
+    />
+
     <!--  common js START -->
     <!-- util.js -->
     <script type="text/javascript" src="../../common/util.js"></script>
@@ -349,6 +357,10 @@
     <div id="overlayers" style="z-index:600"></div>
 
     <div id="overlayersMinor" style="z-index:600"></div>
+
+    <!-- popup--->
+    <div id="popup-container"></div>
+
   </body>
   <script type="text/javascript">
     if (detectIE()) {