npm package: @prokomssp/fantdu
Description: Fant du webcomponent module
Author: Richard
Latest version: 2.0.1

#Fant du

Native webcomponent of the "Fant-du" module.

## Installation

<p>
Make a .npmrc file at the root of your project folder. <br />
This must be at the same level as package.json.
</p>

Paste in:
```javascript
registry=https://prokom.myget.org/F/sspmodules/auth/a2fedf63-3d19-4430-aa16-db322de4867b/npm/
```

<p>
This will allow you to fetch from Prokom's private NPM repo. <br />
Current auth hash is connected to Erik's account. <br />

</p> 

<p>
<b>Optional:</b>
You can replace the auth hash with your own account's hash.
</p>

Run 
```javascript
npm i fantdu -S
```

Include the script into your build system.

<b>Grunt:</b>

Include this into under your concat config.
```javascript
concat:{
    dist : {
        src:[
            "node_modules/fantdu/dist/fantdu.min.js"
        ]
    }
}
```

<b>Webpack:</b>

TO BE ADDED....


## Usage

```html
<fant-du client="kommuneNavn"></fant-du> 
```

### Call this script on the main page (Layout in epi)
````javascript
window.addEventListener('load', function (e) {
    FantDu.startTrace("traceId here", "client id (same as client in above)", e);
});
````

### Options

| Attribute  | Description  | Optional  |
|---|---|---|
| client  | Client id e.g "Kristiansand"  | No  |
| traceId  | Trace id  | yes  |
| url  | Override the fetch url  | yes  |
| yes-color  | Override the yes button color  | yes  |
| title-text | Override the title text  | yes  |
| placeholder-text | Override the placeholder text  | yes  |
| second-title-text | Override the title after pressing yes/no  | yes  |
| post-message  | Override the post message after submit  | yes  |
| css | Full custom css override  | yes  |
| skip-yes-no | Skip directly to confirmation with answer no. This is useful for 404 sites.  | yes  |
| error-title | Set custom error title  | yes  |
| error-message | Set custom error message  | yes  |
| onYes | Name of function to call after yes is clicked  | yes  |
| onNo | Name of function to call after no is clicked  | yes  |
| onSubmitSuccess | Name of function to call after a successful submit  | yes  |
| onSubmitFail | Name of function to call after a failed submit  | yes  |
| hide-receipt-text | Hide the receipt text after submit  | yes  |
| pre-textarea-text | Text over the text area  | yes  |
| post-textarea-text | Text under the text area  | yes  |

### Example
```html
<fant-du
    client="Kristiansand"
    traceId="cookie id here" 
    url="custom ajax url"
    yes-color="blue"
    no-color="orange"
    title-text="Hei du, fant du eller?"
    placeholder-text="Dette er custom placeholder tekst"
    second-title-text="Hva forsøkte du å finne?"
    post-message="Takk!"
    skip-yes-no="false"
    error-title="custom feil"
    error-message="custom feil melding"
    css="
        .fant-du__buttons{
            border-radius:0;
        }
    "
    onYes="yesCb"
    onNo="noCb"
    onSubmitSuccess="submitSuccess"
    onSubmitFail="submitFail"
    hide-receipt-text="true"
    pre-textarea-text="pre text"
    post-textarea-text="post text"
>  
</fant-du>    
```

#### Example of callbacks
```javascript

// Make sure these functions are globally accessible where fant-du is used.

function yesCb(){
    console.log("Yes callback");
}

function noCb(){
    console.log("No callback");
}

//Return argument is the result sent to the server
function submitSuccess(result){
    console.log("Result submitted: ", result);
}

//Return argument is the error message from the server
function submitFail(error){
    console.log("Fail: ", error);
}

```

#### DOM manipulation example

You can also edit the attributes using javascript

```javascript
const fantdu = document.querySelector("fant-du");
const myCss = `
    .fant-du__buttons{
        border-radius:0;
    }
`;
fantdu.setAttribute("css",myCss);
```

## Quirks

- Native shadow-dom encapsulation is not supported yet in Edge, 
ShadyCSS polyfill is used to simulate CSS encapsulation under IE11/Edge. 
- Included webcomponents, fetch and promise polyfill for IE11.

Full status of development can be found here:
https://www.webcomponents.org/

## Browser support

- All modern browsers 
- IE 11

If you need lower IE support, use the older version.