From 7744b92771ee6c9bc5237cfcff824554a0168e4a Mon Sep 17 00:00:00 2001 From: Sebastian Kupke Date: Thu, 18 Jul 2019 08:59:39 +0200 Subject: [PATCH] Prettified badge.js. --- lib/pixi/badge.html | 264 +++++++++++++++++++++++--------------------- lib/pixi/badge.js | 55 +++++---- rollup.config.js | 41 +++---- 3 files changed, 195 insertions(+), 165 deletions(-) diff --git a/lib/pixi/badge.html b/lib/pixi/badge.html index b098cab..90b409c 100644 --- a/lib/pixi/badge.html +++ b/lib/pixi/badge.html @@ -1,143 +1,159 @@ - + - - + + - PIXI Badge + PIXI Badge - - + + - - + + - - - - -

Badge

-

- Small and adaptive tag for adding context to just about any content. -

-

Let's look at some badge examples:


- -

- What you should see: Badges, badges, badges... -

- + + + +

Badge

+

+ Small and adaptive tag for adding context to just about any content. +

+

Let's look at some badge examples:

+
+ +

+ What you should see: Badges, badges, badges... +

+ - + app.scene.addChild(circle1, circle2) + app.scene.addChild( + button1, + button2, + button3, + button4, + button5, + button6 + ) + app.scene.addChild(badge1, badge2, badge3) + + + diff --git a/lib/pixi/badge.js b/lib/pixi/badge.js index 8b82fd3..99dd20d 100644 --- a/lib/pixi/badge.js +++ b/lib/pixi/badge.js @@ -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 } diff --git a/rollup.config.js b/rollup.config.js index 3ca5fdf..153457b 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -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 - } -}] +]