This repository has been archived by the owner on Oct 11, 2018. It is now read-only.
forked from jbolster/Stack-Fiddle
/
options.html
181 lines (169 loc) · 8.92 KB
/
options.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html>
<head>
<title>StackFiddle | Woo!</title>
<link rel="stylesheet" href="/reset.css" />
<link rel="stylesheet" href="/jquery.tagsinput.css" />
<script type="text/javascript" src="/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.tagsinput.js"></script>
<script type="text/javascript">
$(function(){
var optionsInframe = parseInt(localStorage["optionsInframe"]),
optionsframework = localStorage["options-framework-value"],
optionsContext = parseInt(localStorage["options-contextmenu"] || 1),
optionstags = localStorage["tags"];
if(optionstags){
$('#option-tags').val(optionstags);
}
if(optionsContext){
$("#option-context").attr("checked","checked");
}else{
$("#option-context").removeAttr("checked");
}
$('#option-tags').tagsInput({
'width':'450px'
});
if(optionsInframe){
$("#option-inframe").attr("checked","checked");
}else{
$("#option-inframe").removeAttr("checked");
}
if(optionsframework){
$("#js_library").val(optionsframework);
}
$("#saveButton").click(function(e){
localStorage["optionsInframe"] = $("#option-inframe").attr("checked") ? 1 : 0;
localStorage["options-contextmenu"] = $("#option-context").attr("checked") ? 1 : 0;
$framework = $("#js_library :selected");
localStorage["options-framework"] = $framework.data("framework");
localStorage["options-framework-version"] = $framework.data("version");
localStorage["options-framework-value"] = $framework.val();
localStorage["tags"] = $('#option-tags').val();
chrome.extension.sendRequest({'method':'contextmenu', 'value' : localStorage["options-contextmenu"]});
$("#saveInfo").show();
setTimeout(function(){ $("#saveInfo").fadeOut(); }, 3000);
});
});
</script>
<style>
body{ background-color: #ddd; padding: 10px;}
#content { background-color: #fff; width: 750px; padding: 20px; font-family: arial; font-size: 16px; margin: 0 auto; border: 1px solid #333; box-shadow: 5px 5px 5px #888; border-radius: 8px;padding-bottom: 30px;}
#saveInfo { display: none; }
#sorrynotmuch { font-style:italic; font-size: 12px; }
h1{ font-size: 32px; margin-bottom: 5px; }
h2{ font-size: 20px; margin-bottom: 15px; margin-top: 20px; border-bottom: 1px solid #000;}
#options { margin: 10px; padding: 10px; width: 500px; border: 1px solid #ccc;}
.note { font-size: 12px; font-style: italic; margin-left: 25px; margin-top: 5px;}
#saveSection { text-align: right; border-top: 1px solid #ccc; padding-top: 10px; margin-top: 20px;}
input{ padding: 3px;}
p { margin-left: 10px; padding-right: 10px;}
.option { margin-bottom: 10px;}
.manual { display: block; clear: both; border: 1px solid #ddd; margin: 15px;}
ol,li { list-style: decimal; margin-left: 30px; margin-right:10px; }
.tagsinput{margin:20px;}
</style>
</head>
<body>
<div id="content">
<h1>Stack Fiddle</h1>
<h2>Options</h2>
<div id="options">
<div class="option">
<label>
<input type="checkbox" id="option-context" />
Enable context menu
</label>
<p class="note">Don't like the context menu? Uncheck this to disable it.</p>
</div>
<div class="option">
<label>
<input type="checkbox" id="option-inframe" />
Detect jsFiddle links
</label>
<p class="note">When enabled, all jsFiddle links will be detected and you'll be given the option to show the fiddle embedded on the page.</p>
</div>
<div class="option">
<label>
Select library:
<select name="js_library" id="js_library">
<optgroup label="Mootools">
<option value="mootools1.3" data-framework="mootools" data-version="1.3">Mootools Core 1.3</option>
<option value="mootools1.2.5" data-framework="mootools" data-version="1.2.5">Mootools Core 1.2.5</option>
<option value="mootools1.1.2" data-framework="mootools" data-version="1.1.2">Mootools Core 1.1.2</option>
</optgroup>
<optgroup label="jQuery">
<option value="jquery1.5" data-framework="jquery" data-version="1.5" selected>jQuery 1.5</option>
<option value="jquery1.4.4" data-framework="jquery" data-version="1.4.4">jQuery 1.4.4</option>
<option value="jquery1.4.2" data-framework="jquery" data-version="1.4.2">jQuery 1.4.2</option>
<option value="jquery1.3.2" data-framework="jquery" data-version="1.3.2">jQuery 1.3.2</option>
<option value="jquery1.2.6" data-framework="jquery" data-version="1.2.6">jQuery 1.2.6</option>
</optgroup>
<optgroup label="Prototype">
<option value="prototype1.7" data-framework="prototype" data-version="1.7">Prototype 1.7</option>
<option value="prototype1.6.1.0" data-framework="prototype" data-version="1.6.1.0">Prototype 1.6.1.0</option>
</optgroup>
<optgroup label="YUI">
<option value="yui3.2.0" data-framework="yui" data-version="3.2.0">YUI Simple 3.2.0</option>
<option value="yui3.3.0" data-framework="yui" data-version="3.3.0">YUI 3.3.0</option>
<option value="yui3.2.0" data-framework="yui" data-version="3.2.0">YUI 3.2.0</option>
<option value="yui2.8.0r4" data-framework="yui" data-version="2.8.0r4">YUI 2.8.0r4</option>
</optgroup>
<optgroup label="Glow">
<option value="glow1.7.0" data-framework="glow" data-version="1.7.0">Glow Core 1.7.0</option>
</optgroup>
<optgroup label="Dojo">
<option value="Dojo1.6.0b2" data-framework="Dojo" data-version="1.6.0b2">Dojo 1.6.0b2</option>
<option value="Dojo1.5" data-framework="Dojo" data-version="1.5">Dojo 1.5</option>
<option value="Dojo1.4" data-framework="Dojo" data-version="1.4">Dojo 1.4</option>
<option value="Dojo1.3" data-framework="Dojo" data-version="1.3">Dojo 1.3</option>
</optgroup>
<optgroup label="Processing.js">
<option value="Processing1.0.0" data-framework="Processing" data-version="1.0.0">Processing.js 1.0.0</option>
<option value="Processing0.9.7" data-framework="Processing" data-version="0.9.7">Processing.js 0.9.7</option>
<option value="Processing0.6" data-framework="Processing" data-version="0.6">Processing.js 0.6</option>
</optgroup>
<optgroup label="ExtJS">
<option value="ExtJS3.1.0" data-framework="ExtJS" data-version="3.1.0">ExtJS Core 3.1.0</option>
<option value="ExtJS3.0.0" data-framework="ExtJS" data-version="3.0.0">ExtJS Core 3.0.0</option>
</optgroup>
<optgroup label="Raphael">
<option value="Raphael1.5.2" data-framework="Raphael" data-version="1.5.2">Raphael 1.5.2 (min)</option>
<option value="Raphael1.4" data-framework="Raphael" data-version="1.4">Raphael 1.4</option>
</optgroup>
<optgroup label="RightJS">
<option value="RightJS2.1.1" data-framework="RightJS" data-version="2.1.1">RightJS 2.1.1</option>
</optgroup>
</select>
</label>
<p class="note">Select your favourite library and version! This will be the default for your fiddles.</p>
</div>
<div class="option">
<label>
Apply to these tags
<input type="text" id="option-tags" value="jscript,jquery,javascript,mootools,html,css,dom,yui,prototype,dojo,extjs"/>
</label>
<p class="note">Stack Fiddle will only work on questions that have the tags above. If you want it working elsewhere then add it here. If you think I've forgotten an important one in the default list, let me know!</p>
</div>
<div id="saveSection">
<span id="saveInfo">All saved - yeay!</span>
<input type="button" id="saveButton" value="Save" />
</div>
</div>
<div class="howdoesitwork">
<h2>How does it work?</h2>
<ol>
<li>All the code blocks on the StackExchange sites now have a header. Click the link that represents the type of code you want to fiddle (click again to unset).<img class="manual" src="/Images/doc-1.png" /></li>
<li>Do it for any other code block you want to send to your fiddle.</li>
<li>After you've set one type (HTML/JS/CSS), a 'Send to jsFiddle' link appears.<img class="manual" src="/Images/doc-2.png" /></li>
<li>Click any 'Send to jsFiddle' link and off to jsFiddle your chosen code goes!</li>
</ol>
<h2>So what's this jsFiddle detection?</h2>
<p>Well - this is pretty simple. If you have this enabled then all the jsFiddle links get a little extra 'oomph'. And '[Expand]' link appears beside all the jsFiddle links. Click this and you'll see the embedded fiddle right there in the page!<img class="manual" src="/Images/doc-expandFiddle.png" /></p>
</div>
<div class="info">
<h2>Hey you!</h2>
<p>Thanks a lot for installing this extension - I hope you like it. If you have any comments then get in touch with me on Twitter (<a href="http://twitter.com/jbolster">@jbolster</a>) or <a href="http://www.bolsterweb.com">my blog</a>.</p>
</div>
</div>
</body>
</html>