@brandocms/jupiter 3.44.0 → 3.45.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+#### 3.45.0
+
+- Marquee: Reveal on `APPLICATION:REVEALED`
+- Add Toggler module
+
+
 #### 3.44.0
 
 - Moonwalk: Add `data-moonwalked` to walked elements. Don't run again on

package/README.md

@@ -261,6 +261,57 @@ include images from this section. Otherwise, all lightboxed images will be inclu
 - `onPointerLeft/onPointerRight` - `function (lightbox)` - callback for when pointer direction changes
 
 
+## Toggler
+
+#### Example
+
+HTML
+```html
+<div data-toggle>
+  <button data-toggle-trigger>Click to expand <span class="arrow">&darr;</span></button>
+  <div class="panel" data-toggle-content>
+    <div class="panel-content">
+      Content goes here
+    </div>
+  </div>
+</div>
+```
+
+CSS
+```css
+[data-toggle-trigger] {
+  .arrow {
+    display: inline-block;
+    transform: scaleY(1);
+    transition: transform 250ms ease;
+    &.active {
+      transform: scaleY(-1);
+    }
+  }
+}
+
+[data-toggle-content] {
+  height: 0;
+  overflow: hidden;
+  opacity: 1;
+  position: relative;
+}
+```
+
+JS
+```es6
+import { Toggler } from '@brandocms/jupiter'
+
+app.togglers = []
+
+const togglers = Dom.all('[data-toggle]')
+togglers.forEach(toggleEl => {
+  app.togglers.push(new Toggler(app, toggleEl))
+})
+```
+
+#### Options
+
 
 ## Links
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@brandocms/jupiter",
-    "version": "3.44.0",
+    "version": "3.45.0",
     "description": "Frontend helpers.",
     "author": "Univers/Twined",
     "license": "UNLICENSED",

package/src/index.js

@@ -31,6 +31,7 @@ import Popup from './modules/Popup'
 import ScrollSpy from './modules/ScrollSpy'
 import StackedBoxes from './modules/StackedBoxes'
 import StickyHeader from './modules/StickyHeader'
+import Toggler from './modules/Toggler'
 import Typography from './modules/Typography'
 
 import imageIsLoaded from './utils/imageIsLoaded'
@@ -63,6 +64,7 @@ export {
   ScrollSpy,
   StackedBoxes,
   StickyHeader,
+  Toggler,
   Typography,
 
   // Export utils

package/src/modules/FixedHeader/index.js

@@ -223,9 +223,11 @@ export default class FixedHeader {
       window.addEventListener(Events.APPLICATION_FORCED_SCROLL_END, this.pin.bind(this), false)
     }
 
-    window.addEventListener(Events.APPLICATION_SCROLL, this.update.bind(this), {
-      capture: false,
-      passive: true
+    window.addEventListener(Events.APPLICATION_REVEALED, e => {
+      window.addEventListener(Events.APPLICATION_SCROLL, this.update.bind(this), {
+        capture: false,
+        passive: true
+      })
     })
 
     window.addEventListener(Events.APPLICATION_READY, this.unpinIfScrolled.bind(this))
@@ -249,9 +251,11 @@ export default class FixedHeader {
     this.checkBg(true)
     this.checkTop(true)
 
-    setTimeout(() => {
-      this.el.setAttribute('data-header-transitions', '')
-    }, 350)
+    window.addEventListener(Events.APPLICATION_REVEALED, e => {
+      setTimeout(() => {
+        this.el.setAttribute('data-header-transitions', '')
+      }, 350)
+    })
   }
 
   lock () {

package/src/modules/Marquee/index.js

@@ -6,7 +6,10 @@ const DEFAULT_OPTIONS = {
   speed: 100,
   extraHeight: 0,
   slowDownOnHover: true,
-  paddingLeft: 0
+  paddingLeft: 0,
+  onReveal: marqueeEl => {
+    gsap.to(marqueeEl, { opacity: 1 })
+  }
 }
 
 export default class Marquee {
@@ -25,7 +28,9 @@ export default class Marquee {
   }
 
   initialize () {
+    gsap.set(this.elements.$marquee, { opacity: 0 })
     window.addEventListener('APPLICATION:RESIZE', this.updateMarquee.bind(this))
+    window.addEventListener('APPLICATION:REVEALED', this.revealMarquee.bind(this))
     this.updateMarquee()
     this.setupObserver()
     if (this.opts.slowDownOnHover) {
@@ -34,6 +39,11 @@ export default class Marquee {
     }
   }
 
+  revealMarquee (e) {
+    this.updateMarquee()
+    this.opts.onReveal(this.elements.$marquee)
+  }
+
   updateMarquee (e) {
     if (e) {
       // updating cause of a resize. we only care about width change
@@ -41,6 +51,7 @@ export default class Marquee {
         return
       }
     }
+
     this.killTweens()
     this.clearHolders()
     this.setHeight()
@@ -160,14 +171,18 @@ export default class Marquee {
     this.elements.$holder.appendChild(Dom.new('<span>&nbsp;&mdash;&nbsp;</span>')[0])
 
     const textWidth = this.elements.$item.offsetWidth
-    const count = Math.ceil(this.app.size.width / textWidth) - 1
-
-    for (let i = 0; i < count; i += 1) {
-      this.elements.$holder.append(this.elements.$item.cloneNode(true))
-      this.elements.$holder.appendChild(Dom.new('<span>&nbsp;&mdash;&nbsp;</p>')[0])
+    if (textWidth) {
+      const count = Math.ceil(this.app.size.width / textWidth) - 1
+  
+      for (let i = 0; i < count; i += 1) {
+        this.elements.$holder.append(this.elements.$item.cloneNode(true))
+        this.elements.$holder.appendChild(Dom.new('<span>&nbsp;&mdash;&nbsp;</p>')[0])
+      }
+  
+      this.elements.$marquee.appendChild(this.elements.$holder.cloneNode(true))
+    } else {
+      console.error('no textWidth! probably image?', this.elements.$item)
     }
-
-    this.elements.$marquee.appendChild(this.elements.$holder.cloneNode(true))
   }
 
   setHeight () {

package/src/modules/Toggler/index.js

@@ -0,0 +1,46 @@
+import { gsap } from 'gsap'
+import Dom from '../Dom'
+
+const DEFAULT_OPTIONS = {}
+  
+export default class Toggler {
+  constructor(app, el) {
+    this.open = false
+    this.app = app
+    this.el = el
+    // this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
+    this.trigger = Dom.find(this.el, '[data-toggle-trigger]')
+    this.triggerIcon = Dom.find(this.trigger, 'span.icon')
+    this.content = Dom.find(this.el, '[data-toggle-content]')
+    this.trigger.addEventListener('click', this.onClick.bind(this))
+  }
+
+  onClick() {
+    this.toggleState()
+
+    if (this.open) {
+      this.triggerIcon.classList.toggle('active')
+      gsap.set(this.content, { height: 'auto' })
+      this.el.classList.toggle('open')
+      gsap.from(this.content, { height: 0, ease: 'power1.inOut' })
+    } else {
+      this.triggerIcon.classList.toggle('active')
+      gsap.to(this.content, {
+        duration: 0.25,
+        onComplete: () => {
+          this.el.classList.toggle('open')
+        }
+      })
+
+      gsap.to(this.content, { height: 0, ease: 'power3.out' })
+    }
+  }
+
+  toggleState() {
+    if (this.open) {
+      this.open = false
+    } else {
+      this.open = true
+    }
+  }
+}