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.

src/Component/Native/BackgroundColor/body.html

@@ -0,0 +1,4 @@
+<div class="bg-color-container">
+  <div class="bg-color-placeholder">
+  </div>
+</div>

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

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);

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);

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);
 

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;
+}