Oletusteema sisältää valmiit työkalut drawer-elementtien toteuttamiseen. Drawerilla tarkoitetaan näytön ulkopuolelta avautuvaa sisältöaluetta, joka on hyödyllinen erityisesti mobiilivalikkojen toteuttamisessa.

Drawer-elementit toteutetaan Barebonesin drawers.js-pluginin avulla.

Plugin vaatii seuraavat JavaScript-kirjastot toimiakseen:

  • jQuery – Plugin vaatii jQueryn toimiakseen. Voit lisätä jQueryn teemaan käyttämällä {SupportScripts}-tagia. Oletusteemoihin jQuery on lisätty valmiiksi.
  • jQuery Finger – Tämä plugin mahdollistaa drawerien käyttämisen kosketusnäyttölaitteilla. Oletusteemaan plugin on lisätty valmiiksi.

    Löydät Finger-pluginin tiedostosta /vendor/jquery.finger/dist/jquery.finger.js.

Löydät pluginin oletusteeman tiedostosta /scripts/plugins/drawers.js.

Drawerien ulkoasu määritellään tiedostossa /styles/scss/modules/_drawers.scss.

Pluginin avulla on helppoa toteuttaa esimerkiksi valikkoja kapeisiin mobiilinäkymiin. Barebones-teemassa ostoskorin esikatselu on toteuttu drawer-elementtinä.



Voit tehdä haluamastasi elementistä drawerin antamalla sille attribuutin data-drawer="nimi". Anna elementille myös luokkanimi Drawer, jolloin saat sille käyttöön drawerien oletustyylit.

Drawerille voidaan määritellä myös suunta (pysty/vaaka) ja näytön sivu, josta elementti avautuu näkyviin (oikea/vasen/ala-/yläreuna).

Suunta määritetään attribuutilla data-orientation="horizontal/vertical" – avautumiskohta taas attribuutilla data-side="top/bottom/left/right".

Alla näet drawer-elementin esimerkkitoteutuksen:

<aside class="Drawer" data-drawer="testi" data-orientation="horizontal" data-side="left">
	<h1>Drawer-elementti</h1>
	<p>Sisältöä joka liukuu näkyviin vasemmalta reunalta.</p>
</aside>

Drawer näytetään komennolla MCF.Drawers.open(name) ja suljetaan kommennolla MCF.Drawers.close(name).

Pluginissa on myös erillinen toggle(drawer)-funktio, joka sulkee tai avaa drawerin riippuen sen silloisesta tilasta. drawer-parametri on jQuery-objekti, joka sisältää kohteena olevan drawerin. Vaihtoehtoisesti voit käyttää myös funktiota toggleByName(name), joka avaa/sulkee drawerin data-drawer-attribuutin arvon perusteella.

Alla on yksinkertainen esimerkki drawer-elementistä, joka suljetaan ja avataan napinpainalluksella:

<button id="toggle">Avaa/sulje drawer</button>
<aside class="Drawer" data-drawer="testi" data-orientation="horizontal" data-side="left">
	<h1>Drawer-elementti</h1>
	<p>Sisältöä joka liukuu näkyviin vasemmalta reunalta.</p>
</aside>
<script>
$(document).ready(function() {
	$("#toggle").on("click", function() {
		MCF.Drawers.toggleByName("testi");
	});
});
</script>

Seuraavassa esimerkissä drawer avataan, kun ostoskoriin on lisätty tuote. Tähän käytetään oletusteeman cart.js-pluginia:

MCF.Cart.init({
	afterAddProduct: function() {	
		MCF.Drawers.toggleByName("testi");
	}
});

Kun tuote on lisätty ostoskoriin, Cart-pluginin afterAddProduct()-koukussa avataan drawer, jolla on attribuutti data-drawer="testi".