request controller
This commit is contained in:
Rolux
parent
274c2f436a
commit
a19578af35
3 changed files with 369 additions and 87 deletions
|
|
@ -11,6 +11,39 @@ Core functions
|
|||
================================================================================
|
||||
*/
|
||||
|
||||
Ox.getset = function(obj, args, callback, context) {
|
||||
/*
|
||||
generic getter and setter function
|
||||
Ox.getset(obj) returns obj
|
||||
Ox.getset(obj, str) returns obj.str
|
||||
Ox.getset(obj, {key: val, ...}, callback, context) sets obj.key to val,
|
||||
calls callback(key, val),
|
||||
returns context
|
||||
*/
|
||||
var args = args || {},
|
||||
callback = callback || function() {},
|
||||
context = context || {},
|
||||
length = args.length,
|
||||
ret;
|
||||
if (length == 0) {
|
||||
// getset()
|
||||
ret = obj;
|
||||
} else if (length == 1 && typeof arguments[0] == "string") {
|
||||
// getset(str)
|
||||
ret = obj[args[0]]
|
||||
} else {
|
||||
// getset(str, val) or getset({str: val, ...})
|
||||
// translate (str, val) to ({str: val})
|
||||
args = Ox.makeObject(args);
|
||||
obj = $.extend(obj, args);
|
||||
$.each(args, function(k, v) {
|
||||
callback(k, v);
|
||||
});
|
||||
ret = context;
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
Ox.print = function() {
|
||||
/*
|
||||
*/
|
||||
|
|
@ -523,6 +556,10 @@ Ox.getISOYear = function(date) {
|
|||
return date_.getFullYear();
|
||||
};
|
||||
|
||||
Ox.getTime = function() {
|
||||
return +new Date();
|
||||
}
|
||||
|
||||
Ox.getTimezoneOffsetString = function(date) {
|
||||
/*
|
||||
Time zone offset string (-1200 - +1200)
|
||||
|
|
|
|||
|
|
@ -70,12 +70,55 @@ requires
|
|||
----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
Ox.App = function() {
|
||||
/*
|
||||
options:
|
||||
requestTimeout
|
||||
requestType
|
||||
requestURL
|
||||
*/
|
||||
return function(options) {
|
||||
|
||||
options = options || {};
|
||||
var self = {},
|
||||
that = this;
|
||||
|
||||
self.options = $.extend({
|
||||
requestTimeout: oxui.requestTimeout,
|
||||
requestType: oxui.requestType,
|
||||
requestURL: oxui.requestURL
|
||||
}, options);
|
||||
|
||||
self.change = function() {
|
||||
|
||||
};
|
||||
|
||||
that.launch = function() {
|
||||
$.ajaxSetup({
|
||||
timeout: self.options.requestTimeout,
|
||||
type: self.options.requestType,
|
||||
url: self.options.requestURL
|
||||
});
|
||||
};
|
||||
|
||||
that.options = function() {
|
||||
return Ox.getset(self.options, Array.slice.call(arguments), self.change, that);
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
||||
}();
|
||||
|
||||
/*
|
||||
----------------------------------------------------------------------------
|
||||
Ox.Cache
|
||||
----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
// currently part of Ox.Request
|
||||
|
||||
/*
|
||||
----------------------------------------------------------------------------
|
||||
Ox.Event
|
||||
|
|
@ -331,6 +374,163 @@ requires
|
|||
----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
/*
|
||||
----------------------------------------------------------------------------
|
||||
Ox.Request
|
||||
----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
Ox.Request = function() {
|
||||
|
||||
var cache = {},
|
||||
pending = {},
|
||||
requests = {},
|
||||
self = {
|
||||
options: {
|
||||
timeout: 15000,
|
||||
type: "POST",
|
||||
url: "api"
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
|
||||
cancel: function() {
|
||||
var index;
|
||||
if (arguments.length == 0) {
|
||||
requests = {};
|
||||
} else if (Ox.isFunction(arguments[0])) {
|
||||
// cancel with function
|
||||
$.each(requests, function(id, req) {
|
||||
if (arguments[0](req)) {
|
||||
delete requests[id];
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// cancel by id
|
||||
delete requests[arguments[0]]
|
||||
}
|
||||
},
|
||||
|
||||
options: function(options) {
|
||||
return Ox.getset(self.options, options, $.noop(), this)
|
||||
},
|
||||
|
||||
send: function(options) {
|
||||
|
||||
options = $.extend({
|
||||
age: -1,
|
||||
callback: function() {},
|
||||
id: Ox.uid(),
|
||||
timeout: self.options.timeout,
|
||||
type: self.options.type,
|
||||
url: self.options.url
|
||||
}, options);
|
||||
|
||||
var req = JSON.stringify({
|
||||
url: options.url,
|
||||
data: options.data
|
||||
});
|
||||
|
||||
function callback(data, callback) {
|
||||
delete requests[options.id];
|
||||
callback(data);
|
||||
}
|
||||
|
||||
function error(request, status, error) {
|
||||
var $dialog = new Ox.Dialog({
|
||||
title: "Error: Remote request failed.",
|
||||
buttons: [
|
||||
new Ox.Button({
|
||||
value: "Details",
|
||||
click: function() {
|
||||
var $iframe = $("<iframe>"),
|
||||
iframe = $iframe[0].contentWindow;
|
||||
iframe.document.open();
|
||||
iframe.document.write(xhr.responseText);
|
||||
iframe.document.close();
|
||||
$dialog.close();
|
||||
$dialog = new Ox.Dialog({
|
||||
title: "Error: Remote request failed.",
|
||||
buttons: [
|
||||
new Ox.Button({
|
||||
value: "Close",
|
||||
click: function() {
|
||||
$dialog.close();
|
||||
}
|
||||
})
|
||||
],
|
||||
width: 800,
|
||||
height: 400
|
||||
})
|
||||
.append($iframe)
|
||||
.open();
|
||||
}
|
||||
}),
|
||||
new Ox.Button({
|
||||
value: "Close",
|
||||
click: function() {
|
||||
$dialog.close();
|
||||
}
|
||||
})
|
||||
]
|
||||
})
|
||||
.append(request.status + " " + request.statusText)
|
||||
.open();
|
||||
Ox.print({
|
||||
request: request,
|
||||
status: status,
|
||||
error: error
|
||||
});
|
||||
pending[options.id] = false;
|
||||
}
|
||||
|
||||
function success(data) {
|
||||
pending[options.id] = false;
|
||||
try {
|
||||
data = JSON.parse(data);
|
||||
} catch(error) {
|
||||
|
||||
}
|
||||
cache[req] = {
|
||||
data: data,
|
||||
time: Ox.getTime()
|
||||
};
|
||||
callback(data, options.callback);
|
||||
}
|
||||
|
||||
if (pending[options.id]) {
|
||||
setTimeout(function() {
|
||||
Ox.Request.send(options);
|
||||
}, 0);
|
||||
} else {
|
||||
requests[options.id] = {
|
||||
url: options.url,
|
||||
data: options.data
|
||||
};
|
||||
if (cache[req] && (options.age == -1 || options.age > Ox.getTime() - cache[req].time)) {
|
||||
setTimeout(function() {
|
||||
callback(options.id, cache[req].data, callback);
|
||||
}, 0);
|
||||
} else {
|
||||
pending[options.id] = true;
|
||||
$.ajax({
|
||||
data: options.data,
|
||||
error: error,
|
||||
success: success,
|
||||
timeout: options.timeout,
|
||||
type: options.type,
|
||||
url: options.url
|
||||
});
|
||||
}
|
||||
}
|
||||
return options.id;
|
||||
}
|
||||
|
||||
};
|
||||
}();
|
||||
|
||||
|
||||
/*
|
||||
----------------------------------------------------------------------------
|
||||
Ox.URL
|
||||
|
|
@ -769,6 +969,95 @@ requires
|
|||
return that;
|
||||
};
|
||||
|
||||
/*
|
||||
============================================================================
|
||||
Dialog
|
||||
============================================================================
|
||||
*/
|
||||
|
||||
Ox.Dialog = function(options, self) {
|
||||
var self = self || {},
|
||||
options = $.extend({
|
||||
title: "",
|
||||
buttons: [],
|
||||
width: 256,
|
||||
height: 128
|
||||
}, options),
|
||||
that = new Ox.Element()
|
||||
.addClass("OxDialog")
|
||||
.css({
|
||||
left: (($(document).width() - options.width) / 2) + "px",
|
||||
top: (($(document).height() - options.height - 48) / 2) + "px",
|
||||
width: options.width + "px",
|
||||
height: (options.height + 48) + "px"
|
||||
});
|
||||
that.$titlebar = new Ox.Element()
|
||||
.addClass("OxTitleBar")
|
||||
.html(options.title)
|
||||
.mousedown(function(e) {
|
||||
var offset = that.offset(),
|
||||
//maxLeft = $(document).width() - that.width(),
|
||||
//maxTop = $(document).height() - that.height(),
|
||||
x = e.clientX,
|
||||
y = e.clientY,
|
||||
documentWidth = $(document).width();
|
||||
documentHeight = $(document).height();
|
||||
$(window).mousemove(function(e) {
|
||||
var left = Ox.constrain(offset.left - x + e.clientX, 24 - options.width, documentWidth - 24),
|
||||
top = Ox.constrain(offset.top - y + e.clientY, -24 - options.height, documentHeight - 24);
|
||||
that.css({
|
||||
left: left + "px",
|
||||
top: top + "px"
|
||||
});
|
||||
});
|
||||
$(window).one("mouseup", function() {
|
||||
$(window).unbind("mousemove");
|
||||
});
|
||||
})
|
||||
.appendTo(that);
|
||||
that.$content = new Ox.Container()
|
||||
.addClass("OxContent")
|
||||
.css({
|
||||
height: options.height + "px"
|
||||
})
|
||||
.appendTo(that);
|
||||
that.$buttonsbar = new Ox.Element()
|
||||
.addClass("OxButtonsBar")
|
||||
.appendTo(that);
|
||||
//that.$buttons = [];
|
||||
$.each(options.buttons, function(i, v) {
|
||||
v.appendTo(that.$buttonsbar);
|
||||
});
|
||||
options.buttons[0].focus();
|
||||
that.$layer = $(".OxLayer"); // fixme: lazy loading of layer is fine, but save in var, dont look up
|
||||
that.append = function($element) {
|
||||
that.$content.append($element);
|
||||
return that;
|
||||
}
|
||||
that.close = function() {
|
||||
that.animate({
|
||||
opacity: 0
|
||||
}, 200, function() {
|
||||
that.remove();
|
||||
that.$layer.remove();
|
||||
})
|
||||
}
|
||||
that.open = function() {
|
||||
if (!that.$layer.length) {
|
||||
that.$layer = new Ox.Element()
|
||||
.addClass("OxLayer")
|
||||
.appendTo($("body"));
|
||||
}
|
||||
that.css({
|
||||
opacity: 0
|
||||
}).appendTo(that.$layer).animate({
|
||||
opacity: 1
|
||||
}, 200);
|
||||
return that;
|
||||
}
|
||||
return that;
|
||||
}
|
||||
|
||||
/*
|
||||
============================================================================
|
||||
Forms
|
||||
|
|
@ -1193,93 +1482,6 @@ requires
|
|||
|
||||
};
|
||||
|
||||
/*
|
||||
----------------------------------------------------------------------------
|
||||
Ox.Dialog
|
||||
----------------------------------------------------------------------------
|
||||
*/
|
||||
Ox.Dialog = function(options) {
|
||||
var options = $.extend({
|
||||
title: "",
|
||||
buttons: [],
|
||||
width: 256,
|
||||
height: 128
|
||||
}, options),
|
||||
that = new Ox.Element()
|
||||
.addClass("OxDialog")
|
||||
.css({
|
||||
left: (($(document).width() - options.width) / 2) + "px",
|
||||
top: (($(document).height() - options.height - 48) / 2) + "px",
|
||||
width: options.width + "px",
|
||||
height: (options.height + 48) + "px"
|
||||
});
|
||||
that.$titlebar = new Ox.Element()
|
||||
.addClass("OxTitleBar")
|
||||
.html(options.title)
|
||||
.mousedown(function(e) {
|
||||
var offset = that.offset(),
|
||||
//maxLeft = $(document).width() - that.width(),
|
||||
//maxTop = $(document).height() - that.height(),
|
||||
x = e.clientX,
|
||||
y = e.clientY,
|
||||
documentWidth = $(document).width();
|
||||
documentHeight = $(document).height();
|
||||
$(window).mousemove(function(e) {
|
||||
var left = Ox.constrain(offset.left - x + e.clientX, 24 - options.width, documentWidth - 24),
|
||||
top = Ox.constrain(offset.top - y + e.clientY, -24 - options.height, documentHeight - 24);
|
||||
that.css({
|
||||
left: left + "px",
|
||||
top: top + "px"
|
||||
});
|
||||
});
|
||||
$(window).one("mouseup", function() {
|
||||
$(window).unbind("mousemove");
|
||||
});
|
||||
})
|
||||
.appendTo(that);
|
||||
that.$content = new Ox.Container()
|
||||
.addClass("OxContent")
|
||||
.css({
|
||||
height: options.height + "px"
|
||||
})
|
||||
.appendTo(that);
|
||||
that.$buttonsbar = new Ox.Element()
|
||||
.addClass("OxButtonsBar")
|
||||
.appendTo(that);
|
||||
//that.$buttons = [];
|
||||
$.each(options.buttons, function(i, v) {
|
||||
v.appendTo(that.$buttonsbar);
|
||||
});
|
||||
options.buttons[0].focus();
|
||||
that.$layer = $(".OxLayer"); // fixme: lazy loading of layer is fine, but save in var, dont look up
|
||||
that.append = function($element) {
|
||||
that.$content.append($element);
|
||||
return that;
|
||||
}
|
||||
that.close = function() {
|
||||
that.animate({
|
||||
opacity: 0
|
||||
}, 200, function() {
|
||||
that.remove();
|
||||
that.$layer.remove();
|
||||
})
|
||||
}
|
||||
that.open = function() {
|
||||
if (!that.$layer.length) {
|
||||
that.$layer = new Ox.Element()
|
||||
.addClass("OxLayer")
|
||||
.appendTo($("body"));
|
||||
}
|
||||
that.css({
|
||||
opacity: 0
|
||||
}).appendTo(that.$layer).animate({
|
||||
opacity: 1
|
||||
}, 200);
|
||||
return that;
|
||||
}
|
||||
return that;
|
||||
}
|
||||
|
||||
/*
|
||||
============================================================================
|
||||
Panels
|
||||
|
|
@ -1442,3 +1644,22 @@ requires
|
|||
};
|
||||
|
||||
})();
|
||||
|
||||
/*
|
||||
============================================================================
|
||||
Requests
|
||||
============================================================================
|
||||
*/
|
||||
|
||||
/*
|
||||
----------------------------------------------------------------------------
|
||||
Ox.Progressbar
|
||||
----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
/*
|
||||
----------------------------------------------------------------------------
|
||||
Ox.Spinner
|
||||
----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
|
|
|
|||
24
demos/test/app.html
Normal file
24
demos/test/app.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript" src="../../build/js/jquery-1.4.js"></script>
|
||||
<script type="text/javascript" src="../../build/js/ox.js"></script>
|
||||
<script type="text/javascript" src="../../build/js/ox.ui.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
var app = new Ox.App().launch();
|
||||
Ox.Request.send({
|
||||
url: "http://blackbook.local:8000/api/",
|
||||
data: {
|
||||
"function": "hello",
|
||||
data: JSON.stringify({key: "value"})
|
||||
},
|
||||
callback: function(data) {
|
||||
console.log(data);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue