diff --git a/static/css/app.css b/static/css/app.css index e7bb5cd..fbe0b7c 100644 --- a/static/css/app.css +++ b/static/css/app.css @@ -123,3 +123,45 @@ span.form-control-plaintext { font-size: inherit; line-height: 1.5; } + +/* + * Three states switches + */ +input.form-3s-switch { + width: 2em; + height: 1em; + margin: 0.25em 0.25em 0 0; + vertical-align: top; + background-color: #fff; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: 1px solid rgba(0, 0, 0, 0.25); + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-print-color-adjust: exact; + color-adjust: exact; + print-color-adjust: exact; + border-radius: 2em; + background-position: center center; + transition: background-position 0.15s ease-in-out; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e"); +} + +input.form-3s-switch[value="1"] { + background-position: right center; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); + background-color: #0d6efd; + border-color: #0d6efd; +} + +input.form-3s-switch[value="0"] { + background-position: left center; +} + +input.form-3s-switch:focus { + border-color: #86b7fe; + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); +} diff --git a/static/js/app.js b/static/js/app.js new file mode 100644 index 0000000..8fb28e5 --- /dev/null +++ b/static/js/app.js @@ -0,0 +1,231 @@ +$(document).ready(function () { + // Enable share links + $(".share-links").each(function (idx, link) { + link = $(link); + link.attr("data-bs-toggle", "tooltip"); + if (!link.attr("data-bs-placement")) link.attr("data-bs-placement", "left"); + if (!link.attr("title")) + link.attr("title", _("Copy the share URL of this page.")); + $(link).click(function (event) { + event.preventDefault(); + copy_to_clipboard($(link).attr("href")); + }); + }); + + // Enable tooltip + $('[data-bs-toggle="tooltip"]').tooltip(); + + $(".copyable") + .click(function (event) { + copy_to_clipboard($(event.target).html().trim()); + }) + .css("cursor", "copy"); + + // Enable 3-states switches + $("input.form-3s-switch").each(function (idx, input) { + input = $(input); + input.click(function (event) { + event.preventDefault(); + let value = input.attr("value"); + if (value == "1") value = null; + else if (value == "0") value = "1"; + else value = "0"; + input.val(value); + input.prop("checked", value !== null); + input.trigger("change"); + }); + }); +}); + +/** + * Copy a value to clipboard + * @param {string} value The value to copy to clipboard + */ +function copy_to_clipboard(value) { + var txt = $("