The component type.
The first value that was set.
Sample code:
var values = { number: 30 }; var components = { number: { type: 'number' } }; var palette = new Palette('Text', components, values); values.number = 60; print(components.number.value) // 60 print(components.number.defaultValue) // 30
Read-only.
The name of the component as it is referenced in palette.components.
Text label that appears on the left hand side of the component in the palette.
Specifies whether the component is visible.
Sample code:
var values = { number: 10 }; var components = { showNumber: { type: 'checkbox', label: 'Show', onChange: function(value) { components.number.visible = value; } }, number: { type: 'number', label: 'Number', visible: false } }; var palette = new Palette('Show / Hide', components, values);
Specifies whether the component is enabled. When set to false, the component is grayed out and does not allow user interaction.
Sample code:
var values = { canEdit: false, text: 'Can you edit me?' } var components = { canEdit: { type: 'checkbox', label: 'Allow Editing', onChange: function(value) { components.text.enabled = value; } }, text: { type: 'string', enabled: false } }; var palette = new Palette('Text', components, values);
The range for the numeric value as an array in the form: [min, max]. The first element in the array defines the allowed minimum amount, the second the maximum amount, both are included in the range.
Sample code:
var values = { percentage: 50, angle: 180 }; var components = { percentage: { type: 'slider', label: 'Percentage', range: [0, 100] }, angle: { type: 'number', label: 'Angle', range: [0, 360] }, }; var palette = new Palette('Range Examples', components, values);
The minimum amount allowed.
Sample code:
var values = { size: 5 }; var components = { size: { type: 'number', label: 'Size', min: 0, steppers: true } }; var palette = new Palette('Minimum Value', components, values);
The maximum amount allowed.
Sample code:
var values = { size: 5 }; var components = { size: { type: 'number', label: 'Size', max: 10, steppers: true } }; var palette = new Palette('Maximum Value', components, values);
The amount the steppers increase / decrease the value. Even when steppers are not activated, the user can still use the up/down arrow keys to step by the amount defined by increment.
Sample code:
var values = { percentage: 50 }; var components = { percentage: { type: 'number', range: [0, 100], steppers: true, increment: 10 } }; var palette = new Palette('Increment', components, values);
The amount of digits after the decimal point. If finer grained values are entered, they are rounded to the next allowed number. The default is 3.
The units to be displayed behind the value.
Sample code:
var values = { width: 10, percentage: 50, angle: 180 } var components = { width: { type: 'number', label: 'Width', units: 'point' }, percentage: { type: 'number', label: 'Percentage', units: 'percent' }, angle: { type: 'number', label: 'Angle', units: 'degree' } } var palette = new Palette('Units Examples', components, values);
Activates little stepping arrows on the side of the input field when set to true.
The options that the user can choose from in the list component.
Sample code:
var values = { fruit: 'Orange' }; var components = { fruit: { type: 'list', label: 'Fruit', options: ['Orange', 'Apple', 'Banana', 'Kiwi'] } }; var palette = new Palette('List Example', components, values);
The index of the selected value in the options array.
Sample code:
var values = { fruit: 'Apple' }; var components = { fruit: { type: 'list', label: 'Fruit', options: ['Orange', 'Apple', 'Banana', 'Kiwi'] } }; var palette = new Palette('List Example', components, values); print(components.fruit.selectedIndex) // 1
The maximum amount of characters that the text field may contain.
Sample code:
var values = { name: '' }; var components = { name: { type: 'string', label: 'Name', editable: true, maxLength: 3 } }; var palette = new Palette('Max Length', components, values); values.name = '123456'; print(values.name) // '123'
Specifies whether the field shows multiple lines of text.
Sample code:
var components = { text: { type: 'text', label: 'Text', value: 'This is a text\nwith multiple lines', multiline: true } }; var palette = new Palette('Text', components);
The average amount of characters per line visible in the text area.
Sample code:
var components = { text: { type: 'string', value: 'This is a string component\nwith 6 rows and 30 columns', rows: 6, columns: 32 } }; var palette = new Palette('Text', components);
The amount of visible lines of text in the text area. Due to a bug in Illustrator's GUI, values below 6 cause problems with scrollbars on Macintosh. The default is 6.
Sample code:
var components = { text: { type: 'string', value: 'This is a string component\nwith 6 rows and 30 columns', rows: 6, columns: 30 } }; var palette = new Palette('Text', components);
The function that is called whenever the value of the component changes.
The function receives the new value as an argument.
Sample code:
var components = { threshold: { type: 'number', label: 'Distance Threshold', units: 'point', onChange: function(value) { print('Threshold was changed to', value); tool.distanceThreshold = value; } } }; var palette = new Palette('title', components);
The function that is called when a button component is clicked.
Sample code:
var components = { button: { type: 'button', value:'Click Me', label: 'Button', onClick: function() { print('You clicked me!'); } } }; var palette = new Palette('Button Component', components);
Resets the value of the component to defaultValue.
Copyright © 2001-2011 Jürg Lehni, Scratchdisk.com. All Rights Reserved.