@ilo-org/twig 1.1.5 → 1.2.0

package/src/patterns/components/tooltip/tooltip.js

@@ -1,156 +0,0 @@
-/**
- * The Tooltip module which handles showing a bit of markup on mouseover
- *
- * @class Tooltip
- */
-
-import { createPopper, right } from "@popperjs/core";
-
-export default class Tooltip {
-  /**
-   * Tooltip constructor which assigns the element passed into the constructor
-   * to the `this.element` property for later reference
-   *
-   * @param {HTMLElement} element - REQUIRED - the module's container
-   */
-  constructor(element) {
-    /**
-     * Reference to the DOM element that is the root of the component
-     * @property {Object}
-     */
-    this.element = element;
-
-    // Initialize the view
-    this.init();
-  }
-
-  /**
-   * Initializes the view by calling the functions to
-   * create DOM references, setup event handlers and
-   * then create the event listeners
-   *
-   * @return {Object} ReadMore A reference to the instance of the class
-   * @chainable
-   */
-  init() {
-    this.cacheDomReferences().setupHandlers().enable();
-
-    return this;
-  }
-
-  /**
-   * Find all necessary DOM elements used in the view and cache them
-   *
-   * @return {Object} ReadMore A reference to the instance of the class
-   * @chainable
-   */
-  cacheDomReferences() {
-    /**
-     * The button for toggling Read More state
-     * @type {Object}
-     */
-
-    // enable defaults
-    this.prefix = this.element.getAttribute("data-prefix");
-    this.tooltip = this.element.querySelector(`.${this.prefix}--tooltip`);
-    this.arrow = this.element.querySelector(`.${this.prefix}--tooltip--arrow`);
-    this.alignment = this.arrow.getAttribute("data-alignment");
-    this.placement = this.tooltip.getAttribute("data-placement");
-
-    return this;
-  }
-
-  /**
-   * Bind event handlers with the proper context of `this`.
-   *
-   * @return {Object} Tooltip A reference to the current instance of the class
-   * @chainable
-   */
-  setupHandlers() {
-    this.onMouseOver = this.handleOnMouseOver.bind(this);
-    this.onFocus = this.handleOnMouseOver.bind(this);
-    this.onMouseOut = this.handleOnMouseOut.bind(this);
-    this.onBlur = this.handleOnMouseOut.bind(this);
-
-    return this;
-  }
-
-  /**
-   * Creates event listeners to enable interaction with view
-   *
-   * @return {Object} ReadMore A reference to the instance of the class
-   * @chainable
-   */
-  enable() {
-    this.element.addEventListener("mouseover", this.onMouseOver);
-    this.element.addEventListener("focus", this.onMouseOver);
-    this.element.addEventListener("mouseout", this.onMouseOut);
-    this.element.addEventListener("blur", this.onMouseOut);
-    return this;
-  }
-
-  handleOnMouseOver(e) {
-    const target = e.currentTarget;
-
-    if (target != null) {
-      const rect = target.getBoundingClientRect();
-      this.tooltip.classList.add(`${this.prefix}--tooltip--visible`);
-      this.tooltip.classList.add(`${this.prefix}--tooltip--fade`);
-      this.postMouseOver(rect);
-    }
-
-    return this;
-  }
-
-  handleOnMouseOut() {
-    setTimeout(() => {
-      this.tooltip.classList.remove(`${this.prefix}--tooltip--fade`);
-      this.tooltip.classList.remove(`${this.prefix}--tooltip--visible`);
-    }, 200);
-
-    return this;
-  }
-
-  postMouseOver(hoverRect) {
-    const ttNode = this.tooltip;
-    this.setMaxWidthAndClass(this.tooltip);
-    if (ttNode != null) {
-      // Create Popper instance if not already existing
-      if (!this.popper) {
-        this.popper = createPopper(this.element, this.tooltip, {
-          // Set tooltip priority to be placed on top first
-          placement: "top",
-          modifiers: [
-            "flip", // Changes the side of the tooltip if there isnt space
-            "preventOverflow",
-            {
-              name: "offset",
-              options: {
-                offset: [0, 12], // Adjust offset as needed
-              },
-            },
-          ],
-        });
-      }
-
-      // Update Popper position
-      this.popper.update();
-    }
-
-    return this;
-  }
-
-  /**
-   * Set max width and add class based on content length
-   *
-   * @param {string} content - Tooltip content
-   */
-  setMaxWidthAndClass(tooltip) {
-    const tooltipText = tooltip.textContent || tooltip.innerText;
-    const textLength = tooltipText.trim().length;
-
-    if (textLength > 50) {
-      this.tooltip.classList.add(`${this.prefix}--tooltip--long`);
-    }
-  }
-}

package/src/patterns/components/tooltip/tooltip.stories.jsx

@@ -1,10 +0,0 @@
-import "./index";
-
-export default {};
-const patternDefinition = require("./tooltip.wingsuit.yml");
-
-/* eslint-disable-next-line */
-/* eslint-disable-next-line */
-export const wingsuit = {
-  patternDefinition,
-};

package/src/patterns/components/tooltip/tooltip.twig

@@ -1,14 +0,0 @@
-{# tooltip.twig #}
-
-{% set icontheme = icontheme|default("light") %}
-{% set theme = theme|default("dark") %}
-
-<div class="{{prefix}}--tooltip--wrapper {% if icon|boolval %} {{prefix}}--tooltip--wrapper__icon {{prefix}}--tooltip--wrapper__icon__theme__{{icontheme}} {% endif %}" role="status" aria-live="polite" aria-relevant="additions" data-loadcomponent="Tooltip" data-prefix="{{prefix}}">
-	{% if not icon|boolval %}
-		{{ children }}
-	{% endif %}
-	<span data-id={{tooltipId}} id="tooltip" role="tooltip" class="{{prefix}}--tooltip {{prefix}}--tooltip--{{theme}}" data-alignment="left" >
-		<span data-popper-arrow class="{{prefix}}--tooltip--arrow {{prefix}}--tooltip--arrow--placement-negative" data-placement="negative" role="presentation"></span>
-		{{label}}
-	</span>
-</div>

package/src/patterns/components/video/index.js

@@ -1,7 +0,0 @@
-/**
- * Video
- */
-// Module template
-import "./video.twig";
-import "./video.wingsuit.yml";
-import "./video.behavior";

package/src/patterns/components/video/video.behavior.js

@@ -1,16 +0,0 @@
-import Video from "./video";
-
-Drupal.behaviors.media = {
-  attach() {
-    Array.prototype.forEach.call(
-      document.querySelectorAll(`[data-loadcomponent="Video"]`),
-      (element) => {
-        if (!element.dataset.jsProcessed) {
-          // eslint-disable-next-line no-console
-          new Video(element);
-          element.dataset.jsProcessed = true;
-        }
-      }
-    );
-  },
-};

package/src/patterns/components/video/video.js

@@ -1,120 +0,0 @@
-import "videojs-youtube";
-import videojs from "video.js";
-
-/**
- * The Video module which handles rendering field labels inline on a form.
- *
- * @class Video
- */
-export default class Video {
-  /**
-   * Video constructor which assigns the element passed into the constructor
-   * to the `this.element` property for later reference
-   *
-   * @param {HTMLElement} element - REQUIRED - the module's container
-   */
-  constructor(element) {
-    /**
-     * Reference to the DOM element that is the root of the component
-     * @property {Object}
-     */
-    this.element = element;
-
-    // get the theme prefix
-    this.prefix = this.element.dataset.prefix;
-    this.controlsprefix = `${this.prefix}--video--controls`;
-
-    // Initialize the view
-    this.init();
-  }
-
-  /**
-   * Initializes the view by calling the functions to
-   * create DOM references, setup event handlers and
-   * then create the event listeners
-   *
-   * @return {Object} ReadMore A reference to the instance of the class
-   * @chainable
-   */
-  init() {
-    this.cacheDomReferences().start().setupHandlers().enable();
-
-    return this;
-  }
-
-  /**
-   * Find all necessary DOM elements used in the view and cache them
-   *
-   * @return {Object} ReadMore A reference to the instance of the class
-   * @chainable
-   */
-  cacheDomReferences() {
-    /**
-     * The button for toggling Read More state
-     * @type {Object}
-     */
-    this.VideoElement = this.element.querySelector(
-      `.${this.prefix}--video--element`
-    );
-
-    return this;
-  }
-
-  /**
-   * Bind event handlers with the proper context of `this`.
-   *
-   * @return {Object} Video A reference to the current instance of the class
-   * @chainable
-   */
-  setupHandlers() {
-    return this;
-  }
-
-  /**
-   * Creates event listeners to enable interaction with view
-   *
-   * @return {Object} Video A reference to the instance of the class
-   * @chainable
-   */
-  enable() {
-    return this;
-  }
-
-  /**
-   * Starts up videojs
-   *
-   * @return {Object} Video A reference to the instance of the class
-   * @chainable
-   */
-  start() {
-    this.player = videojs(this.VideoElement, {
-      autoplay: false,
-      controls: true,
-      preload: "auto",
-      bigPlayButton: false,
-      controlBar: {
-        descriptionsButton: false,
-        playbackRateMenuButton: false,
-        chaptersButton: false,
-        audioTrackButton: false,
-        pictureInPictureToggle: false,
-        subsCapsButton: false,
-        seekToLive: false,
-        liveDisplay: false,
-      },
-      textTrackDisplay: false,
-      liveTracker: false,
-      errorDisplay: false,
-      textTrackSettings: false,
-      resizeManager: false,
-      sources: [
-        { type: this.element.dataset.vjsType, src: this.element.dataset.src },
-      ],
-      dataSetup: {
-        techOrder: ["youtube"],
-      },
-    });
-
-    return this;
-  }
-}

package/src/patterns/components/video/video.stories.jsx

@@ -1,10 +0,0 @@
-import "./index";
-
-export default {};
-const patternDefinition = require("./video.wingsuit.yml");
-
-/* eslint-disable-next-line */
-/* eslint-disable-next-line */
-export const wingsuit = {
-  patternDefinition,
-};

package/src/patterns/components/video/video.twig

@@ -1,18 +0,0 @@
-{#
-  VIDEO COMPONENT
-#}
-
-<figure class="{{prefix}}--video" data-prefix="{{prefix}}">
-  <div class="{{prefix}}--video--wrapper">
-    {% include "@components/video/videoplayer.twig" with {
-      alt: alt,
-      controls: video.controls,
-      prefix: prefix,
-      src: video.src,
-      tracks: video.tracks,
-      url: url,
-      vjsType: vjsType
-    } %}
-  </div>
-  <figcaption class="{{prefix}}--video--caption">{{caption}}</figcaption>
-</figure>

package/src/patterns/components/video/videoplayer.twig

@@ -1,8 +0,0 @@
-{#
-VIDEO PLAYER SUB-COMPONENT
-#}
-{% set poster = url|last %}
-<div class="{{prefix}}--videoplayer" data-loadcomponent="Video" data-prefix="{{prefix}}" data-src="{{src}}" data-vjs-type="{{vjsType}}">
-    <video class="{{prefix}}--video--element" poster="{{poster.src}}">
-    </video>
-</div>

package/src/tokens/exports/_colors.scss

@@ -1,7 +0,0 @@
-@use "@ilo-org/themes/build/scss/tokens" as *;
-
-@each $color, $value in $brand {
-  :export {
-    #{$color}: $value;
-  }
-}

package/src/tokens/exports/_font-families.scss

@@ -1,6 +0,0 @@
-@use "@ilo-org/themes/build/scss/tokens" as *;
-
-:export {
-  Display: $fonts-display;
-  Copy: $fonts-copy;
-}

package/src/tokens/exports/_font-sizes-heading.scss

@@ -1,10 +0,0 @@
-@use "@ilo-org/themes/build/scss/tokens" as *;
-
-:export {
-  h1: $type-headline-1-size;
-  h2: $type-headline-2-size;
-  h3: $type-headline-3-size;
-  h4: $type-headline-4-size;
-  h5: $type-headline-5-size;
-  h6: $type-headline-6-size;
-}

package/src/tokens/index.scss

@@ -1,7 +0,0 @@
-@use "@ilo-org/themes/build/scss/tokens" as *;
-
-@each $color, $value in $brand {
-  :export {
-    #{$color}: $value;
-  }
-}

package/src/vendorjs/lib.vendor.js

@@ -1 +0,0 @@
-import "videojs";