Merge pull request #3 from punkave/develop

1.0.0 release

README.md

@@ -1 +1,44 @@
-# pk-accordion-widgets
+# pk-accordion
+
+This bundle contains two widgets for a complete ApostropheCMS accordion widget.
+
+- `pk-accordion-widgets`
+- `pk-accordion-section-widgets`
+
+`pk-accordion-widgets` is a widget with an area of `pk-accordion-section-widgets`.
+
+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
+```js
+
+bundles: [ 'pk-accordion' ],
+modules: {
+  'pk-accordion': {},
+  'pk-accordion-widgets': {},
+  'pk-accordion-section-widgets': {}
+}
+```
+
+Pass in whatever widgets you want to use for each accordion section into the `options` of your `pk-accordion-widgets` singleton.
+You can also pass in an optional `namespace` value that will scaffold out custom classes for each element in the widget markup for easy styles overrides.
+
+```markup
+{{ apos.singleton(context, 'name', 'pk-accordion', {
+  widgets: {
+    'apostrophe-rich-text': {},
+    'my-custom-widget': {},
+  },
+  namespace: 'my-widget-class',
+}) }}
+```
+
+For example, passing `my-widget-class` into `namespace` will create the following markup in the widget:
+
+```markup
+<div class="pk-accordion  my-widget-class" data-component="pk-accordion">
+  <div class="pk-accordion__section  my-widget-class__section">
+    <div class="pk-accordion__section-header  my-widget-class__section-header" data-role="pk-accordion-section-header">
+      ...
+```

index.js

@@ -1,5 +1,16 @@
 module.exports = {
-  extend: 'apostrophe-module', // or widget or custom-page
-  name: '',
-  label: ''
+  name: 'pk-accordion',
+  label: 'Accordion',
+  moogBundle: {
+    modules: ['pk-accordion-section-widgets', 'pk-accordion-widgets'],
+    directory: 'lib/modules'
+  },
+  afterConstruct: function (self) {
+    self.pushAsset('script', 'always', {
+      when: 'always'
+    });
+    self.pushAsset('stylesheet', 'always', {
+      when: 'always'
+    });
+  }
 };

lib/modules/pk-accordion-section-widgets/index.js

@@ -0,0 +1,18 @@
+module.exports = {
+  extend: 'apostrophe-widgets',
+  label: 'Accordion Section',
+  beforeConstruct: function (self, options) {
+    options.addFields = [
+      {
+        name: 'title',
+        type: 'string',
+        required: true
+      },
+      {
+        name: 'content',
+        type: 'area',
+        contextual: true
+      }
+    ].concat(options.addFields || []);
+  }
+};

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

@@ -0,0 +1 @@
+{% extends 'widgetBase.html' %}

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

@@ -0,0 +1,26 @@
+{% set section = data.widget %}
+{% set namespace = data.options.namespace %}
+
+<div class="pk-accordion__section {% if namespace  %} {{namespace}}__section {% endif %}">
+  <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 -%}
+        {{ section.title }}
+      {%- endblock -%}
+    </div>
+    <button class="pk-accordion__section-trigger {% if namespace  %} {{namespace}}__section-trigger {% endif %}" data-role="pk-accordion-section-trigger">
+      {%- block sectionTrigger -%} Toggle {%- endblock -%}
+    </button>
+  </div>
+  <div class="pk-accordion__section-content {% if namespace  %} {{namespace}}__section-content {% endif %}" data-role="pk-accordion-section">
+    <div class="pk-accordion__section-content-inner {% if namespace  %} {{namespace}}__section-content-inner {% endif %}">
+      {%- block beforeSectionContent -%}{%- endblock -%}
+      {% block sectionContent %}
+        {{ apos.area(section, 'content', {
+          widgets: data.options.widgets
+        }) }}
+      {% endblock %}
+      {%- block afterSectionContent -%}{%- endblock -%}
+    </div>
+  </div>
+</div>

lib/modules/pk-accordion-widgets/index.js

@@ -0,0 +1,14 @@
+module.exports = {
+  extend: 'apostrophe-widgets',
+  label: 'Accordion',
+  contextualOnly: true,
+  beforeConstruct: function (self, options) {
+    options.addFields = [
+      {
+        name: 'sections',
+        type: 'area',
+        contextual: true
+      }
+    ].concat(options.addFields || []);
+  }
+};

lib/modules/pk-accordion-widgets/views/widget.html

@@ -0,0 +1 @@
+{% extends 'widgetBase.html' %}

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

@@ -0,0 +1,19 @@
+{% set accordion = data.widget %}
+{% set sectionWidgets = data.options.widgets %}
+{% set namespace = data.options.namespace %}
+
+<div class="pk-accordion {% if namespace %} {{ namespace }} {% endif %}" data-component="pk-accordion">
+  {%- block sectionsArea -%}
+    {{ apos.area(accordion, 'sections', {
+      widgets: {
+        'pk-accordion-section': {
+          widgets: sectionWidgets,
+          namespace: namespace,
+          controls: {
+            position: 'bottom-left'
+          }
+        }
+      }
+    }) }}
+  {%- endblock -%}
+</div>

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "pk-module-boilerplate",
-  "version": "1.0.2",
-  "description": "Starting point for creating `pk-` modules",
+  "name": "pk-accordion",
+  "version": "1.0.0",
+  "description": "A bundle of accordion widgets for ApostropheCMS",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -12,14 +12,14 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/punkave/pk-module-boilerplate.git"
+    "url": "git+https://github.com/punkave/pk-accordion.git"
   },
   "author": "P'unk Ave",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/punkave/pk-module-boilerplate/issues"
+    "url": "https://github.com/punkave/pk-accordion/issues"
   },
-  "homepage": "https://github.com/punkave/pk-module-boilerplate#readme",
+  "homepage": "https://github.com/punkave/pk-accordion#readme",
   "dependencies": {
     "pk-utilities": "git+https://punkhub:[email protected]/punkave/pk-utilities.git#1.0.1"
   },

public/css/always.css

@@ -1 +1,30 @@
+.pk-accordion__section-header {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: justify;
+      justify-content: space-between;
+  padding: 1rem; }
+
+.pk-accordion__section-title {
+  font-family: sans-serif;
+  font-size: 1.6rem; }
+
+.pk-accordion__section-trigger {
+  width: 2rem;
+  height: 2rem;
+  font-family: sans-serif;
+  font-size: 1.6rem; }
+
+.pk-accordion__section-content {
+  transition: all 100ms ease-in-out;
+  max-height: 0;
+  opacity: 0;
+  visibility: hidden; }
+  .pk-accordion__section-content.is-active {
+    max-height: 100%;
+    opacity: 1;
+    visibility: visible; }
+
+.pk-accordion__section-content-inner {
+  padding: 1rem; }
 

src/js/accordion.js

@@ -0,0 +1,40 @@
+import pkutils from 'pk-utilities';
+const component = '[data-component=pk-accordion]';
+const header = '[data-role=pk-accordion-section-header]';
+const trigger = '[data-role=pk-accordion-section-trigger]';
+
+export default {
+  init
+};
+
+function init () {
+  apos.define('pk-accordion-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
+            });
+          });
+        });
+
+        function toggleSection (ui) {
+          const isActive = ui.trigger.classList.contains(pkutils.classes.active);
+          if (isActive) {
+            return pkutils.state.close(ui);
+          } else {
+            return pkutils.state.open(ui);
+          }
+        }
+      };
+    }
+  });
+};

src/js/site.js

@@ -0,0 +1,14 @@
+import accordion from './accordion';
+
+const PKACCORDION = {};
+PKACCORDION.accordion = accordion;
+
+if (!window.namespace) {
+  window.PKACCORDION = PKACCORDION;
+}
+
+Object.keys(PKACCORDION).forEach((key) => {
+  if (PKACCORDION[key].hasOwnProperty('init')) {
+    PKACCORDION[key].init();
+  }
+});

src/scss/_pk-accordion.scss

@@ -0,0 +1,36 @@
+$pk-accordion-font-family: sans-serif;
+$pk-accordion-font-size: 1.6rem;
+$pk-accordion-transition: all 100ms ease-in-out;
+
+.pk-accordion__section-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem;
+}
+
+.pk-accordion__section-title {
+  font-family: $pk-accordion-font-family;
+  font-size: $pk-accordion-font-size;
+}
+
+.pk-accordion__section-trigger {
+  width: 2rem;
+  height: 2rem;
+  font-family: $pk-accordion-font-family;
+  font-size: $pk-accordion-font-size;
+}
+
+.pk-accordion__section-content {
+  transition: $pk-accordion-transition;
+  max-height: 0;
+  opacity: 0;
+  visibility: hidden;
+  &.is-active {
+    max-height: 100%;
+    opacity: 1;
+    visibility: visible;
+  }
+}
+.pk-accordion__section-content-inner {
+  padding: 1rem;
+}

src/scss/site.scss

@@ -0,0 +1 @@
+@import '_pk-accordion';