Movie lists
This commit is contained in:
@@ -40,6 +40,7 @@ class ClientScript(Plugin):
|
||||
'scripts/page.js',
|
||||
'scripts/block.js',
|
||||
'scripts/block/navigation.js',
|
||||
'scripts/block/header.js',
|
||||
'scripts/block/footer.js',
|
||||
'scripts/block/menu.js',
|
||||
'scripts/page/home.js',
|
||||
|
||||
@@ -181,9 +181,6 @@ var Movie = new Class({
|
||||
'text': self.data.info.year || 'n/a'
|
||||
})
|
||||
),
|
||||
self.description = new Element('div.description.tiny_scroll', {
|
||||
'text': self.data.info.plot
|
||||
}),
|
||||
self.eta = eta_date && (now+8035200 > eta) ? new Element('div.eta', {
|
||||
'text': eta_date,
|
||||
'title': 'ETA'
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -4,9 +4,38 @@ Page.Movies = new Class({
|
||||
|
||||
name: 'movies',
|
||||
sub_pages: ['Wanted', 'Manage'],
|
||||
default_page: 'Wanted',
|
||||
current_page: null,
|
||||
|
||||
initialize: function(parent, options){
|
||||
var self = this;
|
||||
self.parent(parent, options);
|
||||
|
||||
self.navigation = new BlockNavigation();
|
||||
$(self.navigation).inject(self.el, 'top');
|
||||
|
||||
},
|
||||
|
||||
defaultAction: function(action, params){
|
||||
var self = this;
|
||||
|
||||
if(self.current_page)
|
||||
self.current_page.hide();
|
||||
|
||||
var route = new Route();
|
||||
route.parse(action);
|
||||
|
||||
var page_name = route.getPage() != 'index' ? route.getPage().capitalize() : self.default_page;
|
||||
|
||||
var page = self.sub_pages.filter(function(page){
|
||||
return page.name == page_name;
|
||||
}).pick()['class'];
|
||||
|
||||
page.open(route.getAction() || 'index', params);
|
||||
page.show();
|
||||
|
||||
self.current_page = page;
|
||||
|
||||
indexAction: function(){
|
||||
p('test');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
66
couchpotato/static/scripts/block/header.js
Normal file
66
couchpotato/static/scripts/block/header.js
Normal file
@@ -0,0 +1,66 @@
|
||||
var BlockHeader = new Class({
|
||||
|
||||
Extends: BlockNavigation,
|
||||
|
||||
create: function(){
|
||||
var self = this;
|
||||
|
||||
self.parent();
|
||||
|
||||
self.el.adopt(
|
||||
self.foldout = new Element('a.foldout.icon2.menu', {
|
||||
'events': {
|
||||
'click': self.toggleMenu.bind(self)
|
||||
}
|
||||
}).grab(new Element('span.overlay')),
|
||||
self.logo = new Element('a.logo', {
|
||||
'html': '<span>Couch</span><span>Potato</span>',
|
||||
'href': App.createUrl('')
|
||||
}),
|
||||
self.nav
|
||||
);
|
||||
|
||||
new ScrollSpy({
|
||||
min: 400,
|
||||
onLeave: function(){
|
||||
self.backtotop.fade('out');
|
||||
},
|
||||
onEnter: function(){
|
||||
self.backtotop.fade('in');
|
||||
}
|
||||
});
|
||||
|
||||
self.nav.addEvents({
|
||||
'click:relay(a)': function(){
|
||||
if($(document.body).getParent().hasClass('menu_shown'))
|
||||
self.toggleMenu();
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
toggleMenu: function(){
|
||||
var self = this,
|
||||
body = $(document.body),
|
||||
html = body.getParent();
|
||||
|
||||
// Copy over settings menu
|
||||
if(!self.added){
|
||||
|
||||
new Element('li.separator').inject(self.nav);
|
||||
body.getElements('.header .more_menu.menu li a, .header .more_menu.menu li span.separator').each(function(el, nr){
|
||||
if(nr <= 2) return;
|
||||
if(el.get('tag') == 'a')
|
||||
self.nav.grab(new Element('li').grab(el.clone().cloneEvents(el)));
|
||||
else
|
||||
self.nav.grab(new Element('li.separator'));
|
||||
});
|
||||
|
||||
self.added = true;
|
||||
}
|
||||
|
||||
html.toggleClass('menu_shown');
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
@@ -5,47 +5,10 @@ var BlockNavigation = new Class({
|
||||
create: function(){
|
||||
var self = this;
|
||||
|
||||
self.el = new Element('div.navigation').adopt(
|
||||
self.foldout = new Element('a.foldout.icon2.menu', {
|
||||
'events': {
|
||||
'click': self.toggleMenu.bind(self)
|
||||
}
|
||||
}).grab(new Element('span.overlay')),
|
||||
self.logo = new Element('a.logo', {
|
||||
'html': '<span>Couch</span><span>Potato</span>',
|
||||
'href': App.createUrl('')
|
||||
}),
|
||||
self.nav = new Element('ul'),
|
||||
self.backtotop = new Element('a.backtotop', {
|
||||
'text': 'back to top',
|
||||
'events': {
|
||||
'click': function(){
|
||||
window.scroll(0,0);
|
||||
}
|
||||
},
|
||||
'tween': {
|
||||
'duration': 100
|
||||
}
|
||||
})
|
||||
self.el = new Element('div.navigation').grab(
|
||||
self.nav = new Element('ul')
|
||||
);
|
||||
|
||||
new ScrollSpy({
|
||||
min: 400,
|
||||
onLeave: function(){
|
||||
self.backtotop.fade('out');
|
||||
},
|
||||
onEnter: function(){
|
||||
self.backtotop.fade('in');
|
||||
}
|
||||
});
|
||||
|
||||
self.nav.addEvents({
|
||||
'click:relay(a)': function(){
|
||||
if($(document.body).getParent().hasClass('menu_shown'))
|
||||
self.toggleMenu();
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
addTab: function(name, tab){
|
||||
@@ -57,30 +20,6 @@ var BlockNavigation = new Class({
|
||||
|
||||
},
|
||||
|
||||
toggleMenu: function(){
|
||||
var self = this,
|
||||
body = $(document.body),
|
||||
html = body.getParent();
|
||||
|
||||
// Copy over settings menu
|
||||
if(!self.added){
|
||||
|
||||
new Element('li.separator').inject(self.nav);
|
||||
body.getElements('.header .more_menu.menu li a, .header .more_menu.menu li span.separator').each(function(el, nr){
|
||||
if(nr <= 2) return;
|
||||
if(el.get('tag') == 'a')
|
||||
self.nav.grab(new Element('li').grab(el.clone().cloneEvents(el)));
|
||||
else
|
||||
self.nav.grab(new Element('li.separator'));
|
||||
});
|
||||
|
||||
self.added = true;
|
||||
}
|
||||
|
||||
html.toggleClass('menu_shown');
|
||||
|
||||
},
|
||||
|
||||
activate: function(name){
|
||||
var self = this;
|
||||
|
||||
|
||||
@@ -23,8 +23,6 @@
|
||||
|
||||
self.c = $(document.body);
|
||||
|
||||
self.route = new Route(self.defaults);
|
||||
|
||||
self.createLayout();
|
||||
self.createPages();
|
||||
|
||||
@@ -79,7 +77,7 @@
|
||||
|
||||
self.c.adopt(
|
||||
$(self.block.header).addClass('header').adopt(
|
||||
self.block.navigation = new BlockNavigation(self, {}),
|
||||
self.block.navigation = new BlockHeader(self, {}),
|
||||
self.block.search = new BlockSearch(self, {}),
|
||||
self.block.more = new BlockMenu(self, {'button_class': 'icon2.cog'})
|
||||
),
|
||||
@@ -170,13 +168,15 @@
|
||||
},
|
||||
|
||||
openPage: function(url) {
|
||||
var self = this;
|
||||
var self = this,
|
||||
route = new Route(self.defaults);
|
||||
|
||||
self.route.parse();
|
||||
var page_name = self.route.getPage().capitalize(),
|
||||
action = self.route.getAction(),
|
||||
params = self.route.getParams(),
|
||||
current_url = self.route.getCurrentUrl(),
|
||||
route.parse(rep(History.getPath()));
|
||||
|
||||
var page_name = route.getPage().capitalize(),
|
||||
action = route.getAction(),
|
||||
params = route.getParams(),
|
||||
current_url = route.getCurrentUrl(),
|
||||
page;
|
||||
|
||||
if(current_url == self.current_url)
|
||||
@@ -439,24 +439,19 @@ window.App = new CouchPotato();
|
||||
|
||||
var Route = new Class({
|
||||
|
||||
defaults: {},
|
||||
defaults: null,
|
||||
page: '',
|
||||
action: 'index',
|
||||
params: {},
|
||||
|
||||
initialize: function(defaults){
|
||||
var self = this;
|
||||
self.defaults = defaults;
|
||||
self.defaults = defaults || {};
|
||||
},
|
||||
|
||||
parse: function(){
|
||||
parse: function(path){
|
||||
var self = this;
|
||||
|
||||
var rep = function (pa) {
|
||||
return pa.replace(Api.getOption('url'), '/').replace(App.getOption('base_url'), '/');
|
||||
};
|
||||
|
||||
var path = rep(History.getPath());
|
||||
if(path == '/' && location.hash){
|
||||
path = rep(location.hash.replace('#', '/'));
|
||||
}
|
||||
@@ -464,7 +459,7 @@ var Route = new Class({
|
||||
var url = self.current.split('/');
|
||||
|
||||
self.page = (url.length > 0) ? url.shift() : self.defaults.page;
|
||||
self.action = (url.length > 0) ? url.shift() : self.defaults.action;
|
||||
self.action = (url.length > 0) ? url.join('/') : self.defaults.action;
|
||||
|
||||
self.params = Object.merge({}, self.defaults.params);
|
||||
if(url.length > 1){
|
||||
@@ -624,3 +619,7 @@ var createSpinner = function(target, options){
|
||||
|
||||
return new Spinner(opts).spin(target);
|
||||
};
|
||||
|
||||
var rep = function (pa) {
|
||||
return pa.replace(Api.getOption('url'), '/').replace(App.getOption('base_url'), '/');
|
||||
};
|
||||
|
||||
@@ -10,11 +10,13 @@ var PageBase = new Class({
|
||||
has_tab: true,
|
||||
name: '',
|
||||
|
||||
parent_page: null,
|
||||
sub_pages: null,
|
||||
|
||||
initialize: function(options) {
|
||||
initialize: function(parent_page, options) {
|
||||
var self = this;
|
||||
|
||||
self.parent_page = parent_page;
|
||||
self.setOptions(options);
|
||||
|
||||
// Create main page container
|
||||
@@ -26,9 +28,17 @@ var PageBase = new Class({
|
||||
|
||||
// Create tab for page
|
||||
if(self.has_tab){
|
||||
var nav = App.getBlock('navigation');
|
||||
var nav;
|
||||
|
||||
if(self.parent_page && self.parent_page.navigation){
|
||||
nav = self.parent_page.navigation;
|
||||
}
|
||||
else {
|
||||
nav = App.getBlock('navigation');
|
||||
}
|
||||
|
||||
self.tab = nav.addTab(self.name, {
|
||||
'href': App.createUrl(self.name),
|
||||
'href': App.createUrl(self.getPageUrl()),
|
||||
'title': self.title,
|
||||
'text': self.name.capitalize()
|
||||
});
|
||||
@@ -73,7 +83,13 @@ var PageBase = new Class({
|
||||
//p('Opening: ' +self.getName() + ', ' + action + ', ' + Object.toQueryString(params));
|
||||
|
||||
try {
|
||||
var elements = self[action+'Action'](params);
|
||||
var elements
|
||||
if(!self[action+'Action']){
|
||||
elements = self['defaultAction'](action, params);
|
||||
}
|
||||
else {
|
||||
elements = self[action+'Action'](params);
|
||||
}
|
||||
if(elements !== undefined){
|
||||
self.el.empty();
|
||||
self.el.adopt(elements);
|
||||
@@ -93,6 +109,11 @@ var PageBase = new Class({
|
||||
History.push(url);
|
||||
},
|
||||
|
||||
getPageUrl: function(){
|
||||
var self = this;
|
||||
return (self.parent_page && self.parent_page.getPageUrl ? self.parent_page.getPageUrl() + '/' : '') + self.name;
|
||||
},
|
||||
|
||||
errorAction: function(e){
|
||||
p('Error, action not found', e);
|
||||
},
|
||||
|
||||
@@ -43,8 +43,8 @@ a {
|
||||
font-family: Lobster, serif;
|
||||
color: #FFF;
|
||||
font-size: 38px;
|
||||
line-height: 80px;
|
||||
height: 80px;
|
||||
line-height: $header-height;
|
||||
height: $header-height;
|
||||
|
||||
span:nth-child(odd){
|
||||
display: block;
|
||||
@@ -60,7 +60,7 @@ a {
|
||||
margin: 0;
|
||||
|
||||
li a {
|
||||
padding: 10px 20px;
|
||||
padding: $padding/2 $padding;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -83,23 +83,68 @@ a {
|
||||
.pages {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: 20px;
|
||||
height: $padding;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
|
||||
position: relative;
|
||||
display: none;
|
||||
padding: 20px;
|
||||
padding: $padding 0;
|
||||
|
||||
.page {
|
||||
margin-top: $header-height - $padding;
|
||||
z-index: 10;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
@include flexbox();
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: $header-height;
|
||||
left: 130px;
|
||||
right: 0;
|
||||
background: $background_color;
|
||||
z-index: 100;
|
||||
|
||||
ul {
|
||||
@include flex(1 auto);
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
font-size: 24px;
|
||||
line-height: $header-height;
|
||||
padding: $padding;
|
||||
color: rgba(0,0,0,.5);
|
||||
font-weight: 300;
|
||||
|
||||
&.active {
|
||||
color: rgba(0,0,0,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.alph_nav {
|
||||
display: none; // Hide for now
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -3,6 +3,54 @@ $background_color: #FFF;
|
||||
$menu_color: #111;
|
||||
$theme_off: #f2f2f2;
|
||||
|
||||
$header-height: 80px;
|
||||
$padding: 20px;
|
||||
|
||||
@import "susy";
|
||||
@import "compass/css3/transition";
|
||||
@import "compass/css3/transform";
|
||||
|
||||
$susy: (
|
||||
columns: 24,
|
||||
gutters: 70px/70px
|
||||
);
|
||||
|
||||
$mq-phone: 320px !default;
|
||||
$mq-phablet: 480px !default;
|
||||
$mq-tablet: 768px !default;
|
||||
$mq-desktop: 1024px !default;
|
||||
$mq-desktop-plus: 1382px !default;
|
||||
|
||||
@mixin media-phone {
|
||||
@media (max-width : $mq-phone) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media-phablet {
|
||||
@media (max-width : $mq-phablet) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media-tablet {
|
||||
@media (max-width : $mq-tablet) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media-desktop {
|
||||
@media (max-width : $mq-desktop) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media-desktop-plus {
|
||||
@media (max-width : $mq-desktop-plus) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin flexbox() {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
|
||||
Reference in New Issue
Block a user