X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=admin_pages.html;h=ca4442941786b78c31008b4f18ba98b14cb5fc08;hb=0a5d51b1488c91a5b6387d440ab16c04ef10bac8;hp=dba6950337414657e971652ef04c4e62ffb32465;hpb=3a7b73338492c387b55cbbe7c451a6e41624119c;p=wfpl-cms.git

diff --git a/admin_pages.html b/admin_pages.html
index dba6950..ca44429 100644
--- a/admin_pages.html
+++ b/admin_pages.html
@@ -2,14 +2,231 @@
 
 <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: <!--~listings once_if {~-->Pages Listing<!--~}~--><!--~form {~--><!--~id {~-->Add a new page<!--~}~--><!--~id unset {~-->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"></script>
+	<style>
+		/* icon in cke buttons */
+		.cke_button_icon.cke_button__wfpl_images_icon {
+			background-image: url(/inc/ckeditor/plugins/icons.png?t=D5AC);
+			background-position: 0 -1504px;
+		}
+		.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-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 {~
+				{
+					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 {~,~}~~}~
+			],
+			next_id: 0,
+			selected: [],
+			editors: []
+		};
+		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, width, height, src, size, caption;
+			if (selected == null) {
+				CKEDITOR.dialog.getCurrent().hide();
+				return;
+			}
+			image = window.cke_wfpl_images.images[selected];
+			switch(align) {
+				case 'left':
+					code = '<span class="wfpl_ifl"'
+				break;
+				case 'right':
+					code = '<span class="wfpl_ifr"'
+				break;
+				case 'centered': case 'full':
+					code = '<div class="wfpl_ic"'
+				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 == '') {
+				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);
+			}
+			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();
+			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) {
+					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>'
+											+ "<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>"
+										+ '<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.css?m=~style.css mtime~',
 				'allowedContent': true,
+				bodyId: '~$basename~' + '_wysiwyg_' + name,
 				'stylesSet': [
 					{ name: 'Paragraph', element: 'p'},
 					{ name: 'Page Headline', element: 'h1'},
@@ -21,6 +238,7 @@
 				],
 				'uiColor': '#ccccff',
 				'removePlugins': 'forms,templates,smiley,pagebreak,save,newpage,preview,print',
+				'extraPlugins': 'wfpl_images',
 				'height': '300px',
 				'toolbar': [
 					['Source'],
@@ -31,7 +249,7 @@
 					['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
 					['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
 					['Link', 'Unlink', 'Anchor'],
-					['Image', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak'],
+					['wfpl_images', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak'],
 					'/',
 					['Styles', 'Font', 'FontSize'],
 					['TextColor', 'BGColor'],
@@ -54,7 +272,7 @@
 
 			<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>
@@ -75,9 +293,10 @@
 					<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 &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>
@@ -100,7 +319,7 @@
 		<!--~listings once_if {~-->
 			<p><a href="admin_pages?new=1">[Add a new page]</a></p>
 
-			<table cellspacing="0" cellpadding="4" border="1" summary="">
+			<table cellspacing="0" cellpadding="4" border="0" summary="" class="evenodd">
 				<tr><th>Title</th><th>Filename</th><th>&nbsp;</th></tr>
 				<!--~listings {~-->
 				<tr>
