194 lines
4.4 KiB
PHP
194 lines
4.4 KiB
PHP
</main>
|
|
</div>
|
|
|
|
<style>
|
|
#mydiv {
|
|
position: absolute;
|
|
z-index: 9;
|
|
background: #1111119e;
|
|
text-align: center;
|
|
border: 1px solid #d3d3d3;
|
|
|
|
width: 300px;
|
|
height: 500px;
|
|
|
|
bottom: 10px;
|
|
right: 10px;
|
|
}
|
|
|
|
#mydivheader {
|
|
padding: 10px;
|
|
cursor: move;
|
|
z-index: 10;
|
|
background: #000;
|
|
color: #fff;
|
|
}
|
|
|
|
#mydivinner {
|
|
padding: .75rem;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
<body>
|
|
|
|
<div id="mydiv">
|
|
<div id="mydivheader">LIVE CHAT SUPPORT</div>
|
|
<div id="mydivinner">
|
|
<style>
|
|
.willychat {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
<iframe class="willychat" src="<?=url('/chat/')?>" frameborder="0" scrolling="no"></iframe>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
//Make the DIV element draggagle:
|
|
dragElement(document.getElementById("mydiv"));
|
|
|
|
function dragElement(elmnt) {
|
|
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
|
|
if (document.getElementById(elmnt.id + "header")) {
|
|
/* if present, the header is where you move the DIV from:*/
|
|
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
|
|
} else {
|
|
/* otherwise, move the DIV from anywhere inside the DIV:*/
|
|
elmnt.onmousedown = dragMouseDown;
|
|
}
|
|
|
|
function dragMouseDown(e) {
|
|
e = e || window.event;
|
|
e.preventDefault();
|
|
// get the mouse cursor position at startup:
|
|
pos3 = e.clientX;
|
|
pos4 = e.clientY;
|
|
document.onmouseup = closeDragElement;
|
|
// call a function whenever the cursor moves:
|
|
document.onmousemove = elementDrag;
|
|
}
|
|
|
|
function elementDrag(e) {
|
|
e = e || window.event;
|
|
e.preventDefault();
|
|
// calculate the new cursor position:
|
|
pos1 = pos3 - e.clientX;
|
|
pos2 = pos4 - e.clientY;
|
|
pos3 = e.clientX;
|
|
pos4 = e.clientY;
|
|
// set the element's new position:
|
|
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
|
|
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
|
|
}
|
|
|
|
function closeDragElement() {
|
|
/* stop moving when mouse button is released:*/
|
|
document.onmouseup = null;
|
|
document.onmousemove = null;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
|
|
|
|
var tag = document.createElement('script');
|
|
tag.src = "https://www.youtube.com/iframe_api";
|
|
|
|
var fScriptTag = document.getElementsByTagName('script')[0];
|
|
fScriptTag.parentNode.insertBefore(tag, fScriptTag);
|
|
|
|
var player;
|
|
function startTheThang() {
|
|
myModal.style.display = 'none';
|
|
player = new YT.Player('player', {
|
|
height: '0',
|
|
width: '0',
|
|
videoId: 'p0jTwrI774o',
|
|
playerVars:{'mute' : 0,'autoplay':1},
|
|
events: { }
|
|
});
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
<div id="player"></div>
|
|
|
|
<script>
|
|
// this isbetter than react
|
|
document.onclick = function (e) {
|
|
e = e || window.event;
|
|
var element = e.target || e.srcElement;
|
|
|
|
if (element.tagName == 'A') {
|
|
changePage(element.href)
|
|
return false; // prevent default action and stop event propagation
|
|
}
|
|
};
|
|
|
|
window.addEventListener('popstate', (event) => {
|
|
changePage(document.location);
|
|
});
|
|
|
|
function changePage(href) {
|
|
fetch(href).then(function (response) {
|
|
// The API call was successful!
|
|
return response.text();
|
|
}).then(function (html) {
|
|
|
|
// Convert the HTML string into a document object
|
|
var parser = new DOMParser();
|
|
var doc = parser.parseFromString(html, 'text/html');
|
|
|
|
document.getElementById('pageContent').animate([
|
|
// keyframes
|
|
{ transform: 'scale(100%)' },
|
|
{ transform: 'scale(0%)' }
|
|
], {
|
|
// timing options
|
|
duration: 500,
|
|
iterations: 1
|
|
});
|
|
setTimeout(() => {
|
|
document.getElementById('pageContent').animate([
|
|
// keyframes
|
|
{ transform: 'scale(0%)' },
|
|
{ transform: 'scale(100%)' }
|
|
], {
|
|
// timing options
|
|
duration: 500,
|
|
iterations: 1
|
|
});
|
|
document.getElementById('pageContent').innerHTML = doc.getElementById('pageContent').innerHTML;
|
|
}, 500);
|
|
|
|
window.history.pushState('fart', 'Title', href);
|
|
|
|
}).catch(function (err) {
|
|
// There was an error
|
|
console.warn('Something went wrong.', err);
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
.changePage {
|
|
animation: booooom 1s linear infinite;
|
|
}
|
|
@keyframes booooom {
|
|
0% {
|
|
font-size: 1rem;
|
|
}
|
|
100% {
|
|
font-size: 10rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|
|
</html> |