From d8916cdeec0c28aa01eab27591b7f09a74ac3bbf Mon Sep 17 00:00:00 2001
From: Akshay Aurora <akshayaurora@yahoo.com>
Date: Sun, 29 Mar 2015 14:44:39 +0200
Subject: [PATCH] Bug 1148743 - Add button to open samples in JSFiddle

---
 media/js/wiki.js | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/media/js/wiki.js b/media/js/wiki.js
index 0fdc417b0d..186be4e053 100644
--- a/media/js/wiki.js
+++ b/media/js/wiki.js
@@ -847,5 +847,53 @@
     if($('details').length){
         initDetailsTags();
     }
+    
+    function create_fiddle(title, htmlCode, cssCode, jsCode) {
+       var $form = $('<form method="post" target="_blank" action="https://jsfiddle.net/api/post/library/pure/">'
+            + '<input type="hidden" id="html" name="html" />'
+            + '<input type="hidden" id="css" name="css" />'
+            + '<input type="hidden" id="js" name="js" />'
+            + '<input type="hidden" id="panel_html" name="panel_html" value="0" />'
+            + '<input type="hidden" id="panel_css" name="panel_css" value="0" />'
+            + '<input type="hidden" id="panel_js  name="panel_js value="0" />'
+            + '<input type="hidden" id="title" name="title" value="' + title +'" />'
+            + '<input type="hidden" id="normalize_css" name="normalize_css" value="0" />'
+            + '<input type="hidden" id="wrap" name="wrap" value="d" />'
+            + '<input type="submit" />'
+        + '</form>');
+       $form.find('#html').val(htmlCode);
+       $form.find('#css').val(cssCode);
+       $form.find('#js').val(jsCode);
+       $form.submit();
+    }
+    
+    $('a.open-in-jsfiddle').on('click', function(e){
+        // don't change hash on page
+        e.stopPropagation();
+        e.preventDefault();
+        var $button = $(this);
+        var isDisabled = $button.attr('data-disabled');
+        var section = $button.attr('href').substring(1);
+        mdn.analytics.trackEvent({
+            category: 'Samples',
+            action: 'Open-JSFiddle',
+            label: section
+        });
+        // disable the button, till we open the fiddle
+        if(isDisabled == "true") return;
+        $button.attr('data-disabled', true);
+        $button.addClass('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 = section.replace('_', ' ');
+            create_fiddle(title, htmlCode, cssCode, jsCode);
+            $button.attr('data-disabled', false);
+            $button.removeClass('disabled');
+        });
+    });
 
 })(window, document, jQuery);