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' }
}
Menu name
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
andseatEase
options should appear in thefit
menu while the other options go in thestyle
menu. - Additionally, the
buttons
andextraTopButton
options should appear in aclosure
submenu under thestyle
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 totrue
, then theelasticatedCuff
option should be assigned to thestyle
menu. - If the
extraTopButton
option is set tofalse
, setting themenu
attribute tofalse
, then theelasticatedCuff
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.
Menu order
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 beforeseatEase
. - Within the
style
menu, options should be in the orderlengthBonus
,waistHeight
,buttons
,extraTopButton
, andelasticatedCuff
. - The
elasticatedCuff
option does not have anorder
attribute, so it should appear after the options that do. - Because the
fit
menu has an option with anorder
value that comes before any of theorder
values for options in thestyle
menu, thefit
menu should appear before thestyle
menu.
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.
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 asorder
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.
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.