diff --git a/source/Ox.UI/js/Core/Ox.Element.js b/source/Ox.UI/js/Core/Ox.Element.js index d5b4b345..efbb516b 100644 --- a/source/Ox.UI/js/Core/Ox.Element.js +++ b/source/Ox.UI/js/Core/Ox.Element.js @@ -1,5 +1,4 @@ // vim: et:ts=4:sw=4:sts=4:ft=javascript -// check out http://ejohn.org/apps/learn/#36 (-#38, making fns work w/o new) /*@ Ox.Element Basic UI element object @@ -99,9 +98,9 @@ Ox.Element = function(options, self) { }); } - function bind(action, event, fn) { + function bind(action, event, callback) { self.$eventHandler[action]('ox_' + event, function(event, data) { - fn(Ox.extend({ + callback(Ox.extend({ _element: that.$element, _event: event }, data)); @@ -236,11 +235,10 @@ Ox.Element = function(options, self) { data event data (key/value pairs) event Event name Event names can be namespaced, like 'click.foo' - @*/ that.bindEvent = function() { - Ox.forEach(Ox.makeObject(arguments), function(fn, event) { - bind('bind', event, fn); + Ox.forEach(Ox.makeObject(arguments), function(callback, event) { + bind('bind', event, callback); }); return that; } @@ -255,8 +253,8 @@ Ox.Element = function(options, self) { Event names can be namespaced, like 'click.foo' @*/ that.bindEventOnce = function() { - Ox.forEach(Ox.makeObject(arguments), function(fn, event) { - bind('one', event, fn); + Ox.forEach(Ox.makeObject(arguments), function(callback, event) { + bind('one', event, callback); }); return that; }; diff --git a/source/Ox.UI/js/Core/Ox.Event.js b/source/Ox.UI/js/Core/Ox.Event.js new file mode 100644 index 00000000..c0cb268c --- /dev/null +++ b/source/Ox.UI/js/Core/Ox.Event.js @@ -0,0 +1,91 @@ +/*@ +Ox.Event Basic event handler +@*/ + +Ox.Event = (function() { + + var self = {}, that = {}; + + self.$eventHandler = $('
'); + + /*@ + bind Binds a callback to an event + (event, callback) -> The event handler + ({event: callback, ...}) -> The event handler + callback Callback function + data <*> Event data + event Event name + Event names can be namespaced, like 'click.foo' + @*/ + that.bind = function() { + Ox.forEach(Ox.makeObject(arguments), function(callback, event) { + self.$eventHandler.bind('ox_' + event, function(event, data) { + callback(data.value); + }); + }); + return that; + }; + + /*@ + bindOnce Binds a callback to an event, once + (event, callback) -> The event handler + ({event: callback, ...}) -> The event handler + callback Callback function + data <*> Event data + event Event name + Event names can be namespaced, like 'click.foo' + @*/ + that.bindOnce = function() { + Ox.forEach(Ox.makeObject(arguments), function(callback, event) { + self.$eventHandler.one('ox_' + event, function(event, data) { + callback(data.value); + }); + }); + return that; + }; + + /*@ + trigger Triggers an event + (event) -> The event handler + (event, data) -> The event handler + ({event: data, ...}) -> The event handler + event Event name + data <*> Event data + @*/ + that.trigger = function() { + Ox.forEach(Ox.makeObject(arguments), function(data, event) { + Ox.print('Ox.Event.trigger', event, data) + self.$eventHandler.trigger('ox_' + event, {value: data}); + }); + return that; + }; + + /*@ + unbind Unbinds all callbacks from an event + To unbind a specific handler, use namespaced events, like + bind('click.foo', callback), and then + unbind('click.foo'). + () -> The event handler + Unbinds all events + (event) -> The event handler + Unbinds one event + (event, event, ...) -> The event handler + Unbinds multiple events + ([event, event, ...]) -> The event handler + Unbinds multiple events + event Event name + @*/ + that.unbind = function() { + if (arguments.length == 0) { + self.$eventHandler.unbind(); + } else { + Ox.makeArray(arguments).forEach(function(event) { + self.$eventHandler.unbind('ox_' + event); + }); + } + return that; + }; + + return that; + +}()); \ No newline at end of file diff --git a/source/Ox.UI/js/Core/Ox.URL.js b/source/Ox.UI/js/Core/Ox.URL.js index 769a7a4e..37b8dad3 100644 --- a/source/Ox.UI/js/Core/Ox.URL.js +++ b/source/Ox.UI/js/Core/Ox.URL.js @@ -157,6 +157,8 @@ Ox.URL = function(options) { Ox.print('Ox.URL options', self.options) + self.previousURL = ''; + function constructCondition(condition) { var key = condition.key == '*' ? '' : condition.key, operator = condition.operator, @@ -200,13 +202,15 @@ Ox.URL = function(options) { } function constructSort(sort, state) { + var sortKeys = self.options.sortKeys[state.type][ + !state.item ? 'list' : 'item' + ][state.view]; return sort.map(function(sort) { return ( - sort.operator == Ox.getObjectById(self.options.sortKeys[state.type][ - !state.item ? 'list' : 'item' - ][state.view], sort.key).operator ? '' : sort.operator + Ox.getObjectById(sortKeys, sort.key).operator == sort.operator + ? '' : sort.operator ) + sort.key; - }).join(',') + }).join(','); } function constructSpan(span, state) { @@ -233,7 +237,7 @@ Ox.URL = function(options) { if (state.item) { parts.push(state.item); } - if (self.options.views[state.type][ + if (state.type && self.options.views[state.type][ state.item ? 'item' : 'list' ].indexOf(state.view) > -1) { parts.push(state.view); @@ -256,7 +260,8 @@ Ox.URL = function(options) { } function encodeValue(str) { - var chars = '/&|()=*:'; + // var chars = '/&|()=*:'; + var chars = '&|()=*'; ret = ''; str.split('').forEach(function(char) { var index = chars.indexOf(char); @@ -320,7 +325,7 @@ Ox.URL = function(options) { } } if (condition.value.indexOf(':') > -1) { - condition.value = condition.value.split(':').map(decodeValue); + condition.value = condition.value.split(':').map(decodeValue).join(':'); } else { condition.value = decodeValue(condition.value); } @@ -410,12 +415,14 @@ Ox.URL = function(options) { } function parseURL(str, callback) { + Ox.print('pU', str) var parts = str.substr(1).split('/'), state = {}; - if (parts.length == 0) { - state.page = ''; + if (parts[0] == '') { + // empty URL callback(state); } else if (self.options.pages.indexOf(parts[0]) > -1) { + // page state.page = parts[0]; callback(state); } else { @@ -428,6 +435,7 @@ Ox.URL = function(options) { state.type = self.options.types[0]; } if (parts.length) { + Ox.print('ST', state.type, self.options.views) if (self.options.views[state.type].list.indexOf(parts[0]) > -1) { // list view state.item = ''; @@ -561,6 +569,12 @@ Ox.URL = function(options) { } } + function saveURL() { + self.previousURL = document.location.pathname + + document.location.search + + document.location.hash; + } + that._construct = function(state) { return constructURL(state); }; @@ -571,25 +585,50 @@ Ox.URL = function(options) { + document.location.search + document.location.hash, callback = arguments[arguments.length - 1]; - Ox.print(str, callback) - parseURL(str, callback); + parseURL(str, function(state) { + that.replace(constructURL(state)); + callback(state); + }); + return that; } + /*@ + pop Sets the URL to the previous URL + @*/ that.pop = function() { - + history.pushState(self.previousURL); + return that; }; - that.push = function(url) { - + /*@ + push Pushes a new URL + (url, callback) -> URL controller + (state) -> URL controller + url New URL + callback callback function + state New state + state State to construct the new URL from + @*/ + that.push = function(url, callback) { + url = callback ? url : constructURL(url); + saveURL(); + Ox.print('PUSH', url); + history.pushState({}, '', url); + callback && parseURL(url, callback); + return that; }; that.replace = function(url) { - + saveURL(); + history.replaceState({}, '', url); + return that; }; that.update = function(state) { // pushes a new URL, constructed from state // state can have type, item, view, span, sort, find + that.push(constructURL(state)); + return that; }; return that; diff --git a/source/Ox.UI/js/Form/Ox.Filter.js b/source/Ox.UI/js/Form/Ox.Filter.js index b1403049..2c1072c4 100644 --- a/source/Ox.UI/js/Form/Ox.Filter.js +++ b/source/Ox.UI/js/Form/Ox.Filter.js @@ -1,12 +1,12 @@ // vim: et:ts=4:sw=4:sts=4:ft=javascript /*@ -Ox.Filter Filter Element - () -> Filter Element - (options) -> Filter Element - (options, self) -> Filter Element +Ox.Filter Filter Object + () -> Filter Object + (options) -> Filter Object + (options, self) -> Filter Object options Options object - findKeys keys + findKeys <[]|[]> keys list list object sort List sort view List view @@ -69,8 +69,8 @@ Ox.Filter = function(options, self) { {id: '!<', title: 'is not less than'}, {id: '>', title: 'is greater than'}, {id: '!>', title: 'is not greater than'}, - {id: '-', title: 'is between'}, - {id: '!-', title: 'is not between'}/*, + {id: '=:', title: 'is between'}, + {id: '!=:', title: 'is not between'}/*, {id: '^', title: 'starts with'}, {id: '!^', title: 'does not start with'}, {id: '$', title: 'ends with'}, @@ -318,13 +318,15 @@ Ox.Filter = function(options, self) { var condition = subpos == -1 ? self.options.query.conditions[pos] : self.options.query.conditions[pos].conditions[subpos], + isBetween = operator.indexOf('-') > -1, oldOperator = condition.operator, + wasBetween = oldOperator.indexOf('-') > -1, wasUselessCondition = isUselessCondition(pos, subpos); condition.operator = operator; - if (oldOperator.indexOf('-') == -1 && operator.indexOf('-') > -1) { + if (isBetween && !wasBetween) { condition.value = [condition.value, condition.value] renderConditions(); - } else if (oldOperator.indexOf('-') > -1 && operator.indexOf('-') == -1) { + } else if (!isBetween && wasBetween) { condition.value = condition.value[0] renderConditions(); } diff --git a/source/Ox.UI/js/Form/Ox.Select.js b/source/Ox.UI/js/Form/Ox.Select.js index 6fbf758f..1a51ea66 100644 --- a/source/Ox.UI/js/Form/Ox.Select.js +++ b/source/Ox.UI/js/Form/Ox.Select.js @@ -23,6 +23,7 @@ Ox.Select Select Object Ox.Select = function(options, self) { + // fixme: make selected a separate option // fixme: selected item needs attribute "checked", not "selected" ... that's strange self = self || {}; var that = Ox.Element({ @@ -176,7 +177,7 @@ Ox.Select = function(options, self) { }; /*@ - selectItem select item in group + selected gets selected item () -> returns object of selected items with id, title @*/ that.selected = function() { diff --git a/source/Ox.UI/js/Video/Ox.VideoPreview.js b/source/Ox.UI/js/Video/Ox.VideoPreview.js index 816268aa..526b2c56 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPreview.js +++ b/source/Ox.UI/js/Video/Ox.VideoPreview.js @@ -119,8 +119,10 @@ Ox.VideoPreview = function(options, self) { self.setOption = function(key, value) { if (key == 'height') { + that.css({height: value + 'px'}); self.$frame.css(getFrameCSS()); } else if (key == 'width') { + that.css({width: value + 'px'}); self.$frame.attr({src: self.options.getFrame()}) .css(getFrameCSS()); self.$timeline.css({width: value + 'px'});