From 829a67d41aacdf529455c0f315665c407ad5d35b Mon Sep 17 00:00:00 2001
From: Jason Woofenden <jason@jasonwoof.com>
Date: Fri, 1 Jan 2016 15:40:05 -0500
Subject: [PATCH] can choose page layouts, edit sidebar, etc

---
 admin_pages.html |   60 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 admin_pages.php  |   26 ++++++++++++++++++++---
 admin_pages.sql  |    2 ++
 inc/cms.php      |   13 +++++++++++-
 style.styl       |   40 ++++++++++++++++++------------------
 template.html    |   14 +++++++------
 6 files changed, 122 insertions(+), 33 deletions(-)

diff --git a/admin_pages.html b/admin_pages.html
index e6630f5..72252ad 100644
--- a/admin_pages.html
+++ b/admin_pages.html
@@ -213,11 +213,11 @@
 				});
 			}
 		});
-		function make_wysiwyg(name) {
+		function make_wysiwyg(name, bodyid_postfix) {
 			CKEDITOR.replace(name, {
 				'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'},
@@ -249,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>
 	<!--~}~-->
 
@@ -279,6 +316,9 @@
 			<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">
@@ -289,7 +329,21 @@
 					<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>
diff --git a/admin_pages.php b/admin_pages.php
index 584aaa0..87e1806 100644
--- a/admin_pages.php
+++ b/admin_pages.php
@@ -2,7 +2,7 @@
 
 # This form requires wfpl. See: http://sametwice.com/wfpl
 
-define('ADMIN_PAGES_DB_FIELDS', 'title,filename,navbar,nav_title,content,description,keywords');
+define('ADMIN_PAGES_DB_FIELDS', 'title,filename,navbar,nav_title,layout,content,sidebar_content,description,keywords');
 
 
 function format_cms_filename($str) {
@@ -19,9 +19,17 @@ function admin_pages_get_fields() {
 	$data['filename'] = format_cms_filename(_REQUEST_cut('filename'));
 	$data['navbar'] = format_options(_REQUEST_cut('navbar'), 'navbar');
 	$data['nav_title'] = format_oneline(_REQUEST_cut('nav_title'));
+	$data['layout'] = format_options(_REQUEST_cut('layout'), 'layout');
 	$data['content'] = format_unix(_REQUEST_cut('content'));
-	$data['description'] = format_unix(_REQUEST_cut('description'));
-	$data['keywords'] = format_unix(_REQUEST_cut('keywords'));
+	if (isset($_REQUEST['sidebar_content'])) { // probs not needed
+		$data['sidebar_content'] = format_unix(_REQUEST_cut('sidebar_content'));
+	}
+	if (isset($_REQUEST['description'])) {
+		$data['description'] = format_unix(_REQUEST_cut('description'));
+	}
+	if (isset($_REQUEST['keywords'])) {
+		$data['keywords'] = format_unix(_REQUEST_cut('keywords'));
+	}
 
 	return $data;
 }
@@ -118,6 +126,12 @@ function admin_pages_main_form($id = false) {
 
 	tem_set('$basename', 'admin_pages');
 
+	pulldown('layout', [
+		['0', "Full (no sidebar)"],
+		['1', "With Plain Sidebar"],
+		['2', "With Bordered Sidebar"]
+	]);
+
 	$navbar_options = array(array('ignored', 'Not at all'), array('0', 'First'));
 	$rows = db_get_rows('cms_pages', 'id,coalesce(nullif(nav_title,\'\'), title) as title,navbar', 'where navbar != 0 order by navbar');
 	if($rows) for($i = 0; $i < count($rows); ++$i) {
@@ -167,6 +181,12 @@ function admin_pages_main_form($id = false) {
 		$data = array('filename' => format_cms_filename($_REQUEST['new_filename']));
 	}
 
+	if (!isset($data['layout']) || $data['layout'] === '' || $data['layout'] === '0') {
+		$data['sidebar_editor_display'] = 'none';
+	} else {
+		$data['sidebar_editor_display'] = 'block';
+	}
+
 	tem_set('wfpl_images_json', json_encode(admin_pages_get_images()));
 	tem_set('wfpl_image_width_full', WFPL_IMAGE_WIDTH_FULL);
 	tem_set('wfpl_image_width_small', WFPL_IMAGE_WIDTH_SMALL);
diff --git a/admin_pages.sql b/admin_pages.sql
index 76d52d9..c03a27e 100644
--- a/admin_pages.sql
+++ b/admin_pages.sql
@@ -5,7 +5,9 @@ create table cms_pages (
     title varchar(200) not null default "",
     nav_title varchar(200) not null default "",
     navbar int not null default 0,
+    layout int not null default 0,
     content mediumtext not null default "",
+    sidebar_content mediumtext not null default "",
     description text not null default "",
     keywords text not null default ""
 );
diff --git a/inc/cms.php b/inc/cms.php
index 02dc63e..895c810 100644
--- a/inc/cms.php
+++ b/inc/cms.php
@@ -43,13 +43,24 @@ function cms_display($basename, &$tem) {
 
 function cms_display_content(&$tem /*, 'where clause %", %i', string, int */) {
 	$args = array_slice(func_get_args(), 1);
-	$args = array_merge(array('cms_pages', 'id,title,keywords,description,content'), $args);
+	$args = array_merge(array('cms_pages', 'id,title,keywords,description,layout,content,sidebar_content'), $args);
 	$row = call_user_func_array('db_get_assoc', $args);
 	if($row) {
 		$tem->set('$cms_title', $row['title']);
 		$tem->set('$meta_keywords', $row['keywords']);
 		$tem->set('$meta_description', $row['description']);
 		$tem->set('$cms_body', $row['content']);
+		if ($row['layout'] === '' || $row['layout'] === '0') {
+			$tem->set('$layout_centerer_class', 'full');
+		} else {
+			$tem->set('$layout_centerer_class', 'with_sidebar');
+			if ($row['layout'] === '1') {
+				$tem->set('$layout_sidebar_class', 'plain');
+			} else {
+				$tem->set('$layout_sidebar_class', 'bordered');
+			}
+			$tem->set('$cms_sidebar', $row['sidebar_content']);
+		}
 		return $row['id'];
 	}
 	return false;
diff --git a/style.styl b/style.styl
index 140571a..c883c70 100644
--- a/style.styl
+++ b/style.styl
@@ -61,6 +61,8 @@ columns = wfpl_columns({
 	}
 })
 
+biggest_content_width = columns['widths']['.centerer.full > .main']
+
 hide_in_one_column_mode = {
 	".centerer.with_sidebar > .sidebar.plain": 1
 	".centerer.with_sidebar > .sidebar.bordered": 1
@@ -205,31 +207,29 @@ body
 	font: font_size_normal Arimo, Arial, sans-serif
 
 // call this for each ckeditor on each page
-ckeditor(basename, element_name, width)
+ckeditor_elements_already = {}
+ckeditor(basename, element_name, body_id, width)
 	// ckeditor ui, including border around wysiwyg area
-	#{basename}_body #cke_{element_name}
-		margin-left: -15px
-		if width < 650px
-			width: 680px
-		else
-			width: width + 30px
+	unless element_name in ckeditor_elements_already
+		ckeditor_elements_already[element_name] = 1
+		#{basename}_body #cke_{element_name}
+			width: biggest_content_width + 30px
+			margin-right: -30px
 	// body tag of the wysiwyg area
-	#{basename}_wysiwyg_{element_name}
+	#{basename}_wysiwyg_{body_id}
 		background: content_bg
 		width: width
 		margin: 0 auto
-		if width <= 600px
-			min-width: 0
-			width: width
-			margin: 0 auto
-			border-right: 20px solid #eee
-			border-left: 20px solid #eee
-			border-top: 1px solid #eee
-			border-bottom: 1px solid #eee
-			min-height: 250px
+		min-width: 0
+		width: width
+		margin: 0 auto
+		border: 5px solid #eee
+		min-height: 50px
 
-// FIXME fix this for layouts
-ckeditor('admin_pages', 'content', columns.width)
+ckeditor('admin_pages', 'content', 'content_full_main', columns['widths']['.centerer.full > .main'])
+ckeditor('admin_pages', 'content', 'content_with_sidebar_main', columns['widths']['.centerer.with_sidebar > .main'])
+ckeditor('admin_pages', 'sidebar_content', 'content_with_sidebar_sidebar_plain', columns['widths']['.centerer.with_sidebar > .sidebar.plain'])
+ckeditor('admin_pages', 'sidebar_content', 'content_with_sidebar_sidebar_bordered', columns['widths']['.centerer.with_sidebar > .sidebar.bordered'])
 
 // outermost div for centering, shadow, etc
 #centerer
@@ -412,7 +412,7 @@ for selector, css in columns.css
 	for selector, css in columns.responsive_css
 		body > {selector}
 			{css}
-	
+
 	// as big as it can be
 	body > .centerer
 		width: auto
diff --git a/template.html b/template.html
index e3fa035..5ee1046 100644
--- a/template.html
+++ b/template.html
@@ -14,7 +14,7 @@
 </head>
 
 <body id="~$basename~_body" class="real_body_tag">
-	<div class="centerer with_sidebar">
+	<div class="centerer ~$layout_centerer_class~">
 		<header>
 			header image here
 		</header>
@@ -54,11 +54,13 @@
 			</article>
 		</div>
 
-<div class="sidebar bordered">
-	<h1>Sidebar!</h1>
-	<!--~$cms_body~-->
-</div>
-<div style="clear: both"></div>
+		<!--~$cms_sidebar once_if {~-->
+			<div class="sidebar ~$layout_sidebar_class~">
+				<!--~$cms_sidebar~-->
+			</div>
+
+			<div style="clear: both"></div>
+		<!--~}~-->
 
 		<footer>
 			footer text here
-- 
1.7.10.4