ukm-spa v1.0.9

UKM SPA (Single Page Aplication)

Less mer om SPA: https://developer.mozilla.org/en-US/docs/Glossary/SPA

UKMOnePage representerer rammeverket og kan ikke initialiseres, derfor må en klasse som utvider det må opprettes.

ProjectOnePage - representerer en mer spesifikk implementasjon av rammeverket som passer for et prosjekt eller en side

EventElement

representerer et DOM element som har et event og attributter som passer for det elementet.

deltaOnePage.addEventElements([
   new EventElement('.card-body-arrangement.meldpaa', 'click', ()=>{ console.log("callback"); }, 'get_innslag_types', 'GET', ['pl_id'])        
]);

Director

Director klasse brukes for å navigere gjennom sider som er definert i DOM som sider for å oppnå SPA metodologien.

<div id="pageTestHello" class="page" alone="true">
	<h1>Page content here...</h1>
</div>

HUSK: DOM elementet må ha class page. Hvis siden kan leve alene, da må attributen alone settes til true. Det betyr at siden er ikke avhengig av andre sider. Eks. en side som kan kalles gjennom url og som vises uavhengig av andre sider.

Director.openPage("pageTestHello");

Event listeners

openPage - Når en ny side åpnes gjennom Director ved call på openPage() metode eller tilbake knapp

Notater

Director kan brukes for å legge til attributter på URL og hente dem når det trengs.

SPAInteraction

Brukes til å skape interaksjon i brukergrensesnittet, sende meldinger og mest viktig kjøre API kall.

HUSK: for å konstuere en ny instanse av SPAInteraction må et objekt sendes. Dette objekte må implementere disse metodene:

• showMessage(title, message, type)
• openDialog(title, msg, buttons)
• hideLoading()

Eksempel av objektet:

export var interactionVue = new Vue({
    methods : {
        openDialog : function(title, msg, buttons = null, onCloseCallback) {
            // Implementering
        },
        showMessage : function(title, msg, type = 0) {
            // Implementering
        },
        hideLoading : function() {
            // Implementering
        }
    }
})

Kjører AJAX kall, metode GET

var innslag = await this.spaInteraction.runAjaxCall('get_innslag/'+this.innslag_id, 'GET', {});

Dialog med callback

var buttons = [{
	name : 'Slett',
	class : "aaa",
	callback : async ()=> {
	    // Slett noe
	}
}];

this.spaInteraction.showDialog('Vil du melde av?', 'Vil du virkelig slette dette?', buttons);