Commit d01a0d2c authored by Taddeüs Kroes's avatar Taddeüs Kroes

Added channel labels

parent 5b729ea0
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
#FETCH_URL = 'http://www.tvgids.nl/json/lists/programs.php' #FETCH_URL = 'http://www.tvgids.nl/json/lists/programs.php'
FETCH_URL = 'programs.php' FETCH_URL = 'programs.php'
HOUR_WIDTH = 200 HOUR_WIDTH = 200
CHANNEL_LABEL_WIDTH = 180
#SCROLL_MULTIPLIER = HOUR_WIDTH #SCROLL_MULTIPLIER = HOUR_WIDTH
# #
...@@ -43,12 +44,10 @@ Program = Backbone.Model.extend( ...@@ -43,12 +44,10 @@ Program = Backbone.Model.extend(
ChannelList = Backbone.Collection.extend( ChannelList = Backbone.Collection.extend(
model: Channel model: Channel
comparator: 'id' comparator: (a, b) -> parseInt(a.get('id')) - parseInt(b.get('id'))
initialize: (models, options) -> initialize: (models, options) ->
#_.each(CHANNELS, (props, id) => @add(_.extend({id: id}, props)))
@fetchVisible() @fetchVisible()
#@fetchPrograms(0)
fetch: -> fetch: ->
@reset(CHANNELS) @reset(CHANNELS)
...@@ -144,6 +143,23 @@ ProgramView = Backbone.View.extend( ...@@ -144,6 +143,23 @@ ProgramView = Backbone.View.extend(
@$el.addClass('current') @$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( AppView = Backbone.View.extend(
el: $('#guide') el: $('#guide')
...@@ -155,8 +171,9 @@ AppView = Backbone.View.extend( ...@@ -155,8 +171,9 @@ AppView = Backbone.View.extend(
moveTimeline: -> moveTimeline: ->
if @$el.scrollTop() != @prevScrollTop if @$el.scrollTop() != @prevScrollTop
@trigger('scroll', @$el.scrollTop() - @prevScrollTop)
@prevScrollTop = @$el.scrollTop() @prevScrollTop = @$el.scrollTop()
@$('.timeline').css('top', (@$el.scrollTop() + 38) + 'px') @$('.timeline').css('top', (@$el.scrollTop() + 37) + 'px')
initialize: -> initialize: ->
@prevScrollTop = null @prevScrollTop = null
...@@ -164,13 +181,15 @@ AppView = Backbone.View.extend( ...@@ -164,13 +181,15 @@ AppView = Backbone.View.extend(
@listenTo(Channels, 'reset', @addChannels) @listenTo(Channels, 'reset', @addChannels)
@listenTo(Settings, 'change:day', @fetchPrograms) @listenTo(Settings, 'change:day', @fetchPrograms)
@labelview = new ChannelLabelView(app: @)
@updateIndicator() @updateIndicator()
@centerIndicator() @centerIndicator()
Channels.fetch() Channels.fetch()
setInterval((=> @updateIndicator()), 3600000 / HOUR_WIDTH) setInterval((=> @updateIndicator()), 3600000 / HOUR_WIDTH)
addChannels: () -> addChannels: ->
@$('.channels').empty() @$('.channels > .channel').remove()
Channels.each((channel) -> Channels.each((channel) ->
view = new ChannelView(model: channel) view = new ChannelView(model: channel)
view.render() view.render()
...@@ -185,7 +204,8 @@ AppView = Backbone.View.extend( ...@@ -185,7 +204,8 @@ AppView = Backbone.View.extend(
$(@$('.navbar .navitem')[day + 1]).addClass('active') $(@$('.navbar .navitem')[day + 1]).addClass('active')
updateIndicator: -> 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: -> centerIndicator: ->
@$el.scrollLeft(@$('.indicator').position().left - @$el.width() / 2) @$el.scrollLeft(@$('.indicator').position().left - @$el.width() / 2)
......
...@@ -6,8 +6,10 @@ ...@@ -6,8 +6,10 @@
</head> </head>
<body> <body>
<div id="guide" class="guide"> <div id="guide" class="guide">
<div class="channels"></div> <div class="channels">
</div>
<div class="indicator"></div> <div class="indicator"></div>
<div class="channel-labels"></div>
<div class="timeline-bg"></div> <div class="timeline-bg"></div>
<div class="timeline"> <div class="timeline">
<div class="hour">00:00</div> <div class="hour">00:00</div>
...@@ -49,12 +51,6 @@ ...@@ -49,12 +51,6 @@
<script src="lib/backbone-min.js" type="text/javascript"></script> <script src="lib/backbone-min.js" type="text/javascript"></script>
<script src="lib/json2.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="channels.js" type="text/javascript"></script>
<script src="guide.js" type="text/javascript"></script> <script src="guide.js" type="text/javascript"></script>
</body> </body>
......
$indicator-color: red $indicator-color: red
$hour-width: 200px $hour-width: 200px
$channel-height: 34px $channel-height: 34px
$header-height: 64px
$channel-label-width: 180px
html, body html, body
width: 100% width: 100%
...@@ -40,6 +42,7 @@ html, body ...@@ -40,6 +42,7 @@ html, body
height: 21px height: 21px
top: 38px top: 38px
position: fixed position: fixed
position: fixed
background-color: #fdfdfd background-color: #fdfdfd
.timeline .timeline
...@@ -48,6 +51,7 @@ html, body ...@@ -48,6 +51,7 @@ html, body
position: absolute position: absolute
top: 38px top: 38px
background-color: #fdfdfd background-color: #fdfdfd
margin-left: $channel-label-width - 1px
.hour .hour
font: normal 13px Helvetica font: normal 13px Helvetica
...@@ -55,7 +59,7 @@ html, body ...@@ -55,7 +59,7 @@ html, body
width: $hour-width - 7px width: $hour-width - 7px
border-left: 1px solid #444 border-left: 1px solid #444
padding: 5px 0 0 6px padding: 5px 0 0 6px
height: 21px height: 20px
//.label //.label
// width: 50px // width: 50px
...@@ -63,7 +67,7 @@ html, body ...@@ -63,7 +67,7 @@ html, body
// text-align: center // text-align: center
.channels .channels
margin-top: 66px margin: $header-height 0 0 ($channel-label-width - 1px)
width: 24 * $hour-width width: 24 * $hour-width
overflow: hidden overflow: hidden
...@@ -76,7 +80,8 @@ html, body ...@@ -76,7 +80,8 @@ html, body
white-space: nowrap white-space: nowrap
height: $channel-height - 10px height: $channel-height - 10px
padding: 8px 0 0 8px padding: 8px 0 0 8px
border-left: 2px solid white border-left: 1px solid white
border-right: 1px solid white
background-color: #eee background-color: #eee
font: normal 13px/15px Helvetica font: normal 13px/15px Helvetica
overflow: hidden overflow: hidden
...@@ -94,5 +99,23 @@ html, body ...@@ -94,5 +99,23 @@ html, body
position: absolute position: absolute
width: 1px width: 1px
height: 100% height: 100%
top: 66px top: $header-height
background-color: $indicator-color 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
Markdown is supported
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