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">'
 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                                                                                 + '<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>'
 187                                                                         }
 188                                                                 ]
 189                                                         }
 190                                                 ],
 191                                                 buttons: [
 192                                                         {
 193                                                                 type: 'button',
 194                                                                 id: 'left',
 195                                                                 label: 'Insert on Left',
 196                                                                 className: 'cke_dialog_ui_button_ok',
 197                                                                 onClick: function() {
 198                                                                         cke_wfpl_images_insert_click(plugin_id, 'left');
 199                                                                 }
 200                                                         },
 201                                                         {
 202                                                                 type: 'button',
 203                                                                 id: 'center',
 204                                                                 label: 'Insert Centered',
 205                                                                 className: 'cke_dialog_ui_button_ok',
 206                                                                 onClick: function() {
 207                                                                         cke_wfpl_images_insert_click(plugin_id, 'centered');
 208                                                                 }
 209                                                         },
 210                                                         {
 211                                                                 type: 'button',
 212                                                                 id: 'right',
 213                                                                 label: 'Insert on Right',
 214                                                                 className: 'cke_dialog_ui_button_ok',
 215                                                                 onClick: function() {
 216                                                                         cke_wfpl_images_insert_click(plugin_id, 'right');
 217                                                                 }
 218                                                         },
 219                                                         {
 220                                                                 type: 'button',
 221                                                                 id: 'full',
 222                                                                 label: 'Insert BIG',
 223                                                                 className: 'cke_dialog_ui_button_ok',
 224                                                                 onClick: function() {
 225                                                                         cke_wfpl_images_insert_click(plugin_id, 'full');
 226                                                                 }
 227                                                         },
 228                                                         CKEDITOR.dialog.cancelButton
 229                                                 ],
 230                                                 onOk: function () {
 231                                                         var image = this.getContentElement('tab1', 'image').getValue();
 232                                                         if (image === null) {
 233                                                                 return;
 234                                                         }
 235                                                         editor.insertHtml('<img alt="" src="' + window.wfpl_images[image].image + '">');
 236                                                 }
 237                                         };
 238                                 });
 239                         }
 240                 });
 241                 function make_wysiwyg(name) {
 242                         CKEDITOR.replace(name, {
 243                                 'contentsCss': 'style.css?m=~style.css mtime~',
 244                                 'allowedContent': true,
 245                                 'stylesSet': [
 246                                         { name: 'Paragraph', element: 'p'},
 247                                         { name: 'Page Headline', element: 'h1'},
 248                                         { name: 'Section Headline', element: 'h2'},
 249                                         { name: 'Subsection Headline', element: 'h3'},
 250                                         { name: 'Tagline (under headline)', element: 'h4', attributes: { class: 'tagline'}},
 251                                         { name: 'Quote', element: 'p', attributes: { class: 'quote'}},
 252                                         { name: 'Quote Author', element: 'p', attributes: { class: 'attrib'}}
 253                                 ],
 254                                 'uiColor': '#ccccff',
 255                                 'removePlugins': 'forms,templates,smiley,pagebreak,save,newpage,preview,print',
 256                                 'extraPlugins': 'wfpl_images',
 257                                 'height': '300px',
 258                                 'toolbar': [
 259                                         ['Source'],
 260                                         ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'SpellChecker', 'Scayt'],
 261                                         ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
 262                                         '/',
 263                                         ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'],
 264                                         ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
 265                                         ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
 266                                         ['Link', 'Unlink', 'Anchor'],
 267                                         ['wfpl_images', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak'],
 268                                         '/',
 269                                         ['Styles', 'Font', 'FontSize'],
 270                                         ['TextColor', 'BGColor'],
 271                                         ['Maximize', 'ShowBlocks']
 272                                 ]
 273                         });
 274                 }
 275         </script>
 276         <!--~}~-->
 277
 278 </head>
 279
 280 <body>
 281 <!--~$body show {~-->
 282
 283         <!--~form {~-->
 284                 <h2><!--~id unset {~-->Add a new page<!--~}~--><!--~id {~-->Edit page "~title html~"<!--~}~--></h2>
 285
 286                 <form action="admin_pages" method="post"><!--~id {~--><div style="display: none"><input type="hidden" name="edit_id" value="~id attr~"></div><!--~}~-->
 287
 288                         <div class="caption">Title</div>
 289                         <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>
 290                         <div class="field"><input type="text" name="title" value="~title attr~"></div>
 291
 292                         <div class="caption">Filename</div>
 293                         <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>
 294                         <div class="field"><input type="text" name="filename" value="~filename attr~"></div>
 295
 296                         <div class="caption">Show in navigation links</div>
 297                         <div class="field_notes">(On the left of every page.)</div>
 298                         <div class="field"><select name="navbar"><!--~navbar options~--></select></div>
 299
 300                         <div class="caption">Navigation Link Text</div>
 301                         <div class="field_notes">(If you'd like this page to appear in the navigation with a shorter title.)</div>
 302                         <div class="field"><input type="text" name="nav_title" value="~nav_title attr~"></div>
 303
 304                         <div class="caption">Page Contents</div>
 305                         <div class="field_notes">
 306                                 <ul class="first">
 307                                         <li style="color: red; list-style: none">Please read these instructions in full:</li>
 308                                         <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>
 309                                         <li>If you're pasting from Microsoft Word, please use the "paste from word" button (looks like a clipboard with a "W").</li>
 310                                         <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>
 311                                 </ul>
 312                         </div>
 313                         <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
 315                         <div class="caption">Description</div>
 316                         <div class="field_notes">(Hidden description of this page, primarily for search engines.)</div>
 317                         <div class="field"><textarea rows="9" cols="22" name="description">~description html~</textarea></div>
 318
 319                         <div class="caption">Keywords</div>
 320                         <div class="field_notes">(Hidden words (up to 30) with commas between them for search engines)</div>
 321                         <div class="field"><textarea rows="9" cols="22" name="keywords">~keywords html~</textarea></div>
 322
 323                         <div class="caption">&nbsp;</div>
 324                         <div class="field"><input type="submit" name="save" value="Save"></div>
 325
 326                 </form>
 327
 328                 <div class="caption">&nbsp;</div>
 329                 <div class="field"><a href="~filename nonempty {~~filename attr~~}~~filename empty {~admin_pages~id {~?id=~id~~}~~}~">Cancel</a></div>
 330         <!--~}~-->
 331
 332         <!--~listings once {~-->
 333                 <!--~listings once_if {~-->
 334                         <p><a href="admin_pages?new=1">[Add a new page]</a></p>
 335
 336                         <table cellspacing="0" cellpadding="4" border="1" summary="">
 337                                 <tr><th>Title</th><th>Filename</th><th>&nbsp;</th></tr>
 338                                 <!--~listings {~-->
 339                                 <tr>
 340                                         <td class="listing"><a href="admin_pages?edit_id=~id~">~title html~<!--~title empty {~--><em>(untitled)</em><!--~}~--></a></td>
 341                                         <td class="listing"><a href="admin_pages?edit_id=~id~">~filename html~<!--~filename empty {~--><em>(offline)</em><!--~}~--></a></td>
 342                                         <td><a href="admin_pages?admin_pages_delete_id=~id~" onclick="return confirm('Permanently delete?')">[delete this page]</a></td>
 343                                 </tr>
 344                                 <!--~}~-->
 345
 346                         </table>
 347                 <!--~}~-->
 348                 <!--~listings once_else {~-->
 349                         <p>No pages in database.</p>
 350                 <!--~}~-->
 351
 352                 <p><a href="admin_pages?new=1">[Add a new page]</a></p>
 353         <!--~}~-->
 354 <!--~}~-->
 355 </body>
 356 </html>