update post, pag,e and project edit dialogs

3 files changed, 332 insertions, 280 deletions

diff --git a/data/stuff/test/tab-posts.js b/data/stuff/test/tab-posts.js
index b9692a5..90c26de 100644
--- a/data/stuff/test/tab-posts.js
+++ b/data/stuff/test/tab-posts.js
@@ -38,114 +38,41 @@ jQuery(function($) {
     ],
   });
 
-
-  var POST_TYPES = {
-    type: {
-      last: false,
-      name: "Type",
-    },
-
-    blog: {
-      last: true,
-      name: "Blog Post",
-
-      cbs: {
-        show: function() {
-          $('#post-new-blog-name').val('');
-          $('#post-new-blog-slug').val('');
-          $('#post-new-blog-body').val('');
-        },
-
-        shown: function() {
-          $('#post-new-blog-name').focus();
-        },
-      },
-    },
-
-    page: {
-      last: true,
-      name: "Page",
-    },
-
-    project: {
-      last: true,
-      name: "Project",
-    },
-  };
-
-  $('#post-new-dialog').on('show.bs.modal', function() {
-    $('#post-new-type-blog').click();
-
-    $('#post-new-tab-type').parent().removeClass('active')
-    $('#post-new-tab-type').click();
-  });
-
-  $.each(POST_TYPES, function(id, data) {
-    $('#post-new-tab-' + id).on('show.bs.tab', function() {
-      // update buttons
-      $('#post-new-back').toggleClass('disabled', !data.last);
-      $('#post-new-next').toggleClass('hidden', data.last);
-      $('#post-new-confirm').toggleClass('hidden', !data.last)
-        .find('span.name').text(data.name);
+  $.each(['blog', 'page', 'project'], function(i, id) {
+    var p = '#' + id + '-edit-';
+
+    $(p + 'dialog').one('shown.bs.modal', function() {
+      // lazy-init editor
+      CKEDITOR.replace(id + '-edit-body');
+    }).on('show.bs.modal', function() {
+      // reset close confirmation
+      $(this).data('close-dialog-confirmed', false);
+
+      // TODO load post
+      $(p + 'name').val('');
+      $(p + 'slug').val('');
+    }).on('shown.bs.modal', function() {
+      $(p + 'name').focus();
+    }).on('hide.bs.modal', function() {
+      return (
+        $(this).data('close-dialog-confirmed') ||
+        confirm('Close without saving changes?')
+      );
+    }).find('button[data-dismiss="modal"]').click(function() {
+      // override close confirmation
+      // FIXME: should this only be on save?
+      $(p + 'dialog').data('close-dialog-confirmed', true);
     });
-    
-    if (data.cbs) {
-      // add event handlers
-      $.each(data.cbs, function(ev_id, fn) {
-        $('#post-new-tab-' + id).on(ev_id + '.bs.tab', fn);
-      });
-    }
-  });
-
-  $('#post-new-back').click(function() {
-    $('#post-new-tab-type').click();
-
-    // stop event
-    return false;
-  });
-
-  $('#post-new-next').click(function() {
-    $.each(POST_TYPES, function(id, data) {
-      if ($('#post-new-type-' + id).is(':checked')) {
-        // select tab
-        $('#post-new-tab-' + id).click();
 
+    $(p + 'confirm').click(function() {
+      if ($(this).hasClass('disabled'))
         return false;
-      }
-    });
 
-    // stop event
-    return false;
-  });
+      // TODO: see #user-add-confirm
+      alert('TODO: create');
 
-  $('#post-new-confirm').click(function() {
-    if (me.hasClass('disabled'))
+      // stop event
       return false;
-
-    // TODO: see #user-add-confirm
-    alert('TODO: create');
-
-    // stop event
-    return false;
-  });
-
-  $('#post-new-tab-pane-type label').dblclick(function() {
-    $(this).find('input[type="radio"]').prop('checked', true);
-    $('#post-new-next').click();
-
-    // stop event
-    return false;
-  });
-
-  $('#post-new-tab-blog').one('shown.bs.tab', function() {
-    // lazy-init editor
-    console.log('initializing editor');
-/* 
- *     tinymce.init({
- *       selector: '#post-new-blog-body',
- *       plugins: 'fullscreen',
- *     });
- */ 
-    CKEDITOR.replace('post-new-blog-body');
+    });
   });
 });
diff --git a/src/guff/views/ecrs/test/auth.ecr b/src/guff/views/ecrs/test/auth.ecr
index 10b9518..228c0a5 100644
--- a/src/guff/views/ecrs/test/auth.ecr
+++ b/src/guff/views/ecrs/test/auth.ecr
@@ -26,18 +26,9 @@
         <div class='panel panel-default'>
           <div class='panel-heading'>
             <div class='btn-toolbar'>
-              <div class='btn-group btn-group-sm'>
-                <a
-                  href='#'
-                  class='btn btn-primary'
-                  title='Create new post.'
-                  data-toggle='modal'
-                  data-target='#post-new-dialog'
-                >
-                  <i class='fa fa-plus-circle'></i>
-                  New Post
-                </a><!-- btn -->
-              </div><!-- btn-group -->
+              <div class='btn-group btn-group-sm'><%=
+                get_new_post_button
+              %></div><!-- btn-group -->
             </div><!-- btn-toolbar -->
           </div><!-- panel-heading -->
 
@@ -53,18 +44,9 @@
         <div class='panel panel-default'>
           <div class='panel-heading'>
             <div class='btn-toolbar'>
-              <div class='btn-group btn-group-sm'>
-                <a
-                  href='#'
-                  class='btn btn-primary'
-                  title='Create new post.'
-                  data-toggle='modal'
-                  data-target='#post-new-dialog'
-                >
-                  <i class='fa fa-plus-circle'></i>
-                  New Post
-                </a><!-- btn -->
-              </div><!-- btn-group -->
+              <div class='btn-group btn-group-sm'><%=
+                get_new_post_button
+              %></div><!-- btn-group -->
 
               <div class='btn-group btn-group-sm pull-right'>
                 <a
@@ -501,7 +483,7 @@
   </div><!-- modal-dialog -->
 </div><!-- modal -->
 
-<div id='post-new-dialog' class='modal fade' role='dialog'>
+<div id='blog-edit-dialog' class='modal fade' role='dialog'>
   <div class='modal-dialog modal-lg' role='document'>
     <div class='modal-content'>
       <div class='modal-header'>
@@ -517,188 +499,260 @@
         </button><!-- close -->
 
         <h4 class='modal-title'>
-          <i class='fa fa-plus-circle'></i>
-          New Post
+          <i class='fa fa-edit'></i>
+          Edit Blog Post
         </h4><!-- modal-title -->
       </div><!-- modal-header -->
 
       <div class='modal-body'>
-        <ul class='hidden nav nav-pills nav-justified'><%=
-          get_tabs(:post_new, "post-new")
-        %></ul><!-- nav -->
-
-        <div class='tab-content'>
-          <div
-            id='post-new-tab-pane-type'
-            class='tab-pane'
-            role='tabpanel'
-          >
-            <p>
-              Choose the type of post to create using the radio buttons
-              below, then click the "Next" button.
-            </p>
-
-            <div class='radio'>
-              <label>
-                <input
-                  type='radio'
-                  name='post-new-type'
-                  id='post-new-type-blog'
-                  value='blog' 
-                  checked='checked'
-                  title='Create new blog post.'
-                  aria-describedby='post-new-type-help-blog'
-                />
-                Blog Post
+        <div class='row'>
+          <div class='col-md-6'>
+            <div class='form-group'>
+              <label for='blog-edit-name'>
+                Title
               </label>
 
-              <span id='post-new-type-help-blog' class='help-block'>
-                Some description about creating a new blog post.
-              </span><!-- help-block -->
-            </div><!-- radio -->
-
-            <div class='radio'>
-              <label>
-                <input
-                  type='radio'
-                  name='post-new-type'
-                  id='post-new-type-page'
-                  value='page' 
-                  title='Create new page.'
-                  aria-describedby='post-new-type-help-page'
-                />
-                Page
+              <input
+                type='text'
+                id='blog-edit-name'
+                class='form-control'
+                title='Enter title for blog post.'
+                placeholder='Blog Post Title'
+              />
+            </div><!-- form-group -->
+          </div><!-- col-md-6 -->
+
+          <div class='col-md-6'>
+            <div class='form-group'>
+              <label for='blog-edit-slug'>
+                Slug
               </label>
 
-              <span id='post-new-type-help-page' class='help-block'>
-                Some description about creating a new page.
-              </span><!-- help-block -->
-            </div><!-- radio -->
-
-            <div class='radio'>
-              <label>
-                <input
-                  type='radio'
-                  name='post-new-type'
-                  id='post-new-type-project'
-                  value='project' 
-                  title='Create new project.'
-                  aria-describedby='post-new-type-help-project'
-                />
-                Project
+              <input
+                type='text'
+                id='blog-edit-slug'
+                class='form-control'
+                title='Enter slug for blog post.'
+                placeholder='blog-post-title'
+              />
+            </div><!-- form-group -->
+          </div><!-- col-md-6 -->
+        </div><!-- row -->
+
+        <div class='form-group'>
+          <label for='blog-edit-body'>
+            Body
+          </label>
+
+          <textarea
+            id='blog-edit-body'
+            class='form-control'
+            rows='15'
+          ></textarea>
+        </div><!-- form-group -->
+      </div><!-- modal-body -->
+
+      <div class='modal-footer'>
+        <button
+          id='blog-edit-confirm'
+          class='btn btn-primary'
+          title='Create post.'
+        >
+          <span class='hidden loading'>
+            <i class='fa fa-spinner fa-spin'></i>
+            Please Wait...
+          </span>
+
+          <span class='loading'>
+            <i class='fa fa-save'></i>
+            Save Changes
+          </span>
+        </button>
+
+        <button
+          class='btn btn-default'
+          data-dismiss='modal'
+          title='Close dialog.'
+        >
+          &times; Close
+        </button>
+      </div><!-- modal-footer -->
+    </div><!-- modal-content -->
+  </div><!-- modal-dialog -->
+</div><!-- modal -->
+
+<div id='page-edit-dialog' class='modal fade' role='dialog'>
+  <div class='modal-dialog modal-lg' role='document'>
+    <div class='modal-content'>
+      <div class='modal-header'>
+        <button
+          type='button'
+          class='close'
+          data-dismiss='modal'
+          aria-label='Close'
+        >
+          <span aria-hidden='true'>
+            &times;
+          </span>
+        </button><!-- close -->
+
+        <h4 class='modal-title'>
+          <i class='fa fa-edit'></i>
+          Edit Page
+        </h4><!-- modal-title -->
+      </div><!-- modal-header -->
+
+      <div class='modal-body'>
+        <div class='row'>
+          <div class='col-md-6'>
+            <div class='form-group'>
+              <label for='page-edit-name'>
+                Title
               </label>
 
-              <span id='post-new-type-help-project' class='help-block'>
-                Some description about creating a new project.
-              </span><!-- help-block -->
-            </div><!-- radio -->
-          </div><!-- #post-new-tab-pane-type -->
-
-          <div
-            id='post-new-tab-pane-blog'
-            class='tab-pane'
-            role='tabpanel'
-          >
-            <div class='row'>
-              <div class='col-md-6'>
-                <div class='form-group'>
-                  <label for='post-new-blog-name'>
-                    Title
-                  </label>
-
-                  <input
-                    type='text'
-                    id='post-new-blog-name'
-                    class='form-control'
-                    title='Enter title for blog post.'
-                    placeholder='Blog Post Title'
-                  />
-                </div><!-- form-group -->
-              </div><!-- col-md-6 -->
-
-              <div class='col-md-6'>
-                <div class='form-group'>
-                  <label for='post-new-blog-slug'>
-                    Slug
-                  </label>
-
-                  <input
-                    type='text'
-                    id='post-new-blog-slug'
-                    class='form-control'
-                    title='Enter slug for blog post.'
-                    placeholder='blog-post-slug'
-                  />
-                </div><!-- form-group -->
-              </div><!-- col-md-6 -->
-            </div><!-- row -->
+              <input
+                type='text'
+                id='page-edit-name'
+                class='form-control'
+                title='Enter title for page.'
+                placeholder='Page Title'
+              />
+            </div><!-- form-group -->
+          </div><!-- col-md-6 -->
 
+          <div class='col-md-6'>
             <div class='form-group'>
-              <label for='post-new-blog-body'>
-                Body
+              <label for='page-edit-slug'>
+                Path
               </label>
 
-              <textarea
-                id='post-new-blog-body'
+              <input
+                type='text'
+                id='page-edit-slug'
                 class='form-control'
-                rows='15'
-              ></textarea>
+                title='Enter path for this page.'
+                placeholder='page-title'
+              />
             </div><!-- form-group -->
-          </div><!-- #post-new-tab-pane-blog -->
+          </div><!-- col-md-6 -->
+        </div><!-- row -->
 
-          <div
-            id='post-new-tab-pane-page'
-            class='tab-pane'
-            role='tabpanel'
-          >
-            <p>
-              TODO: create page
-            </p>
-          </div><!-- #post-new-tab-pane-page -->
+        <div class='form-group'>
+          <label for='page-edit-body'>
+            Body
+          </label>
 
-          <div
-            id='post-new-tab-pane-project'
-            class='tab-pane'
-            role='tabpanel'
-          >
-            <p>
-              TODO: create project
-            </p>
-          </div><!-- #post-new-tab-pane-project -->
-        </div><!-- tab-content -->
+          <textarea
+            id='page-edit-body'
+            class='form-control'
+            rows='15'
+          ></textarea>
+        </div><!-- form-group -->
       </div><!-- modal-body -->
 
       <div class='modal-footer'>
         <button
-          class='btn btn-default pull-left'
-          data-dismiss='modal'
-          title='Close dialog.'
+          id='page-edit-confirm'
+          class='btn btn-primary'
+          title='Save changes.'
         >
-          &times; Close
+          <span class='hidden loading'>
+            <i class='fa fa-spinner fa-spin'></i>
+            Please Wait...
+          </span>
+
+          <span class='loading'>
+            <i class='fa fa-save'></i>
+            Save Changes
+          </span>
         </button>
 
-        <button 
-          id='post-new-back'
+        <button
           class='btn btn-default'
-          title='Go to previous step.'
+          data-dismiss='modal'
+          title='Close dialog.'
         >
-          <i class='fa fa-chevron-left'></i>
-          Back
+          &times; Close
         </button>
+      </div><!-- modal-footer -->
+    </div><!-- modal-content -->
+  </div><!-- modal-dialog -->
+</div><!-- modal -->
 
-        <button 
-          id='post-new-next'
-          class='btn btn-primary'
-          title='Go to next step.'
+<div id='project-edit-dialog' class='modal fade' role='dialog'>
+  <div class='modal-dialog modal-lg' role='document'>
+    <div class='modal-content'>
+      <div class='modal-header'>
+        <button
+          type='button'
+          class='close'
+          data-dismiss='modal'
+          aria-label='Close'
         >
-          <i class='fa fa-chevron-right'></i>
-          Next
-        </button>
+          <span aria-hidden='true'>
+            &times;
+          </span>
+        </button><!-- close -->
+
+        <h4 class='modal-title'>
+          <i class='fa fa-edit'></i>
+          Edit Project
+        </h4><!-- modal-title -->
+      </div><!-- modal-header -->
+
+      <div class='modal-body'>
+        <div class='row'>
+          <div class='col-md-6'>
+            <div class='form-group'>
+              <label for='project-edit-name'>
+                Name
+              </label>
+
+              <input
+                type='text'
+                id='project-edit-name'
+                class='form-control'
+                title='Enter name for project.'
+                placeholder='Project Name'
+              />
+            </div><!-- form-group -->
+          </div><!-- col-md-6 -->
+
+          <div class='col-md-6'>
+            <div class='form-group'>
+              <label for='project-edit-slug'>
+                Slug
+              </label>
+
+              <input
+                type='text'
+                id='project-edit-slug'
+                class='form-control'
+                title='Enter slug for this project.'
+                placeholder='project-name'
+              />
+            </div><!-- form-group -->
+          </div><!-- col-md-6 -->
+        </div><!-- row -->
+
+        <div class='form-group'>
+          <label for='project-edit-body'>
+            Body
+          </label>
+
+          <textarea
+            id='project-edit-body'
+            class='form-control'
+            rows='15'
+          ></textarea>
+        </div><!-- form-group -->
+      </div><!-- modal-body -->
 
+      <div class='modal-footer'>
         <button
-          id='post-new-confirm'
+          id='project-edit-confirm'
           class='btn btn-primary'
-          title='Create post.'
+          title='Save changes.'
         >
           <span class='hidden loading'>
             <i class='fa fa-spinner fa-spin'></i>
@@ -706,11 +760,18 @@
           </span>
 
           <span class='loading'>
-            <i class='fa fa-plus-circle'></i>
-            Create 
-            <span class='name'>Type</span>
+            <i class='fa fa-save'></i>
+            Save Changes
           </span>
         </button>
+
+        <button
+          class='btn btn-default'
+          data-dismiss='modal'
+          title='Close dialog.'
+        >
+          &times; Close
+        </button>
       </div><!-- modal-footer -->
     </div><!-- modal-content -->
   </div><!-- modal-dialog -->
diff --git a/src/guff/views/html/test/auth.cr b/src/guff/views/html/test/auth.cr
index 60bafb3..59e151f 100644
--- a/src/guff/views/html/test/auth.cr
+++ b/src/guff/views/html/test/auth.cr
@@ -38,6 +38,66 @@ class Guff::TestAuthHTMLView
         </a>
       </li>
     ",
+
+    new_post_button: "
+      <a
+        href='#'
+        class='btn btn-primary'
+        title='Create new blog post.'
+        data-toggle='modal'
+        data-target='#blog-edit-dialog'
+      >
+        <i class='fa fa-plus-circle'></i>
+        New Post
+      </a><!-- btn -->
+
+      <a
+        href='#'
+        class='btn btn-primary'
+        title='Choose post type.'
+        data-toggle='dropdown'
+      >
+        <i class='fa fa-caret-down'></i>
+      </a>
+
+      <ul class='dropdown-menu'>
+        <li>
+          <a
+            href='#'
+            title='Create new blog post.'
+            data-toggle='modal'
+            data-target='#blog-edit-dialog'
+          >
+            <i class='fa fa-bullhorn'></i>
+            New Blog Post
+          </a>
+        </li>
+
+        <li>
+          <a
+            href='#'
+            title='Create new page.'
+            data-toggle='modal'
+            data-target='#page-edit-dialog'
+          >
+            <i class='fa fa-bookmark-o'></i>
+            New Page
+          </a>
+        </li>
+
+        <li>
+          <a
+            href='#'
+            title='Create new project.'
+            data-toggle='modal'
+            data-target='#project-edit-dialog'
+          >
+            <i class='fa fa-cube'></i>
+            New Project
+          </a>
+        </li>
+      </ul>
+    ",
   })
 
   def self.run(models, context : HTTP::Server::Context)
@@ -82,5 +142,9 @@ class Guff::TestAuthHTMLView
     }.join
   end
 
+  def get_new_post_button
+    TEMPLATES[:new_post_button].run
+  end
+
   ECR.def_to_s("./src/guff/views/ecrs/test/auth.ecr")
 end