IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Added badge content example to button doctest.

Browse Source
This commit is contained in:
Sebastian Kupke
2019-08-06 12:01:32 +02:00
parent ca16516073
commit 05c952fbe1
70 changed files with 217 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/iwmlib.js
Vendored
+17 -21
View File
@@ -4457,6 +4457,8 @@
DOMScatter$1.zIndex = 1000;
/* eslint-disable no-unused-vars */
class CardLoader {
constructor(
src,
@@ -4477,7 +4479,7 @@
this.x = x;
this.y = y;
this.scale = scale;
this.rotation = 0;
this.rotation = rotation;
this.maxScale = maxScale;
this.minScale = minScale;
this.wantedWidth = width;
@@ -4485,12 +4487,6 @@
this.maxWidth = maxWidth != null ? maxWidth : window.innerWidth;
this.maxHeight = maxHeight != null ? maxHeight : window.innerHeight;
this.addedNode = null;
console.log({
width,
height,
maxWidth,
maxHeight
});
}
unload() {
@@ -4575,7 +4571,6 @@
return new Promise((resolve, reject) => {
let isFrame = domNode instanceof HTMLIFrameElement;
let iframe = isFrame ? domNode : document.createElement('iframe');
console.log('FrameLoader.load', isFrame, iframe, this.src);
iframe.frameBorder = 0;
iframe.style.scrolling = false;
iframe.width = this.wantedWidth;
@@ -4602,14 +4597,9 @@
let xhr = new XMLHttpRequest();
xhr.open('GET', this.src, false);
xhr.onload = e => {
domNode.innerHTML = xhr.response;
domNode.innerHTML = this.prepare(xhr.response);
this.addedNode = domNode.firstElementChild;
let { width, height } = this.size(this.addedNode);
console.log('HTMLLoader.load', {
added: this.addedNode,
width,
height
});
if (width) this.wantedWidth = width || this.wantedWidth;
if (height) this.wantedHeight = height || this.wantedHeight;
resolve(this);
@@ -4621,6 +4611,18 @@
})
}
/**
* Preoares the html before it is assigned with innerHTML.
* Can be overwritten in subclasses.
*
* @param {*} html
* @returns
* @memberof HTMLLoader
*/
prepare(html) {
return html
}
/**
* Tries to determine the size of the addedNode.
* Checks for explicit width and height style attributes.
@@ -4776,7 +4778,6 @@
}
setupFlippable(flippable, loader) {
console.log('setupFlippable', loader.wantedWidth);
flippable.wantedWidth = loader.wantedWidth;
flippable.wantedHeight = loader.wantedHeight;
flippable.wantedScale = loader.scale;
@@ -4786,7 +4787,6 @@
}
start({ targetCenter = null } = {}) {
console.log('DOMFlip.start', targetCenter);
if (this.preloadBack) {
this.flippable.start({ duration: this.flipDuration, targetCenter });
} else {
@@ -4936,7 +4936,6 @@
clickInfo() {
this.bringToFront();
console.log('clickInfo');
this.infoBtn.click();
}
@@ -4963,6 +4962,7 @@
let startScale = this.element._gsTransform.scaleX;
let w = this.element.style.width;
let h = this.element.style.height;
// eslint-disable-next-line no-console
console.log(info, startX, startY, startAngle, startScale, w, h);
}
@@ -5032,14 +5032,12 @@
let y = this.flipped ? yy : this.startY;
let onUpdate = this.onUpdate !== null ? () => this.onUpdate(this) : null;
console.log('start', this.flipDuration);
TweenLite.to(this.card, this.flipDuration, {
rotationY: targetY,
ease: Power1.easeOut,
transformOrigin: '50% 50%',
onUpdate,
onComplete: e => {
console.log('start end', this.flipDuration);
if (this.flipped) {
//this.hide(this.front)
this.enable(this.backBtn);
@@ -5070,8 +5068,6 @@
},
force3D: true
});
console.log('start 2', this.wantedWidth, this.startWidth, { w, h });
// See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/
TweenLite.to(this.element, this.flipDuration / 2, {
scale: targetScale,
dist/iwmlib.pixi.js
Vendored
+40 -38
View File
@@ -2569,34 +2569,12 @@
}
const badge = new Badge(opts);
switch (opts.align) {
case 'left':
badge.x = this.x - badge.width / 2 + opts.offsetLeft;
break
case 'center':
badge.x = this.x + this.width / 2 - badge.width / 2 + opts.offsetLeft;
break
case 'right':
badge.x = this.x + this.width - badge.width / 2 + opts.offsetLeft;
}
switch (opts.verticalAlign) {
case 'top':
badge.y = this.y - badge.height / 2 + opts.offsetTop;
break
case 'middle':
badge.y = this.y + this.height / 2 - badge.height / 2 + opts.offsetTop;
break
case 'bottom':
badge.y = this.y + this.height - badge.height / 2 + opts.offsetTop;
}
this.addChild(badge);
this.badge = badge;
}
this.layout();
// set position
//-----------------
this.position.set(this.opts.x, this.opts.y);
@@ -2681,6 +2659,40 @@
this.icon = icon;
// badge
//--------------------
if (this.badge) {
this.removeChild(this.badge);
const width = this.width;
const height = this.height;
this.addChild(this.badge);
const badge = this.badge;
switch (badge.opts.align) {
case 'left':
badge.x = -badge.width / 2 + badge.opts.offsetLeft;
break
case 'center':
badge.x = width / 2 - badge.width / 2 + badge.opts.offsetLeft;
break
case 'right':
badge.x = width - badge.width / 2 + badge.opts.offsetLeft;
}
switch (badge.opts.verticalAlign) {
case 'top':
badge.y = -badge.height / 2 + badge.opts.offsetTop;
break
case 'middle':
badge.y = height / 2 - badge.height / 2 + badge.opts.offsetTop;
break
case 'bottom':
badge.y = height - badge.height / 2 + badge.opts.offsetTop;
}
}
// draw
//-----------------
this.draw();
@@ -7859,6 +7871,8 @@
DOMScatter.zIndex = 1000;
/* eslint-disable no-unused-vars */
class CardLoader {
constructor(
src,
@@ -7879,7 +7893,7 @@
this.x = x;
this.y = y;
this.scale = scale;
this.rotation = 0;
this.rotation = rotation;
this.maxScale = maxScale;
this.minScale = minScale;
this.wantedWidth = width;
@@ -7887,12 +7901,6 @@
this.maxWidth = maxWidth != null ? maxWidth : window.innerWidth;
this.maxHeight = maxHeight != null ? maxHeight : window.innerHeight;
this.addedNode = null;
console.log({
width,
height,
maxWidth,
maxHeight
});
}
unload() {
@@ -8042,7 +8050,6 @@
}
setupFlippable(flippable, loader) {
console.log('setupFlippable', loader.wantedWidth);
flippable.wantedWidth = loader.wantedWidth;
flippable.wantedHeight = loader.wantedHeight;
flippable.wantedScale = loader.scale;
@@ -8052,7 +8059,6 @@
}
start({ targetCenter = null } = {}) {
console.log('DOMFlip.start', targetCenter);
if (this.preloadBack) {
this.flippable.start({ duration: this.flipDuration, targetCenter });
} else {
@@ -8202,7 +8208,6 @@
clickInfo() {
this.bringToFront();
console.log('clickInfo');
this.infoBtn.click();
}
@@ -8229,6 +8234,7 @@
let startScale = this.element._gsTransform.scaleX;
let w = this.element.style.width;
let h = this.element.style.height;
// eslint-disable-next-line no-console
console.log(info, startX, startY, startAngle, startScale, w, h);
}
@@ -8298,14 +8304,12 @@
let y = this.flipped ? yy : this.startY;
let onUpdate = this.onUpdate !== null ? () => this.onUpdate(this) : null;
console.log('start', this.flipDuration);
TweenLite.to(this.card, this.flipDuration, {
rotationY: targetY,
ease: Power1.easeOut,
transformOrigin: '50% 50%',
onUpdate,
onComplete: e => {
console.log('start end', this.flipDuration);
if (this.flipped) {
//this.hide(this.front)
this.enable(this.backBtn);
@@ -8336,8 +8340,6 @@
},
force3D: true
});
console.log('start 2', this.wantedWidth, this.startWidth, { w, h });
// See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/
TweenLite.to(this.element, this.flipDuration / 2, {
scale: targetScale,