apostrophe-schemas - npm Package Compare versions

Comparing version 0.5.6 to 0.5.7

index.js

@@ -118,2 +118,63 @@ var async = require('async');
 
+    // Convenience option for grouping fields
+    // together (visually represented as tabs). Any
+    // fields that are not grouped go to the top and
+    // appear above the tabs
+    if (options.groupFields) {
+      // Drop any previous groups, we're overriding them
+      schema = _.filter(schema, function(field) {
+        return (field.type !== 'group');
+      });
+
+      // Check for groups and fields with the same name, which is
+      // forbidden because groups are internally represented as fields
+      var nameMap = {};
+      _.each(schema, function(field) {
+        nameMap[field.name] = true;
+      });
+      _.each(options.groupFields, function(group) {
+        if (_.has(nameMap, group.name)) {
+          throw new Error('The group ' + group.name + ' has the same name as a field. Group names must be distinct from field names.');
+        }
+      });
+
+      var ungrouped = [];
+      var grouped = [];
+      _.each(options.groupFields, function(group) {
+        _.each(group.fields || [], function(name) {
+          var field = _.find(schema, function(field) {
+            return (field.name === name);
+          });
+          if (field) {
+            field.group = group.name;
+          } else {
+            throw new Error('Nonexistent field ' + field + ' referenced by groups option in schemas.compose');
+          }
+        });
+      });
+
+      var newSchema = _.map(options.groupFields, function(group) {
+        return {
+          type: 'group',
+          name: group.name,
+          label: group.label,
+          icon: group.label
+        };
+      });
+
+      ungrouped = _.filter(schema, function(field) {
+        return !field.group;
+      });
+
+      newSchema = newSchema.concat(ungrouped);
+
+      _.each(options.groupFields, function(group) {
+        newSchema = newSchema.concat(_.filter(schema, function(field) {
+          return (field.group === group.name);
+        }));
+      });
+
+      schema = newSchema;
+    }
+
     _.each(schema, function(field) {
@@ -120,0 +181,0 @@ if (field.template) {

package.json

 {
-  "version": "0.5.6",
+  "version": "0.5.7",
   "name": "apostrophe-schemas",
@@ -33,2 +33,2 @@ "description": "Schemas for easy editing of properties in Apostrophe objects",
   }
-}
+}

public/js/editor.js

@@ -196,3 +196,5 @@ function AposSchemas() {
     },
-
+    group: function(data, name, $field, $el, field) {
+      // Just a presentation thing
+    },
     // The rest are very simple because the server does
@@ -395,2 +397,6 @@ // the serious sanitization work and the representation in the DOM
     },
+    group: function(data, name, $field, $el, field, callback) {
+      // Just a presentation thing
+      return callback();
+    },
     date: function(data, name, $field, $el, field, callback) {
@@ -397,0 +403,0 @@ $field.val(data[name]);

README.md

@@ -11,3 +11,4 @@ # apostrophe-schemas
     * [What field types are available?](#what-field-types-are-available)
-    * [Required Fields](#required-fields)
+    * [Validation](#validation)
+    * [Grouping fields into tabs](#grouping-fields-into-tabs)
   * Editing
@@ -141,2 +142,37 @@ * [Schemas in Nunjucks Templates](#editing-schemas-in-nunjucks-templates)
 
+#### Grouping fields into tabs
+
+One lonnnnng scrolling list of fields is usually not user-friendly.
+
+You may group fields together into tabs instead using the `groupFields` option. Here's how we do it in the `apostrophe-blog` module:
+
+```javascript
+  options.groupFields = options.groupFields ||
+    // We don't list the title field so it stays on top
+    [
+      {
+        name: 'content',
+        label: 'Content',
+        icon: 'content',
+        fields: [
+          'thumbnail', 'body'
+        ]
+      },
+      {
+        name: 'details',
+        label: 'Details',
+        icon: 'metadata',
+        fields: [
+          'slug', 'published', 'publicationDate', 'publicationTime', 'tags'
+        ]
+      }
+    ];
+```
+
+Each group has a name, a label, an icon (passed as a CSS class on the tab's icon element), and an array of field names.
+
+In `app.js`, you can simply pass `groupFields` like any other option when configuring a module. *The last call to `groupFields` wins, overriding any previous attempts to group the fields, so be sure to list all of them* except for fields you want to stay visible at all times above the tabs.
+
+**Be aware that group names must be distinct from field names.** Apostrophe will stop the music and tell you if they are not.
+
 #### Preventing Autocomplete
@@ -143,0 +179,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

76821

increased by7.15%

Lines of code

946

increased by6.77%

Number of lines in readme file

850

increased by4.42%

No dependency changes