Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
T
tvgids
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
1
Issues
1
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Taddeüs Kroes
tvgids
Commits
d01a0d2c
Commit
d01a0d2c
authored
Dec 30, 2013
by
Taddeüs Kroes
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Added channel labels
parent
5b729ea0
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
57 additions
and
18 deletions
+57
-18
guide.coffee
guide.coffee
+27
-7
index.html
index.html
+3
-7
style.sass
style.sass
+27
-4
No files found.
guide.coffee
View file @
d01a0d2c
...
@@ -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
()
+
3
8
)
+
'px'
)
@
$
(
'.timeline'
).
css
(
'top'
,
(
@
$el
.
scrollTop
()
+
3
7
)
+
'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
)
...
...
index.html
View file @
d01a0d2c
...
@@ -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>
...
...
style.sass
View file @
d01a0d2c
$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
:
2
1
px
height
:
2
0
px
//.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
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment