diff --git a/docs/bundle.js b/docs/bundle.js index 159578e..4117fbd 100644 --- a/docs/bundle.js +++ b/docs/bundle.js @@ -1 +1 @@ -(()=>{var e={242:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>a});var o=n(645),r=n.n(o)()(!1);r.push([e.id,"",""]);const a=r},145:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>a});var o=n(645),r=n.n(o)()(!1);r.push([e.id,"div.account-popup{width:100%;height:100%;background-color:rgba(0,0,0,.7);position:absolute;top:0;display:none;justify-content:center;align-items:center;z-index:100}div.account-popup__close-popup{position:absolute;top:0;right:14px;font-size:40px;transform:rotate(45deg);cursor:pointer}div.account-popup__content{width:500px;background-color:#fff;border-radius:4px;position:relative;padding:22px;padding-bottom:32px}.account-popup__image{width:180px}.account-popup__checkbox{margin-right:10px}.account-popup__subtitle{margin:18px 0}.account-popup__mandatory-container{margin-top:10px}.account-popup__checkbox-container{display:flex;align-items:center;margin-top:14px}.account-popup__inputs-container{margin-bottom:10px}.account-popup__inputs-container .input-text{border-bottom:1px solid;padding-left:2px;margin-bottom:13px}.account-popup__inputs-container .input-text::placeholder{text-transform:uppercase}.z-h4,.rte h4,.section-page .rte h2,.article .rte h2{font-size:1.875rem;letter-spacing:.59px;line-height:36px}.account-popup__container .input-text{border-top-style:hidden;border-right-style:hidden;border-left-style:hidden;border-bottom-style:groove;width:100%;font:400 13.3333px Arial}.account-popup__container button{padding:10px;width:100%;background-color:#de7154;border:none;text-transform:uppercase;color:#fff}.account-popup__container button:disabled,button[disabled]{background-color:#c6c1be}",""]);const a=r},910:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>a});var o=n(645),r=n.n(o)()(!1);r.push([e.id,"",""]);const a=r},392:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>a});var o=n(645),r=n.n(o)()(!1);r.push([e.id,"",""]);const a=r},645:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=function(e,t){var n,o,r,a=e[1]||"",c=e[3];if(!c)return a;if(t&&"function"==typeof btoa){var i=(n=c,o=btoa(unescape(encodeURIComponent(JSON.stringify(n)))),r="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(o),"/*# ".concat(r," */")),s=c.sources.map((function(e){return"/*# sourceURL=".concat(c.sourceRoot||"").concat(e," */")}));return[a].concat(s).concat([i]).join("\n")}return[a].join("\n")}(t,e);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},t.i=function(e,n,o){"string"==typeof e&&(e=[[null,e,""]]);var r={};if(o)for(var a=0;a{var o='
Connexion / Inscription

Renseignez votre adresse email pour continuer.


';e.exports=o},592:e=>{e.exports='
'},611:(e,t,n)=>{var o='
Création de compte.

Renseignez vos informations pour créer votre compte Franklin.

';e.exports=o},876:(e,t,n)=>{var o='
';e.exports=o},91:e=>{"use strict";e.exports=function(e,t){return t||(t={}),"string"!=typeof(e=e&&e.__esModule?e.default:e)?e:(t.hash&&(e+=t.hash),t.maybeNeedQuotes&&/[\t\n\f\r "'=<>`]/.test(e)?'"'.concat(e,'"'):e)}},933:e=>{e.exports="https://devw.github.io/script-tag/331390584cb4fcf53d8ee930e76aaf05.png"},598:e=>{e.exports="https://devw.github.io/script-tag/2e440e3899d8b2376497eb6551c7cfeb.png"},311:e=>{e.exports="https://devw.github.io/script-tag/a53af018001d43d4aa79c9a4b7331f3b.png"},300:(e,t)=>{"use strict";var n=function(){if("undefined"!=typeof self)return self;if("undefined"!=typeof window)return window;if(void 0!==n)return n;throw new Error("unable to locate global object")}();e.exports=t=n.fetch,n.fetch&&(t.default=n.fetch.bind(n)),t.Headers=n.Headers,t.Request=n.Request,t.Response=n.Response},573:(e,t,n)=>{var o=n(379),r=n(242);"string"==typeof(r=r.__esModule?r.default:r)&&(r=[[e.id,r,""]]);o(r,{insert:"head",singleton:!1}),e.exports=r.locals||{}},169:(e,t,n)=>{var o=n(379),r=n(145);"string"==typeof(r=r.__esModule?r.default:r)&&(r=[[e.id,r,""]]);o(r,{insert:"head",singleton:!1}),e.exports=r.locals||{}},587:(e,t,n)=>{var o=n(379),r=n(910);"string"==typeof(r=r.__esModule?r.default:r)&&(r=[[e.id,r,""]]);o(r,{insert:"head",singleton:!1}),e.exports=r.locals||{}},603:(e,t,n)=>{var o=n(379),r=n(392);"string"==typeof(r=r.__esModule?r.default:r)&&(r=[[e.id,r,""]]);o(r,{insert:"head",singleton:!1}),e.exports=r.locals||{}},379:(e,t,n)=>{"use strict";var o,r=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}(),a=[];function c(e){for(var t=-1,n=0;n{e.exports={STOREFRONT_ENDPOINT:"https://paso2020.myshopify.com/api/graphql",STOREFRONT_TOKEN:"fcff98a27bb929d313f8bf1e7c1e8594",AWS:"https://cldw0t4rik.execute-api.eu-west-1.amazonaws.com",LANG:"fr",IMAGE_REPOSITORY:"https://devw.github.io/script-tag/",SCRIPT_TAG_SRC:"https://devw.github.io//script-tag/bundle.js"}}},t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={id:o,exports:{}};return e[o](r,r.exports,n),r.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{"use strict";n(169);var e=n(592),t=n.n(e);const o=document.createElement("div");o.innerHTML=t(),n(573),n(587),n(603);var r=n(990),a=n.n(r);const c=({target:e})=>{const t=u.querySelectorAll("button");/\S+@\S+\.\S+/.test(e.value)?s(t,e):i(t)},i=e=>e.forEach((e=>e.setAttribute("disabled","true"))),s=(e,t)=>{e.forEach((e=>e.removeAttribute("disabled"))),sessionStorage.setItem("email",t.value)},u=document.createElement("div");u.innerHTML=a();var p=n(611),d=n.n(p),l=n(300),m=n.n(l);const f=n(182),v=({query:e,input:t})=>({query:e,variables:{input:t}}),b=async e=>{const t=await m()(f.STOREFRONT_ENDPOINT,(n=e,{method:"post",headers:{"Content-Type":"application/json",Accept:"application/json","X-Shopify-Storefront-Access-Token":f.STOREFRONT_TOKEN},body:JSON.stringify(n)}));var n;return await t.json()},h=e=>Array.from(new FormData(e)).reduce(((e,t)=>({...e,[t[0]]:t[1]})),{}),g=e=>{const t=h(e.querySelector("form"));return Object.values(t).every((e=>e.length>0))},y=async()=>{S.style.opacity="0.2";const e=h(S.querySelector("form"));e.acceptsMarketing="on"===e.acceptsMarketing,delete e.confirmPassword,await(async e=>{const t=v({query:"mutation customerCreate($input: CustomerCreateInput!) {\n customerCreate(input: $input) {\n customer {\n id\n }\n customerUserErrors {\n code\n field\n message\n }\n }\n}",input:e});return await b(t)})(e),S.style.opacity="1",R()},_=()=>{const e=S.querySelector("button");g(S)?e.removeAttribute("disabled"):e.setAttribute("disabled","true")},x=e=>{e.querySelector("[name=email]").value=sessionStorage.getItem("email"),e.querySelector("button").addEventListener("click",y),e.querySelector("form").addEventListener("input",_)},S=document.createElement("div");S.innerHTML=d();var w=n(876),T=n.n(w);const k=async()=>{A.style.opacity="0.1";const e=h(A.querySelector("form")),{data:t}=await(async e=>{const t=v({query:"mutation customerAccessTokenCreate($input: CustomerAccessTokenCreateInput!) {\n customerAccessTokenCreate(input: $input) {\n customerAccessToken {\n accessToken\n expiresAt\n }\n customerUserErrors {\n code\n field\n message\n }\n }\n}",input:e});return await b(t)})(e);A.style.opacity="1",console.log("submitListener",t),E(t)?alert("You are logged in")||A.parentNode.parentNode.remove():alert("Wrong password/email, try again!")},C=()=>{const e=A.querySelector("button");g(A)?e.removeAttribute("disabled"):e.setAttribute("disabled","true")},E=e=>e?.customerAccessTokenCreate?.customerAccessToken?.accessToken,q=e=>{e.querySelector("form").addEventListener("input",C),e.querySelector("[name=email]").value=sessionStorage.getItem("email"),e.querySelector("button").addEventListener("click",k)},A=document.createElement("div");A.innerHTML=T();const M=".account-popup__container",O=({dom:e,callback:t})=>{const n=document.querySelector(".account-popup");(e=>{e.querySelector(M).innerHTML="",e.style.display="flex",e.querySelector(".account-popup__close-popup").addEventListener("click",(()=>{e.style.display="none"}))})(n),n.querySelector(M).appendChild(e),t(n)},R=()=>O({dom:A,callback:q}),N=()=>O({dom:S,callback:x});document.body.appendChild(o),O({dom:u,callback:e=>{e.querySelector(".input-text").addEventListener("input",c),e.querySelector("[name=signUp]").addEventListener("click",N),e.querySelector("[name=signIn]").addEventListener("click",R)}})})()})(); \ No newline at end of file +(()=>{var e={242:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>a});var o=n(645),r=n.n(o)()(!1);r.push([e.id,"",""]);const a=r},145:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>a});var o=n(645),r=n.n(o)()(!1);r.push([e.id,":root{--background-color: rgba(100, 91, 91, 0.7);--main-text-color: #111}div.account-popup{color:var(--main-text-color);width:70%;height:100%;background-color:var(--background-color);position:absolute;top:0;display:none;justify-content:center;align-items:center;z-index:100;right:0}div.account-popup__close-popup{position:absolute;top:0;right:14px;font-size:40px;transform:rotate(45deg);cursor:pointer}div.account-popup__content{width:500px;background-color:#fff;border-radius:4px;position:relative;padding:22px;padding-bottom:32px}.account-popup__image{width:180px}.account-popup__checkbox{margin-right:10px}.account-popup__subtitle{margin:18px 0}.account-popup__mandatory-container{margin-top:10px}.account-popup__checkbox-container{display:flex;align-items:center;margin-top:14px}.account-popup__inputs-container{margin-bottom:10px}.account-popup__inputs-container .input-text{border-bottom:1px solid;padding-left:2px;margin-bottom:13px}.account-popup__inputs-container .input-text::placeholder{text-transform:uppercase}.z-h4,.rte h4,.section-page .rte h2,.article .rte h2{font-size:1.875rem;letter-spacing:.59px;line-height:36px}.account-popup__container .input-text{border-top-style:hidden;border-right-style:hidden;border-left-style:hidden;border-bottom-style:groove;width:100%;font:400 13.3333px Arial}.account-popup__container button{padding:10px;width:100%;background-color:#de7154;border:none;text-transform:uppercase;color:#fff}.account-popup__container button:disabled,button[disabled]{background-color:#c6c1be}",""]);const a=r},910:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>a});var o=n(645),r=n.n(o)()(!1);r.push([e.id,"",""]);const a=r},392:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>a});var o=n(645),r=n.n(o)()(!1);r.push([e.id,"",""]);const a=r},914:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>a});var o=n(645),r=n.n(o)()(!1);r.push([e.id,".button {\n padding: 10px;\n cursor: pointer;\n}\n\n.overlay {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n visibility: hidden;\n opacity: 0;\n}\n.overlay:target {\n visibility: visible;\n opacity: 1;\n}\n\n.custom-popup {\n padding: 20px;\n background: #ccc;\n width: 28%;\n position: relative;\n transition: all 5s ease-in-out;\n}\n\n.custom-popup h2 {\n margin-top: 0;\n color: #333;\n font-family: Tahoma, Arial, sans-serif;\n}\n.custom-popup .custom-close {\n position: absolute;\n top: 20px;\n right: 30px;\n transition: all 200ms;\n font-size: 30px;\n font-weight: bold;\n text-decoration: none;\n color: #333;\n}\n.custom-popup .custom-close:hover {\n color: #06d85f;\n}\n.custom-popup .content {\n max-height: 30%;\n overflow: auto;\n}\n\n@media screen and (max-width: 700px) {\n .box {\n width: 70%;\n }\n .custom-popup {\n width: 70%;\n }\n}\n",""]);const a=r},645:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=function(e,t){var n,o,r,a=e[1]||"",i=e[3];if(!i)return a;if(t&&"function"==typeof btoa){var c=(n=i,o=btoa(unescape(encodeURIComponent(JSON.stringify(n)))),r="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(o),"/*# ".concat(r," */")),s=i.sources.map((function(e){return"/*# sourceURL=".concat(i.sourceRoot||"").concat(e," */")}));return[a].concat(s).concat([c]).join("\n")}return[a].join("\n")}(t,e);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},t.i=function(e,n,o){"string"==typeof e&&(e=[[null,e,""]]);var r={};if(o)for(var a=0;a{e.exports='

Customize the theme

×
background-color:
main-text-color:
'},990:(e,t,n)=>{var o='
';e.exports=o},592:e=>{e.exports=' '},611:(e,t,n)=>{var o=' ';e.exports=o},876:(e,t,n)=>{var o=' ';e.exports=o},91:e=>{"use strict";e.exports=function(e,t){return t||(t={}),"string"!=typeof(e=e&&e.__esModule?e.default:e)?e:(t.hash&&(e+=t.hash),t.maybeNeedQuotes&&/[\t\n\f\r "'=<>`]/.test(e)?'"'.concat(e,'"'):e)}},933:e=>{e.exports="https://devw.github.io/script-tag/331390584cb4fcf53d8ee930e76aaf05.png"},598:e=>{e.exports="https://devw.github.io/script-tag/2e440e3899d8b2376497eb6551c7cfeb.png"},311:e=>{e.exports="https://devw.github.io/script-tag/a53af018001d43d4aa79c9a4b7331f3b.png"},300:(e,t)=>{"use strict";var n=function(){if("undefined"!=typeof self)return self;if("undefined"!=typeof window)return window;if(void 0!==n)return n;throw new Error("unable to locate global object")}();e.exports=t=n.fetch,n.fetch&&(t.default=n.fetch.bind(n)),t.Headers=n.Headers,t.Request=n.Request,t.Response=n.Response},573:(e,t,n)=>{var o=n(379),r=n(242);"string"==typeof(r=r.__esModule?r.default:r)&&(r=[[e.id,r,""]]);o(r,{insert:"head",singleton:!1}),e.exports=r.locals||{}},169:(e,t,n)=>{var o=n(379),r=n(145);"string"==typeof(r=r.__esModule?r.default:r)&&(r=[[e.id,r,""]]);o(r,{insert:"head",singleton:!1}),e.exports=r.locals||{}},587:(e,t,n)=>{var o=n(379),r=n(910);"string"==typeof(r=r.__esModule?r.default:r)&&(r=[[e.id,r,""]]);o(r,{insert:"head",singleton:!1}),e.exports=r.locals||{}},603:(e,t,n)=>{var o=n(379),r=n(392);"string"==typeof(r=r.__esModule?r.default:r)&&(r=[[e.id,r,""]]);o(r,{insert:"head",singleton:!1}),e.exports=r.locals||{}},658:(e,t,n)=>{var o=n(379),r=n(914);"string"==typeof(r=r.__esModule?r.default:r)&&(r=[[e.id,r,""]]);o(r,{insert:"head",singleton:!1}),e.exports=r.locals||{}},379:(e,t,n)=>{"use strict";var o,r=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}(),a=[];function i(e){for(var t=-1,n=0;n{e.exports={STOREFRONT_ENDPOINT:"https://paso2020.myshopify.com/api/graphql",STOREFRONT_TOKEN:"fcff98a27bb929d313f8bf1e7c1e8594",AWS:"https://cldw0t4rik.execute-api.eu-west-1.amazonaws.com",LANG:"fr",IMAGE_REPOSITORY:"https://devw.github.io/script-tag/",SCRIPT_TAG_SRC:"https://devw.github.io//script-tag/bundle.js"}}},t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={id:o,exports:{}};return e[o](r,r.exports,n),r.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{"use strict";n(169);var e=n(592),t=n.n(e);const o=document.createElement("div");o.innerHTML=t(),n(573),n(587),n(658),n(603);var r=n(990),a=n.n(r);const i=({target:e})=>{const t=u.querySelectorAll("button");/\S+@\S+\.\S+/.test(e.value)?s(t,e):c(t)},c=e=>e.forEach((e=>e.setAttribute("disabled","true"))),s=(e,t)=>{e.forEach((e=>e.removeAttribute("disabled"))),sessionStorage.setItem("email",t.value)},u=document.createElement("div");u.innerHTML=a();var p=n(611),d=n.n(p),l=n(300),m=n.n(l);const v=n(182),f=({query:e,input:t})=>({query:e,variables:{input:t}}),b=async e=>{const t=await m()(v.STOREFRONT_ENDPOINT,(n=e,{method:"post",headers:{"Content-Type":"application/json",Accept:"application/json","X-Shopify-Storefront-Access-Token":v.STOREFRONT_TOKEN},body:JSON.stringify(n)}));var n;return await t.json()},h=e=>Array.from(new FormData(e)).reduce(((e,t)=>({...e,[t[0]]:t[1]})),{}),g=e=>{const t=h(e.querySelector("form"));return Object.values(t).every((e=>e.length>0))},y=async()=>{S.style.opacity="0.2";const e=h(S.querySelector("form"));e.acceptsMarketing="on"===e.acceptsMarketing,delete e.confirmPassword,await(async e=>{const t=f({query:"mutation customerCreate($input: CustomerCreateInput!) {\n customerCreate(input: $input) {\n customer {\n id\n }\n customerUserErrors {\n code\n field\n message\n }\n }\n}",input:e});return await b(t)})(e),S.style.opacity="1",R()},_=()=>{const e=S.querySelector("button");g(S)?e.removeAttribute("disabled"):e.setAttribute("disabled","true")},x=e=>{e.querySelector("[name=email]").value=sessionStorage.getItem("email"),e.querySelector("button").addEventListener("click",y),e.querySelector("form").addEventListener("input",_)},S=document.createElement("div");S.innerHTML=d();var w=n(876),k=n.n(w);const T=async()=>{A.style.opacity="0.1";const e=h(A.querySelector("form")),{data:t}=await(async e=>{const t=f({query:"mutation customerAccessTokenCreate($input: CustomerAccessTokenCreateInput!) {\n customerAccessTokenCreate(input: $input) {\n customerAccessToken {\n accessToken\n expiresAt\n }\n customerUserErrors {\n code\n field\n message\n }\n }\n}",input:e});return await b(t)})(e);A.style.opacity="1",console.log("submitListener",t),C(t)?alert("You are logged in")||A.parentNode.parentNode.remove():alert("Wrong password/email, try again!")},E=()=>{const e=A.querySelector("button");g(A)?e.removeAttribute("disabled"):e.setAttribute("disabled","true")},C=e=>e?.customerAccessTokenCreate?.customerAccessToken?.accessToken,q=e=>{e.querySelector("form").addEventListener("input",E),e.querySelector("[name=email]").value=sessionStorage.getItem("email"),e.querySelector("button").addEventListener("click",T)},A=document.createElement("div");A.innerHTML=k();const M=".account-popup__container",O=({dom:e,callback:t})=>{const n=document.querySelector(".account-popup");(e=>{e.querySelector(M).innerHTML="",e.style.display="flex",e.querySelector(".account-popup__close-popup").addEventListener("click",(()=>{e.style.display="none"}))})(n),n.querySelector(M).appendChild(e),t(n)},R=()=>O({dom:A,callback:q}),N=()=>O({dom:S,callback:x});var j=n(648),L=n.n(j);const I=document.querySelector.bind(document),z=document.createElement("div");z.innerHTML=L(),document.body.appendChild(z);document.body.appendChild(o),O({dom:u,callback:e=>{e.querySelector(".input-text").addEventListener("input",i),e.querySelector("[name=signUp]").addEventListener("click",N),e.querySelector("[name=signIn]").addEventListener("click",R)}}),I("form").addEventListener("submit",(e=>{e.preventDefault(),(e=>Array.from(e.querySelectorAll("input")).map((e=>e.name)))(e.target).forEach((e=>(e=>{const t="--"+e,n=I(`[name='${e}']`).value;document.documentElement.style.setProperty(t,n)})(e)))}))})()})(); \ No newline at end of file diff --git a/package.json b/package.json index a776bde..7f7f55d 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "scripts": { "test": "jest", "prebuild": "rm -rf docs", - "build": "webpack; mv dist docs; git checkout docs/index.html", + "build": "webpack; mv dist docs; cp public/index.html docs/index.html", "start": "node src/services/shopifyAPI.js" }, "dependencies": { diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..e824143 --- /dev/null +++ b/public/index.html @@ -0,0 +1,10 @@ + + + + + scriptTag test + + + + + diff --git a/src/components/custom/custom.css b/src/components/custom/custom.css new file mode 100644 index 0000000..8c07aa7 --- /dev/null +++ b/src/components/custom/custom.css @@ -0,0 +1,58 @@ +.button { + padding: 10px; + cursor: pointer; +} + +.overlay { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + visibility: hidden; + opacity: 0; +} +.overlay:target { + visibility: visible; + opacity: 1; +} + +.custom-popup { + padding: 20px; + background: #ccc; + width: 28%; + position: relative; + transition: all 5s ease-in-out; +} + +.custom-popup h2 { + margin-top: 0; + color: #333; + font-family: Tahoma, Arial, sans-serif; +} +.custom-popup .custom-close { + position: absolute; + top: 20px; + right: 30px; + transition: all 200ms; + font-size: 30px; + font-weight: bold; + text-decoration: none; + color: #333; +} +.custom-popup .custom-close:hover { + color: #06d85f; +} +.custom-popup .content { + max-height: 30%; + overflow: auto; +} + +@media screen and (max-width: 700px) { + .box { + width: 70%; + } + .custom-popup { + width: 70%; + } +} diff --git a/src/components/custom/custom.html b/src/components/custom/custom.html new file mode 100644 index 0000000..cab4d74 --- /dev/null +++ b/src/components/custom/custom.html @@ -0,0 +1,19 @@ +
+
+

Customize the theme

+ × +
+
+
+ background-color: + +
+
+ main-text-color: + +
+ +
+
+
+
diff --git a/src/components/custom/custom.js b/src/components/custom/custom.js new file mode 100644 index 0000000..27e7e06 --- /dev/null +++ b/src/components/custom/custom.js @@ -0,0 +1,26 @@ +import "./custom.css"; +import html from "./custom.html"; + +const $ = document.querySelector.bind(document); + +const setStyle = (e) => { + const p = `--${e}`; + const v = $(`[name='${e}']`).value; + document.documentElement.style.setProperty(p, v); +}; + +const getInputNames = (e) => + Array.from(e.querySelectorAll("input")).map((e) => e.name); + +const init = () => { + $("form").addEventListener("submit", (e) => { + e.preventDefault(); + getInputNames(e.target).forEach((e) => setStyle(e)); + }); +}; + +const node = document.createElement("div"); +node.innerHTML = html; +document.body.appendChild(node); + +export const custom = init; diff --git a/src/components/popup/popup.hbs b/src/components/popup/popup.hbs index bcfa142..8386546 100644 --- a/src/components/popup/popup.hbs +++ b/src/components/popup/popup.hbs @@ -3,6 +3,7 @@ +
Edit
diff --git a/src/components/popup/popup.scss b/src/components/popup/popup.scss index f6e0d86..b55ee60 100644 --- a/src/components/popup/popup.scss +++ b/src/components/popup/popup.scss @@ -1,13 +1,20 @@ +:root { + --background-color: rgba(100, 91, 91, 0.7); + --main-text-color: #111; +} + div.account-popup { - width: 100%; + color: var(--main-text-color); + width: 70%; height: 100%; - background-color: rgba(0, 0, 0, 0.7); + background-color: var(--background-color); position: absolute; top: 0; display: none; justify-content: center; align-items: center; z-index: 100; + right: 0; } div.account-popup__close-popup { diff --git a/src/index.js b/src/index.js index 73ec1e6..444b4b1 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,7 @@ import { popupComponent } from "./components/popup/popup"; import { email } from "./services/change-component"; +import { custom } from "./components/custom/custom"; document.body.appendChild(popupComponent()); email(); +custom();