Megio-frontils NPM

Megio frontils

Frontend utils for your web-projects.

Installation

yarn add megio-frontils

Setup

Analytics (GTM)

import { useAnalytics } from 'megio-frontils'

const gtm = useAnalytics()

gtm.injectScript()
gtm.trackLeadGenerate('eventLabel')
gtm.trackNewsletterSubscribe('eventLabel')
gtm.enableGtmCookie(type)
gtm.disableGtmCookie(type)
gtm.disableAllGtmCookies()

AntiSpam

import { useAntiSpam } from 'megio-frontils'

const antispam = useAntiSpam(timeOutMs, message)
antispam.isReady() // true | false

Carousel

import { useCarousel } from 'megio-frontils'

const el = document.getElementById('carousel')
const carousel = useCarousel(el, { autoPlay: { speed: 3000, enabled: true } })

carousel.create()
carousel.next()
carousel.prev()
carousel.getStats()

<style>
    .carousel-hide { ... }
    .carousel-show { ... }
</style>

<div id="carousel">
    <button data-carousel="next"></button>
    <button data-carousel="prev"></button>
    <div data-carousel="counter">0 / 0</div>
    <div>
        <div data-carousel="item">One</div>
        <div data-carousel="item">Two</div>
    </div>
</div>

Sticky-hiding navbar like jz.strategio.dev

import { useNavbar } from 'megio-frontils'

const navbar = useNavbar(showBgFrom, stayDownFor, stayUpFor)

navbar.registerEvents()
navbar.close()
navbar.open()

<style>
    .navbar.hidden { ... }
    .navbar.active { ... }
    .navbar.show-bg { ... }
    .navbar-hamburger.active { ... }
</style>

<body>
    <div class="navbar">
        <button class="navbar-hamburger">menu</button>
        <div class="navbar-content">
            <a href="/" data-navbar-link>Home</a>
            <a href="/blog" data-navbar-link>Blog</a>
        </div>
    </div>
</body>

Scroller

import { useScroller } from 'megio-frontils'

const scroller = useScroller(menuHeight)

scroller.registerEvents()
scroller.scrollTo(selector)
scroller.scrollDirection() // get current scrollign direction

Stepper

import { useStepper } from 'megio-frontils'

const stepper = useStepper()
scroller.registerEvents()

<style>
    [data-step].active { ... }
</style>

<div>
    <div data-step="1">1. Send form</div>
    <div data-step="2">2. Get online meet</div>
    <div data-step="3">3. Sign contract</div>
</div>

Switcher (tabs)

import { useSwitcher } from 'megio-frontils'

const el = document.getElementById('switcher')
const switcher = useSwitcher(el)

switcher.registerEvents()

<style>
    [data-switcher-btn].active { ... }
    [data-switcher-wrapper] > div.active { ... }
</style>

<div id="switcher">
    <button data-switcher-btn="1">Show first</button>
    <button data-switcher-btn="2">Show second</button>
    <div data-switcher-wrapper>
        <div>First content</div>
        <div>Second content</div>
    </div>
</div>

Contentio API

import { useContentioApi } from 'megio-frontils'

const apiUri = 'https://<project>.contentio.app/api'
const api = useContentioApi(apiUri)
await api.fetchApi(uri, { body: JSON.stringify({ data: 'xyz' }) })

Contentio thumbnails

import { useContentioThumbnails } from 'megio-frontils'

function onCreated(params, src) { console.log(params, src) }

const apiUri = 'https://<project>.contentio.app/api'
const thumbs = useContentioThumbnails(onCreated, apiUri)

thumbs.registerEvents() // register auto-creation of thumbnails
thumbs.replaceDomain(src) // return string
thumbs.replacePath(src) // return string
thumbs.extractParams(src) // return Params or null
thumbs.getImagesBySameSrc(src) // return HTMLImageElement[]
thumbs.loadThumbnail(src, params) // return void & invoe onCreated callback
thumbs.requestQueue // return string[]

<!-- Works only with src or href prefix: https://cdn.contentio.app/ -->
<img src="https://cdn.contentio.app/{$thumb->getSrc()}">

@everything-registry/sub-chunk-2152

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago