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 =*/ /*= Hover styles =*/
/*=--------------=*/ /*=--------------=*/
.img img:hover { .image-wrapper img:hover {
filter: drop-shadow(0 0 3px #777); filter: drop-shadow(0 0 3px #777);
cursor: zoom-in; cursor: zoom-in;
} }
.img img:active { .image-wrapper img:active {
transform: scale(0.975); transform: scale(0.975);
} }

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

@ -84,8 +84,8 @@ String.prototype.hasPrefix = function (prefix) {
function imageFocusSetup() { function imageFocusSetup() {
if (typeof GW.imageFocus == "undefined") if (typeof GW.imageFocus == "undefined")
GW.imageFocus = { GW.imageFocus = {
contentImagesSelector: "article img, .gallery img", contentImagesSelector: ".gallery img",
focusedImageSelector: "article img.focused, .gallery img.focused", focusedImageSelector: ".gallery img.focused",
shrinkRatio: 0.975, shrinkRatio: 0.975,
hideUITimerDuration: 1500, hideUITimerDuration: 1500,
hideUITimerExpired: () => { hideUITimerExpired: () => {
@ -118,16 +118,13 @@ function imageFocusSetup() {
image.addEventListener("click", GW.imageClickedToFocus); image.addEventListener("click", GW.imageClickedToFocus);
}); });
// Wrap all images in a span. // Add image wrapper class.
document.querySelectorAll(GW.imageFocus.contentImagesSelector).forEach(image => { document.querySelectorAll(GW.imageFocus.contentImagesSelector).forEach(image => {
let wrapper = document.createElement("span"); let wrapper = image.closest(".img");
wrapper.classList.add("image-wrapper", "img"); if (wrapper)
image.parentElement.insertBefore(wrapper, image); wrapper.classList.add("image-wrapper");
wrapper.appendChild(image); });
wrapper.classList.add(...image.classList);
image.classList.remove(...image.classList);
});
// Create the image focus overlay. // Create the image focus overlay.
let imageFocusOverlay = addUIElement("<div id='image-focus-overlay'>" + let imageFocusOverlay = addUIElement("<div id='image-focus-overlay'>" +
`<div class='help-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"), () => { registerInitializer('pageLayoutFinished', false, () => (document.readyState == "complete"), () => {
GWLog("INITIALIZER pageLayoutFinished");
forceInitializer('earlyInitialize'); forceInitializer('earlyInitialize');
GWLog("INITIALIZER pageLayoutFinished");
// We pre-query the relevant elements, so we don’t have to run queryAll on // We pre-query the relevant elements, so we don’t have to run queryAll on
// every firing of the scroll listener. // every firing of the scroll listener.
GW.scrollState = { GW.scrollState = {
@ -472,5 +472,18 @@ registerInitializer('pageLayoutFinished', false, () => (document.readyState == "
GW.scrollState.siteNavUI.forEach(element => { GW.scrollState.siteNavUI.forEach(element => {
element.addEventListener("mouseover", () => { showSiteNavUI(); }); 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();
}); });