Wizard Base
This commit is contained in:
Ruud
@@ -1,87 +1,225 @@
|
||||
var WizardBase = new Class({
|
||||
Page.Wizard = new Class({
|
||||
|
||||
Implements: [Options, Events],
|
||||
Extends: PageBase,
|
||||
|
||||
initialize: function(steps){
|
||||
name: 'wizard',
|
||||
has_tab: false,
|
||||
|
||||
options: {
|
||||
'onOpened': function(){
|
||||
App.fireEvent('unload');
|
||||
App.getBlock('header').hide();
|
||||
}
|
||||
},
|
||||
|
||||
initialize: function(options){
|
||||
var self = this;
|
||||
self.parent(options);
|
||||
|
||||
self.steps = steps;
|
||||
self.spotlight = new Spotlight([], {
|
||||
'fillColor': [0,0,0],
|
||||
'soften': 0
|
||||
// Create steps
|
||||
self.steps = [
|
||||
{'step':'index', 'title': 'Welcome'},
|
||||
{'step':'step1', 'title': 'Security'},
|
||||
{'step':'step2', 'title': 'Downloaders'}
|
||||
]
|
||||
|
||||
self.breadcrumbs = new Element('ul').inject(self.el);
|
||||
Object.each(self.steps, function(step, nr){
|
||||
step.el = new Element('li', {
|
||||
'class': (nr == 0 ? 'active ' : '') + 'step_'+step.step,
|
||||
'data-nr': nr,
|
||||
'text': step.title
|
||||
}).inject(self.breadcrumbs)
|
||||
});
|
||||
//window.addEvent('resize', self.spotlight.create.bind(self.spotlight))
|
||||
|
||||
p(self.steps);
|
||||
|
||||
},
|
||||
|
||||
start: function(){
|
||||
nextStep: function(e){
|
||||
var self = this;
|
||||
|
||||
var els = $(document.body).getElements("[name='core[username]'], [name='core[password]'], [name='core[launch_browser]']").getParent('.ctrlHolder')
|
||||
|
||||
p(els, self.spotlight.setElements(els))
|
||||
|
||||
self.spotlight.create();
|
||||
(e).stop();
|
||||
|
||||
},
|
||||
var next = (self.current_step || 0)+1;
|
||||
var step = self.steps[next];
|
||||
self.breadcrumbs.getElement('.active').removeClass('active');
|
||||
step.el.addClass('active');
|
||||
|
||||
nextStep: function(){
|
||||
self.openUrl('/'+self.name+'/'+step.step+'/');
|
||||
|
||||
p('nextStep');
|
||||
},
|
||||
|
||||
previousStep: function(){
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
WizardBase.Screen = new Class({
|
||||
|
||||
initialize: function(data){
|
||||
var self = this;
|
||||
|
||||
self.data = data;
|
||||
self.create()
|
||||
|
||||
},
|
||||
|
||||
create: function(){
|
||||
var self = this;
|
||||
|
||||
self.el = new Element('div.')
|
||||
|
||||
|
||||
},
|
||||
|
||||
destroy: function(){
|
||||
this.el.destroy();
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
window.addEvent('domready', function(){
|
||||
window.Wizard = new WizardBase([
|
||||
{
|
||||
'title': 'Fill in your username and password',
|
||||
'Description': 'Outside blabla',
|
||||
'tab': 'general',
|
||||
'fields': ['username', 'password']
|
||||
},
|
||||
{
|
||||
p('previousStep');
|
||||
},
|
||||
|
||||
stop: function(){
|
||||
var self = this;
|
||||
(e).stop();
|
||||
|
||||
p('close');
|
||||
},
|
||||
|
||||
// Welcome
|
||||
indexAction: function(){
|
||||
var self = this;
|
||||
|
||||
var step = new Page.Wizard.Step('welcome', {
|
||||
'title': 'Welcome to the CouchPotato wizard',
|
||||
'description': 'Before you can start creating that butt-formed hole in you couch, you must complete the following wizard.',
|
||||
'groups': [
|
||||
{
|
||||
'content': new Element('a.button.green', {
|
||||
'text': 'Go to the first step',
|
||||
'events': {
|
||||
'click': self.nextStep.bind(self)
|
||||
}
|
||||
})
|
||||
},
|
||||
{
|
||||
'title': 'Skip wizard',
|
||||
'description': 'You can always activate the wizard from within the settings page',
|
||||
'content': new Element('a.button.orange', {
|
||||
'text': 'I already know how this works, I\'ll fill it in manually, thanks.',
|
||||
'events': {
|
||||
'click': self.stop.bind(self)
|
||||
}
|
||||
})
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
return [self.breadcrumbs, step]
|
||||
|
||||
},
|
||||
|
||||
// Username password browser
|
||||
step1Action: function(){
|
||||
var self = this;
|
||||
|
||||
var step = new Page.Wizard.Step('security', {
|
||||
'title': 'Security',
|
||||
'description': 'Before you can start creating that butt-formed hole in you couch, you must complete the following wizard.',
|
||||
'groups': [
|
||||
{
|
||||
'title': 'Fill in your username and password',
|
||||
'description': 'Keep blank if you don\'t want to secure CP.',
|
||||
'fields': ['core.username', 'core.password']
|
||||
},
|
||||
{
|
||||
'title': 'Launch the browser when CP starts',
|
||||
'fields': ['core.launch_browser']
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
return [self.breadcrumbs, step]
|
||||
},
|
||||
|
||||
// NZB Torrent, downloaders
|
||||
step2Action: function(){
|
||||
var options = {
|
||||
'title': 'What do you use to download your movies',
|
||||
'answers': [
|
||||
{'name': 'nzb', 'label': 'Usenet'},
|
||||
{'name': 'torrent', 'label': 'Torrents'}
|
||||
]
|
||||
},
|
||||
{
|
||||
'title': 'Do you have a login for any of the following sites',
|
||||
'tab': 'providers',
|
||||
'needs': function(){
|
||||
return self.config_nzb || self.config_torrent
|
||||
}
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
// NZB show affiliates
|
||||
// NZB: retention
|
||||
// Downloaders
|
||||
// Providers
|
||||
// Automated registration nzb.su via email api
|
||||
// Renamer
|
||||
// Userscript, depending on browser
|
||||
// Extras:
|
||||
// Notifications
|
||||
// Metadata
|
||||
|
||||
});
|
||||
|
||||
Page.Wizard.Step = new Class({
|
||||
|
||||
Implements: [Options],
|
||||
|
||||
initialize: function(name, options){
|
||||
var self = this;
|
||||
self.setOptions(options);
|
||||
|
||||
self.name = name;
|
||||
self.create();
|
||||
|
||||
},
|
||||
|
||||
create: function(){
|
||||
var self = this;
|
||||
|
||||
// Main element
|
||||
self.el = new Element('div.step').addClass(self.name || '');
|
||||
|
||||
self.createTitleDescription(self.options, self.el);
|
||||
|
||||
// Groups
|
||||
if(self.options.groups){
|
||||
self.groups = new Element('div.groups').inject(self.el);
|
||||
self.options.groups.each(self.createGroup.bind(self));
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
createGroup: function(options){
|
||||
var self = this;
|
||||
|
||||
var group = new Element('div.group').inject(self.groups);
|
||||
|
||||
self.createTitleDescription(options, group);
|
||||
|
||||
// Content
|
||||
if(options.content)
|
||||
options.content.inject(group);
|
||||
|
||||
// Fields
|
||||
if(options.fields)
|
||||
options.fields.each(self.createField.bind(self))
|
||||
|
||||
|
||||
},
|
||||
|
||||
createField: function(field){
|
||||
|
||||
},
|
||||
|
||||
createTitleDescription: function(options, inject_in){
|
||||
var self = this;
|
||||
|
||||
|
||||
// Title
|
||||
if(options.title)
|
||||
self.title = new Element('div.title', {
|
||||
'text': options.title
|
||||
}).inject(inject_in);
|
||||
|
||||
// Descriptions
|
||||
if(options.description)
|
||||
self.title = new Element('div.description', {
|
||||
'text': options.description
|
||||
}).inject(inject_in);
|
||||
|
||||
},
|
||||
|
||||
toElement: function(){
|
||||
return this.el;
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
window.addEvent('domready', function(){
|
||||
|
||||
// Check if wizard is enabled
|
||||
|
||||
});
|
||||
|
||||
@@ -33,7 +33,10 @@ var PageBase = new Class({
|
||||
//p('Opening: ' +self.getName() + ', ' + action + ', ' + Object.toQueryString(params));
|
||||
|
||||
try {
|
||||
self[action+'Action'](params);
|
||||
self.el.empty();
|
||||
var elements = self[action+'Action'](params);
|
||||
self.el.adopt(elements);
|
||||
|
||||
self.fireEvent('opened');
|
||||
}
|
||||
catch (e){
|
||||
@@ -41,6 +44,11 @@ var PageBase = new Class({
|
||||
self.fireEvent('error');
|
||||
}
|
||||
},
|
||||
|
||||
openUrl: function(url){
|
||||
if(History.getPath() != url)
|
||||
History.push(url);
|
||||
},
|
||||
|
||||
errorAction: function(e){
|
||||
p('Error, action not found', e);
|
||||
|
||||
Reference in New Issue
Block a user