Tamarin/tamarin.js at final · ProjetsMerlin/Tamarin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
function tamarin(tamarinConfig) {
    if (!tamarinConfig || !tamarinConfig.key ) {
        console.log("Tamarin error : no config or no key")
    }
    else {
        const tamarinKey = tamarinConfig.key

        if (tamarinConfig.style === null || typeof tamarinConfig.style === 'undefined') {
            tamarinConfig.style = {}
            tamarinConfig.style.theme = "theme_1"
            tamarinConfig.style.mainColor = "#272727";
            tamarinConfig.style.textColor = "#ffffff";
            tamarinConfig.style.titleFont = "DM Serif Text";
            tamarinConfig.style.textFont = "Lato";
        }

        var styles = `.mainColor { background-color: ${tamarinConfig.style.mainColor ? tamarinConfig.style.mainColor : "#272727"};}
        .textColor { color: ${tamarinConfig.style.textColor ? tamarinConfig.style.textColor : "#ffffff"};}
        .textBgColor { color: ${tamarinConfig.style.mainColor ? tamarinConfig.style.mainColor : "#272727"};}
        .mainBgColor { background-color: ${tamarinConfig.style.textColor ? tamarinConfig.style.textColor : "#ffffff"};}
        #tamarin h3, #tamarin button {font-family: "${tamarinConfig.style.titleFont ? tamarinConfig.style.titleFont : "DM  Serif Text"}";}
        #tamarin p {font-family: "${tamarinConfig.style.textFont ? tamarinConfig.style.textFont : "Lato"}";}`

        var tailwindCss = document.createElement('link')
        tailwindCss.href = `https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css`
        tailwindCss.rel = 'stylesheet'
        document.head.appendChild(tailwindCss)

        var textFont = tamarinConfig.style.textFont ? tamarinConfig.style.textFont : "Lato"
        var link = document.createElement('link')
        link.href = `https://fonts.googleapis.com/css2?family=${textFont.replace(' ', '+')}:wght@400;700&display=swap`
        link.rel = 'stylesheet'
        document.head.appendChild(link)

        var titleFont = tamarinConfig.style.titleFont ? tamarinConfig.style.titleFont : "DM Serif Text"
        var linkText = document.createElement('link')
        linkText.href = `https://fonts.googleapis.com/css2?family=${titleFont.replace(' ', '+')}:wght@400;700&display=swap`
        linkText.rel = 'stylesheet'
        document.head.appendChild(linkText)

        var styleSheet = document.createElement("style")
        styleSheet.textContent = styles
        document.head.appendChild(styleSheet)

        var tamarinHtml = `<section class=mainColor><div class="relative md:px-8 overflow-hidden px-4 py-14"><div class="relative max-w-xl mx-auto sm:text-center z-10"><div class=space-y-3><h3 class="textColor font-bold text-3xl hidden"id=tamarinThanks></h3><h3 class="textColor font-bold text-3xl"id=tamarinTitle></h3><p class="textColor leading-relaxed"id=tamarinDescription></div><form action=# class="sm:mx-auto bg-white flex items-center justify-center mt-6 p-1 rounded-lg sm:max-w-md"method=post><input class="text-gray-500 outline-none p-2 w-full"id=tamarinEmail name=tamarinEmail required type=email> <button class="textColor duration-150 focus:shadow-none font-medium hover:opacity-80 mainColor outline-none p-2 px-3 rounded-lg shadow-md sm:px-4"id=tamarinButton></button></form><p class="textColor max-w-lg mt-3 sm:mx-auto text-[14px]"id=tamarinTermsText><p class="font-bold hidden align-center p-4 bg-red-300 my-4 text-white"id=tamarinErrorMessage aria-hidden=true><p class="font-bold hidden align-center p-4 m-4 mainBgColor mainColor textBgColor"id=tamarinThanksMessage aria-hidden=true></div></div></section>`
        if( tamarinConfig.style.theme === "theme_1" ) {
            tamarinHtml = `<section class=mainColor><div class="relative md:px-8 overflow-hidden px-4 py-14"><div class="relative max-w-xl mx-auto sm:text-center z-10"><div class=space-y-3><h3 class="textColor font-bold text-3xl hidden"id=tamarinThanks></h3><h3 class="textColor font-bold text-3xl"id=tamarinTitle></h3><p class="textColor leading-relaxed"id=tamarinDescription></div><form action=# class="sm:mx-auto bg-white flex items-center justify-center mt-6 p-1 rounded-lg sm:max-w-md"method=post><input class="text-gray-500 outline-none p-2 w-full"id=tamarinEmail name=tamarinEmail required type=email> <button class="textColor duration-150 focus:shadow-none font-medium hover:opacity-80 mainColor outline-none p-2 px-3 rounded-lg shadow-md sm:px-4"id=tamarinButton></button></form><p class="textColor max-w-lg mt-3 sm:mx-auto text-[14px]"id=tamarinTermsText><p class="font-bold hidden align-center p-4 bg-red-300 my-4 text-white"id=tamarinErrorMessage aria-hidden=true><p class="font-bold hidden align-center p-4 m-4 mainBgColor mainColor textBgColor"id=tamarinThanksMessage aria-hidden=true></div></div></section>`
        }
        else if( tamarinConfig.style.theme === "theme_2" ) {
            tamarinHtml = `<section class="mainColor gap-4 items-center md:flex md:px-8 mx-auto p-12 px-4 xl:gap-12"><div class="flex-1 space-y-3"><h3 class="textColor font-bold lg:text-3xl text-2xl hidden"id=tamarinThanks></h3><h3 class="textColor font-bold lg:text-3xl text-2xl"id=tamarinTitle></h3><p class="textColor leading-relaxed"id=tamarinDescription></div><div class="flex-1 mt-6"><form class="items-center justify-center sm:flex"><input class="border outline-none p-3 rounded-md text-gray-500 w-full"id=tamarinEmail placeholder="Enter your email"type=email> <button class="textColor mt-3 duration-150 focus:ring-2 focus:shadow-none mainColor outline-none px-5 py-3 ring-offset-2 rounded-md shadow-md sm:ml-3 sm:mt-0 sm:w-auto w-full"id=tamarinButton></button></form><p class="textColor mt-3 text-[15px]"id=tamarinTermsText><p class="font-bold hidden align-center p-4 bg-red-300 my-4 text-white"id=tamarinErrorMessage aria-hidden=true><p class="font-bold hidden align-center p-4 m-4 mainBgColor mainColor textBgColor"id=tamarinThanksMessage aria-hidden=true></div></section>`
        }
        else if( tamarinConfig.style.theme === "theme_3" ) {
            tamarinHtml = `<section class="mainColor py-14"><div class="max-w-screen-xl md:px-8 mx-auto px-4"><div class=max-w-xl><h3 class="textColor font-bold text-3xl hidden"id=tamarinThanks></h3><h3 class="textColor font-bold text-3xl"id=tamarinTitle></h3><p class="textColor mt-3"id=tamarinDescription></div><div class=mt-6><form class="flex gap-x-3 items-start"><div class=relative><input class="border outline-none p-3 rounded-md text-gray-500 w-full"id=tamarinEmail placeholder="Enter your email"type=email><p class="textColor mt-3"id=tamarinTermsText><p class="font-bold hidden align-center p-4 bg-red-300 my-4"id=tamarinErrorMessage aria-hidden=true><p class="font-bold hidden align-center p-4 m-4 mainBgColor mainColor textBgColor"id=tamarinThanksMessage aria-hidden=true></div><button class="textColor active:opacity-80 active:shadow-none block font-medium hover:opacity-80 mainColor px-4 py-3 rounded-lg shadow text-center text-sm w-auto"id=tamarinButton>Subscribe</button></form></div></div></section>`
        }

        document.getElementById("tamarin").innerHTML = tamarinHtml

        if (tamarinConfig.content === null || typeof tamarinConfig.content === 'undefined') {
            tamarinConfig.content = {}
        }

        if (tamarinConfig.content.title) { document.getElementById("tamarinTitle").textContent = tamarinConfig.content.title }
        if (tamarinConfig.content.description) { document.getElementById("tamarinDescription").textContent = tamarinConfig.content.description }
        if (tamarinConfig.content.termsText) { document.getElementById("tamarinTermsText").innerHTML = tamarinConfig.content.termsText }
        if (tamarinConfig.content.textButton) { document.getElementById("tamarinButton").innerHTML = tamarinConfig.content.textButton } else { document.getElementById("tamarinButton").innerHTML = 'Send' }
        if (tamarinConfig.content.placeholderEmail) { document.getElementById("tamarinEmail").placeholder = tamarinConfig.content.placeholderEmail } else { document.getElementById("tamarinEmail").placeholder = 'Email' }
        if (tamarinConfig.content.errorMessage) { document.getElementById("tamarinErrorMessage").innerHTML = tamarinConfig.content.errorMessage } else { document.getElementById("tamarinErrorMessage").innerHTML =  'Error'}
        if (tamarinConfig.content.thanksMessage) { document.getElementById("tamarinThanksMessage").innerHTML = tamarinConfig.content.thanksMessage } else { document.getElementById("tamarinThanksMessage").innerHTML =  'Thanks'}

        document.getElementById("tamarinButton").addEventListener('click', function(e) {
            e.preventDefault()

            var options = {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    key: tamarinKey,
                    email: document.getElementById("tamarinEmail").value
                })
            }

            fetch('tamarin.php', options).then(response => response.json()).then(data => {
                document.getElementById("tamarinEmail").value = ""
                if( data.status === 'ok') {
                    document.getElementById("tamarinErrorMessage").classList.add("hidden")
                    document.getElementById("tamarinThanksMessage").classList.remove("hidden")
                }
                else {
                    console.log("Tamarin Message:\n",data.status)
                    document.getElementById("tamarinThanksMessage").classList.add("hidden")
                    document.getElementById("tamarinErrorMessage").classList.remove("hidden")
                }
            }).catch(error => {
                console.error('Erreur lors de l\'envoi de la requête:', error)
            })
        })
    }
}