forked from 0x2620/oxjs
form elements rewrite, part 1
This commit is contained in:
rlx
parent
cf567e5608
commit
7f83cd3141
30 changed files with 1061 additions and 958 deletions
|
|
@ -6,6 +6,9 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
id: "panel"
|
||||
})
|
||||
.appendTo($body),
|
||||
countries = Ox.sortASCII(Ox.map(Ox.COUNTRIES, function(country) {
|
||||
return country.dissolved ? null : country.name;
|
||||
}));
|
||||
objects = {
|
||||
"Button": [
|
||||
{
|
||||
|
|
@ -60,7 +63,8 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
{id: "off", title: "Off"},
|
||||
{id: "on", title: "On"},
|
||||
],
|
||||
width: 32
|
||||
width: 32,
|
||||
value: 'on'
|
||||
},
|
||||
title: "Multi-Title Selectable Text Button"
|
||||
}
|
||||
|
|
@ -69,65 +73,21 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
{
|
||||
options: {
|
||||
buttons: [
|
||||
{ id: "", title: "add" },
|
||||
{ id: "", title: "remove" },
|
||||
{ id: "", title: "close" },
|
||||
{ id: "", title: "select" },
|
||||
{ id: "", title: "arrowLeft" },
|
||||
{ id: "", title: "arrowRight" },
|
||||
{ id: "", title: "arrowUp" },
|
||||
{ id: "", title: "arrowDown" },
|
||||
{ id: "", title: "left" },
|
||||
{ id: "", title: "right" },
|
||||
{ id: "", title: "up" },
|
||||
{ id: "", title: "down" },
|
||||
{ id: "", title: "pause" },
|
||||
{ id: "", title: "playInToOut" },
|
||||
{ id: "", title: "goToIn" },
|
||||
{ id: "", title: "goToOut" },
|
||||
{ id: "", title: "setIn" },
|
||||
{ id: "", title: "setOut" },
|
||||
{ id: "", title: "goToPoster" },
|
||||
{ id: "", title: "setPoster" },
|
||||
{ id: "", title: "center" },
|
||||
{ id: "", title: "zoom" },
|
||||
{ id: "", title: "grow" },
|
||||
{ id: "", title: "shrink" },
|
||||
{ id: "", title: "fill" },
|
||||
{ id: "", title: "fit" },
|
||||
{ id: "", title: "unmute" },
|
||||
{ id: "", title: "volumeUp" },
|
||||
{ id: "", title: "volumeDown" },
|
||||
{ id: "", title: "mute" },
|
||||
{ id: "", title: "undo" },
|
||||
{ id: "", title: "redo" },
|
||||
{ id: "", title: "unlock" },
|
||||
{ id: "", title: "lock" },
|
||||
{ id: "", title: "volume" },
|
||||
{ id: "", title: "mount" },
|
||||
{ id: "", title: "unmount" },
|
||||
{ id: "", title: "sync" },
|
||||
{ id: "", title: "info" },
|
||||
{ id: "", title: "warning" },
|
||||
{ id: "", title: "help" },
|
||||
{ id: "", title: "check" },
|
||||
{ id: "", title: "embed" },
|
||||
{ id: "", title: "bracket" },
|
||||
{ id: "", title: "upload" },
|
||||
{ id: "", title: "download" },
|
||||
{ id: "", title: "click" },
|
||||
{ id: "", title: "delete" },
|
||||
{ id: "", title: "edit" },
|
||||
{ id: "", title: "find" },
|
||||
{ id: "", title: "flag" },
|
||||
{ id: "", title: "icon" },
|
||||
{ id: "", title: "like" },
|
||||
{ id: "", title: "publish" },
|
||||
{ id: "", title: "set" },
|
||||
{ id: "", title: "star" },
|
||||
{ id: "", title: "user" },
|
||||
{ id: "", title: "view" },
|
||||
{ id: "", title: "loading" }
|
||||
'Add', 'Remove', 'Close', 'Select',
|
||||
'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
|
||||
'Left', 'Right', 'Up', 'Down',
|
||||
'Pause', 'PlayInToOut', 'GoToIn', 'GoToOut', 'SetIn', 'SetOut',
|
||||
'GoToPoster', 'SetPoster',
|
||||
'Center', 'Zoom', 'Grow', 'Shrink', 'Fill', 'Fit',
|
||||
'Unmute', 'VolumeUp', 'VolumeDown', 'Mute',
|
||||
'Undo', 'Redo', 'Unlock', 'Lock',
|
||||
'Volume', 'Mount', 'Unmount', 'Sync',
|
||||
'Info', 'Warning', 'Help',
|
||||
'Check', 'Embed', 'Bracket',
|
||||
'Upload', 'Download',
|
||||
'Copyright', 'NoCopyright',
|
||||
'Click', 'Delete', 'Edit', 'Find', 'Flag', 'Icon', 'Like',
|
||||
'Mail', 'Publish', 'Set', 'Star', 'User', 'View', 'Loading'
|
||||
],
|
||||
id: "buttonGroupImage",
|
||||
type: "image"
|
||||
|
|
@ -236,7 +196,8 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
id: "selectableButtonGroupAny",
|
||||
max: -1,
|
||||
min: 0,
|
||||
selectable: true
|
||||
selectable: true,
|
||||
value: 'and1'
|
||||
},
|
||||
title: "Selectable ButtonGroup, select any"
|
||||
},
|
||||
|
|
@ -265,8 +226,10 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
],
|
||||
"Checkbox": [
|
||||
{
|
||||
options: {},
|
||||
title: "Checkbox"
|
||||
options: {
|
||||
value: true
|
||||
},
|
||||
title: "Checkbox",
|
||||
},
|
||||
{
|
||||
options: {
|
||||
|
|
@ -326,6 +289,7 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
id: "CheckboxGroupAny",
|
||||
max: -1,
|
||||
min: 0,
|
||||
value: 'and1',
|
||||
width: 300
|
||||
},
|
||||
title: "CheckboxGroup, select any"
|
||||
|
|
@ -400,6 +364,15 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
},
|
||||
title: "Short DateTimeInput"
|
||||
},
|
||||
{
|
||||
options: {
|
||||
format: 'medium',
|
||||
id: "dateTimeInputMedium",
|
||||
seconds: true,
|
||||
weekday: true
|
||||
},
|
||||
title: "Medium DateTimeInput"
|
||||
},
|
||||
{
|
||||
options: {
|
||||
ampm: true,
|
||||
|
|
@ -486,8 +459,14 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
width: 208
|
||||
})
|
||||
],
|
||||
join: function(value) {
|
||||
return value[1][0];
|
||||
},
|
||||
float: "left",
|
||||
id: "formElementGroupLabels"
|
||||
id: "formElementGroupLabels",
|
||||
split: function(value) {
|
||||
return [null, [value, null]];
|
||||
}
|
||||
},
|
||||
title: "FormElementGroup (Select and Labels)"
|
||||
},
|
||||
|
|
@ -495,30 +474,26 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
options: {
|
||||
elements: [
|
||||
new Ox.Select({
|
||||
id: "selectOne",
|
||||
items: [
|
||||
{id: "one", title: "Title"},
|
||||
{id: "two", title: "Date"},
|
||||
{id: "three", title: "Place"}
|
||||
{id: "title", title: "Title"},
|
||||
{id: "date", title: "Date"},
|
||||
{id: "place", title: "Place"}
|
||||
],
|
||||
overlap: "right",
|
||||
width: 128
|
||||
}),
|
||||
new Ox.Select({
|
||||
id: "selectTwo",
|
||||
items: [
|
||||
{id: "one", title: "is"},
|
||||
{id: "two", title: "is between"},
|
||||
{id: "three", title: "is not between"}
|
||||
{id: "is", title: "is"},
|
||||
{id: "is_between", title: "is between"},
|
||||
{id: "is_not_between", title: "is not between"}
|
||||
],
|
||||
overlap: "right",
|
||||
width: 128
|
||||
}),
|
||||
new Ox.InputGroup({
|
||||
id: "input",
|
||||
inputs: [
|
||||
new Ox.DateInput({
|
||||
id: "inputOne",
|
||||
width: {
|
||||
day: 36,
|
||||
month: 36,
|
||||
|
|
@ -526,7 +501,6 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
}
|
||||
}),
|
||||
new Ox.DateInput({
|
||||
id: "inputTwo",
|
||||
width: {
|
||||
day: 36,
|
||||
month: 36,
|
||||
|
|
@ -539,9 +513,9 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
]
|
||||
})
|
||||
],
|
||||
id: "formElementGroupSelectSelectInput"
|
||||
id: "formElementGroupSelectInputGroup",
|
||||
},
|
||||
title: "FormElementGroup (two Selects, one Input)"
|
||||
title: "FormElementGroup (Selects and InputGroup)"
|
||||
}
|
||||
],
|
||||
"Input": [
|
||||
|
|
@ -633,9 +607,7 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
},
|
||||
{
|
||||
options: {
|
||||
autocomplete: Ox.sortASCII(Ox.COUNTRIES.map(function(v, i) {
|
||||
return v.name;
|
||||
})),
|
||||
autocomplete: countries,
|
||||
autocompleteReplace: true,
|
||||
id: "autocompleteReplace"
|
||||
},
|
||||
|
|
@ -643,9 +615,7 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
},
|
||||
{
|
||||
options: {
|
||||
autocomplete: Ox.sortASCII(Ox.COUNTRIES.map(function(v, i) {
|
||||
return v.name;
|
||||
})),
|
||||
autocomplete: countries,
|
||||
autocompleteReplace: true,
|
||||
autocompleteReplaceCorrect: true,
|
||||
id: "autocompleteReplaceCorrect"
|
||||
|
|
@ -654,9 +624,7 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
},
|
||||
{
|
||||
options: {
|
||||
autocomplete: Ox.sortASCII(Ox.COUNTRIES.map(function(v, i) {
|
||||
return v.name;
|
||||
})),
|
||||
autocomplete: countries,
|
||||
autocompleteSelect: true,
|
||||
autocompleteSelectHighlight: true,
|
||||
id: "autocompleteSelect"
|
||||
|
|
@ -665,9 +633,7 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
},
|
||||
{
|
||||
options: {
|
||||
autocomplete: Ox.sortASCII(Ox.COUNTRIES.map(function(v, i) {
|
||||
return v.name;
|
||||
})),
|
||||
autocomplete: countries,
|
||||
autocompleteReplace: true,
|
||||
autocompleteSelect: true,
|
||||
autocompleteSelectHighlight: true,
|
||||
|
|
@ -677,9 +643,7 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
},
|
||||
{
|
||||
options: {
|
||||
autocomplete: $.map(Ox.COUNTRIES, function(v, i) {
|
||||
return v.name;
|
||||
}),
|
||||
autocomplete: countries,
|
||||
autocompleteReplace: true,
|
||||
autocompleteReplaceCorrect: true,
|
||||
autocompleteSelect: true,
|
||||
|
|
@ -761,6 +725,48 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
},
|
||||
title: "InputGroup with Width"
|
||||
},
|
||||
{
|
||||
options: {
|
||||
id: "inputGroupWithSplitAndJoin",
|
||||
inputs: [
|
||||
Ox.Input({id: "width", placeholder: "Width"}),
|
||||
Ox.Input({id: "height", placeholder: "Height"})
|
||||
],
|
||||
join: function(value) {
|
||||
return value.join('x');
|
||||
},
|
||||
separators: [
|
||||
{title: "x", width: 16}
|
||||
],
|
||||
split: function(value) {
|
||||
return value.split('x');
|
||||
},
|
||||
value: '256x96',
|
||||
width: 128
|
||||
},
|
||||
title: "InputGroup with Split and Join"
|
||||
},
|
||||
{
|
||||
options: {
|
||||
id: "inputGroupWithObjectValue",
|
||||
inputs: [
|
||||
Ox.Input({id: "width", placeholder: "Width"}),
|
||||
Ox.Input({id: "height", placeholder: "Height"})
|
||||
],
|
||||
join: function(value) {
|
||||
return {width: value[0], height: value[1]};
|
||||
},
|
||||
separators: [
|
||||
{title: "x", width: 16}
|
||||
],
|
||||
split: function(value) {
|
||||
return [value.width, value.height];
|
||||
},
|
||||
value: {width: 256, height: 96},
|
||||
width: 128
|
||||
},
|
||||
title: "InputGroup with Object Value"
|
||||
},
|
||||
{
|
||||
options: {
|
||||
id: "inputGroupUsernamePassword",
|
||||
|
|
@ -818,10 +824,10 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
new Ox.Select({
|
||||
items: [
|
||||
{id: "items", title: "items"},
|
||||
{},
|
||||
//{},
|
||||
{id: "hours", title: "hours"},
|
||||
{id: "days", title: "days"},
|
||||
{},
|
||||
//{},
|
||||
{id: "GB", title: "GB"},
|
||||
],
|
||||
overlap: "left",
|
||||
|
|
@ -919,32 +925,34 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
size: 48,
|
||||
thumbSize: 32,
|
||||
thumbValue: true,
|
||||
valueNames: ["Off", "On"]
|
||||
values: ["Off", "On"]
|
||||
},
|
||||
title: "Range with Value Names"
|
||||
title: "Range with Values"
|
||||
},
|
||||
{
|
||||
options: {
|
||||
id: "rangeTrackColors",
|
||||
max: 255,
|
||||
min: 0,
|
||||
size: 400,
|
||||
thumbSize: 40,
|
||||
size: 360,
|
||||
thumbValue: true,
|
||||
trackColors: [
|
||||
"rgb(0, 0, 0)",
|
||||
"rgb(255, 255, 255)"
|
||||
"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']
|
||||
},
|
||||
title: "Range with Track Colors"
|
||||
},
|
||||
{
|
||||
options: {
|
||||
id: "rangeTrackColorsColor",
|
||||
id: "rangeTrackGradientColor",
|
||||
max: 359,
|
||||
min: 0,
|
||||
size: 400,
|
||||
thumbSize: 40,
|
||||
size: 360,
|
||||
thumbSize: 36,
|
||||
thumbValue: true,
|
||||
trackColors: [
|
||||
"rgb(255, 0, 0)",
|
||||
|
|
@ -954,41 +962,41 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
"rgb(0, 0, 255)",
|
||||
"rgb(255, 0, 255)",
|
||||
"rgb(255, 0, 0)"
|
||||
]
|
||||
],
|
||||
trackGradient: true
|
||||
},
|
||||
title: "Range with Track Colors"
|
||||
title: "Range with Track Gradient"
|
||||
},
|
||||
{
|
||||
options: {
|
||||
id: "rangeTrackGradient",
|
||||
max: 255,
|
||||
min: 0,
|
||||
size: 360,
|
||||
thumbSize: 36,
|
||||
thumbValue: true,
|
||||
trackColors: [
|
||||
"rgb(0, 0, 0)",
|
||||
"rgb(255, 255, 255)"
|
||||
],
|
||||
trackGradient: true
|
||||
},
|
||||
title: "Range with Track Gradient"
|
||||
},
|
||||
{
|
||||
options: {
|
||||
id: "rangeTrackImage",
|
||||
size: 400,
|
||||
size: 360,
|
||||
trackImages: ["png/timeline.png"]
|
||||
},
|
||||
title: "Range with Track Image"
|
||||
},
|
||||
{
|
||||
options: {
|
||||
id: "rangeTrackImages",
|
||||
max: 5,
|
||||
size: 386,
|
||||
thumbValue: true,
|
||||
trackImages: [
|
||||
"png/red.png",
|
||||
"png/yellow.png",
|
||||
"png/green.png",
|
||||
"png/cyan.png",
|
||||
"png/blue.png",
|
||||
"png/magenta.png"
|
||||
],
|
||||
valueNames: ["Red", "Yellow", "Green", "Cyan", "Blue", "Magenta"]
|
||||
},
|
||||
title: "Range with Track Images"
|
||||
},
|
||||
{
|
||||
options: {
|
||||
id: "rangeTrackImages",
|
||||
max: 9,
|
||||
size: 240,
|
||||
thumbStyle: 'transparent',
|
||||
trackImages: [
|
||||
"jpg/Children's Games.jpg",
|
||||
"jpg/Dulle Griet.jpg",
|
||||
|
|
@ -1006,6 +1014,13 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
},
|
||||
],
|
||||
"Select": [
|
||||
{
|
||||
options: {
|
||||
id: 'simpleSelect',
|
||||
items: ['foo', 'bar', 'baz']
|
||||
},
|
||||
title: 'Simple Select'
|
||||
},
|
||||
{
|
||||
options: {
|
||||
id: "imageSelectOne",
|
||||
|
|
@ -1071,19 +1086,6 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
},
|
||||
title: "Text Select, select any"
|
||||
},
|
||||
{
|
||||
options: {
|
||||
id: "textSelectNone",
|
||||
items: [
|
||||
{id: "one", title: "Item One"},
|
||||
{id: "two", title: "Item Two"},
|
||||
{id: "three", title: "Item Three"}
|
||||
],
|
||||
selectable: false,
|
||||
title: "Title..."
|
||||
},
|
||||
title: "Text Select, select none"
|
||||
},
|
||||
{
|
||||
options: {
|
||||
id: "textSelectWidth",
|
||||
|
|
@ -1110,6 +1112,20 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
title: "Text Select with Max Width"
|
||||
}
|
||||
],
|
||||
'SelectInput': [
|
||||
{
|
||||
options: {
|
||||
id: 'selectInput',
|
||||
items: [
|
||||
{id: 'male', title: 'Male'},
|
||||
{id: 'female', title: 'Female'},
|
||||
{id: 'other', title: 'Other...'}
|
||||
],
|
||||
width: 256
|
||||
},
|
||||
title: 'SelectInput'
|
||||
}
|
||||
],
|
||||
"TimeInput": [
|
||||
{
|
||||
options: {
|
||||
|
|
@ -1167,7 +1183,7 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
// if (object != "PlaceInput") return;
|
||||
$.each(elements, function(i, element) {
|
||||
var $div = $("<div>").appendTo($panel),
|
||||
$label, $element, $button;
|
||||
$label, $element;
|
||||
$label = Ox.Label({
|
||||
textAlign: "right",
|
||||
title: element.title,
|
||||
|
|
@ -1182,11 +1198,42 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
} catch(error) {
|
||||
|
||||
}
|
||||
Ox.Button({
|
||||
title: 'Options'
|
||||
})
|
||||
.addClass("margin")
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
var $dialog = Ox.Dialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'close',
|
||||
title: 'Close'
|
||||
}).bindEvent({
|
||||
click: function() { $dialog.close(); }
|
||||
})
|
||||
],
|
||||
content: $('<div>')
|
||||
.css({margin: '16px'})
|
||||
.html(
|
||||
JSON.stringify(Ox.map($element.options(), function(val, key) {
|
||||
return Ox.isEqual(val, $element.defaults(key)) ? null : val;
|
||||
}), void 0, 4)
|
||||
.replace(/\n/g, '<br/>')
|
||||
.replace(/\s/g, ' ')
|
||||
),
|
||||
height: 256,
|
||||
title: "Options",
|
||||
width: 384
|
||||
}).open()
|
||||
}
|
||||
})
|
||||
.appendTo($div);
|
||||
$element = Ox[object](element.options)
|
||||
.addClass("margin")
|
||||
.appendTo($div);
|
||||
if (object != "Button" && object != "Label") {
|
||||
$button = Ox.Button({
|
||||
Ox.Button({
|
||||
id: "id" + Ox.uid(),
|
||||
title: "Value"
|
||||
})
|
||||
|
|
@ -1202,11 +1249,18 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|||
click: function() { $dialog.close(); }
|
||||
})
|
||||
],
|
||||
content: $('<div>').css({margin: '16px'}).html(Ox.isUndefined(value) ? "undefined" : value),
|
||||
height: 128,
|
||||
id: "value",
|
||||
content: $('<div>')
|
||||
.css({margin: '16px'})
|
||||
.html(
|
||||
Ox.isUndefined(value)
|
||||
? "undefined"
|
||||
: JSON.stringify(value, void 0, 4)
|
||||
.replace(/\n/g, '<br/>')
|
||||
.replace(/\s/g, ' ')
|
||||
),
|
||||
height: 256,
|
||||
title: "Value",
|
||||
width: 256
|
||||
width: 384
|
||||
})
|
||||
.open();
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue