willmcneilly/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by willmcneilly</title>

  <script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
  <style type='text/css'>
    #my-button {
        width: 100px;
        height: 100px;
        font-size: 15px;
        color: #fff;
        text-align: center;
        background-color: black;
    }

    #yolo-1 {
        display:block;
        background-color: red;
        color: #fff;
        padding: 2px;
        border-radius: 20px;
        font-size: 30px;
    }

    #yoyo {
      display:inline;
      background-color: blue;
      color: green;
    }
  </style>


<script type='text/javascript'>//<![CDATA[
$('document').ready(function(){

    "use strict"

    var pastDOMNode = null;


    function createStylesheet(stylesheetID) {
        return $("head").append("<style id='"+ stylesheetID +"' type='text/css'></style>");
    }

    function wrapInCSSBlock(selector, properties) {
        return selector + '{' + properties + '}';
    }

    function getComputedStylesForElement(ele) {
        return window.getComputedStyle(ele).cssText;
    }

    function deepCloneEle(ele) {
      return $(ele).clone();
    }

    function newSnippet() {
      return {snippetID: undefined, html: undefined, cssBuffer: undefined};
    }


    function generateID() {
      // always start with a letter (for DOM friendlyness)
      var idstr=String.fromCharCode(Math.floor((Math.random()*25)+65));
      do {
          // between numbers and characters (48 is 0 and 90 is Z (42-48 = 90)
          var ascicode=Math.floor((Math.random()*42)+48);
          if (ascicode<58 || ascicode>64){
              // exclude all chars between : (58) and @ (64)
              idstr+=String.fromCharCode(ascicode);
          }
      } while (idstr.length<32);

      return (idstr);
    }

    function createSnippet(ele) {
      // should iterate through cloned ele as we'll read
      // the styles and add a new id as we go
      var wrappedEle = ele.wrapAll('<div></div>').parent();
      var snippetID = generateID();
      var nodeNum=0;
      var cssBlockBuffer = [];

      var snippet = newSnippet();
      $('body').append(wrappedEle);
      wrappedEle.find('*').each(function() {
        var eleID = snippetID + '-' + nodeNum;
        var cssProperties = getComputedStylesForElement($(this)[0]);
        var cssBlock = wrapInCSSBlock('#' + eleID, cssProperties);
        cssBlockBuffer.push(cssBlock);
        $(this).attr('data-snippet-id', eleID);
        nodeNum += 1;
      });

      wrappedEle.find('*').each(function() {
        $(this).removeClass();
        $(this).attr('id', $(this).attr('data-snippet-id'));
      });

      // clone the html
      // render to page
      // loop through each node and extract computed styles
      // don't change the classes or ids, instead set id as data attribute
      // finally go through and remove existing classes and ids replacing with
      // info from data attribute. Two loops is quite wasteful but not sure how
      // else to keep inherited styles.

      snippet.html = wrappedEle.html();
      snippet.cssBuffer = cssBlockBuffer;
      snippet.snippetID = snippetID;
      wrappedEle.remove();
      return snippet;
    }

    function outputBufferAsString(cssBlockArr) {
        var blockAsString = "";
        cssBlockArr.forEach(function(block){
          blockAsString += block;
        })
        return blockAsString;
    }

    function injectIntoStylesheet($stylesheet, cssText) {
      var css = " #my-button-2 span#yolo-2{ display:block; background-color: red; color: #fff; padding: 2px; border-radius: 20px;}"
      cssText += css;
        $stylesheet.text(cssText);
        $('#css-output').text(cssText);
    }

    function cloneHTMLBlock(blockID){

    }

    function insertHTMLBlockIntoDom(block){

    }

    function createWebpage(html, css) {
      return [
        "<!DOCTYPE html>",
        "<html>",
        "  <head>",
        "    <style>",
        css,
        "    </style>",
        "  </head>",
        "  <body>",
        html,
        "  </body>",
        "</html>"
      ].join('\n');
    }

    function updateIframe(ele) {
      var clonedElement = deepCloneEle($(ele));
      var mySnippet = createSnippet(clonedElement);

      var snippetContent = createWebpage(mySnippet.html, mySnippet.cssBuffer.join(' '));
      var doc = document.getElementById('snippet-preview').contentWindow.document;
      doc.open();
      doc.write(snippetContent);
      doc.close();
    }

    function createOutline() {

      $(document).on('click', function(event) {
        if(pastDOMNode !== null) {

          if(event.target === pastDOMNode[0] ) {
            console.log('click fired' + event.target);
            updateIframe(event.target)
          }
        }

      })
      $('*').on('mouseover', function(event) {
        event.stopPropagation();
        if(pastDOMNode === null) {
          $(this).css({'outline': '2px dashed Magenta'})
          pastDOMNode = $(this);
        } else {
          if(pastDOMNode[0] !== $(this)[0]) {
            console.log($(this));
            $(this).css({'outline': '2px dashed Magenta'})
            pastDOMNode.css({'outline': 'none'});
            pastDOMNode = $(this);
          }
          else {
            pastDOMNode = $(this);
          }
        }
      });

    }

  createOutline();
});

</script>


</head>
<body>
  <div id="my-button">Button <span id="yolo-1">Yo <span id="yoyo">yoyoyoyo<span></span></div>

  <iframe id="snippet-preview"><iframe>

</body>


</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title> - jsFiddle demo by willmcneilly</title>

	<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
	<style type='text/css'>
	#my-button {
	width: 100px;
	height: 100px;
	font-size: 15px;
	color: #fff;
	text-align: center;
	background-color: black;
	}

	#yolo-1 {
	display:block;
	background-color: red;
	color: #fff;
	padding: 2px;
	border-radius: 20px;
	font-size: 30px;
	}

	#yoyo {
	display:inline;
	background-color: blue;
	color: green;
	}
	</style>



	<script type='text/javascript'>//<![CDATA[
	$('document').ready(function(){

	"use strict"

	var pastDOMNode = null;


	function createStylesheet(stylesheetID) {
	return $("head").append("<style id='"+ stylesheetID +"' type='text/css'></style>");
	}

	function wrapInCSSBlock(selector, properties) {
	return selector + '{' + properties + '}';
	}

	function getComputedStylesForElement(ele) {
	return window.getComputedStyle(ele).cssText;
	}

	function deepCloneEle(ele) {
	return $(ele).clone();
	}

	function newSnippet() {
	return {snippetID: undefined, html: undefined, cssBuffer: undefined};
	}



	function generateID() {
	// always start with a letter (for DOM friendlyness)
	var idstr=String.fromCharCode(Math.floor((Math.random()*25)+65));
	do {
	// between numbers and characters (48 is 0 and 90 is Z (42-48 = 90)
	var ascicode=Math.floor((Math.random()*42)+48);
	if (ascicode<58 \|\| ascicode>64){
	// exclude all chars between : (58) and @ (64)
	idstr+=String.fromCharCode(ascicode);
	}
	} while (idstr.length<32);

	return (idstr);
	}

	function createSnippet(ele) {
	// should iterate through cloned ele as we'll read
	// the styles and add a new id as we go
	var wrappedEle = ele.wrapAll('<div></div>').parent();
	var snippetID = generateID();
	var nodeNum=0;
	var cssBlockBuffer = [];

	var snippet = newSnippet();
	$('body').append(wrappedEle);
	wrappedEle.find('*').each(function() {
	var eleID = snippetID + '-' + nodeNum;
	var cssProperties = getComputedStylesForElement($(this)[0]);
	var cssBlock = wrapInCSSBlock('#' + eleID, cssProperties);
	cssBlockBuffer.push(cssBlock);
	$(this).attr('data-snippet-id', eleID);
	nodeNum += 1;
	});

	wrappedEle.find('*').each(function() {
	$(this).removeClass();
	$(this).attr('id', $(this).attr('data-snippet-id'));
	});

	// clone the html
	// render to page
	// loop through each node and extract computed styles
	// don't change the classes or ids, instead set id as data attribute
	// finally go through and remove existing classes and ids replacing with
	// info from data attribute. Two loops is quite wasteful but not sure how
	// else to keep inherited styles.

	snippet.html = wrappedEle.html();
	snippet.cssBuffer = cssBlockBuffer;
	snippet.snippetID = snippetID;
	wrappedEle.remove();
	return snippet;
	}

	function outputBufferAsString(cssBlockArr) {
	var blockAsString = "";
	cssBlockArr.forEach(function(block){
	blockAsString += block;
	})
	return blockAsString;
	}

	function injectIntoStylesheet($stylesheet, cssText) {
	var css = " #my-button-2 span#yolo-2{ display:block; background-color: red; color: #fff; padding: 2px; border-radius: 20px;}"
	cssText += css;
	$stylesheet.text(cssText);
	$('#css-output').text(cssText);
	}

	function cloneHTMLBlock(blockID){

	}

	function insertHTMLBlockIntoDom(block){

	}

	function createWebpage(html, css) {
	return [
	"<!DOCTYPE html>",
	"<html>",
	" <head>",
	" <style>",
	css,
	" </style>",
	" </head>",
	" <body>",
	html,
	" </body>",
	"</html>"
	].join('\n');
	}

	function updateIframe(ele) {
	var clonedElement = deepCloneEle($(ele));
	var mySnippet = createSnippet(clonedElement);

	var snippetContent = createWebpage(mySnippet.html, mySnippet.cssBuffer.join(' '));
	var doc = document.getElementById('snippet-preview').contentWindow.document;
	doc.open();
	doc.write(snippetContent);
	doc.close();
	}

	function createOutline() {

	$(document).on('click', function(event) {
	if(pastDOMNode !== null) {

	if(event.target === pastDOMNode[0] ) {
	console.log('click fired' + event.target);
	updateIframe(event.target)
	}
	}

	})
	$('*').on('mouseover', function(event) {
	event.stopPropagation();
	if(pastDOMNode === null) {
	$(this).css({'outline': '2px dashed Magenta'})
	pastDOMNode = $(this);
	} else {
	if(pastDOMNode[0] !== $(this)[0]) {
	console.log($(this));
	$(this).css({'outline': '2px dashed Magenta'})
	pastDOMNode.css({'outline': 'none'});
	pastDOMNode = $(this);
	}
	else {
	pastDOMNode = $(this);
	}
	}
	});

	}

	createOutline();
	});

	</script>


	</head>
	<body>
	<div id="my-button">Button <span id="yolo-1">Yo <span id="yoyo">yoyoyoyo<span></span></div>

	<iframe id="snippet-preview"><iframe>

	</body>


	</html>