Watch Any* Pen Be Built

index.html

<style id="_style"></style>
<div id="_html"></div>
<pre id="_pre"></pre>
<div id="_script"></div>

<div class="intro">
  <h1>Select a pen</h1>
  <ul>
    <li>
      <a href="#" 
         title="pen#IoDhb"
         data-path="http://codepen.io/jakealbaugh/pen/IoDhb">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/pen-IoDhb.jpg" />
      </a>     
    </li>
    <li>
      <a href="#" 
         title="pen#yHfAz"
         data-path="http://codepen.io/jakealbaugh/pen/yHfAz">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/pen-yHfAz.jpg" />
      </a>
    </li>
    <li>
      <a href="#" 
         title="pen#uselA"
         data-path="http://codepen.io/jakealbaugh/pen/uselA">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/pen-uselA.jpg" />
      </a>
    </li> 
    <li>
      <a href="#" 
         title="pen#dazIH"
         data-path="http://codepen.io/jakealbaugh/pen/dazIH">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/pen-dazIH.jpg" />
      </a>
    </li> 
  </ul>
  
  <h3>or provide a pen url</h3>
  <p>
    example: http://codepen.io/USERNAME/pen/PEN_ID<br>
    <small>Pen can't have any dependencies other than jQuery</small>
  </p>
  <input id="custom-pen-path" type="text">
  <button id="custom-pen-button">Go</button>
  <div class="error"></div>
  <p><small>The simpler the pen, the more entertaining. Animations will not sync up until CSS has been fully written.<br>I refuse to promise that it will always be cool, but I will say it is always interesting. They may take a while to complete, so grab a soda and put your legs up for a bit.</small></p>
</div>

script.coffee

# error handling
error = 
	throw: () ->
    # our pen url error will be based on whether it can find the html
    $(".intro").removeClass "hidden"
    $(".intro .error").html """
      <h2>Could not load pen.</h2>
      <p>Make sure it is the right format.</p>
    """   
  clear: () ->
  	$(".intro .error").html ""
    
# toggling the intro and pre elements
toggleElements = () ->
  $(".intro").addClass "hidden"
  $("#_pre").addClass "active"

  
    
# primary draw function
drawPen = (_path) ->
  _code = []
  _current_code = 0
  # get pen files
  $.when(
    $.get("#{_path}.html", (html) ->
      # setting html string
      _code[0] = { type: "html", string: html }
      # TODO: strip script tags from html    
      return
    ).fail( () ->
      # fire off our error
    	error.throw()
    ), $.get("#{_path}.css", (css) ->
      # setting css string
      _code[1] = { type: "css", string: css }
      return
    ), $.get("#{_path}.js", (js) ->
      # setting js string
      _code[2] = { type: "js", string: js }
      return
    , "text") # important to specify text, overrides jquery's auto detect on script
  ).then ->
    # clear any existing errors
    error.clear()
    # toggle the elements
    toggleElements()

    # select our primary elements
    $pre 		  = document.getElementById "_pre"
    $style 	  = document.getElementById "_style"
    $html 	  = document.getElementById "_html"
    $script 	= document.getElementById "_script"

    
    # creating a script and running it
    runJavascript = () ->
      console.log "Running the Javascript"
      script_tag = document.createElement "script"
      script_tag.innerHTML = _code[2].string
      $script.appendChild script_tag
      
    # removing all css and readding
    refreshCSS = () ->
      console.log "Refreshing the CSS"
      _styles = $style.innerHTML
      $style.innerHTML = ""
      $style.innerHTML = _styles


    # ongoing html string
    __html = ""
    # write a single character
    writeChar = (which, type) ->
      # Writing Javascript
      if type == "js" 
				# do nothing for now
      # Writing CSS
      else if type == "css"
        $style.innerHTML += which
      # Writing HTML
      else # if type == "html"
        __html += which
        # need this to make it render as html
        el = document.createElement("div")
        el.innerHTML = __html
        $html.innerHTML = ""
        $html.appendChild el

      # add character to pre
      $pre.innerHTML += which


    # writing all the codez
    writeCode = (code, index, interval) ->
      # if first character
      if index == 0
        if _current_code != 0 then $pre.innerHTML += "\n\n\n\n"
        if code.type == "html" then $pre.innerHTML += "&lt;!-- HTML --&gt;"
        if code.type == "css" then $pre.innerHTML += "/* CSS */"
        if code.type == "js" then $pre.innerHTML += "// Javascript"
        $pre.innerHTML += "\n\n"
      # if we're still going
      if index < code.string.length
        # keep the pre scrolled to the bottom
        $pre.scrollTop = $pre.scrollHeight
        # write the character
        writeChar code.string[index++], code.type
        # call this again
        setTimeout (->
          writeCode code, index, interval
        ), interval
      else
        # if javascript, run it
        if code.type == "js" then runJavascript()
				# if css, remove all then add it back to refresh
        if code.type == "css" then refreshCSS()
        # increment up the code array index
        _current_code++
        # if we have more code to write, move to next code block
        if _current_code < _code.length 
          writeCode(_code[_current_code], 0, interval)


    # initiate the script
    writeCode(_code[0], 0, 16)
  

# clicking an option
$(".intro a").click () ->
  _path = $(this).data "path"
  drawPen(_path)
  return false

# providing a url
$("#custom-pen-button").click () ->
  _path = $("#custom-pen-path").val()
  # if there is a value in the input
  if _path != ""
    error.clear()
    drawPen(_path)
  else
    error.throw()
    
    
jakealbaughSignature()

style.scss

@import url(http://fonts.googleapis.com/css?family=Lato:300,400);

#_html { 
  z-index: 8;
  &, > div { height: inherit; } 
}

$pre-inset: 8px;
#_pre {
  position: fixed;
  width: 35%;
  z-index: 9;
  top: $pre-inset; bottom: $pre-inset; right: $pre-inset;
  margin: 0;
  font-size: 10px;
  opacity: 0.1;
  padding: 8px;
  box-sizing: border-box;
  display: none;
  transition-property: 
    opacity, background;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  &:hover { 
    opacity: 1; 
    background: rgba(255,255,255,0.95);
  }
  &.active { display: block; }
}

$font: Lato, "Helvetica Neue", Helvetica, sans-serif;
.intro {
  opacity: 1;
  margin: 60px auto 72px;
  width: 700px;
  text-align: center;
  font-family: $font;
  transition: 
    opacity 200ms, 
    transform 200ms;
  // hiding intro
  &.hidden {
    opacity: 0;
    transform: translateX(-200%);
  }
  
  // title
  h1, h3 {
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.05em;
  }
  h1 { font-size: 3em; }
  
  // pen list
  ul { 
    margin: 0 auto 2em; padding: 0;
    width: 100%;
    list-style: none;
    display: block; 
    &::after { 
      content: ""; display: table; 
      clear: both;
    }
  }
  li {
    padding: 0;
    width: 24%;
    height: 100px;
    float: left;
    & ~ li { margin-left: 4 / 3 * 1%; }
    img { 
      width: 100%; height: auto; 
      display: block;
    }
    a {
      display: block;
      border: 1px solid rgba(0,0,0,0.1);
      background: rgba(0,0,0,0.1);
      position: relative;
      &::after {
        content: "jakealbaugh\a " attr(title);
        white-space: pre;
        position: absolute;
        font-size: 0.8em;
        top: calc(50% - 1em);
        left: 0; width: 100%;
        opacity: 0;
        color: white;
      }
      &:hover {
        background: rgba(0,0,0,0.9);
        img { opacity: 0.3; }
        &::after {
          opacity: 1;
        }
      }
    }
  }
  
  // input, hint and button
  input, button {
    display: block;
    font-size: 2em;
    box-sizing: border-box;
    padding: 0.5em;
    font-family: $font;
    font-weight: 300;
  }
  input { 
    width: 100%;
    &:focus {
      outline: none;
    }
  }
  p {
    text-align: center;
    color: #AAA;
    font-weight: 300;
  }
  button {
    width: 200px;
    margin: 1em auto;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    -webkit-appearance: none;
    border: 1px solid #CCC;
    background: #2ECC71;
    color: white;
    &:hover {
      background: darken(#2ECC71,5%);
    }
  }
}

Watch Any* Pen Be Built.markdown

Watch Any* Pen Be Built

Select a pen, or provide your own. *Custom Pen can't have any dependencies other than jQuery. The simpler the pen, the more entertaining. Animations will not sync up until CSS has been fully written. They may take a while to complete, so grab a soda and put your legs up for a bit.

A Pen by Jake Albaugh on CodePen.

License.