0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

changes to dialogs, events, forms

Browse source
This commit is contained in:
rolux 2010-12-26 20:16:35 +00:00
parent 3d136c4657
commit d1dee61a5f
5 changed files with 256 additions and 162 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
build/css/ox.ui.classic.css
View file

@ -116,6 +116,9 @@ Forms
.OxThemeClassic .OxButton.OxTab.OxSelected { .OxThemeClassic .OxButton.OxTab.OxSelected {
border-bottom: 1px solid rgb(192, 192, 192); border-bottom: 1px solid rgb(192, 192, 192);
} }
.OxThemeClassic .OxFormMessage {
color: rgb(192, 64, 64);
}
.OxThemeClassic .OxButton.OxDisabled, .OxThemeClassic .OxButton.OxDisabled,
.OxThemeClassic .OxLabel.OxDisabled { .OxThemeClassic .OxLabel.OxDisabled {

22
build/css/ox.ui.css
View file

@ -466,7 +466,7 @@ OxPicker
*/ */
.OxPicker { .OxPicker {
position: absolute; position: absolute;
z-index: 11; z-index: 13;
-moz-border-radius: 0 8px 8px 8px; -moz-border-radius: 0 8px 8px 8px;
-webkit-border-radius: 0 8px 8px 8px; -webkit-border-radius: 0 8px 8px 8px;
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
@ -655,7 +655,17 @@ Layers
top: 20px; top: 20px;
bottom: 0px; bottom: 0px;
overflow: hidden; overflow: hidden;
z-index: 10; z-index: 12;
}
.OxMenuLayer {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
overflow: hidden;
z-index: 12;
} }
/* /*
@ -948,7 +958,7 @@ Menus
.OxMenu { .OxMenu {
position: absolute; position: absolute;
display: none; display: none;
z-index: 11; z-index: 12;
-moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px; -moz-border-radius-bottomright: 4px;
-webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-left-radius: 4px;
@ -1396,7 +1406,11 @@ Miscellaneous
================================================================================ ================================================================================
*/ */
.OxThemeModern .OxTooltip { .OxText {
//line-height: 15px;
}
.OxTooltip {
position: absolute; position: absolute;
padding: 1px 2px 1px 2px; padding: 1px 2px 1px 2px;
font-size: 9px; font-size: 9px;

4
build/js/ox.js
View file

@ -1618,6 +1618,10 @@ Ox.highlight = function(txt, str) {
new RegExp('(' + str + ')', 'ig'), new RegExp('(' + str + ')', 'ig'),
'<span class="OxHighlight">$1</span>' '<span class="OxHighlight">$1</span>'
) : txt; ) : txt;
};
Ox.isValidEmail = function(str) {
return !!/^[0-9A-Z\.\+\-_]+@(?:[0-9A-Z\-]+\.)+[A-Z]{2,6}$/i(str);
} }
Ox.pad = function(str, len, pad, pos) { Ox.pad = function(str, len, pad, pos) {

374
build/js/ox.ui.js
View file

@ -100,14 +100,13 @@ requires
white_star: '\u2606' white_star: '\u2606'
} }
}, },
$elements = {},
$window, $document, $body; $window, $document, $body;
$(function() { $(function() {
// fixme: don't use globals!
$window = $(window), $window = $(window),
$document = $(document), $document = $(document),
$body = $('body'), $body = $('body'),
$elements = {};
Ox.theme(oxui.defaultTheme); Ox.theme(oxui.defaultTheme);
}); });
@ -276,29 +275,34 @@ requires
/** /**
Ox.Event event object Ox.Event event object
*/ */
/*
Ox.Event = function() { Ox.Event = function() {
var $eventHandler = $('<div>'), var $eventHandler = $('<div>'),
events = {}; events = {};
function addEvent(id, type, event, callback) { function bindEvent(id, event, callback) {
Ox.print('bind', id, event);
events[id] = events[id] || {}; events[id] = events[id] || {};
events[id][type] = events[id][type] || {}; events[id][event] = events[id][event] || [];
events[id][type][event] = events[id][type][event] || []; if ($.map(events[id][event], function(fn) {
events[id][type][event].push(callback); return fn.toString();
if (type == 'normal' || Ox.Focus.focused() == id) { }).indexOf(callback.toString()) == -1) {
Ox.print('bind', id, event); events[id][event].push(callback);
$eventHandler.bind(event + (id ? '_' + id : ''), callback); // requestStart/requestStop currently have '' as id if (!isKeyboardEvent(event) || Ox.Focus.focused() == id) {
$eventHandler.bind(event + '_' + id, callback); // requestStart/requestStop currently have '' as id
}
} }
} }
function removeEvent(id, type, event, callback) { function unbindEvent(id, event, callback) {
var focused = type == 'normal' || Ox.Focus.focused() == id, Ox.print('unbind', id, event);
toString = (callback || '').toString(); var toString = (callback || '').toString(),
Ox.print('removeEvent', id, type, event/*, callback*/); unbind = !event || (event && !isKeyboardEvent(event)) || Ox.Focus.focused() == id;
if (events[id] && events[id][type] && (!event || events[id][type][event])) { if (events[id] && (!event || events[id][event])) {
$.each(events[id][type], function(e, fns) { $.each(events[id], function(e, fns) {
if (!event || event == e) { if (!event || event == e) {
events[id][type][e] = $.map(events[id][type][e], function(fn, i) { events[id][e] = $.map(events[id][e], function(fn, i) {
if (!callback || toString == fn.toString()) { if (!callback || toString == fn.toString()) {
focused && $eventHandler.unbind(e + '_' + id, fn); Ox.print(unbind, 'eventHandler.unbind', e, id)
unbind && $eventHandler.unbind(e + '_' + id, fn);
return null; return null;
} else { } else {
return fn; return fn;
@ -306,32 +310,25 @@ requires
}); });
} }
}); });
Ox.print(id, type, events) Ox.print('id/events', id, events, events[id])
if (!callback || (event && events[id][type][event].length == 0)) { if (!callback || (event && events[id][event].length == 0)) {
delete events[id][type][event]; delete events[id][event];
} }
if (!event || Ox.length(events[id].normal) == 0) { if (!event || Ox.length(events[id]) == 0) {
delete events[id][type];
}
if (Ox.length(events[id]) == 0) {
delete events[id]; delete events[id];
} }
} }
} }
function isKeyboardEvent(event) { // fixme: currently unused function isKeyboardEvent(event) {
return event.substr(0, 4) == 'key_'; return event.substr(0, 4) == 'key_';
} }
return { return {
_print: function() { _print: function() {
Ox.print(events); Ox.print(events);
}, },
add: function(id, event, callback) {
// add keyboard event
addEvent(id, 'keyboard', event, callback);
},
bind: function(id, event, callback) { bind: function(id, event, callback) {
// bind event // bind event
addEvent(id, 'normal', event, callback); bindEvent(id, event, callback);
}, },
bindKeyboard: function(id) { bindKeyboard: function(id) {
// bind all keyboard events // bind all keyboard events
@ -339,37 +336,42 @@ requires
$.each(events[id], function(k, v) { $.each(events[id], function(k, v) {
Ox.print('|' + k + '|'); Ox.print('|' + k + '|');
}) })
events[id] && events[id].keyboard && $.each(events[id].keyboard, function(event, callbacks) { events[id] && $.each(events[id], function(event, callbacks) {
$.each(callbacks, function(i, callback) { Ox.print('BIND ID EVENT', id, event)
isKeyboardEvent(event) && $.each(callbacks, function(i, callback) {
Ox.print('bind', id, event); Ox.print('bind', id, event);
$eventHandler.bind(event, callback); $eventHandler.bind(event, callback);
}); });
}); });
}, },
changeId: function(oldId, newId) { changeId: function(oldId, newId) {
// fixme: would it be better to pass that.id instead of self.options.id? // we need to reference events by options('id'),
// then this renaming wouldn't be necessary // not by that.id, since textlist events fire on list,
// new lists have new that.ids, etc.
// so this renaming is necessary
Ox.print('changeId', oldId, newId, events[oldId]); Ox.print('changeId', oldId, newId, events[oldId]);
$.each($.extend({}, events[oldId] || {}), function(type, events_) { $.each($.extend({}, events[oldId] || {}), function(event, callbacks) {
var bind = type == 'normal' ? 'bind' : 'add', $.each(callbacks, function(i, callback) {
unbind = type == 'normal' ? 'unbind' : 'remove'; Ox.Event.unbind(oldId, event, callback);
$.each(events_, function(event, callbacks) { Ox.Event.bind(newId, event, callback);
$.each(callbacks, function(i, callback) {
Ox.Event[unbind](oldId, event, callback);
Ox.Event[bind](newId, event, callback);
});
}); });
}); });
}, },
remove: function(id, event, callback) {
// remove keyboard event
// event and callback are optional
removeEvent(id, 'keyboard', event, callback);
},
unbind: function(id, event, callback) { unbind: function(id, event, callback) {
// unbind event // unbind event
// event and callback are optional // event and callback are optional
removeEvent(id, 'normal', event, callback); unbindEvent(id, event, callback);
},
unbindAll: function() {
Ox.print('beginUnbindAll')
$.each(events, function(id, eventsById) {
$.each(eventsById, function(event, callbacks) {
$.each(callbacks, function(i, callback) {
Ox.Event.unbind(id, event, callback);
});
});
});
Ox.print('endUnbindAll')
}, },
trigger: function(id, event, data) { trigger: function(id, event, data) {
// trigger event // trigger event
@ -380,9 +382,10 @@ requires
}, },
unbindKeyboard: function(id) { unbindKeyboard: function(id) {
// unbind all keyboard events // unbind all keyboard events
Ox.print('unbinding', id /*events[id].keyboard*/) Ox.print('unbinding', id)
events[id] && events[id].keyboard && $.each(events[id].keyboard, function(event, callbacks) { events[id] && $.each(events[id], function(event, callbacks) {
$.each(callbacks, function(i, callback) { Ox.print('UNBIND ID EVENT', id, event)
isKeyboardEvent(event) && $.each(callbacks, function(i, callback) {
Ox.print('unbind', event) Ox.print('unbind', event)
$eventHandler.unbind(event, callback); $eventHandler.unbind(event, callback);
}); });
@ -390,6 +393,7 @@ requires
} }
} }
}(); }();
*/
/** /**
Ox.Focus Ox.Focus
@ -398,13 +402,17 @@ requires
Ox.Focus = function() { Ox.Focus = function() {
var stack = []; var stack = [];
return { return {
_print: function() {
Ox.print(stack);
},
blur: function(id) { blur: function(id) {
Ox.print('BLUR', id, stack)
var index = stack.indexOf(id); var index = stack.indexOf(id);
if (index == stack.length - 1) { if (index == stack.length - 1) {
stack.length == 1 ? stack.pop() : stack.length == 1 ? stack.pop() :
stack.splice(stack.length - 2, 0, stack.pop()); stack.splice(stack.length - 2, 0, stack.pop());
Ox.Event.unbindKeyboard($elements[id].options('id')); // fix later: Ox.Event.unbindKeyboard($elements[id].options('id'));
stack.length && Ox.Event.bindKeyboard($elements[stack[stack.length - 1]].options('id')); // fix later: stack.length && Ox.Event.bindKeyboard($elements[stack[stack.length - 1]].options('id'));
//$elements[id].removeClass('OxFocus'); //$elements[id].removeClass('OxFocus');
$('.OxFocus').removeClass('OxFocus'); // fixme: the above is better, and should work $('.OxFocus').removeClass('OxFocus'); // fixme: the above is better, and should work
stack.length && $elements[stack[stack.length - 1]].addClass('OxFocus'); stack.length && $elements[stack[stack.length - 1]].addClass('OxFocus');
@ -414,10 +422,10 @@ requires
focus: function(id) { focus: function(id) {
var index = stack.indexOf(id); var index = stack.indexOf(id);
if (index == -1 || index < stack.length - 1) { if (index == -1 || index < stack.length - 1) {
stack.length && Ox.Event.unbindKeyboard($elements[stack[stack.length - 1]].options('id')); // fix later: stack.length && Ox.Event.unbindKeyboard($elements[stack[stack.length - 1]].options('id'));
index > -1 && stack.splice(index, 1); index > -1 && stack.splice(index, 1);
stack.push(id); stack.push(id);
Ox.Event.bindKeyboard($elements[id].options('id')); // fix later: Ox.Event.bindKeyboard($elements[id].options('id'));
$('.OxFocus').removeClass('OxFocus'); // fixme: see above $('.OxFocus').removeClass('OxFocus'); // fixme: see above
$elements[id].addClass('OxFocus'); $elements[id].addClass('OxFocus');
Ox.print('focus', id, stack); Ox.print('focus', id, stack);
@ -612,7 +620,7 @@ requires
buffer += key == 'SPACE' ? ' ' : key; buffer += key == 'SPACE' ? ' ' : key;
bufferTime = time; bufferTime = time;
} }
Ox.Event.trigger('', 'key_' + key); $elements[Ox.Focus.focused()].trigger('ox_key_' + key);
//return false; //return false;
/* /*
$.each(stack, function(i, v) { $.each(stack, function(i, v) {
@ -634,9 +642,6 @@ requires
*/ */
Ox.Request = function() { Ox.Request = function() {
// fixme: do we want, instead of request('find', data, callback),
// something like api.find(data, callback)?
var cache = {}, var cache = {},
pending = {}, pending = {},
requests = {}, requests = {},
@ -692,7 +697,7 @@ requires
function callback(data) { function callback(data) {
delete requests[options.id]; delete requests[options.id];
Ox.length(requests) == 0 && Ox.Event.trigger('', 'requestStop'); Ox.length(requests) == 0 && $body.trigger('requestStop');
options.callback(data); // fixme: doesn't work if callback hasn't been passed options.callback(data); // fixme: doesn't work if callback hasn't been passed
} }
@ -709,7 +714,9 @@ requires
title: 'Close' title: 'Close'
}) })
.bindEvent({ .bindEvent({
click: $dialog.close click: function() {
$dialog.close();
}
}) })
], ],
content: $iframe, content: $iframe,
@ -733,8 +740,8 @@ requires
} catch (err) { } catch (err) {
data = { data = {
status: { status: {
code: request.status, code: request ? request.status : '0',
text: request.statusText text: request ? request.statusText : 'Unknown Error'
} }
}; };
} }
@ -813,7 +820,7 @@ requires
url: options.url url: options.url
}); });
Ox.print('request', options.data, Ox.length(requests)); Ox.print('request', options.data, Ox.length(requests));
Ox.length(requests) == 1 && Ox.Event.trigger('', 'requestStart'); Ox.length(requests) == 1 && $body.trigger('requestStart');
} }
} }
@ -965,21 +972,6 @@ requires
// public // public
that.addEvent = function() {
/*
adds a keyboard event, to be bound when focused
addEvent(event, fn) or addEvent({event0: fn0, event1: fn1, ...})
*/
if (arguments.length == 1) {
$.each(arguments[0], function(event, fn) {
Ox.Event.add(self.options.id, event, fn);
});
} else {
Ox.Event.add(self.options.id, arguments[0], arguments[1]);
}
return that;
};
that.bindEvent = function() { that.bindEvent = function() {
/* /*
binds a function to an event triggered by this object binds a function to an event triggered by this object
@ -987,10 +979,12 @@ requires
*/ */
if (arguments.length == 1) { if (arguments.length == 1) {
$.each(arguments[0], function(event, fn) { $.each(arguments[0], function(event, fn) {
Ox.Event.bind(self.options.id, event, fn); Ox.print(that.id, 'bind', event);
that.bind('ox_' + event, fn);
}); });
} else { } else {
Ox.Event.bind(self.options.id, arguments[0], arguments[1]); Ox.print(that.id, 'bind', arguments[0]);
that.bind('ox_' + arguments[0], arguments[1]);
} }
return that; return that;
} }
@ -1048,7 +1042,7 @@ requires
// otherwise, extend options // otherwise, extend options
self.options = $.extend(self.options || self.defaults, args); self.options = $.extend(self.options || self.defaults, args);
$.each(args, function(key, value) { $.each(args, function(key, value) {
key == 'id' && id && Ox.Event.changeId(id, value); // key == 'id' && id && Ox.Event.changeId(id, value);
value !== oldOptions[key] && self.onChange(key, value); value !== oldOptions[key] && self.onChange(key, value);
/* /*
fixme: why does this not work? fixme: why does this not work?
@ -1068,31 +1062,31 @@ requires
}; };
that.remove = function() { that.remove = function() {
if (self.options && self.options.id) { //self.options && Ox.Event.unbind(self.options.id); // there are optionless elements, like the dialog layer
Ox.Event.remove(self.options.id); //that.loseFocus();
Ox.Event.unbind(self.options.id);
}
that.$element.remove(); that.$element.remove();
delete $elements[that.ox]; delete $elements[that.ox];
return that; return that;
}; };
that.removeEvent = function() { that.triggerEvent = function() {
/* /*
removes a keyboard event triggers an event
removeEvent(event, fn) or removeEvent({event0: fn0, event1: fn1, ...}) triggerEvent(event) or triggerEvent(event, data) or triggerEvent({event0: data, event1: data, ...})
*/ */
if (arguments.length == 1) { if (Ox.isObject(arguments[0])) {
$.each(arguments[0], function(event, fn) { $.each(arguments[0], function(event, data) {
Ox.Event.remove(self.options.id, event, fn); Ox.print(that.id, 'trigger', event, data);
that.trigger('ox_' + event, data);
}); });
} else { } else {
Ox.Event.remove(self.options.id, arguments[0], arguments[1]); Ox.print(that.id, 'trigger', arguments[0], arguments[1] || {});
that.trigger('ox_' + arguments[0], arguments[1] || {});
} }
return that; return that;
}; };
that.triggerEvent = function() { that.triggerEvent_ = function() {
/* /*
triggers an event triggers an event
triggerEvent(event) or triggerEvent(event, data) or triggerEvent({event0: data, event1: data, ...}) triggerEvent(event) or triggerEvent(event, data) or triggerEvent({event0: data, event1: data, ...})
@ -1108,6 +1102,23 @@ requires
}; };
that.unbindEvent = function() { that.unbindEvent = function() {
/*
unbinds an event
unbindEvent(event, fn) or unbindEvent({event0: fn0, event1: fn1, ...})
*/
if (arguments.length == 1) {
$.each(arguments[0], function(event, fn) {
Ox.print(that.id, 'unbind', arguments[0]);
that.unbind('ox_' + event, fn);
});
} else {
Ox.print(that.id, 'unbind', arguments[0]);
that.unbind('ox_' + arguments[0], arguments[1]);
}
return that;
};
that.unbindEvent_ = function() {
/* /*
unbinds an event unbinds an event
unbindEvent(event, fn) or unbindEvent({event0: fn0, event1: fn1, ...}) unbindEvent(event, fn) or unbindEvent({event0: fn0, event1: fn1, ...})
@ -1442,8 +1453,8 @@ requires
clientXY: self.options.orientation == 'horizontal' ? 'clientY' : 'clientX', clientXY: self.options.orientation == 'horizontal' ? 'clientY' : 'clientX',
dimensions: oxui.getDimensions(self.options.orientation), // fixme: should orientation be the opposite orientation here? dimensions: oxui.getDimensions(self.options.orientation), // fixme: should orientation be the opposite orientation here?
edges: oxui.getEdges(self.options.orientation), edges: oxui.getEdges(self.options.orientation),
ids: $.map(self.options.elements, function(v, i) { ids: $.map(self.options.elements, function(element) {
return v.options('id'); return element.options('id');
}), }),
leftOrTop: self.options.edge == 'left' || self.options.edge == 'top', leftOrTop: self.options.edge == 'left' || self.options.edge == 'top',
startPos: 0, startPos: 0,
@ -1578,6 +1589,7 @@ requires
buttons: [], buttons: [],
content: null, content: null,
height: 216, height: 216,
keys: {},
minHeight: 144, minHeight: 144,
minWidth: 256, minWidth: 256,
movable: true, movable: true,
@ -1587,9 +1599,13 @@ requires
}) })
.options(options || {}) .options(options || {})
.addClass('OxDialog') .addClass('OxDialog')
.addEvent({ .bindEvent({
key_enter: function() {
keypress('enter');
},
key_escape: function() { key_escape: function() {
that.close(); Ox.print('KEY ESCAPE')
keypress('escape');
} }
}); });
@ -1627,7 +1643,7 @@ requires
.appendTo(that); .appendTo(that);
loadButtons(); loadButtons();
that.$buttons[0].focus(); //that.$buttons[0].focus();
that.$layer = new Ox.Element() // fixme: Layer widget that would handle click? that.$layer = new Ox.Element() // fixme: Layer widget that would handle click?
.addClass('OxLayer') .addClass('OxLayer')
@ -1677,7 +1693,8 @@ requires
} }
function getButtonById(id) { function getButtonById(id) {
var ret = null var ret = null;
Ox.print('that.$buttons', that.$buttons, id)
$.each(that.$buttons, function(i, button) { $.each(that.$buttons, function(i, button) {
if (button.options('id') == id) { if (button.options('id') == id) {
ret = button; ret = button;
@ -1687,13 +1704,22 @@ requires
return ret; return ret;
} }
function keypress(key) {
var id = self.options.keys[key];
Ox.print('X', key, self.options.keys)
id && getButtonById(id).$element.trigger('click');
}
function loadButtons() { function loadButtons() {
Ox.print('loadButtons', $.map(self.options.buttons, function(v) {
return v;
}));
if (that.$buttons) { if (that.$buttons) {
that.$buttons.forEach(function($button) { that.$buttons.forEach(function($button) {
$button.remove(); $button.remove();
}); });
that.$resize.remove(); that.$resize.remove();
//that.$buttonsbar.empty(); // that.$buttonsbar.empty();
} }
that.$buttons = []; that.$buttons = [];
if (!Ox.isArray(self.options.buttons[0])) { if (!Ox.isArray(self.options.buttons[0])) {
@ -1828,8 +1854,12 @@ requires
that.animate({ that.animate({
opacity: 0 opacity: 0
}, 200, function() { }, 200, function() {
that.remove(); that.$buttons.forEach(function($button) {
$button.remove();
});
that.loseFocus();
that.$layer.remove(); that.$layer.remove();
that.remove();
callback(); callback();
}); });
$window.unbind('mouseup', mouseupLayer) $window.unbind('mouseup', mouseupLayer)
@ -1867,6 +1897,7 @@ requires
}; };
that.open = function() { that.open = function() {
Ox.print('before open')
that.$layer.appendTo($body); that.$layer.appendTo($body);
that.css({ that.css({
opacity: 0 opacity: 0
@ -1875,9 +1906,10 @@ requires
}, 200); }, 200);
center(); center();
reset(); reset();
// fixme: reenable, but implement preview-style dialog // fixme: the following line prevents preview-style dialog
//that.gainFocus(); that.gainFocus();
$window.bind('mouseup', mouseupLayer) $window.bind('mouseup', mouseupLayer)
Ox.print('after open')
return that; return that;
}; };
@ -1948,15 +1980,12 @@ requires
}); });
// fixme: form isn't necessarily empty/invalid // fixme: form isn't necessarily empty/invalid
$.map(self.options.items, function(item, i) {
self.itemIds[i] = item.id || item.element.options('id');
self.itemIsValid[i] = false;
});
$.each(self.options.items, function(i, item) { $.each(self.options.items, function(i, item) {
that.append(self.$items[i] = new Ox.FormItem(item)) self.itemIds[i] = item.options('id') || item.id;
self.itemIsValid[i] = !!item.value().length;
that.append(self.$items[i] = new Ox.FormItem({element: item}))
.append(self.$messages[i] = new Ox.Element().addClass('OxFormMessage')); .append(self.$messages[i] = new Ox.Element().addClass('OxFormMessage'));
item.element.bindEvent({ item.bindEvent({
/* /*
blur: function(event, data) { blur: function(event, data) {
validate(i, data.valid); validate(i, data.valid);
@ -1967,6 +1996,15 @@ requires
} }
}, },
*/ */
autovalidate: function(event, data) {
data.valid = !!data.value.length;
validate(i, data.valid);
if (data.valid) {
self.$messages[i].html('').hide();
} else {
//self.$messages[i].html(data.message).show();
}
},
submit: function(event, data) { submit: function(event, data) {
self.formIsValid && that.submit(); self.formIsValid && that.submit();
}, },
@ -1996,7 +2034,7 @@ requires
} }
function validate(pos, valid) { function validate(pos, valid) {
Ox.print('validate', pos, valid) Ox.print('FORM validate', pos, valid)
self.itemIsValid[pos] = valid; self.itemIsValid[pos] = valid;
if (Ox.every(self.itemIsValid) != self.formIsValid) { if (Ox.every(self.itemIsValid) != self.formIsValid) {
self.formIsValid = !self.formIsValid; self.formIsValid = !self.formIsValid;
@ -2022,6 +2060,7 @@ requires
$.each(self.$items, function(i, $item) { $.each(self.$items, function(i, $item) {
values[self.itemIds[i]] = self.$items[i].value(); values[self.itemIds[i]] = self.$items[i].value();
}); });
Ox.print('VALUES', values)
return values; return values;
} else { } else {
$.each(arguments[0], function(key, value) { $.each(arguments[0], function(key, value) {
@ -2129,18 +2168,20 @@ requires
} }
function click() { function click() {
var data = self.titles[self.selectedTitle]; if (!self.options.disabled) {
if (!self.options.selectable) { var data = self.titles[self.selectedTitle];
that.triggerEvent('click', data); if (!self.options.selectable) {
} else { that.triggerEvent('click', data);
if (self.options.group) {
that.triggerEvent('select', data);
} else { } else {
that.toggleSelected(); if (self.options.group) {
that.triggerEvent('select', data);
} else {
that.toggleSelected();
}
}
if (self.titles.length == 2) {
that.toggleTitle();
} }
}
if (self.titles.length == 2) {
that.toggleTitle();
} }
} }
@ -2376,6 +2417,10 @@ requires
} }
}; };
that.checked = function() {
return self.options.checked;
}
that.toggleChecked = function() { that.toggleChecked = function() {
self.$button.toggleTitle(); self.$button.toggleTitle();
return that; return that;
@ -2539,7 +2584,7 @@ requires
}) })
.options(options) .options(options)
.addClass('OxInput OxMedium') .addClass('OxInput OxMedium')
.addEvent($.extend(self.options.type == 'textarea' ? {} : { .bindEvent($.extend(self.options.type == 'textarea' ? {} : {
key_enter: submit key_enter: submit
}, { }, {
key_escape: cancel key_escape: cancel
@ -2803,16 +2848,13 @@ requires
function autovalidateFunction(value) { function autovalidateFunction(value) {
var regexp = new RegExp(self.options.autovalidate); var regexp = new RegExp(self.options.autovalidate);
return $.map(value.toLowerCase().split(''), function(v, i) { return $.map(value.split(''), function(v) {
if (regexp(v)) { return regexp(v) ? v : null;
return v;
} else {
return null;
}
}).join(''); }).join('');
} }
function autovalidateTypeFunction(type, value) { function autovalidateTypeFunction(type, value) {
// fixme: remove trailing zeroes on blur
var cursor, var cursor,
regexp = type == 'float' ? /[\d\.]/ : /\d/; regexp = type == 'float' ? /[\d\.]/ : /\d/;
if (type == 'float') { if (type == 'float') {
@ -2825,6 +2867,9 @@ requires
} }
self.autovalidateFloatFlag = false; self.autovalidateFloatFlag = false;
} }
while (value[0] == '0' && value[1] != '.') {
value = value.substr(1);
}
while (Ox.startsWith(value, '.')) { while (Ox.startsWith(value, '.')) {
if (Ox.startsWith(value, '..')) { if (Ox.startsWith(value, '..')) {
value = value.substr(1); value = value.substr(1);
@ -2839,12 +2884,8 @@ requires
} }
} }
} }
value = $.map(value.split(''), function(v, i) { value = $.map(value.split(''), function(v) {
if (regexp(v)) { return regexp(v) ? v : null;
return v;
} else {
return null;
}
}).join(''); }).join('');
if (type == 'integer') { if (type == 'integer') {
while (value.length > 1 && Ox.startsWith(value, '0')) { while (value.length > 1 && Ox.startsWith(value, '0')) {
@ -2949,7 +2990,7 @@ requires
parseFloat(self.options.value) + (i == 0 ? -1 : 1) * self.options.arrowStep, parseFloat(self.options.value) + (i == 0 ? -1 : 1) * self.options.arrowStep,
self.options.min, self.options.min,
self.options.max self.options.max
); ).toString();
self.$input.val(self.options.value);//.focus(); self.$input.val(self.options.value);//.focus();
} }
@ -3216,7 +3257,8 @@ requires
}) })
.bindEvent({ .bindEvent({
change: change, change: change,
submit: change submit: change,
validate: validate
}) })
.appendTo(that); .appendTo(that);
}); });
@ -3255,6 +3297,11 @@ requires
}); });
} }
function validate(event, data) {
Ox.print('INPUTGROUP TRIGGER VALIDATE')
that.triggerEvent('validate', data);
}
// fixme: is this used? // fixme: is this used?
that.getInputById = function(id) { that.getInputById = function(id) {
var input = null; var input = null;
@ -3268,6 +3315,16 @@ requires
return input; return input;
}; };
that.value = function() {
return $.map(self.options.inputs, function(input) {
var ret = null;
['checked', 'selected', 'value'].forEach(function(v) {
input[v] && (ret = input[v]());
});
return ret;
});
};
return that; return that;
}; };
@ -4205,7 +4262,7 @@ requires
.css(self.options.width == 'auto' ? {} : { .css(self.options.width == 'auto' ? {} : {
width: self.options.width + 'px' width: self.options.width + 'px'
}) })
.addEvent({ .bindEvent({
key_escape: loseFocus, key_escape: loseFocus,
key_down: showMenu key_down: showMenu
}); });
@ -4268,7 +4325,7 @@ requires
}); });
function clickMenu(event, data) { function clickMenu(event, data) {
Ox.print('%% clickMenu')
} }
function changeMenu(event, data) { function changeMenu(event, data) {
@ -4284,8 +4341,11 @@ requires
} }
function hideMenu() { function hideMenu() {
Ox.print('%% hideMenu that', that, 'self', self)
that.removeClass('OxSelected'); that.removeClass('OxSelected');
self.$button.removeClass('OxSelected'); self.$button.remove();
// self.$button.removeClass('OxSelected');
Ox.print('%% hideMenu end')
} }
function loseFocus() { function loseFocus() {
@ -4349,13 +4409,16 @@ requires
.addClass('OxInputGroup'); .addClass('OxInputGroup');
$.each(self.options.float == 'left' ? self.options.elements : self.options.elements.reverse(), function(i, $element) { $.each(self.options.float == 'left' ? self.options.elements : self.options.elements.reverse(), function(i, $element) {
$element.options({ $element.css({
id: self.options.id + Ox.toTitleCase($element.options('id')),
parent: that
})
.css({
float: self.options.float // fixme: make this a class float: self.options.float // fixme: make this a class
}) })
.bindEvent({
validate: function(event, data) {
that.triggerEvent({
validate: data
});
}
})
.appendTo(that); .appendTo(that);
}); });
@ -4384,6 +4447,16 @@ requires
} }
} }
that.value = function() {
return $.map(self.options.elements, function(input) {
var ret = null;
['checked', 'selected', 'value'].forEach(function(v) {
input[v] && (ret = input[v]());
});
return ret;
});
};
return that; return that;
}; };
@ -6027,7 +6100,7 @@ requires
updateQuery(); updateQuery();
Ox.print('s.o', self.options) Ox.print('s.o', self.options)
that.addEvent(self.keyboardEvents); that.bindEvent(self.keyboardEvents);
$window.resize(that.size); $window.resize(that.size);
function addAboveToSelection() { function addAboveToSelection() {
@ -7342,7 +7415,7 @@ requires
type: 'satellite' type: 'satellite'
}) })
.options(options || {}) .options(options || {})
.addEvent({ .bindEvent({
key_up: function() { key_up: function() {
pan(0, -1); pan(0, -1);
}, },
@ -8093,7 +8166,7 @@ requires
.mouseenter(mouseenter) .mouseenter(mouseenter)
.mouseleave(mouseleave) .mouseleave(mouseleave)
.mousemove(mousemove) .mousemove(mousemove)
.addEvent({ .bindEvent({
key_up: selectPreviousItem, key_up: selectPreviousItem,
key_down: selectNextItem, key_down: selectNextItem,
key_left: selectSupermenu, key_left: selectSupermenu,
@ -8129,7 +8202,7 @@ requires
.addClass('OxBottom') .addClass('OxBottom')
.appendTo(that.$element); .appendTo(that.$element);
that.$layer = $('<div>') that.$layer = $('<div>')
.addClass(self.options.mainmenu ? 'OxMainMenuLayer' : 'OxLayer') .addClass(self.options.mainmenu ? 'OxMainMenuLayer' : 'OxMenuLayer')
.click(click); .click(click);
function click(event) { function click(event) {
@ -8658,7 +8731,6 @@ requires
scrollMenuUp(); scrollMenuUp();
that.$scrollbars.up.is(':visible') && that.$scrollbars.up.hide(); that.$scrollbars.up.is(':visible') && that.$scrollbars.up.hide();
that.$scrollbars.down.is(':visible') && that.$scrollbars.down.hide(); that.$scrollbars.down.is(':visible') && that.$scrollbars.down.hide();
//that.$scrollbars.down.hide();
if (self.options.parent) { if (self.options.parent) {
//self.options.element.removeClass('OxSelected'); //self.options.element.removeClass('OxSelected');
self.options.parent.options({ self.options.parent.options({
@ -9872,7 +9944,7 @@ requires
.bindEvent('change', changeTimelineSmall) .bindEvent('change', changeTimelineSmall)
.appendTo(that); .appendTo(that);
that.addEvent({ that.bindEvent({
key_alt_left: function() { key_alt_left: function() {
movePositionTo('cut', -1); movePositionTo('cut', -1);
}, },

15
demos/form2/js/form.js
View file

@ -714,7 +714,7 @@ $(function() {
}) })
], ],
separators: [ separators: [
{title: "", width: -8} {title: "", width: 0}
] ]
} }
} }
@ -1053,18 +1053,19 @@ $(function() {
var value = $element.options("value"), var value = $element.options("value"),
$dialog = new Ox.Dialog({ $dialog = new Ox.Dialog({
buttons: [ buttons: [
{ new Ox.Button({
click: function() { $dialog.close(); }, id: 'close',
id: "close", title: 'Close'
title: "Close" }).bindEvent({
} click: function() { $dialog.close(); }
})
], ],
content: Ox.isUndefined(value) ? "undefined" : value,
height: 128, height: 128,
id: "value", id: "value",
title: "Value", title: "Value",
width: 256 width: 256
}) })
.append(Ox.isUndefined(value) ? "undefined" : value)
.open(); .open();
}) })
.appendTo($div); .appendTo($div);