add tabs to site-add, refactor textarea handling, and fix site_id post edit dialogs

7 files changed, 237 insertions, 155 deletions

diff --git a/data/assets/js/admin/dialogs/page-edit.js b/data/assets/js/admin/dialogs/page-edit.js
index 9e32d89..0e7a5b3 100644
--- a/data/assets/js/admin/dialogs/page-edit.js
+++ b/data/assets/js/admin/dialogs/page-edit.js
@@ -22,9 +22,7 @@ jQuery(function($) {
 
     // get assets
     var assets = ASSET_TYPES.reduce(function(r, key) {
-      var s = $(p + key).val().replace(/^\s+|\s$/mg, '');
-      r[key] = JSON.stringify((s.length > 0) ? s.split(/\s+/m) : []);
-
+      r[key] = listify(p + key);
       return r;
     }, {});
 
diff --git a/data/assets/js/admin/dialogs/post-edit.js b/data/assets/js/admin/dialogs/post-edit.js
index 9d90b99..d7eb120 100644
--- a/data/assets/js/admin/dialogs/post-edit.js
+++ b/data/assets/js/admin/dialogs/post-edit.js
@@ -5,13 +5,8 @@ jQuery(function($) {
   });
 
   function update_slug(name, slug) {
-    if (slug.prop('disabled')) {
-      slug.val(
-        name.val().toLowerCase()
-        .replace(/[^a-z0-9_-]+/g, '-')
-        .replace(/^-+|-+$/g, '')
-      );
-    }
+    if (slug.prop('disabled'))
+      slug.val(slugify(name.val()));
   }
 
   $.each(['blog', 'page', 'project'], function(i, id) {
@@ -22,6 +17,7 @@ jQuery(function($) {
           slug_lock = (r.slug_lock == "1");
 
       $(p + 'name').val(r.name);
+      $(p + 'site').val(r.site_id);
       $(p + 'slug').val(r.slug)
         .prop('disabled', slug_lock ? 'disabled' : null);
 
@@ -100,6 +96,7 @@ jQuery(function($) {
 
       send(id + "/set", $.extend({
         post_id:    $(p + 'dialog').data('post_id'),
+        site_id:    $(p + 'site').val(),
         name:       $(p + 'name').val(),
         slug_lock:  $(p + 'slug-lock').hasClass('btn-default') ? 't' : 'f',
         slug:       $(p + 'slug').val(),
diff --git a/data/assets/js/admin/dialogs/site-add.js b/data/assets/js/admin/dialogs/site-add.js
index 9a3c02f..8cdc772 100644
--- a/data/assets/js/admin/dialogs/site-add.js
+++ b/data/assets/js/admin/dialogs/site-add.js
@@ -1,34 +1,35 @@
 jQuery(function($) {
   "use strict";
 
-  var IDS = ['name', 'slug', 'body', 'lang', 'theme_id'];
+  var p = '#site-add-',
+      IDS = ['name', 'slug', 'body', 'lang', 'theme_id'];
+
   var DEFAULTS = {
     lang:     DATA.default_lang,
     theme_id: DATA.default_theme_id,
   };
 
-  function get_domains() {
-    var r = $('#site-add-domains').val().replace(/^\s+|\s+$/m, '');
-    return (r.length > 0) ? r.split(/\s+/m) : [];
-  }
-
-  $('#site-add-dialog').on('show.bs.modal', function() {
+  $(p + 'dialog').on('show.bs.modal', function() {
     $.each(IDS, function(_, id) {
-      $('#site-add-' + id).val(DEFAULTS[id] || '');
+      $(p + id).val(DEFAULTS[id] || '');
     });
 
     // clear list of domains
-    $('#site-add-domains').val('');
+    $(p + 'domains').val('');
   });
 
-  $('#site-add-dialog').on('shown.bs.modal', function() {
-    $('#site-add-name').focus();
+  $(p + 'dialog').on('shown.bs.modal', function() {
+    // show content tab
+    $(p + 'tab-content').click();
+
+    // focus name field
+    $(p + 'name').focus();
   });
 
-  $('#site-add-dialog input[type="text"]').keydown(function(ev) {
+  $(p + 'dialog input[type="text"]').keydown(function(ev) {
     if (ev.which == 13) {
       setTimeout(function() {
-        $('#site-add-confirm').click();
+        $(p + 'confirm').click();
       }, 10);
 
       // stop event
@@ -36,7 +37,15 @@ jQuery(function($) {
     }
   });
 
-  $('#site-add-confirm').click(function() {
+  $(p + 'name').keydown(function(ev) {
+    var me = $(this);
+
+    setTimeout(function() {
+      $(p + 'slug').val(slugify(me.val()));
+    }, 10);
+  });
+
+  $(p + 'confirm').click(function() {
     var me = $(this);
 
     if (me.hasClass('disabled'))
@@ -46,11 +55,11 @@ jQuery(function($) {
     me.toggleClass('disabled').find('.loading').toggleClass('hidden');
 
     send('site/add', IDS.reduce(function(r, id) {
-      r[id] = $('#site-add-' + id).val();
+      r[id] = $(p + id).val();
       return r;
     }, {
       is_full_feed: 't',
-      domains: JSON.stringify(get_domains()),
+      domains: listify(p + 'domains'),
     })).always(function() {
       // toggle loading
       me.toggleClass('disabled').find('.loading').toggleClass('hidden');
@@ -58,7 +67,7 @@ jQuery(function($) {
       gripe(r, 'add site');
     }).done(function(r) {
       $('#sites-reload').click();
-      $('#site-add-dialog').modal('hide');
+      $(p + 'dialog').modal('hide');
     });
 
     // stop event
diff --git a/data/assets/js/util.js b/data/assets/js/util.js
index 7986120..6379961 100644
--- a/data/assets/js/util.js
+++ b/data/assets/js/util.js
@@ -28,8 +28,22 @@ jQuery(function($) {
 
     // display error message
     alert(prefix + error);
+  };
+
+  // slugify string
+  window.slugify = function(s) {
+    return s.toLowerCase()
+      .replace(/[^a-z0-9_-]+/g, '-')
+      .replace(/^-+|-+$/g, '');
+  };
+
+  // convert textarea to jsonified array of strings
+  window.listify = function(el) {
+    var r = $(el).val().replace(/^\s+|\s+$/m, '');
+    return JSON.stringify((r.length > 0) ? r.split(/\s+/m) : []);
   }
 
+
   LuigiTemplate.FILTERS.json = function(val) {
     return JSON.stringify(val);
   };
diff --git a/src/guff/views/dialogs/admin/site-add.cr b/src/guff/views/dialogs/admin/site-add.cr
index 894a34a..c124457 100644
--- a/src/guff/views/dialogs/admin/site-add.cr
+++ b/src/guff/views/dialogs/admin/site-add.cr
@@ -1,5 +1,29 @@
 require "./site"
 
 class Guff::Views::Dialogs::Admin::SiteAdd < Guff::Views::Dialogs::Admin::Site
+  TABS = [{
+    :id   => "content",
+    :css  => "active",
+    :icon => "fa-pencil",
+    :name => "Content",
+    :text => "View content tab.",
+  }, {
+    :id   => "theme",
+    :css  => "",
+    :icon => "fa-eye",
+    :name => "Theme",
+    :text => "View theme tab.",
+  }, {
+    :id   => "other",
+    :css  => "",
+    :icon => "fa-ellipsis-h",
+    :name => "Other",
+    :text => "View other tab.",
+  }]
+
+  private def tabs
+    super("site-add", TABS)
+  end
+
   ECR.def_to_s("src/views/dialogs/admin/site-add.ecr")
 end
diff --git a/src/guff/views/dialogs/admin/site.cr b/src/guff/views/dialogs/admin/site.cr
index 1b6419b..c03cd0a 100644
--- a/src/guff/views/dialogs/admin/site.cr
+++ b/src/guff/views/dialogs/admin/site.cr
@@ -1,5 +1,5 @@
 class Guff::Views::Dialogs::Admin::Site < Guff::Views::HTMLView
-  TEMPLATES = {
+  OPTION_TEMPLATES = {
     y: "<option value='%s' data-slug='%s' selected='selected'>%s</option>",
     n:  "<option value='%s' data-slug='%s'>%s</option>",
   }
@@ -15,7 +15,7 @@ class Guff::Views::Dialogs::Admin::Site < Guff::Views::HTMLView
       }
     }.map { |row|
       tmpl_id = (row[:slug] == "default") ? :y : :n
-      TEMPLATES[tmpl_id] % %i{id slug name}.map { |k| row[k] }
+      OPTION_TEMPLATES[tmpl_id] % %i{id slug name}.map { |k| row[k] }
     }.join("")
   end
 end
diff --git a/src/views/dialogs/admin/site-add.ecr b/src/views/dialogs/admin/site-add.ecr
index aae2f70..86fd7df 100644
--- a/src/views/dialogs/admin/site-add.ecr
+++ b/src/views/dialogs/admin/site-add.ecr
@@ -1,5 +1,5 @@
 <div id='site-add-dialog' class='modal fade' role='dialog'>
-  <div class='modal-dialog' role='document'>
+  <div class='modal-dialog modal-lg' role='document'>
     <div class='modal-content'>
       <div class='modal-header'>
         <button
@@ -21,132 +21,172 @@
 
       <div class='modal-body'>
         <div class='row'>
-          <div class='col-md-6'>
-            <div class='form-group'>
-              <label for='site-add-name'>
-                Name
-              </label>
-
-              <input
-                type='text'
-                id='site-add-name'
-                class='form-control'
-                title='Enter site name.'
-                placeholder='Some Site'
-                aria-describedby='site-add-name-help'
-              />
-
-              <p id='site-add-name-help' class='help-block'>
-                Site name.
-              </p>
-            </div><!-- form-group -->
-          </div><!-- col-md-6 -->
-
-          <div class='col-md-6'>
-            <div class='form-group'>
-              <label for='site-add-slug'>
-                Slug
-              </label>
-
-              <input
-                type='text'
-                id='site-add-slug'
-                class='form-control'
-                title='Enter site slug (lowercase).'
-                placeholder='some-site'
-                aria-describedby='site-add-slug-help'
-              />
-
-              <p id='site-add-slug-help' class='help-block'>
-                Name of server files directory.
-              </p>
-            </div><!-- form-group -->
-          </div><!-- col-md-6 -->
+          <div class='col-md-3'>
+            <ul class='nav nav-pills nav-stacked' role='tablist'><%=
+              tabs
+            %></ul><!-- nav -->
+          </div><!-- col-md-3 -->
+
+          <div class='col-md-9'>
+            <div class='tab-content'>
+              <div
+                id='site-add-pane-content'
+                class='tab-pane active'
+                role='tabpanel'
+              >
+                <div class='row'>
+                  <div class='col-md-6'>
+                    <div class='form-group'>
+                      <label for='site-add-name'>
+                        Name
+                      </label>
+
+                      <input
+                        type='text'
+                        id='site-add-name'
+                        class='form-control'
+                        title='Enter site name.'
+                        placeholder='Some Site'
+                        aria-describedby='site-add-name-help'
+                      />
+
+                      <p id='site-add-name-help' class='help-block'>
+                        Site name.
+                      </p>
+                    </div><!-- form-group -->
+                  </div><!-- col-md-6 -->
+
+                  <div class='col-md-6'>
+                    <div class='form-group'>
+                      <label for='site-add-slug'>
+                        Slug
+                      </label>
+
+                      <input
+                        type='text'
+                        id='site-add-slug'
+                        class='form-control'
+                        title='Enter site slug (lowercase).'
+                        readonly='readonly'
+                        placeholder='some-site'
+                        aria-describedby='site-add-slug-help'
+                      />
+
+                      <p id='site-add-slug-help' class='help-block'>
+                        Name of files directory on server.
+                      </p>
+                    </div><!-- form-group -->
+                  </div><!-- col-md-6 -->
+                </div><!-- row -->
+
+                <div class='form-group'>
+                  <label for='site-add-body'>
+                    Description
+                  </label>
+
+                  <textarea
+                    id='site-add-body'
+                    class='form-control'
+                    title='Enter site description.'
+                    placeholder='A brief site description'
+                    aria-describedby='site-add-body-help'
+                  /></textarea>
+
+                  <p id='site-add-body-help' class='help-block'>
+                    Brief description of site.
+                  </p>
+                </div><!-- form-group -->
+
+                <div class='form-group'>
+                  <label for='site-add-domains'>
+                    Domains
+                  </label>
+
+                  <textarea
+                    id='site-add-domains'
+                    class='form-control'
+                    title='Newline-delimited list of site domains.'
+                    placeholder='some.example.com'
+                    aria-describedby='site-add-domains-help'
+                  /></textarea>
+
+                  <p id='site-add-domains-help' class='help-block'>
+                    Newline-deilmited list of site domains.
+                  </p>
+                </div><!-- form-group -->
+              </div><!-- tab-pane -->
+
+              <div
+                id='site-add-pane-domains'
+                class='tab-pane'
+                role='tabpanel'
+              >
+              </div><!-- tab-pane -->
+
+              <div
+                id='site-add-pane-theme'
+                class='tab-pane'
+                role='tabpanel'
+              >
+                <div class='row'>
+                  <div class='col-md-6'>
+                    <div class='form-group'>
+                      <label for='site-add-theme_id'>
+                        Theme
+                      </label>
+
+                      <select
+                        id='site-add-theme_id'
+                        class='form-control'
+                        title='Choose site theme.'
+                        aria-describedby='site-add-theme-help'
+                      ><%=
+                        theme_options
+                      %></select>
+
+                      <p id='site-add-theme-help' class='help-block'>
+                        Site theme.
+                      </p>
+                    </div><!-- form-group -->
+                  </div><!-- col-md-6 -->
+                </div><!-- row -->
+              </div><!-- tab-pane -->
+
+              <div
+                id='site-add-pane-other'
+                class='tab-pane'
+                role='tabpanel'
+              >
+                <div class='row'>
+                  <div class='col-md-12'>
+                    <div class='form-group'>
+                      <label for='site-add-lang'>
+                        Language
+                      </label>
+
+                      <input
+                        type='text'
+                        id='site-add-lang'
+                        class='form-control'
+                        title='Enter site IETF language tag (BCP 47).'
+                        aria-describedby='site-add-lang-help'
+                      />
+
+                      <p id='site-add-lang-help' class='help-block'>
+                        <a
+                          href='https://en.wikipedia.org/wiki/IETF_language_tag'
+                          title='View IETF language tag information.'
+                          rel='noopener nofollow'
+                          target='_blank'
+                        >IETF BCP 47 language tag</a> for site.
+                      </p>
+                    </div><!-- form-group -->
+                  </div><!-- col-md-12 -->
+                </div><!-- row -->
+              </div><!-- tab-pane -->
+            </div><!-- tab-content -->
+          </div><!-- col-md-9 -->
         </div><!-- row -->
-
-        <div class='form-group'>
-          <label for='site-add-body'>
-            Description
-          </label>
-
-          <textarea
-            id='site-add-body'
-            class='form-control'
-            title='Enter site description.'
-            placeholder='A brief site description'
-            aria-describedby='site-add-body-help'
-          /></textarea>
-
-          <p id='site-add-body-help' class='help-block'>
-            Brief description of site.
-          </p>
-        </div><!-- form-group -->
-
-        <div class='row'>
-          <div class='col-md-6'>
-            <div class='form-group'>
-              <label for='site-add-theme_id'>
-                Theme
-              </label>
-
-              <select
-                id='site-add-theme_id'
-                class='form-control'
-                title='Choose site theme.'
-                aria-describedby='site-add-theme-help'
-              ><%=
-                theme_options
-              %></select>
-
-              <p id='site-add-theme-help' class='help-block'>
-                Site theme.
-              </p>
-            </div><!-- form-group -->
-          </div><!-- col-md-6 -->
-
-          <div class='col-md-6'>
-            <div class='form-group'>
-              <label for='site-add-lang'>
-                Language
-              </label>
-
-              <input
-                type='text'
-                id='site-add-lang'
-                class='form-control'
-                title='Enter site IETF language tag (BCP 47).'
-                aria-describedby='site-add-lang-help'
-              />
-
-              <p id='site-add-lang-help' class='help-block'>
-                <a
-                  href='https://en.wikipedia.org/wiki/IETF_language_tag'
-                  title='View IETF language tag information.'
-                  rel='noopener nofollow'
-                  target='_blank'
-                >IETF BCP 47 language tag</a> for site.
-              </p>
-            </div><!-- form-group -->
-          </div><!-- col-md-6 -->
-        </div><!-- row -->
-
-        <div class='form-group'>
-          <label for='site-add-domains'>
-            Domains
-          </label>
-
-          <textarea
-            id='site-add-domains'
-            class='form-control'
-            title='Newline-delimited list of site domains.'
-            placeholder='some.example.com'
-            aria-describedby='site-add-domains-help'
-          /></textarea>
-
-          <p id='site-add-domains-help' class='help-block'>
-            Newline-deilmited list of site domains.
-          </p>
-        </div><!-- form-group -->
       </div><!-- modal-body -->
 
       <div class='modal-footer'>