Skip to main content

Extending options

Additional, optional information can be added to options to extend their use outside of core functionality. This can be useful when using FreeSewing through a frontend UI. The extended information can be used by the frontend to affect how options are presented.

Add menu structure​

Because FreeSewing designs have been written with the expectation that they will be used primarily through the freesewing.eu website, their options have been extended with menu information.

options: {
  // Fit
  waistEase: { pct: 2, min: 0, max: 10, menu: 'fit', order: '100' },
  seatEase: { pct: 5, min: 0, max: 15, menu: 'fit', order: '200' },
  // Style
  waistHeight: { pct: 5, min: 0, max: 100, menu: 'style', order: '400' },
  lengthBonus: { pct: 0, min: -15, max: 10, menu: 'style', order: '300' },
  elasticatedCuff: {
    bool: true,
    menu: (settings, mergedOptions) =>
      (mergedOptions?.extraTopButton === true ? 'style' : false)
  },
  buttons = { count: 7, min: 4, max: 12, menu: 'style.closure', order: '800' }
  extraTopButton = { bool: true, menu: 'style.closure', order: '850' }
}

In the above example, the added menu attributes provide the freesewing.eu website UI with information about the options should appear in menus.

  • The waistEase and seatEase options should appear in the fit menu while the other options go in the style menu.
  • Additionally, the buttons and extraTopButton options should appear in a closure submenu under the style menu.

Conditional menu name​

The menu attribute can also contain a function to allow an option's menu assignment to be conditional.

In the above example, the elasticatedCuff options menu attribute is a function which tells the freesewing.eu website UI:

  • If the extraTopButton option is set to true, then the elasticatedCuff option should be assigned to the style menu.
  • If the extraTopButton option is set to false, setting the menu attribute to false, then the elasticatedCuff option should not appear in any menu.

The function has the signature:

function menu(settings, mergeoptions) {
  // return the menu name or return `false` for no menu
}

The first parameter holds the pattern's settings object.

The second parameter should be the return value of utils.mergeoptions(), which provides an object with all option values populated. This is required when the result depends on the value of another option.

The optional 'order' attributes provide the UI with information about the order in which options and menus should appear.

  • Within the fit menu, waistEase should come before seatEase.
  • Within the style menu, options should be in the order lengthBonus, waistHeight, buttons, extraTopButton, and elasticatedCuff.
  • The elasticatedCuff option does not have an order attribute, so it should appear after the options that do.
  • Because the fit menu has an option with an order value that comes before any of the order values for options in the style menu, the fit menu should appear before the style menu.
note
This is not a core feature​

To be clear, setting this here does not do anything in core. It's merely extra metadata you can add on the option to facilitate frontend integration.

note

freesewing.eu UI behavior:

  • Ordering is performed using an alphabetic, not numeric, sort. For example, order value "99" will be placed after "100" because "1" comes before "9" alphabetically. However, "099" will be placed before "100", so using leading zeros can be helpful when using numbers as order values.
  • After they have been ordered using order attribute, if present, design options and menus are arranged in alphabetical order by their names.
  • However, the advanced menu, if present, is always ordered to be the last menu, appearing after all the other menus.

Suppress translation​

When using list options, we usually we want the different options in the list to be translated. But sometimes, there is no need for that, like in this example from Breanna:

options: {
  primaryBustDart: {
    list: [
      '06:00',
      '07:00',
      '08:00',
      '09:00',
      '10:00',
      '11:00',
      '11:30',
      '12:00',
      '12:30',
      '13:00',
      '13:30',
      '14:00',
      '15:00',
      '16:00',
      '17:00',
    ],
    dflt: '06:00',
    doNotTranslate: true,
  },
  // More here
}

As you can see above, you can set the doNotTranslate property to true and to indicate this.

note
This is not a core feature​

To be clear, setting this here does not do anything in core. It's merely extra metadata you can add on the option to facilitate frontend integration.