@ulu/frontend 0.1.0-beta.99 → 0.2.0-beta.2

package/index.js

@@ -1,7 +0,0 @@
-// For build (dist)
-import "./scss/stylesheets/full.scss";
-import * as ulu from "./js/index.js";
-
-if (typeof window !== "undefined") {
-  window.ULU = ulu;
-}

package/js/events/index.js

@@ -1,108 +0,0 @@
-/**
- * @module events
- */
-
-import { debounce } from "@ulu/utils/performance.js";
-import { isBrowser } from "@ulu/utils/browser/dom.js";
-
-// Setup global document events
-if (isBrowser()) {
-  initResize();
-  initPrint();
-}
-
-/**
- * Event object - called on dispatch
- */
-const events = {
-  /**
-   * Event is dispatched when DOM in the page has changed, triggers updates from
-   * all modules listening for the change (init instances, etc)
-   * - Is triggered by modules that were responsible for modifying the page
-   */
-  pageModified(context) {
-    context.dispatchEvent(createEvent("pageModified"));
-  },
-  /**
-   * Event called when page is resized
-   */
-  pageResized(context) {
-    context.dispatchEvent(createEvent("pageResized"));
-  },
-  /**
-   * Event dispatched before page print begins (teardown/restructure/hide things)
-   */
-  beforePrint(context) {
-    context.dispatchEvent(createEvent("beforePrint"));
-  },
-  /**
-   * Event dispatched after page print (cleanup)
-   */
-  afterPrint(context) {
-    context.dispatchEvent(createEvent("afterPrint"));
-  }
-};
-
-/**
- * Triggers one of our custom events (page/document level events)
- * - UI components may dispatch their own events, this is just used for system wide events
- * @param {String} type Type of event to dispatch
- * @param {Node} context Element to trigger the event from
- * @example
- *   if (updatedMarkup) {
- *     dispatch("pageModified", modalElement);
- *   }
- */
-export function dispatch(type, context) {
-  if (events[type]) {
-    events[type](context);
-  } else {
-    console.warn(`Unable to dispatch site event: ${ type } in context:`, context);
-  }
-}
-
-/**
- * Namespaced event
- * - Should be used for all ulu script/component events
- * @param {String} type Type of event to get the actual event name for
- * @returns {String}
- */
-export function getName(type) {
-  return "ulu:" + type;
-}
-
-/**
- * Create ulu namespaced custom event
- * @param {String} type Event base name (not prefixed)
- * @param {any} data Custom data to pass with the event (will be available as `event.detail`)
- * @param {Object} options CustomEvent options default `{ bubbles: true }`. If `detail` is also provided, it will be merged with this options object and will override the 'data' argument for this function
- */
-export function createEvent(type, data = null, options = { bubbles: true }) {
-  return new CustomEvent(getName(type), { detail: data, ...options });
-}
-
-/**
- * Setup resize handler/dispatch
- */
-function initResize() {
-  window.addEventListener("resize", debounce(() => dispatch("pageResized", document), 250));
-}
-
-/**
- * Setup print listeners
- * - Note: Tested with matchMedia but these events are more consistent
- *         Experimented with normalizing both events but they fired
- *         strangely, using any delay won't work (ie setTimeout / RAF)
- *         chrome pauses immediately javascript after the initial event.
- *         Reverting to a straightforward method for now. If this ends up
- *         needing something more robust we can work that out on this side
- *         and it won't change how the custom events file.
- */
-function initPrint() {
-  window.addEventListener("beforeprint", () => {
-    dispatch("beforePrint", document);
-  });
-  window.addEventListener("afterprint", () => {
-    dispatch("afterPrint", document);
-  }); 
-}

package/js/index.js

@@ -1,11 +0,0 @@
-// Main Library Import
-// - Allow users to access commonly needed items with at one point/file
-// - This is the entry for the pre-built version
-// - Could allow changing of the ulu/js file structure if needed
-// - Will not include things that aren't used in every site (those would need to 
-//   imported manually
-
-export * as settings from "./settings.js";
-export * as events from "./events/index.js";
-export * as ui from "./ui/index.js";
-export * as utils from "./utils/index.js";

package/js/ui/index.js

@@ -1,22 +0,0 @@
-export * as page from "./page.js";
-export * as breakpoints from "./breakpoints.js";
-export * as collapsible from "./collapsible.js";
-export * as modalBuilder from "./modal-builder.js";
-export * as dialog from "./dialog.js";
-export * as flipcard from "./flipcard.js";
-export * as grid from "./grid.js";
-export * as index from "./index.js";
-export * as overflowScrollerPager from "./overflow-scroller-pager.js";
-export * as overflowScroller from "./overflow-scroller.js";
-export * as popover from "./popover.js";
-export * as tooltip from "./tooltip.js";
-export * as resizer from "./resizer.js";
-export * as slider from "./slider.js";
-export * as tabs from "./tabs.js";
-export * as proxyClick from "./proxy-click.js";
-export * as scrollpoint from "./scrollpoint.js";
-export * as print from "./print.js";
-export * as printDetails from "./print-details.js";
-export * as scrollSlider from "./scroll-slider.js";
-export * as themeToggle from "./theme-toggle.js";
-export * as detailsGroup from "./details-group.js";

package/js/utils/index.js

@@ -1,8 +0,0 @@
-export * as classLogger from "./class-logger.js";
-export * as dom from "./dom.js";
-export * as floatingUi from "./floating-ui.js";
-export * as id from "./id.js";
-export * as index from "./index.js";
-export * as pauseYoutubeVideo from "./pause-youtube-video.js";
-export * as fileSave from "./file-save.js";
-export * as fontAwesome from "./font-awesome.js";

package/resources/drupal/twig-macros/accordion.twig

@@ -1,99 +0,0 @@
-{#
-* ==============================================================================
-* Accordion / Details
-* ==============================================================================
-*
-* @version 1.0.1
-*
-* @example
-  {% import directory ~ '/templates/_macros/accordion.twig' as accordionMacros %}
-
-* @param {Markup} toggle Markup to include in the toggle button
-* @param {Markup} body Markup to include in the body (hidden area)
-* @param {Object} options Configuration object
-* @param {String} options.icon Add icon classes
-* @param {Boolean} options.open Open by default
-* @param {String} options.modifier Modifer class (needs to correspond with styling)
-
-Notes:
-  - don't worry about headings in summary it doesn't work on screenreaders
-  - I wouldn't reset the headline order within (ie. no  sectioning root, I think this will not work for SRs)
-#}
-
-{% macro accordion(toggle, body, options = {}) %}
-  {% set defaults = {
-    open: false,
-    modifier: "default",
-    icon: null,
-    attributes: null
-  } %}
-  {% set options = defaults|merge(options) %}
-  {% set classes = [
-    "site-details",
-    'site-details--' ~ options.modifier 
-  ] %}
-  {% set attributes = options.attributes ?: create_attribute()  %}
-  <details {{ attributes.addClass(classes).setAttribute("open", options.open) }}>
-    <summary class="site-details__summary">
-      {{ toggle }}
-      <span class="site-details__icon {{ options.icon }}" aria-hidden="true"></span>
-    </summary>
-    <div class="site-details__content">
-      {{ body }}
-    </div>
-  </details>
-{% endmacro %}
-
-{% macro accordionGroup(title, accordions, options = {}) %}
-  {% set defaults = {
-    titleHidden: true,
-    modifier:    "default",
-    textOpen:    "Expand All",
-    textClose:   "Close All",
-    icon:        null
-  } %}
-  {% set uid = ctwig_uniqid("site-details-group") %}
-  {% set id = {
-    container:  uid ~ '--container',
-    title:      uid ~ '--title',
-    expand:     uid ~ '--expand'
-  } %}
-  {% set options = defaults|merge(options) %}
-
-  <div class="site-details-group {{ 'site-details-group--' ~ options.modifier }}">
-    <h2 
-      id="{{ id.title }}"
-      class="{{ options.titleHidden ? 'hidden-visually' : 'site-details-group__title' }}" 
-    >
-      {{ title }}
-    </h2>
-    <div 
-      id="{{ id.container }}" 
-      class="site-details-group__inner" 
-      aria-multiselectable="true"
-    >
-      <div class="site-details-group__controls">
-        <button 
-          class="site-details-group__control"
-          id="{{ id.expand }}"
-          type="button"
-          aria-expanded="false"
-          aria-controls="{{ id.container }}"
-          aria-labelledby="{{ id.title }} {{ id.expand }}"
-          data-site-details-group="{{ { 
-            textOpen: options.textOpen, 
-            textClose: options.textClose 
-          }|json_encode }}"
-          hidden
-        >
-          <span 
-            class="site-details-group__controls-all-icon {{ options.icon }}" 
-            aria-hidden="true"
-          ></span>
-          {{ options.textOpen }}
-        </button>
-      </div>
-      
-    </div>
-  </div>
-{% endmacro %}

package/resources/drupal/twig-macros/dropdown.twig

@@ -1,44 +0,0 @@
-{#
-* ==============================================================================
-* Dropdown
-* ==============================================================================
-*
-* @version 1.0.0
-*
-* @example
-*  {% import directory ~ '/templates/_macros/dropdown.twig' as dropdownMacros %}
-#} 
-
-{#
-* @param {Markup} toggle Markup to include in the toggle button
-* @param {Markup} body Markup to include in the body (hidden area)
-* @param {Object} options Configuration object
-* @param {String} options.modifier Modifer class (needs to correspond with styling)
-* @param {Boolean} options.isMenu The content of this dropdown should be styled as a menu
-* @param {Boolean} options.placement Placement suggestion, possible values:
-    auto, auto-start, auto-end, top, top-start, top-end, bottom, bottom-start, 
-    bottom-end, right, right-start, right-end, left, left-start, left-end
-#}
-
-{% macro dropdown(toggle, body, options = {}) %}
-  {% set defaults = {
-    isMenu:    false,
-    modifier:  "default",
-    placement: "bottom-end"
-  } %}
-  {% set options = defaults|merge(options) %}
-  <div 
-    class="site-dropdown {{ 'site-dropdown--' ~ options.modifier }}" 
-    data-cc-placement="{{ options.placement }}"
-  >
-    <button class="site-dropdown__toggle" type="button">
-      {{ toggle }}
-      <span class="site-dropdown__toggle-icon" aria-hidden="true"></span>
-    </button> 
-    <div class="site-dropdown__content">
-      <div class="{{ options.isMenu ? 'site-dropdown__menu' : 'site-dropdown__content-inner' }}">
-        {{ body }}
-      </div>
-    </div>
-  </div>
-{% endmacro %}

package/resources/drupal/twig-macros/flipcard.twig

@@ -1,69 +0,0 @@
-{#
-* ==============================================================================
-* Flipcard
-* ==============================================================================
-*
-* @version 1.0.0
-*
-* @example
-*  {% import directory ~ '/templates/_macros/flipcard.twig' as flipcardMacros %}
-#} 
-
-{# 
- * @param {Array} flipcards Array of flipcards (markup from flipcard macro below)
- #}
-
-{% macro flipcardLayout(flipcards) %}
-  <div class="flipcard-grid">
-    {% for flipcard in flipcards %}
-      <div class="flipcard-grid__item">
-        {{ flipcard }}
-      </div>
-    {% endfor %}
-  </div>
-{% endmacro %}
-
-{# 
- * @param {Markup} front Markup for front
- * @param {Markup} back Markup for back
- * @param {Markup} image Image for the front
- * @param {Object} options Configuration
- * @param {Object} options.modifier Modifer class (needs to correspond with styling)
- * @param {Boolean} options.frontOnBack Include a duplicate of the front content on back (no interactive elements, aria-hidden)
- #}
-
-{% macro flipcard(front, back, image = false, options = {}) %}
-  {% set var = value %}
-  {% set defaults = {
-    modifier:      "default",
-    frontOnBack:   false
-  } %}
-  {% set options = defaults|merge(options) %}
-
-  <div class="flipcard {{ image ? 'flipcard--w-image' }}" data-site-flipcard>
-    <h3 class="flipcard__front" data-site-flipcard-front>
-      {% if image %}
-        <span class="flipcard__front-image">{{ image }}</span>
-      {% endif %}
-      <span class="flipcard__front-content">
-        {{ front }}
-        <span class="flipcard__icon flipcard__icon--front" aria-hidden="true"></span>
-      </span>
-    </h3>
-    <div class="flipcard__back" data-site-flipcard-back>
-      {% if frontOnBack %}
-        <div class="flipcard__back-front-content" aria-hidden="true">
-          {{ front }}
-        </div>
-      {% endif %}
-      <div class="flipcard__back-content">
-        {{ back }}
-      </div>
-      <span class="flipcard__icon flipcard__icon--back" aria-hidden="true"></span>
-    </div>
-    {# Site styling can choose to use this if wanted or it can remain empty #}
-    <div class="flipcard__icon-footer">
-      <span class="flipcard__icon flipcard__icon--footer"  aria-hidden="true"></span>
-    </div>
-  </div>
-{% endmacro %}

package/resources/drupal/twig-macros/image.twig

@@ -1,30 +0,0 @@
-
-{# 
-==================================================================================
-Image Macros
-==================================================================================
-
-Version:            1.0.0
-
-Description:        Reusable interactive elements, correspond with styling and scripting
-
-Usage:              
-  {% import directory ~ '/templates/_macros/image.twig' as imageMacros %}
-
-#}
-
-{#
-* @param {Markup} field Image field
-* @param {Markup} options Configruation
-* @param {Markup} options.alt Custom alt text (default to field)
-* @param {Markup} options.class (default to full-width-image)
-#}
-
-{% macro large(field, options = {}) %}
-  {% if field.value is not empty %}
-    {{ drupal_image(field.entity.uri.value, 'large', { 
-      alt: options.alt|default(field.alt),
-      class: options.class|default("full-width-image")
-    }) }}
-  {% endif %}
-{% endmacro %}