From 82fa7b9af911a206c7f9d943f422ab9c7aecfe84 Mon Sep 17 00:00:00 2001 From: Hannah Date: Thu, 24 Oct 2024 17:42:47 -0400 Subject: [PATCH] implement micromodal and add appraisal modals --- bag_transfer/appraise/views.py | 2 +- bag_transfer/static/css/styles.css | 22 +++++++++--- bag_transfer/static/dist/js/micromodal.min.js | 1 + bag_transfer/static/js/modals.js | 3 ++ .../templates/appraise/confirm_modal.html | 33 ++++++++++++++++-- .../templates/appraise/edit_note.html | 34 ++++++++++++++++++- bag_transfer/templates/appraise/main.html | 11 +++--- .../templates/transfers/js_scripts.html | 8 +++-- 8 files changed, 100 insertions(+), 14 deletions(-) create mode 100644 bag_transfer/static/dist/js/micromodal.min.js create mode 100644 bag_transfer/static/js/modals.js diff --git a/bag_transfer/appraise/views.py b/bag_transfer/appraise/views.py index 00a5e8ef..839f2f67 100644 --- a/bag_transfer/appraise/views.py +++ b/bag_transfer/appraise/views.py @@ -104,7 +104,7 @@ def appraise_buttons(self, transfer): note_text = "Add" buttons = '\ \ - '.format( + '.format( btn_class, note_class, aria_label, note_text ) return buttons diff --git a/bag_transfer/static/css/styles.css b/bag_transfer/static/css/styles.css index 1af59cf2..fdd68a58 100644 --- a/bag_transfer/static/css/styles.css +++ b/bag_transfer/static/css/styles.css @@ -6,6 +6,24 @@ font-style: normal; } +/* Modals */ +.modal__overlay { + display: none; +} + +.modal__overlay.is-open { + display: block; +} + +.modal--md { + @media screen and (min-width: 580px) { + bottom: 20%; + left: 20%; + right: 20%; + top: 20%; + } +} + .container { max-width: 1600px; } @@ -428,10 +446,6 @@ form, .input input, .input textarea, .input select { display: none; } -.pull-right { - margin-left: auto; -} - /** * Accession form AS resource name and dismiss button styles **/ diff --git a/bag_transfer/static/dist/js/micromodal.min.js b/bag_transfer/static/dist/js/micromodal.min.js new file mode 100644 index 00000000..95563af4 --- /dev/null +++ b/bag_transfer/static/dist/js/micromodal.min.js @@ -0,0 +1 @@ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).MicroModal=t()}(this,(function(){"use strict";function e(e,t){for(var o=0;oe.length)&&(t=e.length);for(var o=0,n=new Array(t);o0&&this.registerTriggers.apply(this,t(a)),this.onClick=this.onClick.bind(this),this.onKeydown=this.onKeydown.bind(this)}var i,a,r;return i=o,(a=[{key:"registerTriggers",value:function(){for(var e=this,t=arguments.length,o=new Array(t),n=0;n0&&void 0!==arguments[0]?arguments[0]:null;if(this.activeElement=document.activeElement,this.modal.setAttribute("aria-hidden","false"),this.modal.classList.add(this.config.openClass),this.scrollBehaviour("disable"),this.addEventListeners(),this.config.awaitOpenAnimation){var o=function t(){e.modal.removeEventListener("animationend",t,!1),e.setFocusToFirstNode()};this.modal.addEventListener("animationend",o,!1)}else this.setFocusToFirstNode();this.config.onShow(this.modal,this.activeElement,t)}},{key:"closeModal",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,t=this.modal;if(this.modal.setAttribute("aria-hidden","true"),this.removeEventListeners(),this.scrollBehaviour("enable"),this.activeElement&&this.activeElement.focus&&this.activeElement.focus(),this.config.onClose(this.modal,this.activeElement,e),this.config.awaitCloseAnimation){var o=this.config.openClass;this.modal.addEventListener("animationend",(function e(){t.classList.remove(o),t.removeEventListener("animationend",e,!1)}),!1)}else t.classList.remove(this.config.openClass)}},{key:"closeModalById",value:function(e){this.modal=document.getElementById(e),this.modal&&this.closeModal()}},{key:"scrollBehaviour",value:function(e){if(this.config.disableScroll){var t=document.querySelector("body");switch(e){case"enable":Object.assign(t.style,{overflow:""});break;case"disable":Object.assign(t.style,{overflow:"hidden"})}}}},{key:"addEventListeners",value:function(){this.modal.addEventListener("touchstart",this.onClick),this.modal.addEventListener("click",this.onClick),document.addEventListener("keydown",this.onKeydown)}},{key:"removeEventListeners",value:function(){this.modal.removeEventListener("touchstart",this.onClick),this.modal.removeEventListener("click",this.onClick),document.removeEventListener("keydown",this.onKeydown)}},{key:"onClick",value:function(e){(e.target.hasAttribute(this.config.closeTrigger)||e.target.parentNode.hasAttribute(this.config.closeTrigger))&&(e.preventDefault(),e.stopPropagation(),this.closeModal(e))}},{key:"onKeydown",value:function(e){27===e.keyCode&&this.closeModal(e),9===e.keyCode&&this.retainFocus(e)}},{key:"getFocusableNodes",value:function(){var e=this.modal.querySelectorAll(n);return Array.apply(void 0,t(e))}},{key:"setFocusToFirstNode",value:function(){var e=this;if(!this.config.disableFocus){var t=this.getFocusableNodes();if(0!==t.length){var o=t.filter((function(t){return!t.hasAttribute(e.config.closeTrigger)}));o.length>0&&o[0].focus(),0===o.length&&t[0].focus()}}}},{key:"retainFocus",value:function(e){var t=this.getFocusableNodes();if(0!==t.length)if(t=t.filter((function(e){return null!==e.offsetParent})),this.modal.contains(document.activeElement)){var o=t.indexOf(document.activeElement);e.shiftKey&&0===o&&(t[t.length-1].focus(),e.preventDefault()),!e.shiftKey&&t.length>0&&o===t.length-1&&(t[0].focus(),e.preventDefault())}else t[0].focus()}}])&&e(i.prototype,a),r&&e(i,r),o}(),a=null,r=function(e){if(!document.getElementById(e))return console.warn("MicroModal: ❗Seems like you have missed %c'".concat(e,"'"),"background-color: #f8f9fa;color: #50596c;font-weight: bold;","ID somewhere in your code. Refer example below to resolve it."),console.warn("%cExample:","background-color: #f8f9fa;color: #50596c;font-weight: bold;",'')),!1},s=function(e,t){if(function(e){e.length<=0&&(console.warn("MicroModal: ❗Please specify at least one %c'micromodal-trigger'","background-color: #f8f9fa;color: #50596c;font-weight: bold;","data attribute."),console.warn("%cExample:","background-color: #f8f9fa;color: #50596c;font-weight: bold;",''))}(e),!t)return!0;for(var o in t)r(o);return!0},{init:function(e){var o=Object.assign({},{openTrigger:"data-micromodal-trigger"},e),n=t(document.querySelectorAll("[".concat(o.openTrigger,"]"))),r=function(e,t){var o=[];return e.forEach((function(e){var n=e.attributes[t].value;void 0===o[n]&&(o[n]=[]),o[n].push(e)})),o}(n,o.openTrigger);if(!0!==o.debugMode||!1!==s(n,r))for(var l in r){var c=r[l];o.targetModal=l,o.triggers=t(c),a=new i(o)}},show:function(e,t){var o=t||{};o.targetModal=e,!0===o.debugMode&&!1===r(e)||(a&&a.removeEventListeners(),(a=new i(o)).showModal())},close:function(e){e?a.closeModalById(e):a.closeModal()}});return"undefined"!=typeof window&&(window.MicroModal=l),l})); \ No newline at end of file diff --git a/bag_transfer/static/js/modals.js b/bag_transfer/static/js/modals.js new file mode 100644 index 00000000..b3b8f075 --- /dev/null +++ b/bag_transfer/static/js/modals.js @@ -0,0 +1,3 @@ +document.addEventListener('DOMContentLoaded', function() { + MicroModal.init(); +}); \ No newline at end of file diff --git a/bag_transfer/templates/appraise/confirm_modal.html b/bag_transfer/templates/appraise/confirm_modal.html index 85abb769..032d5221 100644 --- a/bag_transfer/templates/appraise/confirm_modal.html +++ b/bag_transfer/templates/appraise/confirm_modal.html @@ -1,4 +1,4 @@ -