Popup close buttons can take a URL.

This commit is contained in:
2021-02-24 16:13:50 +01:00
parent 114c217ffa
commit ac779af339
68 changed files with 18127 additions and 43084 deletions
+55 -45
View File
@@ -1515,7 +1515,7 @@
return new Date(date.getTime() + 1)
}
static * iterYears(start, end) {
static *iterYears(start, end) {
let date = this.create(start.getFullYear(), 0, 1);
while (date <= end) {
yield date;
@@ -1524,7 +1524,7 @@
yield date;
}
static * iterMonths(year, limit = 12) {
static *iterMonths(year, limit = 12) {
let month = 0;
while (month < limit) {
let date = this.create(year.getFullYear(), month, 1);
@@ -1533,7 +1533,7 @@
}
}
static * iterMonthsOfYears(years) {
static *iterMonthsOfYears(years) {
for (let year of years) {
for (let month of this.iterMonths(year)) {
yield month;
@@ -1541,7 +1541,7 @@
}
}
static * iterDays(month) {
static *iterDays(month) {
let day = 1;
let limit = Dates.daysInMonth(month);
while (day <= limit) {
@@ -1551,7 +1551,7 @@
}
}
static * iterDaysOfMonths(months) {
static *iterDaysOfMonths(months) {
for (let month of months) {
for (let day of this.iterDays(month)) {
yield day;
@@ -1729,16 +1729,12 @@
static distanceToRect(p, r) {
let dx = 0;
let dy = 0;
if (p.x < r.x)
dx = p.x - r.x;
else if (p.x > r.x + r.width)
dx = p.x - (r.x + r.width);
if (p.y < r.y)
dy = p.y - r.y;
else if (p.y > r.y + r.height)
dy = p.y - (r.y + r.height);
if (p.x < r.x) dx = p.x - r.x;
else if (p.x > r.x + r.width) dx = p.x - (r.x + r.width);
if (p.y < r.y) dy = p.y - r.y;
else if (p.y > r.y + r.height) dy = p.y - (r.y + r.height);
return Math.sqrt(dx * dx + dy * dy)
/* let cx = Math.max(Math.min(p.x, r.x + r.width), r.x)
/* let cx = Math.max(Math.min(p.x, r.x + r.width), r.x)
let cy = Math.max(Math.min(p.y, r.y + r.height), r.y)
let result = Math.sqrt((p.x - cx) * (p.x - cx) + (p.y - cy) * (p.y - cy))
console.log("distanceToRect", p, r, result)
@@ -2210,11 +2206,11 @@
next(nextValue) {
// push new value to the end, and remove oldest one
let removed = this.__push(nextValue);
// smooth value using all values from buffer
// smooth value using all values from buffer
let result = this.buffer.reduce((last, current) => {
return this.smoothing * current + (1 - this.smoothing) * last
}, removed);
// replace smoothed value
return this.smoothing * current + (1 - this.smoothing) * last
}, removed);
// replace smoothed value
this.buffer[this.buffer.length - 1] = result;
return result
}
@@ -3691,7 +3687,7 @@
* @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the popup.
* @param {boolean} [opts.closeOnPopup=false] - Should the popup be closed when the user clicks on the popup?
* @param {boolean} [opts.closeButton=true] - Should a close button be displayed on the upper right corner?
* @param {boolean|string} [opts.closeButton=true] - Should a close button be displayed on the upper right corner? Alternatively, a URL to the image can be specified.
* @param {object} [opts.button] - A Button object to be display on the lower right corner.
* @param {object} [opts.buttonGroup] - A ButtonGroup object to be displayed on the lower right corner.
*/
@@ -3746,7 +3742,16 @@
// closeButton
//-----------------
if (this.opts.closeButton) {
let closeButton = PIXI.Sprite.from('../../assets/icons/close.png');
let url = null;
if (typeof this.opts.closeButton === 'string' || this.opts.closeButton instanceof String) {
url = InteractivePopup.iconIsUrl(this.opts.closeButton)
? this.opts.closeButton
: `../../assets/icons/${this.opts.closeButton}.png`;
} else {
url = '../../assets/icons/close.png';
}
let closeButton = PIXI.Sprite.from(url);
closeButton.width = this.headerStyle.fontSize;
closeButton.height = closeButton.width;
closeButton.tint = this.theme.color2;
@@ -3845,6 +3850,18 @@
return size
}
/**
* Tests if an icon string is an url.
*
* @private
* @static
* @param {string} url - The url to test.
* @return {boolean} true if the url is an url to an image.
*/
static iconIsUrl(url) {
return /\.(png|svg|gif|jpg|jpeg|tif|tiff)$/i.test(url)
}
}
/**
@@ -3870,7 +3887,7 @@
*
* @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the popup.
* @param {boolean} [opts.closeButton=false] - Should a close button be displayed on the upper right corner?
* @param {boolean|string} [opts.closeButton=false] - Should a close button be displayed on the upper right corner? Alternatively, a URL to the image can be specified.
* @param {number} [opts.minWidth=0] - The minimum width of the popup.
* @param {number} [opts.minHeight=0] - The minimum height of the popup.
*/
@@ -4595,7 +4612,7 @@
*/
expandRenderer(expand = 256) {
let renderer = this.renderer;
let resolution = this.renderer.resolution;
this.renderer.resolution;
let ww = this.width;
let hh = this.height;
let sw = this.screen.width;
@@ -5229,9 +5246,9 @@
static implementationError(klass) {
let interfaceKeys = Reflect.ownKeys(this.prototype);
let classKeys = Reflect.ownKeys(klass.prototype);
Reflect.ownKeys(klass.prototype);
for (let key of interfaceKeys) {
let interfaceDesc = this.prototype[key];
this.prototype[key];
let classDesc = klass.prototype[key];
if (typeof classDesc == 'undefined') return 'Missing ' + key
}
@@ -7100,7 +7117,7 @@
// UO: since keepOnStage is called in nextVelocity we need to
// ensure a return value
if (!stagePolygon) return { x: 0, y: 0 }
let polygon = this.polygon;
this.polygon;
let bounced = this.bouncing();
if (bounced) {
let stage = this.containerBounds;
@@ -8006,7 +8023,7 @@
isClickable(node) {
if (node == null) return false
// console.log("isClickable", node, this.isClickPrevented(node))
// console.log("isClickable", node, this.isClickPrevented(node))
if (this.isClickPrevented(node)) {
return false
}
@@ -8053,8 +8070,8 @@
let clickRects = activeNodes.map(link => {
let rect = link.getBoundingClientRect();
// Since the getBoundingClientRect is untransformed we cannot rely on it's size
// We need a transformed bottom right to calculate local width and height
// Since the getBoundingClientRect is untransformed we cannot rely on it's size
// We need a transformed bottom right to calculate local width and height
let bottomRight = Points.fromPageToNode(element, {
x: rect.x + rect.width,
y: rect.y + rect.height
@@ -9884,7 +9901,7 @@
**/
setupTiles(center = false) {
// First load background tile
let tiles = this.ensureAllTiles(this.currentLevel);
this.ensureAllTiles(this.currentLevel);
if (center) {
this.pivot.set(w / 2, h / 2);
}
@@ -10121,7 +10138,7 @@
let maxWidth = worldBounds.width;
let maxHeight = worldBounds.height;
let pointInWindow = new PIXI.Point();
new PIXI.Point();
let worldTopLeft = new PIXI.Point(worldBounds.x, worldBounds.y);
let worldBottomRight = new PIXI.Point(worldBounds.x + maxWidth, worldBounds.y + maxHeight);
let worldCenter = new PIXI.Point(worldBounds.x + maxWidth / 2, worldBounds.y + maxHeight / 2);
@@ -10311,7 +10328,7 @@
untintTiles(level) {
let key = level.toString();
if (key in this.tileLayers) {
let tiles = this.tileLayers[key];
this.tileLayers[key];
}
}
@@ -10613,7 +10630,7 @@
load(domNode) {
return new Promise((resolve, reject) => {
let isImage = domNode instanceof HTMLImageElement;
let isSprite = this.scatter.displayObject instanceof PIXI.Sprite;
this.scatter.displayObject instanceof PIXI.Sprite;
let image = isImage ? domNode : document.createElement('img');
let [x, y, w, h, cloneURL] = this.cloneScatterImage();
let [ww, hh] = this.unscaledSize();
@@ -11766,7 +11783,6 @@
if (y != null) this.y = y;
}
getWorldScatter() {
return this
}
@@ -11889,7 +11905,7 @@
let h2 = this.height / 2;
let dist = Math.sqrt(w2 * w2 + h2 * h2);
let angle = Points.angle({ x: w2, y: h2 }, { x: 0, y: 0 });
let p = this.displayObject.x;
this.displayObject.x;
let c = Points.arc(this.position, this.rotation + angle, dist);
return c // Points.subtract(c, this.pivot)
}
@@ -13756,11 +13772,8 @@
? false
: this.scrollHeight > this.options.boxHeight;
this.scrollbar.clear();
let options = {};
options.left = 0;
options.right = this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0);
options.top = 0;
options.bottom = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0);
this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0);
this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0);
const width = this.scrollWidth + (this.isScrollbarVertical ? this.options.scrollbarSize : 0);
const height = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0);
this.scrollbarTop = (this.content.top / height) * this.boxHeight;
@@ -19510,14 +19523,11 @@
}
_adaptCoordinates(map) {
let scale = 1;
if (map instanceof DeepZoomMap) {
scale = map.image.scale.x;
map.image.scale.x;
}
scale = scale / 4;
return map.coordinatesToPoint(this.coordinates)
}
@@ -21088,8 +21098,8 @@
if (myevent && myevent.submap) {
const submap = myevent.submap;
const center = submap.center;
const radius = submap.container.width / 2;
const distance = Points.distance(center, event.data.global) / submap.scatter.scale;
submap.container.width / 2;
Points.distance(center, event.data.global) / submap.scatter.scale;
}
}
}