duplicate changes from #262

Author: mrjacobbloom

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.css

@@ -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/css/blocks.scss

@@ -41,23 +41,39 @@ function blockToHTML(block) {
   }
 }
 
-function blocksToJSON(fileName) {
-  var ext = getExt(fileName);
-  if (ext == 'html') {
-    var expArray = [];
-    for(let block of topLevelBlocks) {
-      if(block) expArray.push(block.toStringable());
+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) {
+    out = null;
+  } else if(block.name == 'text') {
+    out = document.createTextNode(block.inputs[0].value);
+  } else {
+    out = document.createElement(block.name);
+    for(let attr of block.attrs) {
+      if(attr.name.trim() && attr.value.trim()) out.setAttribute(attr.name, attr.value);
     }
-    fileData[fileName] = expArray;
-  } else if (ext == 'css') {
-    var expArray = [mainScript.toStringable()];
-    for(let block of topLevelBlocks) {
-      if(block && block != BODY && block.type != BLOCK_TYPES.CSSStart) {
-        expArray.push(block.toStringable());
-      }
+    for(let child of block.children) {
+      let parsedChild = blockToHTML(child);
+      if(parsedChild) out.appendChild(parsedChild);
     }
-    fileData[fileName] = expArray;
+    block.htmlElem = out;
+    
+    out.addEventListener('mouseover', block.block_mouse_over);
+    out.addEventListener('mouseout', block.block_mouse_out);
   }
+  return out;
 }
 
 function setFrameContent(ext) {

resources/js/block2json.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
@@ -68,6 +69,8 @@ function BlockWrapper(inPalette) {
       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_up) block.elem.removeEventListener('mouseup', block.block_mouse_up);
+      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.add_quicktext) block.quickText.removeEventListener('click', block.add_quicktext);
       if(block.add_attr_ev) block.addAttr.removeEventListener('click', block.add_attr_ev);
       if(block.remove_attr_ev) block.removeAttr.removeEventListener('click', block.remove_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/blocks.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';
+  }
+});