Adds JS fiddle button to share dialog. [WIP]

content/src/controller.js

@@ -347,6 +347,15 @@ view.on('share', function() {
             modelatpos('left').filename;
       }
       opts.shareEditURL = window.location.href;
+      // Add data for sharing to a JS Fiddle.
+      if (doc.meta.html || doc.data) {
+        opts.srcCode = {
+          'html': doc.meta.html,
+          'css': doc.meta.css,
+          'text': doc.data,
+          'lang': doc.meta.type
+        };
+      }
       // Now bring up share dialog
       view.showShareDialog(opts);
     });

content/src/view.js

@@ -731,39 +731,74 @@ function showMiddleButton(which) {
   $('#middle button').tooltipster();
 }
 
-///////////////////////////////////////////////////////////////////////////
-// SHARE DIALOG
-///////////////////////////////////////////////////////////////////////////
-
-function showShareDialog(opts) {
-  if (!opts) {
-    opts = { };
-  }
-
-  // Adds a protocol ('http:') to a string path if it does not yet have one.
-  function addProtocol(path) {
-    if (/^\w+:/.test(path)) { return path; }
-    return 'http:' + path;
-  }
+// Adds a protocol ('http:') to a string path if it does not yet have one.
+function addProtocol(path) {
+  if (/^\w+:/.test(path)) { return path; }
+  return 'http:' + path;
+}
 
+// Creates the email params for sharing a program based on the options.
+function getShareEmailParams(opts) {  
+  var emailParams = {};
   var newLines = '\r\n\r\n';
-  bodyText = 'Check out this program that I created on ' + window.pencilcode.domain
-     + newLines;
+  emailParams.bodyText = 'Check out this program that I created on ' +
+     window.pencilcode.domain + newLines;
   if (opts.shareStageURL) {
-    bodyText += 'Posted program: ' + addProtocol(opts.shareStageURL) + newLines;
+    emailParams.bodyText += 'Posted program: ' +
+        addProtocol(opts.shareStageURL) + newLines;
   }
   if (opts.shareRunURL) {
-    bodyText += 'Latest program: ' + addProtocol(opts.shareRunURL) + newLines;
+    emailParams.bodyText += 'Latest program: ' + addProtocol(opts.shareRunURL) + 
+        newLines;
   }
   if (opts.shareEditURL) {
-    bodyText += 'Program code: ' + addProtocol(opts.shareEditURL) + newLines;
+    emailParams.bodyText += 'Program code: ' + addProtocol(opts.shareEditURL) + 
+        newLines;
   }
 
-  subjectText = 'Pencilcode program: ' + opts.title;
+  emailParams.subjectText = 'Pencilcode program: ' + opts.title;
 
   // Need to escape the text since it will go into a url link
-  bodyText = escape(bodyText);
-  subjectText = escape(subjectText);
+  emailParams.bodyText = escape(emailParams.bodyText);
+  emailParams.subjectText = escape(emailParams.subjectText);
+
+  return emailParams;
+}
+
+// Creates the JS Fiddle params for sharing a program over JS Fiddle.
+function getShareFiddleParams(opts) {
+  var fiddleParams = {};
+  fiddleParams.title = opts.title;
+  fiddleParams.description = 'Created with PencilCode at ' +
+      addProtocol(opts.shareStageURL) + '.';
+  if (opts.srcCode) {
+  	if (opts.srcCode.html) {
+  	  fiddleParams.panel_html = 0;
+  	  fiddleParams.html = opts.srcCode.html;
+  	}
+  	if (opts.srcCode.css) {
+  	  fiddleParams.panel_css = 0;
+  	  fiddleParams.css = opts.srcCode.css;
+  	}
+  	if (opts.srcCode.text) {
+  	  fiddleParams.panel_js = opts.srcCode.lang == 'javascript' ? 0 : 1;
+  	  fiddleParams.js = opts.srcCode.text;
+  	}
+  }
+  return fiddleParams;
+}
+
+///////////////////////////////////////////////////////////////////////////
+// SHARE DIALOG
+///////////////////////////////////////////////////////////////////////////
+
+function showShareDialog(opts) {
+  if (!opts) {
+    opts = { };
+  }
+
+  var emailParams = getShareEmailParams(opts);
+  var fiddleParams = getShareFiddleParams(opts);
 
   var embedText = null;
   if (opts.shareRunURL && !/[>"]/.test(opts.shareRunURL)) {
@@ -818,8 +853,12 @@ function showShareDialog(opts) {
           '"><img src="/image/copy.png" title="Copy"></button>' +
         '</div>' : '') +
       '</div><br>' +
-    '<button class="cancel">OK</button>' +
+    '<button class="cancel">Done</button>' +
     '<button class="ok" title="Share by email">Email</button>';
+  if (opts.srcCode) {
+    opts.content += '<button class="ok"' +
+        'title="Export to JS Fiddle">JS Fiddle</button>';
+  }
 
   opts.init = function(dialog) {
     dialog.find('a.quiet').tooltipster();
@@ -856,8 +895,21 @@ function showShareDialog(opts) {
     dialog.find('button.cancel').focus();
   }
 
-  opts.done = function(state) {
-    window.open('mailto:?body='+bodyText+'&subject='+subjectText);
+  // Called when an 'ok' button is clicked.
+  // The args are the state of the dialog and the innerHTML
+  // of the 'ok' button, which can be used to differentiate
+  // between multiple 'ok' buttons.
+  opts.done = function(state, innerHTML) {
+    if (innerHTML == 'Email') {
+      window.open('mailto:?body=' + emailParams.bodyText + '&subject=' +
+          emailParams.subjectText);
+    } else if (innerHTML == 'JS Fiddle') {
+      window.console.log(fiddleParams);
+      // POST to http://jsfiddle.net/api/post/library/pure/ with fiddleParams as the
+      // POST params.
+    } else {
+      window.console.log('Error: unknown button clicked.');
+    }
   }
 
   showDialog(opts);
@@ -920,6 +972,8 @@ function showDialog(opts) {
       }
     }
   }
+
+  // Gets the current state of the dialog.
   function state() {
     var retVal;
 
@@ -947,7 +1001,7 @@ function showDialog(opts) {
     validate();
     if (!dialog.find('button.ok').is(':disabled') &&
         opts.done) {
-      opts.done(state());
+      opts.done(state(), this.innerHTML);
     }
   });
   overlay.on('click', function(e) {
@@ -1775,7 +1829,11 @@ function showPaneEditorLanguagesDialog(pane) {
     }
   }
 
-  opts.done = function(state) {
+  // Called when an 'ok' button is clicked.
+  // The args are the state of the dialog and the innerHTML
+  // of the 'ok' button, which can be used to differentiate
+  // between multiple 'ok' buttons.
+  opts.done = function(state, innerHTML) {
     state.update({cancel:true});
     var change = false;
     if (state.lang && state.lang != visibleMimeType) {