Movie lists

This commit is contained in:
Ruud
2014-12-16 23:55:26 +01:00
parent 5bfdb121df
commit 0155c8de2d
10 changed files with 348 additions and 1139 deletions

View File

@@ -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',

View File

@@ -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

View File

@@ -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');
}
});

View 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');
}
});

View File

@@ -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;

View File

@@ -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'), '/');
};

View File

@@ -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);
},

View File

@@ -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
}
}

View File

@@ -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;