- Firefox-Version
- 140.x ESR
- Betriebssystem
- WIN10 / 11
Hallo ihr Wissenden 😀
Ich habe ein ganz spezielles Problem, zui dem ich noch keine Lösung gefunden habe.
Die gewünschte Anwendung:
Firefox soll ein PopUp Fenster mit einer Landkartendarstellung öffen (zwei überlagerte Bitmaps, zoombar, Opacity einstellbar - ein "Loader.html" dazu ist vorhanden, s.u.)
Der Start erfordert derzeit aber ein (sehr kurzzeitiges) Öffnen eines Tabs in einem laufenden FF (oder den sichtbaren Start eines normalen FF-Fensters), in dem der "Loader.html" ausgeführt wird. Das führt zu Veränderungen im laufenden FF, wenn z.B. Sites im Vollbild dargestellt sind. Das Fenster wird genau so verändert wie wenn man eine andere Site öffnet, was ja völlig normal ist. Aber auch wenn der "Loader.html"-Tab sofort automatisch wieder geschlossen wird: es stört natürlich.
Meine Frage: gibt es eine Möglichkeit, mit html oder einem Windows-Script (oder was auch immer) die "Loader.html" unsichtbar zu starten und sofort nur alleinig das PopUp anzuzeigen? Ich habe nichts dazu herausfinden können. Ein Start per WSH mit wsh_Shell.run Befehl, 0 (0 für "Fenster unsichtbar") wird von FF ignoriert. Ein zweites Profil hat mir in diesem Fall auch nicht wirklich was genutzt.
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.1">
<title>Historische Kartenansicht TK25 Heiligendorf</title>
<script type="text/javascript">
// sehr ungenaue Berechnung, denn das Fenster ist -x links, +x rechts & unten +y (!) je 8px weiter (Clientfenster unsichtbar),
// ebenso werden die Toolleiste (y 32px) und die Titelleiste (y 32px) hinzugerechnet
// die verfügbare Screen-Höhe ist ohne die Windows-Taskleiste (-30px)
const width = 1800; // ergibt real 1816 (s.o.)
const height = 1000; // ergibt real 1072 (s.o.)
const adjustment_x = -8;
const adjustment_y = -32;
const screen_x = adjustment_x + (screen.availWidth - width) / 2;
const screen_y = adjustment_y + (screen.availHeight - height) / 2;
//console.log(adjustment_x, adjustment_y, width, height, screen.availWidth, screen.availHeight, screen_x, screen_y);
if (window.name != 'Historische Kartenansicht TK25 Heiligendorf') {
var NewPopUp = window.open(document.location.href, 'Historische Kartenansicht TK25 Heiligendorf', 'screenX=' + screen_x + ', screenY=' + screen_y + ', width=' + width + ', height=' + height + ', popup');
NewPopUp.focus();
//console.log(self.name)
//window.open('', '_self', ''); // chrome bug
//window.close();
self.close();
} else {
//or like this
window.focus();
}
</script>
<link rel="icon" href="data:image/png;base64,[DATEN.........., hier weggekürzt] sizes="48x48">
<script src="panzoom.min_4.4.4.js"></script>
<style>
.zoom-container {
overflow: hidden;
padding: 0;
}
.base-img {
/* height: 100vh; */
width: 100%;
}
.overlay-img {
top: 0;
left: 0;
position: absolute;
/* height: 100vh; */
width: 100%;
opacity: 0.3; /* Opacity Startwert */
transition: opacity 0.1s;
}
.opacity-slider {
position: fixed; /* Fixiert das Element relativ zum Viewport */
bottom: 20px; /* Abstand vom unteren Rand */
left: 50vw;
transform: translateX(-50%); /* exakte Zentrierung */
width: 50vw; /* Breite */
outline: none;
}
.center {
position: fixed; /* Fixiert das Element relativ zum Viewport */
bottom: -12px; /* Abstand vom unteren Rand */
text-align: center;
left: 50vw;
transform: translateX(-50%); /* exakte Zentrierung */
width: 50vw; /* Breite */
}
</style>
</head>
<body>
<!-- zoom container with two images as overlay -->
<div class="zoom-container" id="zoom-container">
<!-- base-img first, then overlay-img -->
<img src="3630_Heiligendorf_1936.png" class="base-img" id="base-img">
<img src="Fallersleben.png" class="overlay-img" id="overlay-img">
</div>
<!-- paragraph with opacity value as text -->
<p class="center">
Opacity: <output class="text-output" id="text-output"> </output>
</p>
<!-- slider input container -->
<div>
<!-- slider input to transform opacity -->
<input type="range" class="opacity-slider" id="opacity-slider" min="0" max="1" step="0.01" value="0.3" autofocus> </input>
</div>
</body>
<script type="text/javascript">
// get element to pan & zoom
const element = document.getElementById('zoom-container')
// assign Panzoom and Panzooms zoom max & min scale
const panzoom = Panzoom(element, {
maxScale: 20,
minScale: 0.6,
cursor: 'crosshair'
})
// zoom with mouse wheel
element.parentElement.addEventListener('wheel',
panzoom.zoomWithWheel
);
// for all following: "function(event)" is same as "(event) =>"
// panzoom cursor at "pointerdown" as "pointing hand"
element.addEventListener('panzoomstart', (event) => {
if (event.detail.originalEvent.type === 'pointerdown') {
panzoom.setOptions({ cursor: 'pointer' });
}
// console.log(event.detail.originalEvent.type);
})
// panzoom cursor at "pointerup" as "crosshair" (same as default at start)
element.addEventListener('panzoomend', (event) => {
if (event.detail.originalEvent.type === 'pointerup') {
panzoom.setOptions({ cursor: 'crosshair' });
}
// console.log(event.detail.originalEvent.type);
})
// get element to transform opacity
const image = document.getElementById('overlay-img');
// get slider
const slider = document.getElementById('opacity-slider');
// get text-output
const textValue = document.getElementById("text-output");
textValue.textContent = Number(slider.value).toFixed(2);
// slider value to opacity and text output
slider.addEventListener('input', (event) => {
image.style.opacity = event.target.value;
textValue.textContent = Number(event.target.value).toFixed(2);
// console.log('slider was used!')
});
// for "doubleclick" recognition
let lastDown0 = 0;
let lastDown2 = 0;
// ESC key for reset the site Pan & Zoom to initial start view
// "doubleclick" ESC key for reset the site Pan, Zoom & Opacity to initial start view
document.addEventListener('keydown', (event) => {
// only single press, not repeat
if (event.key === 'Escape' && event.repeat === false) {
// console.log('ESC key was pressed!');
// calc double down delay
let delay = event.timeStamp - lastDown0;
// console.log(event);
// console.log(event.timeStamp);
// console.log(delay);
// save timestamp
lastDown0 = event.timeStamp;
// doubleclick (less than 500ms)
if (delay > 0 && delay < 500) {
image.style.opacity = 0.3;
slider.value = 0.3;
}
panzoom.reset();
}
})
// mouse quick access to zoom & pan or reset
// doubleclick primary mouse button on site zomm to pointer
// doubleclick secondary mouse button on site reset to start pan & zoom
// single click middle mouse button on site reset to start opacity
// NEW (!) "pointerdown" not "mousedown"
element.addEventListener('pointerdown', (event) => {
// console.log(event);
// console.log(event.timeStamp);
// console.log(delay);
// primary mouse button - zomm to pointer
if (event.button === 0) {
// calc double down delay
let delay = event.timeStamp - lastDown0;
// save timestamp
lastDown0 = event.timeStamp;
// doubleclick (less than 500ms)
if (delay > 0 && delay < 500) {
//console.log('doubleclick 1');
panzoom.zoomToPoint(6, event, { animate: true });
}
// secondary mouse button - reset to start pan / zoom
} else if (event.button === 2) {
// calc double down delay
let delay = event.timeStamp - lastDown2;
// save timestamp
lastDown2 = event.timeStamp;
// doubleclick (less than 500ms)
if (delay > 0 && delay < 500) {
//console.log('doubleclick 2');
panzoom.zoomToPoint(1, event, { animate: true });
}
}
// middle mouse button single click - reset opacity
if (event.button === 1) {
image.style.opacity = 0.3;
slider.value = 0.3;
}
}, true);
// no contextmenu
element.addEventListener('contextmenu', (event) => {
event.preventDefault();
});
</script>
</html>Ich habe hier alles an Code eingefügt, kann ich aber auf den wesentlichen Teil kürzen (funkt so natürlich nicht):
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.1">
<title>Historische Kartenansicht</title>
<script type="text/javascript">
var NewPopUp = window.open(document.location.href, 'Historische Kartenansicht TK25 Heiligendorf', 'screenX=' + screen_x + ', screenY=' + screen_y + ', width=' + width + ', height=' + height + ', popup');
NewPopUp.focus();
self.close();
</script>
<script src="panzoom.min_4.4.4.js"></script>
</head>
<body>
<!-- zoom container with two images as overlay -->
<div class="zoom-container" id="zoom-container">
<!-- base-img first, then overlay-img -->
<img src="xxxxx.png" class="base-img" id="base-img">
<img src="yyyyy.png" class="overlay-img" id="overlay-img">
</div>
<!-- paragraph with opacity value as text -->
<p class="center">
Opacity: <output class="text-output" id="text-output"> </output>
</p>
<!-- slider input container -->
<div>
<!-- slider input to transform opacity -->
<input type="range" class="opacity-slider" id="opacity-slider" min="0" max="1" step="0.01" value="0.3" autofocus> </input>
</div>
</body>
</html>Der eigentliche Loader ist das erste Script
Die Abfrage if (window.name != 'Historische Kartenansicht TK25 Heiligendorf') funktioniert auch nicht, wird aber immer wieder so in Beispielen angegeben.
Es fehlen natürlich die verwendeten Bitmaps (sehr groß) und die eingebundene panzoom.min_4.4.4.js (PanZoom)
Das PopUp Fenster sieht dann so aus:
Ist auch per CSS und JS gestaltet / mit den Buttons versehen worden...
