#Fant du

Native webcomponent of the "Fant-du" module.

Installation

Paste in:

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

Run

npm i fantdu -S

Include the script into your build system.

Grunt:

Include this into under your concat config.

concat:{
    dist : {
        src:[
            "node_modules/fantdu/dist/fantdu.min.js"
        ]
    }
}

Webpack:

TO BE ADDED....

Usage

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

Call this script on the main page (Layout in epi)

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

<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

// 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

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.