Hotfix/js (#5)

* Bind events for triggers on section widgets

* Add flag for styles

* Compile assets

* Update readme. Update version number

Author: mtthwmnc

README.md

@@ -10,12 +10,15 @@ This bundle contains two widgets for a complete ApostropheCMS accordion widget.
 The schema for `pk-accordion-section-widgets` contains a title `string` field as well as an area of widgets that you can configure yourself.
 
 ## How To Use
-Declare the bundle in app.js
+Declare the bundle in app.js. If you want to init the module with the basic css, set `options.styles` of `pk-accordion` to `true`
+
 ```js
 
 bundles: [ 'pk-accordion' ],
 modules: {
-  'pk-accordion': {},
+  'pk-accordion': {
+    styles: true
+  },
   'pk-accordion-widgets': {},
   'pk-accordion-section-widgets': {}
 }

index.js

@@ -5,12 +5,14 @@ module.exports = {
     modules: ['pk-accordion-section-widgets', 'pk-accordion-widgets'],
     directory: 'lib/modules'
   },
-  afterConstruct: function (self) {
+  afterConstruct: (self) => {
+    if (self.options.styles) {
+      self.pushAsset('stylesheet', 'always', {
+        when: 'always'
+      });
+    }
     self.pushAsset('script', 'always', {
       when: 'always'
     });
-    self.pushAsset('stylesheet', 'always', {
-      when: 'always'
-    });
   }
 };

lib/modules/pk-accordion-section-widgets/views/widgetBase.html

@@ -1,7 +1,7 @@
 {% set section = data.widget %}
 {% set namespace = data.options.namespace %}
 
-<div class="pk-accordion__section {% if namespace  %} {{namespace}}__section {% endif %}">
+<div class="pk-accordion__section {% if namespace  %} {{namespace}}__section {% endif %}" data-component="pk-accordion-section">
   <div class="pk-accordion__section-header {% if namespace  %} {{namespace}}__section-header {% endif %}" data-role="pk-accordion-section-header">
     <div class="pk-accordion__section-title {% if namespace  %} {{namespace}}__section-title {% endif %}">
       {%- block sectionTitle -%}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pk-accordion",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A bundle of accordion widgets for ApostropheCMS",
   "main": "index.js",
   "scripts": {

public/js/always.js

@@ -1,5 +1,5 @@
 import pkutils from 'pk-utilities';
-const component = '[data-component=pk-accordion]';
+const component = '[data-component=pk-accordion-section]';
 const header = '[data-role=pk-accordion-section-header]';
 const trigger = '[data-role=pk-accordion-section-trigger]';
 
@@ -8,21 +8,17 @@ export default {
 };
 
 function init () {
-  apos.define('pk-accordion-widgets', {
+  apos.define('pk-accordion-section-widgets', {
     extend: 'apostrophe-widgets',
     construct: function (self, options) {
       self.play = function ($widget, data, options) {
-        const accordion = $widget[0].querySelector(component);
-        const triggers = accordion.querySelectorAll(trigger);
-
-        triggers.forEach(trigger => {
-          const currentTrigger = trigger;
-          const currentViewport = pkutils.helpers.closest(currentTrigger, header).nextElementSibling;
-          trigger.addEventListener('click', (event) => {
-            toggleSection({
-              trigger: currentTrigger,
-              viewport: currentViewport
-            });
+        const section = $widget[0].querySelector(component);
+        const currentTrigger = section.querySelector(trigger);
+        const currentViewport = pkutils.helpers.closest(currentTrigger, header).nextElementSibling;
+        currentTrigger.addEventListener('click', (event) => {
+          toggleSection({
+            trigger: currentTrigger,
+            viewport: currentViewport
           });
         });