diff options
| -rw-r--r-- | data/stuff/test/tab-posts.js | 133 | ||||
| -rw-r--r-- | src/guff/views/ecrs/test/auth.ecr | 415 | ||||
| -rw-r--r-- | src/guff/views/html/test/auth.cr | 64 |
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.' + > + × 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'> + × + </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.' > - × 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 + × 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'> + × + </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.' + > + × 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 |