-
Notifications
You must be signed in to change notification settings - Fork 679
Bug 1148743 - Add button to open samples in JSFiddle #3147
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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">' | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same here -- let's create these elements programatically There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think creating elements programatically will make the code too long and unreadable. But I'm happy to do it, if this breaks our style guide. Also, should I move my code into separate file. IIRC, we want to waffle flag this feature as well as A/B test. Is this part as simple as creating separate js file, or do I need to do waffle flag checking in js also? Let me know if there is anything else that needs to be fixed. I want this feature in production asap :) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @darkwing ^^ There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let's waffle this, please There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Just to be sure, did you see that the buttons need to be manually inserted with JS? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Would it be suffice to move the code to a new file for waffle flag or is there more to it? Can you link me to a commit that does something similar? |
||
+ '<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(); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @darkwing Will these selectors match all our code sample snippets? I have written selectors for the following 2 variations // Case 1
<pre class="brush: js"></pre>
// Case 2
<pre class="brush: js; highlight:[7]"></pre> There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Also, I'm not sure if converting code to base64 is necessary. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I was wondering the same thing. What do you think, @darkwing? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It is not - see example in https://jsfiddle.net/zalun/mk29ttc2/ There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
12:09 <davidwalsh> I believe so |
||
var title = $sample.find('h2[name=' + section + ']').text(); | ||
|
||
create_sample(sampleCodeHost, title, htmlCode, cssCode, jsCode); | ||
|
||
$button.removeAttr('disabled'); | ||
}); | ||
}); | ||
|
||
})(window, document, jQuery); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Instead of a large string, let's create the elements with JS. We retrieve most of them to set their values anyway.