From 6604fbf67171547f033660fb6f455548985b3f0f Mon Sep 17 00:00:00 2001
From: Jacob Bloom <mr.jacob.bloom@gmail.com>
Date: Thu, 4 May 2017 23:36:05 -0600
Subject: [PATCH 1/2] duplicate changes from #262

---
 index.html                 |  7 ++++++
 resources/css/blocks.css   | 16 ++++++++++++++
 resources/css/blocks.scss  | 19 +++++++++++++++-
 resources/js/block2json.js | 44 ++++++++++++++++++++++++++------------
 resources/js/blocks.js     | 23 ++++++++++++++++++--
 resources/js/menu.js       | 11 ++++++++++
 6 files changed, 103 insertions(+), 17 deletions(-)
 create mode 100644 resources/js/menu.js

diff --git a/index.html b/index.html
index 9bd6295..4d73a0d 100644
--- a/index.html
+++ b/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>
diff --git a/resources/css/blocks.css b/resources/css/blocks.css
index 93d9a4a..e48766b 100644
--- a/resources/css/blocks.css
+++ b/resources/css/blocks.css
@@ -141,6 +141,22 @@ body {
 .c-wrapper.zebra > li, .c-wrapper.zebra > ul {
   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;
diff --git a/resources/css/blocks.scss b/resources/css/blocks.scss
index 7ecb942..ab8ca3e 100644
--- a/resources/css/blocks.scss
+++ b/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;
     }
-}
\ No newline at end of file
+}
diff --git a/resources/js/block2json.js b/resources/js/block2json.js
index d94795a..9550ca2 100644
--- a/resources/js/block2json.js
+++ b/resources/js/block2json.js
@@ -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) {
diff --git a/resources/js/blocks.js b/resources/js/blocks.js
index 22177eb..ff3ab5d 100644
--- a/resources/js/blocks.js
+++ b/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
@@ -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();
diff --git a/resources/js/menu.js b/resources/js/menu.js
new file mode 100644
index 0000000..dbb0191
--- /dev/null
+++ b/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';
+  }
+});

From 8482242d29656b3188258f525b9ef737366967cc Mon Sep 17 00:00:00 2001
From: Jacob Bloom <mr.jacob.bloom@gmail.com>
Date: Thu, 4 May 2017 23:40:19 -0600
Subject: [PATCH 2/2] broke a thing, my b

---
 resources/js/block2json.js | 37 +++++++++++++++++++------------------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/resources/js/block2json.js b/resources/js/block2json.js
index 9550ca2..5c1dab1 100644
--- a/resources/js/block2json.js
+++ b/resources/js/block2json.js
@@ -23,24 +23,6 @@ function blockToCSS(blockList) {
   return css;
 }
 
-function blockToHTML(block) {
-  if(block.type !== BLOCK_TYPES.stack && block.type !== BLOCK_TYPES.cblock) {
-    return null;
-  } else if(block.name == 'text') {
-    return document.createTextNode(block.inputs[0].value);
-  } else {
-    var element = document.createElement(block.name);
-    for(let attr of block.attrs) {
-      if(attr.name.trim() && attr.value.trim()) element.setAttribute(attr.name, attr.value);
-    }
-    for(let child of block.children) {
-      let parsedChild = blockToHTML(child);
-      if(parsedChild) element.appendChild(parsedChild);
-    }
-    return element;
-  }
-}
-
 function detachHtmlElem(block) {
   // attempt at garbage collection
   if(block.htmlElem) {
@@ -76,6 +58,25 @@ function blockToHTML(block) {
   return out;
 }
 
+function blocksToJSON(fileName) {
+  var ext = getExt(fileName);
+  if (ext == 'html') {
+    var expArray = [];
+    for(let block of topLevelBlocks) {
+      if(block) expArray.push(block.toStringable());
+    }
+    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());
+      }
+    }
+    fileData[fileName] = expArray;
+  }
+}
+
 function setFrameContent(ext) {
 	ext = ext || getExt(currentFile);
 	var previewElement = document.querySelector('.previewBody');