From 28217bfffa837f8e7edd7d8c3fa67d42ada702cd Mon Sep 17 00:00:00 2001
From: Akshay Aurora <akshayaurora@yahoo.com>
Date: Fri, 3 Apr 2015 00:07:41 +0530
Subject: [PATCH 1/2] 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..2ced8627d77 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, .brush\\:.html\\;').text();
+            var cssCode = $sample.find('.brush\\:.css, .brush\\:.css\\;').text();
+            var jsCode = $sample.find('.brush\\:.js, .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..831c8df89f5 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);
+}

From 3dce8f352a816498b20cf84a84204ff4b3d94c1a Mon Sep 17 00:00:00 2001
From: Akshay Aurora <akshayaurora@yahoo.com>
Date: Thu, 9 Apr 2015 00:26:54 +0530
Subject: [PATCH 2/2] Bug 1148743 - Move code to insert buttons in wiki.js

---
 media/js/wiki.js | 35 +++++++++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/media/js/wiki.js b/media/js/wiki.js
index 2ced8627d77..55d090b2e39 100644
--- a/media/js/wiki.js
+++ b/media/js/wiki.js
@@ -848,7 +848,7 @@
         initDetailsTags();
     }
     
-    function create_jsfiddle(title, htmlCode, cssCode, jsCode) {
+    function openJSFiddle(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" />'
@@ -864,7 +864,7 @@
        $form.submit();
     }
     
-    function create_codepen(title, htmlCode, cssCode, jsCode) {
+    function openCodepen(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" />'
@@ -874,11 +874,11 @@
        $form.submit();
     }
            
-    function create_sample(sampleCodeHost, title, htmlCode, cssCode, jsCode) {
+    function openSample(sampleCodeHost, title, htmlCode, cssCode, jsCode) {
        if(sampleCodeHost == 'jsfiddle') {
-            create_jsfiddle(title, htmlCode, cssCode, jsCode);
+            openJSFiddle(title, htmlCode, cssCode, jsCode);
         } else if(sampleCodeHost == 'codepen') {
-            create_codepen(title, htmlCode, cssCode, jsCode);
+            openCodepen(title, htmlCode, cssCode, jsCode);
         } 
     }
 
@@ -904,10 +904,33 @@
             var jsCode = $sample.find('.brush\\:.js, .brush\\:.js\\;').text();
             var title = $sample.find('h2[name=' + section + ']').text();
             
-            create_sample(sampleCodeHost, title, htmlCode, cssCode, jsCode);
+            openSample(sampleCodeHost, title, htmlCode, cssCode, jsCode);
             
             $button.removeAttr('disabled');
         });
     });
 
+    function createSampleButtons(section, sites) {
+        var buttons = '<div style="margin-bottom:10px;">';
+        sites.forEach(function(site){
+            // convert sitename to lowercase for icon name and host identifier
+            buttons += '<button class="open-in-host" data-host="'+ site.toLowerCase() +'" data-section="' + 
+                section + '"><i aria-hidden="true" class="icon-'+ site.toLowerCase() +'"></i> Open in ' + 
+                site +'</button>';
+        });
+        buttons += '</div>';
+        return buttons;
+    }
+
+    mdn.insertSampleButtons = function(sites) {
+        // using id to get sample code section since macros discard other attributes
+        $('.sample-code-frame').before(function() {
+            var section = $(this).attr('id').substring("frame_".length);
+            return createSampleButtons(section, sites);
+        });
+        $('.sample-code-table').before(function(){
+            var section = $(this).find('iframe').attr('id').substring("frame_".length);
+            return createSampleButtons(section, sites);
+        }); 
+    }
 })(window, document, jQuery);