Skip to content

Instantly share code, notes, and snippets.

@harshitagupta30

harshitagupta30/index.html

Created September 5, 2017 09:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save harshitagupta30/80bf86c70be7f6e9861c9a7821b6d682 to your computer and use it in GitHub Desktop.
Save harshitagupta30/80bf86c70be7f6e9861c9a7821b6d682 to your computer and use it in GitHub Desktop.
Download ZIP
Web Components - Template: Sample Web Components - Template: Sample // source http://jsbin.com/fibupapuse
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Web Components - Template: Sample" />
<meta charset="utf-8">
<title>Web Components - Template: Sample</title>
<template id="template">
<div id="hk-score__experiment">
<div>
<div id="hk-score__containerScoreboard">
<div id="hk-score__cube">
<div class="hk-score__face hk-score__one">
</div>
<div id="hk-score__backgroundIdLive" class="hk-score__face hk-score__two" onclick="installCricket();return false;">
<div class="hk-score__sectionHeaderContainer">
<div class="hk-score__sectionHeader">Live Match</div>
<div class="hk-score__sectionHeaderDelete" style="display:none;">Hide</div>
</div>
<div class="hk-score__sectionContentMatch hk-score__sectionMargin"><span class="team1">MI</span> vs <span class="team2">DD</span></div>
<div class="hk-score__sectionLiveScoreContainer">
<div>
<div class="hk-score__sectionContentMatch hk-score__sectionScore">123 - 4</div>
<div class="hk-score__sectionContentMatch hk-score__sectionPadding">12.1 Overs</div>
</div>
</div>
<div class="hk-score__sectionContentMatch statusNow">RPS: 158 - 10</div>
<div class="hk-score__sectionContentMatch hk-score__sectionPadding statusSummary" style="font-size: 8px!important">14.1 Overs</div>
<button style="display:none;" class="hk-score__subscribeButton" >Subscribe</button>
</div>
<div class="hk-score__face hk-score__four hk_score__zeroPadding" onclick="installCricket();return false;">
<!-- <div class="hk-score__sectionHeaderContainer">
<div class="hk-score__sectionHeader">Buyhatke</div>
<div class="hk-score__sectionHeaderDelete">Hide</div>
</div> -->
<div class="hk-score__imageContainer">
<a href="#"><img class="hk-score__image" src="https://s3-ap-southeast-1.amazonaws.com/push-images/150x150_ipl_tshirt.png" width="150px" height="169px" ></a>
</div>
</div>
<div id="hk-score__backgroundIdScorecard" class="hk-score__face hk-score__five" onclick="installCricket();return false;">
<div class="hk-score__sectionHeaderContainer">
<div class="hk-score__sectionHeader">Scorecard</div>
<div class="hk-score__sectionHeaderDelete" style="display:none;">Hide</div>
</div>
<!-- <div class="hk-score__sectionSubHeader">Batting</div> -->
<table id="hk-score__battingTableId" class="hk-score__battingTable">
<tr>
<th>Batting</th>
<th>R</th>
<th>B</th>
</tr>
<tr>
<td>A Rahane</td>
<td>144</td>
<td>20</td>
</tr>
<tr>
<td>S Tendulkar</td>
<td>98</td>
<td>72</td>
</tr>
</table>
<!-- <div class="hk-score__sectionSubHeader">Bowling</div> -->
<table id="hk-score__bowlingTableId" class="hk-score__battingTable hk-score__bowlingTable">
<tr>
<th>Bowling</th>
<th>R</th>
<th>W</th>
<th>O</th>
</tr>
<tr>
<td>A Rahane</td>
<td>36</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<button style="display:none;" class="hk-score__subscribeButton" >Subscribe</button>
</div>
<div class="hk-score__face hk-score__six" onclick="installCricket();return false;">
</div>
</div>
<div id="hk-score__closeScoreboard" class="hk-score__closeScoreboardClassOpen" onclick="hk_scoreClose()"></div>
</div>
</div>
</div>
</template>
<style id="jsbin-css">
#hk-score__cube,.hk-c-modals,.hk-c-window,.hk-compBar,.hk-sideBar {
box-sizing: border-box
}
#hk-score__cube *,#hk-score__cube :after,#hk-score__cube :before,.hk-c-modals *,.hk-c-modals :after,.hk-c-modals :before,.hk-c-window *,.hk-c-window :after,.hk-c-window :before,.hk-compBar *,.hk-compBar :after,.hk-compBar :before,.hk-sideBar *,.hk-sideBar :after,.hk-sideBar :before {
box-sizing: inherit
}
#hk-score__cube,.hk-c-input__text,.hk-c-modals,.hk-c-textarea,.hk-c-window,.hk-compBar,.hk-sideBar,input.hk-c-input__text[type=date],input.hk-c-input__text[type=datetime-local],input.hk-c-input__text[type=datetime],input.hk-c-input__text[type=email],input.hk-c-input__text[type=number],input.hk-c-input__text[type=password],input.hk-c-input__text[type=search],input.hk-c-input__text[type=tel],input.hk-c-input__text[type=text],input.hk-c-input__text[type=time],input.hk-c-input__text[type=url],textarea.hk-c-input__text {
color: #414141;
font-family: Open Sans,Segoe UI,San Francisco,Arial,Helvetica,Sans Serif;
font-size: 14px;
line-height: 1.33
}
#hk-score__cube {
position: relative;
margin: 0 auto;
bottom: 0;
height: 100px;
width: 150px;
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform-style: preserve-3d
}
.hk-score__subscribeButton {
position: absolute;
left: 0;
width: 100%;
border-radius: 0;
background: #943838;
color: #fff;
cursor: pointer;
border: none;
right: 0;
bottom: 0
}
#hk-score__containerScoreboard {
position: fixed;
bottom: 0;
right: 10px;
z-index: 99999999;
height: 170px;
width: 150px;
transition: bottom .5s ease
}
.hk-score__closeScoreboardClass {
/*background: #c3e4ff;*/
border: 2px solid #4e88bb;
border-bottom: none;
bottom: calc(100% - 2px);
right: 0;
cursor: pointer;
width: 40px;
font-size: 36px;
position: absolute
}
.hk-score__closeScoreboardClass:before {
position: relative;
top: -7px;
content: "";
display: inline-block;
width: .3em;
height: .3em;
border-right: .15em solid #fff;
border-top: .15em solid #fff;
transform: rotate(135deg);
right: -10px
}
.hk-score__closeScoreboardClassClosed {
background: #c3e4ff;
/*border: 2px solid #4e88bb;*/
/*border-bottom: none;*/
bottom: calc(100% - 2px);
right: 0;
cursor: pointer;
width: 40px;
font-size: 36px;
position: absolute
}
.hk-score__closeScoreboardClassClosed:before {
position: relative;
top: 0;
content: "";
display: inline-block;
width: .3em;
height: .3em;
border-right: .15em solid #fff;
border-top: .15em solid #fff;
transform: rotate(-45deg);
right: -10px
}
.hk-score__closeScoreboardClassOpen {
background: #c3e4ff;
/*border: 2px solid #4e88bb;*/
/*border-bottom: none;*/
bottom: calc(100% - 2px);
right: 0;
cursor: pointer;
width: 40px;
font-size: 36px;
position: absolute
}
.hk-score__closeScoreboardClassOpen:before {
position: relative;
top: -7px;
content: "";
display: inline-block;
width: .3em;
height: .3em;
border-right: .15em solid #fff;
border-top: .15em solid #fff;
transform: rotate(135deg);
right: -10px
}
.hk-score__openScoreboardClass {
transform: rotate(-45deg)
}
.hk-score__face {
position: absolute;
height: 170px;
width: 150px;
/*border: 2px solid #4e88bb;*/
padding: 10px;
background: #c3e4ff
}
#hk-score__cube .hk-score__one {
-webkit-transform: rotateX(90deg) translateZ(75px)
}
#hk-score__cube .hk-score__two {
-webkit-transform: translateZ(43.30127px)
}
#hk-score__cube .hk-score__three {
-webkit-transform: rotateY(120deg) translateZ(75px)
}
#hk-score__cube .hk-score__four {
-webkit-transform: rotateY(120deg) translateZ(43.30127px)
}
#hk-score__cube .hk-score__five {
-webkit-transform: rotateY(-120deg) translateZ(43.30127px)
}
#hk-score__cube .hk-score__six {
-webkit-transform: rotateX(-90deg) translateZ(75px) rotate(180deg)
}
.hk-score__sectionHeader {
text-align: center;
text-transform: uppercase;
font-size: 11px;
text-decoration: underline;
font-weight: 700
}
.hk-score__sectionPadding {
padding-top: 0!important
}
.hk-score__sectionMargin {
margin-top: 10px
}
.hk-score__sectionScore {
font-size: 19px!important;
font-weight: 700
}
.hk-score__battingSpan {
padding: 5px 10px;
background: #fff;
color: #000;
}
.hk-score__sectionHeaderContainer {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between
}
.hk-score__sectionHeaderDelete {
margin-top: -3px;
font-size: 10px;
cursor: pointer;
text-decoration: underline
}
.hk-score__sectionLiveScoreContainer {
background: #fff;
color: #000;
height: 60px
}
.hk-score__imageContainer,.hk-score__sectionLiveScoreContainer {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center
}
.hk-score__imageContainer {
width: 100%;
height: 100%;
margin: auto
}
.hk-score__sectionContentMatch {
text-align: center;
padding: 2px 5px;
font-size: 11px
}
.hk-score__image {
max-height: 100%;
max-width: 100%;
margin-top: 2px
}
.hk-score__sectionContentAlignContainer {
height: 100%;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center
}
.hk_score__zeroPadding {
padding: 0!important
}
.hk-score__sectionSubHeader {
text-align: center;
font-size: 10px;
text-decoration: underline
}
#hk-score__battingTableId td {
padding: 2px;
background: #fff;
color: #000 !important;
width: 100%;
font-size: 13px;
text-align: center
}
#hk-score__battingTableId{
margin: 0;
padding: 0;
}
#hk-score__battingTableId td:first-child {
padding: 2px;
font-size: 10px;
text-align: left!important
}
#hk-score__battingTableId th {
font-size: 10px;
font-weight: 700;
padding: 5px;
border: none;
}
#hk-score__bowlingTableId {
margin: 0;
padding: 0;
}
#hk-score__bowlingTableId td {
padding: 2px;
background: #fff;
color: #000 !important;
width: 100%;
font-size: 13px;
text-align: center
}
#hk-score__bowlingTableId td:first-child {
padding: 2px;
font-size: 10px;
text-align: left!important;
word-break: break-all;
}
#hk-score__bowlingTableId th {
font-size: 10px;
font-weight: 700;
border: 0;
padding: 5px;
}
.hk-score__backgroundDD {
background: #9c2425;
color: #fff;
}
.hk-score__backgroundGL {
background: #dc782d;
color: #fff;
}
.hk-score__backgroundKXIP {
background: #a33027;
color: #fff;
}
.hk-score__backgroundKKR {
background: #361f49;
color: #fff;
}
.hk-score__backgroundMI {
background: #0d588c;
color: #fff;
}
.hk-score__backgroundRPS {
background: #172f4b;
color: #fff;
}
.hk-score__backgroundRCB {
background: #b33b43;
color: #fff;
}
.hk-score__backgroundSRH {
background: #cf5737;
color: #fff;
}
.hk-score__backgroundIND {
background: #1769E9;
color: #fff;
}
.hk-score__backgroundPAK {
background: #D0F687;
color: #fff;
}
.hk-score__backgroundAUS {
background: #1C6069;
color: #fff;
}
.hk-score__backgroundSL {
background: #343F73;
color: #fff;
}
.hk-score__backgroundBAN {
background: #1D704A;
color: #fff;
}
.hk-score__backgroundNZ {
background: #264062;
color: #fff;
}
.hk-score__backgroundENG {
background: #D70D57;
color: #fff;
}
.hk-score__backgroundWI {
background: #3E2E2E;
color: #fff;
}
.hk-score__backgroundSA {
background: #2B5B57;
color: #fff;
}
.hk-score__backgroundZIM {
background: #FD4D43;
color: #fff;
}
</style>
</head>
<body>
<div id="host"></div>
<script id="jsbin-javascript">
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
var host = document.querySelector('#host');
host.appendChild(clone);
var vis = (function () {
var stateKey, eventKey, keys = {
hidden: "visibilitychange"
, webkitHidden: "webkitvisibilitychange"
, mozHidden: "mozvisibilitychange"
, msHidden: "msvisibilitychange"
};
for (stateKey in keys) {
if (stateKey in document) {
eventKey = keys[stateKey];
break;
}
}
return function (c) {
if (c) document.addEventListener(eventKey, c);
return !document[stateKey];
}
})();
vis(function () {
vis() ? hk_score_startAutopager() : hk_score_stopAutopager();
//I tried
// $('.alertbox').show();
});
var xAngle = 0, yAngle = 0;
var hk_score__timer;
function rotateScreen(){
yAngle += 120;
var index = yAngle/120;
if((index+1)%3==0){
var interval = 3000;
}
else {
var interval = 10000;
}
document.getElementById('hk-score__cube').style.webkitTransform = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
// console.log('rotate');
clearTimeout(hk_score__timer);
hk_score__timer = setTimeout(function(){rotateScreen();}, interval);
}
function startTimer() {
// console.log("called now");
// hk_score_stopAutopager();
var index = yAngle/120;
if((index+1)%3==0){
var interval = 3000;
}
else {
var interval = 10000;
}
clearTimeout(hk_score__timer);
hk_score__timer = setTimeout(function(){rotateScreen();}, interval);
}
var hk_score_startAutopager = function() {
startTimer();
}
var hk_score_stopAutopager = function () {
// console.log('ad');
clearTimeout(hk_score__timer);
}
document.getElementById("hk-score__containerScoreboard").addEventListener("mouseover", mouseOver);
document.getElementById("hk-score__containerScoreboard").addEventListener("mouseout", mouseOut);
function mouseOver(){
clearTimeout(hk_score__timer);
}
function mouseOut(){
startTimer();
}
var hk_scoreClose = ()=>{};
var setScoreClose = ()=>(
() => {
var currentClass = document.getElementById('hk-score__closeScoreboard').className;
if(currentClass.split("hk-score__closeScoreboardClassOpen").length > 1){
currentClass = currentClass.split("hk-score__closeScoreboardClassOpen").join("hk-score__closeScoreboardClassClosed");
document.getElementById('hk-score__closeScoreboard').className = currentClass;
}
else if(currentClass.split("hk-score__closeScoreboardClassClosed").length > 1){
currentClass = currentClass.split("hk-score__closeScoreboardClassClosed").join("hk-score__closeScoreboardClassOpen");
document.getElementById('hk-score__closeScoreboard').className = currentClass;
}
var currentClass = document.getElementById('hk-score__closeScoreboard').className;
if(currentClass.split('hk-score__closeScoreboardClassOpen').length > 1){
// $('hk-score__closeScoreboard').removeClass('hk-score__closeScoreboardClassOpen');
// document.getElementById('hk-score__closeScoreboard').className += ' hk-score__closeScoreboardClassClosed';
document.getElementById('hk-score__containerScoreboard').style.bottom = '0px';
}
else{
document.getElementById('hk-score__containerScoreboard').style.bottom = '-170px';
// $('hk-score__closeScoreboard').removeClass('hk-score__closeScoreboardClassClosed');
// document.getElementById('hk-score__closeScoreboard').className += ' hk-score__closeScoreboardClassOpen';
}
}
);
startTimer();
if(!!fetch){
setTimeout(()=>{
fetch('chrome-extension://jaehkpjddfdgiiefcnhahapilbejohhj/star-icon.png').catch(err=> {
hk_scoreClose = setScoreClose();
})
}, 2000);
} else{
hk_scoreClose = setScoreClose();
}
function getXMLHTTPRequest() {
try {
req = new XMLHttpRequest();
} catch(err1) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (err2) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (err3) {
req = false;
}
}
}
return req;
}
var fileID = "";
function getCurrentMatch() {
// setTimeout(function(){getCurrentMatch();}, 7000);
var http3 = getXMLHTTPRequest();
var myurl = "https://s3-ap-southeast-1.amazonaws.com/bh-cricket/activeMatch.txt";
var myurl1 = myurl;
myRand = parseInt(Math.random()*999999999999999);
var modurl = myurl1+"?rand="+myRand ;
http3.open("GET", modurl, true);
http3.onreadystatechange = function(){
if (http3.readyState == 4) {
if(http3.status == 200) {
var mytext = http3.responseText;
mytext = JSON.parse(mytext);
if(mytext.length > 0){
fileID = mytext[0].id;
updateScore();
// break;
}
}
}
};
http3.send(null);
}
var globalTeam1;
var globalTeam2;
var updateHandle = 0;
function updateScore() {
clearTimeout(updateHandle);
updateHandle = setTimeout(function(){updateScore();}, 7000);
var http3 = getXMLHTTPRequest();
var myurl = "https://s3-ap-southeast-1.amazonaws.com/bh-cricket/" + fileID + ".txt";
// myurl = "https://s3-ap-southeast-1.amazonaws.com/bh-cricket/18127.txt";
var myurl1 = myurl;
myRand = parseInt(Math.random()*999999999999999);
var modurl = myurl1+"?rand="+myRand ;
http3.open("GET", modurl, true);
http3.onreadystatechange = function(){
if (http3.readyState == 4) {
if(http3.status == 200) {
var mytext = http3.responseText;
mytext = JSON.parse(mytext);
if(mytext.status==""){
return;
}
var score = mytext.score;
var overs = mytext.overs;
var innings = mytext.innings;
if(innings==1){
var team1 = mytext.teamBatting;
var team2 = mytext.teamBowling;
}
else {
var team2 = mytext.teamBatting;
var team1 = mytext.teamBowling;
}
var string = "<tr><th>Batting</th><th>R</th><th>B</th></tr>";
var batsman = mytext.batsman;
for(var k=0;k<batsman.length; k++){
if(batsman[k].name!=""){
string += "<tr><td>" + batsman[k].name + "</td><td>" + batsman[k].r + "</td><td>" + batsman[k].b + "</td></tr>";
}
}
var string2 = "<tr><th>Bowling</th><th>R</th><th>W</th><th>O</th></tr>";
var bowler = mytext.bowler;
for(var k=0;k<bowler.length; k++){
string2 += "<tr><td>" + bowler[k].name + "</td><td>" + bowler[k].r + "</td><td>" + bowler[k].w + "</td><td>" + bowler[k].o + "</td></tr>";
}
document.getElementsByClassName('hk-score__bowlingTable')[0].innerHTML = string2;
document.getElementsByClassName('hk-score__battingTable')[0].innerHTML = string;
document.getElementsByClassName('team1')[0].innerHTML = team1;
document.getElementsByClassName('team2')[0].innerHTML = team2;
document.getElementsByClassName('hk-score__sectionScore')[0].innerHTML = score;
document.getElementsByClassName('hk-score__sectionPadding')[0].innerHTML = overs + " Overs";
if(innings==1){
document.getElementsByClassName('team1')[0].classList.add("hk-score__battingSpan");
console.log(team1);
document.getElementById('hk-score__closeScoreboard').classList.add("hk-score__background"+team1);
// document.getElementsByClassName('hk-score__closeScoreboardClassClosed')[0].className += " hk-score__background"+team1;
// document.getElementsByClassName('hk-score__sectionLiveScoreContainer')[0].className += " hk-score__background"+team1;
document.getElementById('hk-score__backgroundIdLive').classList.add("hk-score__background"+team1);
document.getElementById('hk-score__backgroundIdScorecard').classList.add("hk-score__background"+team1);
document.getElementsByClassName('team2')[0].className = "team2";
document.getElementsByClassName('statusNow')[0].innerHTML = mytext.status;
document.getElementsByClassName('statusSummary')[0].innerHTML = "";
}
else {
document.getElementsByClassName('team1')[0].className = "team1";
document.getElementsByClassName('team2')[0].className += " hk-score__battingSpan";
document.getElementById('hk-score__closeScoreboard').classList.add("hk-score__background"+team2);
// document.getElementsByClassName('hk-score__closeScoreboardClassClosed')[0].className += " hk-score__background"+team2;
// document.getElementsByClassName('hk-score__sectionLiveScoreContainer')[0].className += " hk-score__background"+team2;
document.getElementById('hk-score__backgroundIdLive').classList.add("hk-score__background"+team2);
document.getElementById('hk-score__backgroundIdScorecard').classList.add("hk-score__background"+team2);
document.getElementsByClassName('statusNow')[0].innerHTML = team1 + " : " + mytext.first_innings;
document.getElementsByClassName('statusSummary')[0].innerHTML = mytext.status;
}
if(mytext.status=="" || mytext.score=="/"){
document.getElementById('hk-score__experiment').style.display = "none";
}
else{
document.getElementById('hk-score__experiment').style.display = "";
}
}
}
};
http3.send(null);
}
getCurrentMatch();
function mouseOver2(){
document.getElementById('hk-score__containerScoreboard').style.zIndex = '10';
}
function mouseOut2(){
document.getElementById('hk-score__containerScoreboard').style.zIndex = '99999999';
}
setTimeout(function(){
document.getElementsByClassName("hk-score__containerScoreboard")[0].addEventListener("mouseover", mouseOver2);
document.getElementsByClassName("hk-score__containerScoreboard")[0].addEventListener("mouseout", mouseOut2);
},10000);
</script>
<script id="jsbin-source-css" type="text/css">#hk-score__cube,.hk-c-modals,.hk-c-window,.hk-compBar,.hk-sideBar {
box-sizing: border-box
}
#hk-score__cube *,#hk-score__cube :after,#hk-score__cube :before,.hk-c-modals *,.hk-c-modals :after,.hk-c-modals :before,.hk-c-window *,.hk-c-window :after,.hk-c-window :before,.hk-compBar *,.hk-compBar :after,.hk-compBar :before,.hk-sideBar *,.hk-sideBar :after,.hk-sideBar :before {
box-sizing: inherit
}
#hk-score__cube,.hk-c-input__text,.hk-c-modals,.hk-c-textarea,.hk-c-window,.hk-compBar,.hk-sideBar,input.hk-c-input__text[type=date],input.hk-c-input__text[type=datetime-local],input.hk-c-input__text[type=datetime],input.hk-c-input__text[type=email],input.hk-c-input__text[type=number],input.hk-c-input__text[type=password],input.hk-c-input__text[type=search],input.hk-c-input__text[type=tel],input.hk-c-input__text[type=text],input.hk-c-input__text[type=time],input.hk-c-input__text[type=url],textarea.hk-c-input__text {
color: #414141;
font-family: Open Sans,Segoe UI,San Francisco,Arial,Helvetica,Sans Serif;
font-size: 14px;
line-height: 1.33
}
#hk-score__cube {
position: relative;
margin: 0 auto;
bottom: 0;
height: 100px;
width: 150px;
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform-style: preserve-3d
}
.hk-score__subscribeButton {
position: absolute;
left: 0;
width: 100%;
border-radius: 0;
background: #943838;
color: #fff;
cursor: pointer;
border: none;
right: 0;
bottom: 0
}
#hk-score__containerScoreboard {
position: fixed;
bottom: 0;
right: 10px;
z-index: 99999999;
height: 170px;
width: 150px;
transition: bottom .5s ease
}
.hk-score__closeScoreboardClass {
/*background: #c3e4ff;*/
border: 2px solid #4e88bb;
border-bottom: none;
bottom: calc(100% - 2px);
right: 0;
cursor: pointer;
width: 40px;
font-size: 36px;
position: absolute
}
.hk-score__closeScoreboardClass:before {
position: relative;
top: -7px;
content: "";
display: inline-block;
width: .3em;
height: .3em;
border-right: .15em solid #fff;
border-top: .15em solid #fff;
transform: rotate(135deg);
right: -10px
}
.hk-score__closeScoreboardClassClosed {
background: #c3e4ff;
/*border: 2px solid #4e88bb;*/
/*border-bottom: none;*/
bottom: calc(100% - 2px);
right: 0;
cursor: pointer;
width: 40px;
font-size: 36px;
position: absolute
}
.hk-score__closeScoreboardClassClosed:before {
position: relative;
top: 0;
content: "";
display: inline-block;
width: .3em;
height: .3em;
border-right: .15em solid #fff;
border-top: .15em solid #fff;
transform: rotate(-45deg);
right: -10px
}
.hk-score__closeScoreboardClassOpen {
background: #c3e4ff;
/*border: 2px solid #4e88bb;*/
/*border-bottom: none;*/
bottom: calc(100% - 2px);
right: 0;
cursor: pointer;
width: 40px;
font-size: 36px;
position: absolute
}
.hk-score__closeScoreboardClassOpen:before {
position: relative;
top: -7px;
content: "";
display: inline-block;
width: .3em;
height: .3em;
border-right: .15em solid #fff;
border-top: .15em solid #fff;
transform: rotate(135deg);
right: -10px
}
.hk-score__openScoreboardClass {
transform: rotate(-45deg)
}
.hk-score__face {
position: absolute;
height: 170px;
width: 150px;
/*border: 2px solid #4e88bb;*/
padding: 10px;
background: #c3e4ff
}
#hk-score__cube .hk-score__one {
-webkit-transform: rotateX(90deg) translateZ(75px)
}
#hk-score__cube .hk-score__two {
-webkit-transform: translateZ(43.30127px)
}
#hk-score__cube .hk-score__three {
-webkit-transform: rotateY(120deg) translateZ(75px)
}
#hk-score__cube .hk-score__four {
-webkit-transform: rotateY(120deg) translateZ(43.30127px)
}
#hk-score__cube .hk-score__five {
-webkit-transform: rotateY(-120deg) translateZ(43.30127px)
}
#hk-score__cube .hk-score__six {
-webkit-transform: rotateX(-90deg) translateZ(75px) rotate(180deg)
}
.hk-score__sectionHeader {
text-align: center;
text-transform: uppercase;
font-size: 11px;
text-decoration: underline;
font-weight: 700
}
.hk-score__sectionPadding {
padding-top: 0!important
}
.hk-score__sectionMargin {
margin-top: 10px
}
.hk-score__sectionScore {
font-size: 19px!important;
font-weight: 700
}
.hk-score__battingSpan {
padding: 5px 10px;
background: #fff;
color: #000;
}
.hk-score__sectionHeaderContainer {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between
}
.hk-score__sectionHeaderDelete {
margin-top: -3px;
font-size: 10px;
cursor: pointer;
text-decoration: underline
}
.hk-score__sectionLiveScoreContainer {
background: #fff;
color: #000;
height: 60px
}
.hk-score__imageContainer,.hk-score__sectionLiveScoreContainer {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center
}
.hk-score__imageContainer {
width: 100%;
height: 100%;
margin: auto
}
.hk-score__sectionContentMatch {
text-align: center;
padding: 2px 5px;
font-size: 11px
}
.hk-score__image {
max-height: 100%;
max-width: 100%;
margin-top: 2px
}
.hk-score__sectionContentAlignContainer {
height: 100%;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center
}
.hk_score__zeroPadding {
padding: 0!important
}
.hk-score__sectionSubHeader {
text-align: center;
font-size: 10px;
text-decoration: underline
}
#hk-score__battingTableId td {
padding: 2px;
background: #fff;
color: #000 !important;
width: 100%;
font-size: 13px;
text-align: center
}
#hk-score__battingTableId{
margin: 0;
padding: 0;
}
#hk-score__battingTableId td:first-child {
padding: 2px;
font-size: 10px;
text-align: left!important
}
#hk-score__battingTableId th {
font-size: 10px;
font-weight: 700;
padding: 5px;
border: none;
}
#hk-score__bowlingTableId {
margin: 0;
padding: 0;
}
#hk-score__bowlingTableId td {
padding: 2px;
background: #fff;
color: #000 !important;
width: 100%;
font-size: 13px;
text-align: center
}
#hk-score__bowlingTableId td:first-child {
padding: 2px;
font-size: 10px;
text-align: left!important;
word-break: break-all;
}
#hk-score__bowlingTableId th {
font-size: 10px;
font-weight: 700;
border: 0;
padding: 5px;
}
.hk-score__backgroundDD {
background: #9c2425;
color: #fff;
}
.hk-score__backgroundGL {
background: #dc782d;
color: #fff;
}
.hk-score__backgroundKXIP {
background: #a33027;
color: #fff;
}
.hk-score__backgroundKKR {
background: #361f49;
color: #fff;
}
.hk-score__backgroundMI {
background: #0d588c;
color: #fff;
}
.hk-score__backgroundRPS {
background: #172f4b;
color: #fff;
}
.hk-score__backgroundRCB {
background: #b33b43;
color: #fff;
}
.hk-score__backgroundSRH {
background: #cf5737;
color: #fff;
}
.hk-score__backgroundIND {
background: #1769E9;
color: #fff;
}
.hk-score__backgroundPAK {
background: #D0F687;
color: #fff;
}
.hk-score__backgroundAUS {
background: #1C6069;
color: #fff;
}
.hk-score__backgroundSL {
background: #343F73;
color: #fff;
}
.hk-score__backgroundBAN {
background: #1D704A;
color: #fff;
}
.hk-score__backgroundNZ {
background: #264062;
color: #fff;
}
.hk-score__backgroundENG {
background: #D70D57;
color: #fff;
}
.hk-score__backgroundWI {
background: #3E2E2E;
color: #fff;
}
.hk-score__backgroundSA {
background: #2B5B57;
color: #fff;
}
.hk-score__backgroundZIM {
background: #FD4D43;
color: #fff;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
var host = document.querySelector('#host');
host.appendChild(clone);
var vis = (function () {
var stateKey, eventKey, keys = {
hidden: "visibilitychange"
, webkitHidden: "webkitvisibilitychange"
, mozHidden: "mozvisibilitychange"
, msHidden: "msvisibilitychange"
};
for (stateKey in keys) {
if (stateKey in document) {
eventKey = keys[stateKey];
break;
}
}
return function (c) {
if (c) document.addEventListener(eventKey, c);
return !document[stateKey];
}
})();
vis(function () {
vis() ? hk_score_startAutopager() : hk_score_stopAutopager();
//I tried
// $('.alertbox').show();
});
var xAngle = 0, yAngle = 0;
var hk_score__timer;
function rotateScreen(){
yAngle += 120;
var index = yAngle/120;
if((index+1)%3==0){
var interval = 3000;
}
else {
var interval = 10000;
}
document.getElementById('hk-score__cube').style.webkitTransform = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
// console.log('rotate');
clearTimeout(hk_score__timer);
hk_score__timer = setTimeout(function(){rotateScreen();}, interval);
}
function startTimer() {
// console.log("called now");
// hk_score_stopAutopager();
var index = yAngle/120;
if((index+1)%3==0){
var interval = 3000;
}
else {
var interval = 10000;
}
clearTimeout(hk_score__timer);
hk_score__timer = setTimeout(function(){rotateScreen();}, interval);
}
var hk_score_startAutopager = function() {
startTimer();
}
var hk_score_stopAutopager = function () {
// console.log('ad');
clearTimeout(hk_score__timer);
}
document.getElementById("hk-score__containerScoreboard").addEventListener("mouseover", mouseOver);
document.getElementById("hk-score__containerScoreboard").addEventListener("mouseout", mouseOut);
function mouseOver(){
clearTimeout(hk_score__timer);
}
function mouseOut(){
startTimer();
}
var hk_scoreClose = ()=>{};
var setScoreClose = ()=>(
() => {
var currentClass = document.getElementById('hk-score__closeScoreboard').className;
if(currentClass.split("hk-score__closeScoreboardClassOpen").length > 1){
currentClass = currentClass.split("hk-score__closeScoreboardClassOpen").join("hk-score__closeScoreboardClassClosed");
document.getElementById('hk-score__closeScoreboard').className = currentClass;
}
else if(currentClass.split("hk-score__closeScoreboardClassClosed").length > 1){
currentClass = currentClass.split("hk-score__closeScoreboardClassClosed").join("hk-score__closeScoreboardClassOpen");
document.getElementById('hk-score__closeScoreboard').className = currentClass;
}
var currentClass = document.getElementById('hk-score__closeScoreboard').className;
if(currentClass.split('hk-score__closeScoreboardClassOpen').length > 1){
// $('hk-score__closeScoreboard').removeClass('hk-score__closeScoreboardClassOpen');
// document.getElementById('hk-score__closeScoreboard').className += ' hk-score__closeScoreboardClassClosed';
document.getElementById('hk-score__containerScoreboard').style.bottom = '0px';
}
else{
document.getElementById('hk-score__containerScoreboard').style.bottom = '-170px';
// $('hk-score__closeScoreboard').removeClass('hk-score__closeScoreboardClassClosed');
// document.getElementById('hk-score__closeScoreboard').className += ' hk-score__closeScoreboardClassOpen';
}
}
);
startTimer();
if(!!fetch){
setTimeout(()=>{
fetch('chrome-extension://jaehkpjddfdgiiefcnhahapilbejohhj/star-icon.png').catch(err=> {
hk_scoreClose = setScoreClose();
})
}, 2000);
} else{
hk_scoreClose = setScoreClose();
}
function getXMLHTTPRequest() {
try {
req = new XMLHttpRequest();
} catch(err1) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (err2) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (err3) {
req = false;
}
}
}
return req;
}
var fileID = "";
function getCurrentMatch() {
// setTimeout(function(){getCurrentMatch();}, 7000);
var http3 = getXMLHTTPRequest();
var myurl = "https://s3-ap-southeast-1.amazonaws.com/bh-cricket/activeMatch.txt";
var myurl1 = myurl;
myRand = parseInt(Math.random()*999999999999999);
var modurl = myurl1+"?rand="+myRand ;
http3.open("GET", modurl, true);
http3.onreadystatechange = function(){
if (http3.readyState == 4) {
if(http3.status == 200) {
var mytext = http3.responseText;
mytext = JSON.parse(mytext);
if(mytext.length > 0){
fileID = mytext[0].id;
updateScore();
// break;
}
}
}
};
http3.send(null);
}
var globalTeam1;
var globalTeam2;
var updateHandle = 0;
function updateScore() {
clearTimeout(updateHandle);
updateHandle = setTimeout(function(){updateScore();}, 7000);
var http3 = getXMLHTTPRequest();
var myurl = "https://s3-ap-southeast-1.amazonaws.com/bh-cricket/" + fileID + ".txt";
// myurl = "https://s3-ap-southeast-1.amazonaws.com/bh-cricket/18127.txt";
var myurl1 = myurl;
myRand = parseInt(Math.random()*999999999999999);
var modurl = myurl1+"?rand="+myRand ;
http3.open("GET", modurl, true);
http3.onreadystatechange = function(){
if (http3.readyState == 4) {
if(http3.status == 200) {
var mytext = http3.responseText;
mytext = JSON.parse(mytext);
if(mytext.status==""){
return;
}
var score = mytext.score;
var overs = mytext.overs;
var innings = mytext.innings;
if(innings==1){
var team1 = mytext.teamBatting;
var team2 = mytext.teamBowling;
}
else {
var team2 = mytext.teamBatting;
var team1 = mytext.teamBowling;
}
var string = "<tr><th>Batting</th><th>R</th><th>B</th></tr>";
var batsman = mytext.batsman;
for(var k=0;k<batsman.length; k++){
if(batsman[k].name!=""){
string += "<tr><td>" + batsman[k].name + "</td><td>" + batsman[k].r + "</td><td>" + batsman[k].b + "</td></tr>";
}
}
var string2 = "<tr><th>Bowling</th><th>R</th><th>W</th><th>O</th></tr>";
var bowler = mytext.bowler;
for(var k=0;k<bowler.length; k++){
string2 += "<tr><td>" + bowler[k].name + "</td><td>" + bowler[k].r + "</td><td>" + bowler[k].w + "</td><td>" + bowler[k].o + "</td></tr>";
}
document.getElementsByClassName('hk-score__bowlingTable')[0].innerHTML = string2;
document.getElementsByClassName('hk-score__battingTable')[0].innerHTML = string;
document.getElementsByClassName('team1')[0].innerHTML = team1;
document.getElementsByClassName('team2')[0].innerHTML = team2;
document.getElementsByClassName('hk-score__sectionScore')[0].innerHTML = score;
document.getElementsByClassName('hk-score__sectionPadding')[0].innerHTML = overs + " Overs";
if(innings==1){
document.getElementsByClassName('team1')[0].classList.add("hk-score__battingSpan");
console.log(team1);
document.getElementById('hk-score__closeScoreboard').classList.add("hk-score__background"+team1);
// document.getElementsByClassName('hk-score__closeScoreboardClassClosed')[0].className += " hk-score__background"+team1;
// document.getElementsByClassName('hk-score__sectionLiveScoreContainer')[0].className += " hk-score__background"+team1;
document.getElementById('hk-score__backgroundIdLive').classList.add("hk-score__background"+team1);
document.getElementById('hk-score__backgroundIdScorecard').classList.add("hk-score__background"+team1);
document.getElementsByClassName('team2')[0].className = "team2";
document.getElementsByClassName('statusNow')[0].innerHTML = mytext.status;
document.getElementsByClassName('statusSummary')[0].innerHTML = "";
}
else {
document.getElementsByClassName('team1')[0].className = "team1";
document.getElementsByClassName('team2')[0].className += " hk-score__battingSpan";
document.getElementById('hk-score__closeScoreboard').classList.add("hk-score__background"+team2);
// document.getElementsByClassName('hk-score__closeScoreboardClassClosed')[0].className += " hk-score__background"+team2;
// document.getElementsByClassName('hk-score__sectionLiveScoreContainer')[0].className += " hk-score__background"+team2;
document.getElementById('hk-score__backgroundIdLive').classList.add("hk-score__background"+team2);
document.getElementById('hk-score__backgroundIdScorecard').classList.add("hk-score__background"+team2);
document.getElementsByClassName('statusNow')[0].innerHTML = team1 + " : " + mytext.first_innings;
document.getElementsByClassName('statusSummary')[0].innerHTML = mytext.status;
}
if(mytext.status=="" || mytext.score=="/"){
document.getElementById('hk-score__experiment').style.display = "none";
}
else{
document.getElementById('hk-score__experiment').style.display = "";
}
}
}
};
http3.send(null);
}
getCurrentMatch();
function mouseOver2(){
document.getElementById('hk-score__containerScoreboard').style.zIndex = '10';
}
function mouseOut2(){
document.getElementById('hk-score__containerScoreboard').style.zIndex = '99999999';
}
setTimeout(function(){
document.getElementsByClassName("hk-score__containerScoreboard")[0].addEventListener("mouseover", mouseOver2);
document.getElementsByClassName("hk-score__containerScoreboard")[0].addEventListener("mouseout", mouseOut2);
},10000);</script></body>
</html>
Raw
jsbin.fibupapuse.css
#hk-score__cube,.hk-c-modals,.hk-c-window,.hk-compBar,.hk-sideBar {
box-sizing: border-box
}
#hk-score__cube *,#hk-score__cube :after,#hk-score__cube :before,.hk-c-modals *,.hk-c-modals :after,.hk-c-modals :before,.hk-c-window *,.hk-c-window :after,.hk-c-window :before,.hk-compBar *,.hk-compBar :after,.hk-compBar :before,.hk-sideBar *,.hk-sideBar :after,.hk-sideBar :before {
box-sizing: inherit
}
#hk-score__cube,.hk-c-input__text,.hk-c-modals,.hk-c-textarea,.hk-c-window,.hk-compBar,.hk-sideBar,input.hk-c-input__text[type=date],input.hk-c-input__text[type=datetime-local],input.hk-c-input__text[type=datetime],input.hk-c-input__text[type=email],input.hk-c-input__text[type=number],input.hk-c-input__text[type=password],input.hk-c-input__text[type=search],input.hk-c-input__text[type=tel],input.hk-c-input__text[type=text],input.hk-c-input__text[type=time],input.hk-c-input__text[type=url],textarea.hk-c-input__text {
color: #414141;
font-family: Open Sans,Segoe UI,San Francisco,Arial,Helvetica,Sans Serif;
font-size: 14px;
line-height: 1.33
}
#hk-score__cube {
position: relative;
margin: 0 auto;
bottom: 0;
height: 100px;
width: 150px;
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform-style: preserve-3d
}
.hk-score__subscribeButton {
position: absolute;
left: 0;
width: 100%;
border-radius: 0;
background: #943838;
color: #fff;
cursor: pointer;
border: none;
right: 0;
bottom: 0
}
#hk-score__containerScoreboard {
position: fixed;
bottom: 0;
right: 10px;
z-index: 99999999;
height: 170px;
width: 150px;
transition: bottom .5s ease
}
.hk-score__closeScoreboardClass {
/*background: #c3e4ff;*/
border: 2px solid #4e88bb;
border-bottom: none;
bottom: calc(100% - 2px);
right: 0;
cursor: pointer;
width: 40px;
font-size: 36px;
position: absolute
}
.hk-score__closeScoreboardClass:before {
position: relative;
top: -7px;
content: "";
display: inline-block;
width: .3em;
height: .3em;
border-right: .15em solid #fff;
border-top: .15em solid #fff;
transform: rotate(135deg);
right: -10px
}
.hk-score__closeScoreboardClassClosed {
background: #c3e4ff;
/*border: 2px solid #4e88bb;*/
/*border-bottom: none;*/
bottom: calc(100% - 2px);
right: 0;
cursor: pointer;
width: 40px;
font-size: 36px;
position: absolute
}
.hk-score__closeScoreboardClassClosed:before {
position: relative;
top: 0;
content: "";
display: inline-block;
width: .3em;
height: .3em;
border-right: .15em solid #fff;
border-top: .15em solid #fff;
transform: rotate(-45deg);
right: -10px
}
.hk-score__closeScoreboardClassOpen {
background: #c3e4ff;
/*border: 2px solid #4e88bb;*/
/*border-bottom: none;*/
bottom: calc(100% - 2px);
right: 0;
cursor: pointer;
width: 40px;
font-size: 36px;
position: absolute
}
.hk-score__closeScoreboardClassOpen:before {
position: relative;
top: -7px;
content: "";
display: inline-block;
width: .3em;
height: .3em;
border-right: .15em solid #fff;
border-top: .15em solid #fff;
transform: rotate(135deg);
right: -10px
}
.hk-score__openScoreboardClass {
transform: rotate(-45deg)
}
.hk-score__face {
position: absolute;
height: 170px;
width: 150px;
/*border: 2px solid #4e88bb;*/
padding: 10px;
background: #c3e4ff
}
#hk-score__cube .hk-score__one {
-webkit-transform: rotateX(90deg) translateZ(75px)
}
#hk-score__cube .hk-score__two {
-webkit-transform: translateZ(43.30127px)
}
#hk-score__cube .hk-score__three {
-webkit-transform: rotateY(120deg) translateZ(75px)
}
#hk-score__cube .hk-score__four {
-webkit-transform: rotateY(120deg) translateZ(43.30127px)
}
#hk-score__cube .hk-score__five {
-webkit-transform: rotateY(-120deg) translateZ(43.30127px)
}
#hk-score__cube .hk-score__six {
-webkit-transform: rotateX(-90deg) translateZ(75px) rotate(180deg)
}
.hk-score__sectionHeader {
text-align: center;
text-transform: uppercase;
font-size: 11px;
text-decoration: underline;
font-weight: 700
}
.hk-score__sectionPadding {
padding-top: 0!important
}
.hk-score__sectionMargin {
margin-top: 10px
}
.hk-score__sectionScore {
font-size: 19px!important;
font-weight: 700
}
.hk-score__battingSpan {
padding: 5px 10px;
background: #fff;
color: #000;
}
.hk-score__sectionHeaderContainer {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between
}
.hk-score__sectionHeaderDelete {
margin-top: -3px;
font-size: 10px;
cursor: pointer;
text-decoration: underline
}
.hk-score__sectionLiveScoreContainer {
background: #fff;
color: #000;
height: 60px
}
.hk-score__imageContainer,.hk-score__sectionLiveScoreContainer {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center
}
.hk-score__imageContainer {
width: 100%;
height: 100%;
margin: auto
}
.hk-score__sectionContentMatch {
text-align: center;
padding: 2px 5px;
font-size: 11px
}
.hk-score__image {
max-height: 100%;
max-width: 100%;
margin-top: 2px
}
.hk-score__sectionContentAlignContainer {
height: 100%;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center
}
.hk_score__zeroPadding {
padding: 0!important
}
.hk-score__sectionSubHeader {
text-align: center;
font-size: 10px;
text-decoration: underline
}
#hk-score__battingTableId td {
padding: 2px;
background: #fff;
color: #000 !important;
width: 100%;
font-size: 13px;
text-align: center
}
#hk-score__battingTableId{
margin: 0;
padding: 0;
}
#hk-score__battingTableId td:first-child {
padding: 2px;
font-size: 10px;
text-align: left!important
}
#hk-score__battingTableId th {
font-size: 10px;
font-weight: 700;
padding: 5px;
border: none;
}
#hk-score__bowlingTableId {
margin: 0;
padding: 0;
}
#hk-score__bowlingTableId td {
padding: 2px;
background: #fff;
color: #000 !important;
width: 100%;
font-size: 13px;
text-align: center
}
#hk-score__bowlingTableId td:first-child {
padding: 2px;
font-size: 10px;
text-align: left!important;
word-break: break-all;
}
#hk-score__bowlingTableId th {
font-size: 10px;
font-weight: 700;
border: 0;
padding: 5px;
}
.hk-score__backgroundDD {
background: #9c2425;
color: #fff;
}
.hk-score__backgroundGL {
background: #dc782d;
color: #fff;
}
.hk-score__backgroundKXIP {
background: #a33027;
color: #fff;
}
.hk-score__backgroundKKR {
background: #361f49;
color: #fff;
}
.hk-score__backgroundMI {
background: #0d588c;
color: #fff;
}
.hk-score__backgroundRPS {
background: #172f4b;
color: #fff;
}
.hk-score__backgroundRCB {
background: #b33b43;
color: #fff;
}
.hk-score__backgroundSRH {
background: #cf5737;
color: #fff;
}
.hk-score__backgroundIND {
background: #1769E9;
color: #fff;
}
.hk-score__backgroundPAK {
background: #D0F687;
color: #fff;
}
.hk-score__backgroundAUS {
background: #1C6069;
color: #fff;
}
.hk-score__backgroundSL {
background: #343F73;
color: #fff;
}
.hk-score__backgroundBAN {
background: #1D704A;
color: #fff;
}
.hk-score__backgroundNZ {
background: #264062;
color: #fff;
}
.hk-score__backgroundENG {
background: #D70D57;
color: #fff;
}
.hk-score__backgroundWI {
background: #3E2E2E;
color: #fff;
}
.hk-score__backgroundSA {
background: #2B5B57;
color: #fff;
}
.hk-score__backgroundZIM {
background: #FD4D43;
color: #fff;
}
Raw
jsbin.fibupapuse.js
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
var host = document.querySelector('#host');
host.appendChild(clone);
var vis = (function () {
var stateKey, eventKey, keys = {
hidden: "visibilitychange"
, webkitHidden: "webkitvisibilitychange"
, mozHidden: "mozvisibilitychange"
, msHidden: "msvisibilitychange"
};
for (stateKey in keys) {
if (stateKey in document) {
eventKey = keys[stateKey];
break;
}
}
return function (c) {
if (c) document.addEventListener(eventKey, c);
return !document[stateKey];
}
})();
vis(function () {
vis() ? hk_score_startAutopager() : hk_score_stopAutopager();
//I tried
// $('.alertbox').show();
});
var xAngle = 0, yAngle = 0;
var hk_score__timer;
function rotateScreen(){
yAngle += 120;
var index = yAngle/120;
if((index+1)%3==0){
var interval = 3000;
}
else {
var interval = 10000;
}
document.getElementById('hk-score__cube').style.webkitTransform = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
// console.log('rotate');
clearTimeout(hk_score__timer);
hk_score__timer = setTimeout(function(){rotateScreen();}, interval);
}
function startTimer() {
// console.log("called now");
// hk_score_stopAutopager();
var index = yAngle/120;
if((index+1)%3==0){
var interval = 3000;
}
else {
var interval = 10000;
}
clearTimeout(hk_score__timer);
hk_score__timer = setTimeout(function(){rotateScreen();}, interval);
}
var hk_score_startAutopager = function() {
startTimer();
}
var hk_score_stopAutopager = function () {
// console.log('ad');
clearTimeout(hk_score__timer);
}
document.getElementById("hk-score__containerScoreboard").addEventListener("mouseover", mouseOver);
document.getElementById("hk-score__containerScoreboard").addEventListener("mouseout", mouseOut);
function mouseOver(){
clearTimeout(hk_score__timer);
}
function mouseOut(){
startTimer();
}
var hk_scoreClose = ()=>{};
var setScoreClose = ()=>(
() => {
var currentClass = document.getElementById('hk-score__closeScoreboard').className;
if(currentClass.split("hk-score__closeScoreboardClassOpen").length > 1){
currentClass = currentClass.split("hk-score__closeScoreboardClassOpen").join("hk-score__closeScoreboardClassClosed");
document.getElementById('hk-score__closeScoreboard').className = currentClass;
}
else if(currentClass.split("hk-score__closeScoreboardClassClosed").length > 1){
currentClass = currentClass.split("hk-score__closeScoreboardClassClosed").join("hk-score__closeScoreboardClassOpen");
document.getElementById('hk-score__closeScoreboard').className = currentClass;
}
var currentClass = document.getElementById('hk-score__closeScoreboard').className;
if(currentClass.split('hk-score__closeScoreboardClassOpen').length > 1){
// $('hk-score__closeScoreboard').removeClass('hk-score__closeScoreboardClassOpen');
// document.getElementById('hk-score__closeScoreboard').className += ' hk-score__closeScoreboardClassClosed';
document.getElementById('hk-score__containerScoreboard').style.bottom = '0px';
}
else{
document.getElementById('hk-score__containerScoreboard').style.bottom = '-170px';
// $('hk-score__closeScoreboard').removeClass('hk-score__closeScoreboardClassClosed');
// document.getElementById('hk-score__closeScoreboard').className += ' hk-score__closeScoreboardClassOpen';
}
}
);
startTimer();
if(!!fetch){
setTimeout(()=>{
fetch('chrome-extension://jaehkpjddfdgiiefcnhahapilbejohhj/star-icon.png').catch(err=> {
hk_scoreClose = setScoreClose();
})
}, 2000);
} else{
hk_scoreClose = setScoreClose();
}
function getXMLHTTPRequest() {
try {
req = new XMLHttpRequest();
} catch(err1) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (err2) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (err3) {
req = false;
}
}
}
return req;
}
var fileID = "";
function getCurrentMatch() {
// setTimeout(function(){getCurrentMatch();}, 7000);
var http3 = getXMLHTTPRequest();
var myurl = "https://s3-ap-southeast-1.amazonaws.com/bh-cricket/activeMatch.txt";
var myurl1 = myurl;
myRand = parseInt(Math.random()*999999999999999);
var modurl = myurl1+"?rand="+myRand ;
http3.open("GET", modurl, true);
http3.onreadystatechange = function(){
if (http3.readyState == 4) {
if(http3.status == 200) {
var mytext = http3.responseText;
mytext = JSON.parse(mytext);
if(mytext.length > 0){
fileID = mytext[0].id;
updateScore();
// break;
}
}
}
};
http3.send(null);
}
var globalTeam1;
var globalTeam2;
var updateHandle = 0;
function updateScore() {
clearTimeout(updateHandle);
updateHandle = setTimeout(function(){updateScore();}, 7000);
var http3 = getXMLHTTPRequest();
var myurl = "https://s3-ap-southeast-1.amazonaws.com/bh-cricket/" + fileID + ".txt";
// myurl = "https://s3-ap-southeast-1.amazonaws.com/bh-cricket/18127.txt";
var myurl1 = myurl;
myRand = parseInt(Math.random()*999999999999999);
var modurl = myurl1+"?rand="+myRand ;
http3.open("GET", modurl, true);
http3.onreadystatechange = function(){
if (http3.readyState == 4) {
if(http3.status == 200) {
var mytext = http3.responseText;
mytext = JSON.parse(mytext);
if(mytext.status==""){
return;
}
var score = mytext.score;
var overs = mytext.overs;
var innings = mytext.innings;
if(innings==1){
var team1 = mytext.teamBatting;
var team2 = mytext.teamBowling;
}
else {
var team2 = mytext.teamBatting;
var team1 = mytext.teamBowling;
}
var string = "<tr><th>Batting</th><th>R</th><th>B</th></tr>";
var batsman = mytext.batsman;
for(var k=0;k<batsman.length; k++){
if(batsman[k].name!=""){
string += "<tr><td>" + batsman[k].name + "</td><td>" + batsman[k].r + "</td><td>" + batsman[k].b + "</td></tr>";
}
}
var string2 = "<tr><th>Bowling</th><th>R</th><th>W</th><th>O</th></tr>";
var bowler = mytext.bowler;
for(var k=0;k<bowler.length; k++){
string2 += "<tr><td>" + bowler[k].name + "</td><td>" + bowler[k].r + "</td><td>" + bowler[k].w + "</td><td>" + bowler[k].o + "</td></tr>";
}
document.getElementsByClassName('hk-score__bowlingTable')[0].innerHTML = string2;
document.getElementsByClassName('hk-score__battingTable')[0].innerHTML = string;
document.getElementsByClassName('team1')[0].innerHTML = team1;
document.getElementsByClassName('team2')[0].innerHTML = team2;
document.getElementsByClassName('hk-score__sectionScore')[0].innerHTML = score;
document.getElementsByClassName('hk-score__sectionPadding')[0].innerHTML = overs + " Overs";
if(innings==1){
document.getElementsByClassName('team1')[0].classList.add("hk-score__battingSpan");
console.log(team1);
document.getElementById('hk-score__closeScoreboard').classList.add("hk-score__background"+team1);
// document.getElementsByClassName('hk-score__closeScoreboardClassClosed')[0].className += " hk-score__background"+team1;
// document.getElementsByClassName('hk-score__sectionLiveScoreContainer')[0].className += " hk-score__background"+team1;
document.getElementById('hk-score__backgroundIdLive').classList.add("hk-score__background"+team1);
document.getElementById('hk-score__backgroundIdScorecard').classList.add("hk-score__background"+team1);
document.getElementsByClassName('team2')[0].className = "team2";
document.getElementsByClassName('statusNow')[0].innerHTML = mytext.status;
document.getElementsByClassName('statusSummary')[0].innerHTML = "";
}
else {
document.getElementsByClassName('team1')[0].className = "team1";
document.getElementsByClassName('team2')[0].className += " hk-score__battingSpan";
document.getElementById('hk-score__closeScoreboard').classList.add("hk-score__background"+team2);
// document.getElementsByClassName('hk-score__closeScoreboardClassClosed')[0].className += " hk-score__background"+team2;
// document.getElementsByClassName('hk-score__sectionLiveScoreContainer')[0].className += " hk-score__background"+team2;
document.getElementById('hk-score__backgroundIdLive').classList.add("hk-score__background"+team2);
document.getElementById('hk-score__backgroundIdScorecard').classList.add("hk-score__background"+team2);
document.getElementsByClassName('statusNow')[0].innerHTML = team1 + " : " + mytext.first_innings;
document.getElementsByClassName('statusSummary')[0].innerHTML = mytext.status;
}
if(mytext.status=="" || mytext.score=="/"){
document.getElementById('hk-score__experiment').style.display = "none";
}
else{
document.getElementById('hk-score__experiment').style.display = "";
}
}
}
};
http3.send(null);
}
getCurrentMatch();
function mouseOver2(){
document.getElementById('hk-score__containerScoreboard').style.zIndex = '10';
}
function mouseOut2(){
document.getElementById('hk-score__containerScoreboard').style.zIndex = '99999999';
}
setTimeout(function(){
document.getElementsByClassName("hk-score__containerScoreboard")[0].addEventListener("mouseover", mouseOver2);
document.getElementsByClassName("hk-score__containerScoreboard")[0].addEventListener("mouseout", mouseOut2);
},10000);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment