forked from reddit-archive/reddit
/
subredditstylesheet.html
295 lines (272 loc) · 10.6 KB
/
subredditstylesheet.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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
## The contents of this file are subject to the Common Public Attribution
## License Version 1.0. (the "License"); you may not use this file except in
## compliance with the License. You may obtain a copy of the License at
## http://code.reddit.com/LICENSE. The License is based on the Mozilla Public
## License Version 1.1, but Sections 14 and 15 have been added to cover use of
## software over a computer network and provide for limited attribution for the
## Original Developer. In addition, Exhibit A has been modified to be
## consistent with Exhibit B.
##
## Software distributed under the License is distributed on an "AS IS" basis,
## WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for
## the specific language governing rights and limitations under the License.
##
## The Original Code is reddit.
##
## The Original Developer is the Initial Developer. The Initial Developer of
## the Original Code is reddit Inc.
##
## All portions of the code written by reddit are Copyright (c) 2006-2013
## reddit Inc. All Rights Reserved.
###############################################################################
<%!
from r2.lib.filters import keep_space
from r2.lib.template_helpers import add_sr, static
from r2.lib.media import s3_direct_url
import os
%>
<%namespace file="utils.html" import="error_field, image_upload"/>
<%namespace file="printablebuttons.html" import="ynbutton, toggle_button"/>
<div class="stylesheet-customize-container">
<form
onsubmit="return post_form(this, 'subreddit_stylesheet')"
name="subreddit_stylesheet" id="subreddit_stylesheet"
class="pretty-form sr-form"
action="/post/subreddit_stylesheet" method="post" >
<input type="hidden" name="r" value="${thing.site.name}" />
<input type="hidden" name="op" value="" />
<h2>${_("stylesheet")}</h2>
<input type="hidden" name="prevstyle" value="${thing.site.prev_stylesheet}"/>
${error_field("TOO_LONG", "prevstyle")}
${error_field("BAD_REVISION", "prevstyle")}
<div class="sheets">
<div style="width: 100%" class="col">
<div>
<textarea
rows="20"
cols="20"
id="stylesheet_contents"
name="stylesheet_contents"
>
${keep_space(thing.stylesheet_contents) or ''}
</textarea>
<div id="conflict_box" style="display: none">
<div id="conflict_diff"></div>
<h2 class="error">${_('Your edit will not be saved!')}</h2>
<textarea rows="20" cols="20" name="conflict_old"></textarea>
</div>
</div>
</div>
<div style="display:none" class="col">
<div>
<textarea
rows="20"
cols="20"
id="default_stylesheet"
name="default_stylesheet"
readonly="readonly"
>
</textarea>
</div>
</div>
<div class="clearleft"></div>
<div class="buttons"><span class="btn right">
${toggle_button("default-css",
_("show the default stylesheet"),
_("hide the default stylesheet"),
"showDefaultStylesheet",
"hideDefaultStylesheet")}
</span>
<button class="btn" name="save" type="submit"
onclick="this.form.op.value='save'; return true;">
${_('save')}
</button>
<button class="btn" name="preview" type="submit"
onclick="this.form.op.value='preview'; return true;">
${_('preview')}
</button>
<span class="status error"></span>
</div>
</div>
<div class="errors" style="display:none">
<h2>${_("errors")}</h2>
<ul><li></li>
<!-- populated from AJAX requests to /api/subreddit_stylesheet -->
</ul>
</div>
</form>
<div id="preview-table" style="display:none">
<h2><a name="preview">${_("preview")}</a></h2>
<table>
<tr>
<th>${_("normal link")}</th>
<td id="preview_link_normal"></td>
</tr>
<tr>
<th>${_("compressed link")}</th>
<td id="preview_link_compressed"></td>
</tr>
<tr>
<th>${_("link with thumbnail")}</th>
<td id="preview_link_media"></td>
</tr>
<tr>
<th>${_("comment")}</th>
<td id="preview_comment"></td>
</tr>
</table>
</div>
<div id="images">
<h2><a name="images">${_("images")}</a></h2>
<%call expr="image_upload('/api/upload_sr_img', '',
onchange='return file_changed(this)',
label = _('image file'), ask_type=True)">
<br/>
<label for="img-name">${_("new image name:")}</label>
<input id="img-name" name="name" value="" type="text"/>
${error_field("BAD_CSS_NAME", "name")}
<br/>
<span class="little gray">
${_("(image names should consist of alphanumeric characters and '-' only)")}
</span>
</%call>
<p class="error">
${_("Note: any changes to images here will be reflected immediately on reload and cannot be undone.")}
</p>
<script type="text/javascript">
/* <![CDATA[ */
function create_new_image(name) {
var list = $(".image-list:first");
var new_li = list.children("li:first")
.clone(true).attr("id", "")
.find(".img-name").html(name).end()
.find(".img-url").html("url(%%" + name + "%%)").end()
.find("form input[name=img_name]").val(name).end()
.find("img").attr("id", "img-preview-" + name).end();
list.append(new_li);
img = new_li.find("img");
$("#old-names").append("<option>" + name + "</option>");
return img;
}
function on_image_success(img) {
$(img).parents("li:first").fadeIn();
$(img).parent("a").attr("href", $(img).attr("src"));
}
function too_big() {
$(".IMAGE_ERROR").innerHTML = "image too big: there is a 500k cap";
$(".img-status").innerHTML = "";
}
function showDefaultStylesheet(btn) {
var default_stylesheet = $('#default_stylesheet');
/* make sure to load the default stylesheet contents from the local domain so it doesn't get caught by cross-domain rules. */
var stylesheet_url = '${add_sr(os.path.join(c.site.static_path, g.static_names.get("reddit.css", "reddit.css")), nocname=True, sr_path=False)}';
if (!default_stylesheet.data('loaded')) {
default_stylesheet.text('loading...');
$.get(stylesheet_url, function(css) {
default_stylesheet.val(css);
default_stylesheet.data('loaded', true);
})
}
$("#stylesheet_contents").parents(".col")
.animate( { width: "50%" }, function() {
default_stylesheet.parents(".col")
.css("width", "50%")
.fadeIn();
});
}
function hideDefaultStylesheet(btn) {
$("#default_stylesheet").parents(".col")
.fadeOut(function() {
$(this).css("width", "50%");
$("#stylesheet_contents").parents(".col")
.animate( { width: "100%" });
});
}
function paste_url(source) {
var txt = $(source).siblings("pre:first").html();
$("#stylesheet_contents").insertAtCursor(txt);
return false;
}
function delete_img(button) {
$(button).parents("li:first").fadeOut(function() {
$(this).remove();
})
}
function file_changed(file_input) {
$("#submit-header-img").show();
$(".img-status").html("");
if(file_input.value) {
if(! $('#img-name').val()) {
var f = file_input.value
.replace(/.*[\/\\]/, "").split('.')[0]
.replace(/[ _]/g, "-");
$('#img-name').val(f);
}
}
}
function check_name(form) {
var name = form.name.value;
var r = new RegExp(/[^a-zA-Z0-9\-]/);
if (name == "" || name.match(r)) {
$(".img-status").html("").hide();
$(".BAD_CSS_NAME").show().html("${_('bad image name')}");
return false;
}
else if(form.srfile.value) {
$(".BAD_CSS_NAME").html("").hide();
$(".IMAGE_ERROR").html("").hide();
return true;
} else {
$(".img-status").html("").hide();
$(".IMAGE_ERROR").show().html("${_('please select an image')}");
return false;
}
}
/* ]]> */
</script>
<ul id="image-preview-list" class="image-list">
<%def name="make_li(name='', img=None, prototype=False)">
<li ${"style='display:none'" if img is None else ""}>
<%
if img is not None:
if isinstance(img, int):
bucket = g.s3_old_thumb_bucket
baseurl = "http://%s" % (bucket)
if g.s3_media_direct:
baseurl = "http://%s/%s" % (s3_direct_url, bucket)
img = "%s/%s_%d.png" % \
(baseurl, c.site._fullname, img)
else:
img = static('kill.png')
%>
<a href="${img}" class="preview">
<img id="img-preview-${name}" src="${img}"
alt="Image ${name}" title="click to preview"/>
</a>
<div class="description">
<b class="img-name">
${name}
</b>
<br/>
<span>link:</span>
<pre class="img-url">url(%%${name}%%)</pre>
<br/>
<a href="javascript:void(0)" onclick="return paste_url(this)">
${_("paste into stylesheet")}
</a>
<br/>
${ynbutton(_("delete this image"), _("deleted"),
"delete_sr_img", callback = "delete_img",
hidden_data = dict(img_name = name))}
</div>
</li>
</%def>
${make_li(prototype=True)}
%for name, img_num in c.site.get_images():
${make_li(name=name, img=img_num)}
%endfor
</ul>
<iframe src="about:blank" width="600" height="200" style="display: none;"
name="upload-iframe" id="upload-iframe"></iframe>
</div>
</div>