Почетна Преглед Помоћ
Пријавите се
taddeus
/
tvgids
1
0
Креирај огранак 0
Датотеке Дискусије 0 Захтеви за спајање 0 Вики
Преглед изворни кода

Added channel labels

Taddeus Kroes пре 12 година
родитељ
5b729ea02c
комит
d01a0d2c61
3 измењених фајлова са 57 додато и 18 уклоњено
Један поглед Покажи статистику Diff
  1. 27 7
      guide.coffee
  2. 3 7
      index.html
  3. 27 4
      style.sass

+ 27 - 7
guide.coffee
Прегледај датотеку 

@@ -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(
 
 
 
 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(
 
                 @$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(
 
 
 
     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(
 
         @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: () ->
 
-        @$('.channels').empty()
 
+    addChannels: ->
 
+        @$('.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(
 
         $(@$('.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)

+ 3 - 7
index.html
Прегледај датотеку 

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

+ 27 - 4
style.sass
Прегледај датотеку 

@@ -1,6 +1,8 @@
 
 $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
 
     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
 
     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
 
         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
 
     //    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
 
         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
 
     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