Ox.ArrayInput '
- + 'allows you to enter an array of strings.',
- items: [
- Ox.ArrayInput({
- id: 'a',
- description: 'A: {max: 3}',
- label: 'Enter up to 3 names',
- max: 3,
- width: 256
- })
- ],
- validate: function() {
- return true;
+ elements = {
+ ArrayInput: {
+ description: 'Allows you to enter an array of strings.',
+ options: [
+ {
+ description: '...',
+ max: 3,
+ width: 256
+ },
+ {
+ description: '...',
+ label: 'Please enter up to 3 names',
+ max: 3,
+ width: 256
}
- },
- {
- id: 'button',
- title: 'Button',
- description: 'Buttons',
- items: [
- Ox.Button({
- id: 'lock',
- type: 'image',
- values: [
- {id: 'unlocked', title: 'lock'},
- {id: 'locked', title: 'unlock'}
- ]
- }),
- Ox.Button({
- id: 'like',
- selectable: true,
- title: 'like',
- type: 'image'
- }),
- Ox.Button({
- id: 'select',
- label: 'Selectable Button',
- labelWidth: 128,
- selectable: true,
- title: 'Selectable Button'
- })
- ],
- validate: function() {
- return true;
+ ]
+ },
+ Button: {
+ description: '...',
+ options: [
+ {
+ description: 'Selectable image button with tooltip',
+ selectable: true,
+ title: 'like',
+ tooltip: 'Like',
+ type: 'image'
+ },
+ {
+ description: 'Multi-value image button with tooltip',
+ tooltip: ['Lock', 'Unlock'],
+ type: 'image',
+ values: [
+ {id: 'unlocked', title: 'lock'},
+ {id: 'locked', title: 'unlock'}
+ ]
+ },
+ {
+ description: 'Selectable button',
+ selectable: true,
+ title: 'Select me'
+ },
+ {
+ description: 'Multi-value button with fixed width',
+ values: [
+ {id: 'off', title: 'Off'},
+ {id: 'on', title: 'On'}
+ ],
+ width: 64
}
- },
- {
- id: 'buttongroup',
- title: 'ButtonGroup',
- description: 'Buttons',
- items: [
- Ox.ButtonGroup({
- buttons: [
- {id: 'exclamation', title: 'warning'},
- {id: 'question', title: 'help'}
- ],
- id: 'buttongroup_image',
- selectable: true,
- type: 'image'
- }),
- Ox.ButtonGroup({
- buttons: [
- {id: 'option1', title: 'Option 1'},
- {id: 'option2', title: 'Option 2'},
- {id: 'option3', title: 'Option 3'}
- ],
- id: 'buttongroup_text',
- selectable: true
- })
- ],
- validate: function() {
- return true;
+ ]
+ },
+ ButtonGroup: {
+ description: '...',
+ options: [
+ {
+ description: 'Image buttons, select one',
+ buttons: [
+ {id: 'grid', title: 'grid'},
+ {id: 'iconlist', title: 'iconlist'},
+ {id: 'list', title: 'list'},
+ {id: 'columns', title: 'columns'}
+ ],
+ selectable: true,
+ type: 'image'
+ },
+ {
+ description: 'Image buttons, select any',
+ buttons: [
+ {id: 'check', title: 'check'},
+ {id: 'flag', title: 'flag'},
+ {id: 'like', title: 'like'},
+ {id: 'star', title: 'star'}
+ ],
+ max: -1,
+ min: 0,
+ selectable: true,
+ type: 'image'
+ },
+ {
+ description: 'Text buttons, select one',
+ buttons: [
+ {id: 'a', title: 'Select me'},
+ {id: 'b', title: 'or select me'},
+ {id: 'c', title: 'or select me'}
+ ],
+ selectable: true
+ },
+ {
+ description: 'Text buttons, select one or two',
+ buttons: [
+ {id: 'a', title: 'Select me'},
+ {id: 'b', title: 'and select me'},
+ {id: 'c', title: 'or select me'}
+ ],
+ max: 2,
+ min: 1,
+ selectable: true
+ },
+ {
+ description: 'Text buttons, select two',
+ buttons: [
+ {id: 'a', title: 'Select me'},
+ {id: 'b', title: 'and select me'},
+ {id: 'c', title: 'or select me'}
+ ],
+ max: 2,
+ min: 2,
+ selectable: true
+ },
+ {
+ description: 'Text buttons, select any',
+ buttons: [
+ {id: 'a', title: 'Select me'},
+ {id: 'b', title: 'and select me'},
+ {id: 'c', title: 'and select me'}
+ ],
+ max: -1,
+ min: 0,
+ selectable: true
}
- },
- {
- id: 'checkbox',
- title: 'Checkbox',
- description: '...',
- items: [
- Ox.Checkbox({
- id: 'single',
- title: 'single',
- width: 256
- })
- ],
- validate: function() {
- return true;
+ ]
+ },
+ Checkbox: {
+ description: '...',
+ options: [
+ {
+ description: 'Checkbox'
+ },
+ {
+ description: 'Checkbox with label',
+ title: 'Check me',
+ width: 128
}
- },
- {
- id: 'checkboxgroup',
- title: 'CheckboxGroup',
- description: '...',
- items: [
- Ox.CheckboxGroup({
- checkboxes: [
- {id: 'option1', title: 'Option 1'},
- {id: 'option2', title: 'Option 2'},
- {id: 'option3', title: 'Option 3'}
- ],
- description: 'Description...',
- id: 'group'
- }),
- Ox.CheckboxGroup({
- checkboxes: [
- {id: 'optiona', title: 'Option 1'},
- {id: 'optionb', title: 'Option 2'},
- {id: 'optionc', title: 'Option 3'}
- ],
- id: 'list',
- type: 'list',
- width: 256
- }),
- Ox.CheckboxGroup({
- checkboxes: [
- {id: 'option1', title: 'Option 1'},
- {id: 'option2', title: 'Option 2'},
- {id: 'option3', title: 'Option 3'}
- ],
- id: 'group2'
- }),
- ],
- validate: function() {
- return true;
+ ]
+ },
+ CheckboxGroup: {
+ description: '...',
+ options: [
+ {
+ description: 'Checkboxes, select one',
+ checkboxes: [
+ {id: 'a', title: 'Check me'},
+ {id: 'b', title: 'or check me'},
+ {id: 'c', title: 'or check me'}
+ ],
+ width: 360
+ },
+ {
+ description: 'Checkboxes, select one or two',
+ checkboxes: [
+ {id: 'a', title: 'Check me'},
+ {id: 'b', title: 'and check me'},
+ {id: 'c', title: 'or check me'}
+ ],
+ max: 2,
+ min: 1,
+ width: 360
+ },
+ {
+ description: 'Checkboxes, select two',
+ checkboxes: [
+ {id: 'a', title: 'Check me'},
+ {id: 'b', title: 'and check me'},
+ {id: 'c', title: 'or check me'}
+ ],
+ max: 2,
+ min: 2,
+ width: 360
+ },
+ {
+ description: 'Checkboxes, select any',
+ checkboxes: [
+ {id: 'a', title: 'Check me'},
+ {id: 'b', title: 'and check me'},
+ {id: 'c', title: 'and check me'}
+ ],
+ max: -1,
+ min: 0,
+ width: 360
}
- },
- {
- id: 'colorinput',
- title: 'ColorInput',
- description: 'Ox.ColorInput',
- items: [
- Ox.ColorInput({
- id: 'rgb',
- value: [255, 0, 0]
- }),
- Ox.ColorInput({
- id: 'hsl',
- value: [0, 1, 0.5]
- })
- ],
- validate: function() {
- return true;
+ ]
+ },
+ ColorInput: {
+ description: '...',
+ options: [
+ {
+ description: 'RGB',
+ value: [255, 0, 0]
+ },
+ {
+ description: 'HSL',
+ mode: 'hsl'
}
- },
- {
- id: 'dateinput',
- title: 'DateInput',
- description: 'Ox.DateInput',
- items: [
- Ox.DateInput({
- id: 'A',
- description: 'A {format: "short"}',
- format: 'short'
- }),
- Ox.DateInput({
- id: 'medium',
- description: 'Medium',
- format: 'medium'
- }),
- Ox.DateInput({
- id: 'long',
- description: 'Long',
- format: 'long'
- }),
- Ox.DateInput({
- id: 'mediumweekday',
- description: 'Medium with weekday',
- format: 'medium',
- weekday: true
- }),
- Ox.DateInput({
- id: 'longweekday',
- description: 'Long with weekday',
- format: 'long',
- weekday: true
- })
- ],
- validate: function() {
- return true;
+ ]
+ },
+ DateInput: {
+ description: '...',
+ options: [
+ {
+ description: 'Short date input'
+ },
+ {
+ description: 'Medium date input',
+ format: 'medium'
+ },
+ {
+ description: 'Long date input',
+ format: 'long'
+ },
+ {
+ description: 'Medium date input with weekday',
+ format: 'medium',
+ weekday: true
+ },
+ {
+ description: 'Long date input with weekday',
+ format: 'long',
+ weekday: true
}
- },
- {
- id: 'datetimeinput',
- title: 'DateTimeInput',
- description: 'Ox.DateTimeInput',
- items: [
- Ox.DateTimeInput({
- id: 'A',
- description: 'A {format: "short"}',
- ampm: true,
- format: 'short'
- }),
- Ox.DateTimeInput({
- id: 'medium',
- description: 'Medium',
- format: 'medium',
- seconds: true,
- weekday: true
- }),
- Ox.DateTimeInput({
- id: 'long',
- description: 'Long',
- format: 'long',
- seconds: true,
- weekday: true
- })
- ],
- validate: function() {
- return true;
+ ]
+ },
+ DateTimeInput: {
+ description: '...',
+ options: [
+ {
+ description: 'Short date/time input with am/pm',
+ ampm: true
+ },
+ {
+ description: 'Medium date/time input with seconds',
+ format: 'medium',
+ seconds: true
+ },
+ {
+ description: 'Long date/time input with weekday',
+ format: 'long',
+ weekday: true
}
- },
- {
- id: 'input',
- title: 'Input',
- items: [
- Ox.Input({
- id: 'input1',
- width: 256
- }),
- Ox.Input({
- arrows: true,
- description: 'Integer Input',
- id: 'inputInt',
- min: 0,
- max: 100,
- type: 'int'
- }),
- Ox.Input({
- autocomplete: countries,
- autocompleteReplace: true,
- autocompleteReplaceCorrect: true,
- autocompleteSelect: true,
- autocompleteSelectHighlight: true,
- id: 'auto2',
- width: 256
- }),
- Ox.Input({
- description: 'Textarea',
- id: 'textarea',
- height: 128,
- type: 'textarea',
- width: 256
- })
- ],
- validate: function() {
- return true;
+ ]
+ },
+ FormElementGroup: {
+ description: '...',
+ options: [
+ {
+ description: '...',
+ elements: [
+ Ox.Select({
+ items: [
+ {id: 'departure', title: 'Departure'},
+ {id: 'arrival', title: 'Arrival'}
+ ],
+ overlap: 'right',
+ width: 96
+ }),
+ Ox.Select({
+ items: [
+ {id: 'before', title: 'is before'},
+ {id: 'after', title: 'is after'}
+ ],
+ overlap: 'right',
+ width: 96
+ }),
+ Ox.DateInput()
+ ]
}
- },
- {
- id: 'inputgroup',
- title: 'InputGroup',
- items: [
- Ox.InputGroup({
- id: 'inputgroupWidthHeight',
- inputs: [
- Ox.Input({
- id: 'width',
- placeholder: 'Width',
- type: 'int',
- width: 64
- }),
- Ox.Input({
- id: 'height',
- placeholder: 'Height',
- type: 'int',
- width: 64
- })
- ],
- separators: [
- {title: 'x', width: 16}
- ]
- })
- ],
- validate: function() {
- return true;
+ ]
+ },
+ Input: {
+ description: '...',
+ options: [
+ {
+ description: '...',
+ arrows: true,
+ max: 100,
+ min: 0,
+ type: 'int'
+ },
+ {
+ description: 'Input with placeholder',
+ placeholder: 'Placeholder'
+ },
+ {
+ description: 'Input with label',
+ label: 'Label'
+ },
+ {
+ description: 'Input with clear button',
+ clear: true
+ },
+ {
+ description: 'Autocomplete with replace',
+ autocomplete: countries,
+ autocompleteReplace: true,
+ width: 256
+ },
+ {
+ description: 'Autocomplete with replace and correct',
+ autocomplete: countries,
+ autocompleteReplace: true,
+ autocompleteReplaceCorrect: true,
+ width: 256
+ },
+ {
+ description: 'Autocomplete with select and highlight',
+ autocomplete: countries,
+ autocompleteSelect: true,
+ autocompleteSelectHighlight: true,
+ width: 256
+ },
+ {
+ description: 'Autocomplete with replace and select',
+ autocomplete: countries,
+ autocompleteReplace: true,
+ autocompleteSelect: true,
+ width: 256
+ },
+ {
+ description: 'Autocomplete with replace, correct and select',
+ autocomplete: countries,
+ autocompleteReplace: true,
+ autocompleteReplaceCorrect: true,
+ autocompleteSelect: true,
+ width: 256
+ },
+ {
+ description: 'Password',
+ type: 'password',
+ width: 256
+ },
+ {
+ description: 'Password with label, placeholder and clear button',
+ clear: true,
+ label: 'Label',
+ placeholder: 'Placeholder',
+ type: 'password',
+ width: 256
+ },
+ {
+ description: 'Textarea with placeholder',
+ height: 128,
+ placeholder: 'Placeholder',
+ type: 'textarea',
+ width: 256
}
- },
- {
- id: 'objectarrayinput',
- title: 'ObjectArrayInput',
- description: '...',
- items: [
- Ox.ObjectArrayInput({
- buttonTitles: {
- add: 'Add person',
- remove: 'Remove person'
+ ]
+ },
+ InputGroup: {
+ description: '...',
+ options: [
+ {
+ description: '...',
+ inputs: [
+ Ox.Input({
+ id: 'width',
+ placeholder: 'Width',
+ type: 'int',
+ width: 64
+ }),
+ Ox.Input({
+ id: 'height',
+ placeholder: 'Height',
+ type: 'int',
+ width: 64
+ })
+ ],
+ separators: [
+ {title: 'x', width: 16}
+ ]
+ }
+ ]
+ },
+ ObjectArrayInput: {
+ description: '...',
+ options: [
+ {
+ buttonTitles: {
+ add: 'Add contact',
+ remove: 'Remove contact'
+ },
+ inputs: [
+ {
+ element: 'Input',
+ options: {id: 'firstname', label: 'First Name'}
},
- id: 'people',
- inputs: [
- {
- element: 'Input',
- options: {id: 'firstname', label: 'First Name'}
- },
- {
- element: 'Input',
- options: {id: 'lastname', label: 'Last Name'}
- },
- {
- element: 'ArrayInput',
- options: {id: 'phonenumbers', label: 'Phone Numbers'}
- },
- {
- element: 'Input',
- options: {id: 'email', label: 'E-Mail Address'}
- },
- ]
- })
- ],
- validate: function() {
- return true;
+ {
+ element: 'Input',
+ options: {id: 'lastname', label: 'Last Name'}
+ },
+ {
+ element: 'ArrayInput',
+ options: {id: 'phone', label: 'Phone Numbers', max: 3}
+ },
+ {
+ element: 'Input',
+ options: {id: 'email', label: 'E-Mail Address'}
+ },
+ ]
}
- },
- {
- id: 'range',
- title: 'Range',
- description: '...',
- items: [
- Ox.Range({
- arrows: true,
- id: 'foobar',
- label: 'FOOBAR',
- max: 10,
- min: 0,
- size: 256,
- thumbSize: 32,
- thumbValue: true
- }),
- Ox.Range({
- id: 'on_or_off',
- max: 1,
- min: 0,
- size: 48,
- thumbSize: 32,
- thumbValue: true,
- values: ["Off", "On"]
- }),
- Ox.Range({
- id: 'w',
- description: 'foo',
- size: 360,
- thumbValue: true,
- trackColors: [
- 'rgb(255, 0, 0)',
- 'rgb(255, 255, 0)',
- 'rgb(0, 255, 0)',
- 'rgb(0, 255, 255)',
- 'rgb(0, 0, 255)',
- 'rgb(255, 0, 255)'
- ],
- values: ['Red', 'Yellow', 'Green', 'Cyan', 'Blue', 'Magenta']
- }),
- Ox.Range({
- id: 'x',
- description: 'foo',
- max: 359,
- min: 0,
- size: 360,
- thumbSize: 36,
- thumbValue: true,
- trackColors: [
- 'rgb(255, 0, 0)',
- 'rgb(255, 255, 0)',
- 'rgb(0, 255, 0)',
- 'rgb(0, 255, 255)',
- 'rgb(0, 0, 255)',
- 'rgb(255, 0, 255)',
- 'rgb(255, 0, 0)'
- ],
- trackGradient: true
- })
- ],
- validate: function() {
- return true;
+ ]
+ },
+ ObjectInput: {
+ description: '...',
+ options: [
+ {
+ description: '...',
+ elements: [
+ Ox.Input({id: 'firstname', label: 'First Name'}),
+ Ox.Input({id: 'lastname', label: 'First Name'}),
+ Ox.ArrayInput({id: 'phone', label: 'Phone Numbers', max: 3}),
+ Ox.Input({id: 'email', label: 'E-Mail Address'})
+ ]
}
- },
- {
- id: 'select',
- title: 'Select',
- items: [
- Ox.Select({
- id: 'select',
- items: [
- {id: 'option1', title: 'Option 1'},
- {id: 'option2', title: 'Option 2'},
- {id: 'option3', title: 'Option 3'}
- ],
- title: 'Please select...',
- width: 256
- })
- ],
- validate: function() {
- return true;
+ ]
+ },
+ Range: {
+ description: '...',
+ options: [
+ {
+ description: '...',
+ arrows: true,
+ max: 10,
+ min: 0,
+ size: 256,
+ thumbSize: 32,
+ thumbValue: true
+ },
+ {
+ description: '...',
+ max: 1,
+ min: 0,
+ size: 48,
+ thumbSize: 32,
+ thumbValue: true,
+ values: ['Off', 'On']
+ },
+ {
+ description: '...',
+ size: 360,
+ thumbValue: true,
+ trackColors: [
+ 'rgb(255, 0, 0)',
+ 'rgb(255, 255, 0)',
+ 'rgb(0, 255, 0)',
+ 'rgb(0, 255, 255)',
+ 'rgb(0, 0, 255)',
+ 'rgb(255, 0, 255)'
+ ],
+ values: ['Red', 'Yellow', 'Green', 'Cyan', 'Blue', 'Magenta']
+ },
+ {
+ description: '...',
+ max: 359,
+ min: 0,
+ size: 360,
+ thumbSize: 36,
+ thumbValue: true,
+ trackColors: [
+ 'rgb(255, 0, 0)',
+ 'rgb(255, 255, 0)',
+ 'rgb(0, 255, 0)',
+ 'rgb(0, 255, 255)',
+ 'rgb(0, 0, 255)',
+ 'rgb(255, 0, 255)',
+ 'rgb(255, 0, 0)'
+ ],
+ trackGradient: true
}
- },
- {
- id: 'selectinput',
- title: 'SelectInput',
- items: [
- Ox.SelectInput({
- id: 'selectinput',
- inputWidth: 128,
- items: [
- {id: 'option1', title: 'Option 1'},
- {id: 'option2', title: 'Option 2'},
- {id: 'option3', title: 'Option 3'},
- {id: 'other', title: 'Other...'}
- ],
- placeholder: 'Please specify...',
- title: 'Please select...',
- width: 256
- })
- ],
- validate: function() {
- return true;
+ ]
+ },
+ Select: {
+ description: '...',
+ options: [
+ {
+ description: '...',
+ items: [
+ {id: 'a', title: 'Select me'},
+ {id: 'b', title: 'or select me'},
+ {id: 'c', title: 'or select me'}
+ ],
+ type: 'image',
+ width: 16 // fixme!
+ },
+ {
+ description: '...',
+ items: [
+ {id: 'a', title: 'Select me'},
+ {id: 'b', title: 'or select me'},
+ {id: 'c', title: 'or select me'}
+ ]
}
- },
- {
- id: 'spreadsheet',
- title: 'Spreadsheet',
- items: [
- Ox.Spreadsheet({
- id: 'budget',
- columns: ['2010', '2011', '2012', '2013', '2014'],
- rows: ['Item A', 'Item B', 'Item C'],
- title: 'Budget'
- })
- ],
+ ]
+ },
+ SelectInput: {
+ description: '...',
+ options: [
+ {
+ description: '...',
+ items: [
+ {id: 'male', title: 'Male'},
+ {id: 'female', title: 'Female'},
+ {id: 'other', title: 'Other...'}
+ ],
+ value: 'male',
+ width: 256
+ }
+ ]
+ },
+ Spreadsheet: {
+ description: '...',
+ options: [
+ {
+ title: 'Budget',
+ value: {
+ columns: [2010, 2011, 2012],
+ rows: ['Item A', 'Item B', 'Item C']
+ }
+ }
+ ]
+ },
+ TimeInput: {
+ description: '...',
+ options: [
+ {
+ description: 'Time input with am/pm',
+ ampm: true
+ },
+ {
+ description: 'Time input with seconds',
+ seconds: true
+ },
+ {
+ description: 'Time input with milliseconds',
+ milliseconds: true
+ }
+ ]
+ }
+ }
+ $form = Ox.FormPanel({
+ form: Object.keys(elements).sort().map(function(name) {
+ var element = elements[name];
+ return {
+ id: name.toLowerCase(),
+ title: name,
+ description: 'Ox.' + name + ' '
+ + element.description[0].toLowerCase()
+ + element.description.slice(1),
+ descriptionWidth: 360,
+ items: element.options.map(function(options, i) {
+ return Ox[name](Ox.extend(options, {
+ id: Ox.char(97 + i),
+ description: Ox.char(65 + i) + '. '
+ + options.description
+ }));
+ }),
validate: function() {
return true;
}
}
- ]
+ })
})
.bindEvent({
change: function(data) {
- $panel.replaceElement(1,
- $list = Ox.TreeList({
- data: $form.values(),
- expanded: true,
- width: 256 - Ox.UI.SCROLLBAR_SIZE
- })
- );
+ setTimeout(function() {
+ $panel.replaceElement(1,
+ $list = Ox.TreeList({
+ data: $form.values(),
+ expanded: true,
+ width: 256 - Ox.UI.SCROLLBAR_SIZE
+ })
+ );
+ }, 250);
}
}),