Settings
Movie List Directory selection
This commit is contained in:
Ruud
@@ -0,0 +1,8 @@
|
||||
Page.Log = new Class({
|
||||
|
||||
Extends: PageBase,
|
||||
|
||||
name: 'log',
|
||||
title: 'Show recent logs.'
|
||||
|
||||
})
|
||||
@@ -0,0 +1,8 @@
|
||||
Page.Manage = new Class({
|
||||
|
||||
Extends: PageBase,
|
||||
|
||||
name: 'manage',
|
||||
title: 'Do stuff to your existing movies!'
|
||||
|
||||
})
|
||||
@@ -0,0 +1,426 @@
|
||||
Page.Settings = new Class({
|
||||
|
||||
Extends: PageBase,
|
||||
|
||||
name: 'settings',
|
||||
title: 'Change settings.',
|
||||
|
||||
groups: {},
|
||||
|
||||
open: function(action, params){
|
||||
var self = this
|
||||
//p('open config', action, params)
|
||||
|
||||
if(!self.data)
|
||||
self.getData(self.create.bind(self))
|
||||
else
|
||||
self.openTab(action);
|
||||
},
|
||||
|
||||
openTab: function(action){
|
||||
var self = this;
|
||||
|
||||
if(self.current)
|
||||
self.toggleTab(self.current, true);
|
||||
|
||||
self.toggleTab(action)
|
||||
self.current = action;
|
||||
|
||||
},
|
||||
|
||||
toggleTab: function(tab, hide){
|
||||
var self = this;
|
||||
|
||||
var a = hide ? 'removeClass' : 'addClass';
|
||||
var c = 'active';
|
||||
|
||||
var g = self.groups[tab] || self.groups.general
|
||||
g.tab[a](c);
|
||||
g.group[a](c);
|
||||
|
||||
},
|
||||
|
||||
getData: function(onComplete){
|
||||
var self = this;
|
||||
|
||||
if(onComplete)
|
||||
self.api().request('settings', {
|
||||
'useSpinner': true,
|
||||
'spinnerOptions': {
|
||||
'target': self.el
|
||||
},
|
||||
'onComplete': function(json){
|
||||
self.data = json;
|
||||
onComplete(json);
|
||||
}
|
||||
})
|
||||
|
||||
return self.data;
|
||||
},
|
||||
|
||||
getValue: function(section, name){
|
||||
var self = this;
|
||||
try {
|
||||
return self.data.values[section][name] || '';
|
||||
}
|
||||
catch(e){
|
||||
return ''
|
||||
}
|
||||
},
|
||||
|
||||
create: function(json){
|
||||
var self = this
|
||||
|
||||
self.el.adopt(
|
||||
self.tabs = new Element('ul.tabs'),
|
||||
self.containers = new Element('form.uniForm.containers')
|
||||
);
|
||||
|
||||
Object.each(json.sections, function(section, section_name){
|
||||
|
||||
// Create tab
|
||||
var tab = new Element('li').adopt(
|
||||
new Element('a', {
|
||||
'href': '/'+self.name+'/'+section.tab+'/',
|
||||
'text': section.tab.capitalize()
|
||||
})
|
||||
).inject(self.tabs);
|
||||
var group = new Element('div.group').inject(self.containers);
|
||||
|
||||
self.groups[section.tab] = {
|
||||
'tab': tab,
|
||||
'group': group
|
||||
}
|
||||
|
||||
// Add section
|
||||
var fieldset = new Element('fieldset.inlineLabels').inject(group)
|
||||
Object.each(section.options, function(option, option_name){
|
||||
var class_name = (option.type || 'input').capitalize();
|
||||
var input = new Option[class_name](self, section_name, option_name, option);
|
||||
input.inject(fieldset);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
self.openTab();
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
var OptionBase = new Class({
|
||||
|
||||
Implements: [Options, Events],
|
||||
|
||||
klass: 'textInput',
|
||||
focused_class : 'focused',
|
||||
save_on_change: true,
|
||||
|
||||
initialize: function(parent, section, name, options){
|
||||
var self = this
|
||||
self.setOptions(options)
|
||||
|
||||
self.page = parent;
|
||||
self.section = section;
|
||||
self.name = name;
|
||||
|
||||
self.createBase();
|
||||
self.create();
|
||||
self.createHint();
|
||||
self.setAdvanced();
|
||||
|
||||
// Add focus events
|
||||
self.input.addEvents({
|
||||
'change': self.changed.bind(self),
|
||||
'keyup': self.changed.bind(self),
|
||||
'focus': function() {
|
||||
self.el.addClass(self.focused_class);
|
||||
},
|
||||
'blur' : function() {
|
||||
self.el.removeClass(self.focused_class);
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Create the element
|
||||
*/
|
||||
createBase: function(){
|
||||
var self = this
|
||||
self.el = new Element('div.ctrlHolder')
|
||||
},
|
||||
|
||||
create: function(){},
|
||||
|
||||
setAdvanced: function(){
|
||||
this.el.addClass(this.options.advanced ? 'advanced': '')
|
||||
},
|
||||
|
||||
createHint: function(){
|
||||
var self = this;
|
||||
if(self.options.description)
|
||||
new Element('p.formHint', {
|
||||
'text': self.options.description
|
||||
}).inject(self.el);
|
||||
},
|
||||
|
||||
// Element has changed, do something
|
||||
changed: function(){
|
||||
var self = this;
|
||||
|
||||
if(self.getValue() != self.previous_value){
|
||||
if(self.save_on_change){
|
||||
if(self.changed_timer) clearTimeout(self.changed_timer);
|
||||
self.changed_timer = self.save.delay(300, self);
|
||||
}
|
||||
self.fireEvent('change')
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
save: function(){
|
||||
var self = this;
|
||||
|
||||
self.api().request('setting.save', {
|
||||
'data': {
|
||||
'section': self.section,
|
||||
'name': self.name,
|
||||
'value': self.getValue()
|
||||
},
|
||||
'useSpinner': true,
|
||||
'spinnerOptions': {
|
||||
'target': self.el
|
||||
},
|
||||
'onComplete': self.saveCompleted.bind(self)
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
saveCompleted: function(json){
|
||||
var self = this;
|
||||
|
||||
var sc = json.success ? 'save_success' : 'save_failed';
|
||||
|
||||
self.previous_value = self.getValue();
|
||||
self.el.addClass(sc);
|
||||
|
||||
(function(){
|
||||
self.el.removeClass(sc);
|
||||
}).delay(3000, self);
|
||||
},
|
||||
|
||||
setName: function(name){
|
||||
this.name = name;
|
||||
},
|
||||
|
||||
postName: function(){
|
||||
var self = this;
|
||||
return self.section +'['+self.name+']';
|
||||
},
|
||||
|
||||
getValue: function(){
|
||||
var self = this;
|
||||
return self.input.get('value');
|
||||
},
|
||||
|
||||
getSettingValue: function(){
|
||||
var self = this;
|
||||
return self.page.getValue(self.section, self.name);
|
||||
},
|
||||
|
||||
api: function(){
|
||||
return this.page.api();
|
||||
},
|
||||
|
||||
inject: function(el, position){
|
||||
this.el.inject(el, position);
|
||||
return this.el;
|
||||
},
|
||||
|
||||
toElement: function(){
|
||||
return this.el;
|
||||
}
|
||||
})
|
||||
|
||||
var Option = {}
|
||||
Option.String = new Class({
|
||||
Extends: OptionBase,
|
||||
|
||||
type: 'input',
|
||||
|
||||
create: function(){
|
||||
var self = this
|
||||
|
||||
self.el.adopt(
|
||||
new Element('label', {
|
||||
'text': self.options.label
|
||||
}),
|
||||
self.input = new Element('input', {
|
||||
'name': self.postName(),
|
||||
'value': self.getSettingValue()
|
||||
})
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
Option.Dropdown = new Class({
|
||||
Extends: OptionBase,
|
||||
|
||||
create: function(){
|
||||
var self = this
|
||||
|
||||
new Element('label', {
|
||||
'text': self.options.label
|
||||
}).adopt(
|
||||
self.input = new Element('select', {
|
||||
'name': self.postName()
|
||||
})
|
||||
).inject(self.el)
|
||||
|
||||
Object.each(self.options.values, function(label, value){
|
||||
new Element('option', {
|
||||
'text': label,
|
||||
'value': value
|
||||
}).inject(self.input)
|
||||
})
|
||||
|
||||
self.input.set('value', self.getSettingValue());
|
||||
}
|
||||
});
|
||||
|
||||
Option.Checkbox = new Class({
|
||||
Extends: OptionBase,
|
||||
|
||||
type: 'checkbox',
|
||||
|
||||
create: function(){
|
||||
var self = this;
|
||||
|
||||
new Element('label', {
|
||||
'text': self.options.label
|
||||
}).adopt(
|
||||
self.input = new Element('input', {
|
||||
'type': 'checkbox',
|
||||
'value': self.getSettingValue(),
|
||||
'checked': self.getSettingValue() !== undefined
|
||||
})
|
||||
).inject(self.el);
|
||||
}
|
||||
});
|
||||
|
||||
Option.Bool = new Class({
|
||||
Extends: Option.Checkbox
|
||||
});
|
||||
|
||||
Option.Int = new Class({
|
||||
Extends: Option.String
|
||||
});
|
||||
|
||||
Option.Directory = new Class({
|
||||
|
||||
Extends: OptionBase,
|
||||
|
||||
type: 'span',
|
||||
browser: '',
|
||||
save_on_change: false,
|
||||
|
||||
create: function(){
|
||||
var self = this;
|
||||
|
||||
|
||||
self.el.adopt(
|
||||
new Element('label', {
|
||||
'text': self.options.label
|
||||
}),
|
||||
self.input = new Element('span', {
|
||||
'text': self.getSettingValue(),
|
||||
'events': {
|
||||
'click': self.showBrowser.bind(self),
|
||||
'outerClick': self.hideBrowser.bind(self)
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
self.cached = {};
|
||||
},
|
||||
|
||||
showBrowser: function(){
|
||||
var self = this;
|
||||
|
||||
if(!self.browser)
|
||||
self.browser = new Element('div.directory_list').adopt(
|
||||
self.dir_list = new Element('ul')
|
||||
).inject(self.input, 'after')
|
||||
|
||||
self.getDirs()
|
||||
self.browser.show()
|
||||
},
|
||||
|
||||
hideBrowser: function(){
|
||||
this.browser.hide()
|
||||
},
|
||||
|
||||
fillBrowser: function(json){
|
||||
var self = this;
|
||||
|
||||
var c = self.getCurrentDir();
|
||||
var v = self.input.get('value');
|
||||
var add = true
|
||||
|
||||
if(!json){
|
||||
json = self.cached[c];
|
||||
}
|
||||
else {
|
||||
self.cached[c] = json;
|
||||
}
|
||||
|
||||
self.dir_list.empty();
|
||||
json.dirs.each(function(dir){
|
||||
if(dir.indexOf(v) != -1){
|
||||
new Element('li', {
|
||||
'text': dir
|
||||
}).inject(self.dir_list)
|
||||
|
||||
if(add){
|
||||
self.input.insertAtCursor(dir.substring(v.length), true);
|
||||
add = false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getDirs: function(){
|
||||
var self = this;
|
||||
|
||||
var c = self.getCurrentDir();
|
||||
|
||||
if(self.cached[c]){
|
||||
self.fillBrowser()
|
||||
}
|
||||
else {
|
||||
self.api().request('directory.list', {
|
||||
'data': {
|
||||
'path': c
|
||||
},
|
||||
'onComplete': self.fillBrowser.bind(self)
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
getCurrentDir: function(){
|
||||
var self = this;
|
||||
|
||||
var v = self.input.get('value');
|
||||
var sep = self.api().getOption('path_sep');
|
||||
var dirs = v.split(sep);
|
||||
dirs.pop();
|
||||
|
||||
return dirs.join(sep)
|
||||
},
|
||||
|
||||
getValue: function(){
|
||||
var self = this;
|
||||
return self.input.get('text');
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,8 @@
|
||||
Page.Soon = new Class({
|
||||
|
||||
Extends: PageBase,
|
||||
|
||||
name: 'soon',
|
||||
title: 'Which wanted movies are released soon?'
|
||||
|
||||
})
|
||||
@@ -0,0 +1,73 @@
|
||||
Page.Wanted = new Class({
|
||||
|
||||
Extends: PageBase,
|
||||
|
||||
name: 'wanted',
|
||||
title: 'Gimmy gimmy gimmy!',
|
||||
|
||||
movies: [],
|
||||
|
||||
indexAction: function(param){
|
||||
var self = this;
|
||||
|
||||
self.get()
|
||||
},
|
||||
|
||||
list: function(){
|
||||
var self = this;
|
||||
|
||||
if(!self.movie_container)
|
||||
self.movie_container = new Element('div.movies').inject(self.el);
|
||||
|
||||
self.movie_container.empty();
|
||||
Object.each(self.movies, function(info){
|
||||
var m = new Movie(self, {}, info);
|
||||
$(m).inject(self.movie_container);
|
||||
});
|
||||
},
|
||||
|
||||
get: function(status, onComplete){
|
||||
var self = this
|
||||
|
||||
if(self.movies.length == 0)
|
||||
self.api().request('movie', {
|
||||
'data': {},
|
||||
'onComplete': function(json){
|
||||
self.store(json.movies);
|
||||
self.list();
|
||||
}
|
||||
})
|
||||
else
|
||||
self.list()
|
||||
},
|
||||
|
||||
store: function(movies){
|
||||
var self = this;
|
||||
|
||||
self.movies = movies;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
var Movie = new Class({
|
||||
|
||||
Extends: BlockBase,
|
||||
|
||||
initialize: function(self, options, data){
|
||||
var self = this;
|
||||
|
||||
self.data = data;
|
||||
|
||||
self.parent(self, options);
|
||||
},
|
||||
|
||||
create: function(){
|
||||
var self = this;
|
||||
|
||||
self.el = new Element('div.movie', {
|
||||
'text': self.data.name
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
Reference in New Issue
Block a user