Components

Handcrafted components that might be of use.

Why?

There are many superior alternatives in the wild. Sometimes I only need a bicycle, not a tank. Hence this.

Demo

https://components.simboonlong.com

Install

npm i @simboonlong/components

Drop-down

Simple drop-down list. Demo.

Example:

<!-- html -->
<nav>
  <div class="example-1">example 1</div>
  <ul class="drop-down">
    <li><a href="#some-link-1">some link 1</a></li>
    <li><a href="#some-link-2">some link 2</a></li>
    <li><a href="#some-link-3">some link 3</a></li>
  </ul>
</nav>

Note that .drop-down must be an immediate sibling of drop-down trigger. In this case, the trigger is .example-1.

// scss
$drop-down-background-color: #fff !default; // customise
@import "@simboonlong/components/dist/styles/drop-down/drop-down.scss";

// alternatively for vanilla css, customise with:
:root {
  --drop-down-background-color: #ffeebb;
}

// inspect styles for more options

// js
import { DropDown } from "@simboonlong/components";
DropDown({ el: document.querySelector(".example-1") });

News Ticker

Text-based display for announcements. Demo.

Example:

<!-- html -->
<div class="news-ticker">
  <div class="news-ticker-container">
    <div class="news-ticker-item is-active">some text 0</div>
    <div class="news-ticker-item">some text 1</div>
    <div class="news-ticker-item">some text 2</div>
    <div class="news-ticker-item">some text 3</div>
    <div class="news-ticker-item">some text 4</div>
  </div>
  <button class="news-ticker-prev">previous</button>
  <button class="news-ticker-next">next</button>
</div>

<!-- customise with: -->
<div class="news-ticker" data-interval="1000" data-direction="down"> ... </div>

// scss
$news-ticker-speed: 0.7s; // customise
@import "@simboonlong/components/dist/styles/news-ticker/news-ticker.scss";

// alternatively for vanilla css, customise with:
:root {
  --news-ticker-speed: 0.2s;
}

// inspect styles for more options

// js
import { NewsTicker } from "@simboonlong/components";
const newsTicker = NewsTicker({
  el: document.querySelector(".news-ticker"),
  interval: 1000, // optional, default 3000
  direction: "down", // optional, default "up"
});
newsTicker.goTo(3); // goes to 4th item

Overlay

Overlay, lightbox, modal, dialog or whatever you call it. Demo.

Example:

<!-- html -->
<button class="overlay-trigger" data-trigger="lightbox">Overlay open (lightbox)</button>
<div class="overlay">
  <div class="overlay-lightbox">
    <div class="overlay-background"></div>
    <div class="overlay-wrap">
      <div class="overlay-overflow overlay-card">
        <span class="overlay-cancel">X</span>
        <div class="overlay-content">...</div>
      </div>
    </div>
  </div>
</div>

OR

<!-- html -->
<button class="overlay-trigger" data-trigger="menu">Overlay open (menu)</button>
<div class="overlay">
  <div class="overlay-menu">
    <div class="overlay-background"></div>
    <div class="overlay-wrap">
      <div class="overlay-overflow overlay-backing">
        <span class="overlay-cancel">X</span>
        <div class="overlay-content">...</div>
      </div>
    </div>
  </div>
</div>

// scss
$overlay-lightbox-background-color: red; // customise
@import "@simboonlong/components/dist/styles/overlay/overlay.scss";

// alternatively for vanilla css, customise with:
:root {
  --overlay-lightbox-background-color: rgba(0, 0, 0, 0.4);
}

// inspect styles for more options

// js
import { Overlay } from "./index.js";
const { updateContentLightbox, open, close } = Overlay({
  el: document.querySelector(".overlay"),
  trigger: document.querySelectorAll(".overlay-trigger"),
  closeSelector: ".foobar" // optional. default values are ".overlay-background, .overlay-cancel"
});
updateContentLightbox(DOMPurify.sanitize(`<div>foobar</div>`)); // it is recommended to sanitize any raw html!

Paginator

Basic pagination with URL params. Demo.

Example:

<!-- html -->
<div>
  <div class="paginate">
    <p>Some text 1</p>
  </div>
  <div class="paginate">
    <p>Some text 2</p>
  </div>
  <div class="paginate">
    <p>Some text 3</p>
  </div>
</div>
<div class="paginator"></div>

// scss
$paginator-link-color: #6f6fff !default;  // customise
@import "@simboonlong/components/dist/styles/paginator/paginator.scss";

// alternatively for vanilla css, customise with:
:root {
  --paginator-link-padding: 8px;
  --paginator-link-color: #6f6fff;
  --paginator-link-disabled-color: #ccc;
}

// inspect styles for more options

// js
import { Paginator } from "@simboonlong/components";
Paginator({ el: document.querySelector(".paginator"), items: document.querySelectorAll(".paginate"), perPage: 2, range: 1 });

Note that range is optional (defaults to 3) and MUST be a positive odd number.

Author © Sim Boon Long.