Architecture Input Plugins

Input Plugins

Reusable and stackable content input types with enforceable validation rules and clear input schema, which are distributed as Node modules.

Input Plugins are imported by the Holmes Content Types module and used to create forms for content entry.

Example Input Plugins

Simple Example: Text Input Plugin

This code is the content of the Input Plugin for a single text element.

module.exports = {
  'label': 'Add your text',
  'html': '<label for="{{settings.id}}">{{label}}</label><input id="{{settings.id}}" name="{{settings.name}}" value="{{settings.value}}" placeholder="{{settings.placeholder}}">',
  'description': 'Simple text input type',
  'settings': {
    'id': 'text-input-id',
    'name': 'text-input',
    'placeholder': 'add some text',
  },
};

Complex Example: Currency Converting Input Plugin

This code is the content of the Input Plugin for converting currency. It requires javascript from external sources via NPM.

note: this Plugin is a work in progress and contains some test code.

module.exports = {
  'label': 'Add an amount in US Dollars',
  'html': '<label for="{{id}}">{{label}}</label><input id="{{id}}" name="{{name}}" value="{{value}}" max="{{max}}" min="{{min}}" pattern="{{pattern}}">',
  'description': 'Currency Converter, just add $',
  'javascript': {
    'local': [
      'console.log("Hello World")',
    ],
    'npm': [
      'money',
      'open-exchange-rates',
    ],
  },
  'styling': '#{{id}} {border: 1px solid green; margin: 3em;}',
  'settings': {
    'id': 'input-plugin-currency-converter',
    'name': 'currency-input',
    'max': '9999',
    'min': '1',
    'pattern': '^\d*(\.\d{2}$)?',
  },
};

Schema breakdown

label (required)

A short title for what content this input type expects.

html (required)

This is the HTML that the Holmes Content Types module will convert using the Nunjucks Templating Language.

This normally should contain some type of form element and a corresponding label - but who knows what the future holds.

description

A more detailed description of the needs of this input type. Could include instructions for entering this type of data, or other types of information to help Content Creators understand the type of content they should be entering.

validation

must be either a javascript function or false

Validation must work with the input type its coupled with. It should be a javascript function which accepts the output of the elements within the Input Plugin and check them against whatever criteria is required to be tested.

javascript

The javascript schema covers both javascript local to the Input Plugin and javascript imported via NPM. This javascript should be for UX requirements only and should not be mixed with validation javascript.

local

Javascript that is included in the plugin distribution

npm

Javascript that is required by the plugin, but included via an npm install.

styling

Styling required for UX.

settings

Setting is an object that should contain data unique to the plugin, which does not fit within the primary schema nodes.

Requirements

MVP

• Distributed via Node Modules
• Separate, imported package for each input type
• Can be single or multiple fields
  • Example1: Currency Entry
    • A single text input field for numbers
    • Specifically for inputing money
    • Limited to two decimal places
  • Example2: Postal Address
    • Contains multiple fields
    • Fields are two street address boxes, city, state, zip
    • Regional requirements, like needing options for different types of postal codes
• Validation functions
  • client & server side will ingest and use an Input Plugin's validation scripts
• Input Plugin packages will include unit tests

Backloged Requirements

• Input Plugin packages will be extend-able
  • meaning they can import other Input Plugins and extend their functionality or markup

TODO

• Determine schema differences between required-to-save vs required-to-go-live