Adding 'controls' to Fabricator 'UI Toolkit'

Question

I'm building a style guide using Fabricator, and the docs seem to indicate that I should be able to add 'controls' to let the users toggle visibility on various sections.

By default, Fabricator builds come with 3 main toggles: labels, notes, and code. I want to add a 4th toggle that I'm calling styles.

The relevant sections of the fabricator.js file look like this:

/**
 * Default options
 * @type {Object}
 */
fabricator.options = {
  toggles: {
    labels: true,
    notes: true,
    code: false,
    styles: true,
  },
  menu: true,
  mq: '(min-width: 60em)',
};

&

/**
 * Handler for preview and code toggles
 * @return {Object} fabricator
 */
fabricator.allItemsToggles = () => {

  const itemCache = {
    labels: document.querySelectorAll('[data-f-toggle="labels"]'),
    notes: document.querySelectorAll('[data-f-toggle="notes"]'),
    code: document.querySelectorAll('[data-f-toggle="code"]'),
    styles: document.querySelectorAll('[data-f-toggle="styles"]'),
  };
}

As you can see, I've added my styles toggle to the fabricator.options object and to the itemCache object matching the formatting to the existing elements.

I've also added new styles sections to the controls and content partials:

f-item-controls.html

{{!-- this is part of the default build --}}
{{#if notes}}
<span class="f-control f-icon" data-f-toggle-control="notes" title="Toggle Notes">
    <svg>
        <use xlink:href="#f-icon-notes" />
    </svg>
</span>
{{/if}}

{{!-- this is my matching addition --}}
{{#if styles}}
<span class="f-control f-icon" data-f-toggle-control="styles" title="Toggle Styles">
    <svg>
        <use xlink:href="#f-icon-styles" />
    </svg>
</span>
{{/if}}

f-item-content.html

{{!-- this is part of the default build --}}
{{#if notes}}
<div class="f-item-notes" data-f-toggle="notes">
    {{{notes}}}
</div>
{{/if}}

{{!-- this is my matching addition --}}    
{{#if styles}}
<div class="f-item-styles" data-f-toggle="styles">
    {{{styles}}}
</div>
{{/if}}

Finally, just so I have content to work with, I added some 'front-matter' data that my button component could render:

---
notes: |
  These are notes written in `markdown`
styles: |
  These are styles written in `markdown`
---

The notes (part of the default build) render and toggle correctly; the styles don't render at all. If I remove the {{#if}} conditions around the styles blocks, then the control icon and corresponding content <div> are generated, but the actual style text is still missing.

I've reached out to Luke Askew (the creator of Fabricator) asking for clarity, but I haven't heard back from him yet. In the meantime, I'm hoping someone in the SO community might be able to help me understand how this works so that I can continue my work.

Bmd · Accepted Answer · 2017-08-11T18:32:31.160

update

The author (@lukeaskew) responded to my email inquiry and indicated that all 'front-matter' data gets packed up into data (accessible as {{data}} or {{{data}}}), and to access or check the 'styles' data I was initially trying to add, I could simply enter {{{data.styles}}} in my f-item-contents & f-item-controls files.

If that doesn't work for you for some reason or if you want a truly independent data section, you can follow the instructions as I've laid out below.

original answer body

I figured out how to add control (content toggles) to Fabricator - hopefully this will help someone else.

For starters, I'm not certain, but I suspect that styles (the name I gave to my custom control) may be a reserved word, because having it in the fabricator.js file periodically causes the gulp task to stop running/fail. Unfortunately, (as of this posting) there's still no indication in the docs what the reserved words are other than that there's a list of reserved words.

To add a control, in addition to the steps indicated in my question, you also need to modify the node_module that assembles the site from the src folder.

The file is located in your Fabricator folder at node_modules/fabricator-assemble/index.js and you'll need to modify the following section (LINE ~332), replacing 'NEW_TOGGLE_NAME' with the name of your new control (same name you used in the sections mentioned in my question):

// capture meta data for the material
if (!isSubCollection) {
  assembly.materials[collection].items[key] = {
    name: toTitleCase(id),
    notes: (fileMatter.data.notes) ? md.render(fileMatter.data.notes) : '',

    NEW_TOGGLE_NAME: (fileMatter.data.NEW_TOGGLE_NAME) ? md.render(fileMatter.data.NEW_TOGGLE_NAME) : '',

    data: localData
  };
} else {
  assembly.materials[parent].items[collection].items[key] = {
    name: toTitleCase(id.split('.')[1]),
    notes: (fileMatter.data.notes) ? md.render(fileMatter.data.notes) : '',

    NEW_TOGGLE_NAME: (fileMatter.data.NEW_TOGGLE_NAME) ? md.render(fileMatter.data.NEW_TOGGLE_NAME) : '',

    data: localData
  };
}

Adding 'controls' to Fabricator 'UI Toolkit'

1 Answers1

update

original answer body