adapting front page
This commit is contained in:
Micho
parent
3dbfd6c0d5
commit
ce38c8d4a3
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -1,994 +0,0 @@
|
|||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
#container {
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
#content {
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
#grid {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
|
||||
}
|
||||
#countries {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
margin: 0;
|
||||
padding-right: -2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#countries .btn-group {
|
||||
position: absolute;
|
||||
margin: 10px 0 0 0;
|
||||
left: 0px;
|
||||
right: -2px;
|
||||
}
|
||||
#countries .btn-group:first-child button {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
#countries .btn-group:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#countries .btn-group:last-child {
|
||||
top:25px;
|
||||
}
|
||||
|
||||
#countries .btn-group:last-child button {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
#countries button {
|
||||
text-align: center !important;
|
||||
overflow: hidden;
|
||||
padding: 3px 0px 3px 1px !important;
|
||||
}
|
||||
|
||||
#gridSort {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#gridSort button {
|
||||
width: 33.33%;
|
||||
text-align: center !important;
|
||||
padding-left: 1px !important;
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
|
||||
#footer {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
color: #AAA;
|
||||
}
|
||||
|
||||
#footer a {
|
||||
color: #AAA;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #CCC;
|
||||
}
|
||||
|
||||
/* responsive design */
|
||||
|
||||
@media screen and (min-width: 860px) {
|
||||
|
||||
#container {
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 860px;
|
||||
height: 610px;
|
||||
overflow: hidden;
|
||||
margin: 0px auto;
|
||||
padding: 0px;
|
||||
|
||||
}
|
||||
|
||||
#content {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 860px;
|
||||
height: 610px
|
||||
|
||||
}
|
||||
|
||||
#grid {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
overflow: visible;
|
||||
background-color: #000;
|
||||
|
||||
}
|
||||
|
||||
#gridImage, #gridCanvas, #gridCanvasOverlay {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
#marker {
|
||||
|
||||
display: none;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
width: 20px;
|
||||
height: 15px;
|
||||
border: 3px solid #000;
|
||||
|
||||
}
|
||||
|
||||
#tooltip {
|
||||
|
||||
position: absolute;
|
||||
display: none;
|
||||
margin-right: -300px;
|
||||
background: rgba(0,0,0,0.8);
|
||||
padding: 5px 10px 5px 10px;
|
||||
color: #FFF;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
max-width: 220px;
|
||||
pointer-events: none;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.6);
|
||||
z-index: 600;
|
||||
|
||||
}
|
||||
|
||||
#infobox {
|
||||
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
||||
background: #FFF;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 320px;
|
||||
height: 580px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.6);
|
||||
padding: 3px 10px 17px 10px;
|
||||
z-index: 500;
|
||||
|
||||
}
|
||||
#infoboxContent {
|
||||
margin: 10px;
|
||||
max-height: 540px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
#infobox p {
|
||||
|
||||
line-height: 1.2em;
|
||||
font-size: 12px;
|
||||
margin: 5px 0;
|
||||
|
||||
}
|
||||
|
||||
#infobox #close {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
|
||||
}
|
||||
|
||||
#display-number {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
width: 340px;
|
||||
height: 110px;
|
||||
|
||||
}
|
||||
|
||||
#display-number-content {
|
||||
|
||||
font-size: 70px;
|
||||
line-height: 70px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
#footer {
|
||||
width: 340px;
|
||||
height: 20px;
|
||||
right: 5px;
|
||||
top: 590px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#controller-navigation {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 140px;
|
||||
width: 340px;
|
||||
height: 450px;
|
||||
|
||||
}
|
||||
|
||||
#gridFlag {
|
||||
|
||||
margin: 0px 0px 32px;
|
||||
|
||||
}
|
||||
|
||||
#controller-navigation .btn-full,
|
||||
#controller-navigation .btn-group-vertical button {
|
||||
|
||||
width: 340px;
|
||||
text-align: left;
|
||||
|
||||
}
|
||||
|
||||
#countries {
|
||||
height: 95px;
|
||||
}
|
||||
|
||||
#countries .btn-group:nth-child(2) {
|
||||
top:27px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#countries .btn-group:nth-child(2) button {
|
||||
border-radius: 0px !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
#countries .btn-group:last-child {
|
||||
top:54px;
|
||||
}
|
||||
|
||||
|
||||
#small-warning {
|
||||
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width: 640px) and (max-width: 859px) {
|
||||
|
||||
#container {
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 640px;
|
||||
height: 490px;
|
||||
overflow: hidden;
|
||||
margin: 0px auto;
|
||||
padding: 0px;
|
||||
|
||||
}
|
||||
|
||||
#content {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 640px;
|
||||
height: 490px
|
||||
|
||||
}
|
||||
|
||||
#grid {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
width: 400px;
|
||||
height: 480px;
|
||||
overflow: visible;
|
||||
background-color: #000;
|
||||
|
||||
}
|
||||
|
||||
#gridImage, #gridCanvas, #gridCanvasOverlay {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
height: 480px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
#marker {
|
||||
|
||||
display: none;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
width: 16px;
|
||||
height: 12px;
|
||||
border: 3px solid #000;
|
||||
|
||||
}
|
||||
|
||||
#tooltip {
|
||||
|
||||
position: absolute;
|
||||
display: none;
|
||||
margin-right: -300px;
|
||||
background: rgba(0,0,0,0.8);
|
||||
padding: 5px 10px 5px 10px;
|
||||
color: #FFF;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
max-width: 220px;
|
||||
pointer-events: none;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.6);
|
||||
z-index: 600;
|
||||
|
||||
}
|
||||
|
||||
#infobox {
|
||||
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
||||
background: #FFF;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 360px;
|
||||
max-height: 450px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.6);
|
||||
padding: 3px 10px 17px 10px;
|
||||
z-index: 500;
|
||||
|
||||
}
|
||||
|
||||
#infoboxContent {
|
||||
margin: 10px 10px 40px 10px;
|
||||
max-height: 400px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
#infobox p {
|
||||
|
||||
line-height: 1.2em;
|
||||
font-size: 12px;
|
||||
margin: 5px 0;
|
||||
|
||||
}
|
||||
|
||||
#infobox #close {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
|
||||
}
|
||||
|
||||
#display-number {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
width: 220px;
|
||||
height: 50px;
|
||||
|
||||
}
|
||||
|
||||
#display-number-content {
|
||||
|
||||
font-size: 50px;
|
||||
line-height: 50px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#footer {
|
||||
width: 220px;
|
||||
height: 20px;
|
||||
right: 5px;
|
||||
top: 470px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#controller-navigation {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 110px;
|
||||
width: 220px;
|
||||
height: 350px;
|
||||
|
||||
}
|
||||
|
||||
#gridFlag {
|
||||
|
||||
margin: 0px 0px 27px;
|
||||
|
||||
}
|
||||
|
||||
#controller-navigation h3 {
|
||||
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#controller-navigation .btn-full,
|
||||
#controller-navigation .btn-group-vertical button {
|
||||
|
||||
width: 220px;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
padding: 5px 8px;
|
||||
|
||||
}
|
||||
|
||||
#controller-navigation #gridSort button {
|
||||
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
padding: 5px 12px 5px 13px;
|
||||
|
||||
}
|
||||
|
||||
#countries button {
|
||||
text-align: center !important;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
padding: 2px 0px 2px 1px !important;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
#small-warning {
|
||||
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width: 520px) and (max-width: 639px) {
|
||||
|
||||
#container {
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 520px;
|
||||
height: 370px;
|
||||
overflow: hidden;
|
||||
margin: 0px auto;
|
||||
padding: 0px;
|
||||
|
||||
}
|
||||
|
||||
#content {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 520px;
|
||||
height: 370px
|
||||
|
||||
}
|
||||
|
||||
#grid {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
width: 275px;
|
||||
height: 360px;
|
||||
overflow: visible;
|
||||
background-color: #000;
|
||||
|
||||
}
|
||||
|
||||
#gridImage, #gridCanvas, #gridCanvasOverlay {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 275px;
|
||||
height: 360px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
#marker {
|
||||
|
||||
display: none;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
width: 11px;
|
||||
height: 9px;
|
||||
border: 3px solid #000;
|
||||
|
||||
}
|
||||
|
||||
#tooltip {
|
||||
|
||||
position: absolute;
|
||||
display: none;
|
||||
margin-right: -275px;
|
||||
background: rgba(0,0,0,0.8);
|
||||
padding: 5px 10px 5px 10px;
|
||||
color: #FFF;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
max-width: 220px;
|
||||
pointer-events: none;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.6);
|
||||
z-index: 600;
|
||||
|
||||
}
|
||||
|
||||
#infobox {
|
||||
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
||||
background: #FFF;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
max-height: 380px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.6);
|
||||
padding: 3px 10px 40px 10px;
|
||||
z-index: 500;
|
||||
|
||||
}
|
||||
#infoboxContent {
|
||||
margin: 10px;
|
||||
max-height: 320px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
#infobox p {
|
||||
|
||||
line-height: 1.2em;
|
||||
font-size: 12px;
|
||||
margin: 5px 0;
|
||||
|
||||
}
|
||||
|
||||
#infobox #close {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
#display-number {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
width: 225px;
|
||||
height: 50px;
|
||||
padding: 0px;
|
||||
|
||||
}
|
||||
|
||||
#display-number-content {
|
||||
|
||||
font-size: 30px;
|
||||
line-height: 30px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
|
||||
#footer {
|
||||
width: 225px;
|
||||
height: 20px;
|
||||
right: 5px;
|
||||
top: 350px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#controller-navigation {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 65px;
|
||||
width: 225px;
|
||||
height: 290px;
|
||||
|
||||
}
|
||||
|
||||
#gridFlag {
|
||||
|
||||
margin: 0px 0px 23px;
|
||||
|
||||
}
|
||||
|
||||
#controller-navigation h3 {
|
||||
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#controller-navigation .btn-full,
|
||||
#controller-navigation .btn-group-vertical button {
|
||||
|
||||
width: 225px;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
padding: 5px 8px;
|
||||
letter-spacing: -0.04em;
|
||||
|
||||
}
|
||||
|
||||
#controller-navigation #gridSort button {
|
||||
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
padding: 5px 11px 5px 11px;
|
||||
letter-spacing: -0.04em;
|
||||
|
||||
}
|
||||
|
||||
#countries {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#small-warning {
|
||||
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width: 420px) and (max-width: 519px) {
|
||||
|
||||
#container {
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 740px;
|
||||
overflow: hidden;
|
||||
margin: 0px auto;
|
||||
padding: 0px;
|
||||
|
||||
}
|
||||
|
||||
#content {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 400px;
|
||||
height: 740px
|
||||
|
||||
}
|
||||
|
||||
#grid {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 220px;
|
||||
width: 400px;
|
||||
height: 480px;
|
||||
overflow: visible;
|
||||
background-color: #000;
|
||||
|
||||
}
|
||||
|
||||
#gridImage, #gridCanvas, #gridCanvasOverlay {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
height: 480px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
#marker {
|
||||
|
||||
display: none;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-image: url(../img/marker_640.png)
|
||||
|
||||
}
|
||||
|
||||
#tooltip {
|
||||
|
||||
position: absolute;
|
||||
display: none;
|
||||
margin-right: -300px;
|
||||
background: rgba(0,0,0,0.8);
|
||||
padding: 5px 10px 5px 10px;
|
||||
color: #FFF;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
max-width: 220px;
|
||||
pointer-events: none;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.6);
|
||||
z-index: 600;
|
||||
|
||||
}
|
||||
|
||||
#infobox {
|
||||
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
||||
background: #FFF;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 360px;
|
||||
max-height: 450px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.6);
|
||||
padding: 3px 10px 17px 10px;
|
||||
z-index: 500;
|
||||
|
||||
}
|
||||
|
||||
#infoboxContent {
|
||||
margin: 10px 10px 40px 10px;
|
||||
max-height: 400px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
#infobox p {
|
||||
|
||||
line-height: 1.2em;
|
||||
font-size: 12px;
|
||||
margin: 5px 0;
|
||||
|
||||
}
|
||||
|
||||
#infobox #close {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
|
||||
}
|
||||
|
||||
#display-number {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 10px;
|
||||
width: 145px;
|
||||
height: 51px;
|
||||
padding: 0px;
|
||||
|
||||
}
|
||||
|
||||
#display-number-content {
|
||||
|
||||
font-size: 31px;
|
||||
line-height: 31px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
|
||||
#controller-sortby {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 5px;
|
||||
width: 225px;
|
||||
height: 50px;
|
||||
padding: 0px;
|
||||
|
||||
}
|
||||
|
||||
#controller-sortby h3 {
|
||||
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
padding: 0px;
|
||||
margin: 5px 0px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#gridFlag {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 75px;
|
||||
z-index: 500;
|
||||
|
||||
}
|
||||
|
||||
#gridFlag h3 {
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 170px;
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 0px;
|
||||
margin: 7px 0px 0px;
|
||||
clear: both;
|
||||
|
||||
}
|
||||
|
||||
#gridFlag h3+.btn-group-vertical,
|
||||
#gridFlag h3+.btn-full {
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 225px;
|
||||
float: right;
|
||||
|
||||
}
|
||||
|
||||
#controller-navigation .btn-full,
|
||||
#controller-navigation .btn-group-vertical button {
|
||||
|
||||
width: 225px;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
padding: 5px 8px;
|
||||
letter-spacing: -0.04em;
|
||||
|
||||
}
|
||||
|
||||
#gridFlag .btn-group-vertical {
|
||||
|
||||
padding-bottom: 10px;
|
||||
|
||||
}
|
||||
|
||||
#footer {
|
||||
width: 225px;
|
||||
height: 20px;
|
||||
right: 5px;
|
||||
bottom: 10px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#controller-navigation #gridSort button {
|
||||
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
padding: 5px 11px 5px 11px;
|
||||
letter-spacing: -0.04em;
|
||||
|
||||
}
|
||||
|
||||
#countries {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#small-warning {
|
||||
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 419px) {
|
||||
|
||||
#container {
|
||||
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
min-width: 0px;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
#content {
|
||||
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
#footer {
|
||||
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
#small-warning {
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
|
@ -10,11 +10,12 @@ body {
|
|||
position: relative;
|
||||
margin: 0px auto;
|
||||
box-shadow: 0px 0px 40px -20px rgba(0,0,0,0.4);
|
||||
width: 860px;
|
||||
width: 950px;
|
||||
background: #fff;
|
||||
padding: 50px;
|
||||
padding: 30px;
|
||||
|
||||
}
|
||||
|
||||
.social {
|
||||
height: 35px;
|
||||
}
|
||||
|
|
@ -80,7 +81,7 @@ body {
|
|||
|
||||
}
|
||||
|
||||
a#odclogo {
|
||||
a#odclogo, a#pclogo, a#ntlogo {
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -89,26 +90,24 @@ body {
|
|||
font-size: 0px;
|
||||
text-indent: -1000px;
|
||||
color: transparent;
|
||||
background: url(../img/opendatacity.png) center center no-repeat;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
top: -5px;
|
||||
|
||||
}
|
||||
|
||||
a#mvlogo {
|
||||
a#odclogo {
|
||||
background: url(../img/opendatacity.png) center center no-repeat;
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 60px;
|
||||
font-size: 0px;
|
||||
text-indent: -1000px;
|
||||
color: transparent;
|
||||
background: url(../img/myvideo.png) center center no-repeat;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
a#pclogo {
|
||||
background: url(../img/picocell.png) center center no-repeat;
|
||||
|
||||
}
|
||||
|
||||
a#ntlogo {
|
||||
background: url(../img/newthinking.png) center center no-repeat;
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 256 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 477 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 247 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 729 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
File diff suppressed because it is too large
Load Diff
|
|
@ -1,377 +0,0 @@
|
|||
function Canvas(options) {
|
||||
var me = this;
|
||||
|
||||
var imageNode = options.imageNode;
|
||||
var node = options.node;
|
||||
var nodeOverlay = options.nodeOverlay;
|
||||
|
||||
var context = node[0].getContext("2d");
|
||||
var contextOverlay = nodeOverlay[0].getContext("2d");
|
||||
|
||||
var data = options.data;
|
||||
var columns = options.columns;
|
||||
var rows = (data.length/columns);
|
||||
var thumbWidth = options.thumbWidth;
|
||||
var thumbHeight = options.thumbHeight;
|
||||
|
||||
var width = thumbWidth*columns;
|
||||
var height = thumbHeight*rows;
|
||||
|
||||
var projectX = [];
|
||||
var projectY = [];
|
||||
var deproject = [];
|
||||
|
||||
var indexes = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
entry = data[i];
|
||||
entry.id = i;
|
||||
indexes[i] = { entry:entry, sortBy:i, id:i };
|
||||
|
||||
var x = (i % columns);
|
||||
var y = Math.floor(i/columns);
|
||||
|
||||
entry.oldPos = i;
|
||||
entry.newPos = i;
|
||||
entry.oldColor = [0,0,0,0];
|
||||
entry.newColor = [0,0,0,0];
|
||||
|
||||
projectX[i] = x*thumbWidth;
|
||||
projectY[i] = y*thumbHeight;
|
||||
|
||||
if (deproject[x] === undefined) deproject[x] = [];
|
||||
|
||||
deproject[x][y] = i;
|
||||
}
|
||||
|
||||
nodeOverlay.mouseenter(function (e) { me.toolTip.show(e.pageX, e.pageY) });
|
||||
nodeOverlay.mousemove( function (e) { me.toolTip.show(e.pageX, e.pageY) });
|
||||
nodeOverlay.mouseleave(function (e) { me.toolTip.hide() });
|
||||
nodeOverlay.click(function (e) {
|
||||
me.toolTip.showInfobox();
|
||||
});
|
||||
|
||||
me.toolTip = new (function () {
|
||||
var me = this;
|
||||
var status = {};
|
||||
var markedEntry;
|
||||
|
||||
var tooltip = $('#tooltip');
|
||||
var marker = $('#marker');
|
||||
var infobox = $('#infobox');
|
||||
var infoboxContent = $('#infoboxContent');
|
||||
|
||||
$('#infobox .close').click(function () { infobox.hide() });
|
||||
|
||||
me.hide = function () {
|
||||
if (status.shown) {
|
||||
tooltip.hide();
|
||||
marker.hide();
|
||||
}
|
||||
status.shown = false;
|
||||
}
|
||||
|
||||
me.show = function (x, y) {
|
||||
if (!status.shown) {
|
||||
tooltip.show();
|
||||
marker.show();
|
||||
}
|
||||
status.shown = true;
|
||||
|
||||
var offset = $('#gridCanvas').offset();
|
||||
x -= offset.left;
|
||||
y -= offset.top;
|
||||
|
||||
var xi = clamp(Math.floor(x/thumbWidth ), 0, columns - 1);
|
||||
var yi = clamp(Math.floor(y/thumbHeight), 0, rows - 1);
|
||||
var index = deproject[xi][yi];
|
||||
var id = index.id
|
||||
var entry = indexes[index].entry;
|
||||
var html = '<b>'+entry.title+'</b><br>'+entry.hint;
|
||||
var content = html+xi+'_'+yi;
|
||||
|
||||
if (status.content != content) {
|
||||
tooltip.html(html);
|
||||
|
||||
var tx = xi*thumbWidth;
|
||||
var ty = yi*thumbHeight;
|
||||
|
||||
marker.css({
|
||||
left: tx-3,
|
||||
top: ty-3
|
||||
});
|
||||
|
||||
tx += thumbWidth/2 - tooltip.outerWidth()/2;
|
||||
if (tx < -5) tx = -5;
|
||||
|
||||
if (ty + thumbHeight + 120 < node.innerHeight()) {
|
||||
tooltip.css({
|
||||
left: tx,
|
||||
top: ty + thumbHeight + 3,
|
||||
bottom: 'auto'
|
||||
});
|
||||
} else {
|
||||
tooltip.css({
|
||||
left: tx,
|
||||
top: 'auto',
|
||||
bottom: node.innerHeight() - (ty - 3)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
status.content = content;
|
||||
markedEntry = entry;
|
||||
}
|
||||
|
||||
function replace(text, regexp, value) {
|
||||
value = value.replace(/%/g, '%');
|
||||
return text.replace(regexp, value);
|
||||
}
|
||||
|
||||
var highlightCountries = {
|
||||
// Deutschland
|
||||
'DE':4,
|
||||
// deutschsprachig
|
||||
'CH':3,'AT':3,
|
||||
// EU
|
||||
'FR':2,'BE':2,'BG':2,'DK':2,'EE':2,'FI':2,'GR':2,'IE':2,'IT':2,'LV':2,'LT':2,'LU':2,'MT':2,'NL':2,'PL':2,'PT':2,'RO':2,'SE':2,'SK':2,'SI':2,'ES':2,'CZ':2,'HU':2,'GB':2,'CY':2,
|
||||
// westliche Staaten
|
||||
'US':1
|
||||
};
|
||||
|
||||
me.showInfobox = function () {
|
||||
infobox.show();
|
||||
|
||||
var c = markedEntry.restrictionsAll;
|
||||
var countries = [];
|
||||
for (var i = 0; i < c.length; i++) {
|
||||
var countryName = countryCodes[c[i]];
|
||||
if (countryName === undefined) console.error('Unbekannter Code: '+c[i]);
|
||||
countryName = inEnglishPlease ? countryName.en : countryName.de;
|
||||
|
||||
var style = 'color:#888';
|
||||
switch (highlightCountries[c[i]]) {
|
||||
case 1: break;
|
||||
case 2: break;
|
||||
case 3: style = ''; break;
|
||||
case 4: style = 'font-weight:bold'; break;
|
||||
}
|
||||
countries.push('<span title="'+countryName+'" style="'+style+'">'+c[i]+'</span>');
|
||||
}
|
||||
if (countries.length == 0) {
|
||||
countries = 'Keinem Land';
|
||||
} else {
|
||||
countries = countries.join(', ');
|
||||
}
|
||||
|
||||
var html = infoboxTemplate;
|
||||
|
||||
html = replace(html, /%title%/g, markedEntry.title);
|
||||
html = replace(html, /%published%/g, formatDate(markedEntry.published));
|
||||
html = replace(html, /%url%/g, markedEntry.url);
|
||||
html = replace(html, /%author%/g, markedEntry.author);
|
||||
if (inEnglishPlease) {
|
||||
html = replace(html, /%restriction%/g, (markedEntry.restrictedInDE > 1) ? 'Yes' : 'No');
|
||||
html = replace(html, /%reason%/g, markedEntry.reasonEN);
|
||||
} else {
|
||||
html = replace(html, /%restriction%/g, (markedEntry.restrictedInDE > 1) ? 'Ja' : 'Nein');
|
||||
html = replace(html, /%reason%/g, markedEntry.reasonDE);
|
||||
}
|
||||
html = replace(html, /%restrictionCountries%/g, countries);
|
||||
html = replace(html, /%rank%/g, formatInteger(markedEntry.rank));
|
||||
html = replace(html, /%thumbnail%/g, markedEntry.thumbnail);
|
||||
html = replace(html, /%rating%/g, formatRating(markedEntry.rating));
|
||||
html = replace(html, /%viewCount%/g, formatInteger(markedEntry.viewCount));
|
||||
html = replace(html, /%category%/g, markedEntry.category);
|
||||
|
||||
if (!markedEntry.restrictedInDE > 1) html = replace(html, /%de%.*?%\/de%/g, '');
|
||||
|
||||
html = replace(html, /%\/?de%/g, '');
|
||||
|
||||
infoboxContent.html(html);
|
||||
$('#infoboxContent span').tooltip();
|
||||
}
|
||||
})();
|
||||
|
||||
me.sort = function (options) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
indexes[i].sortBy = options.callback(indexes[i].entry);
|
||||
indexes[i].oldIndex = i;
|
||||
indexes[i].entry.hint = options.hint(indexes[i].entry);
|
||||
}
|
||||
|
||||
indexes.sort(function (a, b) {
|
||||
if (a.sortBy == b.sortBy) {
|
||||
return a.oldIndex - b.oldIndex;
|
||||
} else {
|
||||
return a.sortBy - b.sortBy;
|
||||
}
|
||||
});
|
||||
|
||||
for (var i = 0; i < indexes.length; i++) {
|
||||
var entry = indexes[i].entry;
|
||||
var id = entry.id;
|
||||
var x = i % columns;
|
||||
var y = Math.floor(i/columns);
|
||||
|
||||
entry.oldPos = entry.newPos;
|
||||
entry.newPos = i;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var cHigh = [237, 28, 36, 0.6];
|
||||
var cMiddle = [255, 255, 60, 0.6];
|
||||
var cLow = [200, 255, 200, 0.8];
|
||||
|
||||
var cHigh = [180, 28, 36, 0.6];
|
||||
var cMiddle = [255, 142, 146, 0.6];
|
||||
var cLow = [255, 255, 255, 0.8];
|
||||
|
||||
me.flag = function (options) {
|
||||
var count = 0;
|
||||
for (var i = 0; i < indexes.length; i++) {
|
||||
var entry = indexes[i].entry;
|
||||
var flagged = options.callback(entry);
|
||||
var color;
|
||||
|
||||
switch (flagged) {
|
||||
case 0.0: color = cLow; break;
|
||||
case 0.5: color = cMiddle; break;
|
||||
case 1.0: color = cHigh; break;
|
||||
default:
|
||||
var v = flagged*2;
|
||||
if (v > 1) {
|
||||
v -= 1;
|
||||
color = [
|
||||
cHigh[0]*v + (1-v)*cMiddle[0],
|
||||
cHigh[1]*v + (1-v)*cMiddle[1],
|
||||
cHigh[2]*v + (1-v)*cMiddle[2],
|
||||
cHigh[3]*v + (1-v)*cMiddle[3]
|
||||
]
|
||||
} else {
|
||||
color = [
|
||||
cMiddle[0]*v + (1-v)*cLow[0],
|
||||
cMiddle[1]*v + (1-v)*cLow[1],
|
||||
cMiddle[2]*v + (1-v)*cLow[2],
|
||||
cMiddle[3]*v + (1-v)*cLow[3]
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
if (flagged > 0.5) count++;
|
||||
|
||||
entry.oldColor = entry.newColor;
|
||||
entry.newColor = color;
|
||||
}
|
||||
return count;
|
||||
}
|
||||
|
||||
me.makeItSo = function () {
|
||||
var image = imageNode[0];
|
||||
|
||||
var frame = 1;
|
||||
var frameNumber = 10;
|
||||
|
||||
var interval = setInterval(function () {
|
||||
var a = frame/frameNumber;
|
||||
a = (1-Math.cos(a*Math.PI))/2;
|
||||
if (frame >= frameNumber) a = 1;
|
||||
|
||||
context.fillStyle = '#FFF';
|
||||
context.fillRect(0,0,width,height);
|
||||
|
||||
var order = [];
|
||||
|
||||
for (var i = 0; i < indexes.length; i++) {
|
||||
var entry = indexes[i].entry;
|
||||
var id = entry.id;
|
||||
order[i] = {
|
||||
entry:entry,
|
||||
value:(1-a)*entry.oldColor[3] + a*entry.newColor[3]
|
||||
}
|
||||
}
|
||||
|
||||
order.sort(function (a,b) {
|
||||
if (a.value == b.value) {
|
||||
return a.newPos - b.newPos;
|
||||
} else {
|
||||
return a.value-b.value;
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
for (var i = order.length-1; i >= 0; i--) {
|
||||
var entry = order[i].entry;
|
||||
var id = entry.id;
|
||||
|
||||
var x0 = projectX[entry.oldPos];
|
||||
var y0 = projectY[entry.oldPos];
|
||||
var x1 = projectX[entry.newPos];
|
||||
var y1 = projectY[entry.newPos];
|
||||
|
||||
var x = Math.round((1-a)*x0 + a*x1);
|
||||
var y = Math.round((1-a)*y0 + a*y1);
|
||||
|
||||
context.drawImage(
|
||||
image,
|
||||
projectX[id],
|
||||
projectY[id],
|
||||
thumbWidth,
|
||||
thumbHeight,
|
||||
x,
|
||||
y,
|
||||
thumbWidth,
|
||||
thumbHeight
|
||||
);
|
||||
|
||||
var color = [
|
||||
(1-a)*entry.oldColor[0] + a*entry.newColor[0],
|
||||
(1-a)*entry.oldColor[1] + a*entry.newColor[1],
|
||||
(1-a)*entry.oldColor[2] + a*entry.newColor[2],
|
||||
(1-a)*entry.oldColor[3] + a*entry.newColor[3]
|
||||
];
|
||||
|
||||
color = generateRGBA(color);
|
||||
|
||||
context.fillStyle = color;
|
||||
context.fillRect(x, y, thumbWidth, thumbHeight);
|
||||
|
||||
}
|
||||
|
||||
if (frame >= frameNumber) {
|
||||
clearInterval(interval);
|
||||
for (var i = 0; i < indexes.length; i++) {
|
||||
indexes[i].entry.oldColor = indexes[i].entry.newColor;
|
||||
indexes[i].entry.oldPos = indexes[i].entry.newPos;
|
||||
}
|
||||
}
|
||||
frame++;
|
||||
}, 60);
|
||||
}
|
||||
|
||||
me.makeItFast = function () {
|
||||
for (var i = 0; i < indexes.length; i++) {
|
||||
var entry = indexes[i].entry;
|
||||
var id = entry.id;
|
||||
|
||||
var x = projectX[entry.newPos];
|
||||
var y = projectY[entry.newPos];
|
||||
var color = generateRGBA(entry.newColor);
|
||||
|
||||
context.fillStyle = color;
|
||||
context.fillRect(x, y, thumbWidth, thumbHeight);
|
||||
}
|
||||
}
|
||||
|
||||
function generateRGBA(a) {
|
||||
return 'rgba('+Math.round(a[0])+','+Math.round(a[1])+','+Math.round(a[2])+','+Math.round(a[3]*100)/100+')';
|
||||
}
|
||||
|
||||
function clamp(value, min, max) {
|
||||
if (value < min) value = min;
|
||||
if (value > max) value = max;
|
||||
return value;
|
||||
}
|
||||
|
||||
return me;
|
||||
}
|
||||
|
|
@ -27,31 +27,9 @@ $(document).ready(function(){
|
|||
/* embed code*/
|
||||
if ($('#embed-form').length) {
|
||||
var $f = $('#embed-form');
|
||||
var $url = 'http://apps.opendatacity.de/gema-vs-youtube/';
|
||||
var $url = 'http://apps.opendatacity.de/relog/frame.html';
|
||||
var embedCode = function(){
|
||||
var $size = $('input:radio[name=size]:checked',$f).val();
|
||||
var $lang = $('input:radio[name=lang]:checked',$f).val();
|
||||
$lang = ($lang === "") ? "de" : $lang;
|
||||
$size = ($size === "") ? "large" : $size;
|
||||
|
||||
if ($lang == "de") {
|
||||
var text = 'Die geblockten Top-1000-YouTube-Videos';
|
||||
var suffix = 'Unterstützt durch <a href="http://www.myvideo.de">MyVideo</a>. Realisiert von <a href="http://www.opendatacity.de/">OpenDataCity</a>. Anwendung steht unter <a rel="license" href="http://creativecommons.org/licenses/by/3.0/de/">CC-BY 3.0</a>.';
|
||||
var file = 'frame.de.html';
|
||||
} else {
|
||||
var text = 'Top 1000 YouTube Videos';
|
||||
var suffix = 'Supported by <a href="http://www.myvideo.de">MyVideo</a>. Made by <a href="http://www.opendatacity.de/">OpenDataCity</a>. This App is under <a rel="license" href="http://creativecommons.org/licenses/by/3.0/us/">CC-BY 3.0</a>.';
|
||||
var file = 'frame.en.html';
|
||||
}
|
||||
|
||||
$('#embed-size',$f).show();
|
||||
switch ($size) {
|
||||
case 'large': var $wh = 'width="860" height="610"'; break;
|
||||
case 'medium': var $wh = 'width="640" height="490"'; break;
|
||||
case 'small': var $wh = 'width="520" height="370"'; break;
|
||||
case 'verysmall': var $wh = 'width="420" height="740"'; break;
|
||||
}
|
||||
var $code = '<iframe src="'+$url+file+'" '+$wh+' scrolling="no" frameborder="0" style="margin:0"><a href="'+$url+'">'+text+'</a></iframe><br><small>'+suffix+'</small>';
|
||||
var $code = '<iframe src="'+$url+'" width="950" height="580" scrolling="no" frameborder="0" style="margin:0"><a href="'+$url+'">re:log - Besucherstromanalyse per re:publica W-LAN</a></iframe><br><small>Realisiert von <a href="http://www.opendatacity.de/">OpenDataCity</a>. Unterstützt durch <a href="http://www.picocell.de">picocell</a> und <a href="http://newthinking.de">newthinking</a>. Anwendung steht unter <a rel="license" href="http://creativecommons.org/licenses/by/3.0/de/">CC-BY 3.0</a>.</small>';
|
||||
$('#embed-code', $f).text($code);
|
||||
};
|
||||
embedCode();
|
||||
|
|
|
|||
|
|
@ -1,487 +0,0 @@
|
|||
|
||||
var countryCodes = {
|
||||
'AD':{de:'Andorra',en:'Andorra'},
|
||||
'AE':{de:'Vereinigte Arabische Emirate',en:'United Arab Emirates'},
|
||||
'AF':{de:'Afghanistan',en:'Afghanistan'},
|
||||
'AG':{de:'Antigua und Barbuda',en:'Antigua and Barbuda'},
|
||||
'AI':{de:'Anguilla',en:'Anguilla'},
|
||||
'AL':{de:'Albanien',en:'Albania'},
|
||||
'AM':{de:'Armenien',en:'Armenia'},
|
||||
'AO':{de:'Angola',en:'Angola'},
|
||||
'AQ':{de:'Antarktika',en:'Antarctica'},
|
||||
'AR':{de:'Argentinien',en:'Argentina'},
|
||||
'AS':{de:'Amerikanisch-Samoa',en:'American Samoa'},
|
||||
'AT':{de:'Österreich',en:'Austria'},
|
||||
'AU':{de:'Australien',en:'Australia'},
|
||||
'AW':{de:'Aruba',en:'Aruba'},
|
||||
'AX':{de:'Åland',en:'Åland Islands'},
|
||||
'AZ':{de:'Aserbaidschan',en:'Azerbaijan'},
|
||||
'BA':{de:'Bosnien und Herzegowina',en:'Bosnia and Herzegovina'},
|
||||
'BB':{de:'Barbados',en:'Barbados'},
|
||||
'BD':{de:'Bangladesch',en:'Bangladesh'},
|
||||
'BE':{de:'Belgien',en:'Belgium'},
|
||||
'BF':{de:'Burkina Faso',en:'Burkina Faso'},
|
||||
'BG':{de:'Bulgarien',en:'Bulgaria'},
|
||||
'BH':{de:'Bahrain',en:'Bahrain'},
|
||||
'BI':{de:'Burundi',en:'Burundi'},
|
||||
'BJ':{de:'Benin',en:'Benin'},
|
||||
'BL':{de:'Saint-Barthélemy',en:'Saint Barthélemy'},
|
||||
'BM':{de:'Bermuda',en:'Bermuda'},
|
||||
'BN':{de:'Brunei Darussalam',en:'Brunei Darussalam'},
|
||||
'BO':{de:'Bolivien',en:'Bolivia, Plurinational State of'},
|
||||
'BQ':{de:'Bonaire, Sint Eustatius und Saba (Niederlande)',en:'Bonaire, Sint Eustatius and Saba'},
|
||||
'BR':{de:'Brasilien',en:'Brazil'},
|
||||
'BS':{de:'Bahamas',en:'Bahamas'},
|
||||
'BT':{de:'Bhutan',en:'Bhutan'},
|
||||
'BV':{de:'Bouvetinsel',en:'Bouvet Island'},
|
||||
'BW':{de:'Botswana',en:'Botswana'},
|
||||
'BY':{de:'Belarus (Weißrussland)',en:'Belarus'},
|
||||
'BZ':{de:'Belize',en:'Belize'},
|
||||
'CA':{de:'Kanada',en:'Canada'},
|
||||
'CC':{de:'Kokosinseln',en:'Cocos (Keeling) Islands'},
|
||||
'CD':{de:'Kongo, Demokratische Republik (ehem. Zaire)',en:'Congo, the Democratic Republic of the'},
|
||||
'CF':{de:'Zentralafrikanische Republik',en:'Central African Republic'},
|
||||
'CG':{de:'Republik Kongo',en:'Congo'},
|
||||
'CH':{de:'Schweiz',en:'Switzerland'},
|
||||
'CI':{de:'Elfenbeinküste',en:'Côte d’Ivoire'},
|
||||
'CK':{de:'Cookinseln',en:'Cook Islands'},
|
||||
'CL':{de:'Chile',en:'Chile'},
|
||||
'CM':{de:'Kamerun',en:'Cameroon'},
|
||||
'CN':{de:'China, Volksrepublik',en:'China'},
|
||||
'CO':{de:'Kolumbien',en:'Colombia'},
|
||||
'CR':{de:'Costa Rica',en:'Costa Rica'},
|
||||
'CU':{de:'Kuba',en:'Cuba'},
|
||||
'CV':{de:'Kap Verde',en:'Cape Verde'},
|
||||
'CW':{de:'Curaçao',en:'Curaçao'},
|
||||
'CX':{de:'Weihnachtsinsel',en:'Christmas Island'},
|
||||
'CY':{de:'Zypern',en:'Cyprus'},
|
||||
'CZ':{de:'Tschechische Republik',en:'Czech Republic'},
|
||||
'DE':{de:'Deutschland',en:'Germany'},
|
||||
'DJ':{de:'Dschibuti',en:'Djibouti'},
|
||||
'DK':{de:'Dänemark',en:'Denmark'},
|
||||
'DM':{de:'Dominica',en:'Dominica'},
|
||||
'DO':{de:'Dominikanische Republik',en:'Dominican Republic'},
|
||||
'DZ':{de:'Algerien',en:'Algeria'},
|
||||
'EC':{de:'Ecuador',en:'Ecuador'},
|
||||
'EE':{de:'Estland',en:'Estonia'},
|
||||
'EG':{de:'Ägypten',en:'Egypt'},
|
||||
'EH':{de:'Westsahara',en:'Western Sahara'},
|
||||
'ER':{de:'Eritrea',en:'Eritrea'},
|
||||
'ES':{de:'Spanien',en:'Spain'},
|
||||
'ET':{de:'Äthiopien',en:'Ethiopia'},
|
||||
'FI':{de:'Finnland',en:'Finland'},
|
||||
'FJ':{de:'Fidschi',en:'Fiji'},
|
||||
'FK':{de:'Falklandinseln',en:'Falkland Islands (Malvinas)'},
|
||||
'FM':{de:'Mikronesien',en:'Micronesia, Federated States of'},
|
||||
'FO':{de:'Färöer',en:'Faroe Islands'},
|
||||
'FR':{de:'Frankreich',en:'France'},
|
||||
'GA':{de:'Gabun',en:'Gabon'},
|
||||
'GB':{de:'Vereinigtes Königreich Großbritannien und Nordirland',en:'United Kingdom'},
|
||||
'GD':{de:'Grenada',en:'Grenada'},
|
||||
'GE':{de:'Georgien',en:'Georgia'},
|
||||
'GF':{de:'Französisch-Guayana',en:'French Guiana'},
|
||||
'GG':{de:'Guernsey (Kanalinsel)',en:'Guernsey'},
|
||||
'GH':{de:'Ghana',en:'Ghana'},
|
||||
'GI':{de:'Gibraltar',en:'Gibraltar'},
|
||||
'GL':{de:'Grönland',en:'Greenland'},
|
||||
'GM':{de:'Gambia',en:'Gambia'},
|
||||
'GN':{de:'Guinea',en:'Guinea'},
|
||||
'GP':{de:'Guadeloupe',en:'Guadeloupe'},
|
||||
'GQ':{de:'Äquatorialguinea',en:'Equatorial Guinea'},
|
||||
'GR':{de:'Griechenland',en:'Greece'},
|
||||
'GS':{de:'Südgeorgien und die Südlichen Sandwichinseln',en:'South Georgia and the South Sandwich Islands'},
|
||||
'GT':{de:'Guatemala',en:'Guatemala'},
|
||||
'GU':{de:'Guam',en:'Guam'},
|
||||
'GW':{de:'Guinea-Bissau',en:'Guinea-Bissau'},
|
||||
'GY':{de:'Guyana',en:'Guyana'},
|
||||
'HK':{de:'Hongkong',en:'Hong Kong'},
|
||||
'HM':{de:'Heard und McDonaldinseln',en:'Heard Island and McDonald Islands'},
|
||||
'HN':{de:'Honduras',en:'Honduras'},
|
||||
'HR':{de:'Kroatien',en:'Croatia'},
|
||||
'HT':{de:'Haiti',en:'Haiti'},
|
||||
'HU':{de:'Ungarn',en:'Hungary'},
|
||||
'ID':{de:'Indonesien',en:'Indonesia'},
|
||||
'IE':{de:'Irland',en:'Ireland'},
|
||||
'IL':{de:'Israel',en:'Israel'},
|
||||
'IM':{de:'Insel Man',en:'Isle of Man'},
|
||||
'IN':{de:'Indien',en:'India'},
|
||||
'IO':{de:'Britisches Territorium im Indischen Ozean',en:'British Indian Ocean Territory'},
|
||||
'IQ':{de:'Irak',en:'Iraq'},
|
||||
'IR':{de:'Iran, Islamische Republik',en:'Iran, Islamic Republic of'},
|
||||
'IS':{de:'Island',en:'Iceland'},
|
||||
'IT':{de:'Italien',en:'Italy'},
|
||||
'JE':{de:'Jersey (Kanalinsel)',en:'Jersey'},
|
||||
'JM':{de:'Jamaika',en:'Jamaica'},
|
||||
'JO':{de:'Jordanien',en:'Jordan'},
|
||||
'JP':{de:'Japan',en:'Japan'},
|
||||
'KE':{de:'Kenia',en:'Kenya'},
|
||||
'KG':{de:'Kirgisistan',en:'Kyrgyzstan'},
|
||||
'KH':{de:'Kambodscha',en:'Cambodia'},
|
||||
'KI':{de:'Kiribati',en:'Kiribati'},
|
||||
'KM':{de:'Komoren',en:'Comoros'},
|
||||
'KN':{de:'St. Kitts und Nevis',en:'Saint Kitts and Nevis'},
|
||||
'KP':{de:'Korea, Demokratische Volksrepublik (Nordkorea)',en:'Korea, Democratic People’s Republic of'},
|
||||
'KR':{de:'Korea, Republik (Südkorea)',en:'Korea, Republic of'},
|
||||
'KW':{de:'Kuwait',en:'Kuwait'},
|
||||
'KY':{de:'Kaimaninseln',en:'Cayman Islands'},
|
||||
'KZ':{de:'Kasachstan',en:'Kazakhstan'},
|
||||
'LA':{de:'Laos, Demokratische Volksrepublik',en:'Lao People’s Democratic Republic'},
|
||||
'LB':{de:'Libanon',en:'Lebanon'},
|
||||
'LC':{de:'St. Lucia',en:'Saint Lucia'},
|
||||
'LI':{de:'Liechtenstein',en:'Liechtenstein'},
|
||||
'LK':{de:'Sri Lanka',en:'Sri Lanka'},
|
||||
'LR':{de:'Liberia',en:'Liberia'},
|
||||
'LS':{de:'Lesotho',en:'Lesotho'},
|
||||
'LT':{de:'Litauen',en:'Lithuania'},
|
||||
'LU':{de:'Luxemburg',en:'Luxembourg'},
|
||||
'LV':{de:'Lettland',en:'Latvia'},
|
||||
'LY':{de:'Libyen',en:'Libya'},
|
||||
'MA':{de:'Marokko',en:'Morocco'},
|
||||
'MC':{de:'Monaco',en:'Monaco'},
|
||||
'MD':{de:'Moldawien (Republik Moldau)',en:'Moldova, Republic of'},
|
||||
'ME':{de:'Montenegro',en:'Montenegro'},
|
||||
'MF':{de:'Saint-Martin (franz. Teil)',en:'Saint Martin (French part)'},
|
||||
'MG':{de:'Madagaskar',en:'Madagascar'},
|
||||
'MH':{de:'Marshallinseln',en:'Marshall Islands'},
|
||||
'MK':{de:'Mazedonien, ehem. jugoslawische Republik',en:'Macedonia, the former Yugoslav Republic of'},
|
||||
'ML':{de:'Mali',en:'Mali'},
|
||||
'MM':{de:'Myanmar (Burma)',en:'Myanmar'},
|
||||
'MN':{de:'Mongolei',en:'Mongolia'},
|
||||
'MO':{de:'Macao',en:'Macao'},
|
||||
'MP':{de:'Nördliche Marianen',en:'Northern Mariana Islands'},
|
||||
'MQ':{de:'Martinique',en:'Martinique'},
|
||||
'MR':{de:'Mauretanien',en:'Mauritania'},
|
||||
'MS':{de:'Montserrat',en:'Montserrat'},
|
||||
'MT':{de:'Malta',en:'Malta'},
|
||||
'MU':{de:'Mauritius',en:'Mauritius'},
|
||||
'MV':{de:'Malediven',en:'Maldives'},
|
||||
'MW':{de:'Malawi',en:'Malawi'},
|
||||
'MX':{de:'Mexiko',en:'Mexico'},
|
||||
'MY':{de:'Malaysia',en:'Malaysia'},
|
||||
'MZ':{de:'Mosambik',en:'Mozambique'},
|
||||
'NA':{de:'Namibia',en:'Namibia'},
|
||||
'NC':{de:'Neukaledonien',en:'New Caledonia'},
|
||||
'NE':{de:'Niger',en:'Niger'},
|
||||
'NF':{de:'Norfolkinsel',en:'Norfolk Island'},
|
||||
'NG':{de:'Nigeria',en:'Nigeria'},
|
||||
'NI':{de:'Nicaragua',en:'Nicaragua'},
|
||||
'NL':{de:'Niederlande',en:'Netherlands'},
|
||||
'NO':{de:'Norwegen',en:'Norway'},
|
||||
'NP':{de:'Nepal',en:'Nepal'},
|
||||
'NR':{de:'Nauru',en:'Nauru'},
|
||||
'NU':{de:'Niue',en:'Niue'},
|
||||
'NZ':{de:'Neuseeland',en:'New Zealand'},
|
||||
'OM':{de:'Oman',en:'Oman'},
|
||||
'PA':{de:'Panama',en:'Panama'},
|
||||
'PE':{de:'Peru',en:'Peru'},
|
||||
'PF':{de:'Französisch-Polynesien',en:'French Polynesia'},
|
||||
'PG':{de:'Papua-Neuguinea',en:'Papua New Guinea'},
|
||||
'PH':{de:'Philippinen',en:'Philippines'},
|
||||
'PK':{de:'Pakistan',en:'Pakistan'},
|
||||
'PL':{de:'Polen',en:'Poland'},
|
||||
'PM':{de:'Saint-Pierre und Miquelon',en:'Saint Pierre and Miquelon'},
|
||||
'PN':{de:'Pitcairninseln',en:'Pitcairn'},
|
||||
'PR':{de:'Puerto Rico',en:'Puerto Rico'},
|
||||
'PS':{de:'Palästinensische Autonomiegebiete',en:'Palestinian Territory, Occupied'},
|
||||
'PT':{de:'Portugal',en:'Portugal'},
|
||||
'PW':{de:'Palau',en:'Palau'},
|
||||
'PY':{de:'Paraguay',en:'Paraguay'},
|
||||
'QA':{de:'Katar',en:'Qatar'},
|
||||
'RE':{de:'Réunion',en:'Réunion'},
|
||||
'RO':{de:'Rumänien',en:'Romania'},
|
||||
'RS':{de:'Serbien',en:'Serbia'},
|
||||
'RU':{de:'Russische Föderation',en:'Russian Federation'},
|
||||
'RW':{de:'Ruanda',en:'Rwanda'},
|
||||
'SA':{de:'Saudi-Arabien',en:'Saudi Arabia'},
|
||||
'SB':{de:'Salomonen',en:'Solomon Islands'},
|
||||
'SC':{de:'Seychellen',en:'Seychelles'},
|
||||
'SD':{de:'Sudan',en:'Sudan'},
|
||||
'SE':{de:'Schweden',en:'Sweden'},
|
||||
'SG':{de:'Singapur',en:'Singapore'},
|
||||
'SH':{de:'St. Helena',en:'Saint Helena, Ascension and Tristan da Cunha'},
|
||||
'SI':{de:'Slowenien',en:'Slovenia'},
|
||||
'SJ':{de:'Svalbard und Jan Mayen',en:'Svalbard and Jan Mayen'},
|
||||
'SK':{de:'Slowakei',en:'Slovakia'},
|
||||
'SL':{de:'Sierra Leone',en:'Sierra Leone'},
|
||||
'SM':{de:'San Marino',en:'San Marino'},
|
||||
'SN':{de:'Senegal',en:'Senegal'},
|
||||
'SO':{de:'Somalia',en:'Somalia'},
|
||||
'SR':{de:'Suriname',en:'Suriname'},
|
||||
'SS':{de:'Südsudan',en:'South Sudan'},
|
||||
'ST':{de:'São Tomé und Príncipe',en:'Sao Tome and Principe'},
|
||||
'SV':{de:'El Salvador',en:'El Salvador'},
|
||||
'SX':{de:'Sint Maarten (niederl. Teil)',en:'Sint Maarten (Dutch part)'},
|
||||
'SY':{de:'Syrien, Arabische Republik',en:'Syrian Arab Republic'},
|
||||
'SZ':{de:'Swasiland',en:'Swaziland'},
|
||||
'TC':{de:'Turks- und Caicosinseln',en:'Turks and Caicos Islands'},
|
||||
'TD':{de:'Tschad',en:'Chad'},
|
||||
'TF':{de:'Französische Süd- und Antarktisgebiete',en:'French Southern Territories'},
|
||||
'TG':{de:'Togo',en:'Togo'},
|
||||
'TH':{de:'Thailand',en:'Thailand'},
|
||||
'TJ':{de:'Tadschikistan',en:'Tajikistan'},
|
||||
'TK':{de:'Tokelau',en:'Tokelau'},
|
||||
'TL':{de:'Osttimor (Timor-Leste)',en:'Timor-Leste'},
|
||||
'TM':{de:'Turkmenistan',en:'Turkmenistan'},
|
||||
'TN':{de:'Tunesien',en:'Tunisia'},
|
||||
'TO':{de:'Tonga',en:'Tonga'},
|
||||
'TR':{de:'Türkei',en:'Turkey'},
|
||||
'TT':{de:'Trinidad und Tobago',en:'Trinidad and Tobago'},
|
||||
'TV':{de:'Tuvalu',en:'Tuvalu'},
|
||||
'TW':{de:'Republik China (Taiwan)',en:'Taiwan, Province of China'},
|
||||
'TZ':{de:'Tansania, Vereinigte Republik',en:'Tanzania, United Republic of'},
|
||||
'UA':{de:'Ukraine',en:'Ukraine'},
|
||||
'UG':{de:'Uganda',en:'Uganda'},
|
||||
'UM':{de:'United States Minor Outlying Islands',en:'United States Minor Outlying Islands'},
|
||||
'US':{de:'Vereinigte Staaten von Amerika',en:'United States'},
|
||||
'UY':{de:'Uruguay',en:'Uruguay'},
|
||||
'UZ':{de:'Usbekistan',en:'Uzbekistan'},
|
||||
'VA':{de:'Vatikanstadt',en:'Holy See (Vatican City State)'},
|
||||
'VC':{de:'St. Vincent und die Grenadinen',en:'Saint Vincent and the Grenadines'},
|
||||
'VE':{de:'Venezuela',en:'Venezuela, Bolivarian Republic of'},
|
||||
'VG':{de:'Britische Jungferninseln',en:'Virgin Islands, British'},
|
||||
'VI':{de:'Amerikanische Jungferninseln',en:'Virgin Islands, U.S.'},
|
||||
'VN':{de:'Vietnam',en:'Viet Nam'},
|
||||
'VU':{de:'Vanuatu',en:'Vanuatu'},
|
||||
'WF':{de:'Wallis und Futuna',en:'Wallis and Futuna'},
|
||||
'WS':{de:'Samoa',en:'Samoa'},
|
||||
'YE':{de:'Jemen',en:'Yemen'},
|
||||
'YT':{de:'Mayotte',en:'Mayotte'},
|
||||
'ZA':{de:'Südafrika',en:'South Africa'},
|
||||
'ZM':{de:'Sambia',en:'Zambia'},
|
||||
'ZW':{de:'Simbabwe',en:'Zimbabwe'},
|
||||
};
|
||||
|
||||
var canvas;
|
||||
var sizeMode;
|
||||
var thumbWidth, thumbHeight, columns, rows, imageUrl;
|
||||
|
||||
$(function () {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var entry = data[i];
|
||||
|
||||
entry.publishedTS = (new Date(entry.published)).getTime();
|
||||
entry.updatedTS = (new Date(entry.updated )).getTime();
|
||||
|
||||
entry.restrictionCountries = {};
|
||||
for (var j = 0; j < entry.restrictionsAll.length; j++) {
|
||||
entry.restrictionCountries[entry.restrictionsAll[j]] = true;
|
||||
}
|
||||
}
|
||||
|
||||
var width = $(window).width();
|
||||
|
||||
if (width < 520) sizeMode = 1;
|
||||
else if (width < 640) sizeMode = 0;
|
||||
else if (width < 860) sizeMode = 1;
|
||||
else sizeMode = 2;
|
||||
|
||||
switch (sizeMode) {
|
||||
case 0: thumbWidth = 11; thumbHeight = 9; columns = 25; rows = 40; imageUrl = 'assets/img/grid_520.jpg'; break;
|
||||
case 1: thumbWidth = 16; thumbHeight = 12; columns = 25; rows = 40; imageUrl = 'assets/img/grid_640.jpg'; break;
|
||||
case 2: thumbWidth = 20; thumbHeight = 15; columns = 25; rows = 40; imageUrl = 'assets/img/grid_860.jpg'; break;
|
||||
}
|
||||
|
||||
$('#gridImage').attr('src', imageUrl);
|
||||
$('#gridImage, #gridCanvas, #gridCanvasOverlay').attr({width: thumbWidth*columns, height: thumbHeight*rows});
|
||||
|
||||
canvas = new Canvas({
|
||||
imageNode: $('#gridImage'),
|
||||
node: $('#gridCanvas'),
|
||||
nodeOverlay: $('#gridCanvasOverlay'),
|
||||
thumbWidth: thumbWidth,
|
||||
thumbHeight: thumbHeight,
|
||||
columns: columns,
|
||||
data: data
|
||||
});
|
||||
|
||||
$('#gridFlag button').click(function (e) {
|
||||
updateCanvas({ flagType:$(e.target).attr('value') });
|
||||
})
|
||||
|
||||
$('#gridSort button').click(function (e) {
|
||||
updateCanvas({ sortType:$(e.target).attr('value') });
|
||||
})
|
||||
|
||||
updateCanvas({initialize:true});
|
||||
});
|
||||
|
||||
function updateCanvas(options) {
|
||||
options = options || {};
|
||||
var flagType = options.flagType || $('#gridFlag .active').attr('value');
|
||||
var sortType = options.sortType || $('#gridSort .active').attr('value');
|
||||
|
||||
var flag;
|
||||
var sort = function (entry) { return -entry.restrictedInDE };
|
||||
var hint;
|
||||
if (inEnglishPlease) {
|
||||
hint = function (entry) { return (entry.restrictedInDE > 1) ? 'Reason:<br><i>'+entry.reasonEN+'</i>' : '' };
|
||||
} else {
|
||||
hint = function (entry) { return (entry.restrictedInDE > 1) ? 'Begründung:<br><i>'+entry.reasonDE+'</i>' : '' };
|
||||
}
|
||||
|
||||
switch (flagType.split('-')[0]) {
|
||||
case 'germany':
|
||||
flag = function (entry) { return [0,0,1.0,1.0,1.0][entry.restrictedInDE] };
|
||||
hint
|
||||
break;
|
||||
case 'gema':
|
||||
flag = function (entry) { return [0,0,1.0,0.2,0.2][entry.restrictedInDE] };
|
||||
break;
|
||||
case 'other':
|
||||
flag = function (entry) { return [0,0,0.2,1.0,1.0][entry.restrictedInDE] };
|
||||
break;
|
||||
case 'foreign':
|
||||
flag = function (entry) { return (entry.restrictionsAll.length > ((entry.restrictedInDE > 1) ? 1 : 0)) ? 1 : 0 };
|
||||
sort = function (entry) {
|
||||
var inDE = (entry.restrictedInDE > 1) ? 1 : 0;
|
||||
var onlyForeign = entry.restrictionsAll.length - inDE;
|
||||
return -onlyForeign;
|
||||
};
|
||||
hint = function (entry) {
|
||||
if (entry.restrictedInDE > 1) {
|
||||
if (entry.restrictionsAll.length > 1) {
|
||||
if (entry.restrictionsAll.length > 2) {
|
||||
if (inEnglishPlease) {
|
||||
return 'blocked in '+(entry.restrictionsAll.length-1)+' countries<br>and in Germany';
|
||||
} else {
|
||||
return 'gesperrt in '+(entry.restrictionsAll.length-1)+' Ländern,<br>zusätzlich auch in Deutschland';
|
||||
}
|
||||
} else {
|
||||
var id = (entry.restrictionsAll[0] == 'DE') ? 1 : 0;
|
||||
var code = countryCodes[entry.restrictionsAll[id]];
|
||||
if (inEnglishPlease) {
|
||||
return 'blocked in one country ('+code.en+')<br>and in Germany';
|
||||
} else {
|
||||
return 'gesperrt in einem Land ('+code.de+'),<br>zusätzlich auch in Deutschland';
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (inEnglishPlease) {
|
||||
return 'blocked only in Germany';
|
||||
} else {
|
||||
return 'gesperrt nur in Deutschland';
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (entry.restrictionsAll.length > 1) {
|
||||
|
||||
if (inEnglishPlease) {
|
||||
return 'blocked in '+entry.restrictionsAll.length+' countries,<br>but not in Germany';
|
||||
} else {
|
||||
return 'gesperrt in '+entry.restrictionsAll.length+' Ländern,<br>aber nicht in Deutschland';
|
||||
}
|
||||
} else if (entry.restrictionsAll.length > 0) {
|
||||
var code = countryCodes[entry.restrictionsAll[0]];
|
||||
if (inEnglishPlease) {
|
||||
return 'blocked only in '+code.en;
|
||||
} else {
|
||||
return 'gesperrt nur in '+code.de;
|
||||
}
|
||||
} else {
|
||||
if (inEnglishPlease) {
|
||||
return 'nowhere blocked';
|
||||
} else {
|
||||
return 'nirgends gesperrt';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'country':
|
||||
var country = flagType.split('-')[1];
|
||||
var code = countryCodes[country];
|
||||
flag = function (entry) { return (entry.restrictionCountries[country] === true) ? 1 : 0 };
|
||||
sort = function (entry) { return -((entry.restrictionCountries[country] === true) ? 1000 : 0); };
|
||||
hint = function (entry) {
|
||||
if (entry.restrictionCountries[country] === true) {
|
||||
return inEnglishPlease ? 'blocked in '+code.en : 'gesperrt in „'+code.de+'”';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
switch (sortType) {
|
||||
case 'rank':
|
||||
sort = function (entry) { return entry.rank };
|
||||
break;
|
||||
case 'rating':
|
||||
sort = function (entry) { return -entry.rating };
|
||||
break;
|
||||
case 'category':
|
||||
sort = function (entry) { return entry.category.toLowerCase() };
|
||||
break;
|
||||
}
|
||||
|
||||
canvas.sort({
|
||||
callback: sort,
|
||||
hint: hint
|
||||
});
|
||||
|
||||
var value = canvas.flag({
|
||||
callback: flag
|
||||
});
|
||||
|
||||
setCounter(value);
|
||||
|
||||
if (options.initialize) {
|
||||
canvas.makeItFast();
|
||||
} else {
|
||||
canvas.makeItSo();
|
||||
}
|
||||
}
|
||||
|
||||
var oldValue, newValue, counterInterval;
|
||||
function setCounter(value) {
|
||||
function setValue(value) {
|
||||
value = (value/10).toFixed(1).replace(/\./, ',')+'%';
|
||||
if (value.length < 5) value = ' '+value;
|
||||
$('#display-number-content').html(value);
|
||||
}
|
||||
if (oldValue === undefined) {
|
||||
setValue(value);
|
||||
oldValue = value;
|
||||
} else {
|
||||
clearInterval(counterInterval);
|
||||
(function () {
|
||||
var frame = 1;
|
||||
var frameNumber = 20;
|
||||
counterInterval = setInterval(
|
||||
function () {
|
||||
if (frame >= frameNumber) {
|
||||
setValue(value);
|
||||
oldValue = value;
|
||||
clearInterval(counterInterval);
|
||||
} else {
|
||||
var a = frame/frameNumber;
|
||||
a = (1-Math.cos(a*Math.PI))/2;
|
||||
var v = (1-a)*oldValue + a*value;
|
||||
setValue(v);
|
||||
frame++
|
||||
}
|
||||
}, 30
|
||||
);
|
||||
})();
|
||||
}
|
||||
}
|
||||
|
||||
function formatRating(value) {
|
||||
return value.toFixed(2).replace(/\./, ',');
|
||||
}
|
||||
|
||||
function formatInteger(value) {
|
||||
var t = value.toFixed(0);
|
||||
for (var i = t.length-3; i > 0; i -= 3) {
|
||||
t = t.substr(0, i) + '.' + t.substr(i);
|
||||
}
|
||||
return t;
|
||||
}
|
||||
|
||||
function formatDate(value) {
|
||||
value = new Date(value);
|
||||
var day = value.getDate();
|
||||
var month = value.getMonth() + 1;
|
||||
var year = value.getFullYear();
|
||||
return day + '.' + month + '.' + year;
|
||||
}
|
||||
|
|
@ -1,15 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title>GEMA versus YouTubes Top 1000</title>
|
||||
<title>re:log - Besucherstromanalyse per re:publica W-LAN</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
|
||||
<base href="http://apps.opendatacity.de/gema-vs-youtube/" target="_parent">
|
||||
<base href="http://apps.opendatacity.de/relog/" target="_parent">
|
||||
|
||||
<meta property="og:title" content="GEMA versus YouTubes Top 1000" />
|
||||
<meta property="og:title" content="re:log - Besucherstromanalyse per re:publica W-LAN" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="http://apps.opendatacity.de/gema-vs-youtube/" />
|
||||
<meta property="og:image" content="http://datenjournalist.de/wp-content/uploads/2013/01/grid_by_reason-853x1024.jpg" />
|
||||
<meta property="og:url" content="http://apps.opendatacity.de/relog/" />
|
||||
<meta property="og:image" content="http://apps.opendatacity.de/relog/screenshot.png" />
|
||||
|
||||
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="assets/css/index.css" rel="stylesheet" type="text/css">
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="assets/js/helper.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
var $embed_overlay = '<div id="embed-overlay"><div id="embed-content"><h1>Weitergeben</h1><form name="embed-form" id="embed-form" action="javascript:;" method="post"><fieldset id="embed-size" class="form-inline"><legend>Größe</legend><label class="radio"><input type="radio" name="size" value="large" checked="checked"> Groß (860×610)</label><label class="radio"><input type="radio" name="size" value="medium"> Mittel (640×490)</label><label class="radio"><input type="radio" name="size" value="small"> Klein (520×370)</label><label class="radio"><input type="radio" name="size" value="verysmall"> Sehr klein, aber hoch (420×740)</label></fieldset><fieldset class="form-inline"><legend>Sprache</legend><label class="radio"><input type="radio" name="lang" value="de" checked="checked"> Deutsch</label><label class="radio"><input type="radio" name="lang" value="en"> Englisch</label></fieldset><h2>Code</h2><p>Kopiere diesen Code in Deine Webseite:</p><code id="embed-code"></code></form><p><a href="javascript:;" class="btn btn-medium btn-primary">Schließen</a></p></div></div>';
|
||||
var $embed_overlay = '<div id="embed-overlay"><div id="embed-content"><h1>Weitergeben</h1><form name="embed-form" id="embed-form" action="javascript:;" method="post"><h2>Code</h2><p>Kopiere diesen Code in Deine Webseite:</p><code id="embed-code"></code></form><p><a href="javascript:;" class="btn btn-medium btn-primary">Schließen</a></p></div></div>';
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -31,20 +31,16 @@
|
|||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
<div id="container">
|
||||
<h1>GEMA versus YouTubes Top 1000</h1>
|
||||
<div style="position:relative;">
|
||||
<h1 style="font-size:36px">re:log - Besucherstromanalyse per re:publica-W-LAN</h1>
|
||||
<div style="position:relative;margin-top:40px">
|
||||
<p class="lead" style="width:600px;">
|
||||
Ein großer Teil der YouTube-Videos ist nicht überall zu sehen.<br />
|
||||
Fast 19% der weltweiten Top 1000-Videos sind in einem oder mehreren Ländern außerhalb Deutschlands gesperrt.<br />
|
||||
In Deutschland jedoch sind über <strong>60%</strong> der 1000 beliebtesten Videos nicht verfügbar, weil YouTube davon ausgeht, dass die Musikrechte <strong>„möglicherweise“</strong> bei der Musikverwertungsgesellschaft GEMA liegen.
|
||||
Eine interaktive Karte zeigt, wie sich die Besucherströme der re:publica von einem Vortrag zum nächsten bewegen.<br>
|
||||
Die Karte basiert auf den Messungen des re:publica-WLANs, in das sich etwa 6700 Geräte eingewählt haben.
|
||||
</p>
|
||||
|
||||
<div id="social" style="position:absolute; bottom:10px; right:0; width:180px">
|
||||
<div class="social">
|
||||
<small><b>deutsch</b> | <a href="http://apps.opendatacity.de/gema-vs-youtube/en/">english</a></small>
|
||||
</div>
|
||||
<div id="social" style="position:absolute; bottom:-20px; right:0; width:180px">
|
||||
<div id="social-twitter" class="social">
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://apps.opendatacity.de/gema-vs-youtube/" data-text="GEMA versus YouTube" data-via="opendatacity" data-lang="de">Twittern</a>
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://apps.opendatacity.de/relog/" data-text="re:log - Besucherstromanalyse per re:publica W-LAN" data-via="opendatacity" data-lang="de">Twittern</a>
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
|
||||
</div>
|
||||
<div id="social-google" class="social">
|
||||
|
|
@ -60,35 +56,31 @@
|
|||
</script>
|
||||
</div>
|
||||
<div id="social-facebook" class="social">
|
||||
<div class="fb-like" data-href="http://apps.opendatacity.de/gema-vs-youtube/" data-send="false" data-layout="button_count" data-width="180" data-show-faces="true"></div>
|
||||
<div class="fb-like" data-href="http://apps.opendatacity.de/relog/" data-send="false" data-layout="button_count" data-width="180" data-show-faces="true"></div>
|
||||
</div>
|
||||
<div class="social"><a href="javascript:;" class="btn btn-primary embed-button">Einbetten</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<iframe src="frame.de.html" width="860" height="610" scrolling="no" frameborder="0"><a href="">Die geblockten Top-1000-YouTube-Videos</a></iframe><p>Unterstützt durch <a href="http://www.myvideo.de" rel="follow">MyVideo</a>. Realisiert von <a href="http://www.opendatacity.de/">OpenDataCity</a>. Anwendung steht unter <a rel="license" href="http://creativecommons.org/licenses/by/3.0/de/">CC-BY 3.0</a>.</p>
|
||||
|
||||
|
||||
<iframe src="frame.html" width="950" height="580" scrolling="no" frameborder="0"><a href="">re:log - Besucherstromanalyse der re:publica</a></iframe><p>Realisiert von <a href="http://www.opendatacity.de/">OpenDataCity</a>. Unterstützt durch <a href="http://www.picocell.de">picocell</a> und <a href="http://newthinking.de">newthinking</a>. Anwendung steht unter <a rel="license" href="http://creativecommons.org/licenses/by/3.0/de/">CC-BY 3.0</a>.</p>
|
||||
|
||||
<div class="row-fluid" style="margin-top:50px">
|
||||
|
||||
<div class="span6">
|
||||
<h3>Weitere Informationen</h3>
|
||||
<p>
|
||||
Eine genauere Analyse der Daten so wie ein Making-of befindet sich auf <a href="http://datenjournalist.de/ueber-unsere-app-gema-vs-youtube">datenjournalist.de</a>. Außerdem bieten wir die gesammelten Daten zum Download an:
|
||||
Die interaktive Karte zeigt, wo sich die Besucher/innen auf dem Gelände der re:publica aufgehalten haben. Nicht alle, sondern nur diejenigen, die über die rund 100 Access Points mit ihrem Gerät per W-LAN mit dem Internet verbunden haben.
|
||||
</p>
|
||||
<p>
|
||||
<a href="data/top1000.tsv" class="btn btn-inverse">Download Data</a>
|
||||
Tip: Mit gedrückter Maustaste bzw. per Fingerdruck lässt sich ein Rechteck aufziehen und eine Gruppe von Punkten markieren. Deren Weg über die re:publica lässt sich dann verfolgen. Per einfachen Klick auf die Karte, wird die Auswahl wieder aufgehoben. Die Zeitleiste unten ist scrollbar.
|
||||
</p>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<h3>Weiterverwendung</h3>
|
||||
<p>
|
||||
Die Applikation kann kann frei verwendet werden. Der HTML-Code, um die Applikation in die eigene Webseite oder den eigenen Blog einzubetten, kann hier generiert werden:
|
||||
Das re:publica Team stellt die Daten anonymisiert zum <a href="data.csv.zip">Download</a> zur Verfügung - theoretisch wäre aber die Speicherung der eindeutigen MAC-Adresse jedes Geräts - ob Smartphone, Tablet und Laptop - denkbar gewesen. MAC-Adressen lassen sich allerdings ändern. So erklärt sich vielleicht auch die Zahl von über 6700 registrierter Geräte über den Lauf der drei Tage - mehr als Besucher, Speaker, Journalisten, Team und Helfer zusammen.
|
||||
</p>
|
||||
<p>
|
||||
<a href="javascript:;" class="btn btn-primary embed-button">Code zum Einbetten</a>
|
||||
Hintergrundinfos zur App finden sich hier bei <a href="http://datenjournalist.de/relog">datenjournalist.de</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -96,17 +88,17 @@
|
|||
<hr style="margin-top:70px; border-color:#EEE">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span4">
|
||||
Unterstützt durch <br><a href="http://www.myvideo.de/" rel="follow" id="mvlogo">MyVideo</a>
|
||||
</div>
|
||||
<div class="span4">
|
||||
Realisiert von <br><a href="http://www.opendatacity.de/" id="odclogo">OpenDataCity</a>
|
||||
</div>
|
||||
<div class="span4" id="license">
|
||||
Diese App steht unter einer <a rel="license" href="http://creativecommons.org/licenses/by/3.0/de/">Creative Commons Namensnennung 3.0 Lizenz</a>.
|
||||
<div class="span4">
|
||||
Unterstützt durch <br><a href="http://www.picocell.de/" id="pclogo">picocell</a>
|
||||
</div>
|
||||
<div class="span4">
|
||||
und durch <br><a href="http://newthinking.de/" id="ntlogo">newthinking</a>
|
||||
</div>
|
||||
</div>
|
||||
<p style="text-align: right; margin-top: 10px">Diese Seite wird mit Google Analytics ausgewertet. <a href="http://www.opendatacity.de/kontakt/">Impressum</a></p>
|
||||
<p style="text-align: right; margin-top: 100px">Diese Seite wird mit Google Analytics ausgewertet. <a href="http://www.opendatacity.de/kontakt/">Impressum</a></p>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var _gaq = _gaq || [];
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 197 KiB |
Loading…
Reference in New Issue