uicore-ts
Version:
UICore is a library to build native-like user interfaces using pure Typescript. No HTML is needed at all. Components are described as TS classes and all user interactions are handled explicitly. This library is strongly inspired by the UIKit framework tha
150 lines (149 loc) • 5.31 kB
JavaScript
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var UINativeScrollView_exports = {};
__export(UINativeScrollView_exports, {
UINativeScrollView: () => UINativeScrollView
});
module.exports = __toCommonJS(UINativeScrollView_exports);
var import_UIPoint = require("./UIPoint");
var import_UIView = require("./UIView");
class UINativeScrollView extends import_UIView.UIView {
constructor(elementID, viewHTMLElement) {
super(elementID, viewHTMLElement);
this.animationDuration = 0;
this.style.cssText = this.style.cssText + "-webkit-overflow-scrolling: touch;";
this.style.overflow = "auto";
this.viewHTMLElement.addEventListener("scroll", () => {
this.resizingHandles.forEach(
(handle) => handle.style.transform = ("" + handle.style.transform).replace(
new RegExp("translateX\\(([^)]+)\\)"),
""
).replace(
new RegExp("translateY\\(([^)]+)\\)"),
""
) + "translateX(" + this.viewHTMLElement.scrollLeft + "px) translateY(" + this.viewHTMLElement.scrollTop + "px)"
);
this._contentOffset = new import_UIPoint.UIPoint(this.viewHTMLElement.scrollLeft, this.viewHTMLElement.scrollTop);
this.didScrollToPosition(this._contentOffset);
this.broadcastEventInSubtree({
name: import_UIView.UIView.broadcastEventName.PageDidScroll,
parameters: void 0
});
});
}
didScrollToPosition(offsetPosition) {
}
get scrollsX() {
const result = this.style.overflowX == "scroll";
return result;
}
set scrollsX(scrolls) {
if (scrolls) {
this.style.overflowX = "scroll";
} else {
this.style.overflowX = "hidden";
}
}
get scrollsY() {
const result = this.style.overflowY == "scroll";
return result;
}
set scrollsY(scrolls) {
if (scrolls) {
this.style.overflowY = "scroll";
} else {
this.style.overflowY = "hidden";
}
}
get contentOffset() {
if (!this._contentOffset) {
this._contentOffset = new import_UIPoint.UIPoint(this.viewHTMLElement.scrollLeft, this.viewHTMLElement.scrollTop);
}
return this._contentOffset;
}
set contentOffset(offsetPoint) {
this._contentOffset = offsetPoint.copy();
if (this.animationDuration) {
this.scrollXTo(this.viewHTMLElement, offsetPoint.x, this.animationDuration);
this.scrollYTo(this.viewHTMLElement, offsetPoint.y, this.animationDuration);
return;
}
this.viewHTMLElement.scrollLeft = offsetPoint.x;
this.viewHTMLElement.scrollTop = offsetPoint.y;
}
scrollToBottom() {
this.contentOffset = new import_UIPoint.UIPoint(this.contentOffset.x, this.scrollSize.height - this.frame.height);
}
scrollToTop() {
this.contentOffset = new import_UIPoint.UIPoint(this.contentOffset.x, 0);
}
get isScrolledToBottom() {
return this.contentOffset.isEqualTo(new import_UIPoint.UIPoint(this.contentOffset.x, this.scrollSize.height - this.frame.height));
}
get isScrolledToTop() {
return this.contentOffset.isEqualTo(new import_UIPoint.UIPoint(this.contentOffset.x, 0));
}
scrollYTo(element, to, duration) {
duration = duration * 1e3;
const start = element.scrollTop;
const change = to - start;
const increment = 10;
const animateScroll = (elapsedTime) => {
elapsedTime += increment;
const position = this.easeInOut(elapsedTime, start, change, duration);
element.scrollTop = position;
if (elapsedTime < duration) {
setTimeout(function() {
animateScroll(elapsedTime);
}, increment);
}
};
animateScroll(0);
}
scrollXTo(element, to, duration) {
duration = duration * 1e3;
const start = element.scrollTop;
const change = to - start;
const increment = 10;
const animateScroll = (elapsedTime) => {
elapsedTime += increment;
const position = this.easeInOut(elapsedTime, start, change, duration);
element.scrollLeft = position;
if (elapsedTime < duration) {
setTimeout(function() {
animateScroll(elapsedTime);
}, increment);
}
};
animateScroll(0);
}
easeInOut(currentTime, start, change, duration) {
currentTime /= duration / 2;
if (currentTime < 1) {
return change / 2 * currentTime * currentTime + start;
}
currentTime -= 1;
return -change / 2 * (currentTime * (currentTime - 2) - 1) + start;
}
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
UINativeScrollView
});
//# sourceMappingURL=UINativeScrollView.js.map