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() {
|
Ox.print = function() {
|
||||||
/*
|
/*
|
||||||
*/
|
*/
|
||||||
|
|
@ -523,6 +556,10 @@ Ox.getISOYear = function(date) {
|
||||||
return date_.getFullYear();
|
return date_.getFullYear();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Ox.getTime = function() {
|
||||||
|
return +new Date();
|
||||||
|
}
|
||||||
|
|
||||||
Ox.getTimezoneOffsetString = function(date) {
|
Ox.getTimezoneOffsetString = function(date) {
|
||||||
/*
|
/*
|
||||||
Time zone offset string (-1200 - +1200)
|
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
|
Ox.Cache
|
||||||
----------------------------------------------------------------------------
|
----------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
// currently part of Ox.Request
|
||||||
|
|
||||||
/*
|
/*
|
||||||
----------------------------------------------------------------------------
|
----------------------------------------------------------------------------
|
||||||
Ox.Event
|
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
|
Ox.URL
|
||||||
|
|
@ -769,6 +969,95 @@ requires
|
||||||
return that;
|
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
|
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
|
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