From d4a8cfc4a38bd06d8afafe8c31e7b4ff2c3b8adf Mon Sep 17 00:00:00 2001 From: Dan Barber Date: Thu, 12 Dec 2013 11:46:09 +0000 Subject: [PATCH] Can display Library. --- assets/css/common.css.sass | 10 ------ assets/css/includes/header.css.sass | 9 ++++++ assets/css/includes/list.css.sass | 19 ++++++++++++ assets/css/library.css.sass | 7 +++++ assets/css/mpd-client.css.sass | 2 ++ assets/css/queue.css.sass | 48 +++++++++++------------------ assets/js/controls/library.js | 20 +++++++++++- assets/js/models/album.js | 3 ++ assets/js/models/artist.js | 3 ++ assets/js/models/song.js | 3 ++ assets/js/mpd-client.js | 2 +- assets/js/router.js | 1 - assets/js/routes.js | 2 ++ public/views/library.ejs | 5 ++- public/views/library/root.ejs | 3 ++ public/views/queue.ejs | 2 +- 16 files changed, 92 insertions(+), 47 deletions(-) create mode 100644 assets/css/includes/header.css.sass create mode 100644 assets/css/includes/list.css.sass create mode 100644 assets/js/models/album.js create mode 100644 assets/js/models/artist.js create mode 100644 assets/js/models/song.js delete mode 100644 assets/js/router.js create mode 100644 assets/js/routes.js create mode 100644 public/views/library/root.ejs diff --git a/assets/css/common.css.sass b/assets/css/common.css.sass index 8fcc64e..e73591e 100644 --- a/assets/css/common.css.sass +++ b/assets/css/common.css.sass @@ -17,13 +17,3 @@ body #content height: 100% - -.header - position: fixed - top: 0 - width: $interface-width - background: rgba(248, 248, 248, 0.95) - border-bottom: 1px solid rgba(0, 0, 0, 0.1) - h1 - text-align: center - font-size: 1em diff --git a/assets/css/includes/header.css.sass b/assets/css/includes/header.css.sass new file mode 100644 index 0000000..2de8f61 --- /dev/null +++ b/assets/css/includes/header.css.sass @@ -0,0 +1,9 @@ +.header + position: fixed + top: 0 + width: $interface-width + background: rgba(248, 248, 248, 0.95) + border-bottom: 1px solid rgba(0, 0, 0, 0.1) + h1 + text-align: center + font-size: 1em diff --git a/assets/css/includes/list.css.sass b/assets/css/includes/list.css.sass new file mode 100644 index 0000000..4ce21d6 --- /dev/null +++ b/assets/css/includes/list.css.sass @@ -0,0 +1,19 @@ +.list + list-style: none + margin: 0 + padding: 0 + li + position: relative + padding: 10px + padding-right: 42px + border-bottom: 1px solid #ddd + +.ordered-list + @extend .list + counter-reset: index + li + counter-increment: index + &:before + float: left + padding: 0.5em 1em 0.5em 0 + content: counter(index,decimal-leading-zero) diff --git a/assets/css/library.css.sass b/assets/css/library.css.sass index 3951fe5..f6174c1 100644 --- a/assets/css/library.css.sass +++ b/assets/css/library.css.sass @@ -7,5 +7,12 @@ height: 100% width: 100% z-index: 2 + &.show + display: block header @extend .header + a.close + position: absolute + right: 10px + top: 8px + @include button diff --git a/assets/css/mpd-client.css.sass b/assets/css/mpd-client.css.sass index c1412ac..1554997 100644 --- a/assets/css/mpd-client.css.sass +++ b/assets/css/mpd-client.css.sass @@ -4,6 +4,8 @@ @import 'includes/fonts' @import 'includes/colours' @import 'includes/button' +@import 'includes/header' +@import 'includes/list' @import 'common' @import 'transport' @import 'queue' diff --git a/assets/css/queue.css.sass b/assets/css/queue.css.sass index 1ce66ea..76444de 100644 --- a/assets/css/queue.css.sass +++ b/assets/css/queue.css.sass @@ -5,16 +5,29 @@ header z-index: 1 @extend .header - button.library + a.library position: absolute left: 10px top: 8px @include button ol - list-style: none - margin: 0 - padding: 0 - counter-reset: index + @extend .ordered-list + li + &.playing + .title + color: $highlight + &:before + font-weight: bold + &:after + @extend .icon + position: absolute + font-size: 1.25em + right: 10px + top: 10px + padding: 0.3em + content: "playing" + .length + display: none p margin: 0 .artist @@ -33,28 +46,3 @@ padding: 0.8em 0 right: 10px top: 10px - li - position: relative - padding: 10px - padding-right: 42px - border-bottom: 1px solid #ddd - counter-increment: index - &:before - float: left - padding: 0.5em 1em 0.5em 0 - content: counter(index,decimal-leading-zero) - &.playing - .title - color: $highlight - &:before - font-weight: bold - &:after - @extend .icon - position: absolute - font-size: 1.25em - right: 10px - top: 10px - padding: 0.3em - content: "playing" - .length - display: none diff --git a/assets/js/controls/library.js b/assets/js/controls/library.js index c2f46b9..0067d52 100644 --- a/assets/js/controls/library.js +++ b/assets/js/controls/library.js @@ -1,9 +1,27 @@ var Library = can.Control.extend({ init: function(element, options) { + this.element = element element.html( - can.view( 'views/library.ejs') + can.view('views/library.ejs') ); + }, + + show: function() { + $(this.element).addClass('show'); + }, + + hide: function() { + $(this.element).removeClass('show'); + }, + + 'a.close click': 'hide', + + ':page route': function(data) { + console.log(data); + if (data.page == 'library') { + this.show(); + } } }); diff --git a/assets/js/models/album.js b/assets/js/models/album.js new file mode 100644 index 0000000..20f8169 --- /dev/null +++ b/assets/js/models/album.js @@ -0,0 +1,3 @@ +var Album = can.Model.extend({ + findAll: 'GET /api/albums' +}, {}); diff --git a/assets/js/models/artist.js b/assets/js/models/artist.js new file mode 100644 index 0000000..2fdc2f3 --- /dev/null +++ b/assets/js/models/artist.js @@ -0,0 +1,3 @@ +var Artist = can.Model.extend({ + findAll: 'GET /api/artists' +}, {}); diff --git a/assets/js/models/song.js b/assets/js/models/song.js new file mode 100644 index 0000000..5bd34c8 --- /dev/null +++ b/assets/js/models/song.js @@ -0,0 +1,3 @@ +var Song = can.Model.extend({ + findAll: 'GET /api/songs' +}, {}); diff --git a/assets/js/mpd-client.js b/assets/js/mpd-client.js index aac311c..334b566 100644 --- a/assets/js/mpd-client.js +++ b/assets/js/mpd-client.js @@ -2,9 +2,9 @@ //= require ./libs/can.jquery.min.js //= require ./libs/can.ejs.js +//= require ./routes.js //= require_tree ./models/ //= require_tree ./helpers/ //= require_tree ./controls/ //= require_tree ./constructs/ -//= require ./router.js //= require ./application.js diff --git a/assets/js/router.js b/assets/js/router.js deleted file mode 100644 index 8b13789..0000000 --- a/assets/js/router.js +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/js/routes.js b/assets/js/routes.js new file mode 100644 index 0000000..723926a --- /dev/null +++ b/assets/js/routes.js @@ -0,0 +1,2 @@ +can.route(':page'); +can.route.ready(); diff --git a/public/views/library.ejs b/public/views/library.ejs index ada8496..daa04ed 100644 --- a/public/views/library.ejs +++ b/public/views/library.ejs @@ -1,8 +1,7 @@
+ Close

Library

    -
  1. Artists
    2. -
  2. Albums
    3. -
  3. Songs
    4. + <%== can.view.render('views/library/root.ejs', {}) %>
diff --git a/public/views/library/root.ejs b/public/views/library/root.ejs new file mode 100644 index 0000000..118f371 --- /dev/null +++ b/public/views/library/root.ejs @@ -0,0 +1,3 @@ +
  • <%== can.route.link('Artists', { page: 'library', mode: 'artists' }) %>
    • +
  • <%== can.route.link('Albums', { page: 'library', mode: 'albums' }) %>
    • +
  • <%== can.route.link('Songs', { page: 'library', mode: 'songs' }) %>
    • diff --git a/public/views/queue.ejs b/public/views/queue.ejs index efa43a8..c7060e0 100644 --- a/public/views/queue.ejs +++ b/public/views/queue.ejs @@ -1,5 +1,5 @@
    - + Library

    Queue