can choose page layouts, edit sidebar, etc

diff --git a/admin_pages.html b/admin_pages.html
index e6630f5..72252ad 100644 (file)
--- 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 (file)
--- 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 (file)
--- 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 (file)
--- 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 (file)
--- 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 (file)
--- 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