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

Prettified badge.js.

This commit is contained in:
Sebastian Kupke 2019-07-18 08:59:39 +02:00
parent 5704beaad4
commit 7744b92771
3 changed files with 195 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
lib/pixi/badge.html
View File

@ -1,64 +1,70 @@
<!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>
<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...
</p> </p>
<script class="doctest"> <script class="doctest">
const app = new PIXIApp({ 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)
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',
@ -70,9 +76,9 @@ const button4 = new Button({
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',
@ -81,63 +87,73 @@ const button5 = new Button({
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,
button2,
button3,
button4,
button5,
button6
)
app.scene.addChild(badge1, badge2, badge3)
</script> </script>
</body> </body>
</html>

31
lib/pixi/badge.js
View File

@ -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
} }

9
rollup.config.js
View File

@ -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
} }
}] }
]