mailto-fixer
Advanced tools
Comparing version 1.0.0 to 1.0.1
@@ -1,1 +0,1 @@ | ||
(()=>{"use strict";var e={385:(e,n,t)=>{t.d(n,{A:()=>c});var o=t(637),r=t.n(o),a=t(478),l=t.n(a)()(r());l.push([e.id,"/* CSS styles for mailto modal overlay */\n.mailtofixer-modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: Arial, Helvetica, sans-serif;\n}\n\n.mailtofixer-modal {\n background-color: #fff;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);\n width: 90vw;\n max-width: min(500px, 90%);\n text-align: center;\n position: relative;\n padding: 30px;\n padding-bottom: 5px;\n margin: 15px;\n}\n\n.mailtofixer-close-btn {\n position: absolute;\n top: 10px;\n right: 10px;\n background: none;\n border: none;\n font-size: 30px;\n cursor: pointer;\n color: #555;\n}\n\n/* Container for email field and button */\n.mailtofixer-email-field {\n margin-top: 80px;\n position: relative;\n flex-direction: column; /* Change to column direction */\n align-items: center; /* Center items horizontally */\n width: 100%;\n}\n\n/* Email input field */\n.mailtofixer-email-input {\n width: calc(100% - 42px);\n padding: 20px;\n border: 0px solid #6e6e6e;\n border-radius: 5px; /* Rounded corners on the left side */\n font-size: 18px;\n font-weight: bold;\n background-color: #ebeced;\n}\n\n@media screen and (max-width: 600px) {\n .mailtofixer-email-input {\n font-size: 16px;\n }\n}\n\n@media screen and (max-width: 400px) {\n .mailtofixer-email-input {\n font-size: 14px;\n }\n}\n\n/* Button */\n.mailtofixer-copy-btn {\n background-color: #18181a;\n color: white;\n margin-top: 15px;\n padding: 10px 20px;\n width: 100%;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s;\n text-transform: uppercase;\n font-weight: bold;\n font-size: 16px;\n letter-spacing: 1px;\n}\n\n.mailtofixer-modal svg {\n vertical-align: middle;\n margin-right: 7px;\n fill: #8d8d8d;\n}\n\n.mailtofixer-copy-btn svg {\n fill: #f3f4f6;\n vertical-align: middle;\n width: 20px; /* Set the width of the SVG icon */\n height: 20px; /* Set the height of the SVG icon */\n margin-right: 5px; /* Add some margin between the icon and text */\n}\n\n/* Hover effect */\n.mailtofixer-copy-btn:hover {\n /* Darken the background color on hover */\n background-color: #49494b;\n}\n\n.mailtofixer-modal hr {\n border: none;\n border-top: 1px solid #adadad;\n margin: 50px 0;\n}\n\n.mailtofixer-handle-email-text {\n font-size: 16px;\n margin-bottom: 10px;\n color: #555;\n}\n\n.mailtofixer-options {\n display: flex;\n flex-direction: column; /* Changed to column layout */\n align-items: center; /* Center items vertically */\n margin: auto;\n width: 65%;\n}\n\n.mailtofixer-options .mailtofixer-btn {\n width: 100%; /* Make all buttons the same width */\n padding: 10px; /* Adjusted padding */\n margin-bottom: 10px; /* Added margin between buttons */\n background-color: #f4f4f5;\n color: #fff;\n border: none;\n border-radius: 20px;\n cursor: pointer;\n text-decoration: none;\n text-align: start;\n color: #4a4a4a;\n font-weight: bold;\n font-size: 16px;\n transition: background-color 0.3s;\n padding-left: 20px;\n}\n\n.mailtofixer-options .mailtofixer-btn:hover {\n background-color: #d5d5d5;\n}\n\n.mailtofixer-powered {\n margin-top: 20px;\n font-size: 14px;\n color: #797979;\n text-align: right;\n margin-top: 40px;\n margin-bottom: 20px;\n}\n",""]);const c=l},478:e=>{e.exports=function(e){var n=[];return n.toString=function toString(){return this.map((function(n){var t="",o=void 0!==n[5];return n[4]&&(t+="@supports (".concat(n[4],") {")),n[2]&&(t+="@media ".concat(n[2]," {")),o&&(t+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),t+=e(n),o&&(t+="}"),n[2]&&(t+="}"),n[4]&&(t+="}"),t})).join("")},n.i=function i(e,t,o,r,a){"string"==typeof e&&(e=[[null,e,void 0]]);var l={};if(o)for(var c=0;c<this.length;c++){var d=this[c][0];null!=d&&(l[d]=!0)}for(var s=0;s<e.length;s++){var p=[].concat(e[s]);o&&l[p[0]]||(void 0!==a&&(void 0===p[5]||(p[1]="@layer".concat(p[5].length>0?" ".concat(p[5]):""," {").concat(p[1],"}")),p[5]=a),t&&(p[2]?(p[1]="@media ".concat(p[2]," {").concat(p[1],"}"),p[2]=t):p[2]=t),r&&(p[4]?(p[1]="@supports (".concat(p[4],") {").concat(p[1],"}"),p[4]=r):p[4]="".concat(r)),n.push(p))}},n}},637:e=>{e.exports=function(e){return e[1]}},761:e=>{var n=[];function getIndexByIdentifier(e){for(var t=-1,o=0;o<n.length;o++)if(n[o].identifier===e){t=o;break}return t}function modulesToDom(e,t){for(var o={},r=[],a=0;a<e.length;a++){var l=e[a],c=t.base?l[0]+t.base:l[0],d=o[c]||0,s="".concat(c," ").concat(d);o[c]=d+1;var p=getIndexByIdentifier(s),u={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==p)n[p].references++,n[p].updater(u);else{var m=addElementStyle(u,t);t.byIndex=a,n.splice(a,0,{identifier:s,updater:m,references:1})}r.push(s)}return r}function addElementStyle(e,n){var t=n.domAPI(n);t.update(e);return function updater(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap&&n.supports===e.supports&&n.layer===e.layer)return;t.update(e=n)}else t.remove()}}e.exports=function(e,t){var o=modulesToDom(e=e||[],t=t||{});return function update(e){e=e||[];for(var r=0;r<o.length;r++){var a=getIndexByIdentifier(o[r]);n[a].references--}for(var l=modulesToDom(e,t),c=0;c<o.length;c++){var d=getIndexByIdentifier(o[c]);0===n[d].references&&(n[d].updater(),n.splice(d,1))}o=l}}},430:e=>{var n={};e.exports=function insertBySelector(e,t){var o=function getTarget(e){if(void 0===n[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}n[e]=t}return n[e]}(e);if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(t)}},773:e=>{e.exports=function insertStyleElement(e){var n=document.createElement("style");return e.setAttributes(n,e.attributes),e.insert(n,e.options),n}},801:(e,n,t)=>{e.exports=function setAttributesWithoutAttributes(e){var n=t.nc;n&&e.setAttribute("nonce",n)}},494:e=>{e.exports=function domAPI(e){if("undefined"==typeof document)return{update:function update(){},remove:function remove(){}};var n=e.insertStyleElement(e);return{update:function update(t){!function apply(e,n,t){var o="";t.supports&&(o+="@supports (".concat(t.supports,") {")),t.media&&(o+="@media ".concat(t.media," {"));var r=void 0!==t.layer;r&&(o+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),o+=t.css,r&&(o+="}"),t.media&&(o+="}"),t.supports&&(o+="}");var a=t.sourceMap;a&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),n.styleTagTransform(o,e,n.options)}(n,e,t)},remove:function remove(){!function removeStyleElement(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)}}}},106:e=>{e.exports=function styleTagTransform(e,n){if(n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}}},n={};function __webpack_require__(t){var o=n[t];if(void 0!==o)return o.exports;var r=n[t]={id:t,exports:{}};return e[t](r,r.exports,__webpack_require__),r.exports}__webpack_require__.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return __webpack_require__.d(n,{a:n}),n},__webpack_require__.d=(e,n)=>{for(var t in n)__webpack_require__.o(n,t)&&!__webpack_require__.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},__webpack_require__.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),__webpack_require__.nc=void 0,(()=>{var e=__webpack_require__(761),n=__webpack_require__.n(e),t=__webpack_require__(494),o=__webpack_require__.n(t),r=__webpack_require__(430),a=__webpack_require__.n(r),l=__webpack_require__(801),c=__webpack_require__.n(l),d=__webpack_require__(773),s=__webpack_require__.n(d),p=__webpack_require__(106),u=__webpack_require__.n(p),m=__webpack_require__(385),f={};f.styleTagTransform=u(),f.setAttributes=c(),f.insert=a().bind(null,"head"),f.domAPI=o(),f.insertStyleElement=s();n()(m.A,f);m.A&&m.A.locals&&m.A.locals;async function openMailtoPopup(e){const n=document.createElement("div");n.className="mailto-modal-overlay";const t=`\n<div class="mailtofixer-modal-overlay">\n <div class="mailtofixer-modal">\n <button class="mailtofixer-close-btn" data-action="close">×</button>\n <div class="mailtofixer-email-field">\n <input type="text" class="mailtofixer-email-input" value="${e}" readonly>\n <button class="mailtofixer-copy-btn" data-action="copy">\n <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\n \x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e\n <path\n d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z" />\n </svg>\n <span class="mailtofixer-copy-text">Copy</span>\n </button>\n </div>\n <hr>\n </hr>\n <p>Or open with...</p>\n <div class="mailtofixer-options">\n <a href="mailto:${e}" class="mailtofixer-btn default-client">\n <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n <path fill="black"\n d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m-.4 4.25l-7.07 4.42c-.32.2-.74.2-1.06 0L4.4 8.25a.85.85 0 1 1 .9-1.44L12 11l6.7-4.19a.85.85 0 1 1 .9 1.44" />\n </svg>\n Default email client</a>\n <a href="https://mail.google.com/mail/?view=cm&fs=1&to=${e}" target="_blank" class="mailtofixer-btn gmail">\n <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n <path fill="black"\n d="M20 18h-2V9.25L12 13L6 9.25V18H4V6h1.2l6.8 4.25L18.8 6H20m0-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2" />\n </svg>\n Gmail</a>\n <a href="https://outlook.live.com/mail/0/deeplink/compose?to=${e}" target="_blank" class="mailtofixer-btn outlook">\n <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256">\n <path fill="black"\n d="M88 144a16 16 0 1 1 16-16a16 16 0 0 1-16 16m144-32v96a16 16 0 0 1-16 16H88a16 16 0 0 1-16-16v-16H40a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h56V40a8 8 0 0 1 8-8h96a8 8 0 0 1 8 8v64h16a8 8 0 0 1 8 8M112 64h24a16 16 0 0 1 16 16v74.13l40-28.89V48h-80Zm-24 96a32 32 0 1 0-32-32a32 32 0 0 0 32 32m111.26 48L152 173.87V176a16 16 0 0 1-16 16H88v16ZM216 127.65L165.66 164L216 200.35Z" />\n </svg>\n Outlook web</a>\n </div>\n <p class="mailtofixer-powered">Powered by mailtoFixer.js</p>\n </div>\n</div>\n`;n.innerHTML=t,document.body.appendChild(n),n.querySelector(".mailtofixer-close-btn").addEventListener("click",(()=>{!function closeModal(){document.body.removeChild(n)}()})),n.querySelector(".mailtofixer-copy-btn").addEventListener("click",(()=>{!async function mailtoFixerCopyToClipboard(e){const n=document.createElement("textarea");n.value=e,document.body.appendChild(n),n.select(),document.execCommand("copy"),document.body.removeChild(n);const t=document.querySelector(".mailtofixer-copy-btn"),o=t.querySelector(".mailtofixer-copy-text").textContent;t.querySelector(".mailtofixer-copy-text").textContent="Copied!",setTimeout((()=>{t.querySelector(".mailtofixer-copy-text").textContent=o}),1500)}(e)}))}document.addEventListener("DOMContentLoaded",(()=>{!async function initializeMailtoFixer(){const e=document.querySelectorAll('a[href^="mailto:"], a[data-mailtofixer-username][data-mailtofixer-domain]');e.forEach((e=>{e.addEventListener("click",(n=>{if(n.preventDefault(),e.hasAttribute("href")&&e.getAttribute("href").startsWith("mailto:")){openMailtoPopup(e.getAttribute("href").replace("mailto:",""))}else{const n=e.getAttribute("data-mailtofixer-username"),t=e.getAttribute("data-mailtofixer-domain");if(n&&t){openMailtoPopup(`${n}@${t}`)}}}))})),console.log(`MailtoFixer loaded! ${e.length} mailto links found and converted.`)}()}))})()})(); | ||
(()=>{"use strict";var e={385:(e,n,t)=>{t.d(n,{A:()=>c});var o=t(637),r=t.n(o),a=t(478),l=t.n(a)()(r());l.push([e.id,"/* CSS styles for mailto modal overlay */\n.mailtofixer-modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: Arial, Helvetica, sans-serif;\n}\n\n.mailtofixer-modal {\n background-color: #fff;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);\n width: 90vw;\n max-width: min(500px, 90%);\n text-align: center;\n position: relative;\n padding: 30px;\n padding-bottom: 5px;\n margin: 15px;\n}\n\n.mailtofixer-close-btn {\n position: absolute;\n top: 10px;\n right: 10px;\n background: none;\n border: none;\n font-size: 30px;\n cursor: pointer;\n color: #555;\n}\n\n/* Container for email field and button */\n.mailtofixer-email-field {\n margin-top: 80px;\n position: relative;\n flex-direction: column; /* Change to column direction */\n align-items: center; /* Center items horizontally */\n width: 100%;\n}\n\n/* Email input field */\n.mailtofixer-email-input {\n width: calc(100% - 42px);\n padding: 20px;\n border: 0px solid #6e6e6e;\n border-radius: 5px; /* Rounded corners on the left side */\n font-size: 18px;\n font-weight: bold;\n background-color: #ebeced;\n}\n\n@media screen and (max-width: 600px) {\n .mailtofixer-email-input {\n font-size: 16px;\n }\n}\n\n@media screen and (max-width: 400px) {\n .mailtofixer-email-input {\n font-size: 14px;\n }\n}\n\n/* Button */\n.mailtofixer-copy-btn {\n background-color: #18181a;\n color: white;\n margin-top: 15px;\n padding: 10px 20px;\n width: 100%;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s;\n text-transform: uppercase;\n font-weight: bold;\n font-size: 16px;\n letter-spacing: 1px;\n}\n\n.mailtofixer-modal svg {\n vertical-align: middle;\n margin-right: 7px;\n fill: #8d8d8d;\n}\n\n.mailtofixer-copy-btn svg {\n fill: #f3f4f6;\n vertical-align: middle;\n width: 20px; /* Set the width of the SVG icon */\n height: 20px; /* Set the height of the SVG icon */\n margin-right: 5px; /* Add some margin between the icon and text */\n}\n\n/* Hover effect */\n.mailtofixer-copy-btn:hover {\n /* Darken the background color on hover */\n background-color: #49494b;\n}\n\n.mailtofixer-modal hr {\n border: none;\n border-top: 1px solid #adadad;\n margin: 50px 0;\n}\n\n.mailtofixer-handle-email-text {\n font-size: 16px;\n margin-bottom: 10px;\n color: #555;\n}\n\n.mailtofixer-options {\n display: flex;\n flex-direction: column; /* Changed to column layout */\n align-items: center; /* Center items vertically */\n margin: auto;\n width: 65%;\n}\n\n.mailtofixer-options .mailtofixer-btn {\n width: 100%; /* Make all buttons the same width */\n padding: 10px; /* Adjusted padding */\n margin-bottom: 10px; /* Added margin between buttons */\n background-color: #f4f4f5;\n color: #fff;\n border: none;\n border-radius: 20px;\n cursor: pointer;\n text-decoration: none;\n text-align: start;\n color: #4a4a4a;\n font-weight: bold;\n font-size: 16px;\n transition: background-color 0.3s;\n padding-left: 20px;\n}\n\n.mailtofixer-options .mailtofixer-btn:hover {\n background-color: #d5d5d5;\n}\n\n.mailtofixer-powered {\n margin-top: 20px;\n font-size: 14px;\n color: #797979;\n text-align: right;\n margin-top: 40px;\n margin-bottom: 20px;\n}\n",""]);const c=l},478:e=>{e.exports=function(e){var n=[];return n.toString=function toString(){return this.map((function(n){var t="",o=void 0!==n[5];return n[4]&&(t+="@supports (".concat(n[4],") {")),n[2]&&(t+="@media ".concat(n[2]," {")),o&&(t+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),t+=e(n),o&&(t+="}"),n[2]&&(t+="}"),n[4]&&(t+="}"),t})).join("")},n.i=function i(e,t,o,r,a){"string"==typeof e&&(e=[[null,e,void 0]]);var l={};if(o)for(var c=0;c<this.length;c++){var d=this[c][0];null!=d&&(l[d]=!0)}for(var s=0;s<e.length;s++){var p=[].concat(e[s]);o&&l[p[0]]||(void 0!==a&&(void 0===p[5]||(p[1]="@layer".concat(p[5].length>0?" ".concat(p[5]):""," {").concat(p[1],"}")),p[5]=a),t&&(p[2]?(p[1]="@media ".concat(p[2]," {").concat(p[1],"}"),p[2]=t):p[2]=t),r&&(p[4]?(p[1]="@supports (".concat(p[4],") {").concat(p[1],"}"),p[4]=r):p[4]="".concat(r)),n.push(p))}},n}},637:e=>{e.exports=function(e){return e[1]}},761:e=>{var n=[];function getIndexByIdentifier(e){for(var t=-1,o=0;o<n.length;o++)if(n[o].identifier===e){t=o;break}return t}function modulesToDom(e,t){for(var o={},r=[],a=0;a<e.length;a++){var l=e[a],c=t.base?l[0]+t.base:l[0],d=o[c]||0,s="".concat(c," ").concat(d);o[c]=d+1;var p=getIndexByIdentifier(s),u={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==p)n[p].references++,n[p].updater(u);else{var m=addElementStyle(u,t);t.byIndex=a,n.splice(a,0,{identifier:s,updater:m,references:1})}r.push(s)}return r}function addElementStyle(e,n){var t=n.domAPI(n);t.update(e);return function updater(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap&&n.supports===e.supports&&n.layer===e.layer)return;t.update(e=n)}else t.remove()}}e.exports=function(e,t){var o=modulesToDom(e=e||[],t=t||{});return function update(e){e=e||[];for(var r=0;r<o.length;r++){var a=getIndexByIdentifier(o[r]);n[a].references--}for(var l=modulesToDom(e,t),c=0;c<o.length;c++){var d=getIndexByIdentifier(o[c]);0===n[d].references&&(n[d].updater(),n.splice(d,1))}o=l}}},430:e=>{var n={};e.exports=function insertBySelector(e,t){var o=function getTarget(e){if(void 0===n[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}n[e]=t}return n[e]}(e);if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(t)}},773:e=>{e.exports=function insertStyleElement(e){var n=document.createElement("style");return e.setAttributes(n,e.attributes),e.insert(n,e.options),n}},801:(e,n,t)=>{e.exports=function setAttributesWithoutAttributes(e){var n=t.nc;n&&e.setAttribute("nonce",n)}},494:e=>{e.exports=function domAPI(e){if("undefined"==typeof document)return{update:function update(){},remove:function remove(){}};var n=e.insertStyleElement(e);return{update:function update(t){!function apply(e,n,t){var o="";t.supports&&(o+="@supports (".concat(t.supports,") {")),t.media&&(o+="@media ".concat(t.media," {"));var r=void 0!==t.layer;r&&(o+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),o+=t.css,r&&(o+="}"),t.media&&(o+="}"),t.supports&&(o+="}");var a=t.sourceMap;a&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),n.styleTagTransform(o,e,n.options)}(n,e,t)},remove:function remove(){!function removeStyleElement(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)}}}},106:e=>{e.exports=function styleTagTransform(e,n){if(n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}}},n={};function __webpack_require__(t){var o=n[t];if(void 0!==o)return o.exports;var r=n[t]={id:t,exports:{}};return e[t](r,r.exports,__webpack_require__),r.exports}__webpack_require__.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return __webpack_require__.d(n,{a:n}),n},__webpack_require__.d=(e,n)=>{for(var t in n)__webpack_require__.o(n,t)&&!__webpack_require__.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},__webpack_require__.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),__webpack_require__.nc=void 0,(()=>{var e=__webpack_require__(761),n=__webpack_require__.n(e),t=__webpack_require__(494),o=__webpack_require__.n(t),r=__webpack_require__(430),a=__webpack_require__.n(r),l=__webpack_require__(801),c=__webpack_require__.n(l),d=__webpack_require__(773),s=__webpack_require__.n(d),p=__webpack_require__(106),u=__webpack_require__.n(p),m=__webpack_require__(385),f={};f.styleTagTransform=u(),f.setAttributes=c(),f.insert=a().bind(null,"head"),f.domAPI=o(),f.insertStyleElement=s();n()(m.A,f);m.A&&m.A.locals&&m.A.locals;document.addEventListener("DOMContentLoaded",(()=>{!async function initializeMailtoFixer(){const e=document.querySelectorAll('a[href^="mailto:"], a[data-mailtofixer-username][data-mailtofixer-domain]');e.forEach((e=>{const n=function getEmailFromLink(e){if(e.hasAttribute("href")&&e.getAttribute("href").startsWith("mailto:"))return e.getAttribute("href").replace("mailto:","");{const n=e.getAttribute("data-mailtofixer-username"),t=e.getAttribute("data-mailtofixer-domain");if(n&&t)return`${n}@${t}`}return null}(e);n&&(e.addEventListener("click",(e=>{e.preventDefault(),async function openMailtoPopup(e){const n=document.createElement("div");n.className="mailto-modal-overlay";const t=`\n<div class="mailtofixer-modal-overlay">\n <div class="mailtofixer-modal">\n <button class="mailtofixer-close-btn" data-action="close">×</button>\n <div class="mailtofixer-email-field">\n <input type="text" class="mailtofixer-email-input" value="${e}" readonly>\n <button class="mailtofixer-copy-btn" data-action="copy">\n <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\n \x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e\n <path\n d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z" />\n </svg>\n <span class="mailtofixer-copy-text">Copy</span>\n </button>\n </div>\n <hr>\n </hr>\n <p>Or open with...</p>\n <div class="mailtofixer-options">\n <a href="mailto:${e}" class="mailtofixer-btn default-client">\n <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n <path fill="black"\n d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m-.4 4.25l-7.07 4.42c-.32.2-.74.2-1.06 0L4.4 8.25a.85.85 0 1 1 .9-1.44L12 11l6.7-4.19a.85.85 0 1 1 .9 1.44" />\n </svg>\n Default email client</a>\n <a href="https://mail.google.com/mail/?view=cm&fs=1&to=${e}" target="_blank" class="mailtofixer-btn gmail">\n <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n <path fill="black"\n d="M20 18h-2V9.25L12 13L6 9.25V18H4V6h1.2l6.8 4.25L18.8 6H20m0-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2" />\n </svg>\n Gmail</a>\n <a href="https://outlook.live.com/mail/0/deeplink/compose?to=${e}" target="_blank" class="mailtofixer-btn outlook">\n <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256">\n <path fill="black"\n d="M88 144a16 16 0 1 1 16-16a16 16 0 0 1-16 16m144-32v96a16 16 0 0 1-16 16H88a16 16 0 0 1-16-16v-16H40a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h56V40a8 8 0 0 1 8-8h96a8 8 0 0 1 8 8v64h16a8 8 0 0 1 8 8M112 64h24a16 16 0 0 1 16 16v74.13l40-28.89V48h-80Zm-24 96a32 32 0 1 0-32-32a32 32 0 0 0 32 32m111.26 48L152 173.87V176a16 16 0 0 1-16 16H88v16ZM216 127.65L165.66 164L216 200.35Z" />\n </svg>\n Outlook web</a>\n </div>\n <p class="mailtofixer-powered">Powered by mailtoFixer.js</p>\n </div>\n</div>\n`;function closeModal(){document.body.removeChild(n)}async function mailtoFixerCopyToClipboard(e){const n=document.createElement("textarea");n.value=e,document.body.appendChild(n),n.select(),document.execCommand("copy"),document.body.removeChild(n);const t=document.querySelector(".mailtofixer-copy-btn"),o=t.querySelector(".mailtofixer-copy-text").textContent;t.querySelector(".mailtofixer-copy-text").textContent="Copied!",setTimeout((()=>{t.querySelector(".mailtofixer-copy-text").textContent=o}),1500)}n.innerHTML=t,document.body.appendChild(n),n.querySelector(".mailtofixer-close-btn").addEventListener("click",(()=>{closeModal()})),n.querySelector(".mailtofixer-copy-btn").addEventListener("click",(()=>{mailtoFixerCopyToClipboard(e)}))}(n)})),"true"===e.getAttribute("data-mailtofixer-replace-content")&&(e.textContent=n))})),console.log(`MailtoFixer loaded! ${e.length} mailto links found and converted.`)}()}))})()})(); |
{ | ||
"name": "mailto-fixer", | ||
"version": "1.0.0", | ||
"version": "1.0.1", | ||
"description": "A library for better mailto links.", | ||
@@ -8,3 +8,3 @@ "main": "/dist/mailtoFixer.min.js", | ||
"type": "git", | ||
"url": "git+https://github.com/your-username/mailtofixer.git" | ||
"url": "git+https://github.com/Emahhh/mailtoFixer.js.git" | ||
}, | ||
@@ -18,6 +18,5 @@ "keywords": [ | ||
"license": "MIT", | ||
"dependencies": { | ||
"prettier": "^3.2.5" | ||
}, | ||
"dependencies": {}, | ||
"devDependencies": { | ||
"prettier": "^3.2.5", | ||
"css-loader": "^7.1.1", | ||
@@ -24,0 +23,0 @@ "style-loader": "^4.0.0", |
@@ -1,7 +0,11 @@ | ||
# `mailto:` links are outdated. `mailtoFixer.js` fixes that. | ||
# mailto: links are outdated. mailtoFixer.js fixes that. | ||
## Quick start | ||
Mailto links are a simple and effective way to send an email, but users feel frustrated when they click a mailto link and it opens their default email client, which they never wanted. `mailtofixer.js` fixes that. | ||
1. Include the `mailtoFixer.js` in your web page by pasting this code snippet into the `<head>` section of your HTML: | ||
1. Include the `mailtoFixer.js` in your web page. You can do so by pasting this code snippet into the `<head>` section of your HTML: | ||
```html | ||
... | ||
<script src="https://cdn.jsdelivr.net/npm/mailto-fixer/dist/mailtoFixer.min.js"></script> | ||
``` | ||
@@ -25,4 +29,13 @@ 1. Done! Now, every `mailto:` link in your page is automatically upgraded: when a user clicks on it, it opens a nice modal that gives users the choice to do what they actually want and expect. | ||
``` | ||
If you also want the text inside the <a> tag to be replaced with the email address, just add the `data-mailtofixer-replace-content=true` attribute to the <a> tag. Example | ||
> "But is this actually enough to protect me from spam?" | ||
```html | ||
<a href="#" data-mailtofixer-username="john" data-mailtofixer-domain="gmail.com" data-mailtofixer-replace-content="true">This text will be replaced with the email address</a> | ||
``` | ||
<br> | ||
<br> | ||
> *"Is this actually enough to protect me from spam?"* | ||
> | ||
> You're right, a spammer could easily find your email address by evaluating the JavaScript in your page or by detecting this syntax. But most spammers are lazy: they don't evaluate JavaScript and are just looking for plain email addresses. This should be enough to protect you from the vast majority of spammers. | ||
@@ -32,3 +45,5 @@ | ||
You can currently customize the look of the modal by overriding the CSS classes defined in the `/src/styles.css` file. | ||
## Roadmap | ||
@@ -43,3 +58,1 @@ | ||
## License | ||
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. |
@@ -10,3 +10,3 @@ import './styles.css'; | ||
* Initialize MailtoFixer functionality. | ||
* Changes every mailto link and custom obfuscated link to open a popup with email client options. | ||
* Changes every mailto link and custom obfuscated link to replace the content with the email address. | ||
*/ | ||
@@ -19,22 +19,17 @@ async function initializeMailtoFixer() { | ||
mailtoLinks.forEach((link) => { | ||
const email = getEmailFromLink(link); | ||
if (!email) return; | ||
// replace the event listener: instead of the default action, open the mailto popup | ||
link.addEventListener('click', (event) => { | ||
event.preventDefault(); | ||
openMailtoPopup(email); | ||
}); | ||
if ( | ||
link.hasAttribute('href') && | ||
link.getAttribute('href').startsWith('mailto:') | ||
) { | ||
// Extract email from traditional mailto link | ||
const email = link.getAttribute('href').replace('mailto:', ''); | ||
openMailtoPopup(email); | ||
} else { | ||
// Extract email from custom obfuscated link | ||
const username = link.getAttribute('data-mailtofixer-username'); | ||
const domain = link.getAttribute('data-mailtofixer-domain'); | ||
if (username && domain) { | ||
const email = `${username}@${domain}`; | ||
openMailtoPopup(email); | ||
} | ||
} | ||
}); | ||
// if this attribute is true, we also have to replace the text content with the actual email address | ||
if (link.getAttribute('data-mailtofixer-replace-content') === 'true') { | ||
link.textContent = email; | ||
} | ||
}); | ||
@@ -46,2 +41,24 @@ | ||
/** | ||
* Extracts email from the given link. | ||
* @param {HTMLElement} link - The link element. | ||
* @returns {string} The email address extracted from the link. | ||
*/ | ||
function getEmailFromLink(link) { | ||
if (link.hasAttribute('href') && link.getAttribute('href').startsWith('mailto:')) { | ||
// Extract email from traditional mailto link | ||
return link.getAttribute('href').replace('mailto:', ''); | ||
} else { | ||
// Extract email from custom obfuscated link | ||
const username = link.getAttribute('data-mailtofixer-username'); | ||
const domain = link.getAttribute('data-mailtofixer-domain'); | ||
if (username && domain) { | ||
return `${username}@${domain}`; | ||
} | ||
} | ||
return null; // Return null if email cannot be extracted | ||
} | ||
/** | ||
* Open a popup within the page with options to handle the given email address. | ||
@@ -48,0 +65,0 @@ * @param {string} email The email address to handle. |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
29210
0
13
325
56
6
- Removedprettier@^3.2.5
- Removedprettier@3.4.2(transitive)