<html>
<head>
- <title><!--~$title show {~-->~$host~ Admin: <!--~listings {~-->Pages Listing<!--~}~--><!--~form {~--><!--~id {~-->Add a new page<!--~}~--><!--~id unset {~-->Edit page "~title html~"<!--~}~--><!--~}~--><!--~}~--></title>
+ <title><!--~$title show {~-->~$host~ Admin: <!--~listing {~-->Manage Pages<!--~}~--><!--~form {~--><!--~id unset {~-->Add a new page<!--~}~--><!--~id {~-->Edit page "~title html~"<!--~}~--><!--~}~--><!--~}~--></title>
<!--~$head {~-->
- <script type="text/javascript" src="code/ckeditor/ckeditor.js"></script>
+ <script src="inc/ckeditor/ckeditor.js?t=F0RD"></script>
<style>
/* icon in cke buttons */
.cke_button_icon.cke_button__wfpl_images_icon {
- background-image: url(/code/ckeditor/plugins/icons.png?t=D5AC);
- background-position: 0 -1504px;
+ background-image: url(/inc/ckeditor/plugins/icons.png?t=F0RD);
+ background-position: 0 -936px;
}
.cke_wfpl_images_dialog * {
white-space: normal !important;
.cke_wfpl_images_dialog * + p {
padding-top: 5px;
}
+ .cke_wfpl_images_dialog * a {
+ text-decoration: underline;
+ color: blue;
+ }
.cke_wfpl_images_dialog .cke_wfpl_thumbs {
height: 270px;
overflow-y: scroll;
display: inline-block;
overflow: hidden;
text-align: center;
+ background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: transparent;
border: 2px solid #444;
}
</style>
- <script type="text/javascript">
+ <script>
window.cke_wfpl_images = {
- images: {~wfpl_images {~
- "~id~": {
- thumb: "~image thumb_src jsdq~",
- image: "~image image_src jsdq~",
- image_width: "~image image_width~",
- image_height: "~image image_height~",
- sizes: "~sizes jsdq~",
- caption: "~caption jsdq~"
- }
- ~ sep {~,~}~
- ~}~},
+ images: ~wfpl_images_json~,
+ full_width: ~wfpl_image_width_full~,
+ small_width: ~wfpl_image_width_small~,
+ thumb_width: ~wfpl_image_width_thumb~,
next_id: 0,
selected: [],
editors: []
};
+ var enc_html = function(str) {
+ return str.replace(/[<>&]/g, function(i) { return '&#' + i.charCodeAt(0) + ';'; });
+ };
function cke_wfpl_images_thumb_click(plugin_id, element, image_id) {
var thumbs = element.parentNode.children;
var i, thumb;
var selected = window.cke_wfpl_images.selected[plugin_id];
var editor = window.cke_wfpl_images.editors[plugin_id];
var image;
- var code, width, height, src, size, caption;
+ var code, src, caption;
if (selected == null) {
- console.log("no selected picture"); // FIXME
+ CKEDITOR.dialog.getCurrent().hide();
return;
}
image = window.cke_wfpl_images.images[selected];
switch(align) {
case 'left':
- code = '<span class="wfpl_ifl"'
+ code = '<div class="wfpl_li">'
+ break;
+ case 'centered':
+ code = '<div class="wfpl_ci">'
break;
case 'right':
- code = '<span class="wfpl_ifr"'
+ code = '<div class="wfpl_ri">'
break;
- case 'centered': case 'full':
- code = '<div class="wfpl_ic"'
+ case 'full':
+ code = '<div class="wfpl_fi">'
break;
}
- size = image.sizes.replace(/^\s+|\s+$/g, '').split(/\s\+/)[0];
- width = image.image_width;
- height = image.image_height;
- src = image.image;
- caption = image.caption;
- if (caption == '') {
+ code += '<div class="wfpl_i"'
+ src =
+ image.src.substr(0, image.src.length - 4)
+ + 'w'
+ + window.cke_wfpl_images[align == 'full' ? 'full_width' : 'small_width']
+ + image.src.substr(image.src.length - 4);
+ if (image.caption == '') {
caption = ' ';
- }
- if (align != 'full') {
- var wh = size.split('x');
- wh[0] = parseInt(wh[0]);
- wh[1] = parseInt(wh[1]);
- if (width / height > wh[0] / wh[1]) {
- height = Math.round(height * wh[0] / width);
- width = wh[0];
- } else {
- width = Math.round(width * wh[1] / height);
- height = wh[1];
- }
- size = '' + wh[0] + '-' + wh[1]; // dash instead of x
- src = src.substr(0, src.length - 4) + '-' + size + src.substr(src.length - 4);
+ } else {
+ caption = enc_html(image.caption);
}
code += ' style="background-image: url(/' + src + ');';
- code += ' width: ' + width + 'px;';
- code += ' padding-top: ' + height + 'px;';
- code += '">' + caption;
- switch(align) {
- case 'left': case 'right':
- code += '</span>'
- break;
- case 'centered': case 'full':
- code += '</div>'
- break;
- }
- CKEDITOR.dialog.getCurrent().hide(); // FIXME
- console.log(code);
- editor.insertHtml(code);
+ code += ' padding-top: ' + image.aspect;
+ code += '"> </div>' + caption;
+ code += '</div>'
+ CKEDITOR.dialog.getCurrent().hide();
+ CKEDITOR.currentInstance.insertElement(CKEDITOR.dom.element.createFromHtml(code));
}
CKEDITOR.plugins.add('wfpl_images', {
init: function (editor) {
var plugin_id = window.cke_wfpl_images.editors.length;
window.cke_wfpl_images.editors.push(editor);
- window.cke_wfpl_images.selected.push(null);
+ window.cke_wfpl_images.selected.push(window.cke_wfpl_images.images.length > 0 ? 0 : null);
editor.addCommand('wfpl_images', new CKEDITOR.dialogCommand('wfpl_images_dialog'));
editor.ui.addButton('wfpl_images', {
label: 'Insert Image',
command: 'wfpl_images',
- toolbar: 'insert' /* which section to put this button in */
+ toolbar: 'insert'
});
CKEDITOR.dialog.add('wfpl_images_dialog', function (api) {
- // CKEDITOR.dialog.definition
+ var i, im, selected, thumbs;
+ selected = 'selected ';
+ thumbs = '<div class="cke_wfpl_thumbs">'
+ for (i in window.cke_wfpl_images.images) {
+ im = window.cke_wfpl_images.images[i];
+ 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>';
+ selected = '';
+ }
+ thumbs += '</div>'
return {
title: 'Insert Image',
minWidth: 700,
minHeight: 350,
- onShow: function() {
- // FIXME unselect and remove hilight
- // window.cke_wfpl_images.selected[plugin_id] = null;
- },
contents: [
{
- id: 'tab1',
- label: '?not displayed',
expand: true,
padding: 0,
elements: [
{
type: 'html',
- 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>'
+ html: '<div class="cke_wfpl_images_dialog">'
+ '<h3>Step 1: Choose an image to insert:</h3>'
- + "<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>"
- + "</div>"
+ + thumbs
+ + '<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>'
+ + '</div>'
}
]
}
buttons: [
{
type: 'button',
- id: 'left',
label: 'Insert on Left',
className: 'cke_dialog_ui_button_ok',
onClick: function() {
},
{
type: 'button',
- id: 'center',
label: 'Insert Centered',
className: 'cke_dialog_ui_button_ok',
onClick: function() {
},
{
type: 'button',
- id: 'right',
label: 'Insert on Right',
className: 'cke_dialog_ui_button_ok',
onClick: function() {
},
{
type: 'button',
- id: 'full',
label: 'Insert BIG',
className: 'cke_dialog_ui_button_ok',
onClick: function() {
}
},
CKEDITOR.dialog.cancelButton
- ],
- onOk: function () {
- var image = this.getContentElement('tab1', 'image').getValue();
- if (image === null) {
- return;
- }
- editor.insertHtml('<img alt="" src="' + window.wfpl_images[image].image + '">');
- }
+ ]
};
});
}
});
function make_wysiwyg(name) {
CKEDITOR.replace(name, {
- 'contentsCss': 'style.css?m=~style.css mtime~',
+ 'contentsCss': 'css.css?m=~css.css mtime~',
'allowedContent': true,
+ bodyId: '~$basename~' + '_wysiwyg_' + name,
'stylesSet': [
{ name: 'Paragraph', element: 'p'},
{ name: 'Page Headline', element: 'h1'},
{ name: 'Subsection Headline', element: 'h3'},
{ name: 'Tagline (under headline)', element: 'h4', attributes: { class: 'tagline'}},
{ name: 'Quote', element: 'p', attributes: { class: 'quote'}},
- { name: 'Quote Author', element: 'p', attributes: { class: 'attrib'}}
+ { name: 'Quote Author', element: 'p', attributes: { class: 'attrib'}},
+ { name: 'div (generic box)', element: 'div'}
],
'uiColor': '#ccccff',
'removePlugins': 'forms,templates,smiley,pagebreak,save,newpage,preview,print',
<!--~$body show {~-->
<!--~form {~-->
+ <h1>~$host~ Admin Control Panel</h1>
+
<h2><!--~id unset {~-->Add a new page<!--~}~--><!--~id {~-->Edit page "~title html~"<!--~}~--></h2>
<form action="admin_pages" method="post"><!--~id {~--><div style="display: none"><input type="hidden" name="edit_id" value="~id attr~"></div><!--~}~-->
<div class="caption">Title</div>
<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>
- <div class="field"><input type="text" name="title" value="~title attr~"></div>
+ <div class="field"><input type="text" name="title" value="~title attr~" class="wide_field"></div>
<div class="caption">Filename</div>
<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>
<div class="field"><input type="text" name="filename" value="~filename attr~"></div>
- <div class="caption">Show in navigation links</div>
- <div class="field_notes">(On the left of every page.)</div>
+ <div class="caption">Show in site-wide navigation links (optional)</div>
<div class="field"><select name="navbar"><!--~navbar options~--></select></div>
<div class="caption">Navigation Link Text</div>
<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>
<li>If you're pasting from Microsoft Word, please use the "paste from word" button (looks like a clipboard with a "W").</li>
<li>To make a link, type the text to be clicked, select it, click the "Link" button (looks like a short chain) and paste the web address (where the link should point to) into the "URL" field. Exception: If you're making a link to another page on this site, please remove the "http://~$host~/" from the beginning of the "URL" field and set the "Protocol" to <other>.</li>
+ <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>
</ul>
</div>
- <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>
+ <div class="field"><textarea class="html_editor" rows="20" cols="50" id="content" name="content">~content html~</textarea><script>make_wysiwyg('content');</script></div>
+ <!--
<div class="caption">Description</div>
<div class="field_notes">(Hidden description of this page, primarily for search engines.)</div>
<div class="field"><textarea rows="9" cols="22" name="description">~description html~</textarea></div>
<div class="caption">Keywords</div>
<div class="field_notes">(Hidden words (up to 30) with commas between them for search engines)</div>
<div class="field"><textarea rows="9" cols="22" name="keywords">~keywords html~</textarea></div>
+ -->
<div class="caption"> </div>
<div class="field"><input type="submit" name="save" value="Save"></div>
<div class="field"><a href="~filename nonempty {~~filename attr~~}~~filename empty {~admin_pages~id {~?id=~id~~}~~}~">Cancel</a></div>
<!--~}~-->
- <!--~listings once {~-->
- <!--~listings once_if {~-->
+ <!--~listing {~-->
+ <h1>~$host~ Admin Control Panel</h1>
+ <h2>Manage Pages</h2>
+
+ <!--~rows once_if {~-->
<p><a href="admin_pages?new=1">[Add a new page]</a></p>
- <table cellspacing="0" cellpadding="4" border="1" summary="">
- <tr><th>Title</th><th>Filename</th><th> </th></tr>
- <!--~listings {~-->
+ <table cellspacing="0" cellpadding="4" border="0" summary="" class="evenodd">
+ <tr>
+ <th><a href="?sort=~sorting-by-filename~filename">Filename</a></th>
+ <th><a href="?sort=~sorting-by-title~title">Title</a></th>
+ <th> </th>
+ </tr><!--~rows {~-->
<tr>
- <td class="listing"><a href="admin_pages?edit_id=~id~">~title html~<!--~title empty {~--><em>(untitled)</em><!--~}~--></a></td>
<td class="listing"><a href="admin_pages?edit_id=~id~">~filename html~<!--~filename empty {~--><em>(offline)</em><!--~}~--></a></td>
- <td><a href="admin_pages?admin_pages_delete_id=~id~" onclick="return confirm('Permanently delete?')">[delete this page]</a></td>
- </tr>
- <!--~}~-->
+ <td class="listing"><a href="admin_pages?edit_id=~id~">~title html~<!--~title empty {~--><em>(untitled)</em><!--~}~--></a></td>
+ <td><a href="admin_pages?admin_pages_delete_id=~id~" onclick="return confirm('Permanently delete?')">[delete]</a></td>
+ </tr><!--~}~-->
</table>
<!--~}~-->
- <!--~listings once_else {~-->
+ <!--~rows once_else {~-->
<p>No pages in database.</p>
<!--~}~-->
Got questions, comments, patches, etc.? Contact Jason Woofenden