Source

scope.bitbucket.org / tests / add-remove-runtime / index.html

Full commit
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Add-Remove-Runtime</title>
	<style>
	  html {
	    height: 100%;
    }
    
	  body {
      font-family: Arial, Helvetica, sans-serif;
      position: relative;
      margin: 0;
      padding: 10px;
      height: 100%;
      box-sizing: border-box;
    }

	  .container {
	    display: inline-block;
	    padding: 20px;
	    margin: 10px;
	    background-color: rgba(10, 10, 10, 0.4);
	    border-radius: 8px;
	    position: relative;
    }

    .close {
      position: absolute;
      right: -12px;
      top: 2px;
      color: rgb(255, 0, 94);
      text-decoration: none;
    }

    .permalink_container {
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 2;
      box-sizing: border-box;
      width: 100%;
      padding: 10px;
      background-color: #FFF;
      box-shadow: 0 0 1em #bababa;
      display: none;
    }

    #permalink {
      width: 100%;
    }

	</style>
</head>
<body>
  <form>
    <input type="text" name="iframesrc" value="http://google.no" id="iframesrc"> 
    <input type="submit" value="Add"></input>
  </form>
  <div class="log"></div>
  <div class="permalink_container">
    <p>Permalink</p>
    <input type="text" name="permalink" id="permalink">
  </div>
  <script src="http://jquery.com/src/jquery-latest.js"></script>
  <script>
    $(function(){

      var add_iframe = function(evt_or_url)
      {
        var url = $("#iframesrc").val();
        var permalink = $("#permalink");
        if (evt_or_url.preventDefault)
        {
          evt_or_url.preventDefault();
        }
        else if (typeof evt_or_url === "string")
        {
          url = evt_or_url;
        }
        if (url)
        {
          var container = $("<div>")
            .addClass("container")
            .appendTo($("body"));

          $("<a>")
            .text("x")
            .attr("href","#")
            .addClass("close")
            .click(
              (
                function(container) {
                  return function(evt) {
                    container.remove();
                    // Remove from permalink, first instance of url only, will break order
                    permalink.val(permalink.val().replace(url + ",", ""));
                    evt.preventDefault();
                  }
                }
              )(container))
            .appendTo(container);

          $("<iframe>")
            .attr("src", url)
            .appendTo(container);

          // In case the last iframe was added via ?open=, set the url in the input field
          if ($("#iframesrc").val() !== url)
          {
            $("#iframesrc").val(url);
          }

          // Make a permalink for all iframes
          $(".permalink_container").css({"display": "block"});
          if (!permalink.val())
          {
            // Put current location href, but without query
            permalink.val(location.href.replace(location.search, ""));
          }

          // Add "?open=" (once)
          if (permalink.val().indexOf("?open=") == -1)
          {
            permalink.val(permalink.val() + "?open="); // +=
          }
          permalink.val(permalink.val() + url + ","); // +=
        }
      }

      $("#iframesrc").bind("input", function(evt){
        localStorage.last_url = $(this).val();
      });
      if (localStorage.last_url)
      {
        $("#iframesrc").val(localStorage.last_url);
      }

      $("form").submit(
        function(evt)
        {
          add_iframe($("#iframesrc").val(), true);
          evt.preventDefault();
        }
      );

      $("#permalink").click(function(){
        $(this).select();
      });

      var open_via_query = location.search.replace("?open=","").split(",")
      if (open_via_query.length)
      {
        open_via_query.forEach(add_iframe);
      }
    })
  </script>
</body>
</html>