add tabs to modal

Author: pedroangelo

css/style-files/modal.css

@@ -7,81 +7,112 @@ div.modal {
     display: none; /* hidden by default */
     height: 100%; /* full height */
     left: 0;
-    overflow: hidden; /* enable scroll if needed */
+    overflow: auto; /* enable scroll if needed */
     position: fixed; /* stay in place */
     top: 0;
     width: 100%; /* full width */
     z-index: var(--z-index-modal); /* sit on top */
 }
 
-/* modal content box */
-div.modal div.modal-content {
+/* modal container box */
+div.modal div.modal-container {
     background-color: var(--elevation-color-l2);
     border-radius: 20px;
     margin: 10% auto; /* 15% from the top and centered */
     overflow: scroll; /* hide text overflowing but allow scroll */
     width: 60%; /* Could be more or less, depending on screen size */
 }
 
-/* MODAL CONTENT HEADER */
+/* MODAL TAB PICKER */
 
-/* modal content header */
-div.modal div.modal-content div.modal-content-header {
+/* modal tab picker */
+div.modal div.modal-container div.modal-tab-picker {
     color: var(--text-color-he);
     font-size: 30px;
-    padding: 5px 0px;
     text-align: center;
 }
 
-/* close button */
-div.modal div.modal-content div.modal-content-header button {
+/* modal tab picker buttons */
+div.modal div.modal-container div.modal-tab-picker button {
     background-color: var(--elevation-color-l2);
     border: 0px;
     color: var(--text-color-me);
     cursor: pointer; /* change pointer */
-    float: right;
+    float: left;
+    line-height: 30px;
+    margin: 0px;
+    padding: 5px;
+    width: 47%;
 }
 
-/* close button icon */
-div.modal div.modal-content div.modal-content-header button span {
-    font-size: 30px;
+/* modal tab picker tab buttons */
+div.modal div.modal-container div.modal-tab-picker button:not(:last-of-type) {
+    font-size: 22px;
+    width: 47%;
 }
 
-/* google material icon definitions */
-div.modal div.modal-content div.modal-content-header .material-symbols-outlined {
-    font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 24;
+/* modal tab picker close button */
+div.modal div.modal-container div.modal-tab-picker button:last-of-type {
+    width: 6%;
 }
 
-/* close button on hover */
-div.modal div.modal-content div.modal-content-header button:hover {
+/* modal tab picker buttons on hover */
+div.modal div.modal-container div.modal-tab-picker button:hover {
     color: var(--text-color-he);
 }
 
-/* END MODAL CONTENT HEADER */
+/* modal tab picker tab buttons on hover */
+div.modal div.modal-container div.modal-tab-picker button:not(:last-of-type):hover {
+    background-color: var(--elevation-color-l3);
+}
+
+/* modal tab picker tab buttons on hover */
+div.modal div.modal-container div.modal-tab-picker button:not(:last-of-type).active  {
+    background-color: var(--elevation-color-l3);
+}
+
+/* modal tab picker close button icon */
+div.modal div.modal-container div.modal-tab-picker button:last-of-type span {
+    font-size: 26px;
+    vertical-align: middle;
+}
+
+/* google material icon definitions */
+div.modal div.modal-container div.modal-tab-picker .material-symbols-outlined {
+    font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 24;
+}
 
-/* MODAL CONTENT BODY */ 
+/* END MODAL TAB PICKER */
+
+/* MODAL TAB CONTENT */
+
+div.modal div.modal-container div.modal-tab-content {
+    display: none;
+}
+
+/* MODAL TAB CONTENT BODY */ 
 
 /* modal content body */
-div.modal div.modal-content div.modal-content-body {
+div.modal div.modal-container div.modal-tab-content-body {
     background-color: var(--elevation-color-l3);
     height: 250px;
     overflow: scroll;
     padding: 0px 15px;
     white-space: pre-wrap; /* wrap text to fit box, preserve whitespace */
 }
 
-/* END MODAL CONTENT BODY */ 
+/* END MODAL TAB CONTENT BODY */ 
 
-/* MODAL CONTENT FOOTER */
+/* MODAL TAB CONTENT FOOTER */
 
 /* modal content footer */
-div.modal div.modal-content div.modal-content-footer {
+div.modal div.modal-container div.modal-tab-content-footer {
     text-align: right;
     /* padding: 5px 0px; */
 }
 
 /* modal content footer iteration buttons */
-div.modal div.modal-content div.modal-content-footer button {
+div.modal div.modal-container div.modal-tab-content-footer button {
     display: inline-block;
     background-color: var(--elevation-color-l2);
     border: 0px; /* remove standard button border */
@@ -95,21 +126,23 @@ div.modal div.modal-content div.modal-content-footer button {
 }
 
 /* modal content footer iteration button icon */
-div.modal div.modal-content div.modal-content-footer button span {
+div.modal div.modal-container div.modal-tab-content-footer button span {
     float: left;
     font-size: 20px;
     margin: 0px 8px 0px 0px;
 }
 
 /* google material icon definitions */
-div.modal div.modal-content div.modal-content-footer .material-symbols-outlined {
+div.modal div.modal-container div.modal-tab-content-footer .material-symbols-outlined {
     font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 24;
 }
 
 /* modal content footer iteration button on hover */
-div.modal div.modal-content div.modal-content-footer button:hover {
+div.modal div.modal-container div.modal-tab-content-footer button:hover {
     /* background-color: var(--elevation-color-l4); */
     color: var(--text-color-he);
 }
 
-/* END MODAL CONTENT FOOTER */
+/* END MODAL TAB CONTENT FOOTER */
+
+/* END MODAL TAB CONTENT */

javascript/modal.js

@@ -24,7 +24,7 @@ function getModalFromChild(object) {
     return getModal(paperReference);
 }
 
-// SHOW AND HIDE FUNCTIONS
+// MODAL SHOW AND HIDE FUNCTIONS
 
 // show selected modal
 function showModal(reference) {
@@ -60,16 +60,39 @@ function hideAllModal() {
     }
 }
 
-// BUTTON ACTION FUNCTIONS
+// TAB SHOW AND HIDE FUNCTIONS
 
-// copy .bib file contents
-function copyBib(object) {
-    // get .bib file contents from .modal-content p element
-    let modalContent = object.closest('.modal-content').querySelector('div.modal-content-body');
+function toggleTabFromChild(object, tab) {
+    // DEACTIVATE ACTIVE
+
+    // get modal
+    let modal = getModalFromChild(object);
+    // get modal-container
+    let modalContainer = modal.querySelector(".modal-container");
+    // get active buttons from .modal-tab-picker
+    let activeButtons = modalContainer.querySelectorAll(".modal-tab-picker button.active");
+    // remove active from all buttons in .modal-tab-picker
+    for (let i = 0; i < activeButtons.length; i++) {
+	activeButtons[i].classList.remove = "active";
+    }
+    // get active buttons from .modal-tab-picker
+    let tabContents = modalContainer.querySelectorAll(".modal-tab-content");
+    // hide all .modal-tab-content
+    for (let i = 0; i < tabContents.length; i++) {
+	tabContents[i].style.display = "none";
+    }
+}
+
+// TAB BUTTON ACTION FUNCTIONS
+
+// copy tab-content body contents
+function copyContents(object) {
+    // get tab contents
+    let modalTabContent = object.closest('.modal-tab-content').querySelector('.modal-tab-content-body');
     // obtain inner html from element
-    let bibText = modalContent.innerHTML;
+    let content = modalTabContent.innerHTML;
     // copy to clipboard
-    navigator.clipboard.writeText(bibText);
+    navigator.clipboard.writeText(content);
 }
 
 // download .bib file
@@ -82,18 +105,6 @@ function downloadBib(object) {
 
 // INITIALIZATION FUNCTONS
 
-// fill modal with information
-function populateModal(paperReference) {
-    // get selected modal
-    let modal = getModal(paperReference);
-    // get modal text element
-    let modalText = modal.querySelector("div.modal-content div.modal-content-body");
-    // get bib file contents
-    let content = paperReference;
-    // write contents
-    modalText.innerHTML = content;
-}
-
 // initialize modals
 function initializeModals() {
     // get paper references
@@ -106,3 +117,17 @@ function initializeModals() {
 	window.addEventListener('click', function(event) { if (event.target == getModal(paperReferences[i])) { hideModal(paperReferences[i]); }});
     }
 }
+
+// NOT USED
+
+// fill modal with information
+function populateModal(paperReference) {
+    // get selected modal
+    let modal = getModal(paperReference);
+    // get modal text element
+    let modalText = modal.querySelector("div.modal-content div.modal-content-body");
+    // get bib file contents
+    let content = paperReference;
+    // write contents
+    modalText.innerHTML = content;
+}

pages/research/index.html

@@ -126,16 +126,24 @@ <h3>Conference papers</h3>
 </div>
 
 <div class="modal">
-<div class="modal-content">
+<div class="modal-container">
 
-<div class="modal-content-header">
+<div class="modal-tab-picker">
+<button onclick="toggleTabFromChild(this,'cite')">
 Cite
+</button>
+
+<button onclick="toggleTabFromChild(this,'abstract')">
+Abstract
+</button>
+
 <button onclick="hideModalFromChild(this)">
 <span class="material-symbols-outlined">close</span>
 </button>
 </div>
 
-<div class="modal-content-body">
+<div class="modal-tab-content cite">
+<div class="modal-tab-content-body">
 @InProceedings{angelo2022type,
     author="{\^A}ngelo, Pedro and Florido, M{\'a}rio",
     editor="Seidl, Helmut and Liu, Zhiming and Pasareanu, Corina S.",
@@ -152,8 +160,8 @@ <h3>Conference papers</h3>
 }
 </div>
 
-<div class="modal-content-footer">
-<button onclick="copyBib(this)">
+<div class="modal-tab-content-footer">
+<button onclick="copyContents(this)">
 <span class="material-symbols-outlined">content_copy</span>
 copy
 </button>
@@ -162,10 +170,21 @@ <h3>Conference papers</h3>
 <span class="material-symbols-outlined">download</span>
 download
 </button>
+</div>
+</div>
 
-<button onclick="hideModalFromChild(this)">
-<span class="material-symbols-outlined">close</span>
-close</button>
+<div class="modal-tab-content abstract">
+<div class="modal-tab-content-body">
+Several type inference approaches for rank-2 idempotent and commutative intersection types have been presented in the literature. Type inference relies on two stages: type constraint generation and solving. Defining constraint generation rules is rather straightforward, with one exception. To infer the type of an application, several derivations of the argument are required, one for each instance of the domain type of the function. The types of these derivations are then constrained against the instances. Noting that these derivations are isomorphic, by renaming of type variables, they can be obtained via a duplication operation on a single derivation of the argument. The application rule then constrains the intersection type resulting from duplication against the domain type of the function, resulting in an equality constraint between intersections. By treating intersections as sets, these constraints can be solved by solving a set unification problem, thus ensuring the types of the argument unify with the domain type of the function. Here we present a new type inference algorithm for rank-2 intersection types, which relies on set unification to solve equality constraints between intersections, and show it is both sound and complete.
+</div>
+
+<div class="modal-tab-content-footer">
+<button onclick="copyContents(this)">
+<span class="material-symbols-outlined">content_copy</span>
+copy
+</button>
+
+</div>
 </div>
 
 </div>