Bug 1148743 - Add button to open samples in JSFiddle

mdn · Mar 29, 2015 · d8916cd · d8916cd
1 parent 4993b8f
commit d8916cd
Showing 1 changed file with 48 additions and 0 deletions.
diff --git 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);