First commit
This commit is contained in:
Pablo
GitHub
commit
9afd5caa61
|
|
@ -0,0 +1,476 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="Refresh" content="300" />
|
||||
<title>VA3HDL Ham Radio Dashboard</title>
|
||||
<!--
|
||||
Hamdash
|
||||
license: MIT
|
||||
https://www.va3hdl.com/projects/hamdash
|
||||
|
||||
|
||||
.d8888. d888888b db db db d88888b .d8888.
|
||||
88' YP `~~88~~' `8b d8' 88 88' 88' YP
|
||||
`8bo. 88 `8bd8' 88 88ooooo `8bo.
|
||||
`Y8b. 88 88 88 88~~~~~ `Y8b.
|
||||
db 8D 88 88 88booo. 88. db 8D
|
||||
`8888Y' YP YP Y88888P Y88888P `8888Y'
|
||||
|
||||
|
||||
-->
|
||||
<style>
|
||||
body {
|
||||
background: black;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.iframe-container {
|
||||
background-color: black;
|
||||
left: 0px;
|
||||
border: 0px none;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
bottom: 0px;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.img-zoom {
|
||||
background-color: black;
|
||||
left: 0px;
|
||||
border: 0px none;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
bottom: 0px;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
/* Style for the fullscreen container (menu options) */
|
||||
.full-screen {
|
||||
height: 100%;
|
||||
border: 0px none;
|
||||
width: 100%;
|
||||
margin-bottom: 0px;
|
||||
margin-left: 0px;
|
||||
-ms-zoom: 1;
|
||||
-moz-transform: scale(1);
|
||||
-moz-transform-origin: 0 0;
|
||||
-o-transform: scale(1);
|
||||
-o-transform-origin: 0 0;
|
||||
-webkit-transform: scale(1);
|
||||
-webkit-transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.default-frame {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
margin-left: 0px;
|
||||
left: 0px;
|
||||
border: 0px none;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 2fr;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 1vh;
|
||||
border: 0px none;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.child {
|
||||
position: relative;
|
||||
display: grid;
|
||||
height: 4.2vh;
|
||||
border: 1px solid hsl(210deg 8% 50%);
|
||||
border-radius: 5px;
|
||||
background: hsl(210deg 15% 20%);
|
||||
color: white;
|
||||
font-family: Inconsolata Nerd Font Mono, monospace, Monaco, sans-serif;
|
||||
font-size: 2vw;
|
||||
}
|
||||
|
||||
/* Style for the dashboard container */
|
||||
.dashboard {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-gap: 0px;
|
||||
border: 0px none;
|
||||
margin-bottom: 0px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Style for the image container */
|
||||
.image-container {
|
||||
position: relative;
|
||||
float: inline-start;
|
||||
margin-right: 0px;
|
||||
border: 0px;
|
||||
width: 24.9vw;
|
||||
height: 31vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center; /* Horizontal centering */
|
||||
align-items: center; /* Vertical centering */
|
||||
}
|
||||
|
||||
/* Style for the image */
|
||||
.image-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Style for the image titles */
|
||||
.image-title {
|
||||
position: absolute;
|
||||
top: 6%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white; /* font color */
|
||||
background-color: black;
|
||||
font-size: 1.2vw;
|
||||
border-left: 0.25vw solid black;
|
||||
border-right: 0.25vw solid black;
|
||||
font-family: Bebas Neue, monospace, Monaco, sans-serif;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
/* Style for the full screen image */
|
||||
.image-large {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Style for the left menu options */
|
||||
.menu {
|
||||
display: grid;
|
||||
/* grid-row: 9 / span 1; /* Update with number of menu items */
|
||||
grid-gap: 3px;
|
||||
position: absolute;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin-top: 70px;
|
||||
left: 0px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#mySidenav a {
|
||||
position: relative;
|
||||
float: inline-start;
|
||||
left: -120px;
|
||||
transition: 0.3s;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 8px;
|
||||
width: 100px;
|
||||
text-decoration: none;
|
||||
font-family: Bebas Neue Bold, monospace, Monaco, sans-serif;
|
||||
font-size: 28px;
|
||||
text-align: right;
|
||||
color: white;
|
||||
border-radius: 0 5px 5px 0;
|
||||
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#mySidenav a:hover {
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<!--
|
||||
.d8888. .o88b. d8888b. d888888b d8888b. d888888b .d8888.
|
||||
88' YP d8P Y8 88 `8D `88' 88 `8D `~~88~~' 88' YP
|
||||
`8bo. 8P 88oobY' 88 88oodD' 88 `8bo.
|
||||
`Y8b. 8b 88`8b 88 88~~~ 88 `Y8b.
|
||||
db 8D Y8b d8 88 `88. .88. 88 88 db 8D
|
||||
`8888Y' `Y88P' 88 YD Y888888P 88 YP `8888Y'
|
||||
|
||||
|
||||
-->
|
||||
<script src="wheelzoom.js"></script>
|
||||
|
||||
<script>
|
||||
// Menu items - Structure is Color code, Option, target URL, scaling 1=Original Size
|
||||
// [color code, menu text, link, scale factor]
|
||||
const aURL = [
|
||||
["add10d", "BACK", "#", "1"],
|
||||
["ff9100", "Refresh", "#", "1"],
|
||||
["0dd1a7", "Help", "#", "1"],
|
||||
[
|
||||
"2196F3",
|
||||
"CAT",
|
||||
"file:///home/psabbag/Dropbox/Radio/CAThtml/CAT_Frequencies.html",
|
||||
"1",
|
||||
],
|
||||
["2196F3", "CLUBLOG", "https://clublog.org/livestream/VA3HDL", "1.7"],
|
||||
[
|
||||
"2196F3",
|
||||
"CONTEST",
|
||||
"https://www.contestcalendar.com/fivewkcal.html",
|
||||
"1",
|
||||
],
|
||||
["2196F3", "HAMCLOCK", "http://192.168.0.111:8081/live.html", "1"],
|
||||
[
|
||||
"2196F3",
|
||||
"LIGHTNING",
|
||||
"https://map.blitzortung.org/#3.87/36.5/-89.41",
|
||||
"1",
|
||||
],
|
||||
["2196F3", "PISTAR", "http://pi-star.local/", "1.2"],
|
||||
[
|
||||
"2196F3",
|
||||
"RADAR",
|
||||
"https://weather.gc.ca/?layers=alert,radar¢er=43.39961001,-78.53212031&zoom=6&alertTableFilterProv=ON",
|
||||
"1",
|
||||
],
|
||||
["2196F3", "TIME.IS", "https://time.is/", "1"],
|
||||
[
|
||||
"2196F3",
|
||||
"WINDS",
|
||||
"https://earth.nullschool.net/#current/wind/surface/level/orthographic=-78.79,44.09,3000",
|
||||
"1",
|
||||
],
|
||||
];
|
||||
|
||||
// Dashboard items - Structure is Title, Image Source URL
|
||||
// [Title, Image Source URL]
|
||||
const aIMG = [
|
||||
["RADAR", "https://radar.weather.gov/ridge/standard/CONUS_loop.gif"],
|
||||
[
|
||||
"LOCAL RADAR",
|
||||
"https://s.w-x.co/staticmaps/wu/wxtype/county_loc/bgm/animate.png",
|
||||
],
|
||||
[
|
||||
"NOAA D-RAP",
|
||||
"https://services.swpc.noaa.gov/images/animations/d-rap/global/d-rap/latest.png",
|
||||
],
|
||||
[
|
||||
"ISS POSITION",
|
||||
"https://www.heavens-above.com/orbitdisplay.aspx?icon=iss&width=600&height=300&mode=M&satid=25544",
|
||||
],
|
||||
[
|
||||
"SATELLITE CAN",
|
||||
"https://cdn.star.nesdis.noaa.gov/GOES16/GLM/SECTOR/can/EXTENT3/GOES16-CAN-EXTENT3-1125x560.gif",
|
||||
],
|
||||
[
|
||||
"SATELLITE CGL",
|
||||
"https://cdn.star.nesdis.noaa.gov/GOES16/GLM/SECTOR/cgl/EXTENT3/GOES16-CGL-EXTENT3-600x600.gif",
|
||||
],
|
||||
[
|
||||
"LIGHTNING",
|
||||
"https://images.lightningmaps.org/blitzortung/america/index.php?animation=usa",
|
||||
],
|
||||
[
|
||||
"LIGHTNING LOCAL",
|
||||
"https://www.blitzortung.org/en/Images/image_b_ny.png",
|
||||
],
|
||||
["HAMCLOCK", "http://192.168.0.111/hamclock/last_map.bmp"],
|
||||
[
|
||||
"SW BROADCAST",
|
||||
"https://www.short-wave.info/php/transmitter-site-map.php?mobile=false&lat=52.67|-21.96|-15.53|-9.42|-17.76|-17.53|46.34|50.73|42.81|39.75|50.89|29.60|6.23|39.40|-15.53|43.51|46.34|-21.96|34.38|44.15|39.36|46.34|39.91|39.91|46.34|27.46|24.88|27.46|36.28|39.36|42.04|36.28|36.21|12.69|18.22|24.17|42.04|29.60|-15.73|-7.90|36.21|12.69|36.21|29.15|30.65|-21.96|33.50|-38.83|36.28|36.21|27.46&lon=9.75|27.60|28.00|160.05|168.36|146.05|-67.83|4.39|23.19|116.81|-113.85|55.79|-10.70|32.86|28.00|-79.63|-67.83|27.64|108.61|86.90|75.72|-67.83|-76.58|-76.58|-67.83|-80.93|102.50|-80.93|-86.10|75.72|12.32|-86.10|-86.89|-8.02|-63.02|54.25|12.32|55.79|46.45|-14.38|-86.89|-8.02|-86.89|47.77|-87.09|27.64|-86.47|176.42|-86.10|-86.89|-80.93&freq=3975|4930|4965|5020|5040|5055|5130|5780|5900|5985|6030|6040|6050|6050|6065|6070|6160|6195|7285|7295|7415|7490|9265|9265|9330|9395|9440|9455|9475|9600|9705|9930|9980|11640|11775|11810|11870|11880|11965|12095|12160|13630|13845|15540|15555|15580|15610|15720|15810|15825|17790&az=ND|20|ND|ND|ND|ND|245|ND|126|257|ND|313|ND|310|315|ND|245|350|317|270|308|245|242|242|245|355|283|285|50|308|206|180|90|111|320|90|210|211|295|27|85|111|90|310|5|350|85|35|40|46|160",
|
||||
],
|
||||
["BAYVIEW AVE", "https://ww5.yorkmaps.ca/webtrafficimages/loc230.jpg"],
|
||||
["HF PROPAGATION", "https://www.hamqsl.com/solarpich.php"],
|
||||
];
|
||||
|
||||
// https://www.hamqsl.com/solar100sc.php
|
||||
// https://www.hamqsl.com/solarbc.php
|
||||
// https://www.hamqsl.com/solarpich.php
|
||||
|
||||
var largeShow = 0;
|
||||
|
||||
// This function shows the embedded websites
|
||||
function MenuOpt(num) {
|
||||
document.getElementById("FullScreen").style.display = "block";
|
||||
document.getElementById("iFrameContainer").style.zIndex = 1;
|
||||
document.getElementById("FullScreen").src = aURL[num][2];
|
||||
document.getElementById("FullScreen").style.transform =
|
||||
"scale(" + aURL[num][3] + ")";
|
||||
if (num == 0) {
|
||||
wheelzoom(document.querySelectorAll("img"));
|
||||
} else if (num == 1) {
|
||||
location.reload(true);
|
||||
} else if (num == 2) {
|
||||
alert(`Double click on an image to expand to full screen.
|
||||
Double click again to close full screen view.
|
||||
The content refreshes automatically every 5 minutes.
|
||||
`);
|
||||
}
|
||||
}
|
||||
|
||||
// This function shows the larger images when double click to enlarge
|
||||
function larger(event) {
|
||||
var targetElement = event.target || event.srcElement;
|
||||
if (largeShow == 1) {
|
||||
largeShow = 0;
|
||||
document.getElementById("imgZoom").style.display = "none";
|
||||
document.getElementById("imgZoom").style.zIndex = -2;
|
||||
} else {
|
||||
largeShow = 1;
|
||||
document.getElementById("imgZoom").style.display = "block";
|
||||
document.getElementById("imgZoom").style.zIndex = 3;
|
||||
document.getElementById("ImageLarge").src =
|
||||
targetElement.style.backgroundImage
|
||||
.replace(/^url\(["']?/, "")
|
||||
.replace(/["']?\)$/, "");
|
||||
}
|
||||
}
|
||||
|
||||
function start() {
|
||||
// Get the parent div for Menu container
|
||||
var parentDiv = document.getElementById("myMenu");
|
||||
// Append the new div to the parent div
|
||||
aURL.forEach(function (innerArray, index) {
|
||||
// Create a new div element
|
||||
var newDiv = document.createElement("div");
|
||||
// Set some properties for the new div
|
||||
newDiv.id = "mySidenav";
|
||||
newDiv.className = "sidenav";
|
||||
newDiv.innerHTML = `<a href="#" style="background-color:#${innerArray[0]};" onclick="MenuOpt(${index})">${innerArray[1]}</a>`;
|
||||
parentDiv.appendChild(newDiv);
|
||||
});
|
||||
|
||||
// Get the parent div for Dashboard container
|
||||
var parentDiv = document.getElementById("dash");
|
||||
// Append the new div to the parent div
|
||||
aIMG.forEach(function (innerArray, index) {
|
||||
// Create a new div element
|
||||
var newDiv = document.createElement("div");
|
||||
// Set some properties for the new div
|
||||
newDiv.className = "image-container";
|
||||
// Create a new img element
|
||||
var newImg = document.createElement("img");
|
||||
newImg.id = `"Image${index}"`;
|
||||
newImg.src = innerArray[1];
|
||||
newImg.ondblclick = larger;
|
||||
parentDiv.appendChild(newDiv);
|
||||
newDiv.appendChild(newImg);
|
||||
// Create a new div element for img title
|
||||
var newTtl = document.createElement("div");
|
||||
newTtl.className = "image-title";
|
||||
newTtl.innerHTML = innerArray[0];
|
||||
newDiv.appendChild(newTtl);
|
||||
});
|
||||
|
||||
// assign wheelzoom functionality to all 12 images
|
||||
wheelzoom(document.querySelectorAll("img"));
|
||||
|
||||
window.addEventListener("resize", function () {
|
||||
"use strict";
|
||||
window.location.reload();
|
||||
});
|
||||
}
|
||||
|
||||
// This function update the time on the top bar
|
||||
function updateTopBar() {
|
||||
const now = new Date();
|
||||
|
||||
const options = { weekday: "long", month: "long", day: "numeric" };
|
||||
|
||||
const localDate = now.toLocaleDateString("en-US", options);
|
||||
const localTime = now.toLocaleTimeString("en-US", {
|
||||
hour12: true,
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
timeZoneName: "short",
|
||||
});
|
||||
|
||||
const utcDate = now.toISOString().slice(0, 10);
|
||||
const utcTime = now.toISOString().slice(11, 19) + " UTC";
|
||||
|
||||
const topBarLeft = document.getElementById("topBarLeft");
|
||||
topBarLeft.textContent = `${localDate} - ${localTime}`;
|
||||
const topBarCenter = document.getElementById("topBarCenter");
|
||||
topBarCenter.textContent = `VA3HDL - FN04ga`;
|
||||
const topBarRight = document.getElementById("topBarRight");
|
||||
topBarRight.textContent = `${utcDate} ${utcTime}`;
|
||||
}
|
||||
|
||||
// Update every second
|
||||
setInterval(updateTopBar, 1000);
|
||||
|
||||
// Initial call to update
|
||||
updateTopBar();
|
||||
</script>
|
||||
<!--
|
||||
d8888b. .d88b. d8888b. db db
|
||||
88 `8D .8P Y8. 88 `8D `8b d8'
|
||||
88oooY' 88 88 88 88 `8bd8'
|
||||
88~~~b. 88 88 88 88 88
|
||||
88 8D `8b d8' 88 .8D 88
|
||||
Y8888P' `Y88P' Y8888D' YP
|
||||
|
||||
|
||||
-->
|
||||
<body onload="start()">
|
||||
<div id="iFrameContainer" class="iframe-container">
|
||||
<iframe
|
||||
class="full-screen"
|
||||
id="FullScreen"
|
||||
src=""
|
||||
title="Zoom"
|
||||
scrolling="no"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<div id="imgZoom" class="img-zoom">
|
||||
<img
|
||||
class="image-large"
|
||||
id="ImageLarge"
|
||||
alt="pic"
|
||||
ondblclick="larger(event);"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="myMenu" class="menu">
|
||||
<!-- Menu container -->
|
||||
</div>
|
||||
|
||||
<div id="defaultFrame" class="default-frame">
|
||||
<div class="top-bar">
|
||||
<div
|
||||
id="topBarLeft"
|
||||
class="child"
|
||||
style="text-align: left; padding-left: 7px; color: blanchedalmond"
|
||||
></div>
|
||||
<div
|
||||
id="topBarCenter"
|
||||
class="child"
|
||||
style="text-align: center; color: rgb(0, 119, 255)"
|
||||
></div>
|
||||
<div
|
||||
id="topBarRight"
|
||||
class="child"
|
||||
style="text-align: right; padding-right: 5px; color: aquamarine"
|
||||
></div>
|
||||
</div>
|
||||
<div id="dash" class="dashboard">
|
||||
<!-- Images container -->
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,206 @@
|
|||
/*!
|
||||
Wheelzoom 4.0.1
|
||||
license: MIT
|
||||
http://www.jacklmoore.com/wheelzoom
|
||||
*/
|
||||
window.wheelzoom = (function(){
|
||||
var defaults = {
|
||||
zoom: 0.10,
|
||||
maxZoom: false,
|
||||
initialZoom: 1,
|
||||
initialX: 0.5,
|
||||
initialY: 0.5,
|
||||
};
|
||||
|
||||
var main = function(img, options){
|
||||
if (!img || !img.nodeName || img.nodeName !== 'IMG') { return; }
|
||||
|
||||
var settings = {};
|
||||
var width;
|
||||
var height;
|
||||
var bgWidth;
|
||||
var bgHeight;
|
||||
var bgPosX;
|
||||
var bgPosY;
|
||||
var previousEvent;
|
||||
var transparentSpaceFiller;
|
||||
|
||||
function setSrcToBackground(img) {
|
||||
img.style.backgroundRepeat = 'no-repeat';
|
||||
img.style.backgroundImage = 'url("'+img.src+'")';
|
||||
transparentSpaceFiller = 'data:image/svg+xml;base64,'+window.btoa('<svg xmlns="http://www.w3.org/2000/svg" width="'+img.naturalWidth+'" height="'+img.naturalHeight+'"></svg>');
|
||||
img.src = transparentSpaceFiller;
|
||||
}
|
||||
|
||||
function updateBgStyle() {
|
||||
if (bgPosX > 0) {
|
||||
bgPosX = 0;
|
||||
} else if (bgPosX < width - bgWidth) {
|
||||
bgPosX = width - bgWidth;
|
||||
}
|
||||
|
||||
if (bgPosY > 0) {
|
||||
bgPosY = 0;
|
||||
} else if (bgPosY < height - bgHeight) {
|
||||
bgPosY = height - bgHeight;
|
||||
}
|
||||
|
||||
img.style.backgroundSize = bgWidth+'px '+bgHeight+'px';
|
||||
img.style.backgroundPosition = bgPosX+'px '+bgPosY+'px';
|
||||
}
|
||||
|
||||
function reset() {
|
||||
bgWidth = width;
|
||||
bgHeight = height;
|
||||
bgPosX = bgPosY = 0;
|
||||
updateBgStyle();
|
||||
}
|
||||
|
||||
function onwheel(e) {
|
||||
var deltaY = 0;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
if (e.deltaY) { // FireFox 17+ (IE9+, Chrome 31+?)
|
||||
deltaY = e.deltaY;
|
||||
} else if (e.wheelDelta) {
|
||||
deltaY = -e.wheelDelta;
|
||||
}
|
||||
|
||||
// As far as I know, there is no good cross-browser way to get the cursor position relative to the event target.
|
||||
// We have to calculate the target element's position relative to the document, and subtrack that from the
|
||||
// cursor's position relative to the document.
|
||||
var rect = img.getBoundingClientRect();
|
||||
var offsetX = e.pageX - rect.left - window.pageXOffset;
|
||||
var offsetY = e.pageY - rect.top - window.pageYOffset;
|
||||
|
||||
// Record the offset between the bg edge and cursor:
|
||||
var bgCursorX = offsetX - bgPosX;
|
||||
var bgCursorY = offsetY - bgPosY;
|
||||
|
||||
// Use the previous offset to get the percent offset between the bg edge and cursor:
|
||||
var bgRatioX = bgCursorX/bgWidth;
|
||||
var bgRatioY = bgCursorY/bgHeight;
|
||||
|
||||
// Update the bg size:
|
||||
if (deltaY < 0) {
|
||||
bgWidth += bgWidth*settings.zoom;
|
||||
bgHeight += bgHeight*settings.zoom;
|
||||
} else {
|
||||
bgWidth -= bgWidth*settings.zoom;
|
||||
bgHeight -= bgHeight*settings.zoom;
|
||||
}
|
||||
|
||||
if (settings.maxZoom) {
|
||||
bgWidth = Math.min(width*settings.maxZoom, bgWidth);
|
||||
bgHeight = Math.min(height*settings.maxZoom, bgHeight);
|
||||
}
|
||||
|
||||
// Take the percent offset and apply it to the new size:
|
||||
bgPosX = offsetX - (bgWidth * bgRatioX);
|
||||
bgPosY = offsetY - (bgHeight * bgRatioY);
|
||||
|
||||
// Prevent zooming out beyond the starting size
|
||||
if (bgWidth <= width || bgHeight <= height) {
|
||||
reset();
|
||||
} else {
|
||||
updateBgStyle();
|
||||
}
|
||||
}
|
||||
|
||||
function drag(e) {
|
||||
e.preventDefault();
|
||||
bgPosX += (e.pageX - previousEvent.pageX);
|
||||
bgPosY += (e.pageY - previousEvent.pageY);
|
||||
previousEvent = e;
|
||||
updateBgStyle();
|
||||
}
|
||||
|
||||
function removeDrag() {
|
||||
document.removeEventListener('mouseup', removeDrag);
|
||||
document.removeEventListener('mousemove', drag);
|
||||
}
|
||||
|
||||
// Make the background draggable
|
||||
function draggable(e) {
|
||||
e.preventDefault();
|
||||
previousEvent = e;
|
||||
document.addEventListener('mousemove', drag);
|
||||
document.addEventListener('mouseup', removeDrag);
|
||||
}
|
||||
|
||||
function load() {
|
||||
var initial = Math.max(settings.initialZoom, 1);
|
||||
|
||||
if (img.src === transparentSpaceFiller) return;
|
||||
|
||||
var computedStyle = window.getComputedStyle(img, null);
|
||||
|
||||
width = parseInt(computedStyle.width, 10);
|
||||
height = parseInt(computedStyle.height, 10);
|
||||
bgWidth = width * initial;
|
||||
bgHeight = height * initial;
|
||||
bgPosX = -(bgWidth - width) * settings.initialX;
|
||||
bgPosY = -(bgHeight - height) * settings.initialY;
|
||||
|
||||
setSrcToBackground(img);
|
||||
|
||||
img.style.backgroundSize = bgWidth+'px '+bgHeight+'px';
|
||||
img.style.backgroundPosition = bgPosX+'px '+bgPosY+'px';
|
||||
img.addEventListener('wheelzoom.reset', reset);
|
||||
|
||||
img.addEventListener('wheel', onwheel);
|
||||
img.addEventListener('mousedown', draggable);
|
||||
}
|
||||
|
||||
var destroy = function (originalProperties) {
|
||||
img.removeEventListener('wheelzoom.destroy', destroy);
|
||||
img.removeEventListener('wheelzoom.reset', reset);
|
||||
img.removeEventListener('load', load);
|
||||
img.removeEventListener('mouseup', removeDrag);
|
||||
img.removeEventListener('mousemove', drag);
|
||||
img.removeEventListener('mousedown', draggable);
|
||||
img.removeEventListener('wheel', onwheel);
|
||||
|
||||
img.style.backgroundImage = originalProperties.backgroundImage;
|
||||
img.style.backgroundRepeat = originalProperties.backgroundRepeat;
|
||||
img.src = originalProperties.src;
|
||||
}.bind(null, {
|
||||
backgroundImage: img.style.backgroundImage,
|
||||
backgroundRepeat: img.style.backgroundRepeat,
|
||||
src: img.src
|
||||
});
|
||||
|
||||
img.addEventListener('wheelzoom.destroy', destroy);
|
||||
|
||||
options = options || {};
|
||||
|
||||
Object.keys(defaults).forEach(function(key){
|
||||
settings[key] = options[key] !== undefined ? options[key] : defaults[key];
|
||||
});
|
||||
|
||||
if (img.complete) {
|
||||
load();
|
||||
}
|
||||
|
||||
img.addEventListener('load', load);
|
||||
};
|
||||
|
||||
// Do nothing in IE9 or below
|
||||
if (typeof window.btoa !== 'function') {
|
||||
return function(elements) {
|
||||
return elements;
|
||||
};
|
||||
} else {
|
||||
return function(elements, options) {
|
||||
if (elements && elements.length) {
|
||||
Array.prototype.forEach.call(elements, function (node) {
|
||||
main(node, options);
|
||||
});
|
||||
} else if (elements && elements.nodeName) {
|
||||
main(elements, options);
|
||||
}
|
||||
return elements;
|
||||
};
|
||||
}
|
||||
}());
|
||||
Loading…
Reference in New Issue