Prettified badge.js.
This commit is contained in:
parent
5704beaad4
commit
7744b92771
@ -1,143 +1,159 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<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>
|
<title>PIXI Badge</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
<link
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
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="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>Badge</h1>
|
<h1>Badge</h1>
|
||||||
<p>
|
<p>
|
||||||
Small and adaptive tag for adding context to just about any content.
|
Small and adaptive tag for adding context to just about any content.
|
||||||
</p>
|
</p>
|
||||||
<p>Let's look at some badge examples:</p><br />
|
<p>Let's look at some badge examples:</p>
|
||||||
<canvas id="canvas" class="interactive"></canvas>
|
<br />
|
||||||
<p>
|
<canvas id="canvas" class="interactive"></canvas>
|
||||||
What you should see: Badges, badges, badges...
|
<p>
|
||||||
</p>
|
What you should see: Badges, badges, badges...
|
||||||
<script class="doctest">
|
</p>
|
||||||
const app = new PIXIApp({
|
<script class="doctest">
|
||||||
view: canvas,
|
const app = new PIXIApp({
|
||||||
width: 900,
|
view: canvas,
|
||||||
height: 250
|
width: 900,
|
||||||
}).setup().run()
|
height: 250
|
||||||
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
const circle1 = new PIXI.Graphics()
|
const circle1 = new PIXI.Graphics()
|
||||||
circle1.beginFill(0x5251a3)
|
circle1.beginFill(0x5251a3)
|
||||||
circle1.drawCircle(50, 50, 40)
|
circle1.drawCircle(50, 50, 40)
|
||||||
|
|
||||||
const circle2 = new PIXI.Graphics()
|
const circle2 = new PIXI.Graphics()
|
||||||
circle2.beginFill(0x8ca351)
|
circle2.beginFill(0x8ca351)
|
||||||
circle2.drawCircle(150, 50, 40)
|
circle2.drawCircle(150, 50, 40)
|
||||||
|
|
||||||
const button1 = new Button({
|
const button1 = new Button({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 110,
|
y: 110,
|
||||||
label: 'Button with Badge'
|
label: 'Button with Badge'
|
||||||
})
|
})
|
||||||
|
|
||||||
const button2 = new Button({
|
const button2 = new Button({
|
||||||
x: 230,
|
x: 230,
|
||||||
y: 110,
|
y: 110,
|
||||||
label: 'Button with Video-Badge'
|
label: 'Button with Video-Badge'
|
||||||
})
|
})
|
||||||
|
|
||||||
const button3 = new Button({
|
const button3 = new Button({
|
||||||
x: 480,
|
x: 480,
|
||||||
y: 110,
|
y: 110,
|
||||||
label: 'Button and ',
|
label: 'Button and ',
|
||||||
badge: 'Badge'
|
badge: 'Badge'
|
||||||
})
|
})
|
||||||
|
|
||||||
const button4 = new Button({
|
const button4 = new Button({
|
||||||
x: 640,
|
x: 640,
|
||||||
y: 110,
|
y: 110,
|
||||||
label: 'Button',
|
label: 'Button',
|
||||||
badge: {
|
badge: {
|
||||||
content: 'IWM',
|
content: 'IWM',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
verticalAlign: 'bottom',
|
verticalAlign: 'bottom',
|
||||||
offsetTop: 6,
|
offsetTop: 6,
|
||||||
radius: 16,
|
radius: 16,
|
||||||
fill: 0xfe832d
|
fill: 0xfe832d
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const button5 = new Button({
|
const button5 = new Button({
|
||||||
x: 740,
|
x: 740,
|
||||||
y: 110,
|
y: 110,
|
||||||
label: 'Button',
|
label: 'Button',
|
||||||
badge: {
|
badge: {
|
||||||
content: '1',
|
content: '1',
|
||||||
radius: 16,
|
radius: 16,
|
||||||
tooltip: 'One'
|
tooltip: 'One'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const button6 = new Button({
|
const button6 = new Button({
|
||||||
x: 740,
|
x: 740,
|
||||||
y: 180,
|
y: 180,
|
||||||
label: 'Change Badge',
|
label: 'Change Badge',
|
||||||
action: () => {
|
action: () => {
|
||||||
button5.badge.content = '2'
|
button5.badge.content = '2'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let badge1 = new Badge({
|
let badge1 = new Badge({
|
||||||
x: 60,
|
x: 60,
|
||||||
y: 10,
|
y: 10,
|
||||||
content: 'New'
|
content: 'New'
|
||||||
})
|
})
|
||||||
|
|
||||||
let badge2 = new Badge({
|
let badge2 = new Badge({
|
||||||
content: '7',
|
content: '7',
|
||||||
x: 160,
|
x: 160,
|
||||||
y: 10,
|
y: 10,
|
||||||
fill: 0x1078fc
|
fill: 0x1078fc
|
||||||
})
|
})
|
||||||
|
|
||||||
let badge3 = new Badge({
|
let badge3 = new Badge({
|
||||||
x: 170,
|
x: 170,
|
||||||
y: 95,
|
y: 95,
|
||||||
padding: 5,
|
padding: 5,
|
||||||
radius: 16,
|
radius: 16,
|
||||||
content: '142',
|
content: '142',
|
||||||
fill: 0xfe9727
|
fill: 0xfe9727
|
||||||
})
|
})
|
||||||
|
|
||||||
let sprite1 = new PIXI.Sprite(PIXI.Texture.fromVideo('./assets/badge-1.mp4'))
|
let sprite1 = new PIXI.Sprite(
|
||||||
sprite1.scale.set(.05, .05)
|
PIXI.Texture.fromVideo('./assets/badge-1.mp4')
|
||||||
|
)
|
||||||
|
sprite1.scale.set(0.05, 0.05)
|
||||||
|
|
||||||
let texture1 = PIXI.Texture.fromVideo('./assets/badge-1.mp4')
|
let texture1 = PIXI.Texture.fromVideo('./assets/badge-1.mp4')
|
||||||
texture1.baseTexture.on('loaded', e => {
|
texture1.baseTexture.on('loaded', e => {
|
||||||
let sprite1 = new PIXI.Sprite(texture1)
|
let sprite1 = new PIXI.Sprite(texture1)
|
||||||
sprite1.scale.set(.05, .05)
|
sprite1.scale.set(0.05, 0.05)
|
||||||
sprite1.alpha = .5
|
sprite1.alpha = 0.5
|
||||||
let badge4 = new Badge({
|
let badge4 = new Badge({
|
||||||
x: 300,
|
x: 300,
|
||||||
y: 152,
|
y: 152,
|
||||||
stroke: 0x5ec7f8,
|
stroke: 0x5ec7f8,
|
||||||
strokeWidth: 3,
|
strokeWidth: 3,
|
||||||
fillAlpha: .7,
|
fillAlpha: 0.7,
|
||||||
padding: 0,
|
padding: 0,
|
||||||
radius: 1,
|
radius: 1,
|
||||||
content: sprite1,
|
content: sprite1,
|
||||||
tooltip: 'Earth in Space'
|
tooltip: 'Earth in Space'
|
||||||
})
|
})
|
||||||
app.scene.addChild(badge4)
|
app.scene.addChild(badge4)
|
||||||
})
|
})
|
||||||
|
|
||||||
app.scene.addChild(circle1, circle2)
|
app.scene.addChild(circle1, circle2)
|
||||||
app.scene.addChild(button1, button2, button3, button4, button5, button6)
|
app.scene.addChild(
|
||||||
app.scene.addChild(badge1, badge2, badge3)
|
button1,
|
||||||
</script>
|
button2,
|
||||||
</body>
|
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}
|
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/badge.html|DocTest}
|
||||||
*/
|
*/
|
||||||
export default class Badge extends AbstractPopup {
|
export default class Badge extends AbstractPopup {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates an instance of a Badge.
|
* Creates an instance of a Badge.
|
||||||
*
|
*
|
||||||
@ -43,15 +42,18 @@ export default class Badge extends AbstractPopup {
|
|||||||
* to display.
|
* to display.
|
||||||
*/
|
*/
|
||||||
constructor(opts = {}) {
|
constructor(opts = {}) {
|
||||||
|
|
||||||
const theme = Theme.fromString(opts.theme)
|
const theme = Theme.fromString(opts.theme)
|
||||||
|
|
||||||
opts = Object.assign({}, {
|
opts = Object.assign(
|
||||||
minWidth: 0,
|
{},
|
||||||
minHeight: 0,
|
{
|
||||||
padding: theme.padding / 2,
|
minWidth: 0,
|
||||||
tooltip: null
|
minHeight: 0,
|
||||||
}, opts)
|
padding: theme.padding / 2,
|
||||||
|
tooltip: null
|
||||||
|
},
|
||||||
|
opts
|
||||||
|
)
|
||||||
|
|
||||||
super(opts)
|
super(opts)
|
||||||
|
|
||||||
@ -74,16 +76,22 @@ export default class Badge extends AbstractPopup {
|
|||||||
* @return {Badge} A reference to the badge for chaining.
|
* @return {Badge} A reference to the badge for chaining.
|
||||||
*/
|
*/
|
||||||
setup() {
|
setup() {
|
||||||
|
|
||||||
super.setup()
|
super.setup()
|
||||||
|
|
||||||
// tooltip
|
// tooltip
|
||||||
//-----------------
|
//-----------------
|
||||||
if (this.opts.tooltip) {
|
if (this.opts.tooltip) {
|
||||||
if (typeof this.opts.tooltip === 'string') {
|
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 {
|
} 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)
|
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.
|
* @return {Badge} A reference to the badge for chaining.
|
||||||
*/
|
*/
|
||||||
layout() {
|
layout() {
|
||||||
|
|
||||||
super.layout()
|
super.layout()
|
||||||
|
|
||||||
this.content.x = this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2
|
this.content.x =
|
||||||
this.content.y = this.height / 2 - this.content.height / 2 - this.opts.strokeWidth / 2
|
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
|
return this
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,22 +1,25 @@
|
|||||||
// rollup.config.js (building more than one bundle)
|
// rollup.config.js (building more than one bundle)
|
||||||
export default [{
|
export default [
|
||||||
input: './lib/bundle.js',
|
{
|
||||||
output: {
|
input: './lib/bundle.js',
|
||||||
file: './dist/iwmlib.js',
|
output: {
|
||||||
format: 'iife',
|
file: './dist/iwmlib.js',
|
||||||
sourcemap: false
|
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
Block a user