From: Jason Woofenden <jason@jasonwoof.com>
Date: Fri, 18 Jul 2014 19:23:05 +0000 (-0400)
Subject: ckeditor plugin for wfpl cms images mostly working
X-Git-Url: https://jasonwoof.com/gitweb/?a=commitdiff_plain;h=113d68bfa94bbe30622de1b7eccbefa18d2632d9;hp=4b384795e53cbbe789739bdc91e704803809c110;p=wfpl-cms.git

ckeditor plugin for wfpl cms images mostly working
---

diff --git a/admin_pages.html b/admin_pages.html
index dba6950..7db5cb7 100644
--- a/admin_pages.html
+++ b/admin_pages.html
@@ -5,7 +5,238 @@
 	<title><!--~$title show {~-->~$host~ Admin: <!--~listings {~-->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>
+	<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;
+		}
+		.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 .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 type="text/javascript">
+		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 {~,~}~
+			~}~},
+			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) {
+				console.log("no selected picture"); // FIXME
+				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(); // FIXME
+			console.log(code);
+			editor.insertHtml(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);
+
+				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 */
+				});
+				CKEDITOR.dialog.add('wfpl_images_dialog', function (api) {
+					// CKEDITOR.dialog.definition
+					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>'
+											+ '<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>"
+									}
+								]
+							}
+						],
+						buttons: [
+							{
+								type: 'button',
+								id: 'left',
+								label: 'Insert on Left',
+								className: 'cke_dialog_ui_button_ok',
+								onClick: function() {
+									cke_wfpl_images_insert_click(plugin_id, 'left');
+								}
+							},
+							{
+								type: 'button',
+								id: 'center',
+								label: 'Insert Centered',
+								className: 'cke_dialog_ui_button_ok',
+								onClick: function() {
+									cke_wfpl_images_insert_click(plugin_id, 'centered');
+								}
+							},
+							{
+								type: 'button',
+								id: 'right',
+								label: 'Insert on Right',
+								className: 'cke_dialog_ui_button_ok',
+								onClick: function() {
+									cke_wfpl_images_insert_click(plugin_id, 'right');
+								}
+							},
+							{
+								type: 'button',
+								id: 'full',
+								label: 'Insert BIG',
+								className: 'cke_dialog_ui_button_ok',
+								onClick: function() {
+									cke_wfpl_images_insert_click(plugin_id, 'full');
+								}
+							},
+							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~',
@@ -21,6 +252,7 @@
 				],
 				'uiColor': '#ccccff',
 				'removePlugins': 'forms,templates,smiley,pagebreak,save,newpage,preview,print',
+				'extraPlugins': 'wfpl_images',
 				'height': '300px',
 				'toolbar': [
 					['Source'],
@@ -31,7 +263,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'],
diff --git a/admin_pages.php b/admin_pages.php
index f674b66..4f5c4c8 100644
--- a/admin_pages.php
+++ b/admin_pages.php
@@ -78,6 +78,16 @@ function admin_pages_main_delete($id) {
 	return './admin_pages';
 }
 
+function admin_pages_get_images() {
+	$images = db_get_assocs('cms_images', 'image,name,caption,sizes', 'order by name, caption, image');
+	$id = 1;
+	foreach($images as &$image) {
+		$image['id'] = '' . $id;
+		$id += 1;
+	}
+	return $images;
+}
+
 function admin_pages_main_listing() {
 	$listing_rows = db_get_assocs('cms_pages', 'id,filename,coalesce(nullif(nav_title,\'\'), title) as title', 'order by concat(nav_title,title)');
 	tem_set('listings', $listing_rows);
@@ -138,6 +148,7 @@ function admin_pages_main_form($id = false) {
 		$data = array('filename' => format_cms_filename($_REQUEST['new_filename']));
 	}
 
+	tem_set('wfpl_images', admin_pages_get_images());
 	tem_set('form', $data);
 	tem_set('$head'); # wysiwyg init goes in <head>
 }