enable autoslug for projects

2 files changed, 61 insertions, 10 deletions

diff --git a/data/stuff/test/tab-posts.js b/data/stuff/test/tab-posts.js
index 90c26de..99933d8 100644
--- a/data/stuff/test/tab-posts.js
+++ b/data/stuff/test/tab-posts.js
@@ -38,6 +38,16 @@ jQuery(function($) {
     ],
   });
 
+  function update_slug(name, slug) {
+    if (slug.prop('disabled')) {
+      slug.val(
+        name.val().toLowerCase()
+        .replace(/[^a-z0-9_\.-]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+      );
+    }
+  }
+
   $.each(['blog', 'page', 'project'], function(i, id) {
     var p = '#' + id + '-edit-';
 
@@ -75,4 +85,34 @@ jQuery(function($) {
       return false;
     });
   });
+
+  $('.post-name').keydown(function() {
+    var name = $(this),
+        slug = $(this).parents('.modal-body').find('.post-slug');
+
+    setTimeout(function() {
+      update_slug(name, slug);
+    }, 10);
+  });
+
+  $('.post-slug-lock').click(function() {
+    var modal_body = $(this).parents('.modal-body');
+
+    // toggle locked state
+    $(this).toggleClass('btn-default btn-primary')
+      .find('.fa').toggleClass('fa-lock fa-unlock');
+    var locked = $(this).hasClass('btn-default');
+
+    // update slug disabled state
+    var slug = modal_body.find('.post-slug');
+    slug.prop('disabled', locked ? 'disabled' : null);
+
+    if (locked) {
+      // auto-generate slug
+      update_slug(modal_body.find('.post-name'), slug);
+    }
+
+    // stop event
+    return false;
+  });
 });
diff --git a/src/guff/views/ecrs/test/auth.ecr b/src/guff/views/ecrs/test/auth.ecr
index cba1b73..124a414 100644
--- a/src/guff/views/ecrs/test/auth.ecr
+++ b/src/guff/views/ecrs/test/auth.ecr
@@ -388,7 +388,7 @@
           </span>
 
           <span class='loading'>
-            <i class='fa fa-user'></i>
+            <i class='fa fa-save'></i>
             Save Changes
           </span>
         </button>
@@ -711,7 +711,7 @@
               <input
                 type='text'
                 id='project-edit-name'
-                class='form-control'
+                class='form-control post-name'
                 title='Enter project name.'
                 placeholder='Project Name'
                 aria-describedby='project-edit-name-help'
@@ -729,14 +729,25 @@
                 Slug
               </label>
 
-              <input
-                type='text'
-                id='project-edit-slug'
-                class='form-control'
-                title='Enter project slug.'
-                placeholder='project-name'
-                aria-describedby='project-edit-slug-help'
-              />
+              <div class='input-group'>
+                <input
+                  type='text'
+                  id='project-edit-slug'
+                  class='form-control post-slug'
+                  title='Enter project slug.'
+                  disabled='disabled'
+                  placeholder='project-name'
+                  aria-describedby='project-edit-slug-help'
+                />
+
+                <a
+                  href='#'
+                  class='btn input-group-addon btn-default post-slug-lock'
+                  title='Toggle slug lock.'
+                >
+                  <i class='fa fa-lock'></i>
+                </a><!-- slog-lock -->
+              </div><!-- input-group -->
 
               <p id='project-edit-slug-help' class='help-block'>
                 URL path component of project.