5 <title><!--~$title show {~-->~$host~ Admin: <!--~listings {~-->Pages Listing<!--~}~--><!--~form {~--><!--~id {~-->Add a new page<!--~}~--><!--~id unset {~-->Edit page "~title html~"<!--~}~--><!--~}~--><!--~}~--></title>
7 <script type="text/javascript" src="code/ckeditor/ckeditor.js"></script>
9 /* icon in cke buttons */
10 .cke_button_icon.cke_button__wfpl_images_icon {
11 background-image: url(/code/ckeditor/plugins/icons.png?t=D5AC);
12 background-position: 0 -1504px;
14 .cke_wfpl_images_dialog * {
15 white-space: normal !important;
17 .cke_wfpl_images_dialog h3 {
22 .cke_wfpl_images_dialog strong {
25 .cke_wfpl_images_dialog p {
29 .cke_wfpl_images_dialog * + p {
32 .cke_wfpl_images_dialog .cke_wfpl_thumbs {
36 .cke_wfpl_thumbs .cke_wfpl_thumb {
43 display: inline-block;
46 background-position: 50% 50%;
47 background-repeat: no-repeat;
48 background-color: transparent;
49 border: 2px solid white;
51 .cke_wfpl_thumbs .cke_wfpl_thumb:hover, .cke_wfpl_thumbs .cke_wfpl_thumb.selected {
53 text-shadow: 1px 1px 2px #000;
54 box-shadow: 1px 1px 6px #444;
55 border: 2px solid #444;
58 <script type="text/javascript">
59 window.cke_wfpl_images = {
60 images: {~wfpl_images {~
62 thumb: "~image thumb_src jsdq~",
63 image: "~image image_src jsdq~",
64 image_width: "~image image_width~",
65 image_height: "~image image_height~",
66 sizes: "~sizes jsdq~",
67 caption: "~caption jsdq~"
75 function cke_wfpl_images_thumb_click(plugin_id, element, image_id) {
76 var thumbs = element.parentNode.children;
78 for (i = 0; i < thumbs.length; i++) {
80 if (thumb === element) {
81 if (thumb.className.substr(0, 9) !== 'selected ') {
82 thumb.className = 'selected ' + thumb.className;
85 if (thumb.className.substr(0, 9) === 'selected ') {
86 thumb.className = thumb.className.substr(9);
90 window.cke_wfpl_images.selected[plugin_id] = image_id;
92 function cke_wfpl_images_insert_click(plugin_id, align) {
93 var selected = window.cke_wfpl_images.selected[plugin_id];
94 var editor = window.cke_wfpl_images.editors[plugin_id];
96 var code, width, height, src, size, caption;
97 if (selected == null) {
98 console.log("no selected picture"); // FIXME
101 image = window.cke_wfpl_images.images[selected];
104 code = '<span class="wfpl_ifl"'
107 code = '<span class="wfpl_ifr"'
109 case 'centered': case 'full':
110 code = '<div class="wfpl_ic"'
113 size = image.sizes.replace(/^\s+|\s+$/g, '').split(/\s\+/)[0];
114 width = image.image_width;
115 height = image.image_height;
117 caption = image.caption;
121 if (align != 'full') {
122 var wh = size.split('x');
123 wh[0] = parseInt(wh[0]);
124 wh[1] = parseInt(wh[1]);
125 if (width / height > wh[0] / wh[1]) {
126 height = Math.round(height * wh[0] / width);
129 width = Math.round(width * wh[1] / height);
132 size = '' + wh[0] + '-' + wh[1]; // dash instead of x
133 src = src.substr(0, src.length - 4) + '-' + size + src.substr(src.length - 4);
135 code += ' style="background-image: url(/' + src + ');';
136 code += ' width: ' + width + 'px;';
137 code += ' padding-top: ' + height + 'px;';
138 code += '">' + caption;
140 case 'left': case 'right':
143 case 'centered': case 'full':
147 CKEDITOR.dialog.getCurrent().hide(); // FIXME
148 editor.insertElement(CKEDITOR.dom.element.createFromHtml(code));
150 CKEDITOR.plugins.add('wfpl_images', {
151 init: function (editor) {
152 var plugin_id = window.cke_wfpl_images.editors.length;
153 window.cke_wfpl_images.editors.push(editor);
154 window.cke_wfpl_images.selected.push(null);
156 editor.addCommand('wfpl_images', new CKEDITOR.dialogCommand('wfpl_images_dialog'));
157 editor.ui.addButton('wfpl_images', {
158 label: 'Insert Image',
159 command: 'wfpl_images',
160 toolbar: 'insert' /* which section to put this button in */
162 CKEDITOR.dialog.add('wfpl_images_dialog', function (api) {
163 // CKEDITOR.dialog.definition
165 title: 'Insert Image',
169 // FIXME unselect and remove hilight
170 // window.cke_wfpl_images.selected[plugin_id] = null;
175 label: '?not displayed',
181 html: '<div class="cke_wfpl_images_dialog">'
182 + '<h3>Step 1: Choose an image to insert:</h3>'
183 + "<div class=\"cke_wfpl_thumbs\">~wfpl_images {~ <div class=\"cke_wfpl_thumb\" onclick=\"return window.cke_wfpl_images_thumb_click("+plugin_id+", this, ~id~)\" style=\"background-image: url(~image thumb_src attr jsdq~)\">~caption empty {~~name html jsdq~~}~~caption nonempty {~~caption html jsdq~~}~</div>~}~</div>"
185 + '<p style="white-space: normal">If you\'d like to insert an image not shown above, you can <a style="color: blue; text-decoration: underline" href="admin_images?new=1" target="_blank">upload it here</a>. Sorry, it won\'t appear here until you reload this editor page (hit Save below, then "edit this page" again.)</p>'
194 label: 'Insert on Left',
195 className: 'cke_dialog_ui_button_ok',
196 onClick: function() {
197 cke_wfpl_images_insert_click(plugin_id, 'left');
203 label: 'Insert Centered',
204 className: 'cke_dialog_ui_button_ok',
205 onClick: function() {
206 cke_wfpl_images_insert_click(plugin_id, 'centered');
212 label: 'Insert on Right',
213 className: 'cke_dialog_ui_button_ok',
214 onClick: function() {
215 cke_wfpl_images_insert_click(plugin_id, 'right');
222 className: 'cke_dialog_ui_button_ok',
223 onClick: function() {
224 cke_wfpl_images_insert_click(plugin_id, 'full');
227 CKEDITOR.dialog.cancelButton
230 var image = this.getContentElement('tab1', 'image').getValue();
231 if (image === null) {
234 editor.insertHtml('<img alt="" src="' + window.wfpl_images[image].image + '">');
240 function make_wysiwyg(name) {
241 CKEDITOR.replace(name, {
242 'contentsCss': 'style.css?m=~style.css mtime~',
243 'allowedContent': true,
245 { name: 'Paragraph', element: 'p'},
246 { name: 'Page Headline', element: 'h1'},
247 { name: 'Section Headline', element: 'h2'},
248 { name: 'Subsection Headline', element: 'h3'},
249 { name: 'Tagline (under headline)', element: 'h4', attributes: { class: 'tagline'}},
250 { name: 'Quote', element: 'p', attributes: { class: 'quote'}},
251 { name: 'Quote Author', element: 'p', attributes: { class: 'attrib'}}
253 'uiColor': '#ccccff',
254 'removePlugins': 'forms,templates,smiley,pagebreak,save,newpage,preview,print',
255 'extraPlugins': 'wfpl_images',
259 ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'SpellChecker', 'Scayt'],
260 ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
262 ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'],
263 ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
264 ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
265 ['Link', 'Unlink', 'Anchor'],
266 ['wfpl_images', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak'],
268 ['Styles', 'Font', 'FontSize'],
269 ['TextColor', 'BGColor'],
270 ['Maximize', 'ShowBlocks']
280 <!--~$body show {~-->
283 <h2><!--~id unset {~-->Add a new page<!--~}~--><!--~id {~-->Edit page "~title html~"<!--~}~--></h2>
285 <form action="admin_pages" method="post"><!--~id {~--><div style="display: none"><input type="hidden" name="edit_id" value="~id attr~"></div><!--~}~-->
287 <div class="caption">Title</div>
288 <div class="field_notes">(This appears at the top of the page, in the window title-bar (by the close button) and as the headline/link of search engine results.)</div>
289 <div class="field"><input type="text" name="title" value="~title attr~"></div>
291 <div class="caption">Filename</div>
292 <div class="field_notes">(<!--~editing {~-->Careful: if you change this, be sure to update all links to this page<!--~}~--><!--~editing unset {~-->Please use only a-z, 0-9 and _ (underscore) in your filename. Please, no capitals, punctuation or spaces.<!--~}~-->)</div>
293 <div class="field"><input type="text" name="filename" value="~filename attr~"></div>
295 <div class="caption">Show in navigation links</div>
296 <div class="field_notes">(On the left of every page.)</div>
297 <div class="field"><select name="navbar"><!--~navbar options~--></select></div>
299 <div class="caption">Navigation Link Text</div>
300 <div class="field_notes">(If you'd like this page to appear in the navigation with a shorter title.)</div>
301 <div class="field"><input type="text" name="nav_title" value="~nav_title attr~"></div>
303 <div class="caption">Page Contents</div>
304 <div class="field_notes">
306 <li style="color: red; list-style: none">Please read these instructions in full:</li>
307 <li>If you don't see an editor below (with buttons in it) then please try this page in <a href="http://getfirefox.com">Mozilla FireFox</a> or <a href="http://www.google.com/chrome/">Google Chrome</a>.</li>
308 <li>If you're pasting from Microsoft Word, please use the "paste from word" button (looks like a clipboard with a "W").</li>
309 <li>To make a link, type the text to be clicked, select it, click the "Link" button (looks like a short chain) and paste the web address (where the link should point to) into the "URL" field. Exception: If you're making a link to another page on this site, please remove the "http://~$host~/" from the beginning of the "URL" field and set the "Protocol" to <other>.</li>
312 <div class="field"><textarea class="html_editor" rows="20" cols="50" id="content" name="content">~content html~</textarea><script type="text/javascript">make_wysiwyg('content');</script></div>
314 <div class="caption">Description</div>
315 <div class="field_notes">(Hidden description of this page, primarily for search engines.)</div>
316 <div class="field"><textarea rows="9" cols="22" name="description">~description html~</textarea></div>
318 <div class="caption">Keywords</div>
319 <div class="field_notes">(Hidden words (up to 30) with commas between them for search engines)</div>
320 <div class="field"><textarea rows="9" cols="22" name="keywords">~keywords html~</textarea></div>
322 <div class="caption"> </div>
323 <div class="field"><input type="submit" name="save" value="Save"></div>
327 <div class="caption"> </div>
328 <div class="field"><a href="~filename nonempty {~~filename attr~~}~~filename empty {~admin_pages~id {~?id=~id~~}~~}~">Cancel</a></div>
331 <!--~listings once {~-->
332 <!--~listings once_if {~-->
333 <p><a href="admin_pages?new=1">[Add a new page]</a></p>
335 <table cellspacing="0" cellpadding="4" border="1" summary="">
336 <tr><th>Title</th><th>Filename</th><th> </th></tr>
339 <td class="listing"><a href="admin_pages?edit_id=~id~">~title html~<!--~title empty {~--><em>(untitled)</em><!--~}~--></a></td>
340 <td class="listing"><a href="admin_pages?edit_id=~id~">~filename html~<!--~filename empty {~--><em>(offline)</em><!--~}~--></a></td>
341 <td><a href="admin_pages?admin_pages_delete_id=~id~" onclick="return confirm('Permanently delete?')">[delete this page]</a></td>
347 <!--~listings once_else {~-->
348 <p>No pages in database.</p>
351 <p><a href="admin_pages?new=1">[Add a new page]</a></p>