# ukm-spa

> Client library used by UKM. Includes interaction, ajax, routing, navigation functions, dialogs...

Latest version **1.0.9** (published 2022-12-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install ukm-spa
pnpm add ukm-spa
yarn add ukm-spa
bun add ukm-spa
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2022-12-16 |
| First published | 2022-11-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 44.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | UKM Norge KA |
| Maintainers | slogan-15 |
| Keywords | ukm |

## Links

- npm: https://www.npmjs.com/package/ukm-spa
- Repository: https://github.com/UKMNorge/UKMSPA-npm
- Homepage: https://github.com/UKMNorge/UKMSPA-npm#readme
- Issues: https://github.com/UKMNorge/UKMSPA-npm/issues
- npm.io page: https://npm.io/package/ukm-spa

## Recent versions

- 1.0.9 (latest) — 2022-12-16
- 1.0.8 — 2022-12-16
- 1.0.7 — 2022-12-05
- 1.0.6 — 2022-11-30
- 1.0.5 — 2022-11-30
- 1.0.4 — 2022-11-30
- 1.0.0 — 2022-11-30

## README

# UKM SPA (Single Page Aplication)

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


![alt text](https://github.com/UKMNorge/ukm-onepage-js/blob/main/docs/diagram-ukm-one-page.png?raw=true)


`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.

```js
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.

```html
<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.

```js
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:

```js
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
```js
var innslag = await this.spaInteraction.runAjaxCall('get_innslag/'+this.innslag_id, 'GET', {});

```

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

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

---
_Source: https://npm.io/package/ukm-spa · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._