restructured js/itf folder to separate files
This commit is contained in:
sanj
parent
a801b585f1
commit
d2a6374551
|
|
@ -55,7 +55,13 @@ def api_api(request):
|
|||
actions = globals().keys()
|
||||
actions = map(lambda a: a[4:], filter(lambda a: a.startswith('api_'), actions))
|
||||
actions.sort()
|
||||
return render_to_json_response(json_response({'actions': actions}))
|
||||
ret = {}
|
||||
#FIXME: set cache to False for login, logout, etc.
|
||||
for a in actions:
|
||||
ret[a] = {
|
||||
'cache': True
|
||||
}
|
||||
return render_to_json_response(json_response({'actions': ret}))
|
||||
|
||||
def api_apidoc(request):
|
||||
'''
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ class BestPractice(ItfModel):
|
|||
title = models.CharField(max_length=512)
|
||||
story = models.TextField()
|
||||
guideline = models.TextField(blank=True)
|
||||
guidelines = models.ManyToManyField("Guideline", null=True, blank=True)
|
||||
law = models.TextField(blank=True)
|
||||
theatre = models.TextField(blank=True, help_text="Spotlight on Theatre text")
|
||||
quick_howto = models.TextField(blank=True)
|
||||
|
|
@ -75,3 +76,17 @@ class BestPracticeImage(models.Model):
|
|||
def __unicode__(self):
|
||||
return self.caption
|
||||
|
||||
class Guideline(models.Model):
|
||||
title = models.CharField(max_length=512)
|
||||
text = models.TextField()
|
||||
|
||||
def __unicode__(self):
|
||||
return self.title
|
||||
|
||||
|
||||
class Glossary(models.Model):
|
||||
term = models.CharField(max_length=256)
|
||||
definition = models.TextField()
|
||||
|
||||
def __unicode__(self):
|
||||
return self.term
|
||||
|
|
|
|||
41
itf/static/js/itf/app.js
Normal file
41
itf/static/js/itf/app.js
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
var app = new Ox.App({
|
||||
apiURL: '/api/',
|
||||
init: 'hello',
|
||||
config: 'site.json' //FIXME: shouldn't need this, get data with 'hello' or 'init'.
|
||||
});
|
||||
|
||||
/*
|
||||
app.api.hell = function() {
|
||||
setTimeout("app.api.hello()", 1000);
|
||||
}
|
||||
*/
|
||||
app.launch(function(data) {
|
||||
Ox.theme("classic");
|
||||
Ox.print(data);
|
||||
|
||||
app.$body = $('body');
|
||||
app.$document = $(document);
|
||||
app.$window = $(window);
|
||||
/*
|
||||
app.user = data.user;
|
||||
app.config = data.config;
|
||||
*/
|
||||
|
||||
/*
|
||||
//FIXME: should this be a nested structure as their representation on the page?
|
||||
app.constructors = ['wrapper', 'headerPanel', 'mainPanel', 'leftPanel', 'cityPicker', 'calendarBox', 'currentEventsList', 'middlePanel', 'middleTopPanel', 'newsfeedBox', 'aboutBox', 'itfBox', 'middleBottomPanel', 'erangBox', 'scriptArchiveBox', 'bestPracticesBox', 'biblioBox', 'offersNeedsBox', 'surveysBox', 'rightPanel', 'searchBox', 'loginBox', 'previewBox', 'footerPanel']
|
||||
*/
|
||||
|
||||
app.$ui = {};
|
||||
/*
|
||||
Ox.each(app.constructors, function(i, v) {
|
||||
app.$ui[v] = app.construct[v]();
|
||||
});
|
||||
*/
|
||||
var wrapper = app.construct.wrapper();
|
||||
app.$body.css({'opacity': 0});
|
||||
wrapper.appendTo(app.$body);
|
||||
app.$body.animate({
|
||||
'opacity': 1
|
||||
}, 2000);
|
||||
});
|
||||
563
itf/static/js/itf/construct.js
Normal file
563
itf/static/js/itf/construct.js
Normal file
|
|
@ -0,0 +1,563 @@
|
|||
|
||||
app.construct = {
|
||||
/*
|
||||
Structure:
|
||||
wrapper
|
||||
headerPanel
|
||||
homeBox
|
||||
searchBox
|
||||
mainPanel
|
||||
leftPanel
|
||||
cityPicker
|
||||
calendarBox
|
||||
currentEventsList
|
||||
middlePanel
|
||||
middleTopPanel
|
||||
newsfeedBox
|
||||
aboutBox
|
||||
itfBox
|
||||
middleMiddlePanel
|
||||
erangBox
|
||||
scriptArchiveBox
|
||||
bestPracticesBox
|
||||
middleBottomPanel
|
||||
biblioBox
|
||||
offersNeedsBox
|
||||
surveysBox
|
||||
rightPanel
|
||||
loginBox
|
||||
previewBox
|
||||
footerPanel
|
||||
*/
|
||||
|
||||
|
||||
'wrapper': function() {
|
||||
var id = 'wrapper';
|
||||
// Constructs overall wrapper for the page, and should be appended to $(body)
|
||||
return app.$ui[id] = new Ox.SplitPanel({
|
||||
id: id,
|
||||
orientation: 'vertical',
|
||||
elements: [
|
||||
{
|
||||
element: app.construct.headerPanel(),
|
||||
size: 40
|
||||
},
|
||||
{
|
||||
element: app.construct.mainPanel(),
|
||||
},
|
||||
{
|
||||
element: app.construct.footerPanel(),
|
||||
size: 40
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
|
||||
/*
|
||||
BEGIN headerPanel
|
||||
*/
|
||||
'headerPanel': function() {
|
||||
var id = 'headerPanel';
|
||||
var p = app.$ui[id] = new Ox.SplitPanel({
|
||||
orientation: 'horizontal',
|
||||
id: id,
|
||||
elements: [
|
||||
{
|
||||
element: app.construct.homeBox(),
|
||||
},
|
||||
{
|
||||
element: app.construct.searchBox(),
|
||||
size: 128
|
||||
|
||||
}
|
||||
]
|
||||
});
|
||||
return p;
|
||||
},
|
||||
|
||||
'homeBox': function() {
|
||||
var id = 'homeBox';
|
||||
var c = app.$ui.homeBox = new Ox.Element({
|
||||
id: id
|
||||
});
|
||||
c.html("This is the header - maybe load from a template?");
|
||||
return c;
|
||||
},
|
||||
|
||||
'searchBox': function() {
|
||||
var id = 'searchBox';
|
||||
var i = app.$ui.searchBox = new Ox.Input({
|
||||
'id': id,
|
||||
'placeholder': 'Search'
|
||||
});
|
||||
i.bindEvent("submit", function(val) {
|
||||
Ox.print("Should be doing a search");
|
||||
});
|
||||
i.css({
|
||||
'marginRight': '15px',
|
||||
'marginTop': '6px'
|
||||
});
|
||||
return i;
|
||||
},
|
||||
|
||||
/*
|
||||
END headerPanel
|
||||
*/
|
||||
|
||||
/*
|
||||
BEGIN mainPanel
|
||||
*/
|
||||
|
||||
'mainPanel': function() {
|
||||
var id = 'mainPanel';
|
||||
var p = app.$ui[id] = new Ox.SplitPanel({
|
||||
id: id,
|
||||
orientation: 'horizontal',
|
||||
elements: [
|
||||
{
|
||||
element: app.construct.leftPanel(),
|
||||
size: 256,
|
||||
resizable: true,
|
||||
resize: [0, 128, 256, 384]
|
||||
},
|
||||
{
|
||||
element: app.construct.middlePanel()
|
||||
// resizable: true
|
||||
},
|
||||
{
|
||||
element: app.construct.rightPanel(),
|
||||
size: 256,
|
||||
resizable: true,
|
||||
resize: [0, 128, 256, 384]
|
||||
}
|
||||
]
|
||||
});
|
||||
return p;
|
||||
},
|
||||
|
||||
/*
|
||||
BEGIN leftPanel
|
||||
*/
|
||||
'leftPanel': function() {
|
||||
var id = 'leftPanel';
|
||||
var p = app.$ui[id] = new Ox.SplitPanel({
|
||||
id: id,
|
||||
orientation: 'vertical',
|
||||
elements: [
|
||||
{
|
||||
element: app.construct.cityPicker(),
|
||||
size: 40
|
||||
},
|
||||
{
|
||||
element: app.construct.calendarBox()
|
||||
},
|
||||
{
|
||||
element: app.construct.currentEventsList(),
|
||||
size: 300
|
||||
}
|
||||
]
|
||||
});
|
||||
return p;
|
||||
},
|
||||
|
||||
'cityPicker': function() {
|
||||
var id = 'cityPicker';
|
||||
var i = app.$ui[id] = new Ox.Input({
|
||||
id: id,
|
||||
placeholder: 'Chose Your City',
|
||||
autocomplete: ['Mumbai', 'Gurgaon', 'Agra', 'Delhi', 'Bangalore', 'Calcutta', 'Hyderabad'],
|
||||
autocompleteSelect: true,
|
||||
autocompleteSelectHighlight: true,
|
||||
autocompleteSelectSubmit: true,
|
||||
autocompleteReplaceCorrect: true
|
||||
});
|
||||
i.bindEvent("submit", function(event, data) {
|
||||
Ox.print(data);
|
||||
// alert(data.value);
|
||||
});
|
||||
return i;
|
||||
},
|
||||
|
||||
'calendarBox': function() {
|
||||
var id = 'calendarBox';
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id
|
||||
});
|
||||
c.html("somehow, the bookmyshow calendar goes here.");
|
||||
return c;
|
||||
},
|
||||
|
||||
'currentEventsList': function() {
|
||||
var id = 'currentEventsList';
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id
|
||||
});
|
||||
c.html("List of current events");
|
||||
return c;
|
||||
},
|
||||
/*
|
||||
END leftPanel
|
||||
*/
|
||||
|
||||
/*
|
||||
BEGIN middlePanel
|
||||
*/
|
||||
'middlePanel': function() {
|
||||
var id = 'middlePanel';
|
||||
var p = app.$ui[id] = new Ox.SplitPanel({
|
||||
orientation: 'vertical',
|
||||
id: id,
|
||||
elements: [
|
||||
{
|
||||
element: app.construct.middleTopPanel(),
|
||||
size: 128,
|
||||
resizable: true,
|
||||
resize: [0, 64, 128, 196, 256],
|
||||
// collapsible: true
|
||||
},
|
||||
{
|
||||
element: app.construct.middleMiddlePanel(),
|
||||
// collapsible: true
|
||||
},
|
||||
{
|
||||
element: app.construct.middleBottomPanel(),
|
||||
size: 128,
|
||||
resizable: true,
|
||||
resize: [0, 64, 128, 196, 256],
|
||||
// collapsible: true
|
||||
}
|
||||
]
|
||||
});
|
||||
return p;
|
||||
},
|
||||
|
||||
/*
|
||||
BEGIN middleTopPanel
|
||||
*/
|
||||
'middleTopPanel': function() {
|
||||
var id = 'middleTopPanel';
|
||||
var p = app.$ui[id] = new Ox.SplitPanel({
|
||||
id: id,
|
||||
orientation: 'horizontal',
|
||||
elements: [
|
||||
{
|
||||
element: app.construct.newsfeedBox(),
|
||||
size: 256,
|
||||
resizable: true,
|
||||
resize: [0,128,196,256,384,512]
|
||||
},
|
||||
{
|
||||
element: app.construct.aboutBox()
|
||||
},
|
||||
{
|
||||
element: app.construct.itfBox(),
|
||||
size: 256,
|
||||
resizable: true,
|
||||
resize: [0,128,196,256,384,512]
|
||||
}
|
||||
]
|
||||
});
|
||||
return p;
|
||||
},
|
||||
|
||||
'newsfeedBox': function() {
|
||||
var id = 'newsfeedBox';
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id,
|
||||
title: 'ITF NewsFeed'
|
||||
});
|
||||
for (var i=0; i<25; i++) {
|
||||
var content = new Ox.Element().html('newsfeed content goes here');
|
||||
c.append(content);
|
||||
}
|
||||
return c;
|
||||
},
|
||||
|
||||
'aboutBox': function() {
|
||||
var id = 'aboutBox';
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id,
|
||||
title: 'About'
|
||||
});
|
||||
c.html("about goes here");
|
||||
return c;
|
||||
},
|
||||
|
||||
'itfBox': function() {
|
||||
var id = 'itfBox';
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id
|
||||
});
|
||||
c.html("about itf goes here");
|
||||
return c;
|
||||
},
|
||||
/*
|
||||
END middleTopPanel
|
||||
*/
|
||||
|
||||
/*
|
||||
BEGIN middleMiddlePanel
|
||||
*/
|
||||
|
||||
'middleMiddlePanel': function() {
|
||||
var id = 'middleMiddlePanel';
|
||||
var p = app.$ui[id] = new Ox.SplitPanel({
|
||||
id: id,
|
||||
orientation: 'horizontal',
|
||||
elements: [
|
||||
{
|
||||
element: app.construct.erangBox(),
|
||||
size: 256,
|
||||
resizable: true,
|
||||
resize: [0,128,196,256,384,512]
|
||||
},
|
||||
{
|
||||
element: app.construct.scriptArchiveBox()
|
||||
},
|
||||
{
|
||||
element: app.construct.bestPracticesBox(),
|
||||
size: 256,
|
||||
resizable: true,
|
||||
resize: [0,128,196,256,384,512]
|
||||
}
|
||||
]
|
||||
});
|
||||
return p;
|
||||
},
|
||||
|
||||
'erangBox': function() {
|
||||
var id = 'erangBox';
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id
|
||||
});
|
||||
c.html("erang goes here");
|
||||
return c;
|
||||
},
|
||||
|
||||
'scriptArchiveBox': function() {
|
||||
var id = 'scriptbankBox';
|
||||
var c = app.$ui[id] = new Ox.ItfBox({
|
||||
'id': id,
|
||||
'title': 'Script Bank',
|
||||
'module': 'scriptbank',
|
||||
'model': 'Script',
|
||||
'info': 'Script Archives are great, etc.'
|
||||
});
|
||||
// c.html("script archive goes here");
|
||||
return c;
|
||||
},
|
||||
|
||||
'bestPracticesBox': function() {
|
||||
var id = 'bestpracticesBox';
|
||||
var title = "Best Practices";
|
||||
var module = "bestpractices";
|
||||
var model = "BestPractice";
|
||||
var info = "Some best practices lorem ipsum";
|
||||
var c = app.$ui[id] = new Ox.ItfBox({
|
||||
'id': id,
|
||||
'title': 'Best Practices',
|
||||
'module': 'bestpractices',
|
||||
'model': 'BestPractice',
|
||||
'info': 'Some best practices lorem ipsum'
|
||||
/*
|
||||
'preview': function(data, callback) {
|
||||
var selectedId = data.ids[0];
|
||||
app.api.preview({
|
||||
'model': model,
|
||||
'module': module,
|
||||
'data': {'id': selectedId}
|
||||
}, callback);
|
||||
}
|
||||
*/
|
||||
});
|
||||
// c.html("best practices goes here");
|
||||
return c;
|
||||
},
|
||||
|
||||
/*
|
||||
END middleMiddlePanel
|
||||
*/
|
||||
|
||||
/*
|
||||
BEGIN middleBottomPanel
|
||||
*/
|
||||
'middleBottomPanel': function() {
|
||||
var id = 'middleBottomPanel';
|
||||
var p = app.$ui[id] = new Ox.SplitPanel({
|
||||
id: id,
|
||||
orientation: 'horizontal',
|
||||
elements: [
|
||||
{
|
||||
element: app.construct.biblioBox(),
|
||||
size: 256,
|
||||
resizable: true,
|
||||
resize: [0,128,196,256,384,512]
|
||||
},
|
||||
{
|
||||
element: app.construct.offersNeedsBox()
|
||||
},
|
||||
{
|
||||
element: app.construct.surveysBox(),
|
||||
size: 256,
|
||||
resizable: true,
|
||||
resize: [0,128,196,256,384,512]
|
||||
}
|
||||
]
|
||||
});
|
||||
return p;
|
||||
},
|
||||
|
||||
'biblioBox': function() {
|
||||
var id = 'biblioBox';
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id
|
||||
});
|
||||
c.html("biblioBox here");
|
||||
return c;
|
||||
},
|
||||
|
||||
'offersNeedsBox': function() {
|
||||
var id = 'offersNeedsBox';
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id
|
||||
});
|
||||
c.html("offers and needs here");
|
||||
return c;
|
||||
},
|
||||
|
||||
'surveysBox': function() {
|
||||
var id = 'surveysBox';
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id
|
||||
});
|
||||
c.html("surveys go here");
|
||||
return c;
|
||||
},
|
||||
|
||||
/*
|
||||
END middleBottomPanel
|
||||
*/
|
||||
|
||||
/*
|
||||
END middlePanel
|
||||
*/
|
||||
|
||||
/*
|
||||
BEGIN rightPanel
|
||||
*/
|
||||
|
||||
'rightPanel': function() {
|
||||
var id = 'rightPanel';
|
||||
var p = app.$ui[id] = new Ox.SplitPanel({
|
||||
id: id,
|
||||
orientation: 'vertical',
|
||||
elements: [
|
||||
{
|
||||
element: app.construct.loginBox(),
|
||||
size: 256
|
||||
},
|
||||
{
|
||||
element: app.construct.previewBox()
|
||||
}
|
||||
]
|
||||
});
|
||||
return p;
|
||||
},
|
||||
|
||||
'loginBox': function() {
|
||||
var id = 'loginBox';
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id
|
||||
});
|
||||
|
||||
/*
|
||||
var registerForm = (function() {
|
||||
var u = ui.accountDialogOptions('register');
|
||||
var btns = u.buttons;
|
||||
var content = u.content;
|
||||
var title = u.title;
|
||||
// debugger;
|
||||
var e = new Ox.Element().html(title).append(content);
|
||||
var btnsWrapper = new Ox.Element().css({'textAlign': 'center', 'marginTop': '4px'});
|
||||
var regBtn = btns[1][1].appendTo(btnsWrapper);
|
||||
var loginBtn = new Ox.Button({
|
||||
id: 'loginBtn',
|
||||
title: 'Login'
|
||||
}).bindEvent("click", function() {
|
||||
// app.$ui.accountDialog = new Ox.Element();
|
||||
var l = ui.accountDialogOptions("login");
|
||||
var loginContent = l.content;
|
||||
var loginSubmitBtn = l.buttons[1][1];
|
||||
var loginTitle = l.title;
|
||||
var d = new Ox.Dialog({
|
||||
id: 'loginDialog',
|
||||
content: loginContent,
|
||||
buttons: [
|
||||
new Ox.Button({
|
||||
id: 'cancel',
|
||||
title: 'Cancel',
|
||||
}).bindEvent("click", function() { d.close(); }),
|
||||
loginSubmitBtn
|
||||
],
|
||||
title: loginTitle
|
||||
});
|
||||
d.open();
|
||||
});
|
||||
loginBtn.appendTo(btnsWrapper);
|
||||
btnsWrapper.appendTo(e);
|
||||
return e;
|
||||
})();
|
||||
|
||||
|
||||
registerForm.appendTo(c);
|
||||
*/
|
||||
/*
|
||||
var $registerTitle = new Ox.Element().html("Register:").appendTo(c);
|
||||
var registerForm = c.$form = new Ox.Form({
|
||||
id: "registerForm",
|
||||
items: $registerFormItems,
|
||||
submit: function(data, callback) {
|
||||
alert(JSON.stringify(data));
|
||||
app.api.register(data, function(result) {
|
||||
alert(JSON.stringify(result));
|
||||
});
|
||||
|
||||
}
|
||||
*/
|
||||
// c.html("login goes here");
|
||||
return c;
|
||||
},
|
||||
|
||||
'previewBox': function() {
|
||||
var id = 'previewBox';
|
||||
var c = app.$ui[id] = new Ox.ItfPreview({
|
||||
id: id
|
||||
});
|
||||
c.$content.html("previews here");
|
||||
return c;
|
||||
},
|
||||
|
||||
/*
|
||||
END rightPanel
|
||||
*/
|
||||
|
||||
/*
|
||||
END mainPanel
|
||||
*/
|
||||
|
||||
/*
|
||||
BEGIN footerPanel
|
||||
*/
|
||||
'footerPanel': function() {
|
||||
var id = 'footerPanel';
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id
|
||||
});
|
||||
c.html("footer goes here");
|
||||
return c;
|
||||
}
|
||||
/*
|
||||
END footerPanel
|
||||
*/
|
||||
}
|
||||
|
||||
456
itf/static/js/itf/forms.js
Normal file
456
itf/static/js/itf/forms.js
Normal file
|
|
@ -0,0 +1,456 @@
|
|||
|
||||
|
||||
|
||||
var $registerFormItems = (function() {
|
||||
var $username = new Ox.Input({
|
||||
'id': 'registerUsername',
|
||||
'autovalidate': autovalidateUsername,
|
||||
'label': 'Username:',
|
||||
'labelWidth': 90,
|
||||
'validate': function(value, callback) {
|
||||
callback({
|
||||
'message': 'Missing Username',
|
||||
'valid': !!value.length
|
||||
});
|
||||
},
|
||||
'width': 256
|
||||
});
|
||||
var $password = new Ox.Input({
|
||||
'id': 'registerPassword',
|
||||
autovalidate: /.+/,
|
||||
label: 'Password:',
|
||||
labelWidth: 90,
|
||||
'type': 'password',
|
||||
'validate': function(value, callback) {
|
||||
callback({
|
||||
'message': 'Missing Password',
|
||||
'valid': !!value.length
|
||||
});
|
||||
},
|
||||
width: 256
|
||||
});
|
||||
|
||||
var $email = new Ox.Input({
|
||||
id: 'registerEmail',
|
||||
'type': 'email',
|
||||
autovalidate: autovalidateEmail,
|
||||
label: 'E-Mail:',
|
||||
labelWidth: 90,
|
||||
width: 256
|
||||
});
|
||||
|
||||
return [$username, $password, $email]
|
||||
})();
|
||||
|
||||
|
||||
var ui = {
|
||||
accountDialog: function(action) {
|
||||
var that = app.$ui.accountDialog = new Ox.Dialog($.extend({
|
||||
height: 256,
|
||||
id: 'accountDialog',
|
||||
minHeight: 256,
|
||||
minWidth: 384,
|
||||
width: 384
|
||||
}, ui.accountDialogOptions(action)))
|
||||
.bindEvent({
|
||||
resize: function(event, data) {
|
||||
var width = data.width - 32;
|
||||
app.$ui.accountForm.items.forEach(function(item) {
|
||||
item.options({width: width});
|
||||
});
|
||||
}
|
||||
});
|
||||
return that;
|
||||
},
|
||||
accountDialogOptions: function(action, value) {
|
||||
Ox.print('ACTION', action)
|
||||
// app.$ui.accountForm && app.$ui.accountForm.remove();
|
||||
var buttons = {
|
||||
login: ['register', 'reset'],
|
||||
register: ['login'],
|
||||
reset: ['login'],
|
||||
resetAndLogin: []
|
||||
},
|
||||
buttonTitle = {
|
||||
login: 'Login',
|
||||
register: 'Register',
|
||||
reset: 'Reset Password',
|
||||
resetAndLogin: 'Reset Password and Login'
|
||||
},
|
||||
dialogText = {
|
||||
login: 'To login to your account, please enter your username and password.',
|
||||
register: 'To create a new account, please choose a username and password, and enter your e-mail address.',
|
||||
reset: 'To reset your password, please enter either your username or your e-mail address.',
|
||||
resetAndLogin: 'To login to your account, please choose a new password, and enter the code that we have just e-mailed to you.'
|
||||
},
|
||||
dialogTitle = {
|
||||
login: 'Login',
|
||||
register: 'Register',
|
||||
reset: 'Reset Password',
|
||||
resetAndLogin: 'Reset Password'
|
||||
};
|
||||
function button(type) {
|
||||
if (type == 'cancel') {
|
||||
return new Ox.Button({
|
||||
id: 'cancel' + Ox.toTitleCase(action),
|
||||
title: 'Cancel'
|
||||
}).bindEvent('click', function() {
|
||||
app.$ui.accountDialog.close();
|
||||
});
|
||||
} else if (type == 'submit') {
|
||||
return new Ox.Button({
|
||||
disabled: true,
|
||||
id: 'submit' + Ox.toTitleCase(action),
|
||||
title: buttonTitle[action]
|
||||
}).bindEvent('click', function() {
|
||||
app.$ui.accountForm.submit();
|
||||
});
|
||||
} else {
|
||||
return new Ox.Button({
|
||||
id: type,
|
||||
title: buttonTitle[type] + '...'
|
||||
}).bindEvent('click', function() {
|
||||
Ox.print('CLICK EVENT', type)
|
||||
app.$ui.accountDialog.options(ui.accountDialogOptions(type));
|
||||
});
|
||||
}
|
||||
}
|
||||
return {
|
||||
buttons: [
|
||||
$.map(buttons[action], function(type) {
|
||||
return button(type);
|
||||
}),
|
||||
[button('cancel'), button('submit')]
|
||||
],
|
||||
content: new Ox.Element('div')
|
||||
.append(
|
||||
new Ox.Element('div')
|
||||
.addClass('OxText')
|
||||
.html(dialogText[action] + '<br/><br/>')
|
||||
)
|
||||
.append(
|
||||
app.$ui.accountForm = ui.accountForm(action, value)
|
||||
),
|
||||
keys: {
|
||||
enter: 'submit' + Ox.toTitleCase(action),
|
||||
escape: 'cancel' + Ox.toTitleCase(action)
|
||||
},
|
||||
title: dialogTitle[action]
|
||||
};
|
||||
},
|
||||
accountForm: function(action, value) {
|
||||
if (app.$ui.accountForm) {
|
||||
app.$ui.accountForm.items.forEach(function(item) {
|
||||
if (item.options('id') == 'usernameOrEmail') {
|
||||
Ox.print('REMOVING')
|
||||
//Ox.Event.unbind('usernameOrEmailSelect')
|
||||
//Ox.Event.unbind('usernameOrEmailSelectMenu')
|
||||
//Ox.Event.unbind('usernameOrEmailInput')
|
||||
}
|
||||
Ox.print('REMOVING ITEM', item.options('id'));
|
||||
// item.remove();
|
||||
});
|
||||
}
|
||||
var items = {
|
||||
'login': ['username', 'password'],
|
||||
'register': ['newUsername', 'password', 'email'],
|
||||
'reset': ['usernameOrEmail'],
|
||||
'resetAndLogin': ['oldUsername', 'newPassword', 'code']
|
||||
},
|
||||
$items = $.map(items[action], function(v) {
|
||||
return item(v, value);
|
||||
}),
|
||||
that = new Ox.Form({
|
||||
id: 'accountForm' + Ox.toTitleCase(action),
|
||||
items: $items,
|
||||
submit: function(data, callback) {
|
||||
if (action == 'login') {
|
||||
pandora.api.login(data, function(result) {
|
||||
if (!result.data.errors) {
|
||||
app.$ui.accountDialog.close();
|
||||
login(result.data);
|
||||
} else {
|
||||
callback([{id: 'password', message: 'Incorrect password'}]);
|
||||
}
|
||||
});
|
||||
} else if (action == 'register') {
|
||||
pandora.api.register(data, function(result) {
|
||||
if (!result.data.errors) {
|
||||
app.$ui.accountDialog.close();
|
||||
login(result.data);
|
||||
ui.accountWelcomeDialog().open();
|
||||
} else {
|
||||
callback([{id: 'password', message: result.data.errors.toString()}]); // fixme
|
||||
}
|
||||
});
|
||||
} else if (action == 'reset') {
|
||||
var usernameOrEmail = data.usernameOrEmail,
|
||||
key = usernameOrEmail[0].id;
|
||||
data = {};
|
||||
data[key] = usernameOrEmail[1];
|
||||
pandora.api.requestToken(data, function(result) {
|
||||
if (!result.data.errors) {
|
||||
app.$ui.accountDialog.options(ui.accountDialogOptions('resetAndLogin', result.data.username));
|
||||
} else {
|
||||
callback([{id: 'usernameOrEmail', message: 'Unknown ' + (key == 'username' ? 'username' : 'e-mail address')}])
|
||||
}
|
||||
});
|
||||
} else if (action == 'resetAndLogin') {
|
||||
pandora.api.resetPassword(data, function(result) {
|
||||
if (!result.data.errors) {
|
||||
app.$ui.accountDialog.close();
|
||||
login(result.data);
|
||||
} else {
|
||||
callback([{id: 'code', message: 'Incorrect code'}]);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}).bindEvent({
|
||||
submit: function(event, data) {
|
||||
|
||||
},
|
||||
validate: function(event, data) {
|
||||
Ox.print('FORM VALIDATE', data)
|
||||
app.$ui.accountDialog[
|
||||
(data.valid ? 'enable' : 'disable') + 'Button'
|
||||
]('submit' + Ox.toTitleCase(action));
|
||||
}
|
||||
});
|
||||
that.items = $items;
|
||||
function item(type, value) {
|
||||
if (type == 'code') {
|
||||
return new Ox.Input({
|
||||
autovalidate: autovalidateCode,
|
||||
id: 'code',
|
||||
label: 'Code',
|
||||
labelWidth: 120,
|
||||
validate: function(value, callback) {
|
||||
callback({
|
||||
message: 'Missing code',
|
||||
valid: !!value.length
|
||||
});
|
||||
},
|
||||
width: 352
|
||||
});
|
||||
} else if (type == 'email') {
|
||||
return new Ox.Input({
|
||||
autovalidate: autovalidateEmail,
|
||||
id: 'email',
|
||||
label: 'E-Mail Address',
|
||||
labelWidth: 90,
|
||||
type: 'email',
|
||||
validate: validateUser('email'),
|
||||
width: 250
|
||||
});
|
||||
} else if (type == 'newPassword') {
|
||||
return new Ox.Input({
|
||||
autovalidate: /.+/,
|
||||
id: 'password',
|
||||
label: 'New Password',
|
||||
labelWidth: 90,
|
||||
type: 'password',
|
||||
validate: function(value, callback) {
|
||||
callback({
|
||||
message: 'Missing password',
|
||||
valid: value.length > 0
|
||||
});
|
||||
},
|
||||
width: 250
|
||||
});
|
||||
} else if (type == 'newUsername') {
|
||||
return new Ox.Input({
|
||||
autovalidate: autovalidateUsername,
|
||||
id: 'username',
|
||||
label: 'Username',
|
||||
labelWidth: 90,
|
||||
validate: validateUser('username'),
|
||||
width: 250
|
||||
});
|
||||
} else if (type == 'oldUsername') {
|
||||
return new Ox.Input({
|
||||
disabled: true,
|
||||
id: 'username',
|
||||
label: 'Username',
|
||||
labelWidth: 90,
|
||||
value: value,
|
||||
width: 250
|
||||
});
|
||||
} else if (type == 'password') {
|
||||
return new Ox.Input({
|
||||
autovalidate: /.+/,
|
||||
id: 'password',
|
||||
label: 'Password',
|
||||
labelWidth: 90,
|
||||
type: 'password',
|
||||
validate: function(value, callback) {
|
||||
callback({
|
||||
message: 'Missing Password',
|
||||
valid: value.length > 0
|
||||
});
|
||||
},
|
||||
width: 250
|
||||
});
|
||||
} else if (type == 'username') {
|
||||
return new Ox.Input({
|
||||
autovalidate: autovalidateUsername,
|
||||
id: 'username',
|
||||
label: 'Username',
|
||||
labelWidth: 90,
|
||||
validate: validateUser('username', true),
|
||||
width: 250
|
||||
});
|
||||
} else if (type == 'usernameOrEmail') {
|
||||
return new Ox.FormElementGroup({
|
||||
id: 'usernameOrEmail',
|
||||
elements: [
|
||||
app.$ui.usernameOrEmailSelect = new Ox.Select({
|
||||
id: 'usernameOrEmailSelect',
|
||||
items: [
|
||||
{id: 'username', title: 'Username'},
|
||||
{id: 'email', title: 'E-Mail Address'},
|
||||
],
|
||||
overlap: 'right',
|
||||
width: 120
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(event, data) {
|
||||
var selected = data.selected[0].id;
|
||||
app.$ui.usernameOrEmailInput.options({
|
||||
autovalidate: selected == 'username' ? autovalidateUsername : autovalidateEmail,
|
||||
validate: validateUser(selected, true),
|
||||
value: ''
|
||||
}).focus();
|
||||
}
|
||||
}),
|
||||
app.$ui.usernameOrEmailInput = new Ox.Input({
|
||||
autovalidate: autovalidateUsername,
|
||||
id: 'usernameOrEmailInput',
|
||||
validate: validateUser('username', true),
|
||||
width: 232
|
||||
})
|
||||
],
|
||||
separators: [
|
||||
{title: '', width: 0}
|
||||
]
|
||||
});
|
||||
}
|
||||
}
|
||||
return that;
|
||||
},
|
||||
accountLogoutDialog: function() {
|
||||
var that = new Ox.Dialog({
|
||||
buttons: [
|
||||
new Ox.Button({
|
||||
id: 'cancel',
|
||||
title: 'Cancel'
|
||||
}).bindEvent('click', function() {
|
||||
that.close();
|
||||
app.$ui.mainMenu.getItem('loginlogout').toggleTitle();
|
||||
}),
|
||||
new Ox.Button({
|
||||
id: 'logout',
|
||||
title: 'Logout'
|
||||
}).bindEvent('click', function() {
|
||||
that.close();
|
||||
pandora.api.logout({}, function(result) {
|
||||
logout(result.data);
|
||||
});
|
||||
})
|
||||
],
|
||||
content: new Ox.Element('div').html('Are you sure you want to logout?'),
|
||||
height: 160,
|
||||
keys: {enter: 'logout', escape: 'cancel'},
|
||||
title: 'Logout',
|
||||
width: 300
|
||||
});
|
||||
return that;
|
||||
},
|
||||
accountWelcomeDialog: function() {
|
||||
var that = new Ox.Dialog({
|
||||
buttons: [
|
||||
[
|
||||
new Ox.Button({
|
||||
id: 'preferences',
|
||||
title: 'Preferences...'
|
||||
}).bindEvent('click', function() {
|
||||
that.close();
|
||||
})
|
||||
],
|
||||
[
|
||||
new Ox.Button({
|
||||
id: 'close',
|
||||
title: 'Close'
|
||||
}).bindEvent('click', function() {
|
||||
that.close();
|
||||
})
|
||||
]
|
||||
],
|
||||
content: new Ox.Element('div').html('Welcome, ' + app.user.username + '!<br/><br/>Your account has been created.'),
|
||||
height: 160,
|
||||
keys: {enter: 'close', escape: 'close'},
|
||||
title: 'Welcome to ' + app.config.site.name,
|
||||
width: 300
|
||||
});
|
||||
return that;
|
||||
}
|
||||
}
|
||||
|
||||
//FIXME: move these somewhere.
|
||||
function autovalidateCode(value, blur, callback) {
|
||||
value = $.map(value.toUpperCase().split(''), function(v) {
|
||||
return /[0-9A-Z]/(v) ? v : null;
|
||||
}).join('');
|
||||
callback(value);
|
||||
}
|
||||
|
||||
function autovalidateEmail(value, blur, callback) {
|
||||
value = $.map(value.toLowerCase().split(''), function(v, i) {
|
||||
return /[0-9a-z\.\+\-_@]/(v) ? v : null;
|
||||
}).join('');
|
||||
callback(value);
|
||||
}
|
||||
|
||||
function autovalidateUsername(value, blur, callback) {
|
||||
var length = value.length;
|
||||
value = $.map(value.toLowerCase().split(''), function(v, i) {
|
||||
if (new RegExp('[0-9a-z' + ((i == 0 || (i == length - 1 && blur)) ? '' : '\-_') + ']')(v)) {
|
||||
return v
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}).join('');
|
||||
$.each(['--', '-_', '_-', '__'], function(i, v) {
|
||||
while (value.indexOf(v) > -1) {
|
||||
value = value.replace(new RegExp(v, 'g'), v[0]);
|
||||
}
|
||||
})
|
||||
callback(value);
|
||||
}
|
||||
|
||||
function validateUser(key, existing) {
|
||||
existing = existing || false;
|
||||
var string = key == 'username' ? 'username' : 'e-mail address';
|
||||
return function(value, callback) {
|
||||
var valid = key == 'username' ? !!value.length : Ox.isValidEmail(value);
|
||||
valid ? pandora.api.findUser({
|
||||
key: key,
|
||||
value: value,
|
||||
operator: '='
|
||||
}, function(result) {
|
||||
var valid = existing == !!result.data.users.length;
|
||||
Ox.print(existing, result.data.users)
|
||||
callback({
|
||||
message: existing ?
|
||||
'Unknown ' + string :
|
||||
string[0].toUpperCase() + string.substr(1) + ' already exists',
|
||||
valid: valid
|
||||
});
|
||||
}) : callback({
|
||||
message: (!value.length ? 'Missing' : 'Invalid') + ' ' + string,
|
||||
valid: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
137
itf/static/js/itf/query.js
Normal file
137
itf/static/js/itf/query.js
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
app.Query = (function() {
|
||||
|
||||
function constructFind(query) {
|
||||
Ox.print('cF', query)
|
||||
return /*encodeURI(*/$.map(query.conditions, function(v, i) {
|
||||
if (!Ox.isUndefined(v.conditions)) {
|
||||
return '[' + constructFind(v) + ']';
|
||||
} else {
|
||||
return v.value !== '' ? v.key + (v.key ? ':' : '') + constructValue(v.value, v.operator) : null;
|
||||
}
|
||||
}).join(query.operator)/*)*/;
|
||||
}
|
||||
|
||||
function constructValue(value, operator) {
|
||||
operator = operator.replace('=', '^$');
|
||||
if (operator.indexOf('$') > -1) {
|
||||
value = operator.substr(0, operator.length - 1) + value + '$'
|
||||
} else {
|
||||
value = operator + value;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function mergeFind() {
|
||||
}
|
||||
|
||||
function parseFind(str) {
|
||||
var find = {
|
||||
conditions: [],
|
||||
operator: ''
|
||||
},
|
||||
subconditions = str.match(/\[.*?\]/g) || [];
|
||||
$.each(subconditions, function(i, v) {
|
||||
subconditions[i] = v.substr(1, v.length - 2);
|
||||
str = str.replace(v, '[' + i + ']');
|
||||
});
|
||||
if (str.indexOf(',') > -1) {
|
||||
find.operator = '&';
|
||||
} else if (str.indexOf('|') > -1) {
|
||||
find.operator = '|';
|
||||
}
|
||||
Ox.print('pF', str, find.operator)
|
||||
find.conditions = $.map(find.operator === '' ? [str] : str.split(find.operator == '&' ? ',' : '|'), function(v, i) {
|
||||
Ox.print('v', v)
|
||||
var ret, kv;
|
||||
if (v[0] == '[') {
|
||||
Ox.print('recursion', subconditions)
|
||||
ret = parseFind(subconditions[parseInt(v.substr(1, v.length - 2))]);
|
||||
} else {
|
||||
kv = ((v.indexOf(':') > - 1 ? '' : ':') + v).split(':');
|
||||
ret = $.extend({
|
||||
key: kv[0]
|
||||
}, parseValue(kv[1]));
|
||||
}
|
||||
return ret;
|
||||
});
|
||||
return find;
|
||||
}
|
||||
|
||||
function parseValue(str) {
|
||||
var value = {
|
||||
value: decodeURI(str),
|
||||
operator: ''
|
||||
};
|
||||
if (value.value[0] == '!') {
|
||||
value.operator = '!'
|
||||
value.value = value.value.substr(1);
|
||||
}
|
||||
if ('^<>'.indexOf(value.value[0]) > -1) {
|
||||
value.operator += value.value[0];
|
||||
value.value = value.value.substr(1);
|
||||
}
|
||||
if (value.value.substr(-1) == '$') {
|
||||
value.operator += '$';
|
||||
value.value = value.value.substr(0, value.value.length - 1);
|
||||
}
|
||||
value.operator = value.operator.replace('^$', '=');
|
||||
return value;
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
fromString: function(str) {
|
||||
var query = Ox.unserialize(str),
|
||||
sort = [];
|
||||
if ('find' in query) {
|
||||
app.user.ui.findQuery = parseFind(query.find);
|
||||
Ox.print('user.ui.findQuery', app.user.ui.findQuery)
|
||||
}
|
||||
if ('sort' in query) {
|
||||
sort = query.sort.split(',')
|
||||
app.user.ui.sort = $.map(query.sort.split(','), function(v, i) {
|
||||
var hasOperator = '+-'.indexOf(v[0]) > -1,
|
||||
key = hasOperator ? query.sort.substr(1) : query.sort,
|
||||
operator = hasOperator ? v[0].replace('+', '') : Ox.getObjectById(app.config.sortKeys, key).operator;
|
||||
return {
|
||||
key: key,
|
||||
operator: operator
|
||||
};
|
||||
});
|
||||
}
|
||||
if ('view' in query) {
|
||||
app.user.ui.listView = query.view;
|
||||
}
|
||||
},
|
||||
|
||||
toObject: function(groupId) {
|
||||
Ox.print('tO', app.user.ui.findQuery.conditions)
|
||||
// the inner $.merge() creates a clone
|
||||
var conditions = $.merge($.merge([], app.user.ui.listQuery.conditions), app.user.ui.findQuery.conditions);
|
||||
$.merge(conditions, app.ui.groups ? $.map(app.ui.groups, function(v, i) {
|
||||
if (v.id != groupId && v.query.conditions.length) {
|
||||
return v.query.conditions.length == 1 ?
|
||||
v.query.conditions : v.query;
|
||||
}
|
||||
}) : []),
|
||||
operator = conditions.length < 2 ? '' : ','; // fixme: should be &
|
||||
Ox.print('>>', groupId, app.user.ui.find, conditions);
|
||||
return {
|
||||
conditions: conditions,
|
||||
operator: operator
|
||||
};
|
||||
},
|
||||
|
||||
toString: function() {
|
||||
Ox.print('tS', app.user.ui.find)
|
||||
return Ox.serialize({
|
||||
find: constructFind(app.Query.toObject()),
|
||||
sort: app.user.ui.sort[0].operator + app.user.ui.sort[0].key,
|
||||
view: app.user.ui.listView
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
305
itf/static/js/itf/widgets.js
Normal file
305
itf/static/js/itf/widgets.js
Normal file
|
|
@ -0,0 +1,305 @@
|
|||
|
||||
Ox.ItfBox = function(options, self) {
|
||||
var self = self || {};
|
||||
var that = new Ox.Element(options, self)
|
||||
.defaults({
|
||||
'title': '',
|
||||
'extraButtons': []
|
||||
})
|
||||
.options(options);
|
||||
var title = self.options.title;
|
||||
var $titlebar = new Ox.Bar({
|
||||
orientation: 'horizontal',
|
||||
size: 18
|
||||
})
|
||||
// .dblclick(dblclickTitlebar)
|
||||
.appendTo(that);
|
||||
|
||||
|
||||
var $title = new Ox.Element()
|
||||
.addClass('OxTitle')
|
||||
.html(title/*.toUpperCase()*/)
|
||||
.appendTo($titlebar);
|
||||
|
||||
|
||||
var $search = new Ox.Input({
|
||||
'placeholder': 'Search',
|
||||
})
|
||||
.css({'width': '128px', 'marginLeft': 'auto', 'marginRight': 'auto'})
|
||||
.appendTo(that)
|
||||
.hide()
|
||||
.bindEvent("submit", function(value) {
|
||||
app.$ui[options.boxId].$loading.start();
|
||||
$list.options("request", function(data, callback) {
|
||||
app.$ui[options.boxId].$loading.stop();
|
||||
return app.api.find(getQueryParams(data), callback);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
that.search = function(word) {
|
||||
$search.options("value", word);
|
||||
$search.triggerEvent("submit");
|
||||
}
|
||||
|
||||
var $buttons = new Ox.Element().appendTo($title).css({'position': 'absolute', 'top': '1px', 'right': '1px'});
|
||||
|
||||
|
||||
|
||||
var $additionalButtons = self.options.extraButtons;
|
||||
if ($additionalButtons.length > 0) {
|
||||
$additionalButtons.appendTo($buttons);
|
||||
}
|
||||
var $infoBtn = new Ox.Button({
|
||||
id: options.id + "InfoBtn",
|
||||
style: 'symbold',
|
||||
title: 'info',
|
||||
type: 'image',
|
||||
tooltip: 'More info about ' + options.title
|
||||
})
|
||||
.appendTo($buttons)
|
||||
.bindEvent("click", function() {
|
||||
var info = options.info;
|
||||
var d = new Ox.Dialog({
|
||||
buttons: [
|
||||
new Ox.Button({
|
||||
id: 'cancel',
|
||||
title: 'Close',
|
||||
})
|
||||
.bindEvent("click", function() { d.close(); })
|
||||
],
|
||||
content: new Ox.Element().html(info),
|
||||
title: options.title
|
||||
})
|
||||
.open();
|
||||
});
|
||||
|
||||
var $searchBtn = new Ox.Button({
|
||||
id: options.id + 'SearchBtn',
|
||||
style: 'symbol',
|
||||
title: 'find',
|
||||
type: 'image',
|
||||
tooltip: 'Search'
|
||||
})
|
||||
.bindEvent("click", function() {
|
||||
if ($search.is(":visible")) {
|
||||
$search.slideUp();
|
||||
} else {
|
||||
$search.slideDown();
|
||||
$search.focus();
|
||||
}
|
||||
})
|
||||
.appendTo($buttons);
|
||||
|
||||
|
||||
var $menuBtn = new Ox.Button({
|
||||
id: options.id + 'MenuBtn',
|
||||
style: 'symbol',
|
||||
title: 'collapse',
|
||||
type: 'image',
|
||||
tooltip: 'Show Menu'
|
||||
}).appendTo($buttons);
|
||||
|
||||
that.$loading = new Ox.LoadingIcon().appendTo($buttons);
|
||||
|
||||
var $menu = new Ox.Menu({
|
||||
id: options.id + 'Menu',
|
||||
element: $menuBtn,
|
||||
items: [
|
||||
{
|
||||
id: 'SortBy',
|
||||
title: 'Sort By',
|
||||
items: [
|
||||
{
|
||||
'group': 'sortGroup',
|
||||
'min': 1,
|
||||
'max': 1,
|
||||
items: [
|
||||
{'id': 'sort_added_descending', title: 'Added (Descending)', checked: true},
|
||||
{'id': 'sort_added_ascending', title: 'Added (Ascending)'},
|
||||
{'id': 'sort_title_ascending', title: 'Title (Ascending)'},
|
||||
{'id': 'sort_title_descending', title: 'Title (Descending)'},
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{id: 'Test2', title: 'Menu Item 2'}
|
||||
]
|
||||
})
|
||||
.bindEvent("change", function(e, data) {
|
||||
if (data.id === 'sortGroup') {
|
||||
var checked = data.checked[0];
|
||||
var checkedId = checked.id;
|
||||
var checkedField = checkedId.split("_")[1];
|
||||
var operator = checkedId.split("_")[2] == "ascending" ? "+" : "-";
|
||||
$list.sortList(checkedField, operator);
|
||||
}
|
||||
});
|
||||
|
||||
// var $menu = new Ox.Menu({
|
||||
// id: options.id + 'Menu',
|
||||
// element: $menuBtn,
|
||||
// items: [
|
||||
// {
|
||||
// 'group': 'sortGroup',
|
||||
// 'min': 1,
|
||||
// 'max': 1,
|
||||
// items: [
|
||||
// {'id': 'sortTitleAscending', title: 'Title (Ascending)', checked: true},
|
||||
// {'id': 'sortTitleDescending', title: 'Title (Descending)'},
|
||||
// {'id': 'sortTitleAscendingFoo', title: 'Title (Ascending)'},
|
||||
// {'id': 'sortTitleDescendingFoo', title: 'Title (Descending)'},
|
||||
// ]
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {id: 'Test2', title: 'Menu Item 2'}
|
||||
// ]
|
||||
// })
|
||||
// .bindEvent("change", function() {
|
||||
// alert("foo");
|
||||
// });
|
||||
|
||||
//
|
||||
|
||||
$menuBtn.bindEvent("click", function() {
|
||||
$menu.showMenu();
|
||||
});
|
||||
|
||||
function getQueryParams(data) {
|
||||
// Ox.print("SEARCHVAL", $search.val());
|
||||
return $.extend(data, {
|
||||
'search': $search.value() == 'Search' ? '' : $search.value(),
|
||||
'model': options.model,
|
||||
'module': options.module
|
||||
});
|
||||
}
|
||||
|
||||
var $listContainer = new Ox.Element()
|
||||
.appendTo(that)
|
||||
.css({position: 'relative', height: '100%'});
|
||||
|
||||
var listOptions = $.extend(options, {
|
||||
'width': 256,
|
||||
// 'itemHeight': 16,
|
||||
// 'itemWidth': 250,
|
||||
// 'orientation': 'horizontal',
|
||||
'request': function(data, callback) {
|
||||
return app.api.find(getQueryParams(data), callback)
|
||||
},
|
||||
'id': options.id + 'List',
|
||||
'boxId': options.id,
|
||||
|
||||
|
||||
/*
|
||||
'construct': function(data) {
|
||||
var $a = $('<a />').attr("href", "/" + options.module.toLowerCase() + "/" + data.id).text(data.title);
|
||||
var $item = $('<div />').addClass('OxTarget').append($a);
|
||||
return $item;
|
||||
},
|
||||
*/
|
||||
'max': 1,
|
||||
'columns': [
|
||||
{
|
||||
align: 'left',
|
||||
id: 'title',
|
||||
operator: '-',
|
||||
unique: false,
|
||||
visible: true,
|
||||
width: 230
|
||||
},
|
||||
{
|
||||
id: 'id',
|
||||
visible: false,
|
||||
unique: true
|
||||
}
|
||||
],
|
||||
'sort': [
|
||||
{
|
||||
key: 'added',
|
||||
operator: '-'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
var $list = that.$list = new Ox.ItfList(listOptions)
|
||||
.appendTo($listContainer);
|
||||
|
||||
return that;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Ox.ItfList = function(options, self) {
|
||||
var self = self || {};
|
||||
var that = new Ox.TextList(options, self);
|
||||
that.bindEvent("select", function(e, data) {
|
||||
if (data.ids.length === 0) {
|
||||
app.$ui.previewBox.$content.html('');
|
||||
return;
|
||||
}
|
||||
app.$ui[options.boxId].$loading.start();
|
||||
// debugger;
|
||||
app.api.preview({
|
||||
model: options.model,
|
||||
module: options.module,
|
||||
id: data.ids[0]
|
||||
}, function(response) {
|
||||
// alert(JSON.stringify(response.data.data));
|
||||
app.$ui[options.boxId].$loading.stop();
|
||||
var html = $.tmpl(response['template'], response['data']);
|
||||
app.$ui.previewBox.$content.html(html);
|
||||
});
|
||||
});
|
||||
that.bindEvent("open", function(e, data) {
|
||||
// alert(JSON.stringify(data));
|
||||
app.$ui[options.boxId].$loading.start();
|
||||
app.api.info({
|
||||
model: options.model,
|
||||
module: options.module,
|
||||
id: data.ids[0]
|
||||
}, function(response) {
|
||||
app.$ui[options.boxId].$loading.stop();
|
||||
var html = $.tmpl(response['template'], response['data']);
|
||||
// alert(html);
|
||||
var d = new Ox.Dialog({
|
||||
buttons: [
|
||||
new Ox.Button({
|
||||
id: 'cancel',
|
||||
title: 'Close',
|
||||
})
|
||||
.bindEvent("click", function() { d.close(); })
|
||||
],
|
||||
content: new Ox.Element().append(html),
|
||||
title: options.title + ": " + response.data.title,
|
||||
width: 800,
|
||||
height: 500
|
||||
})
|
||||
.open();
|
||||
// alert(response);
|
||||
});
|
||||
});
|
||||
return that;
|
||||
}
|
||||
|
||||
Ox.ItfCalendar = function(options, self) {
|
||||
var self = self || {};
|
||||
var that = new Ox.Element(options, self);
|
||||
var $titleBar = new Ox.Bar({
|
||||
'size': 'small'
|
||||
}).addClass('OxTitleBar').appendTo(that);
|
||||
var $title = new Ox.Element().html("Calendar").appendTo($titleBar);
|
||||
return that;
|
||||
}
|
||||
|
||||
Ox.ItfPreview = function(options, self) {
|
||||
var self = self || {};
|
||||
var that = new Ox.Element(options, self);
|
||||
that.$content = new Ox.Element().appendTo(that);
|
||||
that.$loading = new Ox.LoadingIcon().appendTo(that);
|
||||
return that;
|
||||
}
|
||||
|
||||
ITF.templates = {};
|
||||
|
||||
|
|
@ -19,6 +19,11 @@ if(typeof(console)=='undefined') {
|
|||
<script type="text/javascript" src="/static/oxjs/build/js/ox.js"></script>
|
||||
<script type="text/javascript" src="/static/oxjs/build/js/ox.ui.js"></script>
|
||||
<script type="text/javascript" src="/static/js/itf/itf.js"></script>
|
||||
<script type="text/javascript" src="/static/js/itf/app.js"></script>
|
||||
<script type="text/javascript" src="/static/js/itf/query.js"></script>
|
||||
<script type="text/javascript" src="/static/js/itf/construct.js"></script>
|
||||
<script type="text/javascript" src="/static/js/itf/widgets.js"></script>
|
||||
<script type="text/javascript" src="/static/js/itf/forms.js"></script>
|
||||
<script type="text/javascript" src="/static/js/bookmyshow.js"></script>
|
||||
</head>
|
||||
<body></body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user