X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=admin_pages.html;h=72252adf3141c0d4435a521dc42c9fef30438b3a;hb=10f9463ec0189185b09e671924678513e5f6d49b;hp=80c7c2dd660c05d355e02ff1365ac1d2da8f1404;hpb=f63e892033ef793540ba4b2663f63e05aa41c0f1;p=wfpl-cms.git

diff --git a/admin_pages.html b/admin_pages.html
index 80c7c2d..72252ad 100644
--- a/admin_pages.html
+++ b/admin_pages.html
@@ -2,7 +2,7 @@
 
 <html>
 <head>
-	<title><!--~$title show {~-->~$host~ Admin: <!--~listings once_if {~-->Manage pages<!--~}~--><!--~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 src="inc/ckeditor/ckeditor.js?t=F0RD"></script>
 	<style>
@@ -47,6 +47,7 @@
 			display: inline-block;
 			overflow: hidden;
 			text-align: center;
+			background-size: contain;
 			background-position: 50% 50%;
 			background-repeat: no-repeat;
 			background-color: transparent;
@@ -61,20 +62,17 @@
 	</style>
 	<script>
 		window.cke_wfpl_images = {
-			images: [~wfpl_images {~
-				{
-					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;
@@ -96,7 +94,7 @@
 			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) {
 				CKEDITOR.dialog.getCurrent().hide();
 				return;
@@ -104,49 +102,33 @@
 			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 = '&nbsp;';
-			}
-			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;
-			}
+			code += ' padding-top: ' + image.aspect;
+			code += '">&nbsp</div>' + caption;
+			code += '</div>'
 			CKEDITOR.dialog.getCurrent().hide();
 			CKEDITOR.currentInstance.insertElement(CKEDITOR.dom.element.createFromHtml(code));
 		}
@@ -163,6 +145,15 @@
 					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,
@@ -176,7 +167,7 @@
 										type: 'html',
 										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=\"~ first {~selected ~}~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>"
+											+ 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>'
 									}
@@ -222,11 +213,11 @@
 				});
 			}
 		});
-		function make_wysiwyg(name) {
+		function make_wysiwyg(name, bodyid_postfix) {
 			CKEDITOR.replace(name, {
-				'contentsCss': 'style.css?m=~style.css mtime~',
+				'contentsCss': 'css.css?m=~css.css mtime~',
 				'allowedContent': true,
-				bodyId: '~$basename~' + '_wysiwyg_' + name,
+				bodyId: '~$basename~' + '_wysiwyg_' + (bodyid_postfix ? bodyid_postfix : name),
 				'stylesSet': [
 					{ name: 'Paragraph', element: 'p'},
 					{ name: 'Page Headline', element: 'h1'},
@@ -258,6 +249,43 @@
 				]
 			});
 		}
+		window.admin_pages_cur_layout = null
+		function admin_pages_layout(layout) {
+			if (layout === undefined) {
+				layout = document.getElementById('layout').value
+			}
+			if (typeof layout === 'string') {
+				layout = parseInt(layout);
+			}
+			console.log(layout);
+			if (layout === window.admin_pages_cur_layout) {
+				return;
+			}
+			// hide/show sidebar editor
+			if (layout === 0) {
+				document.getElementById('sidebar_editor').style.display = 'none'
+			} else {
+				document.getElementById('sidebar_editor').style.display = 'block'
+			}
+			// remove existing ckeditors
+			if (window.admin_pages_cur_layout !== null) {
+				for (name in CKEDITOR.instances) {
+					CKEDITOR.instances[name].destroy();
+				}
+			}
+			// create ckeditors
+			if (layout === 0) {
+				make_wysiwyg('content', 'content_full_main');
+			} else if (layout === 1) {
+				make_wysiwyg('content', 'content_with_sidebar_main');
+				make_wysiwyg('sidebar_content', 'content_with_sidebar_sidebar_plain');
+			} else {
+				make_wysiwyg('content', 'content_with_sidebar_main');
+				make_wysiwyg('sidebar_content', 'content_with_sidebar_sidebar_bordered');
+			}
+
+			window.admin_pages_cur_layout = layout
+		}
 	</script>
 	<!--~}~-->
 
@@ -281,14 +309,16 @@
 			<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">Page Template/Layout</div>
+			<div class="field"><select id="layout" name="layout" onchange="return admin_pages_layout()"><!--~layout options~--></select></div>
+
 			<div class="caption">Page Contents</div>
 			<div class="field_notes">
 				<ul class="first">
@@ -299,8 +329,23 @@
 					<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>make_wysiwyg('content');</script></div>
+			<div class="field"><textarea class="html_editor" rows="20" cols="50" id="content" name="content">~content html~</textarea></div>
 
+			<div id="sidebar_editor" style="display: ~sidebar_editor_display~">
+				<div class="caption">Sidebar Contents</div>
+				<div class="field_notes">
+					<ul class="first">
+						<li>Ditto to the notes above "Page Contents" field.</li>
+						<li>Centered images appear smaller in this editor than on the real page.</li>
+						<li>Don't use the "Insert on Left" and "or Insert on Right" options for images inserting images in this sidebar.</li>
+					</ul>
+				</div>
+				<div class="field"><textarea class="html_editor" rows="20" cols="50" id="sidebar_content" name="sidebar_content">~sidebar_content html~</textarea></div>
+			</div>
+
+			<script>admin_pages_layout()</script>
+
+			<!--
 			<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>
@@ -308,6 +353,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>
@@ -318,26 +364,28 @@
 		<div class="field"><a href="~filename nonempty {~~filename attr~~}~~filename empty {~admin_pages~id {~?id=~id~~}~~}~">Cancel</a></div>
 	<!--~}~-->
 
-	<!--~listings once {~-->
+	<!--~listing {~-->
 		<h1>~$host~ Admin Control Panel</h1>
 		<h2>Manage Pages</h2>
 
-		<!--~listings once_if {~-->
+		<!--~rows once_if {~-->
 			<p><a href="admin_pages?new=1">[Add a new page]</a></p>
 
 			<table cellspacing="0" cellpadding="4" border="0" summary="" class="evenodd">
-				<tr><th>Title</th><th>Filename</th><th>&nbsp;</th></tr>
-				<!--~listings {~-->
 				<tr>
-					<td class="listing"><a href="admin_pages?edit_id=~id~">~title html~<!--~title empty {~--><em>(untitled)</em><!--~}~--></a></td>
+					<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~">~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>
 		<!--~}~-->
 

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