forked from 0x2620/oxjs
modularize oxui
This commit is contained in:
parent
2e3292e9ce
commit
0024af978c
106 changed files with 16127 additions and 47034 deletions
200
source/js/Ox.App.js
Normal file
200
source/js/Ox.App.js
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
/*
|
||||
============================================================================
|
||||
Application
|
||||
============================================================================
|
||||
*/
|
||||
|
||||
// fixme: get rid og launch, fire load event
|
||||
|
||||
Ox.App = (function() {
|
||||
|
||||
/***
|
||||
Ox.App
|
||||
Basic application instance that communicates with a JSON API.
|
||||
The JSON API should support at least the following actions:
|
||||
api returns all api methods
|
||||
init returns {config: {...}, user: {...}}
|
||||
Options
|
||||
timeout API timeout in msec
|
||||
type 'GET' or 'POST'
|
||||
url URL of the API
|
||||
Methods
|
||||
api[action] make a request
|
||||
api.cancel cancel a request
|
||||
launch launch the App
|
||||
options get or set options
|
||||
***/
|
||||
|
||||
return function(options) {
|
||||
|
||||
options = options || {};
|
||||
var self = {},
|
||||
that = this;
|
||||
|
||||
self.time = +new Date();
|
||||
|
||||
self.options = $.extend({
|
||||
timeout: 60000,
|
||||
type: 'POST',
|
||||
url: '/api/',
|
||||
}, options);
|
||||
|
||||
that.$element = new Ox.Element('body');
|
||||
|
||||
function getUserAgent() {
|
||||
var userAgent = '';
|
||||
Ox.forEach(['Chrome', 'Firefox', 'Internet Explorer', 'Opera', 'Safari'], function(v) {
|
||||
if (navigator.userAgent.indexOf(v) > -1) {
|
||||
userAgent = v;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
if (!userAgent && $.browser.mozilla) {
|
||||
userAgent = 'Firefox';
|
||||
}
|
||||
if (!userAgent && $.browser.webkit) {
|
||||
userAgent = 'Chrome';
|
||||
}
|
||||
return userAgent;
|
||||
}
|
||||
|
||||
function getUserData() {
|
||||
return {
|
||||
document: {
|
||||
referrer: document.referrer
|
||||
},
|
||||
history: {
|
||||
length: history.length
|
||||
},
|
||||
navigator: {
|
||||
cookieEnabled: navigator.cookieEnabled,
|
||||
plugins: $.map(navigator.plugins, function(plugin, i) {
|
||||
return plugin.name;
|
||||
}),
|
||||
userAgent: navigator.userAgent
|
||||
},
|
||||
screen: screen,
|
||||
time: (+new Date() - self.time) / 1000,
|
||||
window: {
|
||||
innerHeight: window.innerHeight,
|
||||
innerWidth: window.innerWidth,
|
||||
outerHeight: window.outerHeight,
|
||||
outerWidth: window.outerWidth,
|
||||
screenLeft: window.screenLeft,
|
||||
screenTop: window.screenTop
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function loadImages(callback) {
|
||||
window.OxImageCache = [];
|
||||
$.getJSON(Ox.UI.PATH + 'json/ox.ui.images.json', function(data) {
|
||||
// fixme: find a better way to not wait for flags
|
||||
data = data.filter(function(image) {
|
||||
return !Ox.startsWith(image, 'svg/ox.map/')
|
||||
});
|
||||
var counter = 0,
|
||||
length = data.length;
|
||||
data.forEach(function(src, i) {
|
||||
var image = new Image();
|
||||
image.src = Ox.UI.PATH + src;
|
||||
image.onload = function() {
|
||||
(++counter == length) && callback();
|
||||
}
|
||||
window.OxImageCache.push(image); // fixme: global var???
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
self.change = function(key, value) {
|
||||
|
||||
};
|
||||
|
||||
that.api = {
|
||||
api: function(callback) {
|
||||
Ox.Request.send({
|
||||
url: self.options.url,
|
||||
data: {
|
||||
action: 'api'
|
||||
},
|
||||
callback: callback
|
||||
});
|
||||
},
|
||||
cancel: function(id) {
|
||||
Ox.Request.cancel(id);
|
||||
}
|
||||
};
|
||||
|
||||
that.bindEvent = function() {
|
||||
|
||||
};
|
||||
|
||||
// fixme: use $.when()
|
||||
that.launch = function(callback) {
|
||||
var time = +new Date(),
|
||||
userAgent = getUserAgent(),
|
||||
userAgents = ['Chrome', 'Firefox', 'Opera', 'Safari'];
|
||||
$.ajaxSetup({
|
||||
timeout: self.options.timeour,
|
||||
type: self.options.type,
|
||||
url: self.options.url
|
||||
});
|
||||
userAgents.indexOf(userAgent) > -1 ? start() : stop();
|
||||
function start() {
|
||||
// fixme: rename config to site?
|
||||
var counter = 0, config, user;
|
||||
that.api.api(function(result) {
|
||||
Ox.forEach(result.data.actions, function(val, key) {
|
||||
that.api[key] = function(data, callback) {
|
||||
if (arguments.length == 1 && Ox.isFunction(data)) {
|
||||
callback = data;
|
||||
data = {};
|
||||
}
|
||||
return Ox.Request.send($.extend({
|
||||
url: self.options.url,
|
||||
data: {
|
||||
action: key,
|
||||
data: JSON.stringify(data)
|
||||
},
|
||||
callback: callback
|
||||
}, !val.cache ? {age: 0}: {}));
|
||||
};
|
||||
});
|
||||
that.api.init(getUserData(), function(result) {
|
||||
config = result.data.config;
|
||||
user = result.data.user;
|
||||
// fixme: not generic
|
||||
document.title = config.site.name;
|
||||
launchCallback();
|
||||
});
|
||||
});
|
||||
loadImages(launchCallback);
|
||||
function launchCallback() {
|
||||
++counter == 2 && $(function() {
|
||||
var $div = Ox.UI.$body.find('div');
|
||||
Ox.UI.$body.find('img').remove();
|
||||
$div.animate({
|
||||
opacity: 0
|
||||
}, 1000, function() {
|
||||
$div.remove();
|
||||
});
|
||||
// fixme: not generic enough, just pass data
|
||||
callback({config: config, user: user});
|
||||
});
|
||||
}
|
||||
}
|
||||
function stop() {
|
||||
that.request.send(self.options.init, getUserData(), function() {});
|
||||
}
|
||||
return that;
|
||||
};
|
||||
|
||||
that.options = function() {
|
||||
return Ox.getset(self.options, Array.prototype.slice.call(arguments), self.change, that);
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
||||
}());
|
||||
Loading…
Add table
Add a link
Reference in a new issue