Skip to content

Commit

Permalink
Add missing "scrollLeft" and "scroll" normalisations, fix for slower …
Browse files Browse the repository at this point in the history 
…"calc(0*" replacement
  • Loading branch information
@Rycochet
Rycochet committed Aug 2, 2020
1 parent c093620 commit 503d77e
Show file tree
Hide file tree
Showing 7 changed files with 80 additions and 12 deletions.
3 changes: 2 additions & 1 deletion packages/velocity/src/Velocity/css/setPropertyValue.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ namespace VelocityStatic.CSS {
&& propertyValue[2] === "l"
&& propertyValue[3] === "c"
&& propertyValue[4] === "("
&& propertyValue[5] === "0") {
&& propertyValue[5] === "0"
&& propertyValue[5] === " ") {
// Make sure we un-calc unit changing values - try not to trigger
// this code any more often than we have to since it's expensive
propertyValue = propertyValue.replace(/^calc\(0[^\d]* \+ ([^\(\)]+)\)$/, "$1");
Expand Down
2 changes: 2 additions & 0 deletions packages/velocity/src/Velocity/easing/easings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ namespace VelocityStatic.Easing {
}
}

registerAction(["registerEasing", registerEasing], true);

/* Basic (same as jQuery) easings. */
registerEasing(["linear", function(percentComplete, startValue, endValue) {
return startValue + percentComplete * (endValue - startValue);
Expand Down
41 changes: 39 additions & 2 deletions packages/velocity/src/Velocity/normalizations/scroll.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ namespace VelocityStatic {
CSS.getPropertyValue(element, "scrollTop", false, true);
return element.scrollTop + "px";
}
console.log("setScrollTop", propertyValue)
// console.log("setScrollTop", propertyValue)
const value = parseFloat(propertyValue),
unit = propertyValue.replace(String(value), "");

Expand All @@ -83,13 +83,50 @@ namespace VelocityStatic {
let clientHeight = parseFloat(CSS.getPropertyValue(element, "clientHeight")),
scrollHeight = parseFloat(CSS.getPropertyValue(element, "scrollHeight"));

console.log("setScrollTop percent", scrollHeight, clientHeight, value, Math.max(0, scrollHeight - clientHeight) * value / 100)
// console.log("setScrollTop percent", scrollHeight, clientHeight, value, Math.max(0, scrollHeight - clientHeight) * value / 100)
element.scrollTop = Math.max(0, scrollHeight - clientHeight) * value / 100;
}
return false;
}

/**
* Scroll an element (horizontal).
*/
function scrollLeft(element: HTMLorSVGElement): string;
function scrollLeft(element: HTMLorSVGElement, propertyValue: string): boolean;
function scrollLeft(element: HTMLorSVGElement, propertyValue?: string): string | boolean {
if (propertyValue == null) {
// getPropertyValue(element, "clientWidth", false, true);
// getPropertyValue(element, "scrollWidth", false, true);
// getPropertyValue(element, "scrollLeft", false, true);
CSS.getPropertyValue(element, "clientWidth", false, true);
CSS.getPropertyValue(element, "scrollWidth", false, true);
CSS.getPropertyValue(element, "scrollLeft", false, true);
return element.scrollLeft + "px";
}
// console.log("setScrollLeft", propertyValue)
const value = parseFloat(propertyValue),
unit = propertyValue.replace(String(value), "");

switch (unit) {
case "":
case "px":
element.scrollLeft = value;
break;

case "%":
let clientWidth = parseFloat(CSS.getPropertyValue(element, "clientWidth")),
scrollWidth = parseFloat(CSS.getPropertyValue(element, "scrollWidth"));

// console.log("setScrollLeft percent", scrollWidth, clientWidth, value, Math.max(0, scrollWidth - clientWidth) * value / 100)
element.scrollTop = Math.max(0, scrollWidth - clientWidth) * value / 100;
}
return false;
}

registerNormalization([HTMLElement, "scroll", scrollTop, false]);
registerNormalization([HTMLElement, "scrollTop", scrollTop, false]);
registerNormalization([HTMLElement, "scrollLeft", scrollLeft, false]);
registerNormalization([HTMLElement, "scrollWidth", scrollWidth]);
registerNormalization([HTMLElement, "clientWidth", clientWidth]);
registerNormalization([HTMLElement, "scrollHeight", scrollHeight]);
Expand Down
38 changes: 33 additions & 5 deletions packages/velocity/velocity.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1460,7 +1460,7 @@ var VelocityStatic;
*/
function setPropertyValue(element, propertyName, propertyValue) {
var data = Data(element);
if (isString(propertyValue) && propertyValue[0] === "c" && propertyValue[1] === "a" && propertyValue[2] === "l" && propertyValue[3] === "c" && propertyValue[4] === "(" && propertyValue[5] === "0") {
if (isString(propertyValue) && propertyValue[0] === "c" && propertyValue[1] === "a" && propertyValue[2] === "l" && propertyValue[3] === "c" && propertyValue[4] === "(" && propertyValue[5] === "0" && propertyValue[5] === " ") {
// Make sure we un-calc unit changing values - try not to trigger
// this code any more often than we have to since it's expensive
propertyValue = propertyValue.replace(/^calc\(0[^\d]* \+ ([^\(\)]+)\)$/, "$1");
Expand Down Expand Up @@ -1516,6 +1516,7 @@ var VelocityStatic;
}
}
Easing.registerEasing = registerEasing;
VelocityStatic.registerAction([ "registerEasing", registerEasing ], true);
/* Basic (same as jQuery) easings. */ registerEasing([ "linear", function(percentComplete, startValue, endValue) {
return startValue + percentComplete * (endValue - startValue);
} ]);
Expand Down Expand Up @@ -2303,8 +2304,8 @@ var VelocityStatic;
VelocityStatic.CSS.getPropertyValue(element, "scrollTop", false, true);
return element.scrollTop + "px";
}
console.log("setScrollTop", propertyValue);
var value = parseFloat(propertyValue), unit = propertyValue.replace(String(value), "");
// console.log("setScrollTop", propertyValue)
var value = parseFloat(propertyValue), unit = propertyValue.replace(String(value), "");
switch (unit) {
case "":
case "px":
Expand All @@ -2313,12 +2314,39 @@ var VelocityStatic;

case "%":
var clientHeight_1 = parseFloat(VelocityStatic.CSS.getPropertyValue(element, "clientHeight")), scrollHeight_1 = parseFloat(VelocityStatic.CSS.getPropertyValue(element, "scrollHeight"));
console.log("setScrollTop percent", scrollHeight_1, clientHeight_1, value, Math.max(0, scrollHeight_1 - clientHeight_1) * value / 100);
element.scrollTop = Math.max(0, scrollHeight_1 - clientHeight_1) * value / 100;
// console.log("setScrollTop percent", scrollHeight, clientHeight, value, Math.max(0, scrollHeight - clientHeight) * value / 100)
element.scrollTop = Math.max(0, scrollHeight_1 - clientHeight_1) * value / 100;
}
return false;
}
function scrollLeft(element, propertyValue) {
if (propertyValue == null) {
// getPropertyValue(element, "clientWidth", false, true);
// getPropertyValue(element, "scrollWidth", false, true);
// getPropertyValue(element, "scrollLeft", false, true);
VelocityStatic.CSS.getPropertyValue(element, "clientWidth", false, true);
VelocityStatic.CSS.getPropertyValue(element, "scrollWidth", false, true);
VelocityStatic.CSS.getPropertyValue(element, "scrollLeft", false, true);
return element.scrollLeft + "px";
}
// console.log("setScrollLeft", propertyValue)
var value = parseFloat(propertyValue), unit = propertyValue.replace(String(value), "");
switch (unit) {
case "":
case "px":
element.scrollLeft = value;
break;

case "%":
var clientWidth_1 = parseFloat(VelocityStatic.CSS.getPropertyValue(element, "clientWidth")), scrollWidth_1 = parseFloat(VelocityStatic.CSS.getPropertyValue(element, "scrollWidth"));
// console.log("setScrollLeft percent", scrollWidth, clientWidth, value, Math.max(0, scrollWidth - clientWidth) * value / 100)
element.scrollTop = Math.max(0, scrollWidth_1 - clientWidth_1) * value / 100;
}
return false;
}
VelocityStatic.registerNormalization([ HTMLElement, "scroll", scrollTop, false ]);
VelocityStatic.registerNormalization([ HTMLElement, "scrollTop", scrollTop, false ]);
VelocityStatic.registerNormalization([ HTMLElement, "scrollLeft", scrollLeft, false ]);
VelocityStatic.registerNormalization([ HTMLElement, "scrollWidth", scrollWidth ]);
VelocityStatic.registerNormalization([ HTMLElement, "clientWidth", clientWidth ]);
VelocityStatic.registerNormalization([ HTMLElement, "scrollHeight", scrollHeight ]);
Expand Down
2 changes: 1 addition & 1 deletion packages/velocity/velocity.js.map
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions packages/velocity/velocity.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/velocity/velocity.ui.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 503d77e

Please sign in to comment.