Added channel labels

d01a0d2c · Taddeüs Kroes · 5b729ea0 · d01a0d2c · d01a0d2c · d01a0d2c
Commit d01a0d2c authored Dec 30, 2013 by Taddeüs Kroes
Show whitespace changes
Inline Side-by-side

Showing with 57 additions and 18 deletions

guide.coffee guide.coffee +27 -7

index.html index.html +3 -7

style.sass style.sass +27 -4

No files found.
--- a/guide.coffee
+++ b/guide.coffee
@@ -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)

--- a/index.html
+++ b/index.html
@@ -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>

--- a/style.sass
+++ b/style.sass
 $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