From 8ec1ab0606e01e09a7a4c6df34090bc6c9ab3f05 Mon Sep 17 00:00:00 2001 From: David Thompson Date: Sun, 30 Oct 2016 20:05:08 -0400 Subject: [PATCH] Update the background color to the new API. Now `BackgroundColor` provides a `newInstance()` method that takes publicAPI and model objects, making it a good minimal example. It also demonstrates how to import HTML fragments and CSS style from external files. See the `ToggleControl` and `Workbench` examples for usage. --- .../Native/BackgroundColor/body.html | 4 + src/Component/Native/BackgroundColor/index.js | 90 +++++++++++++------ .../Native/Composite/example/index.js | 10 +-- .../Native/ToggleControl/example/index.js | 4 +- .../Native/Workbench/example/index.js | 10 +-- style/ComponentNative/BackgroundColor.mcss | 11 +++ 6 files changed, 89 insertions(+), 40 deletions(-) create mode 100644 src/Component/Native/BackgroundColor/body.html create mode 100644 style/ComponentNative/BackgroundColor.mcss diff --git a/src/Component/Native/BackgroundColor/body.html b/src/Component/Native/BackgroundColor/body.html new file mode 100644 index 0000000000..90beb5272c --- /dev/null +++ b/src/Component/Native/BackgroundColor/body.html @@ -0,0 +1,4 @@ +
+
+
+
diff --git a/src/Component/Native/BackgroundColor/index.js b/src/Component/Native/BackgroundColor/index.js index fbbc663472..d4d29bccb6 100644 --- a/src/Component/Native/BackgroundColor/index.js +++ b/src/Component/Native/BackgroundColor/index.js @@ -1,36 +1,70 @@ -/* eslint-disable class-methods-use-this */ - -export default class NativeBackgroundColorComponent { - constructor(color, el) { - this.color = color; - this.setContainer(el); - this.previousColor = ''; - } - - /* - * We must not mess with the position properties of the style on the container - * we are given, or we will break the workbench layout functionality! Setting the - * background color is fine, however, as long as we don't use the setAttribute() - * approach to this. Also, we could always create our own container - * within the element we are given, and we can do whatever we want with that. - */ - - setContainer(el) { - if (this.el) { - this.el.style['background-color'] = this.previousColor; +import style from 'PVWStyle/ComponentNative/BackgroundColor.mcss'; +import htmlContent from './body.html'; +import CompositeClosureHelper from '../../../Common/Core/CompositeClosureHelper'; + +function backgroundColorComponent(publicAPI, model) { + publicAPI.resize = () => { + // When using this component as a template, respond + // to resize events by updating the DOM to match. + }; + + publicAPI.setContainer = (el) => { + if (model.container) { + while (model.container.firstChild) { + model.container.removeChild(model.container.firstChild); + } } - this.el = el; + model.container = el; - if (el) { - this.previousColor = this.el.style['background-color']; - this.el.style['background-color'] = this.color; + if (model.container) { + // Create placeholder + model.container.innerHTML = htmlContent; + + // Apply style + const colorEle = model.container.querySelector('.bg-color-container'); + colorEle.classList.add(style.bgColorContainer); + colorEle.style.backgroundColor = model.color; } - } + }; + + publicAPI.setColor = (colorSpec) => { + let color = colorSpec; + if (typeof colorSpec !== 'string' || colorSpec === '') { + color = 'inherit'; + } + model.color = color; + if (model.container) { + model.container.querySelector('.bg-color-container').style.backgroundColor = model.color; + } + }; +} - render() {} +// ---------------------------------------------------------------------------- +// Object factory +// ---------------------------------------------------------------------------- - resize() {} +const DEFAULT_VALUES = { + container: null, + color: 'inherit', +}; - destroy() {} +// ---------------------------------------------------------------------------- + +export function extend(publicAPI, model, initialValues = {}) { + Object.assign(model, DEFAULT_VALUES, initialValues); + + CompositeClosureHelper.destroy(publicAPI, model); + CompositeClosureHelper.isA(publicAPI, model, 'VizComponent'); + CompositeClosureHelper.get(publicAPI, model, ['color', 'container']); + + backgroundColorComponent(publicAPI, model); } + +// ---------------------------------------------------------------------------- + +export const newInstance = CompositeClosureHelper.newInstance(extend); + +// ---------------------------------------------------------------------------- + +export default { newInstance, extend }; diff --git a/src/Component/Native/Composite/example/index.js b/src/Component/Native/Composite/example/index.js index 933041642c..0da0296e59 100644 --- a/src/Component/Native/Composite/example/index.js +++ b/src/Component/Native/Composite/example/index.js @@ -1,5 +1,5 @@ import CompositeComponent from '..'; -import BGColorComponent from '../../BackgroundColor'; +import BackgroundColor from '../../BackgroundColor'; // Load CSS require('normalize.css'); @@ -10,10 +10,10 @@ container.style.width = '100%'; container.style.height = '600px'; const composite = new CompositeComponent(); -const green = new BGColorComponent('green'); -const red = new BGColorComponent('red'); -const blue = new BGColorComponent('blue'); -const pink = new BGColorComponent('pink'); +const green = BackgroundColor.newInstance({ color:'green' }); +const red = BackgroundColor.newInstance({ color:'red' }); +const blue = BackgroundColor.newInstance({ color:'blue' }); +const pink = BackgroundColor.newInstance({ color:'pink' }); composite.addViewport(green); composite.addViewport(red); diff --git a/src/Component/Native/ToggleControl/example/index.js b/src/Component/Native/ToggleControl/example/index.js index 7db111439f..cd1e506657 100644 --- a/src/Component/Native/ToggleControl/example/index.js +++ b/src/Component/Native/ToggleControl/example/index.js @@ -7,8 +7,8 @@ import 'normalize.css'; const container = document.querySelector('.content'); container.style.height = '100vh'; -const green = new BGColorComponent('green'); -const red = new BGColorComponent('red'); +const green = BGColorComponent.newInstance({ color:'green' }); +const red = BGColorComponent.newInstance({ color:'red' }); const toggleView = new ToggleControlComponent(green, red); toggleView.setContainer(container); diff --git a/src/Component/Native/Workbench/example/index.js b/src/Component/Native/Workbench/example/index.js index ad52eb052f..055de01a40 100644 --- a/src/Component/Native/Workbench/example/index.js +++ b/src/Component/Native/Workbench/example/index.js @@ -15,11 +15,11 @@ const container = document.querySelector('.content'); container.style.height = '100vh'; container.style.width = '100vw'; -const green = new BGColor('green'); -const red = new BGColor('red'); -const blue = new BGColor('blue'); -const pink = new BGColor('pink'); -const gray = new BGColor('gray'); +const green = BGColor.newInstance({ color:'green' }); +const red = BGColor.newInstance({ color:'red' }); +const blue = BGColor.newInstance({ color:'blue' }); +const pink = BGColor.newInstance({ color:'pink' }); +const gray = BGColor.newInstance({ color:'gray' }); // const toggleView = new ToggleControl(green, red); diff --git a/style/ComponentNative/BackgroundColor.mcss b/style/ComponentNative/BackgroundColor.mcss new file mode 100644 index 0000000000..e78a7c5d5e --- /dev/null +++ b/style/ComponentNative/BackgroundColor.mcss @@ -0,0 +1,11 @@ +.bgColorContainer { + border-radius: 15px; + font-family: "Optima", "Linux Biolinum", "URW Classico", sans; + position: absolute; + top: 5px; + right: 5px; + bottom: 5px; + left: 5px; + pointer-events: none; + overflow: hidden; +}