Prettified badge.js.
This commit is contained in:
parent
5704beaad4
commit
7744b92771
|
|
@ -1,12 +1,15 @@
|
|||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
|
||||
<title>PIXI Badge</title>
|
||||
|
||||
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
||||
<link rel="stylesheet" href="../../css/doctest.css">
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="../3rdparty/highlight/styles/default.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||
|
||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||
|
|
@ -19,7 +22,8 @@
|
|||
<p>
|
||||
Small and adaptive tag for adding context to just about any content.
|
||||
</p>
|
||||
<p>Let's look at some badge examples:</p><br />
|
||||
<p>Let's look at some badge examples:</p>
|
||||
<br />
|
||||
<canvas id="canvas" class="interactive"></canvas>
|
||||
<p>
|
||||
What you should see: Badges, badges, badges...
|
||||
|
|
@ -29,7 +33,9 @@ const app = new PIXIApp({
|
|||
view: canvas,
|
||||
width: 900,
|
||||
height: 250
|
||||
}).setup().run()
|
||||
})
|
||||
.setup()
|
||||
.run()
|
||||
|
||||
const circle1 = new PIXI.Graphics()
|
||||
circle1.beginFill(0x5251a3)
|
||||
|
|
@ -114,20 +120,22 @@ let badge3 = new Badge({
|
|||
fill: 0xfe9727
|
||||
})
|
||||
|
||||
let sprite1 = new PIXI.Sprite(PIXI.Texture.fromVideo('./assets/badge-1.mp4'))
|
||||
sprite1.scale.set(.05, .05)
|
||||
let sprite1 = new PIXI.Sprite(
|
||||
PIXI.Texture.fromVideo('./assets/badge-1.mp4')
|
||||
)
|
||||
sprite1.scale.set(0.05, 0.05)
|
||||
|
||||
let texture1 = PIXI.Texture.fromVideo('./assets/badge-1.mp4')
|
||||
texture1.baseTexture.on('loaded', e => {
|
||||
let sprite1 = new PIXI.Sprite(texture1)
|
||||
sprite1.scale.set(.05, .05)
|
||||
sprite1.alpha = .5
|
||||
sprite1.scale.set(0.05, 0.05)
|
||||
sprite1.alpha = 0.5
|
||||
let badge4 = new Badge({
|
||||
x: 300,
|
||||
y: 152,
|
||||
stroke: 0x5ec7f8,
|
||||
strokeWidth: 3,
|
||||
fillAlpha: .7,
|
||||
fillAlpha: 0.7,
|
||||
padding: 0,
|
||||
radius: 1,
|
||||
content: sprite1,
|
||||
|
|
@ -137,7 +145,15 @@ texture1.baseTexture.on('loaded', e => {
|
|||
})
|
||||
|
||||
app.scene.addChild(circle1, circle2)
|
||||
app.scene.addChild(button1, button2, button3, button4, button5, button6)
|
||||
app.scene.addChild(
|
||||
button1,
|
||||
button2,
|
||||
button3,
|
||||
button4,
|
||||
button5,
|
||||
button6
|
||||
)
|
||||
app.scene.addChild(badge1, badge2, badge3)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@ import Tooltip from './tooltip.js'
|
|||
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/badge.html|DocTest}
|
||||
*/
|
||||
export default class Badge extends AbstractPopup {
|
||||
|
||||
/**
|
||||
* Creates an instance of a Badge.
|
||||
*
|
||||
|
|
@ -43,15 +42,18 @@ export default class Badge extends AbstractPopup {
|
|||
* to display.
|
||||
*/
|
||||
constructor(opts = {}) {
|
||||
|
||||
const theme = Theme.fromString(opts.theme)
|
||||
|
||||
opts = Object.assign({}, {
|
||||
opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
minWidth: 0,
|
||||
minHeight: 0,
|
||||
padding: theme.padding / 2,
|
||||
tooltip: null
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
super(opts)
|
||||
|
||||
|
|
@ -74,16 +76,22 @@ export default class Badge extends AbstractPopup {
|
|||
* @return {Badge} A reference to the badge for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
super.setup()
|
||||
|
||||
// tooltip
|
||||
//-----------------
|
||||
if (this.opts.tooltip) {
|
||||
if (typeof this.opts.tooltip === 'string') {
|
||||
this.tooltip = new Tooltip({object: this, content: this.opts.tooltip})
|
||||
this.tooltip = new Tooltip({
|
||||
object: this,
|
||||
content: this.opts.tooltip
|
||||
})
|
||||
} else {
|
||||
this.opts.tooltip = Object.assign({}, {object: this}, this.opts.tooltip)
|
||||
this.opts.tooltip = Object.assign(
|
||||
{},
|
||||
{ object: this },
|
||||
this.opts.tooltip
|
||||
)
|
||||
this.tooltip = new Tooltip(this.opts.tooltip)
|
||||
}
|
||||
}
|
||||
|
|
@ -98,11 +106,14 @@ export default class Badge extends AbstractPopup {
|
|||
* @return {Badge} A reference to the badge for chaining.
|
||||
*/
|
||||
layout() {
|
||||
|
||||
super.layout()
|
||||
|
||||
this.content.x = this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2
|
||||
this.content.y = this.height / 2 - this.content.height / 2 - this.opts.strokeWidth / 2
|
||||
this.content.x =
|
||||
this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2
|
||||
this.content.y =
|
||||
this.height / 2 -
|
||||
this.content.height / 2 -
|
||||
this.opts.strokeWidth / 2
|
||||
|
||||
return this
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// rollup.config.js (building more than one bundle)
|
||||
export default [{
|
||||
export default [
|
||||
{
|
||||
input: './lib/bundle.js',
|
||||
output: {
|
||||
file: './dist/iwmlib.js',
|
||||
|
|
@ -9,7 +10,8 @@ export default [{
|
|||
watch: {
|
||||
clearScreen: false
|
||||
}
|
||||
}, {
|
||||
},
|
||||
{
|
||||
input: './lib/pixi/bundle.js',
|
||||
output: {
|
||||
file: './dist/iwmlib.pixi.js',
|
||||
|
|
@ -19,4 +21,5 @@ export default [{
|
|||
watch: {
|
||||
clearScreen: false
|
||||
}
|
||||
}]
|
||||
}
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in New Issue