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

Added settings panel with selectable favorite channels

parent ce521503
No related branches found
No related tags found
No related merge requests found
ALL := style.css guide.js
ALL := style.css guide.js settings.js
.PHONY: all clean
......
......@@ -2,10 +2,10 @@
# Config
#
#FETCH_URL = 'http://www.tvgids.nl/json/lists/programs.php'
FETCH_URL = 'programs.php'
HOUR_WIDTH = 200
CHANNEL_LABEL_WIDTH = 180
STORAGE_NAME = 'tvgids-channels'
#SCROLL_MULTIPLIER = HOUR_WIDTH
#
......@@ -38,8 +38,8 @@ Program = Backbone.Model.extend(
sort: ''
start: 0
end: 0
#article_id: null
#article_title: null
article_id: null
article_title: null
)
ChannelList = Backbone.Collection.extend(
......@@ -47,30 +47,25 @@ ChannelList = Backbone.Collection.extend(
comparator: (a, b) -> parseInt(a.get('id')) - parseInt(b.get('id'))
initialize: (models, options) ->
@fetchVisible()
@visible = if localStorage.hasOwnProperty(STORAGE_NAME) \
then localStorage.getItem(STORAGE_NAME).split(',') else @pluck('id')
fetch: ->
@reset(CHANNELS)
#@reset(CHANNELS.slice(0,3))
#$.getJSON('channels.php', (data) => @reset(data))
@propagateVisible()
fetchVisible: ->
visible = if localStorage.hasOwnProperty('channels') \
then localStorage.getItem('channels').split(',') else @pluck('id')
@setVisible(visible)
propagateVisible: ->
for id in @visible
if @length and not @findWhere(id: id)
console.log 'not found:', id, typeof id, typeof @at(0).get('id')
@findWhere(id: id)?.set(visible: true)
saveVisible: ->
selected = (c.id for c in @channels if c.visible)
localStorage.setItem('channels', selected.join(','))
setVisible: (visible, save=false) ->
for id in visible
@findWhere(id: id).set(visible: true)
for id in _.difference(@pluck('id'), visible)
@findWhere(id: id).set(visible: false)
@saveVisible() if save
for id in _.difference(@pluck('id'), @visible)
if not @findWhere(id: id)
console.log 'not found:', id
@findWhere(id: id)?.set(visible: false)
fetchPrograms: (day) ->
$.getJSON(
......@@ -86,8 +81,8 @@ ChannelList = Backbone.Collection.extend(
sort: p.soort
start: Date.parse(p.datum_start)
end: Date.parse(p.datum_end)
#article_id: p.artikel_id
#article_title: p.artikel_titel
article_id: p.artikel_id
article_title: p.artikel_titel
) for p in programs
))
)
......@@ -100,7 +95,6 @@ ChannelList = Backbone.Collection.extend(
ChannelView = Backbone.View.extend(
tagName: 'div'
className: 'channel'
#template: _.template($('#channel-template').html())
initialize: ->
@listenTo(@model, 'change:programs', @render)
......@@ -153,11 +147,16 @@ ChannelLabelView = Backbone.View.extend(
addChannels: ->
@$el.empty()
Channels.each((channel) ->
@$el.append('<div class="label">' + channel.get('name') + '</div>')
elem = $('<div id="label-' + channel.get('id') + '" class="label"/>')
elem.html(channel.get('name')).toggle(channel.get('visible')).appendTo(@el)
@listenTo(channel, 'change:visible', -> @toggleVisible(channel))
, @)
moveTop: (delta) ->
@$el.css('top', (@$el.position().top - delta) + 'px')
toggleVisible: (channel) ->
@$('#label-' + channel.get('id')).toggle(channel.get('visible'))
)
AppView = Backbone.View.extend(
......
STORAGE_NAME = 'tvgids-channels'
visible = if localStorage.hasOwnProperty(STORAGE_NAME) \
then localStorage.getItem(STORAGE_NAME).split(',') \
else _.pluck(CHANNELS, 'id')
_.each CHANNELS, (channel) ->
is_visible = _.contains(visible, channel.id)
input = $('<input type="checkbox" name="channels[]" value="' + channel.id + '">')
input.attr('checked', is_visible)
input.change(-> $(@).parent().toggleClass('disabled', not $(@).is(':checked')))
input.change(-> $('#select-channels').submit())
elem = $('<label/>').html(channel.name)
elem.prepend(input)
elem.toggleClass('disabled', not is_visible)
elem.appendTo('#select-channels .options')
$('#select-channels').submit (e) ->
e.preventDefault()
selected = ($(i).val() for i in $('input', @) when $(i).is(':checked'))
localStorage.setItem(STORAGE_NAME, selected.join(','))
setall = (c) -> $('#select-channels input').prop('checked', c).change()
$('#select-all').click -> setall(true)
$('#select-none').click -> setall(false)
<!doctype html>
<html>
<head>
<title>TV gids - Selecteer zenders</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="navbar">
<a href="javascript:void(0);" id="yesterday" class="navitem disabled">Gisteren</a>
<a href="index.html" id="today" class="navitem">Vandaag</a>
<a href="javascript:void(0);" id="tomorrow" class="navitem disabled">Morgen</a>
<a href="settings.html" class="navitem active">Selecteer zenders</a>
</div>
<form id="select-channels" class="select-channels">
<div class="options"></div>
<button id="select-all">Selecteer alle</button>
<button id="select-none">Deselecteer alle</button>
</form>
<script src="lib/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="lib/underscore-min.js" type="text/javascript"></script>
<script src="channels.js" type="text/javascript"></script>
<script src="settings.js" type="text/javascript"></script>
</body>
</html>
// Generated by CoffeeScript 1.3.3
(function() {
var STORAGE_NAME, setall, visible;
STORAGE_NAME = 'tvgids-channels';
visible = localStorage.hasOwnProperty(STORAGE_NAME) ? localStorage.getItem(STORAGE_NAME).split(',') : _.pluck(CHANNELS, 'id');
_.each(CHANNELS, function(channel) {
var elem, input, is_visible;
is_visible = _.contains(visible, channel.id);
input = $('<input type="checkbox" name="channels[]" value="' + channel.id + '">');
input.attr('checked', is_visible);
input.change(function() {
return $(this).parent().toggleClass('disabled', !$(this).is(':checked'));
});
input.change(function() {
return $('#select-channels').submit();
});
elem = $('<label/>').html(channel.name);
elem.prepend(input);
elem.toggleClass('disabled', !is_visible);
return elem.appendTo('#select-channels .options');
});
$('#select-channels').submit(function(e) {
var i, selected;
e.preventDefault();
selected = (function() {
var _i, _len, _ref, _results;
_ref = $('input', this);
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
i = _ref[_i];
if ($(i).is(':checked')) {
_results.push($(i).val());
}
}
return _results;
}).call(this);
return localStorage.setItem(STORAGE_NAME, selected.join(','));
});
setall = function(c) {
return $('#select-channels input').prop('checked', c).change();
};
$('#select-all').click(function() {
return setall(true);
});
$('#select-none').click(function() {
return setall(false);
});
}).call(this);
......@@ -31,6 +31,10 @@ html, body
color: #fff
background-color: #1a1a1a
&.disabled
color: #676767
cursor: default
.guide
width: 100%
height: 100%
......@@ -119,3 +123,18 @@ html, body
height: $channel-height - 10px
margin-bottom: 2px
border-right: 1px solid #bbb
.select-channels
margin-top: 38px
label
padding: 5px
margin: 4px 4px 0 0
display: inline-block
background-color: #f1f1f1
&.disabled
opacity: 0.5
button
margin: 6px 0 6px 6px
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment