Prettified badge.js.
This commit is contained in:
parent
5704beaad4
commit
7744b92771
@ -1,12 +1,15 @@
|
|||||||
<!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>
|
||||||
@ -19,7 +22,8 @@
|
|||||||
<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>
|
||||||
|
<br />
|
||||||
<canvas id="canvas" class="interactive"></canvas>
|
<canvas id="canvas" class="interactive"></canvas>
|
||||||
<p>
|
<p>
|
||||||
What you should see: Badges, badges, badges...
|
What you should see: Badges, badges, badges...
|
||||||
@ -29,7 +33,9 @@ const app = new PIXIApp({
|
|||||||
view: canvas,
|
view: canvas,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 250
|
height: 250
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
const circle1 = new PIXI.Graphics()
|
const circle1 = new PIXI.Graphics()
|
||||||
circle1.beginFill(0x5251a3)
|
circle1.beginFill(0x5251a3)
|
||||||
@ -114,20 +120,22 @@ let badge3 = new Badge({
|
|||||||
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,
|
||||||
@ -137,7 +145,15 @@ texture1.baseTexture.on('loaded', e => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
app.scene.addChild(circle1, circle2)
|
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)
|
app.scene.addChild(badge1, badge2, badge3)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</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,
|
minWidth: 0,
|
||||||
minHeight: 0,
|
minHeight: 0,
|
||||||
padding: theme.padding / 2,
|
padding: theme.padding / 2,
|
||||||
tooltip: null
|
tooltip: null
|
||||||
}, opts)
|
},
|
||||||
|
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,5 +1,6 @@
|
|||||||
// rollup.config.js (building more than one bundle)
|
// rollup.config.js (building more than one bundle)
|
||||||
export default [{
|
export default [
|
||||||
|
{
|
||||||
input: './lib/bundle.js',
|
input: './lib/bundle.js',
|
||||||
output: {
|
output: {
|
||||||
file: './dist/iwmlib.js',
|
file: './dist/iwmlib.js',
|
||||||
@ -9,7 +10,8 @@ export default [{
|
|||||||
watch: {
|
watch: {
|
||||||
clearScreen: false
|
clearScreen: false
|
||||||
}
|
}
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
input: './lib/pixi/bundle.js',
|
input: './lib/pixi/bundle.js',
|
||||||
output: {
|
output: {
|
||||||
file: './dist/iwmlib.pixi.js',
|
file: './dist/iwmlib.pixi.js',
|
||||||
@ -19,4 +21,5 @@ export default [{
|
|||||||
watch: {
|
watch: {
|
||||||
clearScreen: false
|
clearScreen: false
|
||||||
}
|
}
|
||||||
}]
|
}
|
||||||
|
]
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user