-
-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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.
- Loading branch information
1 parent
bc4e7dd
commit 8ec1ab0
Showing
6 changed files
with
89 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
<div class="bg-color-container"> | ||
<div class="bg-color-placeholder"> | ||
</div> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |