Skip to content
Snippets Groups Projects
Commit d01a0d2c authored by Taddeüs Kroes's avatar Taddeüs Kroes
Browse files

Added channel labels

parent 5b729ea0
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
guide.coffee
+ 27
− 7
View file @ d01a0d2c
......@@ -5,6 +5,7 @@
#FETCH_URL = 'http://www.tvgids.nl/json/lists/programs.php'
FETCH_URL = 'programs.php'
HOUR_WIDTH = 200
CHANNEL_LABEL_WIDTH = 180
#SCROLL_MULTIPLIER = HOUR_WIDTH
#
......@@ -43,12 +44,10 @@ Program = Backbone.Model.extend(
ChannelList = Backbone.Collection.extend(
model: Channel
comparator: 'id'
comparator: (a, b) -> parseInt(a.get('id')) - parseInt(b.get('id'))
initialize: (models, options) ->
#_.each(CHANNELS, (props, id) => @add(_.extend({id: id}, props)))
@fetchVisible()
#@fetchPrograms(0)
fetch: ->
@reset(CHANNELS)
......@@ -144,6 +143,23 @@ ProgramView = Backbone.View.extend(
@$el.addClass('current')
)
ChannelLabelView = Backbone.View.extend(
el: $('.channel-labels')
initialize: (options) ->
@listenTo(Channels, 'reset', @addChannels)
@listenTo(options.app, 'scroll', @moveTop)
addChannels: ->
@$el.empty()
Channels.each((channel) ->
@$el.append('<div class="label">' + channel.get('name') + '</div>')
, @)
moveTop: (delta) ->
@$el.css('top', (@$el.position().top - delta) + 'px')
)
AppView = Backbone.View.extend(
el: $('#guide')
......@@ -155,8 +171,9 @@ AppView = Backbone.View.extend(
moveTimeline: ->
if @$el.scrollTop() != @prevScrollTop
@trigger('scroll', @$el.scrollTop() - @prevScrollTop)
@prevScrollTop = @$el.scrollTop()
@$('.timeline').css('top', (@$el.scrollTop() + 38) + 'px')
@$('.timeline').css('top', (@$el.scrollTop() + 37) + 'px')
initialize: ->
@prevScrollTop = null
......@@ -164,13 +181,15 @@ AppView = Backbone.View.extend(
@listenTo(Channels, 'reset', @addChannels)
@listenTo(Settings, 'change:day', @fetchPrograms)
@labelview = new ChannelLabelView(app: @)
@updateIndicator()
@centerIndicator()
Channels.fetch()
setInterval((=> @updateIndicator()), 3600000 / HOUR_WIDTH)
addChannels: () ->
@$('.channels').empty()
addChannels: ->
@$('.channels > .channel').remove()
Channels.each((channel) ->
view = new ChannelView(model: channel)
view.render()
......@@ -185,7 +204,8 @@ AppView = Backbone.View.extend(
$(@$('.navbar .navitem')[day + 1]).addClass('active')
updateIndicator: ->
@$('.indicator').css('left', time2px(seconds_today(Date.now())) + 'px')
left = time2px(seconds_today(Date.now())) + CHANNEL_LABEL_WIDTH - 1
@$('.indicator').css('left', left + 'px')
centerIndicator: ->
@$el.scrollLeft(@$('.indicator').position().left - @$el.width() / 2)
......
index.html
+ 3
− 7
View file @ d01a0d2c
......@@ -6,8 +6,10 @@
</head>
<body>
<div id="guide" class="guide">
<div class="channels"></div>
<div class="channels">
</div>
<div class="indicator"></div>
<div class="channel-labels"></div>
<div class="timeline-bg"></div>
<div class="timeline">
<div class="hour">00:00</div>
......@@ -49,12 +51,6 @@
<script src="lib/backbone-min.js" type="text/javascript"></script>
<script src="lib/json2.js" type="text/javascript"></script>
<script type="text/template" id="program-template">
<div class="program">
<%= title %>
</div>
</script>
<script src="channels.js" type="text/javascript"></script>
<script src="guide.js" type="text/javascript"></script>
</body>
......
style.sass
+ 27
− 4
View file @ d01a0d2c
$indicator-color: red
$hour-width: 200px
$channel-height: 34px
$header-height: 64px
$channel-label-width: 180px
html, body
width: 100%
......@@ -40,6 +42,7 @@ html, body
height: 21px
top: 38px
position: fixed
position: fixed
background-color: #fdfdfd
.timeline
......@@ -48,6 +51,7 @@ html, body
position: absolute
top: 38px
background-color: #fdfdfd
margin-left: $channel-label-width - 1px
.hour
font: normal 13px Helvetica
......@@ -55,7 +59,7 @@ html, body
width: $hour-width - 7px
border-left: 1px solid #444
padding: 5px 0 0 6px
height: 21px
height: 20px
//.label
// width: 50px
......@@ -63,7 +67,7 @@ html, body
// text-align: center
.channels
margin-top: 66px
margin: $header-height 0 0 ($channel-label-width - 1px)
width: 24 * $hour-width
overflow: hidden
......@@ -76,7 +80,8 @@ html, body
white-space: nowrap
height: $channel-height - 10px
padding: 8px 0 0 8px
border-left: 2px solid white
border-left: 1px solid white
border-right: 1px solid white
background-color: #eee
font: normal 13px/15px Helvetica
overflow: hidden
......@@ -94,5 +99,23 @@ html, body
position: absolute
width: 1px
height: 100%
top: 66px
top: $header-height
background-color: $indicator-color
.channel-labels
width: $channel-label-width - 2px
position: fixed
top: $header-height
left: 0
border-right: 2px solid #fff
.label
width: $channel-label-width - 13px
background-color: #e5e5e5
color: #666
font: bold 13px/15px Helvetica
padding: 8px 10px 0 0
text-align: right
height: $channel-height - 10px
margin-bottom: 2px
border-right: 1px solid #bbb
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment