Nice category chooser in Fixture Editor (#365)

Author: FloEdelmann

views/pages/fixture_editor.js

@@ -127,18 +127,19 @@ module.exports = function(options) {
   str += '</label>';
   str += '</section>';
 
-  str += '<section class="categories">';
-  str += '<label class="validate-group">';
+  const fixtureCategories = JSON.stringify(properties.category.enum.map(
+    cat => ({
+      name: cat,
+      icon: svg.getCategoryIcon(cat)
+    })
+  )).replace(/"/g, '\'');
+
+  str += '<section class="categories validate-group">';
   str += '<span class="label">Categories</span>';
   str += '<span class="value">';
-  str += `<select multiple required size="${Object.keys(options.register.categories).length}" v-model="fixture.categories">`;
-  for (const cat of properties.category.enum) {
-    str += `<option value="${cat}">${cat}</option>`;
-  }
-  str += '</select>';
+  str += `<category-chooser :all-categories="${fixtureCategories}" v-model="fixture.categories"></category-chooser>`;
   str += '<span class="error-message" hidden></span>';
   str += '</span>';
-  str += '</label>';
   str += '</section>';
 
   str += '<section class="comment">';
@@ -253,6 +254,7 @@ module.exports = function(options) {
 
   str += '</div>';
 
+  str += getCategoryChooserTemplate();
   str += getPhysicalTemplate();
   str += getModeTemplate();
   str += getCapabilityTemplate();
@@ -265,6 +267,26 @@ module.exports = function(options) {
   return str;
 };
 
+/**
+ * @returns {!string} The Vue template for a <div> containing the fixture's category chooser.
+ */
+function getCategoryChooserTemplate() {
+  let str = '<script type="text/x-template" id="template-category-chooser">';
+  str += '<div>';
+
+  str += '<draggable v-model="selectedCategories" element="span">';
+  str += '  <a href="#" v-for="cat in selectedCategories" @click.prevent="deselect(cat)" class="category-badge selected"><span v-html="cat.icon"></span> {{cat.name}}</a>';
+  str += '</draggable>';
+
+  str += '<a href="#" v-for="cat in unselectedCategories" @click.prevent="select(cat)" class="category-badge"><span v-html="cat.icon"></span> {{cat.name}}</a>';
+
+  str += '<span class="hint">Select and reorder all applicable categories, the most suitable first.</span>';
+  str += '</div>';
+  str += '</script>'; // #template-category-chooser
+
+  return str;
+}
+
 /**
  * @returns {!string} The Vue template for a <div> containing a fixture's or mode's physical information.
  */
@@ -471,6 +493,7 @@ function getModeTemplate() {
 
   str += '<h3>Channels</h3>';
 
+  str += '<div class="validate-group mode-channels">';
   str += '<draggable v-model="mode.channels" :options="dragOptions">';
   str += '  <transition-group class="mode-channels" name="mode-channels" tag="ol">';
   str += '    <li v-for="(channelUuid, index) in mode.channels" :key="channelUuid" :data-channel-uuid="channelUuid">';
@@ -482,6 +505,8 @@ function getModeTemplate() {
   str += '    </li>';
   str += '  </transition-group>';
   str += '</draggable>';
+  str += '<span class="error-message" hidden></span>';
+  str += '</div>';
 
   str += '<a href="#add-channel" class="button primary" @click.prevent="addChannel">add channel</a>';
 

views/pages/single_fixture.js

@@ -226,9 +226,9 @@ function handleFixtureInfo() {
   let str = '<section class="categories">';
   str += '  <span class="label">Categories</span>';
   str += '  <span class="value">';
-  str += fixture.categories.map(
-    cat => `<a href="/categories/${encodeURIComponent(cat)}" class="category-badge">${svg.getCategoryIcon(cat)} ${cat}</a>`
-  ).join(' ');
+  for (const cat of fixture.categories) {
+    str += `<a href="/categories/${encodeURIComponent(cat)}" class="category-badge">${svg.getCategoryIcon(cat)} ${cat}</a>`;
+  }
   str += '  </span>';
   str += '</section>';
 

views/scripts/fixture-editor.js

@@ -99,6 +99,43 @@ Vue.component('a11y-dialog', {
 
 Vue.component('draggable', draggable);
 
+Vue.component('category-chooser', {
+  template: '#template-category-chooser',
+  props: ['value', 'allCategories'],
+  computed: {
+    selectedCategories: {
+      get: function() {
+        var self = this;
+        return this.value.map(function(catName) {
+          return self.allCategories.find(function(cat) {
+            return cat.name === catName;
+          });
+        });
+      },
+      set: function(newSelectedCategories) {
+        this.$emit('input', newSelectedCategories.map(function(cat) {
+          return cat.name;
+        }));
+      }
+    },
+    unselectedCategories: function() {
+      var self = this;
+      return this.allCategories.filter(function(cat) {
+        return self.value.indexOf(cat.name) === -1;
+      });
+    }
+  },
+  methods: {
+    select: function(cat) {
+      this.value.push(cat.name);
+    },
+    deselect: function(cat) {
+      var index = this.value.indexOf(cat.name);
+      this.value.splice(index, 1);
+    }
+  }
+});
+
 Vue.component('physical-data', {
   template: '#template-physical',
   props: ['value'],

views/scripts/validate.js

@@ -65,13 +65,25 @@ module.exports = (function() {
       }
     }
 
+    if (field.matches('.categories')) {
+      if (field.querySelectorAll('.selected').length === 0) {
+        return 'Please select at least one category.';
+      }
+    }
+
     if (field.matches('.physical-lens-degrees') || field.matches('.capability')) {
       var range = field.querySelectorAll('input');
       if (range[0].value !== '' && range[1].value !== '' && Number(range[0].value) > Number(range[1].value)) {
         return 'The start value of a range must not be greater than its end.';
       }
     }
 
+    if (field.matches('.mode-channels')) {
+      if (field.querySelectorAll('li').length === 0) {
+        return 'A mode must contain at least one channel.';
+      }
+    }
+
     if (field.matches('.channelName')) {
       if (/\bfine\b|\d+(?:\s|-|_)*bit|\bMSB\b|\bLSB\b/i.test(field.value)) {
         return 'Please don\'t create fine channels here, set its resolution below instead.';
@@ -224,6 +236,10 @@ module.exports = (function() {
       }
     });
 
+    if (errors.length === 0 && customError) {
+      errors = [customError];
+    }
+
     validate.showError(group, errors.join(' '));
 
     return errors.length > 0 ? errors : null;
@@ -312,19 +328,22 @@ module.exports = (function() {
 
     event.preventDefault();
 
+    var firstErrorGroup;
     var firstErrorField;
 
     [].forEach.call(form.querySelectorAll(settings.groupSelector), function(group) {
       var error = validate.validateGroup(group);
-      if (error && !firstErrorField) {
+      if (error && !firstErrorGroup) {
+        firstErrorGroup = group;
         firstErrorField = group.querySelector(settings.fieldSelector);
       }
     });
 
     // If there are errors, focus on first element with error
-    if (firstErrorField) {
-      var scrollContainer = firstErrorField.closest('.dialog') || window;
-      scrollIntoView(firstErrorField, {
+    if (firstErrorGroup) {
+      var scrollToElem = firstErrorField ? firstErrorField : firstErrorGroup;
+      var scrollContainer = scrollToElem.closest('.dialog') || window;
+      scrollIntoView(scrollToElem, {
         time: 300,
         align: {
           top: 0,
@@ -335,7 +354,7 @@ module.exports = (function() {
           return target === scrollContainer;
         }
       }, function() {
-        firstErrorField.focus();
+        scrollToElem.focus();
       });
 
       return;
@@ -400,9 +419,6 @@ module.exports = (function() {
    * @param {validateOnSubmitCallback} onSubmit function to call after successful validation
    */
   validate.init = function(onSubmit) {
-    // Destroy any existing initializations
-    validate.destroy();
-
     settings.onSubmit = onSubmit;
 
     // Add the `novalidate` attribute to all forms

views/stylesheets/fixture.scss

@@ -96,7 +96,7 @@
 .category-badge {
   display: inline-block;
   padding: 4px 1.5ex 4px 1ex;
-  margin: 0 0 4px;
+  margin: 0 4px 4px 0;
   border-radius: 5000px; /* see http://stackoverflow.com/a/18795153/451391 */
   background: $grey-100;
 
@@ -112,6 +112,7 @@
 
   &.selected {
     background-color: $blue-700;
+    cursor: move;
 
     &:link,
     &:visited {
@@ -333,7 +334,7 @@ a.fixture-mode {
   content: " #" counter(modes);
 }
 
-.mode-channels {
+ol.mode-channels {
   padding-left: 1.9em;
   min-height: 1em;