popup description

client/client.js

@@ -232,6 +232,8 @@ UI -> HEAP ---------------------------------------------------
 
     */
     
+
+
     // push new state from UI to server 
     function putState(rep, key) {
         var data = {
@@ -434,6 +436,8 @@ onmousedown = function(evt) {
             window.addEventListener('mousemove', mouseMoveDragListener)
             window.addEventListener('mouseup', mouseUpDragListener)
         }
+        // removes any popup descriptions for list items in Module Menu
+         rmDescription()
     }
 
     function mouseMoveDragListener(evt) {
@@ -478,6 +482,7 @@ oncontextmenu = function(evt) {
         return false
     }
     
+
     onmousemove = function(evt) {
         var cT = getCurrentTransform()
         lastPos.x = cT.ox - cT.tx + (evt.pageX - cT.ox) / cT.s
@@ -546,6 +551,7 @@ function writeModuleOptionMenu(modRep) {
         document.addEventListener('click', rmListener)
     }
 
+
     // return ul element with name and alt and link? 
     // TODO: not properly a tree, see note @ reciprocal fn in views.js
     function heapSendsModuleMenu(tree) {
@@ -559,12 +565,21 @@ function heapSendsModuleMenu(tree) {
         menuDom.appendChild(title)
         for (key in tree) {
             var ul = document.createElement('ul')
-        ul.innerHTML = key.toString()
+            var header = document.createElement('h4')
+            //ul.innerHTML = key.toString()
+            // create header for ul
+            header.innerHTML = key.toString()
+            ul.append(header)
             for (subkey in tree[key]) {
                 var li = document.createElement('li')
                 var path = tree[key][subkey].path
                 li.innerHTML = subkey.toString()
                 li.id = path
+                li.addEventListener('mouseover', function(evt){                    
+                    rmDescription()//
+                    writeModuleDescription(evt)//
+                })
+                //////////////////////////////////////////////////////////
                 li.addEventListener('click', function(evt) {
                     var data = this.id
                     socketSend('put module', data)
@@ -617,3 +632,38 @@ function heapSendsProgramMenu(tree) {
 
         document.addEventListener('click', rmListener)
     }
+
+
+    // Paloma adds
+
+    // module descriptions
+    const moduleDescriptionsObj = 
+        {
+            and : 'this is the description for and',
+            atkbreadboard: 'this is the description for atkbreadboard',
+            atkseriallink: 'this is the description for atkseriallink',
+            atkstepper: 'this is the description for akstepper',
+            webcam : 'this is description for webcam',
+            planner: 'this is the description for planner',
+            rawmove: 'this is the description for rawmove',
+            gcode: 'this is the descriprion for gcode'  
+        }
+
+    function writeModuleDescription(evt) {
+        let liRect = evt.target.getBoundingClientRect();
+        let menuDes = document.createElement('div')
+        menuDes.id = 'moduleDescription'
+        menuDes.style.left = 255 + liRect.left + 'px'
+        menuDes.style.top = liRect.top - 18 + 'px'
+        let parentEl = evt.target.parentElement
+        let headerKey = parentEl.firstChild.innerHTML
+        menuDes.innerHTML = moduleDescriptionsObj[evt.target.innerHTML]
+        wrapper.append(menuDes)
+    }
+
+    function rmDescription() {
+        let modDes = document.getElementById('moduleDescription')
+            if (modDes != null) {
+                wrapper.removeChild(modDes)
+            }
+        }
\ No newline at end of file

client/style.css

@@ -122,6 +122,14 @@ li:active{
     background-color: #303030;
 }
 
+#moduleDescription {
+	position: absolute;
+    width: 245px;
+	padding: 10px;
+    background-color: #303030;
+    color: white;
+}
+
 #programMenu {
 	position: absolute;
 	width: 245px;

package-lock.json

@@ -784,6 +784,11 @@
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
     },
+    "http": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/http/-/http-0.0.0.tgz",
+      "integrity": "sha1-huYybSnF0Dnen6xYSkVon5KfT3I="
+    },
     "http-errors": {
       "version": "1.6.3",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",