adding web site
This commit is contained in:
Micho
parent
80bc971cde
commit
3dbfd6c0d5
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,994 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
body {
|
||||
|
||||
background: #F5F5F5;
|
||||
|
||||
}
|
||||
|
||||
#container {
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0px auto;
|
||||
box-shadow: 0px 0px 40px -20px rgba(0,0,0,0.4);
|
||||
width: 860px;
|
||||
background: #fff;
|
||||
padding: 50px;
|
||||
|
||||
}
|
||||
.social {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#activate {
|
||||
|
||||
padding: 20px 0px 0px;
|
||||
border-top: 1px dotted #eee;
|
||||
margin-top: 20px;
|
||||
|
||||
}
|
||||
|
||||
#activate .col {
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 270px;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
|
||||
}
|
||||
|
||||
#activate .col+.col {
|
||||
|
||||
margin-left: 25px;
|
||||
|
||||
}
|
||||
|
||||
#branding {
|
||||
|
||||
padding: 20px 0px 0px;
|
||||
border-top: 1px dotted #eee;
|
||||
margin-top: 20px;
|
||||
|
||||
}
|
||||
|
||||
#license {
|
||||
padding: 20px 10px 20px 100px;
|
||||
background: url(../img/cc-by.png) 10px center no-repeat;
|
||||
font-size: 0.8em;
|
||||
line-height: 1.1em;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #E3E3E3;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset
|
||||
|
||||
}
|
||||
|
||||
#creator {
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
min-height: 60px;
|
||||
line-height: 60px;
|
||||
width: 450px;
|
||||
font-size: 0.9em;
|
||||
|
||||
}
|
||||
|
||||
a#odclogo {
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 60px;
|
||||
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 {
|
||||
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
#embed-overlay {
|
||||
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
|
||||
#embed-content {
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 640px;
|
||||
background-color: #fff;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 0px 50px -15px rgba(0,0,0,0.9);
|
||||
|
||||
}
|
||||
|
||||
#embed-content fieldset {
|
||||
|
||||
padding-bottom: 20px;
|
||||
|
||||
}
|
||||
|
||||
#embed-content fieldset legend {
|
||||
|
||||
margin-bottom: 10px;
|
||||
line-height: 30px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#embed-content label+label {
|
||||
|
||||
margin-left: 20px;
|
||||
|
||||
}
|
||||
|
||||
#embed-content code {
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
white-space: normal;
|
||||
color: #444
|
||||
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 256 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 477 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 729 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,377 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
|
||||
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
/* embed overlay code */
|
||||
|
||||
$('body').append($($embed_overlay));
|
||||
|
||||
$('.embed-button').click(function(evt){
|
||||
if ($('#embed-overlay:visible').length === 0) {
|
||||
$('#embed-overlay').fadeIn('fast');
|
||||
}
|
||||
});
|
||||
|
||||
var $clickIn = false;
|
||||
$('#embed-overlay').click(function(evt){
|
||||
if (!$clickIn) {
|
||||
$('#embed-overlay').fadeOut('fast');
|
||||
}
|
||||
$clickIn = false;
|
||||
});
|
||||
$('#embed-form').click(function(evt){
|
||||
$clickIn = true;
|
||||
});
|
||||
|
||||
/* embed code*/
|
||||
if ($('#embed-form').length) {
|
||||
var $f = $('#embed-form');
|
||||
var $url = 'http://apps.opendatacity.de/gema-vs-youtube/';
|
||||
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>';
|
||||
$('#embed-code', $f).text($code);
|
||||
};
|
||||
embedCode();
|
||||
$(":input", $f).change(function(){
|
||||
embedCode();
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,487 @@
|
|||
|
||||
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;
|
||||
}
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title>GEMA versus YouTubes Top 1000</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
|
||||
<base href="http://apps.opendatacity.de/gema-vs-youtube/" target="_parent">
|
||||
|
||||
<meta property="og:title" content="GEMA versus YouTubes Top 1000" />
|
||||
<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" />
|
||||
|
||||
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="assets/css/index.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<script src="assets/js/jquery-1.8.3.min.js" type="text/javascript"></script>
|
||||
<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>';
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="fb-root"></div>
|
||||
<script>(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
<div id="container">
|
||||
<h1>GEMA versus YouTubes Top 1000</h1>
|
||||
<div style="position:relative;">
|
||||
<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.
|
||||
</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-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>
|
||||
<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">
|
||||
<div class="g-plusone"></div>
|
||||
<script type="text/javascript">
|
||||
window.___gcfg = {lang: 'de'};
|
||||
|
||||
(function() {
|
||||
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
|
||||
po.src = 'https://apis.google.com/js/plusone.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
|
||||
})();
|
||||
</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>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
<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:
|
||||
</p>
|
||||
<p>
|
||||
<a href="data/top1000.tsv" class="btn btn-inverse">Download Data</a>
|
||||
</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:
|
||||
</p>
|
||||
<p>
|
||||
<a href="javascript:;" class="btn btn-primary embed-button">Code zum Einbetten</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-38022006-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue