Highlighting

index.html

@@ -89,6 +89,12 @@
               <li id="saveButton">Find</li>
             </ul>
         </div>
+        <div class="menu" id="viewMenu">
+          <span class="menuTitle">View</span>
+            <ul class="menuContents">
+              <li id="toggleHighlight">Highlight Off</li>
+            </ul>
+        </div>
         <div class="menu" id="shareMenu">
           <span class="menuTitle">Share</span>
             <ul class="menuContents">
@@ -197,5 +203,6 @@
   <script src='resources/js/blocks.js'></script>
   <script src='resources/js/block2json.js'></script>
   <script src='resources/js/fileManagement.js'></script>
+  <script src='resources/js/menu.js'></script>
   </body>
 </html>

resources/css/blocks.scss

@@ -147,6 +147,23 @@ body {
     background:#F45D5D;
 }
 
+.highlightBlock {
+  position: relative;
+  z-index: 1;
+}
+.highlightBlock::after {
+  content: "";
+  display: block;
+  background: gold;
+  border-radius: 5px;
+  position: absolute;
+  top: -3px;
+  right: -3px;
+  bottom: -3px;
+  left: -3px;
+  z-index: -1;
+}
+
 .remove-attr {
     display:inline-block;
     width:0px;
@@ -197,4 +214,4 @@ body {
         color:black;
         cursor:text;
     }
-}
+}

resources/js/block2json.js

@@ -23,22 +23,39 @@ function blockToCSS(blockList) {
   return css;
 }
 
+function detachHtmlElem(block) {
+  // attempt at garbage collection
+  if(block.htmlElem) {
+    block.htmlElem.removeEventListener('mouseover', block.block_mouse_over);
+    block.htmlElem.removeEventListener('mouseout', block.block_mouse_out);
+    if(block.htmlElem.parentNode) block.htmlElem.parentNode.removeChild(block.htmlElem);
+    block.htmlElem = null;
+  }
+}
+
 function blockToHTML(block) {
+  var out = null;
+  detachHtmlElem(block)
+
   if(block.type !== BLOCK_TYPES.stack && block.type !== BLOCK_TYPES.cblock) {
-    return null;
+    out = null;
   } else if(block.name == 'text') {
-    return document.createTextNode(block.inputs[0].value);
+    out = document.createTextNode(block.inputs[0].value);
   } else {
-    var element = document.createElement(block.name);
+    out = document.createElement(block.name);
     for(let attr of block.attrs) {
-      if(attr.name.trim() && attr.value.trim()) element.setAttribute(attr.name, attr.value);
+      if(attr.name.trim() && attr.value.trim()) out.setAttribute(attr.name, attr.value);
     }
     for(let child of block.children) {
       let parsedChild = blockToHTML(child);
-      if(parsedChild) element.appendChild(parsedChild);
+      if(parsedChild) out.appendChild(parsedChild);
     }
-    return element;
+    block.htmlElem = out;
+
+    out.addEventListener('mouseover', block.block_mouse_over);
+    out.addEventListener('mouseout', block.block_mouse_out);
   }
+  return out;
 }
 
 function blocksToJSON(fileName) {

resources/js/blocks.js

@@ -1,6 +1,7 @@
 var selected = null, // Object of the element to be moved
     mousePos = {x: 0, y: 0}, // Stores x & y coordinates of the mouse pointer
     dragOffset = {x: 0, y: 0}, // Stores offset between dragged element and mouse
+    highlight = true;
     DEFAULT_TEXT = 'breadfish',
     SCRIPTING_AREA = $('.scriptingArea')[0];
 var blocksDatabase, // all blocks by ID. Not an array in case we decide to use md5's or something later
@@ -67,6 +68,8 @@ function BlockWrapper(inPalette) {
     || block.type == BLOCK_TYPES.cblock) {
       if(block.block_context_menu) block.elem.removeEventListener('contextmenu', block.block_context_menu);
       if(block.block_mouse_down) block.elem.removeEventListener('mousedown', block.block_mouse_down);
+      if(block.block_mouse_over) block.elem.removeEventListener('mouseover', block.block_mouse_over);
+      if(block.block_mouse_out) block.elem.removeEventListener('mouseout', block.block_mouse_out);
       if(block.block_mouse_up) block.elem.removeEventListener('mouseup', block.block_mouse_up);
       if(block.add_quicktext) block.quickText.removeEventListener('click', block.add_quicktext);
       if(block.add_attr_ev) block.addAttr.removeEventListener('click', block.add_attr_ev);
@@ -278,8 +281,8 @@ function Block(type, name, opts) {
     this.addAttr = document.createElement('span');
     this.addAttr.classList.add('add-attr');
     this.attrControls.appendChild(this.addAttr);
-    this.addAttr.addEventListener('click', block.add_attr_ev = function(e, name, value) {
-      var attr = new BlockAttribute(name, value);
+    this.addAttr.addEventListener('click', block.add_attr_ev = function(e) {
+      var attr = new BlockAttribute();
   		block.header.insertBefore(attr.elem, block.attrControls);
   		block.attrs.push(attr);
     });
@@ -347,7 +350,23 @@ function Block(type, name, opts) {
       return false;
     }
 
+    this.elem.addEventListener('mouseover', block.block_mouse_over = function(ev) {
+      if(highlight && block.htmlElem) {
+        ev.stopPropagation();
+        block.elem.classList.add('highlightBlock');
+        block.htmlElem.style.outline = '3px solid gold';
+      }
+    });
+    this.elem.addEventListener('mouseout', block.block_mouse_out = function(ev) {
+      block.elem.classList.remove('highlightBlock');
+      if(block.htmlElem) {
+        block.htmlElem.style.outline = '';
+      }
+    });
+
     this.elem.addEventListener('mousedown', block.block_mouse_down = function(ev) {
+      block.block_mouse_out();
+      detachHtmlElem(block)
       if (ev.which == 3
       || testBlockContents(ev.target)) return;
       ev.stopPropagation();

resources/js/menu.js

@@ -0,0 +1,11 @@
+// toggle highlighting in menu-item
+var toggleHighlight = document.querySelector('#toggleHighlight');
+toggleHighlight.addEventListener('click', function(e) {
+  if(highlight) {
+    highlight = false;
+    toggleHighlight.textContent = 'Highlight On';
+  } else {
+    highlight = true;
+    toggleHighlight.textContent = 'Highlight Off';
+  }
+});