Skip to content
This repository has been archived by the owner on Oct 28, 2019. It is now read-only.

Add fullscreen screenshots button #1584

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

Add fullscreen screenshots button #1584

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2066c6a
Add fullscreen screenshots button
thomas-ashcraft May 7, 2018
79dfd5d
Fix img positioning for different aspect ratios.
thomas-ashcraft May 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 81 additions & 0 deletions css/enhancedsteam.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1229,6 +1229,87 @@ input[type=checkbox].es_dlc_selection:checked + label {
opacity: 0.4;
}

/***************************************
* App pages
* add_fullscreen_screenshots_button()
**************************************/
.es_fullscreen_toggle {
position: absolute;
right: 18%;
top: 0;
}
.es_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;
}
.screenshot_popup_modal_content.es_fullscreen .es_fullscreen_toggle i {
background-position: bottom left;
}
.screenshot_popup_modal_content.es_fullscreen {
padding: 0;
width: 100%;
/* fullscreen fix for Chrome */
height: 100%;
}
.screenshot_popup_modal_content.es_fullscreen .screenshot_popup_modal_title {
/* position: absolute; */
display: none;
}
.screenshot_popup_modal_content.es_fullscreen .screenshot_img_ctn {
width: 100%;
height: 100%;
}
.screenshot_popup_modal_content.es_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.es_fullscreen .screenshot_popup_modal_footer {
position: absolute;
width: 100%;
bottom: 0;
overflow: visible;
}
.screenshot_popup_modal_content.es_fullscreen .screenshot_popup_modal_footer > .btn_medium {
opacity: 0;
transition: opacity 0.25s ease-in-out;
}
.screenshot_popup_modal_content.es_fullscreen .screenshot_popup_modal_footer:hover > .btn_medium {
opacity: 1;
}
.screenshot_popup_modal_content.es_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.es_fullscreen .screenshot_popup_modal_footer > .previous:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 200%;
height: 10000%;
}
@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(),
Expand Down
47 changes: 47 additions & 0 deletions enhancedsteam.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5343,6 +5343,52 @@ function dlc_data_from_site(appid) {
}
}

function add_fullscreen_screenshots_button() {
function es_toggleFullScreen(element = doc.documentElement) {
var doc = window.document;
var requestFullScreen = element.requestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullScreen;
var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen;
if (!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement) {
requestFullScreen.call(element);
} else {
cancelFullScreen.call(doc);
}
}

function es_fullScreenChangeHandler(event) {
var es_fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
if (es_fullscreenElement) {
if (es_fullscreenElement.classList.contains("screenshot_popup_modal_content")) {
$(".screenshot_popup_modal_content").addClass("es_fullscreen");
}
} else {
$(".screenshot_popup_modal_content").removeClass("es_fullscreen");
}
}

if ("onfullscreenchange" in document) {
document.addEventListener("fullscreenchange", es_fullScreenChangeHandler, false);
}
if ("onmozfullscreenchange" in document) {
document.addEventListener("mozfullscreenchange", es_fullScreenChangeHandler, false);
}
if ("onwebkitfullscreenchange" in document) {
document.addEventListener("webkitfullscreenchange", es_fullScreenChangeHandler, false);
}

document.addEventListener("animationstart", function(event) {
if (event.animationName === "es_screenshot_popup_modal_hook") {
$('<div class="btnv6_blue_hoverfade btn_medium es_fullscreen_toggle"><i></i></div>').appendTo(".screenshot_popup_modal_footer");
$(".es_fullscreen_toggle").css({
"right": `calc(${$(".screenshot_popup_modal_footer > .next").outerWidth()}px + 0.5em)`
});
$(".es_fullscreen_toggle").on("click", function() {
es_toggleFullScreen($(".screenshot_popup_modal_content")[0]);
});
}
}, false);
}

function survey_data_from_site(appid) {
storage.get(function(settings) {
if (settings.show_apppage_surveys === undefined) { settings.show_apppage_surveys = true; storage.set({'show_apppage_surveys': settings.show_apppage_surveys}); }
Expand Down Expand Up @@ -8641,6 +8687,7 @@ $(document).ready(function(){
display_coupon_message(appid);
show_pricing_history(appid, "app");
dlc_data_from_site(appid);
add_fullscreen_screenshots_button();

drm_warnings("app");
add_metacritic_userscore();
Expand Down