@brandocms/jupiter 3.42.7 → 3.45.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+#### 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
+  already walked elements.
+- Dom: Add `hasAttribute`
+
+
+#### 3.43.0
+
+- **BREAKING** Marquee: More consistent `speed`. This means you should probably 
+  verify that the speed you set looks ok with the new config
+- Marquee: Add `paddingLeft` and `slowDownOnHover` options
+- Application: send `widthChanged` and `heightChanged` booleans 
+  in `APPLICATION:RESIZE` event detail
+
+
 #### 3.42.7
 
 - Links: Check for zero opacity body element on back/forward nav

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.42.7",
+    "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/Application/index.js

@@ -507,12 +507,15 @@ export default class Application {
    * RAF'ed resize event
    */
   onResize (e) {
+    const widthChanged = (this.size.width !== window.innerWidth)
+    const heightChanged = (this.size.height !== window.innerHeight)
+
     this.size.width = window.innerWidth
     this.size.height = window.innerHeight
     this.setvh100()
     this.updateZoom()
 
-    const evt = new CustomEvent(Events.APPLICATION_RESIZE, e)
+    const evt = new CustomEvent(Events.APPLICATION_RESIZE, { detail: { widthChanged, heightChanged } })
     window.dispatchEvent(evt)
   }
 

package/src/modules/Dom/index.js

@@ -73,6 +73,10 @@ class DOM {
     return classes.map(className => element.classList.toggle(className))
   }
 
+  hasAttribute (element, attributeName) {
+    return element.hasAttribute(attributeName)
+  }
+
   overlapsVertically ($div1, $div2) {
     // Div 1 data
     const d1Offset = $div1.getBoundingClientRect()

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

@@ -3,8 +3,13 @@ import _defaultsDeep from 'lodash.defaultsdeep'
 import Dom from '../Dom'
 
 const DEFAULT_OPTIONS = {
-  speed: 25,
-  extraHeight: 0
+  speed: 100,
+  extraHeight: 0,
+  slowDownOnHover: true,
+  paddingLeft: 0,
+  onReveal: marqueeEl => {
+    gsap.to(marqueeEl, { opacity: 1 })
+  }
 }
 
 export default class Marquee {
@@ -23,21 +28,40 @@ 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()
-    this.elements.$el.addEventListener('mouseenter', this.slowDown.bind(this))
-    this.elements.$el.addEventListener('mouseleave', this.speedUp.bind(this))
+    if (this.opts.slowDownOnHover) {
+      this.elements.$el.addEventListener('mouseenter', this.slowDown.bind(this))
+      this.elements.$el.addEventListener('mouseleave', this.speedUp.bind(this))
+    }
+  }
+
+  revealMarquee (e) {
+    this.updateMarquee()
+    this.opts.onReveal(this.elements.$marquee)
   }
 
-  updateMarquee () {
+  updateMarquee (e) {
+    if (e) {
+      // updating cause of a resize. we only care about width change
+      if (!e.detail.widthChanged) {
+        return
+      }
+    }
+
     this.killTweens()
     this.clearHolders()
     this.setHeight()
     this.fillText()
+
     const holderWidth = this.elements.$holder.offsetWidth
     const $allHolders = Dom.all(this.elements.$el, '[data-marquee-holder]')
     const marqueeWidth = holderWidth * $allHolders.length
+    
+    this.duration = holderWidth / this.opts.speed
 
     gsap.set(this.elements.$marquee, { width: marqueeWidth })
     this.initializeTween()
@@ -68,7 +92,7 @@ export default class Marquee {
 
     this.timeline = gsap.timeline({ paused: true })
     this.timeline
-      .to($allHolders, this.opts.speed, { xPercent: -100, ease: 'none' })
+      .to($allHolders, { xPercent: -100, ease: 'none', duration: this.duration })
       .repeat(-1)
 
     window.timeline = this.timeline
@@ -147,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/Moonwalk/index.js

@@ -655,6 +655,10 @@ export default class Moonwalk {
     let tweenPosition
     const startingPoint = tweenDuration - tweenOverlap
 
+    if (Dom.hasAttribute(target, 'data-moonwalked')) {
+      return
+    }
+
     if (section.timeline.isActive() && section.timeline.recent()) {
       if (section.timeline.recent().time() > startingPoint) {
         /* We're late for this tween if it was supposed to be sequential,
@@ -677,6 +681,7 @@ export default class Moonwalk {
       },
       tweenPosition()
     )
+    .call(() => { target.setAttribute('data-moonwalked', '') }, null, '<')
 
     if (alphaTween) {
       section.timeline.to(target, {
@@ -701,7 +706,7 @@ export default class Moonwalk {
     let tweenPosition
     const startingPoint = tweenDuration - tweenOverlap
 
-    if (Dom.hasClass(target, 'moonwalked')) {
+    if (Dom.hasAttribute(target, 'data-moonwalked')) {
       return
     }
 
@@ -726,6 +731,6 @@ export default class Moonwalk {
         duration: tweenDuration
       },
       tweenPosition()
-    )
+    ).call(() => { target.setAttribute('data-moonwalked', '') }, null, '<')
   }
 }

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
+    }
+  }
+}