dan-gamble

<% accessibility_label = nil if local_assigns[:accessibility_label].nil? %>
<% aria_controls = nil if local_assigns[:aria_controls].nil? %>
<% aria_expanded = nil if local_assigns[:aria_expanded].nil? %>
<% destructive = false if local_assigns[:destructive].nil? %>
<% disabled = false if local_assigns[:disabled].nil? %>
<% disclosure = nil if local_assigns[:disclosure].nil? %>
<% full_width = false if local_assigns[:full_width].nil? %>
<% monochrome = false if local_assigns[:monochrome].nil? %>
<% outline = false if local_assigns[:outline].nil? %>
<% plain = false if local_assigns[:plain].nil? %>

dan-gamble

export function slideDown (
  el,
  end,
  { start = 0, easing = 'easeInOutQuint', speed = 300 } = {}
) {
  let currentPosition = 0
  const time = Math.max(0.1, Math.min(Math.abs(end) / speed, 0.8))
  const easingEquations = {
    easeOutSine (pos) {
      return Math.sin(pos * (Math.PI / 2))

dan-gamble

{%- assign should_have_breadcrumb = false -%}
{%- assign breadcrumbs_linklist = linklists.collection-tree -%}
{%- assign breadcrumbs = '' -%}

{%- assign collection_handle = collection.handle -%}
{%- assign breadcrumb_link = nil -%}
{%- assign child_breadcrumb_link = nil -%}
{%- assign grandchild_breadcrumb_link = nil -%}

{%- for link in breadcrumbs_linklist.links -%}

dan-gamble

There are a couple of version of this.

This is a basic one that doesn't actually create new bundles but prevents all of the function importing and calling.

entry-file.js

document.addEventListener('DOMContentLoaded', () => {
  ...
  
  getElements('[data-module]').forEach(el => {

dan-gamble

import { getElement, getElements } from '../../utils/functional'

export default class Module {
  constructor (el) {
    this.className = el.dataset.moduleClass
    this.context = { context: el }
  }

  getContextElement (selector) {
    return getElement(selector, this.context)

dan-gamble

export default class OnScrollSixTFPS {
  constructor () {
    this.isTicking = false
    this.lastKnownY = 0

    this.onScroll = this.onScroll.bind(this)
    this.updateEl = this.updateEl.bind(this)

    this.setupListeners()
  }

dan-gamble

import { getElement, getElements } from '../utils/functional'

export default class Drawers {
  constructor (el) {
    this.els = {
      el,
      body: document.body,
      backdrop: getElement('.js-Drawers_Backdrop')
    }
    this.matches = {

dan-gamble

<section class="sec-HomepageHero js-HomepageHero"
         data-section-id="{{ section.id }}"
         data-section-type="homepage-hero"
         data-module-class="js-HomepageHero">
  <div class="sec-HomepageHero_Mobile">
    <div class="sec-HomepageHero_ImageContainer">
      {%- include 'responsive-image' with
        image: section.settings.mobile_image,
        max_width: 375,
        size_by_width: true

dan-gamble

import Siema from 'siema'

import Module from './module'

export default class HomepageHero extends Module {
  constructor (el) {
    super(el)

    this.els = {
      el,

dan-gamble

import Module from './module'
import Siema from 'siema'

export default class ProductsCarousel extends Module {
  constructor (el) {
    super(el)

    this.els = {
      el,
      slidesContainer: this.getContextElement(`.${this.className}_Slides`),