X-Git-Url: https://jasonwoof.com/gitweb/?p=wfpl-cms.git;a=blobdiff_plain;f=admin_pages.html;h=e6630f5ea121ee6cf6f85daae350d777a9d4dc6d;hp=bd6c9db88c51c10dbb24f839261d661dff9e97e8;hb=3ed0f0b53ff1b3ea3e30292bf39eb6e30935e9eb;hpb=605cd84ce6e7426a3dc38ed0ff37c0d08566342e

diff --git a/admin_pages.html b/admin_pages.html
index bd6c9db..e6630f5 100644
--- a/admin_pages.html
+++ b/admin_pages.html
@@ -2,15 +2,235 @@
 
 <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 type="text/javascript">
+	<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(/inc/ckeditor/plugins/icons.png?t=F0RD);
+			background-position: 0 -936px;
+		}
+		.cke_wfpl_images_dialog * {
+			white-space: normal !important;
+		}
+		.cke_wfpl_images_dialog h3 {
+			margin-top: 10px;
+			font-weight: bold;
+			font-size: 18px;
+		}
+		.cke_wfpl_images_dialog strong {
+			color: inherit;
+		}
+		.cke_wfpl_images_dialog p {
+			font-size: 12px;
+			line-height: 16px;
+		}
+		.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;
+		}
+		.cke_wfpl_thumbs .cke_wfpl_thumb {
+			width: 50px;
+			height: 50px;
+			padding: 10px;
+			color: transparent;
+			font-size: 10px;
+			font-weight: bold;
+			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 white;
+		}
+		.cke_wfpl_thumbs .cke_wfpl_thumb:hover, .cke_wfpl_thumbs .cke_wfpl_thumb.selected {
+			color: white;
+			text-shadow: 1px 1px 2px #000;
+			box-shadow: 1px 1px 6px #444;
+			border: 2px solid #444;
+		}
+	</style>
+	<script>
+		window.cke_wfpl_images = {
+			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;
+			for (i = 0; i < thumbs.length; i++) {
+				thumb = thumbs[i];
+				if (thumb === element) {
+					if (thumb.className.substr(0, 9) !== 'selected ') {
+						thumb.className = 'selected ' + thumb.className;
+					}
+				} else {
+					if (thumb.className.substr(0, 9) === 'selected ') {
+						thumb.className = thumb.className.substr(9);
+					}
+				}
+			}
+			window.cke_wfpl_images.selected[plugin_id] = image_id;
+		}
+		function cke_wfpl_images_insert_click(plugin_id, align) {
+			var selected = window.cke_wfpl_images.selected[plugin_id];
+			var editor = window.cke_wfpl_images.editors[plugin_id];
+			var image;
+			var code, src, caption;
+			if (selected == null) {
+				CKEDITOR.dialog.getCurrent().hide();
+				return;
+			}
+			image = window.cke_wfpl_images.images[selected];
+			switch(align) {
+				case 'left':
+					code = '<div class="wfpl_li">'
+				break;
+				case 'centered':
+					code = '<div class="wfpl_ci">'
+				break;
+				case 'right':
+					code = '<div class="wfpl_ri">'
+				break;
+				case 'full':
+					code = '<div class="wfpl_fi">'
+				break;
+			}
+			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 = '&nbsp;';
+			} else {
+				caption = enc_html(image.caption);
+			}
+			code += ' style="background-image: url(/' + src + ');';
+			code += ' padding-top: ' + image.aspect;
+			code += '">&nbsp</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(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'
+				});
+				CKEDITOR.dialog.add('wfpl_images_dialog', function (api) {
+					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,
+						contents: [
+							{
+								expand: true,
+								padding: 0,
+								elements: [
+									{
+										type: 'html',
+										html: '<div class="cke_wfpl_images_dialog">'
+											+ '<h3>Step 1: Choose an image to insert:</h3>'
+											+ 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',
+								label: 'Insert on Left',
+								className: 'cke_dialog_ui_button_ok',
+								onClick: function() {
+									cke_wfpl_images_insert_click(plugin_id, 'left');
+								}
+							},
+							{
+								type: 'button',
+								label: 'Insert Centered',
+								className: 'cke_dialog_ui_button_ok',
+								onClick: function() {
+									cke_wfpl_images_insert_click(plugin_id, 'centered');
+								}
+							},
+							{
+								type: 'button',
+								label: 'Insert on Right',
+								className: 'cke_dialog_ui_button_ok',
+								onClick: function() {
+									cke_wfpl_images_insert_click(plugin_id, 'right');
+								}
+							},
+							{
+								type: 'button',
+								label: 'Insert BIG',
+								className: 'cke_dialog_ui_button_ok',
+								onClick: function() {
+									cke_wfpl_images_insert_click(plugin_id, 'full');
+								}
+							},
+							CKEDITOR.dialog.cancelButton
+						]
+					};
+				});
+			}
+		});
 		function make_wysiwyg(name) {
 			CKEDITOR.replace(name, {
-				'contentsCss': 'style_01.css',
+				'contentsCss': 'css.css?m=~css.css mtime~',
+				'allowedContent': true,
+				bodyId: '~$basename~' + '_wysiwyg_' + name,
+				'stylesSet': [
+					{ name: 'Paragraph', element: 'p'},
+					{ name: 'Page Headline', element: 'h1'},
+					{ name: 'Section Headline', element: 'h2'},
+					{ 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: 'div (generic box)', element: 'div'}
+				],
 				'uiColor': '#ccccff',
 				'removePlugins': 'forms,templates,smiley,pagebreak,save,newpage,preview,print',
+				'extraPlugins': 'wfpl_images',
 				'height': '300px',
 				'toolbar': [
 					['Source'],
@@ -21,9 +241,9 @@
 					['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
 					['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
 					['Link', 'Unlink', 'Anchor'],
-					['Image', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak'],
+					['wfpl_images', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak'],
 					'/',
-					['Styles', 'Format', 'Font', 'FontSize'],
+					['Styles', 'Font', 'FontSize'],
 					['TextColor', 'BGColor'],
 					['Maximize', 'ShowBlocks']
 				]
@@ -38,36 +258,40 @@
 <!--~$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>
 			<div class="field_notes">(If you'd like this page to appear in the navigation with a shorter title.)</div>
 			<div class="field"><input type="text" name="nav_title" value="~nav_title attr~"></div>
 
-			<div class="caption">Content</div>
+			<div class="caption">Page Contents</div>
 			<div class="field_notes">
-				<ul>
+				<ul class="first">
+					<li style="color: red; list-style: none">Please read these instructions in full:</li>
 					<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 (4 right of the scissors).</li>
-					<li>In the link dialog, you can make a link to another page on this site by entering that page's "filename" in the URL field.</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 &lt;other&gt;.</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>
@@ -75,6 +299,7 @@
 			<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">&nbsp;</div>
 			<div class="field"><input type="submit" name="save" value="Save"></div>
@@ -85,23 +310,28 @@
 		<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>&nbsp;</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>&nbsp;</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>
 		<!--~}~-->
 

Filename	Title
~title html~(untitled)	~filename html~(offline)	[delete this page]
~title html~(untitled)	[delete]