From 4efbbfc3dbfe96ce46dbe71df27aed1e97ad3f8a Mon Sep 17 00:00:00 2001 From: thomas-ashcraft Date: Sun, 25 Aug 2019 12:45:16 +0300 Subject: [PATCH 1/3] Add fullscreen screenshot view at app pages --- css/enhancedsteam.css | 92 +++++++++++++++++++++++++++++++++++++++++++ js/content/store.js | 44 +++++++++++++++++++++ 2 files changed, 136 insertions(+) diff --git a/css/enhancedsteam.css b/css/enhancedsteam.css index 5d215beb2..8b1adae70 100644 --- a/css/enhancedsteam.css +++ b/css/enhancedsteam.css @@ -1280,6 +1280,98 @@ input[type=checkbox].es_dlc_selection:checked + label { opacity: 0.4; } +/*************************************** + * App pages + * addFullscreenScreenshotView() + **************************************/ +.es_screenshot_fullscreen_toggle { + position: absolute; + right: 18%; + bottom: 0; +} +.es_screenshot_fullscreen_toggle i { + display: block; + background-image: url('data:image/gif;base64,R0lGODlhEAAgAIABAP///////yH5BAEAAAEALAAAAAAQACAAAAJAjH+gC+jB1HNxpmqjnHVz31iQOIoh5D0Spmom+y0kypDaOWf2hVMNjLi9asNUTFZECpO9FjIDDLqOvyYvscsVAAA7'); + background-position: top left; + width: 16px; + height: 16px; + margin: 5px; +} +.es_screenshot_download_btn { + position: absolute; + right: 24%; + bottom: 0; +} +.es_screenshot_download_btn i { + display: block; + background-image: url(https://steamcommunity-a.akamaihd.net/public/shared/images/header/btn_header_installsteam_download.png?v=1); + background-position: center; + background-repeat: no-repeat; + width: 16px; + height: 16px; + margin: 5px; +} +.screenshot_popup_modal_content:fullscreen .es_screenshot_fullscreen_toggle i { + background-position: bottom left; +} +.screenshot_popup_modal_content:fullscreen { + padding: 0; + background: none; +} +.screenshot_popup_modal_content .screenshot_popup_modal_title { + display: none; +} +.screenshot_popup_modal_content:fullscreen .screenshot_img_ctn { + width: 100%; + height: 100%; +} +.screenshot_popup_modal_content:fullscreen .screenshot_img_ctn > img { + max-width: 100% !important; + max-height: 100% !important; + object-fit: scale-down; + width: 100%; + height: 100%; +} +.screenshot_popup_modal_content:fullscreen .screenshot_popup_modal_footer { + position: absolute; + width: 100%; + bottom: 0; + overflow: visible; +} +.screenshot_popup_modal_content:fullscreen .screenshot_popup_modal_footer > .btn_medium { + opacity: 0; + transition: opacity 0.25s ease-in-out; +} +.screenshot_popup_modal_content:fullscreen .screenshot_popup_modal_footer:hover > .btn_medium { + opacity: 1; +} +.screenshot_popup_modal_content:fullscreen .screenshot_popup_modal_footer > div:first-child { + display: inline-block; + background: rgba(103, 193, 245, 0.2); + border-radius: 100px; + padding: 0 1em; +} +.screenshot_popup_modal_content:fullscreen .screenshot_popup_modal_footer > .previous::before { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 40vw; + height: 100vh; +} +@keyframes es_screenshot_popup_modal_hook { + from { + opacity: 0.99; + } + to { + opacity: 1; + } +} +.screenshot_popup_modal { + animation-duration: 0.001s; + animation-name: es_screenshot_popup_modal_hook; +} + /*************************************** * Store and Community * add_language_warning(), diff --git a/js/content/store.js b/js/content/store.js index 6fc88ae64..4557cfa67 100644 --- a/js/content/store.js +++ b/js/content/store.js @@ -566,6 +566,7 @@ class AppPageClass extends StorePageClass { this.addWishlistRemove(); this.addUserNote(); this.addNewQueueButton(); + this.addFullscreenScreenshotView(); this.addCoupon(); this.addPrices(); @@ -912,6 +913,49 @@ class AppPageClass extends StorePageClass { }); } + addFullscreenScreenshotView() { + function es_toggleFullScreen(event) { + if (!document.fullscreenElement) { + let element = event.target.closest(".screenshot_popup_modal_content"); + element.requestFullscreen(); + } else { + document.exitFullscreen(); + } + } + + function es_initFSVButton(event) { + if (event.animationName !== "es_screenshot_popup_modal_hook") return; + + let modalFooter = document.querySelector(".screenshot_popup_modal_footer"); + let fsvButton = document.createElement('div'); + fsvButton.classList.add("btnv6_blue_hoverfade", "btn_medium", "es_screenshot_fullscreen_toggle"); + fsvButton.innerHTML = ""; + let nextButton = modalFooter.querySelector(".next"); + let nextButtonOffsetWidth = nextButton.offsetWidth; + if (nextButton.style.display === "none") { + nextButton.style.display = ""; + nextButtonOffsetWidth = nextButton.offsetWidth; + nextButton.style.display = "none"; + } + fsvButton.style.right = `calc(${nextButtonOffsetWidth}px + 0.5em)`; + fsvButton.addEventListener("click", es_toggleFullScreen); + modalFooter.appendChild(fsvButton); + + let downloadButton = document.createElement('a'); + downloadButton.classList.add("btnv6_blue_hoverfade", "btn_medium", "es_screenshot_download_btn"); + let modalTitleLink = modalFooter.parentElement.querySelector(".screenshot_popup_modal_title > a"); + downloadButton.title = modalTitleLink.textContent.trim(); + downloadButton.innerHTML = ""; + downloadButton.style.right = `calc(${nextButtonOffsetWidth + fsvButton.offsetWidth}px + 1em)`; + downloadButton.addEventListener("click", () => { + modalTitleLink.click(); + }); + modalFooter.appendChild(downloadButton); + } + + document.addEventListener("animationstart", es_initFSVButton); + } + getFirstSubid() { let node = document.querySelector("div.game_area_purchase_game input[name=subid]"); return node && node.value; From dc4f6c1cee5a0923ec4fda8398e82c93bfb08f38 Mon Sep 17 00:00:00 2001 From: thomas-ashcraft Date: Fri, 30 Aug 2019 23:26:31 +0300 Subject: [PATCH 2/3] Creating HTML tags via HTML class functions --- js/content/store.js | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/js/content/store.js b/js/content/store.js index 4557cfa67..cc94a1c26 100644 --- a/js/content/store.js +++ b/js/content/store.js @@ -923,13 +923,10 @@ class AppPageClass extends StorePageClass { } } - function es_initFSVButton(event) { + function es_initFSVButtons(event) { if (event.animationName !== "es_screenshot_popup_modal_hook") return; let modalFooter = document.querySelector(".screenshot_popup_modal_footer"); - let fsvButton = document.createElement('div'); - fsvButton.classList.add("btnv6_blue_hoverfade", "btn_medium", "es_screenshot_fullscreen_toggle"); - fsvButton.innerHTML = ""; let nextButton = modalFooter.querySelector(".next"); let nextButtonOffsetWidth = nextButton.offsetWidth; if (nextButton.style.display === "none") { @@ -937,23 +934,21 @@ class AppPageClass extends StorePageClass { nextButtonOffsetWidth = nextButton.offsetWidth; nextButton.style.display = "none"; } - fsvButton.style.right = `calc(${nextButtonOffsetWidth}px + 0.5em)`; + HTML.beforeEnd(modalFooter, + `
`); + let fsvButton = modalFooter.querySelector(".es_screenshot_fullscreen_toggle"); fsvButton.addEventListener("click", es_toggleFullScreen); - modalFooter.appendChild(fsvButton); - let downloadButton = document.createElement('a'); - downloadButton.classList.add("btnv6_blue_hoverfade", "btn_medium", "es_screenshot_download_btn"); let modalTitleLink = modalFooter.parentElement.querySelector(".screenshot_popup_modal_title > a"); - downloadButton.title = modalTitleLink.textContent.trim(); - downloadButton.innerHTML = ""; - downloadButton.style.right = `calc(${nextButtonOffsetWidth + fsvButton.offsetWidth}px + 1em)`; + HTML.beforeEnd(modalFooter, + `
`); + let downloadButton = modalFooter.querySelector(".es_screenshot_download_btn"); downloadButton.addEventListener("click", () => { modalTitleLink.click(); }); - modalFooter.appendChild(downloadButton); } - document.addEventListener("animationstart", es_initFSVButton); + document.addEventListener("animationstart", es_initFSVButtons); } getFirstSubid() { From f65dcee0f829f5a845e1b80ede9fb5539e19be5e Mon Sep 17 00:00:00 2001 From: thomas-ashcraft Date: Sat, 31 Aug 2019 00:28:07 +0300 Subject: [PATCH 3/3] Removing es_ prefix from functions --- js/content/store.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/content/store.js b/js/content/store.js index cc94a1c26..60b671a32 100644 --- a/js/content/store.js +++ b/js/content/store.js @@ -914,7 +914,7 @@ class AppPageClass extends StorePageClass { } addFullscreenScreenshotView() { - function es_toggleFullScreen(event) { + function toggleFullScreen(event) { if (!document.fullscreenElement) { let element = event.target.closest(".screenshot_popup_modal_content"); element.requestFullscreen(); @@ -923,7 +923,7 @@ class AppPageClass extends StorePageClass { } } - function es_initFSVButtons(event) { + function initFSVButtons(event) { if (event.animationName !== "es_screenshot_popup_modal_hook") return; let modalFooter = document.querySelector(".screenshot_popup_modal_footer"); @@ -937,7 +937,7 @@ class AppPageClass extends StorePageClass { HTML.beforeEnd(modalFooter, `
`); let fsvButton = modalFooter.querySelector(".es_screenshot_fullscreen_toggle"); - fsvButton.addEventListener("click", es_toggleFullScreen); + fsvButton.addEventListener("click", toggleFullScreen); let modalTitleLink = modalFooter.parentElement.querySelector(".screenshot_popup_modal_title > a"); HTML.beforeEnd(modalFooter, @@ -948,7 +948,7 @@ class AppPageClass extends StorePageClass { }); } - document.addEventListener("animationstart", es_initFSVButtons); + document.addEventListener("animationstart", initFSVButtons); } getFirstSubid() {