ember-exclaim-editor

[Short description of the addon.]

Compatibility

• Ember.js v3.4 or above
• Ember CLI v2.13 or above
• Node.js v8 or above

Installation

ember install ember-exclaim-editor

Usage

[Longer description of how to use the addon in apps.]

Invocation

    {{#exclaim-editor
      env=canvasEnv
      implementationMap=implementationMap
      mode=mode
      ui=exclaimJson
      onChange=(action update)
      onComponentClick=(action clickComponent)
      resolveFieldMeta=(action onMetaForField)
      as |editor|
    }}
      ...
    {{/exclaim-editor}}

Arguments

implementationMap

Similiar to the implementationMap argument to Ember Exclaim's {{exclaim-ui}} component.

In addition, the implementationMap for the Exclaim Editor allows declarations of the configuration properties that the user may adjust.

Optionally these properties may be divided into sections. The propertySections field is an ordered list of named sections with paths to the Ember component that should wrap each section. The section component template must {{yield}} so that the editor may render the property editor components.

    ['my_exclaim_component']: {
      componentMeta: {
        name: 'My Exclaim Component',
        propertySections: [
          {
            sectionName: 'knobs',
            sectionComponent: {
              name: 'knobs-wrapper',
              options: {
                max: 11,
              }
            }
          },
          {
            sectionName: 'dials',
            sectionComponent: {
              name: 'dials-wrapper',
              options: {
                favorite: "Z100",
              }
            }
          },
        ],
        properties: {
          ['volume_property']: new PropertyDefinition({
            name: 'Select a setting for volume',
            section: 'knobs',
            dataRole: 'volume-property',
          }, false, 'volume-config-component'),
          ['tuner_property']: new PropertyDefinition({
            name: 'Tune to desired station',
            section: 'dials',
            dataRole: 'station-property',
          }, false, 'tuner-config-component'),
        }

When given a dataRole, an individual property will have data-role=<given value>. Its primary intent is to provide a selection hook for testing.

For each section component listed in propertySections, if it has properties referencing its sectionName by their section field, then Exclaim Editor will render it as a wrapper around those properties. The section component will receive the options attribute specified within its propertySections sectionComponent object.

Section components can therefore use options to vary their appearance depending of the values declared in the implementationMap:

  <div class="knobs-section">
    Max Volume: {{options.max}}
  </div>

Contributing

Installation

• git clone <repository-url>
• cd ember-exclaim-editor
• yarn install

Linting

• npm run lint:hbs
• npm run lint:js
• npm run lint:js -- --fix

Running tests

• ember test – Runs the test suite on the current Ember version
• ember test --server – Runs the test suite in "watch mode"
• ember try:each – Runs the test suite against multiple Ember versions

Running the dummy application

• ember serve
• Visit the dummy application at http://localhost:4200.

License

This project is licensed under the MIT License.