They will be injected by Tampermonkey
index-testing-modal1.html and index-testing-modal2.html are only for testing locally the UI. The ones that will be injected will be modal1-select.html and modal2.html
modal1 is for selecting templates modal2 is the actual form with the keywords input to be replaced
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <link rel="stylesheet" type="text/css" href="modal.css"> | |
| </head> | |
| <body> | |
| <!-- ------------- --> | |
| <!-- BEGIN MODAL --> | |
| <!-- ------------- --> | |
| <div id="ths-form-templates"> | |
| <!-- INSERT_OWNER_NAMES, INSERT_PET_NAMES, INSERT_PET_TYPES, INSERT_PET_PRONOUN, TEXT_CUSTOM_BODY --> | |
| <form class="form"> | |
| <p class="fieldset"> | |
| <label for="INSERT_OWNER_NAMES"> INSERT_OWNER_NAMES</label> | |
| <input type="text" name="INSERT_OWNER_NAMES" id=""> | |
| </p> | |
| <p class="fieldset"> | |
| <label for="INSERT_PET_NAMES"> INSERT_PET_NAMES</label> | |
| <input type="text" name="INSERT_PET_NAMES" id=""> | |
| </p> | |
| <p class="fieldset"> | |
| <label for="INSERT_PET_TYPES"> INSERT_PET_TYPES</label> | |
| <input type="text" name="INSERT_PET_TYPES" id=""> | |
| </p> | |
| <p class="fieldset"> | |
| <label for="INSERT_PET_PRONOUN"> INSERT_PET_PRONOUN</label> | |
| <!-- <input type="text" name="INSERT_PET_PRONOUN" id=""> --> | |
| <select name="INSERT_PET_PRONOUN"> | |
| <option value="" disabled selected>-- select an option -- </option> | |
| <option value="him">Him</option> | |
| <option value="her">Her</option> | |
| <option value="them">Them</option> | |
| </select> | |
| </p> | |
| <p class="fieldset"> | |
| <label for="TEXT_CUSTOM_BODY"> TEXT_CUSTOM_BODY</label> | |
| <textarea type="text" name="TEXT_CUSTOM_BODY" id=""> | |
| </textarea> | |
| </p> | |
| <p class="fieldset"> | |
| <input class="full-width has-padding" type="submit" value="Generate"> | |
| </p> | |
| </form> | |
| </div> | |
| <!-- ------------- --> | |
| <!-- END MODAL --> | |
| <!-- ------------- --> | |
| </body> | |
| </html> |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <link rel="stylesheet" type="text/css" href="modal1-select.css"> | |
| <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> | |
| </head> | |
| <body> | |
| <!-- ------------- --> | |
| <!-- BEGIN MODAL --> | |
| <!-- ------------- --> | |
| <div id="dialog-form" title="Create new user"> | |
| <p class="validateTips">All form fields are required.</p> | |
| <form> | |
| <fieldset> | |
| <label for="name">Seleccionar Plantilla</label> | |
| <select name="template" id="template-select"> | |
| </select> | |
| <!-- | |
| <input type="text" name="name" id="name" value="Jane Smith" | |
| class="text ui-widget-content ui-corner-all"> | |
| <label for="email">Email</label> | |
| <input type="text" name="email" id="email" value="jane@smith.com" | |
| class="text ui-widget-content ui-corner-all"> | |
| --> | |
| <!-- Allow form submission with keyboard without duplicating the dialog button --> | |
| <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"> | |
| </fieldset> | |
| </form> | |
| </div> | |
| <!-- ------------- --> | |
| <!-- END MODAL --> | |
| <!-- ------------- --> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> | |
| <script src="modal1-main.js"></script> | |
| </body> | |
| </html> |
| function loadTmDependencies() { | |
| const jqueryUICss = GM_getResourceText("IMPORTED_JQUERY_UI"); | |
| const cssInject = GM_getResourceText("MODAL1_SELECT_CSS"); | |
| GM_addStyle(cssInject); | |
| GM_addStyle(jqueryUICss); | |
| } | |
| /** | |
| * | |
| * @param {*} arr array of the key templates | |
| */ | |
| function addSelectOptions(arr) { | |
| $('<option/>') | |
| .val("") | |
| .text("-selecciona una opció-") | |
| .appendTo('#template-select'); | |
| arr.forEach(optionVal => { | |
| $('<option/>') | |
| .val(optionVal) | |
| .text(optionVal) | |
| .appendTo('#template-select') | |
| }); | |
| } | |
| function addSelectListener() { | |
| $('#template-select').on('change', () => { | |
| const optionVal = $('#template-select').val(); | |
| $('#vistaPrevia').val(optionVal); | |
| }) | |
| } | |
| $(document).ready(function () { | |
| loadTmDependencies(); | |
| const htmlToInject = GM_getResourceText("MODAL1_SELECT"); | |
| $('body').prepend(htmlToInject); | |
| // from here the code | |
| let btn = document.createElement("button"); | |
| btn.innerHTML = "Open"; | |
| btn.className = ""; | |
| btn.onclick = () => { | |
| console.log($('#dialog-form')); | |
| dialog.dialog("open"); | |
| //$('#dialog-form').show(); | |
| }; | |
| addSelectOptions(['ths_template', 'ths_template_cat']); | |
| addSelectListener(); | |
| $('body').prepend(btn); | |
| var dialog, form, | |
| // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29 | |
| name = $("#name"), | |
| email = $("#email"), | |
| allFields = $([]).add(name).add(email); | |
| tips = $(".validateTips"); | |
| function updateTips(t) { | |
| tips | |
| .text(t) | |
| .addClass("ui-state-highlight"); | |
| setTimeout(function () { | |
| tips.removeClass("ui-state-highlight", 1500); | |
| }, 500); | |
| } | |
| function checkLength(o, n, min, max) { | |
| if (o.val().length > max || o.val().length < min) { | |
| o.addClass("ui-state-error"); | |
| updateTips("Length of " + n + " must be between " + | |
| min + " and " + max + "."); | |
| return false; | |
| } else { | |
| return true; | |
| } | |
| } | |
| function checkRegexp(o, regexp, n) { | |
| if (!(regexp.test(o.val()))) { | |
| o.addClass("ui-state-error"); | |
| updateTips(n); | |
| return false; | |
| } else { | |
| return true; | |
| } | |
| } | |
| function addUser() { | |
| var valid = true; | |
| allFields.removeClass("ui-state-error"); | |
| valid = valid && checkLength(name, "username", 3, 16); | |
| valid = valid && checkLength(email, "email", 6, 80); | |
| valid = valid && checkRegexp(name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter."); | |
| valid = valid && checkRegexp(email, emailRegex, "eg. ui@jquery.com"); | |
| if (valid) { | |
| console.log(name.val()); | |
| dialog.dialog("close"); | |
| } | |
| return valid; | |
| } | |
| dialog = $("#dialog-form").dialog({ | |
| autoOpen: false, | |
| height: 400, | |
| width: 350, | |
| modal: true, | |
| buttons: { | |
| "Create an account": addUser, | |
| Cancel: function () { | |
| dialog.dialog("close"); | |
| } | |
| }, | |
| close: function () { | |
| form[0].reset(); | |
| allFields.removeClass("ui-state-error"); | |
| } | |
| }); | |
| form = dialog.find("form").on("submit", function (event) { | |
| event.preventDefault(); | |
| addUser(); | |
| }); | |
| $("#create-user").button().on("click", function () { | |
| dialog.dialog("open"); | |
| }); | |
| }); |
| label, input { | |
| display: block; | |
| } | |
| input.text { | |
| margin-bottom: 12px; | |
| width: 95%; | |
| padding: .4em; | |
| } | |
| fieldset { | |
| padding: 0; | |
| border: 0; | |
| margin-top: 25px; | |
| } | |
| h1 { | |
| font-size: 1.2em; | |
| margin: .6em 0; | |
| } | |
| .ui-dialog .ui-state-error { | |
| padding: .3em; | |
| } | |
| .validateTips { | |
| border: 1px solid transparent; | |
| padding: 0.3em; | |
| } |
| <div id="dialog-form" title="Seleccionar Plantilla"> | |
| <!-- <p class="validateTips">All form fields are required.</p> --> | |
| <form> | |
| <fieldset> | |
| <label for="name">Seleccionar Plantilla</label> | |
| <select name="template" id="template-select" class="text ui-widget-content ui-corner-all"> | |
| </select> | |
| <textarea name="vistaPrevia" id="vistaPrevia" cols="30" rows="10"></textarea> | |
| <!-- Allow form submission with keyboard without duplicating the dialog button --> | |
| <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"> | |
| </fieldset> | |
| </form> | |
| </div> |
| *, *:after, *:before { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| ul, li { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .main-nav { | |
| width: 90%; | |
| max-width: 240px; | |
| margin: 0 auto; | |
| height: 100%; | |
| cursor: pointer; | |
| } | |
| .main-nav ul { | |
| position: absolute; | |
| width: 100%; | |
| top: 40%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .main-nav li { | |
| list-style: none; | |
| float: left; | |
| } | |
| .main-nav a { | |
| display: block; | |
| height: 50px; | |
| margin: 10px; | |
| padding: 2px 25px; | |
| text-decoration: none; | |
| border-radius: 30px; | |
| line-height: 45px; | |
| color: #FFF; | |
| -webkit-transition: all 0.30s ease-in-out; | |
| -moz-transition: all 0.30s ease-in-out; | |
| -ms-transition: all 0.30s ease-in-out; | |
| -o-transition: all 0.30s ease-in-out; | |
| } | |
| .main-nav li:nth-child(1) a { | |
| background: #d83d3d; | |
| border: 2px solid #fff; | |
| } | |
| .main-nav li:nth-child(1) a:hover { | |
| background: #fff; | |
| color: #d83d3d; | |
| } | |
| .main-nav li:nth-child(2) a { | |
| background: #9e2c2c; | |
| border: 2px solid #9e2c2c; | |
| } | |
| .main-nav li:nth-child(2) a:hover { | |
| background: #b13131; | |
| border: 2px solid #b13131; | |
| } | |
| .user-modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(127, 37, 37, 0.9); | |
| z-index: 3; | |
| overflow-y: auto; | |
| cursor: pointer; | |
| visibility: hidden; | |
| opacity: 0; | |
| -webkit-transition: opacity 0.3s 0, visibility 0 0.3s; | |
| -moz-transition: opacity 0.3s 0, visibility 0 0.3s; | |
| transition: opacity 0.3s 0, visibility 0 0.3s; | |
| } | |
| .user-modal.is-visible { | |
| visibility: visible; | |
| opacity: 1; | |
| -webkit-transition: opacity 0.3s 0, visibility 0 0; | |
| -moz-transition: opacity 0.3s 0, visibility 0 0; | |
| transition: opacity 0.3s 0, visibility 0 0; | |
| } | |
| .user-modal.is-visible .user-modal-container { | |
| -webkit-transform: translateY(0); | |
| -moz-transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| -o-transform: translateY(0); | |
| transform: translateY(0); | |
| } | |
| .user-modal-container { | |
| position: relative; | |
| width: 90%; | |
| max-width: 600px; | |
| background: #FFF; | |
| margin: 3em auto 4em; | |
| cursor: auto; | |
| border-radius: 0.25em; | |
| -webkit-transform: translateY(-30px); | |
| -moz-transform: translateY(-30px); | |
| -ms-transform: translateY(-30px); | |
| -o-transform: translateY(-30px); | |
| transform: translateY(-30px); | |
| -webkit-transition-property: -webkit-transform; | |
| -moz-transition-property: -moz-transform; | |
| transition-property: transform; | |
| -webkit-transition-duration: 0.3s; | |
| -moz-transition-duration: 0.3s; | |
| transition-duration: 0.3s; | |
| } | |
| .user-modal-container .switcher:after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| .user-modal-container .switcher li { | |
| width: 50%; | |
| float: left; | |
| text-align: center; | |
| list-style:none; | |
| } | |
| .user-modal-container .switcher li:first-child a { | |
| border-radius: .25em 0 0 0; | |
| } | |
| .user-modal-container .switcher li:last-child a { | |
| border-radius: 0 .25em 0 0; | |
| } | |
| .user-modal-container .switcher a { | |
| display: block; | |
| width: 100%; | |
| height: 50px; | |
| line-height: 50px; | |
| background: #d2d8d8; | |
| color: #809191; | |
| text-decoration: none; | |
| } | |
| .user-modal-container .switcher a.selected { | |
| background: #FFF; | |
| color: #505260; | |
| } | |
| @media only screen and (min-width: 600px) { | |
| .user-modal-container { | |
| margin: 4em auto; | |
| } | |
| .user-modal-container .switcher a { | |
| height: 70px; | |
| line-height: 70px; | |
| } | |
| } | |
| .form { | |
| padding: 1.4em; | |
| } | |
| .form .fieldset { | |
| position: relative; | |
| margin: 1.4em 0; | |
| } | |
| .form .fieldset:first-child { | |
| margin-top: 0; | |
| } | |
| .form .fieldset:last-child { | |
| margin-bottom: 0; | |
| } | |
| .form label { | |
| font-size: 14px; | |
| font-size: 0.875rem; | |
| } | |
| .form label.image-replace { | |
| /* replace text with an icon */ | |
| display: inline-block; | |
| position: absolute; | |
| left: 15px; | |
| top: 50%; | |
| bottom: auto; | |
| -webkit-transform: translateY(-50%); | |
| -moz-transform: translateY(-50%); | |
| -ms-transform: translateY(-50%); | |
| -o-transform: translateY(-50%); | |
| transform: translateY(-50%); | |
| height: 20px; | |
| width: 20px; | |
| overflow: hidden; | |
| text-indent: 100%; | |
| white-space: nowrap; | |
| color: transparent; | |
| text-shadow: none; | |
| background-repeat: no-repeat; | |
| background-position: 50% 0; | |
| } | |
| .form label.username { | |
| background-image: url("https://codyhouse.co/demo/login-signup-modal-window/img/cd-icon-username.svg"); | |
| } | |
| .form label.email { | |
| background-image: url("https://codyhouse.co/demo/login-signup-modal-window/img/cd-icon-email.svg"); | |
| } | |
| .form label.password { | |
| background-image: url("https://codyhouse.co/demo/login-signup-modal-window/img/cd-icon-password.svg"); | |
| } | |
| .form input { | |
| margin: 0; | |
| padding: 0; | |
| border-radius: 0.25em; | |
| } | |
| .form input.full-width { | |
| width: 100%; | |
| } | |
| .form input.has-padding { | |
| padding: 12px 20px 12px 50px; | |
| } | |
| .form input.has-border { | |
| border: 1px solid #d2d8d8; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| -ms-appearance: none; | |
| -o-appearance: none; | |
| appearance: none; | |
| } | |
| .form input.has-border:focus { | |
| border-color: #343642; | |
| box-shadow: 0 0 5px rgba(52, 54, 66, 0.1); | |
| outline: none; | |
| } | |
| .form input.has-error { | |
| border: 1px solid #d76666; | |
| } | |
| .form input[type=password] { | |
| /* space left for the HIDE button */ | |
| padding-right: 65px; | |
| } | |
| .form input[type=submit] { | |
| padding: 16px 0; | |
| cursor: pointer; | |
| background: #efef8c; | |
| color: rgb(12, 2, 2); | |
| font-weight: bold; | |
| border: none; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| -ms-appearance: none; | |
| -o-appearance: none; | |
| appearance: none; | |
| -webkit-transition: all 0.30s ease-in-out; | |
| -moz-transition: all 0.30s ease-in-out; | |
| -ms-transition: all 0.30s ease-in-out; | |
| -o-transition: all 0.30s ease-in-out; | |
| } | |
| .form input[type=submit]:hover { | |
| background: #f5eb62; | |
| } | |
| .no-touch .form input[type=submit]:hover, .no-touch .form input[type=submit]:focus { | |
| background: #f5eb62; | |
| outline: none; | |
| } | |
| .form .hide-password { | |
| display: inline-block; | |
| position: absolute; | |
| text-decoration: none; | |
| right: 0; | |
| top: 0; | |
| padding: 6px 15px; | |
| border-left: 1px solid #d2d8d8; | |
| top: 50%; | |
| bottom: auto; | |
| -webkit-transform: translateY(-50%); | |
| -moz-transform: translateY(-50%); | |
| -ms-transform: translateY(-50%); | |
| -o-transform: translateY(-50%); | |
| transform: translateY(-50%); | |
| font-size: 14px; | |
| font-size: 0.875rem; | |
| color: #343642; | |
| } | |
| .form .error-message.is-visible { | |
| opacity: 1; | |
| visibility: visible; | |
| -webkit-transition: opacity 0.2s 0, visibility 0 0; | |
| -moz-transition: opacity 0.2s 0, visibility 0 0; | |
| transition: opacity 0.2s 0, visibility 0 0; | |
| } | |
| @media only screen and (min-width: 600px) { | |
| .form { | |
| padding: 2em; | |
| } | |
| .form .fieldset { | |
| margin: 2em 0; | |
| } | |
| .form .fieldset:first-child { | |
| margin-top: 0; | |
| } | |
| .form .fieldset:last-child { | |
| margin-bottom: 0; | |
| } | |
| .form input.has-padding { | |
| padding: 16px 20px 16px 50px; | |
| } | |
| .form input[type=submit] { | |
| padding: 16px 0; | |
| } | |
| } | |
| .form-message { | |
| padding: 1.4em 1.4em 0; | |
| font-size: 14px; | |
| font-size: 0.875rem; | |
| line-height: 1.4; | |
| text-align: center; | |
| } | |
| @media only screen and (min-width: 600px) { | |
| .form-message { | |
| padding: 2em 2em 0; | |
| } | |
| } | |
| .form-bottom-message { | |
| position: absolute; | |
| width: 100%; | |
| left: 0; | |
| bottom: -40px; | |
| text-align: center; | |
| font-size: 14px; | |
| font-size: 0.875rem; | |
| } | |
| .form-bottom-message a { | |
| color: #FFF; | |
| text-decoration: none; | |
| border-bottom: 1px solid rgba(255, 255, 255, .0); | |
| padding: 0 0 0 2px; | |
| -webkit-transition: all 0.30s ease-in-out; | |
| -moz-transition: all 0.30s ease-in-out; | |
| -ms-transition: all 0.30s ease-in-out; | |
| -o-transition: all 0.30s ease-in-out; | |
| } | |
| .form-bottom-message a:hover { | |
| animation: borderslide-3px .5s; | |
| border-bottom: 1px solid rgba(255, 255, 255, 1); | |
| padding-bottom: 3px; | |
| } | |
| @keyframes borderslide-3px { | |
| 0% { | |
| padding-bottom: 1px; | |
| } | |
| 50% { | |
| padding-bottom: 3px; | |
| } | |
| } | |
| @keyframes borderslide-2px { | |
| 0% { | |
| padding-bottom: 1px; | |
| } | |
| 50% { | |
| padding-bottom: 2px; | |
| } | |
| } | |
| .close-form { | |
| /* form X button on top right */ | |
| display: block; | |
| position: absolute; | |
| width: 40px; | |
| height: 40px; | |
| right: 0; | |
| top: -40px; | |
| background: url("../img/icon-close.svg") no-repeat center center; | |
| text-indent: 100%; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| } | |
| @media only screen and (min-width: 1170px) { | |
| .close-form { | |
| display: none; | |
| } | |
| } |
| <div id="ths-form-templates"> | |
| <!-- INSERT_OWNER_NAMES, INSERT_PET_NAMES, INSERT_PET_TYPES, INSERT_PET_PRONOUN, TEXT_CUSTOM_BODY --> | |
| <form class="form"> | |
| <p class="fieldset"> | |
| <label for="INSERT_OWNER_NAMES"> INSERT_OWNER_NAMES</label> | |
| <input type="text" name="INSERT_OWNER_NAMES" id=""> | |
| </p> | |
| <p class="fieldset"> | |
| <label for="INSERT_PET_NAMES"> INSERT_PET_NAMES</label> | |
| <input type="text" name="INSERT_PET_NAMES" id=""> | |
| </p> | |
| <!-- | |
| <p class="fieldset"> | |
| <label for="INSERT_PET_TYPES"> INSERT_PET_TYPES</label> | |
| <input type="text" name="INSERT_PET_TYPES" id=""> | |
| </p> | |
| --> | |
| <p class="fieldset"> | |
| <label for="INSERT_PET_PRONOUN"> INSERT_PET_PRONOUN</label> | |
| <!-- <input type="text" name="INSERT_PET_PRONOUN" id=""> --> | |
| <select name="INSERT_PET_PRONOUN"> | |
| <option value="" disabled selected>-- select an option -- </option> | |
| <option value="him">Him</option> | |
| <option value="her">Her</option> | |
| <option value="them">Them</option> | |
| </select> | |
| </p> | |
| <p class="fieldset"> | |
| <label for="TEXT_CUSTOM_BODY"> TEXT_CUSTOM_BODY</label> | |
| <textarea type="text" name="TEXT_CUSTOM_BODY" id=""> | |
| </textarea> | |
| </p> | |
| <p class="fieldset"> | |
| <input class="full-width has-padding" type="submit" value="Generate"> | |
| </p> | |
| </form> | |
| </div> |