forked from 0x2620/oxjs
request controller
This commit is contained in:
Rolux
parent
274c2f436a
commit
a19578af35
3 changed files with 369 additions and 87 deletions
|
|
@ -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
|
||||
----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue