Skip to content
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

Jump to bottom

Fix sluggish performance in Safari by using timestamp from requestAnimationFrame to determine fade progress #331

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+947 −696
Open

Fix sluggish performance in Safari by using timestamp from requestAnimationFrame to determine fade progress #331

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
5a50e47
Use timestamp from requestAnimationFrame to determine fade progress
islandsvinur Mar 1, 2024
e4727d9
Rebuild all files
islandsvinur Mar 1, 2024
42bf8cd
Make fadeIn/fadeOut duration always as specified, regardless of start…
islandsvinur Mar 9, 2024
c2dc017
Rebuild all files
islandsvinur Mar 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
35 changes: 19 additions & 16 deletions dist/simple-lightbox.esm.js
View file
Open in desktop
Expand Up @@ -1391,25 +1391,27 @@ class SimpleLightbox {

this.isFadeIn = false;

let step = 16.66666 / (duration || this.options.fadeSpeed),
fade = () => {
let currentOpacity = parseFloat(elements[0].style.opacity);
if ((currentOpacity -= step) < 0) {
let zero = document.timeline.currentTime,
startingOpacity = parseFloat(elements[0].style.opacity),
fade = (timestamp) => {
// progress always runs from 0 to 1
const progress = (timestamp - zero) / (duration || this.options.fadeSpeed);
if (progress < 1) {
for (let element of elements) {
element.style.opacity = startingOpacity * (1 - progress);
}
requestAnimationFrame(fade);
} else {
for (let element of elements) {
element.style.display = "none";
// element.style.opacity = '';
element.style.opacity = 1;
}
callback && callback.call(this, elements);
} else {
for (let element of elements) {
element.style.opacity = currentOpacity;
}
requestAnimationFrame(fade);
}
};

fade();
requestAnimationFrame(fade);
}

fadeIn(elements, duration, callback, display) {
Expand All @@ -1424,13 +1426,14 @@ class SimpleLightbox {
this.isFadeIn = true;

let opacityTarget = parseFloat(elements[0].dataset.opacityTarget || 1),
step = (16.66666 * opacityTarget) / (duration || this.options.fadeSpeed),
fade = () => {
let currentOpacity = parseFloat(elements[0].style.opacity);
if (!((currentOpacity += step) > opacityTarget)) {
zero = document.timeline.currentTime,
fade = (timestamp) => {
// progress always runs from 0 to 1
const progress = (timestamp - zero) / (duration || this.options.fadeSpeed);
if (progress < 1) {
for (let element of elements) {
if(element) {
element.style.opacity = currentOpacity;
element.style.opacity = progress * opacityTarget;
}
}
if(!this.isFadeIn) return;
Expand All @@ -1445,7 +1448,7 @@ class SimpleLightbox {
}
};

fade();
requestAnimationFrame(fade);
}

hide(elements) {
Expand Down
50 changes: 27 additions & 23 deletions dist/simple-lightbox.jquery.js
View file
Open in desktop
Expand Up @@ -24,18 +24,20 @@ Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var SimpleLightbox = /*#__PURE__*/function () {
function SimpleLightbox(elements, options) {
var _this = this;
Expand Down Expand Up @@ -1308,42 +1310,44 @@ var SimpleLightbox = /*#__PURE__*/function () {
_iterator5.f();
}
this.isFadeIn = false;
var step = 16.66666 / (duration || this.options.fadeSpeed),
fade = function fade() {
var currentOpacity = parseFloat(elements[0].style.opacity);
if ((currentOpacity -= step) < 0) {
var zero = document.timeline.currentTime,
startingOpacity = parseFloat(elements[0].style.opacity),
fade = function fade(timestamp) {
// progress always runs from 0 to 1
var progress = (timestamp - zero) / (duration || _this10.options.fadeSpeed);
if (progress < 1) {
var _iterator6 = _createForOfIteratorHelper(elements),
_step6;
try {
for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
var element = _step6.value;
element.style.display = "none";
// element.style.opacity = '';
element.style.opacity = 1;
element.style.opacity = startingOpacity * (1 - progress);
}
} catch (err) {
_iterator6.e(err);
} finally {
_iterator6.f();
}
callback && callback.call(_this10, elements);
requestAnimationFrame(fade);
} else {
var _iterator7 = _createForOfIteratorHelper(elements),
_step7;
try {
for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
var _element = _step7.value;
_element.style.opacity = currentOpacity;
_element.style.display = "none";
// element.style.opacity = '';
_element.style.opacity = 1;
}
} catch (err) {
_iterator7.e(err);
} finally {
_iterator7.f();
}
requestAnimationFrame(fade);
callback && callback.call(_this10, elements);
}
};
fade();
requestAnimationFrame(fade);
}
}, {
key: "fadeIn",
Expand All @@ -1367,17 +1371,18 @@ var SimpleLightbox = /*#__PURE__*/function () {
}
this.isFadeIn = true;
var opacityTarget = parseFloat(elements[0].dataset.opacityTarget || 1),
step = 16.66666 * opacityTarget / (duration || this.options.fadeSpeed),
fade = function fade() {
var currentOpacity = parseFloat(elements[0].style.opacity);
if (!((currentOpacity += step) > opacityTarget)) {
zero = document.timeline.currentTime,
fade = function fade(timestamp) {
// progress always runs from 0 to 1
var progress = (timestamp - zero) / (duration || _this11.options.fadeSpeed);
if (progress < 1) {
var _iterator9 = _createForOfIteratorHelper(elements),
_step9;
try {
for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
var element = _step9.value;
if (element) {
element.style.opacity = currentOpacity;
element.style.opacity = progress * opacityTarget;
}
}
} catch (err) {
Expand Down Expand Up @@ -1405,7 +1410,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
callback && callback.call(_this11, elements);
}
};
fade();
requestAnimationFrame(fade);
}
}, {
key: "hide",
Expand Down Expand Up @@ -1595,8 +1600,7 @@ var SimpleLightbox = /*#__PURE__*/function () {
}]);
return SimpleLightbox;
}();
var _default = SimpleLightbox;
exports["default"] = _default;
var _default = exports["default"] = SimpleLightbox;
global.SimpleLightbox = SimpleLightbox;

}).call(this)}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
Expand Down
2 changes: 1 addition & 1 deletion dist/simple-lightbox.jquery.min.js
View file
Open in desktop

Large diffs are not rendered by default.