init
This commit is contained in:
@@ -0,0 +1,63 @@
|
||||
/*
|
||||
* Document : radio.js
|
||||
* Author : Gerrit Linnemann
|
||||
* Description: Radio-functionallity.
|
||||
*
|
||||
*/
|
||||
|
||||
var Radio = function() {
|
||||
|
||||
var channels;
|
||||
var $navigation;
|
||||
|
||||
return {
|
||||
init: function(channels_) {
|
||||
channels = channels_;
|
||||
$navigation = $('#navigation');
|
||||
|
||||
initTiles();
|
||||
console.log('Radio initialized with ' + channels.length + ' channels');
|
||||
}
|
||||
};
|
||||
|
||||
/* private */
|
||||
function initTiles() {
|
||||
var $tileTemplate = $navigation.find('.tile.template');
|
||||
|
||||
var counter = 1;
|
||||
while(counter <= channels.length) {
|
||||
var idx = counter - 1;
|
||||
var channel = channels[idx];
|
||||
var $tile = $tileTemplate.clone();
|
||||
|
||||
fillTileWithChannel($tile, channel);
|
||||
addClickToTile($tile);
|
||||
|
||||
counter++;
|
||||
}
|
||||
}
|
||||
|
||||
/* private */
|
||||
function fillTileWithChannel($tile, channel) {
|
||||
$tile.appendTo($navigation);
|
||||
|
||||
$tile.attr('href', channel.stream).attr('title', channel.title).attr('data-type', channel.type);
|
||||
$tile.find('.icon').attr('src', channel.icon);
|
||||
$tile.find('.title').html(channel.title).hide();
|
||||
|
||||
$tile.hide();
|
||||
$tile.removeClass('hidden');
|
||||
$tile.fadeIn();
|
||||
}
|
||||
|
||||
/* private */
|
||||
function addClickToTile($tile) {
|
||||
$tile.click(function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var stream = $tile.attr('href');
|
||||
console.log('Stream: ' + stream);
|
||||
});
|
||||
}
|
||||
|
||||
}();
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,177 @@
|
||||
/* RESET */
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
address,
|
||||
big,
|
||||
cite,
|
||||
code,
|
||||
del,
|
||||
dfn,
|
||||
em,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
q,
|
||||
s,
|
||||
samp,
|
||||
small,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
tt,
|
||||
var,
|
||||
b,
|
||||
u,
|
||||
i,
|
||||
center,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
article,
|
||||
aside,
|
||||
canvas,
|
||||
details,
|
||||
embed,
|
||||
figure,
|
||||
figcaption,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
output,
|
||||
ruby,
|
||||
section,
|
||||
summary,
|
||||
time,
|
||||
mark,
|
||||
audio,
|
||||
video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
/* RESET END */
|
||||
html,
|
||||
body {
|
||||
height: 98.5%;
|
||||
}
|
||||
body {
|
||||
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
|
||||
background-color: rgba(0, 0, 0, 0.38);
|
||||
}
|
||||
a {
|
||||
color: #00B7FF;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
#navigation {
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
align-content: center;
|
||||
}
|
||||
#navigation .tile {
|
||||
background-color: rgba(255, 255, 255, 0.68);
|
||||
margin: 10px;
|
||||
flex-grow: 1;
|
||||
flex-basis: auto;
|
||||
align-self: flex-start;
|
||||
height: 100%;
|
||||
}
|
||||
#navigation .tile .content {
|
||||
height: inherit;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
#navigation .tile .content .icon {
|
||||
display: block;
|
||||
margin: auto;
|
||||
height: 50%;
|
||||
}
|
||||
#navigation .tile .content .title {
|
||||
display: block;
|
||||
margin-top: 20px;
|
||||
font-size: 2.2em;
|
||||
}
|
||||
#information {
|
||||
background-color: rgba(255, 255, 255, 0.68);
|
||||
height: 30%;
|
||||
margin: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
@backgroundcolor: rgba(0,0,0,0.38);
|
||||
@backgroundcolor_element: rgba(255,255,255,0.68);
|
||||
@margin_element: 10px;
|
||||
|
||||
|
||||
|
||||
/* RESET */
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* RESET END */
|
||||
|
||||
|
||||
|
||||
html, body {
|
||||
height: 98.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
|
||||
background-color: @backgroundcolor;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00B7FF;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#navigation {
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
align-content: center;
|
||||
|
||||
.tile {
|
||||
background-color: @backgroundcolor_element;
|
||||
margin: @margin_element;
|
||||
flex-grow: 1;
|
||||
flex-basis: auto;
|
||||
align-self: flex-start;
|
||||
height: 100%;
|
||||
|
||||
.content {
|
||||
height: inherit;
|
||||
text-align: center;
|
||||
padding: @margin_element;
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
margin: auto;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
margin-top: 20px;
|
||||
font-size: 2.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#information {
|
||||
background-color: @backgroundcolor_element;
|
||||
height: 30%;
|
||||
margin: @margin_element;
|
||||
margin-top: (@margin_element * 2);
|
||||
}
|
||||
Reference in New Issue
Block a user