admin_pages.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5         <title><!--~$title show {~-->~$host~ Admin: <!--~listings {~-->Pages Listing<!--~}~--><!--~form {~--><!--~id {~-->Add a new page<!--~}~--><!--~id unset {~-->Edit page "~title html~"<!--~}~--><!--~}~--><!--~}~--></title>
   6         <!--~$head {~-->
   7         <script type="text/javascript" src="code/ckeditor/ckeditor.js"></script>
   8         <style>
   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;
  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 .cke_wfpl_thumbs {
  33                         height: 270px;
  34                         overflow-y: scroll;
  35                 }
  36                 .cke_wfpl_thumbs .cke_wfpl_thumb {
  37                         width: 50px;
  38                         height: 50px;
  39                         padding: 10px;
  40                         color: transparent;
  41                         font-size: 10px;
  42                         font-weight: bold;
  43                         display: inline-block;
  44                         overflow: hidden;
  45                         text-align: center;
  46                         background-position: 50% 50%;
  47                         background-repeat: no-repeat;
  48                         background-color: transparent;
  49                         border: 2px solid white;
  50                 }
  51                 .cke_wfpl_thumbs .cke_wfpl_thumb:hover, .cke_wfpl_thumbs .cke_wfpl_thumb.selected {
  52                         color: white;
  53                         text-shadow: 1px 1px 2px #000;
  54                         box-shadow: 1px 1px 6px #444;
  55                         border: 2px solid #444;
  56                 }
  57         </style>
  58         <script type="text/javascript">
  59                 window.cke_wfpl_images = {
  60                         images: {~wfpl_images {~
  61                                 "~id~": {
  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~"
  68                                 }
  69                                 ~ sep {~,~}~
  70                         ~}~},
  71                         next_id: 0,
  72                         selected: [],
  73                         editors: []
  74                 };
  75                 function cke_wfpl_images_thumb_click(plugin_id, element, image_id) {
  76                         var thumbs = element.parentNode.children;
  77                         var i, thumb;
  78                         for (i = 0; i < thumbs.length; i++) {
  79                                 thumb = thumbs[i];
  80                                 if (thumb === element) {
  81                                         if (thumb.className.substr(0, 9) !== 'selected ') {
  82                                                 thumb.className = 'selected ' + thumb.className;
  83                                         }
  84                                 } else {
  85                                         if (thumb.className.substr(0, 9) === 'selected ') {
  86                                                 thumb.className = thumb.className.substr(9);
  87                                         }
  88                                 }
  89                         }
  90                         window.cke_wfpl_images.selected[plugin_id] = image_id;
  91                 }
  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];
  95                         var image;
  96                         var code, width, height, src, size, caption;
  97                         if (selected == null) {
  98                                 console.log("no selected picture"); // FIXME
  99                                 return;
 100                         }
 101                         image = window.cke_wfpl_images.images[selected];
 102                         switch(align) {
 103                                 case 'left':
 104                                         code = '<span class="wfpl_ifl"'
 105                                 break;
 106                                 case 'right':
 107                                         code = '<span class="wfpl_ifr"'
 108                                 break;
 109                                 case 'centered': case 'full':
 110                                         code = '<div class="wfpl_ic"'
 111                                 break;
 112                         }
 113                         size = image.sizes.replace(/^\s+|\s+$/g, '').split(/\s\+/)[0];
 114                         width = image.image_width;
 115                         height = image.image_height;
 116                         src = image.image;
 117                         caption = image.caption;
 118                         if (caption == '') {
 119                                 caption = '&nbsp;';
 120                         }
 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);
 127                                         width = wh[0];
 128                                 } else {
 129                                         width = Math.round(width * wh[1] / height);
 130                                         height = wh[1];
 131                                 }
 132                                 size = '' + wh[0] + '-' + wh[1]; // dash instead of x
 133                                 src = src.substr(0, src.length - 4) + '-' + size + src.substr(src.length - 4);
 134                         }
 135                         code += ' style="background-image: url(/' + src + ');';
 136                         code += ' width: ' + width + 'px;';
 137                         code += ' padding-top: ' + height + 'px;';
 138                         code += '">' + caption;
 139                         switch(align) {
 140                                 case 'left': case 'right':
 141                                         code += '</span>'
 142                                 break;
 143                                 case 'centered': case 'full':
 144                                         code += '</div>'
 145                                 break;
 146                         }
 147                         CKEDITOR.dialog.getCurrent().hide(); // FIXME
 148                         console.log(code);
 149                         editor.insertHtml(code);
 150                 }
 151                 CKEDITOR.plugins.add('wfpl_images', {
 152                         init: function (editor) {
 153                                 var plugin_id = window.cke_wfpl_images.editors.length;
 154                                 window.cke_wfpl_images.editors.push(editor);
 155                                 window.cke_wfpl_images.selected.push(null);
 156
 157                                 editor.addCommand('wfpl_images', new CKEDITOR.dialogCommand('wfpl_images_dialog'));
 158                                 editor.ui.addButton('wfpl_images', {
 159                                         label: 'Insert Image',
 160                                         command: 'wfpl_images',
 161                                         toolbar: 'insert' /* which section to put this button in */
 162                                 });
 163                                 CKEDITOR.dialog.add('wfpl_images_dialog', function (api) {
 164                                         // CKEDITOR.dialog.definition
 165                                         return {
 166                                                 title: 'Insert Image',
 167                                                 minWidth: 700,
 168                                                 minHeight: 350,
 169                                                 onShow: function() {
 170                                                         // FIXME unselect and remove hilight
 171                                                         // window.cke_wfpl_images.selected[plugin_id] = null;
 172                                                 },
 173                                                 contents: [
 174                                                         {
 175                                                                 id: 'tab1',
 176                                                                 label: '?not displayed',
 177                                                                 expand: true,
 178                                                                 padding: 0,
 179                                                                 elements: [
 180                                                                         {
 181                                                                                 type: 'html',
 182                                                                                 html: '<div class="cke_wfpl_images_dialog"><p>Note: If the image you want is not shown below, go to the control panel, then "manage images" and add it there. Next time you load an editor, you\'ll see that new image below.</p>'
 183                                                                                         + '<h3>Step 1: Choose an image to insert:</h3>'
 184                                                                                         + "<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                                                                                 + "</div>"
 186                                                                         }
 187                                                                 ]
 188                                                         }
 189                                                 ],
 190                                                 buttons: [
 191                                                         {
 192                                                                 type: 'button',
 193                                                                 id: 'left',
 194                                                                 label: 'Insert on Left',
 195                                                                 className: 'cke_dialog_ui_button_ok',
 196                                                                 onClick: function() {
 197                                                                         cke_wfpl_images_insert_click(plugin_id, 'left');
 198                                                                 }
 199                                                         },
 200                                                         {
 201                                                                 type: 'button',
 202                                                                 id: 'center',
 203                                                                 label: 'Insert Centered',
 204                                                                 className: 'cke_dialog_ui_button_ok',
 205                                                                 onClick: function() {
 206                                                                         cke_wfpl_images_insert_click(plugin_id, 'centered');
 207                                                                 }
 208                                                         },
 209                                                         {
 210                                                                 type: 'button',
 211                                                                 id: 'right',
 212                                                                 label: 'Insert on Right',
 213                                                                 className: 'cke_dialog_ui_button_ok',
 214                                                                 onClick: function() {
 215                                                                         cke_wfpl_images_insert_click(plugin_id, 'right');
 216                                                                 }
 217                                                         },
 218                                                         {
 219                                                                 type: 'button',
 220                                                                 id: 'full',
 221                                                                 label: 'Insert BIG',
 222                                                                 className: 'cke_dialog_ui_button_ok',
 223                                                                 onClick: function() {
 224                                                                         cke_wfpl_images_insert_click(plugin_id, 'full');
 225                                                                 }
 226                                                         },
 227                                                         CKEDITOR.dialog.cancelButton
 228                                                 ],
 229                                                 onOk: function () {
 230                                                         var image = this.getContentElement('tab1', 'image').getValue();
 231                                                         if (image === null) {
 232                                                                 return;
 233                                                         }
 234                                                         editor.insertHtml('<img alt="" src="' + window.wfpl_images[image].image + '">');
 235                                                 }
 236                                         };
 237                                 });
 238                         }
 239                 });
 240                 function make_wysiwyg(name) {
 241                         CKEDITOR.replace(name, {
 242                                 'contentsCss': 'style.css?m=~style.css mtime~',
 243                                 'allowedContent': true,
 244                                 'stylesSet': [
 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'}}
 252                                 ],
 253                                 'uiColor': '#ccccff',
 254                                 'removePlugins': 'forms,templates,smiley,pagebreak,save,newpage,preview,print',
 255                                 'extraPlugins': 'wfpl_images',
 256                                 'height': '300px',
 257                                 'toolbar': [
 258                                         ['Source'],
 259                                         ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'SpellChecker', 'Scayt'],
 260                                         ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
 261                                         '/',
 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'],
 267                                         '/',
 268                                         ['Styles', 'Font', 'FontSize'],
 269                                         ['TextColor', 'BGColor'],
 270                                         ['Maximize', 'ShowBlocks']
 271                                 ]
 272                         });
 273                 }
 274         </script>
 275         <!--~}~-->
 276
 277 </head>
 278
 279 <body>
 280 <!--~$body show {~-->
 281
 282         <!--~form {~-->
 283                 <h2><!--~id unset {~-->Add a new page<!--~}~--><!--~id {~-->Edit page "~title html~"<!--~}~--></h2>
 284
 285                 <form action="admin_pages" method="post"><!--~id {~--><div style="display: none"><input type="hidden" name="edit_id" value="~id attr~"></div><!--~}~-->
 286
 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>
 290
 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>
 294
 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>
 298
 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>
 302
 303                         <div class="caption">Page Contents</div>
 304                         <div class="field_notes">
 305                                 <ul class="first">
 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 &lt;other&gt;.</li>
 310                                 </ul>
 311                         </div>
 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>
 313
 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>
 317
 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>
 321
 322                         <div class="caption">&nbsp;</div>
 323                         <div class="field"><input type="submit" name="save" value="Save"></div>
 324
 325                 </form>
 326
 327                 <div class="caption">&nbsp;</div>
 328                 <div class="field"><a href="~filename nonempty {~~filename attr~~}~~filename empty {~admin_pages~id {~?id=~id~~}~~}~">Cancel</a></div>
 329         <!--~}~-->
 330
 331         <!--~listings once {~-->
 332                 <!--~listings once_if {~-->
 333                         <p><a href="admin_pages?new=1">[Add a new page]</a></p>
 334
 335                         <table cellspacing="0" cellpadding="4" border="1" summary="">
 336                                 <tr><th>Title</th><th>Filename</th><th>&nbsp;</th></tr>
 337                                 <!--~listings {~-->
 338                                 <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>
 342                                 </tr>
 343                                 <!--~}~-->
 344
 345                         </table>
 346                 <!--~}~-->
 347                 <!--~listings once_else {~-->
 348                         <p>No pages in database.</p>
 349                 <!--~}~-->
 350
 351                 <p><a href="admin_pages?new=1">[Add a new page]</a></p>
 352         <!--~}~-->
 353 <!--~}~-->
 354 </body>
 355 </html>