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

Prettified badge.js.

Browse Source
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

264
lib/pixi/badge.html
View File

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

55
lib/pixi/badge.js
View File

@ -4,7 +4,7 @@ import Tooltip from './tooltip.js'
/** /**
* Class that represents a PixiJS Badge. * Class that represents a PixiJS Badge.
* *
* @example * @example
* // Create the app * // Create the app
* const app = new PIXIApp({ * const app = new PIXIApp({
@ -12,13 +12,13 @@ import Tooltip from './tooltip.js'
* width: 900, * width: 900,
* height: 250 * height: 250
* }).setup().run() * }).setup().run()
* *
* // Add an DisplayObject to the app * // Add an DisplayObject to the app
* const circle = new PIXI.Graphics() * const circle = new PIXI.Graphics()
* circle.beginFill(0x5251a3) * circle.beginFill(0x5251a3)
* circle.drawCircle(50, 50, 40) * circle.drawCircle(50, 50, 40)
* app.scene.addChild(circle) * app.scene.addChild(circle)
* *
* const badge1 = new Badge({ * const badge1 = new Badge({
* object: circle, * object: circle,
* container: app.scene, * 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} * @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.
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the badge. * @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. * @param {number} [opts.minWidth=0] - The minimum width of the 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)
@ -65,7 +67,7 @@ export default class Badge extends AbstractPopup {
//----------------- //-----------------
this.layout() this.layout()
} }
/** /**
* Creates children and instantiates everything. * Creates children and instantiates everything.
* *
@ -74,35 +76,44 @@ 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)
} }
} }
return this return this
} }
/** /**
* Should be called to refresh the layout of the badge. Can be used after resizing. * Should be called to refresh the layout of the badge. Can be used after resizing.
* *
* @override * @override
* @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
} }

41
rollup.config.js
View File

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