Přeskočit na hlavní obsah

Megio frontils

Tato knihovna je pouze utilita pro tvorbu webových stránek. Jedná se o malé předpřipravené scripty, které vám ušetří čas při vývoji klasických webových stránek. Obsahuje například: Analytics (GTM), Anti-spam, Sticky navbar, Smooth scroll, Carousel, apod.

Instalace​

yarn add megio-frontils

Přehled všech utilit​

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
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​

Stejné chování jako na webu 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()}">