@onenexus/polymorph


> Style Synergy modules/BEM DOM elements using JavaScript

* Overview
* Installation & Setup
* Synergy Modules/Components
* polymorph())
* API
* Use With sQuery
* Use With Lucid

Overview

Polymorph is used for styling DOM elements that follow the Synergy naming convention.

> Learn how to integrate with React components

> View a live demo using React + Polymorph

###### Example Module Markup

``html


###### Style all accordion modules

`jsx
document.querySelectorAll('.accordion').forEach(element => {
polymorph(element, {
'position': 'relative'
});
});
`

###### Style panel components

> Learn more about Synergy Components

`jsx
document.querySelectorAll('.accordion').forEach(element => {
polymorph(element, {
panel: {
'display': 'block'
}
});
});
`

###### Style panel components with active modifier

`jsx
document.querySelectorAll('.accordion').forEach(element => {
polymorph(element, {
panel: {
'color': 'white',

'modifier(active)': {
'color': 'blue'
}
}
}
});
`

###### Alternatively

`jsx
document.querySelectorAll('.accordion').forEach(element => {
polymorph(element, {
panel: panel => ({
'color': panel.matches('.accordion_panel-active') ? 'blue' : 'white'
})
}
});
`

###### Using In-Built modifier Method

> This ensures no class names are hard coded

> Learn more about the modifier method

`jsx
document.querySelectorAll('.accordion').forEach(element => {
polymorph(element, {
panel: panel => ({
'color': polymorph.modifier(panel, 'active') ? 'blue' : 'white'
})
}
});
`

###### Using sQuery (Recommended)

> Learn more about sQuery

`jsx
sQuery('accordion', element => {
polymorph(element, {
panel: panel => ({
'color': panel.modifier('active') ? 'blue' : 'white'
})
}
});
`

###### Style title components when parent panel component has active modifier

`jsx
document.querySelectorAll('.accordion').forEach(element => {
polymorph(element, {
panel: {
'modifier(active)': {
title: {
'color': 'red'
}
}
},
title: {
'color': 'blue'
}
}
});
`

###### Alternatively

`jsx
document.querySelectorAll('.accordion').forEach(element => {
polymorph(element, {
title: title => ({
'color': title.closest('.accordion_panel-active') ? 'red' : 'blue'
})
}
});
`

###### Using sQuery

> Learn more about sQuery

`jsx
sQuery('accordion', element => {
polymorph(element, {
title: title => ({
'color': title.parent('panel').is('active') ? 'red' : 'blue'
})
}
});
`

Installation & Setup

`
npm install --save @onenexus/polymorph
`

`jsx
import 'polymorph' from '@onenexus/polymorph';

polymorph(document.getElementById('someElement'), someConfigurationObject);
`

> Using BEM? Checkout the Working With BEM page

API

* Polymorph.modifier()
* Element.repaint()

$3

> Determine if an HTML element has the specified modifier

`jsx
polymorph.modifier(element, modifier)
`

##### Example

`html


`jsx
document.querySelectorAll('.accordion').forEach(element => {
polymorph(element, {
panel: panel => ({
'color': polymorph.modifier(panel, 'active') ? 'blue' : 'white'
})
}
});
`

###### Result

`html


`jsx
element.repaint()
`

> This method is attached directly to the DOM element after the initial polymorph call

This is useful for updating the styles after an event that modifies the DOM, such as a click event which adds an active modifier to an element. In order to repaint the element, you should call the repaint() method in the same place you handle the event.

###### Example

`html


`jsx
polymorph(document.getElementById('alpha'), {
panel: {
'background': 'red';

'modifier(active)': {
'background': 'blue'
}
}
});

// #alpha element and all targeted child components
// will now have a repaint() method
`

`jsx
document.querySelectorAll('.accordion').forEach(accordion => {
accordion.querySelectorAll('.accordion_panel').forEach(panel => {
panel.querySelector('.accordion_title').addEventListener('click', () => {
// do event handling...
panel.classList.toggle('accordion_panel-active');

// repaint the accordion panel
panel.repaint();
});
}
});
`

###### Using sQuery

`jsx
sQuery('accordion').getComponents('panel').forEach(PANEL => {
sQuery(PANEL).getComponent('title').addEventListener('click', () => {
// the repaint method is called automatically
// when using the sQuery API
sQuery(PANEL).toggleModifier('visible');
});
});
`

###### Using Lucid

`jsx
// By passing a styles function/object to the styles prop of ,
// repaint() will be called on the approprate rendered DOM elements
// in the componentDidUpdate lifecycle method
...
`

Use With sQuery

> sQuery is a JavaScript library for interacting with Synergy modules

sQuery is perfect for interacting with Polymorph, and isn't included by default to keep bundle size down (as it isn't strictly required for functionality).

Once installed, you can use sQuery to style your modules and components much more easily using the provided API.

###### Without sQuery

`jsx
document.querySelectorAll('.accordion').forEach(element => {
polymorph(element, {
title: title => ({
'color': title.closest('.accordion_panel-active') ? 'red' : 'blue'
})
}
});
`

###### With sQuery

`jsx
sQuery('accordion', element => polymorph(element, {
title: title => ({
'color': title.parent('panel').is('active') ? 'red' : 'blue'
})
}));
`

Use With Lucid

> Lucid is a set of higher-order React components for rendering Synergy modules

Lucid and Polymorph were built in tandem as part of the Synergy framework, so go hand-in-hand together. If you are using Lucid, the easiest way to use Polymorph as the styleParser function is to attach it to the window.Synergy.styleParser property:

`js
import { Module, Component } from '@onenexus/lucid';
import Polymorph from '@onenexus/polymorph';

window.Synergy = {
styleParser: Polymorph
}

// start using Lucid components (Module, Component)...
``

> Learn more about using Polymorph with Lucid

---