Customization

Customization example

This demo customized instances of Swalstrap to customize and localize the interface.

Choose a language

English Italiano

and

Customize Swalstrap

If you use swalstrap5.js or swalstrap5.min.js:

<script src="https://cdn.jsdelivr.net/npm/@magicbruno/swalstrap5@1.0.8/dist/js/swalstrap5.min.js"></script>

only Swalstrap class wil be loaded. To use Swalstrap you must load swalstrap stylesheet:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@magicbruno/swalstrap5@1.0.8/docs/assets/css/swalstrap.min.css">

and then create at least an instance of Swalstrap class:

<script>
    const mySwal = new Swalstrap();
</script>

If you use swalstrap5_all.js or swalstrap5_all.min.js instead:

<script src="https://cdn.jsdelivr.net/npm/@magicbruno/swalstrap5@1.0.8/dist/js/swalstrap5_all.min.js"></script>

CSS styles will be loaded automatically and a default instance of Swalstrap named Swal (ad aliased as swal, Sweetalert and sweetalert) will be created.

In both cases, you may create customized instances of Swalstrap passing a set of options as parameter of the constructor. This options will became the default options applied to popups and toasts that will be open with the fire method.

const questionIt = new Swalstrap({
    input: 'radio',
    icon: 'question',
    customClass: {
        confirmButton: 'btn btn-outline-success',
        cancelButton: 'btn btn-outline-danger',
        popup: 'modal-lg'
    },
    confirmButtonText: 'Conferma e continua',
    cancelButtonText: 'Esci',
    showCancelButton: true,
    backdrop: false,
    showCloseButton: true,
    preConfirm: (input) => {
        if (input == 'No selections') {
            questionIt.showValidationMessage('Fai una scelta');
            return false;
        }

    }
});

const questionEn = new Swalstrap({
    input: 'radio',
    icon: 'question',
    customClass: {
        confirmButton: 'btn btn-outline-success',
        cancelButton: 'btn btn-outline-danger',
        popup: 'modal-lg'
    },
    confirmButtonText: 'Next',
    cancelButtonText: 'Exit',
    showCancelButton: true,
    backdrop: false,
    showCloseButton: true,
    preConfirm: (input) => {
        if (input == 'No selections') {
            questionEn.showValidationMessage('Make a choose!');
            return false;
        }
    }
});

async function doTest(lang) {
    // Use localized Swal
    let question = lang == 'it' ? questionIt : questionEn;
    // Actual test score
    let score = 0;
    // Max score
    const max = 40;

    let result;

    // Localized title
    const questionTitle = lang == 'it' ? 'Domanda' : 'Question';

    // Italian questions
    const questionsIt = [
        'Qual\'è il browser più diffuso',
        'Diffusione di Windows nel mondo',
        'Chi vende più dispositivi mobili in italia',
        'Quota di mercato di Facebook in Italia'
    ];

    const questionsEn = [
        'Which is most used browser',
        'Windows Market Share Worldwide',
        'Major Mobile Vendor in Italy',
        'Facebook Market Share in Italy'
    ];
    // Localized questionsIt
    let questions = lang == 'it' ? questionsIt : questionsEn;

    // Answers
    const answers = [
        {
            0: 'Google Chrome',
            1: 'Microsoft Edge',
            2: 'Mozilla Firefox',
            3: 'Opera'
        },
        {
            0: '30%-45%',
            1: '46%-58%',
            2: '59%-70%',
            3: '70%+'
        },
        {
            0: 'Apple',
            1: 'Xiaomi',
            2: 'Samsung',
            3: 'Huawei'
        },
        {
            0: '30%-40%',
            1: '41%-60%',
            2: '60%-75%',
            3: '75%+'
        },
    ];
    const scores = [
        {
            0: 10,
            1: 0,
            2: 0,
            3: 0
        },
        {
            0: 0,
            1: 0,
            2: 5,
            3: 10
        },
        {
            0: 5,
            1: 0,
            2: 10,
            3: 0
        },
        {
            0: 0,
            1: 0,
            2: 5,
            3: 10
        }
    ];

    let qCounter = 0
    result = await question.fire({
        title: `${questionTitle} ${qCounter + 1}`,
        text: questions[qCounter],
        inputOptions: answers[qCounter]
    });
    if (result.isConfirmed) {
        let input = parseInt(question.modalInputValue);
        score += scores[qCounter][input];
    } else return;

    qCounter++;
    result = await question.fire({
        title: `${questionTitle} ${qCounter + 1}`,
        text: questions[qCounter],
        inputOptions: answers[qCounter]
    });
    if (result.isConfirmed) {
        let input = parseInt(question.modalInputValue);
        score += scores[qCounter][input];
    } else return;

    qCounter++;
    result = await question.fire({
        title: `${questionTitle} ${qCounter + 1}`,
        text: questions[qCounter],
        inputOptions: answers[qCounter]
    });
    if (result.isConfirmed) {
        let input = parseInt(question.modalInputValue);
        score += scores[qCounter][input];
    } else return;

    qCounter++;
    result = await question.fire({
        title: `${questionTitle} ${qCounter + 1}`,
        text: questions[qCounter],
        inputOptions: answers[qCounter]
    });
    if (result.isConfirmed) {
        let input = parseInt(question.modalInputValue);
        score += scores[qCounter][input];
    } else return;

    if (score == max) {
        if (lang == 'en')
            Swal.fire('Wanderful!', `Your score is ${score}/${max}`, 'success');
        else
            Swal.fire('Perfetto!', `Hai totalizzato ${score} punti su ${max}`, 'success');
    } else {
        if (lang == 'en')
            Swal.fire('Ouch!', `Your score is ${score}/${max}, you may do better!`, 'warning');
        else
            Swal.fire('Ahi!', `Ha totalizzato ${score} punti su ${max}. Puoi fare meglio!`, 'warning');
    }

}