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             if (layout === window.admin_pages_cur_layout) {
 261                 return;
 262             }
 263             // hide/show sidebar editor
 264             if (layout === 0) {
 265                 document.getElementById('sidebar_editor').style.display = 'none'
 266             } else {
 267                 document.getElementById('sidebar_editor').style.display = 'block'
 268             }
 269             // remove existing ckeditors
 270             if (window.admin_pages_cur_layout !== null) {
 271                 for (name in CKEDITOR.instances) {
 272                     CKEDITOR.instances[name].destroy();
 273                 }
 274             }
 275             // create ckeditors
 276             if (layout === 0) {
 277                 make_wysiwyg('content', 'content_full_main');
 278             } else if (layout === 1) {
 279                 make_wysiwyg('content', 'content_with_sidebar_main');
 280                 make_wysiwyg('sidebar_content', 'content_with_sidebar_sidebar_plain');
 281             } else {
 282                 make_wysiwyg('content', 'content_with_sidebar_main');
 283                 make_wysiwyg('sidebar_content', 'content_with_sidebar_sidebar_bordered');
 284             }
 285
 286             window.admin_pages_cur_layout = layout
 287         }
 288     </script>
 289     <!--~}~-->
 290
 291 </head>
 292
 293 <body>
 294 <!--~$body show {~-->
 295
 296     <!--~form {~-->
 297         <h1>~$host~ Admin Control Panel</h1>
 298
 299         <h2><!--~id unset {~-->Add a new page<!--~}~--><!--~id {~-->Edit page "~title html~"<!--~}~--></h2>
 300
 301         <!--~archived_versions {~-->
 302             <p><a href="admin_pages?history_page_id=~id~">View archived versions of this page</a></p>
 303         <!--~}~-->
 304
 305         <form action="admin_pages" method="post"><!--~id {~--><div style="display: none"><input type="hidden" name="edit_id" value="~id attr~"></div><!--~}~-->
 306
 307             <div class="caption">Title</div>
 308             <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>
 309             <div class="field"><input type="text" name="title" value="~title attr~" class="wide_field"></div>
 310
 311             <div class="caption">Filename</div>
 312             <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>
 313             <div class="field"><input type="text" name="filename" value="~filename attr~"></div>
 314
 315             <div class="caption">Show in site-wide navigation links (optional)</div>
 316             <div class="field"><select name="navbar"><!--~navbar options~--></select></div>
 317
 318             <div class="caption">Navigation Link Text</div>
 319             <div class="field_notes">(If you'd like this page to appear in the navigation with a shorter title.)</div>
 320             <div class="field"><input type="text" name="nav_title" value="~nav_title attr~"></div>
 321
 322             <div class="caption">Page Template/Layout</div>
 323             <div class="field"><select id="layout" name="layout" onchange="return admin_pages_layout()"><!--~layout options~--></select></div>
 324
 325             <div class="caption">Page Contents</div>
 326             <div class="field_notes">
 327                 <ul class="first">
 328                     <li style="color: red; list-style: none">Please read these instructions in full:</li>
 329                     <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>
 330                     <li>If you're pasting from Microsoft Word, please use the "paste from word" button (looks like a clipboard with a "W").</li>
 331                     <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>
 332                     <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>
 333                 </ul>
 334             </div>
 335             <div class="field"><textarea class="html_editor" rows="20" cols="50" id="content" name="content">~content html~</textarea></div>
 336
 337             <div id="sidebar_editor" style="display: ~sidebar_editor_display~">
 338                 <div class="caption">Sidebar Contents</div>
 339                 <div class="field_notes">
 340                     <ul class="first">
 341                         <li>Ditto to the notes above "Page Contents" field.</li>
 342                         <li>Centered images appear smaller in this editor than on the real page.</li>
 343                         <li>Don't use the "Insert on Left" and "or Insert on Right" options for images inserting images in this sidebar.</li>
 344                     </ul>
 345                 </div>
 346                 <div class="field"><textarea class="html_editor" rows="20" cols="50" id="sidebar_content" name="sidebar_content">~sidebar_content html~</textarea></div>
 347             </div>
 348
 349             <script>admin_pages_layout()</script>
 350
 351             <!--
 352             <div class="caption">Description</div>
 353             <div class="field_notes">(Hidden description of this page, primarily for search engines.)</div>
 354             <div class="field"><textarea rows="9" cols="22" name="description">~description html~</textarea></div>
 355
 356             <div class="caption">Keywords</div>
 357             <div class="field_notes">(Hidden words (up to 30) with commas between them for search engines)</div>
 358             <div class="field"><textarea rows="9" cols="22" name="keywords">~keywords html~</textarea></div>
 359             -->
 360
 361             <div class="caption">&nbsp;</div>
 362             <div class="field"><input type="submit" name="save" value="Save"></div>
 363
 364         </form>
 365
 366         <div class="caption">&nbsp;</div>
 367         <div class="field"><a href="~filename nonempty {~~filename attr~~}~~filename empty {~admin_pages~id {~?id=~id~~}~~}~">Cancel</a></div>
 368     <!--~}~-->
 369
 370     <!--~listing {~-->
 371         <h1>~$host~ Admin Control Panel</h1>
 372
 373         <h2>Manage Pages</h2>
 374
 375         <table cellspacing="0" cellpadding="4" border="0" summary="" class="evenodd">
 376             <tr>
 377                 <td><em>(new)</em></td>
 378                 <td>
 379                     <form style="display: inline-block" action="admin_pages"><input type="hidden" name="new" value="1"><input type="submit" value="create"></form>
 380                 </td>
 381             </tr>
 382             <!--~no_home {~-->
 383                 <tr>
 384                     <td><em>(home page)</em></td>
 385                     <td>
 386                         <form style="display: inline-block" action="admin_pages">
 387                             <input type="hidden" name="new" value="1">
 388                             <input type="hidden" name="new_filename" value="index">
 389                             <input type="submit" value="create"></form>
 390                     </td>
 391                 </tr>
 392             <!--~}~-->
 393             <!--~rows {~-->
 394             <tr>
 395                 <td>~title html~<!--~title empty {~--><em>(untitled)</em><!--~}~--></td>
 396                 <td>
 397                     <form style="display: inline-block" action="admin_pages"><input type="hidden" name="edit_id" value="~id~"><input type="submit" value="edit"></form>
 398                     <form style="display: inline-block" action="admin_pages"><input type="hidden" name="history_page_id" value="~id~"><input type="submit" value="history"></form>
 399                     <form style="display: inline-block" action="admin_pages" onsubmit="return confirm('Permanently delete?')"><input type="hidden" name="admin_pages_delete_id" value="~id~"><input type="submit" value="delete"></form>
 400                 </td>
 401             </tr><!--~}~-->
 402
 403         </table>
 404     <!--~}~-->
 405     <!--~page_history {~-->
 406         <h1>~$host~ Admin Control Panel</h1>
 407
 408         <h2>Edit history for page "~title html~"</h2>
 409
 410         <!--~rows once_else {~-->
 411             <p>There are no archived versions of this page.</p>
 412         <!--~}~-->
 413         <!--~rows once_if {~-->
 414             <table cellspacing="0" cellpadding="4" border="0" summary="" class="evenodd">
 415                 <tr>
 416                     <th>title</th>
 417                     <th>saved at</th>
 418                     <th>by</th>
 419                     <th></th>
 420                 </tr>
 421                 <!--~rows {~-->
 422                     <tr>
 423                         <td>~title html~<!--~title empty {~--><em>(untitled)</em><!--~}~--></td>
 424                         <td class="timestamp">~timestamp~</td>
 425                         <td>~who html~</td>
 426                         <td>
 427                             <!--~first {~-->
 428                                 <!--~filename nonempty {~-->
 429                                     <form style="display: inline-block" action="~filename attr~"><input type="submit" value="view"></form>
 430                                 <!--~}~-->
 431                                 <!--~filename empty {~-->
 432                                     <form style="display: inline-block" action="admin_pages"><input type="hidden" name="id" value="~page_id~"><input type="submit" value="view"></form>
 433                                 <!--~}~-->
 434                             <!--~}~-->
 435                             <!--~first unset {~-->
 436                                 <form style="display: inline-block" action="admin_pages"><input type="hidden" name="history_id" value="~history_id~"><input type="submit" value="view"></form>
 437                             <!--~}~-->
 438                         </td>
 439                     </tr>
 440                 <!--~}~-->
 441                 <script>
 442                     (function () {
 443                         var i, i02, d, hours, el, els
 444                         i02 = function (i) { return i > 9 ? i : '0' + i }
 445                         els = document.getElementsByClassName('timestamp');
 446                         for (i = 0; i < els.length; ++i) {
 447                             el = els[i]
 448                             d = new Date(parseInt(el.innerText) * 1000)
 449                             hours = d.getHours();
 450                             el.innerText =
 451                                 i02(d.getMonth() + 1) + '/' +
 452                                 i02(d.getDate()) + '/' +
 453                                 d.getFullYear() + ' ' +
 454                                 i02((hours + 11) % 12 + 1) + ':' +
 455                                 i02(d.getMinutes()) + '' +
 456                                 (hours < 12 ? 'am' : 'pm')
 457                         }
 458                     })();
 459                 </script>
 460             </table>
 461         <!--~}~-->
 462     <!--~}~-->
 463 <!--~}~-->
 464 </body>
 465 </html>