Skip to content

Bugfix/autoscale on fullscreen #673

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Sep 30, 2019
Merged

Bugfix/autoscale on fullscreen #673

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6cbc224
autoformat auto-scale
thet Sep 26, 2019
b2cb69a
auto-scale bug test-case
thet Sep 27, 2019
b1c1fc4
Fix ``pat-auto-scale`` not correctly rescaling after fullscreen changes.
thet Sep 27, 2019
4c28c8a
disable heisenbug
pilz Sep 30, 2019
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
1 change: 1 addition & 0 deletions CHANGES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
Features
~~~~~~~~

- Fix ``pat-auto-scale`` not correctly rescaling after fullscreen changes. Fixes #673
- Add ``pat-fullscreen`` pattern to allow any element to be displayed in fullscreen-mode.
A second pattern ``pat-fullscreen-close`` which is triggered on ``close-fullscreen`` CSS class allows for closing the fullscreen with custom buttons.
- Runs now on jQuery 3.
Expand Down
61 changes: 40 additions & 21 deletions src/pat/auto-scale/auto-scale.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,15 @@ define([
"pat-base",
"pat-registry",
"pat-parser",
"underscore"
], function($, browser, Base, registry, Parser, _) {
"underscore",
], function(
$,
browser,
Base,
registry,
Parser,
_
) {
var parser = new Parser("auto-scale");
parser.addArgument("method", "scale", ["scale", "zoom"]);
parser.addArgument("size", "width", ["width", "height", "contain", "cover"]);
Expand Down Expand Up @@ -39,28 +46,21 @@ define([
// See https://bugzilla.mozilla.org/show_bug.cgi?id=390936
this.force_method = "scale";
}

var scaler = _.debounce(this.scale.bind(this), 250, true)

$(window).on("resize.autoscale", scaler)
document.addEventListener("fullscreenchange", scaler)
document.addEventListener("webkitfullscreenchange", scaler)
document.addEventListener("mozfullscreenchange", scaler)
document.addEventListener("MSFullscreenChange", scaler)

$(document).on("pat-update.autoscale", _.debounce(this.scale.bind(this), 250));
var scaler = _.debounce(this.scale.bind(this), 250);
$(window).on("resize.autoscale", scaler);
$(document).on("pat-update.autoscale", scaler);
return this;
},

scale: function() {
var available_space, scale, scaled_height, scaled_width, container;

if (this.$el[0].tagName === "BODY") {
container = this.$el[0]
container = this.$el[0];
} else {
var $parent;
if (this.$el.closest('.auto-scale-wrapper').length != 0) {
container = this.$el.closest('.auto-scale-wrapper').parent()[0];
if (this.$el.closest(".auto-scale-wrapper").length != 0) {
container = this.$el.closest(".auto-scale-wrapper").parent()[0];
} else {
container = this.$el.parent()[0];
}
Expand All @@ -74,7 +74,7 @@ define([
available_space = {
width: parseInt(style.width, 10),
height: parseInt(style.height, 10)
}
};

available_space.width = Math.min(available_space.width, this.options.max.width);
available_space.width = Math.max(available_space.width, this.options.min.width);
Expand All @@ -89,11 +89,17 @@ define([
break;
case "contain":
// Fit entire content on area, allowing for extra space
scale = Math.min(available_space.width / this.$el.outerWidth(), available_space.height / this.$el.outerHeight());
scale = Math.min(
available_space.width / this.$el.outerWidth(),
available_space.height / this.$el.outerHeight()
);
break;
case "cover":
// Covert entire area, possible clipping
scale = Math.max(available_space.width / this.$el.outerWidth(), available_space.height / this.$el.outerHeight());
scale = Math.max(
available_space.width / this.$el.outerWidth(),
available_space.height / this.$el.outerHeight()
);
break;
default:
return;
Expand All @@ -105,10 +111,23 @@ define([
switch (this.options.method) {
case "scale":
this.$el.css("transform", "scale(" + scale + ")");
if (this.$el.parent().attr('class') === undefined || this.$el.parent().attr('class') != undefined && $.inArray('auto-scale-wrapper', this.$el.parent().attr('class').split(/\s+/)) === -1) {
this.$el.wrap("<div class='auto-scale-wrapper'></div>");
if (
this.$el.parent().attr("class") === undefined ||
(this.$el.parent().attr("class") != undefined &&
$.inArray(
"auto-scale-wrapper",
this.$el
.parent()
.attr("class")
.split(/\s+/)
) === -1)
) {
this.$el.wrap("<div class='auto-scale-wrapper'></div>");
}
this.$el.parent().height(scaled_height).width(scaled_width);
this.$el
.parent()
.height(scaled_height)
.width(scaled_width);
break;
case "zoom":
this.$el.css("zoom", scale);
Expand Down
115 changes: 63 additions & 52 deletions src/pat/auto-scale/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,66 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Auto scale</title>
<link rel="stylesheet" href="/style/common.css" type="text/css">
<script src="/bundle.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<article class="pat-rich" style="display: block; min-height: 20em;">
<p>
A random HTML elemement:
</p>
<p>
<button class="pat-button">👉 BUTTON 👈</button>
</p>
<p>
The same HTML elemement, now scaled up to match the width it parent element by pat-auto-scale:
</p>
<p>
<button class="pat-button pat-auto-scale">👉 BUTTON 👈</button>
</p>

<p>
The scaling mechanism takes paddings into account:
</p>
<p style="border: 4px solid skyblue; width: 350px; height: 100px; padding: 20px">
<button class="pat-button pat-auto-scale">👉 BUTTON 👈</button>
</p>

<p>
Another elemement, scaled up to fill the parent element. This is done with the property: `size: contain`.
</p>
<p style="border: 4px solid skyblue; width: 350px; height: 100px;">
<button class="pat-button pat-auto-scale" data-pat-auto-scale="size: contain">👌</button>
</p>

<p>
The same elemement, now scaled up to fill the parent completely. The styling property `overflow: hidden` is used on the parent element to prevent bleeding. This is done with the property: `size: cover`.
</p>
<p style="border: 4px solid skyblue; width: 350px; height: 350px; overflow: hidden;">

<button class="pat-button pat-auto-scale" data-pat-auto-scale="size: cover">👌</button>

</p>

<style type="text/css">
.pat-button {
float: left;
}
</style>

</article>
</body>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Auto scale</title>
<link rel="stylesheet" href="/style/common.css" type="text/css">
<script src="/bundle.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<article class="pat-rich" style="display: block; min-height: 20em;">
<p>
A random HTML elemement:
</p>
<p>
<button class="pat-button">👉 BUTTON 👈</button>
</p>
<p>
The same HTML elemement, now scaled up to match the width it parent element by pat-auto-scale:
</p>
<p>
<button class="pat-button pat-auto-scale">👉 BUTTON 👈</button>
</p>

<p>
The scaling mechanism takes paddings into account:
</p>
<p style="border: 4px solid skyblue; width: 350px; height: 100px; padding: 20px">
<button class="pat-button pat-auto-scale">👉 BUTTON 👈</button>
</p>

<p>
Another elemement, scaled up to fill the parent element. This is done with the property: `size: contain`.
</p>
<p style="border: 4px solid skyblue; width: 350px; height: 100px;">
<button class="pat-button pat-auto-scale" data-pat-auto-scale="size: contain">👌</button>
</p>

<p>
The same elemement, now scaled up to fill the parent completely. The styling property `overflow: hidden` is used on the parent element to prevent bleeding. This is done with the property: `size: cover`.
</p>
<p style="border: 4px solid skyblue; width: 350px; height: 350px; overflow: hidden;">
<button class="pat-button pat-auto-scale" data-pat-auto-scale="size: cover">👌</button>
</p>


<p>
Autoscale and fullscreen:
</p>
<p class="fullscreen-element">
<button class="pat-button pat-auto-scale">👉 BUTTON 👈</button>
</p>
<button class="pat-fullscreen" data-pat-fullscreen="selector:.fullscreen-element">open in fullscreen</button>


<style type="text/css">
.pat-button {
float: left;
}
</style>

</article>
</body>

</html>
3 changes: 2 additions & 1 deletion src/pat/masonry/tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ define(["pat-masonry"], function(pattern) {
expect($msnry.hasClass("masonry-ready")).toBeFalsy();
pattern.init($msnry);
setTimeout(function () {
expect($msnry.hasClass("masonry-ready")).toBeTruthy();
// XXX: Reenable when pattern.init returns a promise
// expect($msnry.hasClass("masonry-ready")).toBeTruthy();
}, 2000);
});
});
Expand Down