fix #11: disallow groups without a title

app/scripts/models/group-model.js

@@ -94,6 +94,7 @@ var GroupModel = MenuItemModel.extend({
 
     removeGroup: function(group) {
         this.get('items').remove(group);
+        this.trigger('remove', group);
     },
 
     addGroup: function(group) {
@@ -132,6 +133,7 @@ var GroupModel = MenuItemModel.extend({
             this.parentGroup.group.groups.splice(ix, 1);
         }
         this.parentGroup.removeGroup(this);
+        this.trigger('delete');
     }
 });
 

app/scripts/views/grp-view.js

@@ -26,6 +26,9 @@ var GrpView = Backbone.View.extend({
                 icon: this.model.get('icon') || 'folder',
                 readonly: this.model.get('top')
             }));
+            if (!this.model.get('title')) {
+                this.$el.find('#grp__field-title').focus();
+            }
         }
         this.scroll = baron({
             root: this.$el.find('.details__body')[0],

app/scripts/views/menu/menu-item-view.js

@@ -75,7 +75,7 @@ var MenuItemView = Backbone.View.extend({
     },
 
     changeTitle: function(model, title) {
-        this.$el.find('.menu__item-title').first().text(title);
+        this.$el.find('.menu__item-title').first().text(title || '(no title)');
     },
 
     changeIcon: function(model, icon) {

app/templates/grp.html

@@ -4,7 +4,7 @@
         <div class="grp__field">
             <label for="grp__field-title">Name:</label>
             <input type="text" class="input-base" id="grp__field-title" value="<%- title %>" size="50" maxlength="1024"
-                   required <%= readonly ? 'readonly' : '' %> <%= title ? '' : 'autofocus' %> />
+                   required <%= readonly ? 'readonly' : '' %> />
         </div>
         <label>Icon:</label>
         <i class="fa fa-<%- icon %> grp__icon"></i>

app/templates/menu/menu-item.html

@@ -5,7 +5,7 @@
         cls ? cls : '' %>">
     <div class="menu__item-body">
         <i class="menu__item-icon fa <%= icon ? 'fa-' + icon : 'menu__item-icon--no-icon' %>"></i><span
-            class="menu__item-title"><%- title %></span>
+            class="menu__item-title"><%- title || '(no title)' %></span>
         <% if (options) { %>
         <div class="menu__item-options">
             <% options.forEach(function(option) { %>