From 6cbc2243bdff3c1c230fd2bc8b59aac677f6ba85 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 26 Sep 2019 14:33:44 +0200 Subject: [PATCH 1/4] autoformat auto-scale --- src/pat/auto-scale/auto-scale.js | 65 ++++++++++++------- src/pat/auto-scale/index.html | 107 ++++++++++++++++--------------- 2 files changed, 97 insertions(+), 75 deletions(-) diff --git a/src/pat/auto-scale/auto-scale.js b/src/pat/auto-scale/auto-scale.js index 05a99f352..85e7daba8 100644 --- a/src/pat/auto-scale/auto-scale.js +++ b/src/pat/auto-scale/auto-scale.js @@ -4,14 +4,14 @@ * Copyright 2012 Humberto Sermeno * Copyright 2013 Simplon B.V. - Wichert Akkerman */ -define([ - "jquery", - "jquery.browser", - "pat-base", - "pat-registry", - "pat-parser", - "underscore" -], function($, browser, Base, registry, Parser, _) { +define(["jquery", "jquery.browser", "pat-base", "pat-registry", "pat-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"]); @@ -40,13 +40,13 @@ define([ this.force_method = "scale"; } - var scaler = _.debounce(this.scale.bind(this), 250, true) + 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) + $(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)); return this; @@ -56,11 +56,11 @@ define([ 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]; } @@ -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); @@ -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; @@ -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("
"); + 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("
"); } - 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); diff --git a/src/pat/auto-scale/index.html b/src/pat/auto-scale/index.html index d0f59e63b..26ae563a0 100644 --- a/src/pat/auto-scale/index.html +++ b/src/pat/auto-scale/index.html @@ -1,55 +1,58 @@ - - - Auto scale - - - - -
-

- A random HTML elemement: -

-

- -

-

- The same HTML elemement, now scaled up to match the width it parent element by pat-auto-scale: -

-

- -

- -

- The scaling mechanism takes paddings into account: -

-

- -

- -

- Another elemement, scaled up to fill the parent element. This is done with the property: `size: contain`. -

-

- -

- -

- 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`. -

-

- - - -

- - - -
- + + + + Auto scale + + + + + +
+

+ A random HTML elemement: +

+

+ +

+

+ The same HTML elemement, now scaled up to match the width it parent element by pat-auto-scale: +

+

+ +

+ +

+ The scaling mechanism takes paddings into account: +

+

+ +

+ +

+ Another elemement, scaled up to fill the parent element. This is done with the property: `size: contain`. +

+

+ +

+ +

+ 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`. +

+

+ + + +

+ + + +
+ + From b2cb69ae51643b37adf9b205ec74f70a2a8b36e2 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Fri, 27 Sep 2019 11:14:05 +0200 Subject: [PATCH 2/4] auto-scale bug test-case --- src/pat/auto-scale/index.html | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/pat/auto-scale/index.html b/src/pat/auto-scale/index.html index 26ae563a0..925112074 100644 --- a/src/pat/auto-scale/index.html +++ b/src/pat/auto-scale/index.html @@ -41,10 +41,18 @@ 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`.

- +

+ +

+ Autoscale and fullscreen:

+

+ +

+ +