Improved wizard
This commit is contained in:
1 parent
0132012276
commit
d40ad1ddf2
6 files changed
+289
-220
No files matched your search
@@ -11,7 +11,6 @@ config = [{
|
|||||||
'name': 'nzbget',
|
'name': 'nzbget',
|
||||||
'label': 'NZBGet',
|
'label': 'NZBGet',
|
||||||
'description': 'Send NZBs to your NZBGet installation.',
|
'description': 'Send NZBs to your NZBGet installation.',
|
||||||
'wizard': True,
|
|
||||||
'options': [
|
'options': [
|
||||||
{
|
{
|
||||||
'name': 'enabled',
|
'name': 'enabled',
|
||||||
|
|||||||
@@ -12,7 +12,6 @@ config = [{
|
|||||||
'name': 'pneumatic',
|
'name': 'pneumatic',
|
||||||
'label': 'Pneumatic',
|
'label': 'Pneumatic',
|
||||||
'description': 'Download the .strm file to a specific folder.',
|
'description': 'Download the .strm file to a specific folder.',
|
||||||
'wizard': True,
|
|
||||||
'options': [
|
'options': [
|
||||||
{
|
{
|
||||||
'name': 'enabled',
|
'name': 'enabled',
|
||||||
|
|||||||
@@ -14,12 +14,13 @@
|
|||||||
|
|
||||||
.page.wizard .tab_wrapper {
|
.page.wizard .tab_wrapper {
|
||||||
background: #5c697b;
|
background: #5c697b;
|
||||||
padding: 18px 0;
|
padding: 10px 0;
|
||||||
font-size: 23px;
|
font-size: 18px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
min-width: 960px;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
box-shadow: 0 0 50px rgba(0,0,0,0.55);
|
box-shadow: 0 0 50px rgba(0,0,0,0.55);
|
||||||
@@ -36,7 +37,7 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.page.wizard .tabs li a {
|
.page.wizard .tabs li a {
|
||||||
padding: 20px 30px;
|
padding: 20px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page.wizard .tab_wrapper .pointer {
|
.page.wizard .tab_wrapper .pointer {
|
||||||
@@ -45,7 +46,7 @@
|
|||||||
border-top: 10px solid #5c697b;
|
border-top: 10px solid #5c697b;
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 60px;
|
top: 44px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page.wizard .tab_content {
|
.page.wizard .tab_content {
|
||||||
@@ -58,11 +59,21 @@
|
|||||||
.page.wizard .wgroup_finish {
|
.page.wizard .wgroup_finish {
|
||||||
height: 300px;
|
height: 300px;
|
||||||
}
|
}
|
||||||
|
.page.wizard .wgroup_finish h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.page.wizard .wgroup_finish .wizard_support,
|
||||||
|
.page.wizard .wgroup_finish .description {
|
||||||
|
font-size: 25px;
|
||||||
|
line-height: 120%;
|
||||||
|
margin: 20px 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.page.wizard .button.green {
|
.page.wizard .button.green {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
margin: 10px 30px;
|
margin: 10px 30px 80px;
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@@ -1,214 +1,272 @@
|
|||||||
Page.Wizard = new Class({
|
Page.Wizard = new Class({
|
||||||
|
|
||||||
Extends: Page.Settings,
|
Extends: Page.Settings,
|
||||||
|
|
||||||
name: 'wizard',
|
name: 'wizard',
|
||||||
has_tab: false,
|
has_tab: false,
|
||||||
wizard_only: true,
|
wizard_only: true,
|
||||||
|
|
||||||
headers: {
|
headers: {
|
||||||
'welcome': {
|
'welcome': {
|
||||||
'title': 'Welcome to the new CouchPotato',
|
'title': 'Welcome to the new CouchPotato',
|
||||||
'description': 'To get started, fill in each of the following settings as much as your can. <br />Maybe first start with importing your movies from the previous CouchPotato',
|
'description': 'To get started, fill in each of the following settings as much as your can. <br />Maybe first start with importing your movies from the previous CouchPotato',
|
||||||
'content': new Element('div', {
|
'content': new Element('div', {
|
||||||
'styles': {
|
'styles': {
|
||||||
'margin': '0 0 0 30px'
|
'margin': '0 0 0 30px'
|
||||||
}
|
}
|
||||||
}).adopt(
|
}).adopt(
|
||||||
new Element('div', {
|
new Element('div', {
|
||||||
'html': 'Select the <strong>data.db</strong>. It should be in your CouchPotato root directory.'
|
'html': 'Select the <strong>data.db</strong>. It should be in your CouchPotato root directory.'
|
||||||
}),
|
}),
|
||||||
self.import_iframe = new Element('iframe', {
|
self.import_iframe = new Element('iframe', {
|
||||||
'styles': {
|
'styles': {
|
||||||
'height': 40,
|
'height': 40,
|
||||||
'width': 300,
|
'width': 300,
|
||||||
'border': 0,
|
'border': 0,
|
||||||
'overflow': 'hidden'
|
'overflow': 'hidden'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
),
|
),
|
||||||
'event': function(){
|
'event': function(){
|
||||||
self.import_iframe.set('src', Api.createUrl('v1.import'))
|
self.import_iframe.set('src', Api.createUrl('v1.import'))
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'general': {
|
'general': {
|
||||||
'title': 'General',
|
'title': 'General',
|
||||||
'description': 'If you want to access CP from outside your local network, you better secure it a bit with a username & password.'
|
'description': 'If you want to access CP from outside your local network, you better secure it a bit with a username & password.'
|
||||||
},
|
},
|
||||||
'downloaders': {
|
'downloaders': {
|
||||||
'title': 'What download apps are you using?',
|
'title': 'What download apps are you using?',
|
||||||
'description': 'If you don\'t have any of these listed, you have to use Blackhole. Or drop me a line, maybe I\'ll support your download app.'
|
'description': 'CP needs an external download app to work with. Choose one below. For more downloaders check settings after you have filled in the wizard. If your download app isn\'t in the list, use Blackhole.'
|
||||||
},
|
},
|
||||||
'providers': {
|
'providers': {
|
||||||
'title': 'Are you registered at any of these sites?',
|
'title': 'Are you registered at any of these sites?',
|
||||||
'description': 'CP uses these sites to search for movies. A few free are enabled by default, but it\'s always better to have a few more.'
|
'description': 'CP uses these sites to search for movies. A few free are enabled by default, but it\'s always better to have a few more. Check settings for the full list of available providers.'
|
||||||
},
|
},
|
||||||
'renamer': {
|
'renamer': {
|
||||||
'title': 'Move & rename the movies after downloading?',
|
'title': 'Move & rename the movies after downloading?',
|
||||||
'description': ''
|
'description': 'The coolest part of CP is that it can move and organize your downloaded movies automagically. Check settings and you can even download trailers, subtitles and other data when it has finished downloading. It\'s awesome!'
|
||||||
},
|
},
|
||||||
'finish': {
|
'automation': {
|
||||||
'title': 'Finish Up',
|
'title': 'Easily add movies to your wanted list!',
|
||||||
'description': 'Are you done? Did you fill in everything as much as possible? Yes, ok gogogo!',
|
'description': 'You can easily add movies from your favorite movie site, like IMDB, Rotten Tomatoes, Apple Trailers and more. Just install the userscript or drag the bookmarklet to your browsers bookmarks.' +
|
||||||
'content': new Element('div').adopt(
|
'<br />Once installed, just click the bookmarklet on a movie page and watch the magic happen ;)',
|
||||||
new Element('a.button.green', {
|
'content': function(){
|
||||||
'text': 'I\'m ready to start the awesomeness, wow this button is big and green!',
|
|
||||||
'events': {
|
// See if userscript can be installed
|
||||||
'click': function(e){
|
var userscript = false;
|
||||||
(e).preventDefault();
|
try {
|
||||||
Api.request('settings.save', {
|
if(Components.interfaces.gmIGreasemonkeyService)
|
||||||
'data': {
|
userscript = true
|
||||||
'section': 'core',
|
}
|
||||||
'name': 'show_wizard',
|
catch(e){
|
||||||
'value': 0
|
userscript = Browser.chrome === true;
|
||||||
},
|
}
|
||||||
'useSpinner': true,
|
|
||||||
'spinnerOptions': {
|
var host_url = window.location.protocol + '//' + window.location.host;
|
||||||
'target': self.el
|
|
||||||
},
|
var el = new Element('div.group_userscript').adopt(
|
||||||
'onComplete': function(){
|
|
||||||
window.location = App.createUrl();
|
(userscript ? [new Element('a.userscript.button', {
|
||||||
}
|
'text': 'Install userscript',
|
||||||
});
|
'href': Api.createUrl('userscript.get')+randomString()+'/couchpotato.user.js',
|
||||||
}
|
'target': '_self'
|
||||||
}
|
}), new Element('span.or[text=or]')] : null),
|
||||||
})
|
new Element('span.bookmarklet').adopt(
|
||||||
)
|
new Element('a.button.orange', {
|
||||||
}
|
'text': '+CouchPotato',
|
||||||
},
|
'href': "javascript:void((function(){var e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','" +
|
||||||
groups: ['welcome', 'general', 'downloaders', 'searcher', 'providers', 'renamer', 'finish'],
|
host_url + Api.createUrl('userscript.bookmark') +
|
||||||
|
"?host="+ encodeURI(host_url + Api.createUrl('userscript.get')+randomString()+'/') +
|
||||||
open: function(action, params){
|
"&r='+Math.random()*99999999);document.body.appendChild(e)})());",
|
||||||
var self = this;
|
'target': '',
|
||||||
|
'events': {
|
||||||
if(!self.initialized){
|
'click': function(e){
|
||||||
App.fireEvent('unload');
|
(e).stop()
|
||||||
App.getBlock('header').hide();
|
alert('Drag it to your bookmark ;)')
|
||||||
|
}
|
||||||
self.parent(action, params);
|
}
|
||||||
|
}),
|
||||||
self.addEvent('create', function(){
|
new Element('span', {
|
||||||
self.order();
|
'text': '⇽ Drag this to your bookmarks'
|
||||||
});
|
})
|
||||||
|
)
|
||||||
self.initialized = true;
|
).setStyles({
|
||||||
|
'background-image': "url('"+Api.createUrl('static/userscript/userscript.png')+"')"
|
||||||
self.scroll = new Fx.Scroll(document.body, {
|
});␍
|
||||||
'transition': 'quint:in:out'
|
|
||||||
});
|
return el␍
|
||||||
}
|
}
|
||||||
else
|
},
|
||||||
(function(){
|
'finish': {
|
||||||
var sc = self.el.getElement('.wgroup_'+action);
|
'title': 'Finishing Up',
|
||||||
self.scroll.start(0, sc.getCoordinates().top-80);
|
'description': 'Are you done? Did you fill in everything as much as possible?' +
|
||||||
}).delay(1)
|
'<br />Be sure to check the settings to see what more CP can do!<br /><br />' +
|
||||||
},
|
'<div class="wizard_support">After you\'ve used CP for a while, and you like it (which of course you will), consider supporting CP. Maybe even by writing some code. <br />Or by getting a subscription at <a href="https://usenetserver.com/partners/?a_aid=couchpotato&a_bid=3f357c6f">Usenet Server</a> or <a href="http://www.newshosting.com/partners/?a_aid=couchpotato&a_bid=a0b022df">Newshosting</a>.</div>',
|
||||||
|
'content': new Element('div').adopt(
|
||||||
order: function(){
|
new Element('a.button.green', {
|
||||||
var self = this;
|
'styles': {
|
||||||
|
'margin-top': 20
|
||||||
var form = self.el.getElement('.uniForm');
|
},
|
||||||
var tabs = self.el.getElement('.tabs');
|
'text': 'I\'m ready to start the awesomeness, wow this button is big and green!',
|
||||||
|
'events': {
|
||||||
self.groups.each(function(group){
|
'click': function(e){
|
||||||
if(self.headers[group]){
|
(e).preventDefault();
|
||||||
group_container = new Element('.wgroup_'+group, {
|
Api.request('settings.save', {
|
||||||
'styles': {
|
'data': {
|
||||||
'opacity': 0.2
|
'section': 'core',
|
||||||
},
|
'name': 'show_wizard',
|
||||||
'tween': {
|
'value': 0
|
||||||
'duration': 350
|
},
|
||||||
}
|
'useSpinner': true,
|
||||||
});
|
'spinnerOptions': {
|
||||||
group_container.adopt(
|
'target': self.el
|
||||||
new Element('h1', {
|
},
|
||||||
'text': self.headers[group].title
|
'onComplete': function(){
|
||||||
}),
|
window.location = App.createUrl();
|
||||||
self.headers[group].description ? new Element('span.description', {
|
}
|
||||||
'html': self.headers[group].description
|
});
|
||||||
}) : null,
|
}
|
||||||
self.headers[group].content ? self.headers[group].content : null
|
}
|
||||||
).inject(form);
|
})
|
||||||
}
|
)
|
||||||
|
}
|
||||||
var tab_navigation = tabs.getElement('.t_'+group);
|
},
|
||||||
if(tab_navigation && group_container){
|
groups: ['welcome', 'general', 'downloaders', 'searcher', 'providers', 'renamer', 'automation', 'finish'],
|
||||||
tab_navigation.inject(tabs); // Tab navigation
|
|
||||||
self.el.getElement('.tab_'+group).inject(group_container); // Tab content
|
open: function(action, params){
|
||||||
if(self.headers[group]){
|
var self = this;
|
||||||
var a = tab_navigation.getElement('a');
|
|
||||||
a.set('text', (self.headers[group].label || group).capitalize());
|
if(!self.initialized){
|
||||||
var url_split = a.get('href').split('wizard')[1].split('/');
|
App.fireEvent('unload');
|
||||||
if(url_split.length > 3)
|
App.getBlock('header').hide();
|
||||||
a.set('href', a.get('href').replace(url_split[url_split.length-3]+'/', ''));
|
|
||||||
|
self.parent(action, params);
|
||||||
}
|
|
||||||
}
|
self.addEvent('create', function(){
|
||||||
else {
|
self.order();
|
||||||
new Element('li.t_'+group).adopt(
|
});
|
||||||
new Element('a', {
|
|
||||||
'href': App.createUrl('wizard/'+group),
|
self.initialized = true;
|
||||||
'text': (self.headers[group].label || group).capitalize()
|
|
||||||
})
|
self.scroll = new Fx.Scroll(document.body, {
|
||||||
).inject(tabs);
|
'transition': 'quint:in:out'
|
||||||
}
|
});
|
||||||
|
}
|
||||||
if(self.headers[group] && self.headers[group].event)
|
else
|
||||||
self.headers[group].event.call()
|
(function(){
|
||||||
});
|
var sc = self.el.getElement('.wgroup_'+action);
|
||||||
|
self.scroll.start(0, sc.getCoordinates().top-80);
|
||||||
// Remove toggle
|
}).delay(1)
|
||||||
self.el.getElement('.advanced_toggle').destroy();
|
},
|
||||||
|
|
||||||
// Hide retention
|
order: function(){
|
||||||
self.el.getElement('.tab_searcher').hide();
|
var self = this;
|
||||||
self.el.getElement('.t_searcher').hide();
|
|
||||||
|
var form = self.el.getElement('.uniForm');
|
||||||
// Add pointer
|
var tabs = self.el.getElement('.tabs');
|
||||||
new Element('.tab_wrapper').wraps(tabs).adopt(
|
|
||||||
self.pointer = new Element('.pointer', {
|
self.groups.each(function(group, nr){
|
||||||
'tween': {
|
if(self.headers[group]){
|
||||||
'transition': 'quint:in:out'
|
group_container = new Element('.wgroup_'+group, {
|
||||||
}
|
'styles': {
|
||||||
})
|
'opacity': 0.2
|
||||||
);
|
},
|
||||||
|
'tween': {
|
||||||
// Add nav
|
'duration': 350
|
||||||
var minimum = self.el.getSize().y-window.getSize().y;
|
}
|
||||||
self.groups.each(function(group, nr){
|
});
|
||||||
|
|
||||||
var g = self.el.getElement('.wgroup_'+group);
|
var content = self.headers[group].content
|
||||||
if(!g || !g.isVisible()) return;
|
group_container.adopt(
|
||||||
var t = self.el.getElement('.t_'+group);
|
new Element('h1', {
|
||||||
if(!t) return;
|
'text': self.headers[group].title
|
||||||
|
}),
|
||||||
var func = function(){
|
self.headers[group].description ? new Element('span.description', {
|
||||||
var ct = t.getCoordinates();
|
'html': self.headers[group].description
|
||||||
self.pointer.tween('left', ct.left+(ct.width/2)-(self.pointer.getWidth()/2));
|
}) : null,
|
||||||
g.tween('opacity', 1);
|
content ? (typeOf(content) == 'function' ? content() : content) : null
|
||||||
}
|
).inject(form);
|
||||||
|
}
|
||||||
if(nr == 0)
|
|
||||||
func();
|
var tab_navigation = tabs.getElement('.t_'+group);
|
||||||
|
if(tab_navigation && group_container){
|
||||||
|
tab_navigation.inject(tabs); // Tab navigation
|
||||||
var ss = new ScrollSpy( {
|
self.el.getElement('.tab_'+group).inject(group_container); // Tab content
|
||||||
min: function(){
|
if(self.headers[group]){
|
||||||
var c = g.getCoordinates();
|
var a = tab_navigation.getElement('a');
|
||||||
var top = c.top-(window.getSize().y/2);
|
a.set('text', (self.headers[group].label || group).capitalize());
|
||||||
return top > minimum ? minimum : top
|
var url_split = a.get('href').split('wizard')[1].split('/');
|
||||||
},
|
if(url_split.length > 3)
|
||||||
max: function(){
|
a.set('href', a.get('href').replace(url_split[url_split.length-3]+'/', ''));
|
||||||
var c = g.getCoordinates();
|
|
||||||
return c.top+(c.height/2)
|
}
|
||||||
},
|
}
|
||||||
onEnter: func,
|
else {
|
||||||
onLeave: function(){
|
new Element('li.t_'+group).adopt(
|
||||||
g.tween('opacity', 0.2)
|
new Element('a', {
|
||||||
}
|
'href': App.createUrl('wizard/'+group),
|
||||||
});
|
'text': (self.headers[group].label || group).capitalize()
|
||||||
});
|
})
|
||||||
|
).inject(tabs);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(self.headers[group] && self.headers[group].event)
|
||||||
|
self.headers[group].event.call()
|
||||||
|
});
|
||||||
|
|
||||||
|
// Remove toggle
|
||||||
|
self.el.getElement('.advanced_toggle').destroy();
|
||||||
|
|
||||||
|
// Hide retention
|
||||||
|
self.el.getElement('.tab_searcher').hide();
|
||||||
|
self.el.getElement('.t_searcher').hide();
|
||||||
|
|
||||||
|
// Add pointer
|
||||||
|
new Element('.tab_wrapper').wraps(tabs).adopt(
|
||||||
|
self.pointer = new Element('.pointer', {
|
||||||
|
'tween': {
|
||||||
|
'transition': 'quint:in:out'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
// Add nav
|
||||||
|
var minimum = self.el.getSize().y-window.getSize().y;
|
||||||
|
self.groups.each(function(group, nr){
|
||||||
|
|
||||||
|
var g = self.el.getElement('.wgroup_'+group);
|
||||||
|
if(!g || !g.isVisible()) return;
|
||||||
|
var t = self.el.getElement('.t_'+group);
|
||||||
|
if(!t) return;
|
||||||
|
|
||||||
|
var func = function(){
|
||||||
|
var ct = t.getCoordinates();
|
||||||
|
self.pointer.tween('left', ct.left+(ct.width/2)-(self.pointer.getWidth()/2));
|
||||||
|
g.tween('opacity', 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
if(nr == 0)
|
||||||
|
func();
|
||||||
|
|
||||||
|
|
||||||
|
var ss = new ScrollSpy( {
|
||||||
|
min: function(){
|
||||||
|
var c = g.getCoordinates();
|
||||||
|
var top = c.top-(window.getSize().y/2);
|
||||||
|
return top > minimum ? minimum : top
|
||||||
|
},
|
||||||
|
max: function(){
|
||||||
|
var c = g.getCoordinates();
|
||||||
|
return c.top+(c.height/2)
|
||||||
|
},
|
||||||
|
onEnter: func,
|
||||||
|
onLeave: function(){
|
||||||
|
g.tween('opacity', 0.2)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
@@ -11,6 +11,7 @@ config = [{
|
|||||||
'subtab': 'providers',
|
'subtab': 'providers',
|
||||||
'name': 'KickAssTorrents',
|
'name': 'KickAssTorrents',
|
||||||
'description': 'See <a href="https://kat.ph/">KickAssTorrents</a>',
|
'description': 'See <a href="https://kat.ph/">KickAssTorrents</a>',
|
||||||
|
'wizard': True,
|
||||||
'options': [
|
'options': [
|
||||||
{
|
{
|
||||||
'name': 'enabled',
|
'name': 'enabled',
|
||||||
|
|||||||
@@ -10,6 +10,7 @@ config = [{
|
|||||||
'subtab': 'providers',
|
'subtab': 'providers',
|
||||||
'name': 'ThePirateBay',
|
'name': 'ThePirateBay',
|
||||||
'description': 'The world\'s largest bittorrent tracker. See <a href="http://fucktimkuik.org/">ThePirateBay</a>',
|
'description': 'The world\'s largest bittorrent tracker. See <a href="http://fucktimkuik.org/">ThePirateBay</a>',
|
||||||
|
'wizard': True,
|
||||||
'options': [
|
'options': [
|
||||||
{
|
{
|
||||||
'name': 'enabled',
|
'name': 'enabled',
|
||||||
|
|||||||
Reference in new issue
Block a user