fix(create): add create method for post-initialisation

README.md

@@ -28,12 +28,25 @@ import 'custom-properties-parallax';
 
 ## Usage
 
-* Add `data-cpp` attributes to each of the elements that require a parallax effect
+* Add `data-cpp` attributes to each of the elements that require a parallax effect on initialisation
 * Declare any of the following custom properties in the `:root` pseudo-class to override library defaults:
 
-| Name             | Type   | Default  |
-| ---------------- | ------ | -------- |
-| `--cpp-modifier` | Unit   | 0.625rem |
-| `--cpp-speed`    | Number | 0.5      |
+  | Name             | Type   | Default  |
+  | ---------------- | ------ | -------- |
+  | `--cpp-modifier` | Unit   | 0.625rem |
+  | `--cpp-speed`    | Number | 0.5      |
 
-* For further control, leverage the cascade by declaring any of the above custom properties within the CSS selectors of the target elements
+* For individual control, leverage the cascade by declaring any of the above custom properties within the CSS selectors of the target elements. For example:
+
+  ```css
+  h1 {
+    --cpp-speed: 1;
+  }
+  ```
+
+* Use the `create` method to apply the parallax effect to an element after initialisation. For example:
+
+  ```js
+  const h1 = document.querySelector('h1');
+  CustomPropertiesParallax.create(h1);
+  ```

src/index.js

@@ -3,7 +3,9 @@
  * @author Simon Finney <[email protected]>
  */
 
-import parallax from './parallax';
+import { create, init } from './parallax';
 
 // Runs the `parallax` method when the DOM content has loaded.
-document.addEventListener('DOMContentLoaded', parallax);
+document.addEventListener('DOMContentLoaded', init);
+
+export { create };

src/parallax/constants.js

@@ -3,17 +3,17 @@
  * @author Simon Finney <[email protected]>
  */
 
+const DEFAULT_VALUES = {
+  MODIFIER: '.0625rem',
+  SPEED: 0.5,
+};
+
 const NAMESPACE = 'cpp';
 
-export default {
-  CUSTOM_PROPERTIES: {
-    MODIFIER: `--${NAMESPACE}-modifier`,
-    PARALLAX: `--${NAMESPACE}-parallax`,
-    SPEED: `--${NAMESPACE}-speed`,
-  },
-  DEFAULT_VALUES: {
-    MODIFIER: '.0625rem',
-    SPEED: 0.5,
-  },
-  NAMESPACE,
+const CUSTOM_PROPERTIES = {
+  MODIFIER: `--${NAMESPACE}-modifier`,
+  PARALLAX: `--${NAMESPACE}-parallax`,
+  SPEED: `--${NAMESPACE}-speed`,
 };
+
+export { CUSTOM_PROPERTIES, DEFAULT_VALUES, NAMESPACE };

src/parallax/index.js

@@ -3,59 +3,61 @@
  * @author Simon Finney <[email protected]>
  */
 
-import constants from './constants';
+import { CUSTOM_PROPERTIES, DEFAULT_VALUES, NAMESPACE } from './constants';
 
 /**
  * Checks for and otherwise sets default custom properties to the root element.
  * @param {string} property The property to check and set.
  */
 function setDefaultProperty(property) {
   const { documentElement } = document;
-  const customProperty = constants.CUSTOM_PROPERTIES[property];
+  const customProperty = CUSTOM_PROPERTIES[property];
 
   if (
     window
       .getComputedStyle(documentElement)
       .getPropertyValue(customProperty) === ''
   ) {
-    documentElement.style.setProperty(
-      customProperty,
-      constants.DEFAULT_VALUES[property]
-    );
+    documentElement.style.setProperty(customProperty, DEFAULT_VALUES[property]);
   }
 }
 
 /**
- * Finds all of the elements declared as parallax elements and attaches the parallax handler to them.
+ * Attaches the parallax handler to a specific element.
+ * @param {HTMLElement} parallaxElement The element to attach the parallax handler to.
  */
-export default function parallax() {
+function create(parallaxElement) {
   const w = window;
-  const d = document;
 
-  Object.keys(constants.DEFAULT_VALUES).forEach(defaultProperty =>
-    setDefaultProperty(defaultProperty)
+  parallaxElement.style.setProperty(
+    'transform',
+    `translate3d(0, calc(var(${CUSTOM_PROPERTIES.PARALLAX}) * var(${
+      CUSTOM_PROPERTIES.MODIFIER
+    })), 0)`
   );
 
-  d.querySelectorAll(`[data-${constants.NAMESPACE}]`).forEach(element => {
-    const parallaxElement = element;
+  parallaxElement.style.setProperty('will-change', 'transform');
 
+  w.addEventListener('scroll', () => {
     parallaxElement.style.setProperty(
-      'transform',
-      `translate3d(0, calc(var(${constants.CUSTOM_PROPERTIES.PARALLAX}) * var(${
-        constants.CUSTOM_PROPERTIES.MODIFIER
-      })), 0)`
+      CUSTOM_PROPERTIES.PARALLAX,
+      document.documentElement.scrollTop *
+        w
+          .getComputedStyle(parallaxElement)
+          .getPropertyValue(CUSTOM_PROPERTIES.SPEED)
     );
-
-    parallaxElement.style.setProperty('will-change', 'transform');
-
-    w.addEventListener('scroll', () => {
-      parallaxElement.style.setProperty(
-        constants.CUSTOM_PROPERTIES.PARALLAX,
-        d.documentElement.scrollTop *
-          w
-            .getComputedStyle(parallaxElement)
-            .getPropertyValue(constants.CUSTOM_PROPERTIES.SPEED)
-      );
-    });
   });
 }
+
+/**
+ * Finds all of the elements declared as parallax elements and creates a parallax handler to each of them.
+ */
+function init() {
+  Object.keys(DEFAULT_VALUES).forEach(defaultProperty =>
+    setDefaultProperty(defaultProperty)
+  );
+
+  document.querySelectorAll(`[data-${NAMESPACE}]`).forEach(create);
+}
+
+export { create, init };

webpack.config.js

@@ -7,7 +7,7 @@ const CleanWebpackPlugin = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 
-const packageName = require('./package.json').name;
+const { name } = require('./package.json');
 
 /**
  * Creates an object for maintaining paths throughout the webpack configuration.
@@ -28,8 +28,14 @@ module.exports = ({ development } = false) => ({
     development &&
       new HtmlWebpackPlugin({
         template: path.resolve(paths.src, 'index.html'),
-        title: packageName,
+        title: name,
       }),
   ].filter(Boolean),
-  output: { filename: `${packageName}.js` },
+  output: {
+    filename: `${name}.js`,
+    library: name
+      .split('-')
+      .map(str => `${str.charAt(0).toUpperCase()}${str.slice(1)}`)
+      .join(''), // Converts the package name to uppercase to expose the public methods to.
+  },
 });