achmizs/deus-gaming
1
0
Fork 1
Code Issues Pull Requests 1 Releases Wiki Activity

Uncoupled general images CSS from image-focus

Browse Source
This commit is contained in:
Said Achmiz 2020-02-16 18:57:14 -05:00
parent f891cd84ae
commit 098d77eae1
3 changed files with 25 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/image-focus.css
View File

@ -6,11 +6,11 @@
/*= Hover styles =*/
/*=--------------=*/
.img img:hover {
.image-wrapper img:hover {
filter: drop-shadow(0 0 3px #777);
cursor: zoom-in;
}
.img img:active {
.image-wrapper img:active {
transform: scale(0.975);
}

26
assets/js/image-focus.js
View File

@ -84,8 +84,8 @@ String.prototype.hasPrefix = function (prefix) {
function imageFocusSetup() {
if (typeof GW.imageFocus == "undefined")
GW.imageFocus = {
contentImagesSelector: "article img, .gallery img",
focusedImageSelector: "article img.focused, .gallery img.focused",
contentImagesSelector: ".gallery img",
focusedImageSelector: ".gallery img.focused",
shrinkRatio: 0.975,
hideUITimerDuration: 1500,
hideUITimerExpired: () => {
@ -118,16 +118,13 @@ function imageFocusSetup() {
image.addEventListener("click", GW.imageClickedToFocus);
});
// Wrap all images in a span.
// Add image wrapper class.
document.querySelectorAll(GW.imageFocus.contentImagesSelector).forEach(image => {
let wrapper = document.createElement("span");
wrapper.classList.add("image-wrapper", "img");
image.parentElement.insertBefore(wrapper, image);
wrapper.appendChild(image);
wrapper.classList.add(...image.classList);
image.classList.remove(...image.classList);
});
let wrapper = image.closest(".img");
if (wrapper)
wrapper.classList.add("image-wrapper");
});
// Create the image focus overlay.
let imageFocusOverlay = addUIElement("<div id='image-focus-overlay'>" +
`<div class='help-overlay'>
@ -603,10 +600,3 @@ function focusImageSpecifiedByURL() {
});
}
}
/******************/
/* INITIALIZATION */
/******************/
imageFocusSetup();
focusImageSpecifiedByURL();

17
assets/js/script.js
View File

@ -456,10 +456,10 @@ registerInitializer('earlyInitialize', true, () => (query("#content") != null),
/*************************/
registerInitializer('pageLayoutFinished', false, () => (document.readyState == "complete"), () => {
GWLog("INITIALIZER pageLayoutFinished");
forceInitializer('earlyInitialize');
GWLog("INITIALIZER pageLayoutFinished");
// We pre-query the relevant elements, so we don’t have to run queryAll on
// every firing of the scroll listener.
GW.scrollState = {
@ -472,5 +472,18 @@ registerInitializer('pageLayoutFinished', false, () => (document.readyState == "
GW.scrollState.siteNavUI.forEach(element => {
element.addEventListener("mouseover", () => { showSiteNavUI(); });
});
// Wrap all images in a span.
document.querySelectorAll("main > nav ~ * img").forEach(image => {
let wrapper = document.createElement("span");
wrapper.classList.add("img");
image.parentElement.insertBefore(wrapper, image);
wrapper.appendChild(image);
wrapper.classList.add(...image.classList);
image.classList.remove(...image.classList);
});
imageFocusSetup();
focusImageSpecifiedByURL();
});