Appearance
Changing Content with Parameters
In this example the Content shown for each section is influenced by data attributes on various levels of their DOM ancestry.
When an element instigates a change in Content, all data attributes prefixed with data-pd- are sent as Content Paramters. Plinthos then scans upwards through the element's entire ancestry and adds their data-pd- prefixed attributes. In this process, data attributes with the same name will prefer the value of the nearest ancestor to the instigating element.
Section 1: Echo
In the first example, the section instigates the Content change and the body, which is an ancestor of the section, adds its data-pd-x-focal-point value to the Content Parameters.
html
<body data-pd-x-focal-point="0.4">
<section data-pd-show="echo@background">
<!-- ... -->
</section>
<!-- div -->
</body>js
{
xFocalPoint: 0.4
}Section 2: Red
In the second example, the section instigates the Content change but the sections is nested inside a div which adds its data-pd- prefixed data attributes. Finally, the body adds its data-pd-x-focal-point value to the Content Parameters.
html
<body data-pd-x-focal-point="0.4">
<!-- section 1 -->
<div
data-pd-plinth-color="#f54"
data-pd-horizon="#100"
data-pd-nadir="#410"
data-pd-bloom-threshold="0.2"
>
<!-- ... -->
<section
data-pd-show="echo@background"
>
<!-- ... -->
</section>
<!-- section 3 -->
</div>
</body>js
{
plinthColor: '#f54',
horizon: '#100',
nadir: '#410',
bloomThreshold: 0.2,
xFocalPoint: 0.4
}Section 3: Cube
In the third example, the section instigates the Content change with key cube. The Cube shot uses many of the same Shot Parameters as the Echo shot so background colors remain the same. The section is nested inside a div and so the div's data-pd- prefixed attributes are added to the Shot Parameters except for data-pd-plinth-color because the section over-rides this. Finally, the body attempts to add its data-pd-x-focal-point value to the Shot Paramters but the attributes on the section with the same name over-rides the body's value.'
html
<body data-pd-x-focal-point="0.4">
<!-- section 1 -->
<div
data-pd-plinth-color="#f54"
data-pd-horizon="#100"
data-pd-nadir="#410"
data-pd-bloom-threshold="0.2"
>
<!-- section 2 -->
<section
data-pd-show="cube@background"
data-pd-plinth-color="#f85"
data-pd-x-focal-point="0.6"
>
<!-- ... -->
</section>
</div>
</body>js
{
plinthColor: '#f85',
xFocalPoint: 0.6,
horizon: '#100',
nadir: '#410',
bloomThreshold: 0.2
}