Dokumentacja – Salamanders Studio

Ostatnia aktualizacja: 17 sierpnia 2026

Dokumentacja opisuje wbudowane narzędzia w motywach WordPress, opartych o rdzeń SSEngine w wersji 1.4.11 lub wyższej. Przeznaczona jest przede wszystkim naszym klientom oraz programistom.

Sam rdzeń powstał w celu budowania prostych skalowalnych stron zoptymalizowanych pod kątem edycji przez WordPress Gutenberg.

Metody

Selektory

Wykorzystywane w całym projekcie w celu łatwemu przejmowaniu elementów wewnątrz określonego rodzica

javascript

__(el, elWithin); // querySelector
_id(el, elWithin) // getElementById
_all(el, elWithin) // querySelectorAll
_tag(el, elWithin) // getElementsByTagName
_class(el, elWithin) // getElementsByClassName

loader.on.show = o => __(o.wrp, `div.loaderInner`)..
modal.on.ready = o => _all(o.wrp, 'input[type=text]')...
etc.

fireEvent

Wywołuje event wewnątrz metody obiektu

javascript

class Foo {
    constructor() {
        fireEvent(this, ['ready']);
        fireEvent(this, ['switch', 'after']);
    }
}

object.on.ready () => {
   // event body
}

object.on.switch.after () => {
   // event body
}

ssGetCurrNav

Zwraca aktualnie widoczny header (desktop / mobile)

javascript

dHeader.on.ready = o => {
    if(ssGetCurrNav() === o.wrp)
        // ..
}

ssEqualItems

Wyrównuje elementy wzdłuż / wszerz

javascript

ssEqualItems(items, method = 'height')
// minHeight / height / minWidth / width

ssEqualItems(_all(`.myItems`), 'minWidth');

Debugging:

javascript

// log(object, logMessage) 

class Foo {
    constructor() {
        this.randomNum = Math.floor(Math.random() * 10);

        log(this, ['random num', this.randomNum]);
    }
}

Moduły i bloki

Strukturą widoków front-end są bloki Gutenberg i wbudowane moduły oraz narzędzia, przy czym każde z nich posiada własny interfejs API i funkcje. Niżej opisane inicjowane są automatycznie:

Grid

javascript

grid.init({
    wprs: _class('.container')
})
grid.setGrid(__('div.container'));
grid.reCalc(forceAll = false); // możliwość wymuszenia rekalkulacji na przeliczonych już obszarach

CookiesManager

javascript

cookiesManager.get(key);
cookiesManager.set(key, value, days);

LazyLoad

javascript

lazyLoad.update();

Loader

javascript

loader.show();
loader.hide();
loader.on.init = o =>  {
    const loaderObject = o;
}
loader.on.ready = o => {}
loader.on.show = o => {}
loader.on.hide = o => {}

Notifier

javascript

// notifier.notify(message, hideAfter, className);

notifier.notify(`An error has occured`, 3000, `error`);
notifier.on.init = o => {
    const notifierObject = o;
}
notifier.on.ready = o => {}
notifier.on.notify = o => {}
notifier.on.hide = o => {}

DarkMode

javascript

// darkMode.switch(theme);  
// light / dark

darkMode.switch('dark');
darkMode.on.init = o => {
    const darkModeObject = o;
}
darkMode.on.ready = o => {}
darkMode.on.switch = o => {}

Modal

javascript

// modal.show(hash, width);

modal.show('#')
modal.showNext();
modal.showPrev();
modal.hide();
modal.switchInner(id: #string, width: number);
modal.openCustomModal(modal: element)

modal.on.show = o => {}
modal.on.hide = o => {}
modal.on.switch = o => {}
modal.on.init = o => {
    const modalObject = o;
}
modal.on.ready = o => {}
modal.on.show = o => {}
modal.on.hide = o => {}

Własny blok Gutenberg

Aby utworzyć nowy blok wystarczy zdefiniować go w settings.php:

php

// settings.php

$ss_blocks = [
    [
        'slug' => 'myNewSlider',
        'title' => __ppl('Mój slider'),
        'keys' => ['slider', 'slides', 'images'],
        'desc' => __ppl('Slider oparty o Flickity'),
        'depends' => ['flickity']
    ],
...

Utworzy to nowe skrypty w projekcie, w tym zoptymalizowany kod klasy:

javascript

export class MyNewSlider {
    constructor(wrp, opt = []) {
        this.debugColor = 'Bisque';
        this.wrp = wrp;

        if(this.wrp) 
            this.init(opt);
    
        if(typeof swup === 'object')
            swup.hooks.on('animation:out:start', () => 
                this.destroy());
    }

    init(opt) {
        this.on = opt.on;

        log(this, ['initing']);

        fireEvent(this, ['init']);

        // script body

        fireEvent(this, ['ready']);
    }

    destroy() { 
        log(this, ['destroying']);

        fireEvent(this, ['destroy']);
    }
}