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.
Barebones-teema poistuu.
Teeman kehittäminen on lopetettu, ja kaikki sen sisältämät työkalut tullaan poistamaan käytöstä.
Jatkossa MyCashflow'n oletusteemana toimii Fluid-teema, jonka ulkoasua ja toimintoja on helppo mukauttaa graafisen käyttöliittymän avulla käyttämällä teema-asetuksia.
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".