From 852cc0c298a8cb376564690b7bd088e436a9dbd8 Mon Sep 17 00:00:00 2001
From: Akshay Aurora <akshayaurora@yahoo.com>
Date: Tue, 31 Mar 2015 13:16:55 +0530
Subject: [PATCH] Bug 1148743 - Add button to open samples in JSFiddle and
 Codepen

---
 media/js/wiki.js                      | 62 +++++++++++++++++++++++++++
 media/stylus/base/elements/forms.styl |  4 ++
 2 files changed, 66 insertions(+)

diff --git a/media/js/wiki.js b/media/js/wiki.js
index 0fdc417b0d4..863dc276b84 100644
--- a/media/js/wiki.js
+++ b/media/js/wiki.js
@@ -847,5 +847,67 @@
     if($('details').length){
         initDetailsTags();
     }
+    
+    function create_jsfiddle(title, htmlCode, cssCode, jsCode) {
+       var $form = $('<form method="post" target="_blank" action="https://jsfiddle.net/api/mdn/">'
+            + '<input type="hidden" name="html" />'
+            + '<input type="hidden" name="css" />'
+            + '<input type="hidden" name="js" />'
+            + '<input type="hidden" name="title" />'
+            + '<input type="hidden" name="wrap" value="b" />'
+            + '<input type="submit" />'
+        + '</form>');
+       $form.find('input[name=html]').val(htmlCode);
+       $form.find('input[name=css]').val(cssCode);
+       $form.find('input[name=js]').val(jsCode);
+       $form.find('input[name=title]').val(title);
+       $form.submit();
+    }
+    
+    function create_codepen(title, htmlCode, cssCode, jsCode) {
+       var $form = $('<form method="post" target="_blank" action="http://codepen.io/pen/define">'
+            + '<input type="hidden" name="data">'
+            + '<input type="submit" />'
+        + '</form>');
+       var data = {'title': title, 'html': htmlCode, 'css': cssCode, 'js': jsCode};
+       $form.find('input[name=data]').val(JSON.stringify(data));
+       $form.submit();
+    }
+           
+    function create_sample(sampleCodeHost, title, htmlCode, cssCode, jsCode) {
+       if(sampleCodeHost == 'jsfiddle') {
+            create_jsfiddle(title, htmlCode, cssCode, jsCode);
+        } else if(sampleCodeHost == 'codepen') {
+            create_codepen(title, htmlCode, cssCode, jsCode);
+        } 
+    }
+
+    $('#wikiArticle').on('click', 'button.open-in-host', function(){
+        var $button = $(this);
+        var section = $button.attr('data-section');
+        var sampleCodeHost = $button.attr('data-host');
+        
+        // track the click and sample code host
+        mdn.analytics.trackEvent({
+            category: 'Samples',
+            action: 'open-' + sampleCodeHost,
+            label: section
+        });
+        
+        // disable the button, till we open the fiddle
+        $button.attr('disabled', 'disabled');
+        var sampleUrl = window.location.href.split('#')[0] + '?section=' + section + '&raw=1';
+        $.get(sampleUrl).then(function(sample) {
+            var $sample = $('<div />').append(sample);
+            var htmlCode = $sample.find('.brush\\:.html').text();
+            var cssCode = $sample.find('.brush\\:.css').text();
+            var jsCode = $sample.find('.brush\\:.js').text();
+            var title = $sample.find('h2[name=' + section + ']').text();
+            
+            create_sample(sampleCodeHost, title, htmlCode, cssCode, jsCode);
+            
+            $button.removeAttr('disabled');
+        });
+    });
 
 })(window, document, jQuery);
diff --git a/media/stylus/base/elements/forms.styl b/media/stylus/base/elements/forms.styl
index 623848d5037..6fc5c5eda2f 100644
--- a/media/stylus/base/elements/forms.styl
+++ b/media/stylus/base/elements/forms.styl
@@ -114,3 +114,7 @@ label {
         text-decoration: none;
     }
 }
+
+.open-in-host + .open-in-host {
+    bidi-style(margin-left, ($grid-spacing / 2), margin-right, 0);
+}
\ No newline at end of file