mirror of
https://github.com/eclipse-sailing-analytics/sailing-analytics.git
synced 2026-10-05 11:53:53 +00:00
added an HTML page to configure two iframes with different URLs, may be used to display act and series leaderboard on a single page
This commit is contained in:
1 parent
e6e8f8d90f
commit
5c9f6a9181
2 files changed
+77
-2
No files matched your search
@@ -2,7 +2,7 @@
|
||||
<head>
|
||||
</head>
|
||||
<body onload="updateIFramePositionAndSize();" style="margin:0px;" >
|
||||
<form id="urlForm" action="" onsubmit="return embbedUrl(this);">
|
||||
<form id="urlForm" action="" onsubmit="return embedUrl(this);">
|
||||
<b>URL:</b> <input type="text" size="150" name="embeddedUrl"><br/>
|
||||
<b>Position:</b> Left: <input type="number" size="10" value="0" name="leftPos"> Top: <input type="number" value="0" size="10" name="topPos"><br/>
|
||||
<b>Size:</b> Width: <input type="number" value="1280" size="10" name="sizeWidth">Height: <input type="number" value="720" size="10" name="sizeHeight"><br/>
|
||||
@@ -16,7 +16,7 @@ var frameTopPos = 0;
|
||||
var frameHeight = 720;
|
||||
var frameWidth = 1280;
|
||||
|
||||
function embbedUrl(form) {
|
||||
function embedUrl(form) {
|
||||
$("#urlForm").hide();
|
||||
$("#leaderboard").prop('src', form.embeddedUrl.value);
|
||||
frameLeftPos = parseInt(form.leftPos.value);
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body onload="updateIFramePositionAndSize();" style="margin:0px;" >
|
||||
<form id="urlForm" action="" onsubmit="return embedUrl(this);">
|
||||
<b>URL 1:</b> <input type="text" size="150" name="embeddedUrl1"><br/>
|
||||
<b>URL 2:</b> <input type="text" size="150" name="embeddedUrl2"><br/>
|
||||
<b>Position:</b> Left: <input type="number" size="10" value="0" name="leftPos"> Top: <input type="number" value="0" size="10" name="topPos"><br/>
|
||||
<b>Size:</b> Width: <input type="number" value="1280" size="10" name="sizeWidth">Height: <input type="number" value="720" size="10" name="sizeHeight"><br/>
|
||||
<input type="submit" value="Set">
|
||||
</form>
|
||||
|
||||
<script lang="javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
|
||||
<script lang="javascript">
|
||||
var frameLeftPos = 0;
|
||||
var frameTopPos = 0;
|
||||
var frameHeight = 720;
|
||||
var frameWidth = 1280;
|
||||
|
||||
function embedUrl(form) {
|
||||
$("#urlForm").hide();
|
||||
$("#leaderboard1").prop('src', form.embeddedUrl1.value);
|
||||
$("#leaderboard2").prop('src', form.embeddedUrl2.value);
|
||||
frameLeftPos = parseInt(form.leftPos.value);
|
||||
frameTopPos = parseInt(form.topPos.value);
|
||||
frameWidth = parseInt(form.sizeWidth.value);
|
||||
frameHeight = parseInt(form.sizeHeight.value);
|
||||
updateIFramePositionAndSize();
|
||||
return false;
|
||||
}
|
||||
|
||||
function updateIFramePositionAndSize() {
|
||||
var mozDevicePixelRatio = mediaQueryBinarySearch('min--moz-device-pixel-ratio', '', 0, 6000, 25, .0001);
|
||||
|
||||
$("body").css("margin-left", (frameLeftPos / mozDevicePixelRatio) +"px");
|
||||
$("body").css("margin-top", (frameTopPos / mozDevicePixelRatio) +"px");
|
||||
|
||||
$("#leaderboard1").height(frameHeight / mozDevicePixelRatio);
|
||||
$("#leaderboard1").width(frameWidth / mozDevicePixelRatio);
|
||||
$("#leaderboard2").height(frameHeight / mozDevicePixelRatio);
|
||||
$("#leaderboard2").width(frameWidth / mozDevicePixelRatio);
|
||||
}
|
||||
|
||||
$(window).resize(function() {
|
||||
updateIFramePositionAndSize();
|
||||
});
|
||||
|
||||
var mediaQueryMatches = function(property, r) {
|
||||
var style = document.getElementById('binarysearch');
|
||||
var dummyElement = document.getElementById('dummyElement');
|
||||
style.sheet.insertRule('@media (' + property + ':' + r + ') {#dummyElement ' +
|
||||
'{text-decoration: underline} }', 0);
|
||||
var matched = getComputedStyle(dummyElement, null).textDecoration == 'underline';
|
||||
style.sheet.deleteRule(0);
|
||||
return matched;
|
||||
};
|
||||
var mediaQueryBinarySearch = function(
|
||||
property, unit, a, b, maxIter, epsilon) {
|
||||
var mid = (a + b)/2;
|
||||
if (maxIter == 0 || b - a < epsilon)
|
||||
return mid;
|
||||
if (mediaQueryMatches(property, mid + unit)) {
|
||||
return mediaQueryBinarySearch(property, unit, mid, b, maxIter-1, epsilon);
|
||||
} else {
|
||||
return mediaQueryBinarySearch(property, unit, a, mid, maxIter-1, epsilon);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style id=binarysearch></style>
|
||||
<div style="position:fixed; bottom:0; right:0;" id="dummyElement">X</div>
|
||||
<iframe id="leaderboard1" width="1000px" height="300px" frameborder="0" src="http://www.sapsailing.com"></iframe>
|
||||
<iframe id="leaderboard2" width="1000px" height="300px" frameborder="0" src="http://www.sapsailing.com"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user