JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
don't overwrite .centerer vmargin
[wfpl-cms.git] / admin_pages.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5         <title><!--~$title show {~-->~$host~ Admin: <!--~listing {~-->Manage Pages<!--~}~--><!--~form {~--><!--~id unset {~-->Add a new page<!--~}~--><!--~id {~-->Edit page "~title html~"<!--~}~--><!--~}~--><!--~}~--></title>
6         <!--~$head {~-->
7         <script src="inc/ckeditor/ckeditor.js?t=F0RD"></script>
8         <style>
9                 /* icon in cke buttons */
10                 .cke_button_icon.cke_button__wfpl_images_icon {
11                         background-image: url(/inc/ckeditor/plugins/icons.png?t=F0RD);
12                         background-position: 0 -936px;
13                 }
14                 .cke_wfpl_images_dialog * {
15                         white-space: normal !important;
16                 }
17                 .cke_wfpl_images_dialog h3 {
18                         margin-top: 10px;
19                         font-weight: bold;
20                         font-size: 18px;
21                 }
22                 .cke_wfpl_images_dialog strong {
23                         color: inherit;
24                 }
25                 .cke_wfpl_images_dialog p {
26                         font-size: 12px;
27                         line-height: 16px;
28                 }
29                 .cke_wfpl_images_dialog * + p {
30                         padding-top: 5px;
31                 }
32                 .cke_wfpl_images_dialog * a {
33                         text-decoration: underline;
34                         color: blue;
35                 }
36                 .cke_wfpl_images_dialog .cke_wfpl_thumbs {
37                         height: 270px;
38                         overflow-y: scroll;
39                 }
40                 .cke_wfpl_thumbs .cke_wfpl_thumb {
41                         width: 50px;
42                         height: 50px;
43                         padding: 10px;
44                         color: transparent;
45                         font-size: 10px;
46                         font-weight: bold;
47                         display: inline-block;
48                         overflow: hidden;
49                         text-align: center;
50                         background-size: contain;
51                         background-position: 50% 50%;
52                         background-repeat: no-repeat;
53                         background-color: transparent;
54                         border: 2px solid white;
55                 }
56                 .cke_wfpl_thumbs .cke_wfpl_thumb:hover, .cke_wfpl_thumbs .cke_wfpl_thumb.selected {
57                         color: white;
58                         text-shadow: 1px 1px 2px #000;
59                         box-shadow: 1px 1px 6px #444;
60                         border: 2px solid #444;
61                 }
62         </style>
63         <script>
64                 window.cke_wfpl_images = {
65                         images: ~wfpl_images_json~,
66                         full_width: ~wfpl_image_width_full~,
67                         small_width: ~wfpl_image_width_small~,
68                         thumb_width: ~wfpl_image_width_thumb~,
69                         next_id: 0,
70                         selected: [],
71                         editors: []
72                 };
73                 var enc_html = function(str) {
74                         return str.replace(/[<>&]/g, function(i) { return '&#' + i.charCodeAt(0) + ';'; });
75                 };
76                 function cke_wfpl_images_thumb_click(plugin_id, element, image_id) {
77                         var thumbs = element.parentNode.children;
78                         var i, thumb;
79                         for (i = 0; i < thumbs.length; i++) {
80                                 thumb = thumbs[i];
81                                 if (thumb === element) {
82                                         if (thumb.className.substr(0, 9) !== 'selected ') {
83                                                 thumb.className = 'selected ' + thumb.className;
84                                         }
85                                 } else {
86                                         if (thumb.className.substr(0, 9) === 'selected ') {
87                                                 thumb.className = thumb.className.substr(9);
88                                         }
89                                 }
90                         }
91                         window.cke_wfpl_images.selected[plugin_id] = image_id;
92                 }
93                 function cke_wfpl_images_insert_click(plugin_id, align) {
94                         var selected = window.cke_wfpl_images.selected[plugin_id];
95                         var editor = window.cke_wfpl_images.editors[plugin_id];
96                         var image;
97                         var code, src, caption;
98                         if (selected == null) {
99                                 CKEDITOR.dialog.getCurrent().hide();
100                                 return;
101                         }
102                         image = window.cke_wfpl_images.images[selected];
103                         switch(align) {
104                                 case 'left':
105                                         code = '<div class="wfpl_li">'
106                                 break;
107                                 case 'centered':
108                                         code = '<div class="wfpl_ci">'
109                                 break;
110                                 case 'right':
111                                         code = '<div class="wfpl_ri">'
112                                 break;
113                                 case 'full':
114                                         code = '<div class="wfpl_fi">'
115                                 break;
116                         }
117                         code += '<div class="wfpl_i"'
118                         src =
119                                 image.src.substr(0, image.src.length - 4)
120                                 + 'w'
121                                 + window.cke_wfpl_images[align == 'full' ? 'full_width' : 'small_width']
122                                 + image.src.substr(image.src.length - 4);
123                         if (image.caption == '') {
124                                 caption = '&nbsp;';
125                         } else {
126                                 caption = enc_html(image.caption);
127                         }
128                         code += ' style="background-image: url(/' + src + ');';
129                         code += ' padding-top: ' + image.aspect;
130                         code += '">&nbsp</div>' + caption;
131                         code += '</div>'
132                         CKEDITOR.dialog.getCurrent().hide();
133                         CKEDITOR.currentInstance.insertElement(CKEDITOR.dom.element.createFromHtml(code));
134                 }
135                 CKEDITOR.plugins.add('wfpl_images', {
136                         init: function (editor) {
137                                 var plugin_id = window.cke_wfpl_images.editors.length;
138                                 window.cke_wfpl_images.editors.push(editor);
139                                 window.cke_wfpl_images.selected.push(window.cke_wfpl_images.images.length > 0 ? 0 : null);
140
141                                 editor.addCommand('wfpl_images', new CKEDITOR.dialogCommand('wfpl_images_dialog'));
142                                 editor.ui.addButton('wfpl_images', {
143                                         label: 'Insert Image',
144                                         command: 'wfpl_images',
145                                         toolbar: 'insert'
146                                 });
147                                 CKEDITOR.dialog.add('wfpl_images_dialog', function (api) {
148                                         var i, im, selected, thumbs;
149                                         selected = 'selected ';
150                                         thumbs = '<div class="cke_wfpl_thumbs">'
151                                         for (i in window.cke_wfpl_images.images) {
152                                                 im = window.cke_wfpl_images.images[i];
153                                                 thumbs += '<div class="'+selected+'cke_wfpl_thumb" onclick="return window.cke_wfpl_images_thumb_click('+plugin_id+', this, '+im.id+')" style="background-image: url('+im.src.substr(0, im.src.length - 4) + 'w' + window.cke_wfpl_images.thumb_width + im.src.substr(im.src.length - 4) + ')">'+ enc_html(im.name.length > 0 ? im.name : im.caption) + '</div>';
154                                                 selected = '';
155                                         }
156                                         thumbs += '</div>'
157                                         return {
158                                                 title: 'Insert Image',
159                                                 minWidth: 700,
160                                                 minHeight: 350,
161                                                 contents: [
162                                                         {
163                                                                 expand: true,
164                                                                 padding: 0,
165                                                                 elements: [
166                                                                         {
167                                                                                 type: 'html',
168                                                                                 html: '<div class="cke_wfpl_images_dialog">'
169                                                                                         + '<h3>Step 1: Choose an image to insert:</h3>'
170                                                                                         + thumbs
171                                                                                 + '<p>If you\'d like to insert an image not shown above, you can <a 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>'
172                                                                                 + '</div>'
173                                                                         }
174                                                                 ]
175                                                         }
176                                                 ],
177                                                 buttons: [
178                                                         {
179                                                                 type: 'button',
180                                                                 label: 'Insert on Left',
181                                                                 className: 'cke_dialog_ui_button_ok',
182                                                                 onClick: function() {
183                                                                         cke_wfpl_images_insert_click(plugin_id, 'left');
184                                                                 }
185                                                         },
186                                                         {
187                                                                 type: 'button',
188                                                                 label: 'Insert Centered',
189                                                                 className: 'cke_dialog_ui_button_ok',
190                                                                 onClick: function() {
191                                                                         cke_wfpl_images_insert_click(plugin_id, 'centered');
192                                                                 }
193                                                         },
194                                                         {
195                                                                 type: 'button',
196                                                                 label: 'Insert on Right',
197                                                                 className: 'cke_dialog_ui_button_ok',
198                                                                 onClick: function() {
199                                                                         cke_wfpl_images_insert_click(plugin_id, 'right');
200                                                                 }
201                                                         },
202                                                         {
203                                                                 type: 'button',
204                                                                 label: 'Insert BIG',
205                                                                 className: 'cke_dialog_ui_button_ok',
206                                                                 onClick: function() {
207                                                                         cke_wfpl_images_insert_click(plugin_id, 'full');
208                                                                 }
209                                                         },
210                                                         CKEDITOR.dialog.cancelButton
211                                                 ]
212                                         };
213                                 });
214                         }
215                 });
216                 function make_wysiwyg(name, bodyid_postfix) {
217                         CKEDITOR.replace(name, {
218                                 'contentsCss': 'css.css?m=~css.css mtime~',
219                                 'allowedContent': true,
220                                 bodyId: '~$basename~' + '_wysiwyg_' + (bodyid_postfix ? bodyid_postfix : name),
221                                 'stylesSet': [
222                                         { name: 'Paragraph', element: 'p'},
223                                         { name: 'Page Headline', element: 'h1'},
224                                         { name: 'Section Headline', element: 'h2'},
225                                         { name: 'Subsection Headline', element: 'h3'},
226                                         { name: 'Tagline (under headline)', element: 'h4', attributes: { class: 'tagline'}},
227                                         { name: 'Quote', element: 'p', attributes: { class: 'quote'}},
228                                         { name: 'Quote Author', element: 'p', attributes: { class: 'attrib'}},
229                                         { name: 'div (generic box)', element: 'div'}
230                                 ],
231                                 'uiColor': '#ccccff',
232                                 'removePlugins': 'forms,templates,smiley,pagebreak,save,newpage,preview,print',
233                                 'extraPlugins': 'wfpl_images',
234                                 'height': '300px',
235                                 'toolbar': [
236                                         ['Source'],
237                                         ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'SpellChecker', 'Scayt'],
238                                         ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
239                                         '/',
240                                         ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'],
241                                         ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
242                                         ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
243                                         ['Link', 'Unlink', 'Anchor'],
244                                         ['wfpl_images', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak'],
245                                         '/',
246                                         ['Styles', 'Font', 'FontSize'],
247                                         ['TextColor', 'BGColor'],
248                                         ['Maximize', 'ShowBlocks']
249                                 ]
250                         });
251                 }
252                 window.admin_pages_cur_layout = null
253                 function admin_pages_layout(layout) {
254                         if (layout === undefined) {
255                                 layout = document.getElementById('layout').value
256                         }
257                         if (typeof layout === 'string') {
258                                 layout = parseInt(layout);
259                         }
260                         console.log(layout);
261                         if (layout === window.admin_pages_cur_layout) {
262                                 return;
263                         }
264                         // hide/show sidebar editor
265                         if (layout === 0) {
266                                 document.getElementById('sidebar_editor').style.display = 'none'
267                         } else {
268                                 document.getElementById('sidebar_editor').style.display = 'block'
269                         }
270                         // remove existing ckeditors
271                         if (window.admin_pages_cur_layout !== null) {
272                                 for (name in CKEDITOR.instances) {
273                                         CKEDITOR.instances[name].destroy();
274                                 }
275                         }
276                         // create ckeditors
277                         if (layout === 0) {
278                                 make_wysiwyg('content', 'content_full_main');
279                         } else if (layout === 1) {
280                                 make_wysiwyg('content', 'content_with_sidebar_main');
281                                 make_wysiwyg('sidebar_content', 'content_with_sidebar_sidebar_plain');
282                         } else {
283                                 make_wysiwyg('content', 'content_with_sidebar_main');
284                                 make_wysiwyg('sidebar_content', 'content_with_sidebar_sidebar_bordered');
285                         }
286
287                         window.admin_pages_cur_layout = layout
288                 }
289         </script>
290         <!--~}~-->
291
292 </head>
293
294 <body>
295 <!--~$body show {~-->
296
297         <!--~form {~-->
298                 <h1>~$host~ Admin Control Panel</h1>
299
300                 <h2><!--~id unset {~-->Add a new page<!--~}~--><!--~id {~-->Edit page "~title html~"<!--~}~--></h2>
301
302                 <form action="admin_pages" method="post"><!--~id {~--><div style="display: none"><input type="hidden" name="edit_id" value="~id attr~"></div><!--~}~-->
303
304                         <div class="caption">Title</div>
305                         <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>
306                         <div class="field"><input type="text" name="title" value="~title attr~" class="wide_field"></div>
307
308                         <div class="caption">Filename</div>
309                         <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>
310                         <div class="field"><input type="text" name="filename" value="~filename attr~"></div>
311
312                         <div class="caption">Show in site-wide navigation links (optional)</div>
313                         <div class="field"><select name="navbar"><!--~navbar options~--></select></div>
314
315                         <div class="caption">Navigation Link Text</div>
316                         <div class="field_notes">(If you'd like this page to appear in the navigation with a shorter title.)</div>
317                         <div class="field"><input type="text" name="nav_title" value="~nav_title attr~"></div>
318
319                         <div class="caption">Page Template/Layout</div>
320                         <div class="field"><select id="layout" name="layout" onchange="return admin_pages_layout()"><!--~layout options~--></select></div>
321
322                         <div class="caption">Page Contents</div>
323                         <div class="field_notes">
324                                 <ul class="first">
325                                         <li style="color: red; list-style: none">Please read these instructions in full:</li>
326                                         <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>
327                                         <li>If you're pasting from Microsoft Word, please use the "paste from word" button (looks like a clipboard with a "W").</li>
328                                         <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 &lt;other&gt;.</li>
329                                         <li>To insert an image: place the cursor at the beginning of a line and click the "insert image" button in the editor. Note that you will only be able to insert images that you have already uploaded on the <a href="admin_images" target="_blank">manage images</a> page.</li>
330                                 </ul>
331                         </div>
332                         <div class="field"><textarea class="html_editor" rows="20" cols="50" id="content" name="content">~content html~</textarea></div>
333
334                         <div id="sidebar_editor" style="display: ~sidebar_editor_display~">
335                                 <div class="caption">Sidebar Contents</div>
336                                 <div class="field_notes">
337                                         <ul class="first">
338                                                 <li>Ditto to the notes above "Page Contents" field.</li>
339                                                 <li>Centered images appear smaller in this editor than on the real page.</li>
340                                                 <li>Don't use the "Insert on Left" and "or Insert on Right" options for images inserting images in this sidebar.</li>
341                                         </ul>
342                                 </div>
343                                 <div class="field"><textarea class="html_editor" rows="20" cols="50" id="sidebar_content" name="sidebar_content">~sidebar_content html~</textarea></div>
344                         </div>
345
346                         <script>admin_pages_layout()</script>
347
348                         <!--
349                         <div class="caption">Description</div>
350                         <div class="field_notes">(Hidden description of this page, primarily for search engines.)</div>
351                         <div class="field"><textarea rows="9" cols="22" name="description">~description html~</textarea></div>
352
353                         <div class="caption">Keywords</div>
354                         <div class="field_notes">(Hidden words (up to 30) with commas between them for search engines)</div>
355                         <div class="field"><textarea rows="9" cols="22" name="keywords">~keywords html~</textarea></div>
356                         -->
357
358                         <div class="caption">&nbsp;</div>
359                         <div class="field"><input type="submit" name="save" value="Save"></div>
360
361                 </form>
362
363                 <div class="caption">&nbsp;</div>
364                 <div class="field"><a href="~filename nonempty {~~filename attr~~}~~filename empty {~admin_pages~id {~?id=~id~~}~~}~">Cancel</a></div>
365         <!--~}~-->
366
367         <!--~listing {~-->
368                 <h1>~$host~ Admin Control Panel</h1>
369                 <h2>Manage Pages</h2>
370
371                 <!--~rows once_if {~-->
372                         <p><a href="admin_pages?new=1">[Add a new page]</a></p>
373
374                         <table cellspacing="0" cellpadding="4" border="0" summary="" class="evenodd">
375                                 <tr>
376                                         <th><a href="?sort=~sorting-by-filename~filename">Filename</a></th>
377                                         <th><a href="?sort=~sorting-by-title~title">Title</a></th>
378                                         <th>&nbsp;</th>
379                                 </tr><!--~rows {~-->
380                                 <tr>
381                                         <td class="listing"><a href="admin_pages?edit_id=~id~">~filename html~<!--~filename empty {~--><em>(offline)</em><!--~}~--></a></td>
382                                         <td class="listing"><a href="admin_pages?edit_id=~id~">~title html~<!--~title empty {~--><em>(untitled)</em><!--~}~--></a></td>
383                                         <td><a href="admin_pages?admin_pages_delete_id=~id~" onclick="return confirm('Permanently delete?')">[delete]</a></td>
384                                 </tr><!--~}~-->
385
386                         </table>
387                 <!--~}~-->
388                 <!--~rows once_else {~-->
389                         <p>No pages in database.</p>
390                 <!--~}~-->
391
392                 <p><a href="admin_pages?new=1">[Add a new page]</a></p>
393         <!--~}~-->
394 <!--~}~-->
395 </body>
396 </html>