Prettified badge.js.
This commit is contained in:
parent
5704beaad4
commit
7744b92771
|
|
@ -1,143 +1,159 @@
|
|||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
|
||||
<title>PIXI Badge</title>
|
||||
<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>
|
||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||
|
||||
<script src="../../dist/iwmlib.js"></script>
|
||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||
</head>
|
||||
<body onload="Doctest.run()">
|
||||
<h1>Badge</h1>
|
||||
<p>
|
||||
Small and adaptive tag for adding context to just about any content.
|
||||
</p>
|
||||
<p>Let's look at some badge examples:</p><br />
|
||||
<canvas id="canvas" class="interactive"></canvas>
|
||||
<p>
|
||||
What you should see: Badges, badges, badges...
|
||||
</p>
|
||||
<script class="doctest">
|
||||
const app = new PIXIApp({
|
||||
view: canvas,
|
||||
width: 900,
|
||||
height: 250
|
||||
}).setup().run()
|
||||
<script src="../../dist/iwmlib.js"></script>
|
||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||
</head>
|
||||
<body onload="Doctest.run()">
|
||||
<h1>Badge</h1>
|
||||
<p>
|
||||
Small and adaptive tag for adding context to just about any content.
|
||||
</p>
|
||||
<p>Let's look at some badge examples:</p>
|
||||
<br />
|
||||
<canvas id="canvas" class="interactive"></canvas>
|
||||
<p>
|
||||
What you should see: Badges, badges, badges...
|
||||
</p>
|
||||
<script class="doctest">
|
||||
const app = new PIXIApp({
|
||||
view: canvas,
|
||||
width: 900,
|
||||
height: 250
|
||||
})
|
||||
.setup()
|
||||
.run()
|
||||
|
||||
const circle1 = new PIXI.Graphics()
|
||||
circle1.beginFill(0x5251a3)
|
||||
circle1.drawCircle(50, 50, 40)
|
||||
const circle1 = new PIXI.Graphics()
|
||||
circle1.beginFill(0x5251a3)
|
||||
circle1.drawCircle(50, 50, 40)
|
||||
|
||||
const circle2 = new PIXI.Graphics()
|
||||
circle2.beginFill(0x8ca351)
|
||||
circle2.drawCircle(150, 50, 40)
|
||||
const circle2 = new PIXI.Graphics()
|
||||
circle2.beginFill(0x8ca351)
|
||||
circle2.drawCircle(150, 50, 40)
|
||||
|
||||
const button1 = new Button({
|
||||
x: 10,
|
||||
y: 110,
|
||||
label: 'Button with Badge'
|
||||
})
|
||||
const button1 = new Button({
|
||||
x: 10,
|
||||
y: 110,
|
||||
label: 'Button with Badge'
|
||||
})
|
||||
|
||||
const button2 = new Button({
|
||||
x: 230,
|
||||
y: 110,
|
||||
label: 'Button with Video-Badge'
|
||||
})
|
||||
const button2 = new Button({
|
||||
x: 230,
|
||||
y: 110,
|
||||
label: 'Button with Video-Badge'
|
||||
})
|
||||
|
||||
const button3 = new Button({
|
||||
x: 480,
|
||||
y: 110,
|
||||
label: 'Button and ',
|
||||
badge: 'Badge'
|
||||
})
|
||||
const button3 = new Button({
|
||||
x: 480,
|
||||
y: 110,
|
||||
label: 'Button and ',
|
||||
badge: 'Badge'
|
||||
})
|
||||
|
||||
const button4 = new Button({
|
||||
x: 640,
|
||||
y: 110,
|
||||
label: 'Button',
|
||||
badge: {
|
||||
content: 'IWM',
|
||||
align: 'center',
|
||||
verticalAlign: 'bottom',
|
||||
offsetTop: 6,
|
||||
radius: 16,
|
||||
fill: 0xfe832d
|
||||
}
|
||||
})
|
||||
const button4 = new Button({
|
||||
x: 640,
|
||||
y: 110,
|
||||
label: 'Button',
|
||||
badge: {
|
||||
content: 'IWM',
|
||||
align: 'center',
|
||||
verticalAlign: 'bottom',
|
||||
offsetTop: 6,
|
||||
radius: 16,
|
||||
fill: 0xfe832d
|
||||
}
|
||||
})
|
||||
|
||||
const button5 = new Button({
|
||||
x: 740,
|
||||
y: 110,
|
||||
label: 'Button',
|
||||
badge: {
|
||||
content: '1',
|
||||
radius: 16,
|
||||
tooltip: 'One'
|
||||
}
|
||||
})
|
||||
const button5 = new Button({
|
||||
x: 740,
|
||||
y: 110,
|
||||
label: 'Button',
|
||||
badge: {
|
||||
content: '1',
|
||||
radius: 16,
|
||||
tooltip: 'One'
|
||||
}
|
||||
})
|
||||
|
||||
const button6 = new Button({
|
||||
x: 740,
|
||||
y: 180,
|
||||
label: 'Change Badge',
|
||||
action: () => {
|
||||
button5.badge.content = '2'
|
||||
}
|
||||
})
|
||||
const button6 = new Button({
|
||||
x: 740,
|
||||
y: 180,
|
||||
label: 'Change Badge',
|
||||
action: () => {
|
||||
button5.badge.content = '2'
|
||||
}
|
||||
})
|
||||
|
||||
let badge1 = new Badge({
|
||||
x: 60,
|
||||
y: 10,
|
||||
content: 'New'
|
||||
})
|
||||
let badge1 = new Badge({
|
||||
x: 60,
|
||||
y: 10,
|
||||
content: 'New'
|
||||
})
|
||||
|
||||
let badge2 = new Badge({
|
||||
content: '7',
|
||||
x: 160,
|
||||
y: 10,
|
||||
fill: 0x1078fc
|
||||
})
|
||||
let badge2 = new Badge({
|
||||
content: '7',
|
||||
x: 160,
|
||||
y: 10,
|
||||
fill: 0x1078fc
|
||||
})
|
||||
|
||||
let badge3 = new Badge({
|
||||
x: 170,
|
||||
y: 95,
|
||||
padding: 5,
|
||||
radius: 16,
|
||||
content: '142',
|
||||
fill: 0xfe9727
|
||||
})
|
||||
let badge3 = new Badge({
|
||||
x: 170,
|
||||
y: 95,
|
||||
padding: 5,
|
||||
radius: 16,
|
||||
content: '142',
|
||||
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
|
||||
let badge4 = new Badge({
|
||||
x: 300,
|
||||
y: 152,
|
||||
stroke: 0x5ec7f8,
|
||||
strokeWidth: 3,
|
||||
fillAlpha: .7,
|
||||
padding: 0,
|
||||
radius: 1,
|
||||
content: sprite1,
|
||||
tooltip: 'Earth in Space'
|
||||
})
|
||||
app.scene.addChild(badge4)
|
||||
})
|
||||
let texture1 = PIXI.Texture.fromVideo('./assets/badge-1.mp4')
|
||||
texture1.baseTexture.on('loaded', e => {
|
||||
let sprite1 = new PIXI.Sprite(texture1)
|
||||
sprite1.scale.set(0.05, 0.05)
|
||||
sprite1.alpha = 0.5
|
||||
let badge4 = new Badge({
|
||||
x: 300,
|
||||
y: 152,
|
||||
stroke: 0x5ec7f8,
|
||||
strokeWidth: 3,
|
||||
fillAlpha: 0.7,
|
||||
padding: 0,
|
||||
radius: 1,
|
||||
content: sprite1,
|
||||
tooltip: 'Earth in Space'
|
||||
})
|
||||
app.scene.addChild(badge4)
|
||||
})
|
||||
|
||||
app.scene.addChild(circle1, circle2)
|
||||
app.scene.addChild(button1, button2, button3, button4, button5, button6)
|
||||
app.scene.addChild(badge1, badge2, badge3)
|
||||
</script>
|
||||
</body>
|
||||
app.scene.addChild(circle1, circle2)
|
||||
app.scene.addChild(
|
||||
button1,
|
||||
button2,
|
||||
button3,
|
||||
button4,
|
||||
button5,
|
||||
button6
|
||||
)
|
||||
app.scene.addChild(badge1, badge2, badge3)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import Tooltip from './tooltip.js'
|
|||
|
||||
/**
|
||||
* Class that represents a PixiJS Badge.
|
||||
*
|
||||
*
|
||||
* @example
|
||||
* // Create the app
|
||||
* const app = new PIXIApp({
|
||||
|
|
@ -12,13 +12,13 @@ import Tooltip from './tooltip.js'
|
|||
* width: 900,
|
||||
* height: 250
|
||||
* }).setup().run()
|
||||
*
|
||||
*
|
||||
* // Add an DisplayObject to the app
|
||||
* const circle = new PIXI.Graphics()
|
||||
* circle.beginFill(0x5251a3)
|
||||
* circle.drawCircle(50, 50, 40)
|
||||
* app.scene.addChild(circle)
|
||||
*
|
||||
*
|
||||
* const badge1 = new Badge({
|
||||
* object: circle,
|
||||
* container: app.scene,
|
||||
|
|
@ -30,10 +30,9 @@ 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.
|
||||
*
|
||||
*
|
||||
* @constructor
|
||||
* @param {object} [opts] - An options object to specify to style and behaviour of the badge.
|
||||
* @param {number} [opts.minWidth=0] - The minimum width of the badge.
|
||||
|
|
@ -43,15 +42,18 @@ export default class Badge extends AbstractPopup {
|
|||
* to display.
|
||||
*/
|
||||
constructor(opts = {}) {
|
||||
|
||||
const theme = Theme.fromString(opts.theme)
|
||||
|
||||
opts = Object.assign({}, {
|
||||
minWidth: 0,
|
||||
minHeight: 0,
|
||||
padding: theme.padding / 2,
|
||||
tooltip: null
|
||||
}, opts)
|
||||
|
||||
opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
minWidth: 0,
|
||||
minHeight: 0,
|
||||
padding: theme.padding / 2,
|
||||
tooltip: null
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
super(opts)
|
||||
|
||||
|
|
@ -65,7 +67,7 @@ export default class Badge extends AbstractPopup {
|
|||
//-----------------
|
||||
this.layout()
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Creates children and instantiates everything.
|
||||
*
|
||||
|
|
@ -74,35 +76,44 @@ 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)
|
||||
}
|
||||
}
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Should be called to refresh the layout of the badge. Can be used after resizing.
|
||||
*
|
||||
*
|
||||
* @override
|
||||
* @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,22 +1,25 @@
|
|||
// rollup.config.js (building more than one bundle)
|
||||
export default [{
|
||||
input: './lib/bundle.js',
|
||||
output: {
|
||||
file: './dist/iwmlib.js',
|
||||
format: 'iife',
|
||||
sourcemap: false
|
||||
export default [
|
||||
{
|
||||
input: './lib/bundle.js',
|
||||
output: {
|
||||
file: './dist/iwmlib.js',
|
||||
format: 'iife',
|
||||
sourcemap: false
|
||||
},
|
||||
watch: {
|
||||
clearScreen: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
clearScreen: false
|
||||
{
|
||||
input: './lib/pixi/bundle.js',
|
||||
output: {
|
||||
file: './dist/iwmlib.pixi.js',
|
||||
format: 'iife',
|
||||
sourcemap: false
|
||||
},
|
||||
watch: {
|
||||
clearScreen: false
|
||||
}
|
||||
}
|
||||
}, {
|
||||
input: './lib/pixi/bundle.js',
|
||||
output: {
|
||||
file: './dist/iwmlib.pixi.js',
|
||||
format: 'iife',
|
||||
sourcemap: false
|
||||
},
|
||||
watch: {
|
||||
clearScreen: false
|
||||
}
|
||||
}]
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in New Issue