Add link save button to Block Factory.

git-svn-id: http://blockly.googlecode.com/svn/trunk@1739 c400ca83-b69d-9dd7-9705-49c6b8615e23

apps/blockfactory/factory.js

@@ -23,12 +23,6 @@
  */
 'use strict';
 
-/**
- * The uneditable container block that everything else attaches to.
- * @type {Blockly.Block}
- */
-var rootBlock = null;
-
 /**
  * The type of the generated block.
  */
@@ -47,7 +41,11 @@ function initPreview(updateFunc) {
  * When the workspace changes, update the three other displays.
  */
 function onchange() {
-  var name = rootBlock.getFieldValue('NAME');
+  var name = '';
+  var rootBlock = getRootBlock();
+  if (rootBlock) {
+    name = rootBlock.getFieldValue('NAME');
+  }
   blockType = name.replace(/\W/g, '_').replace(/^(\d)/, '_\\1').toLowerCase();
   if (!blockType) {
     blockType = 'unnamed';
@@ -64,6 +62,8 @@ function updateLanguage() {
   // Generate name.
   var code = [];
   code.push("Blockly.Blocks['" + blockType + "'] = {");
+  var rootBlock = getRootBlock();
+  if (rootBlock) {
     code.push("  init: function() {");
     code.push("    this.setHelpUrl('http://www.example.com/');");
     // Generate colour.
@@ -127,6 +127,7 @@ function updateLanguage() {
     }
     code.push("    this.setTooltip('');");
     code.push("  }");
+  }
   code.push("};");
 
   injectCode(code, 'languagePre');
@@ -299,7 +300,10 @@ function updateGenerator() {
   }
   var language = document.getElementById('language').value;
   var code = [];
-  code.push("Blockly." + language + "['" + blockType + "'] = function(block) {");
+  code.push("Blockly." + language + "['" + blockType +
+            "'] = function(block) {");
+  var rootBlock = getRootBlock();
+  if (rootBlock) {
     // Loop through every block, and generate getters for any fields or inputs.
     var blocks = rootBlock.getDescendants();
     for (var x = 0, block; block = blocks[x]; x++) {
@@ -361,6 +365,7 @@ function updateGenerator() {
     } else {
       code.push("  return code;");
     }
+  }
   code.push("};");
 
   injectCode(code, 'generatorPre');
@@ -396,10 +401,38 @@ function injectCode(code, id) {
   pre.innerHTML = code;
 }
 
+/**
+ * Return the uneditable container block that everything else attaches to.
+ * @return {Blockly.Block}
+ */
+function getRootBlock() {
+  var blocks = Blockly.mainWorkspace.getTopBlocks(false);
+  for (var i = 0, block; block = blocks[i]; i++) {
+    if (block.type == 'factory_base') {
+      return block;
+    }
+  }
+  return null;
+}
+
 /**
  * Initialize Blockly and layout.  Called on page load.
  */
 function init() {
+  if ('BlocklyStorage' in window) {
+    BlocklyStorage.HTTPREQUEST_ERROR =
+        'There was a problem with the request.\n';
+    BlocklyStorage.LINK_ALERT =
+        'Share your blocks with this link:\n\n%1';
+    BlocklyStorage.HASH_ERROR =
+        'Sorry, "%1" doesn\'t correspond with any saved Blockly file.';
+    BlocklyStorage.XML_ERROR = 'Could not load your saved file.\n'+
+        'Perhaps it was created with a different version of Blockly?';
+    var linkButton = document.getElementById('linkButton');
+    linkButton.style.display = 'inline-block';
+    linkButton.addEventListener('click', BlocklyStorage.link);
+  }
+
   var expandList = [
     document.getElementById('blockly'),
     document.getElementById('previewFrame'),
@@ -420,11 +453,15 @@ function init() {
                  {path: '../../', toolbox: toolbox});
 
   // Create the root block.
-  rootBlock = Blockly.Block.obtain(Blockly.mainWorkspace, 'factory_base');
+  if ('BlocklyStorage' in window && window.location.hash.length > 1) {
+    BlocklyStorage.retrieveXml(window.location.hash.substring(1));
+  } else {
+    var rootBlock = Blockly.Block.obtain(Blockly.mainWorkspace, 'factory_base');
     rootBlock.initSvg();
     rootBlock.render();
     rootBlock.setMovable(false);
     rootBlock.setDeletable(false);
+  }
 
   Blockly.addChangeListener(onchange);
   document.getElementById('direction')

apps/blockfactory/index.html

@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="target-densitydpi=device-dpi, height=660, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <title>Blockly : Block Factory</title>
+  <script type="text/javascript" src="/storage.js"></script>
   <script type="text/javascript" src="factory.js"></script>
   <script type="text/javascript" src="../../blockly_compressed.js"></script>
   <script type="text/javascript" src="../../msg/messages.js"></script>
@@ -52,6 +53,25 @@
       border: #ddd 1px solid;
       overflow: scroll;
     }
+
+    #linkButton {
+      border-radius: 4px;
+      border: 1px solid #ddd;
+      background-color: #eee;
+      color: #000;
+      padding: 1px 10px;
+      margin: 1px 5px;
+      display: none;
+    }
+    #linkButton:hover {
+      box-shadow: 2px 2px 5px #888;
+    }
+    #linkButton>img {
+      opacity: 0.6;
+    }
+    #linkButton:hover>img {
+      opacity: 1;
+    }
   </style>
   <link rel="stylesheet" type="text/css" href="../prettify.css">
   <script type="text/javascript" src="../prettify.js"></script>
@@ -62,7 +82,10 @@
       <td width="50%" height="5%">
         <h1><a href="../index.html">Blockly</a> : Block Factory</h1>
       </td>
-      <td width="50%" height="5%" style="vertical-align: bottom;">
+      <td width="50%" height="5%">
+        <table>
+          <tr>
+            <td style="vertical-align: bottom;">
               <h3>Preview:
                 <select id="direction">
                   <option value="ltr">LTR</option>
@@ -70,6 +93,14 @@
                 </select>
               </h3>
             </td>
+            <td style="vertical-align: middle; text-align: right;">
+              <button id="linkButton" title="Save and link to blocks.">
+                <img src="link.png" height="21" width="21">
+              </button>
+            </td>
+          </tr>
+        </table>
+      </td>
     </tr>
     <tr>
       <td width="50%" height="95%" style="padding: 2px;">