IWMBrowser
/
iwmlib
5
1
Fork 0
Code Issues 2 Pull Requests 0 Releases 14 Wiki Activity
Browse Source

Prettified badge.js.

master
Sebastian Kupke 1 year ago
parent
5704beaad4
commit
7744b92771
3 changed files with 213 additions and 183 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +158
    -142
      lib/pixi/badge.html
  2. +33
    -22
      lib/pixi/badge.js
  3. +22
    -19
      rollup.config.js

+ 158
- 142
lib/pixi/badge.html View File

@ -1,143 +1,159 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<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()
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 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 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 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'
}
})
let badge1 = new Badge({
x: 60,
y: 10,
content: 'New'
})
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 sprite1 = new PIXI.Sprite(PIXI.Texture.fromVideo('./assets/badge-1.mp4'))
sprite1.scale.set(.05, .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)
})
app.scene.addChild(circle1, circle2)
app.scene.addChild(button1, button2, button3, button4, button5, button6)
app.scene.addChild(badge1, badge2, badge3)
</script>
</body>
<head>
<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" />
<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()
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 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 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 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'
}
})
let badge1 = new Badge({
x: 60,
y: 10,
content: 'New'
})
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 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(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>
</html>

+ 33
- 22
lib/pixi/badge.js View File

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

+ 22
- 19
rollup.config.js View File

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

Write Preview
Loading…
Cancel
Save