Skip to content

Commit 47058e2

Browse files
pedroangelopedroangelo
committed
add modal tab functionality
1 parent 28b53c9 commit 47058e2

File tree

3 files changed

+75
-63
lines changed

3 files changed

+75
-63
lines changed

‎css/style-files/modal.css

+4-10
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ div.modal {
77
display: none; /* hidden by default */
88
height: 100%; /* full height */
99
left: 0;
10-
overflow: auto; /* enable scroll if needed */
10+
overflow: hidden; /* enable scroll if needed */
1111
position: fixed; /* stay in place */
1212
top: 0;
1313
width: 100%; /* full width */
@@ -27,7 +27,6 @@ div.modal div.modal-container {
2727

2828
/* modal tab picker */
2929
div.modal div.modal-container div.modal-tab-picker {
30-
color: var(--text-color-he);
3130
font-size: 30px;
3231
text-align: center;
3332
}
@@ -62,13 +61,9 @@ div.modal div.modal-container div.modal-tab-picker button:hover {
6261
}
6362

6463
/* modal tab picker tab buttons on hover */
65-
div.modal div.modal-container div.modal-tab-picker button:not(:last-of-type):hover {
66-
background-color: var(--elevation-color-l3);
67-
}
68-
69-
/* modal tab picker tab buttons on hover */
70-
div.modal div.modal-container div.modal-tab-picker button:not(:last-of-type).active {
64+
div.modal div.modal-container div.modal-tab-picker button.active {
7165
background-color: var(--elevation-color-l3);
66+
color: var(--text-color-he);
7267
}
7368

7469
/* modal tab picker close button icon */
@@ -97,7 +92,7 @@ div.modal div.modal-container div.modal-tab-content-body {
9792
background-color: var(--elevation-color-l3);
9893
height: 250px;
9994
overflow: scroll;
100-
padding: 0px 15px;
95+
padding: 5px 15px;
10196
white-space: pre-wrap; /* wrap text to fit box, preserve whitespace */
10297
}
10398

@@ -108,7 +103,6 @@ div.modal div.modal-container div.modal-tab-content-body {
108103
/* modal content footer */
109104
div.modal div.modal-container div.modal-tab-content-footer {
110105
text-align: right;
111-
/* padding: 5px 0px; */
112106
}
113107

114108
/* modal content footer iteration buttons */

‎javascript/modal.js

+11-3
Original file line numberDiff line numberDiff line change
@@ -62,25 +62,33 @@ function hideAllModal() {
6262

6363
// TAB SHOW AND HIDE FUNCTIONS
6464

65+
// toggle active tab
6566
function toggleTabFromChild(object, tab) {
66-
// DEACTIVATE ACTIVE
67-
6867
// get modal
6968
let modal = getModalFromChild(object);
7069
// get modal-container
7170
let modalContainer = modal.querySelector(".modal-container");
71+
7272
// get active buttons from .modal-tab-picker
7373
let activeButtons = modalContainer.querySelectorAll(".modal-tab-picker button.active");
7474
// remove active from all buttons in .modal-tab-picker
7575
for (let i = 0; i < activeButtons.length; i++) {
76-
activeButtons[i].classList.remove = "active";
76+
activeButtons[i].classList.remove("active");
7777
}
78+
7879
// get active buttons from .modal-tab-picker
7980
let tabContents = modalContainer.querySelectorAll(".modal-tab-content");
8081
// hide all .modal-tab-content
8182
for (let i = 0; i < tabContents.length; i++) {
8283
tabContents[i].style.display = "none";
8384
}
85+
86+
// get selected button
87+
let selectedButton = modalContainer.querySelector(".modal-tab-picker button." + tab);
88+
// activate button
89+
selectedButton.classList.add("active");
90+
// show tab
91+
modalContainer.querySelector(".modal-tab-content." + tab).style.display = "block";
8492
}
8593

8694
// TAB BUTTON ACTION FUNCTIONS

‎pages/research/index.html

+60-50
Original file line numberDiff line numberDiff line change
@@ -85,17 +85,6 @@ <h3>Conference papers</h3>
8585
Type Inference for Rank-2 Intersection Types Using Set Unification.
8686
ICTAC 2022.
8787
</p>
88-
<p>
89-
Several type inference approaches for rank-2 idempotent and commutative intersection types have been presented in the literature.
90-
Type inference relies on two stages: type constraint generation and solving.
91-
Defining constraint generation rules is rather straightforward, with one exception.
92-
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.
93-
The types of these derivations are then constrained against the instances.
94-
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.
95-
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.
96-
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.
97-
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.
98-
</p>
9988

10089
<p>
10190
<div class="paper-iteration">
@@ -114,12 +103,12 @@ <h3>Conference papers</h3>
114103
pdf (extended)
115104
</a>
116105

117-
<button onclick="showModalFromChild(this)">
106+
<button onclick="showModalFromChild(this); toggleTabFromChild(this,'cite')">
118107
<span class="material-symbols-outlined">format_quote</span>
119108
cite
120109
</button>
121110

122-
<button onclick="showModalFromChild(this)">
111+
<button onclick="showModalFromChild(this); toggleTabFromChild(this,'abstract')">
123112
<span class="material-symbols-outlined">description</span>
124113
abstract
125114
</button>
@@ -129,11 +118,11 @@ <h3>Conference papers</h3>
129118
<div class="modal-container">
130119

131120
<div class="modal-tab-picker">
132-
<button onclick="toggleTabFromChild(this,'cite')">
121+
<button class="cite" onclick="toggleTabFromChild(this,'cite')">
133122
Cite
134123
</button>
135124

136-
<button onclick="toggleTabFromChild(this,'abstract')">
125+
<button class="abstract" onclick="toggleTabFromChild(this,'abstract')">
137126
Abstract
138127
</button>
139128

@@ -183,7 +172,6 @@ <h3>Conference papers</h3>
183172
<span class="material-symbols-outlined">content_copy</span>
184173
copy
185174
</button>
186-
187175
</div>
188176
</div>
189177

@@ -200,14 +188,6 @@ <h3>Conference papers</h3>
200188
A Typed Lambda Calculus with Gradual Intersection Types.
201189
PPDP 2022.
202190
</p>
203-
<p>
204-
Intersection types have the power to type expressions which are all of many different types.
205-
Gradual types combine type checking at both compile-time and run-time.
206-
Here we combine these two approaches in a new typed calculus that harness both of their strengths.
207-
We incorporate these two contributions in a single typed calculus and define an operational semantics with type cast annotations.
208-
We also prove several crucial properties of the type system, namely that types are preserved during compilation and evaluation, and that the refined criteria for gradual typing holds.
209-
</p>
210-
211191
<p>
212192
<div class="paper-iteration">
213193
<a href="https://doi.org/10.1145/3551357.3551382" target="_blank">
@@ -225,28 +205,36 @@ <h3>Conference papers</h3>
225205
pdf (extended)
226206
</a>
227207

228-
<button onclick="showModalFromChild(this)">
208+
<button onclick="showModalFromChild(this); toggleTabFromChild(this,'cite')">
229209
<span class="material-symbols-outlined">format_quote</span>
230210
cite
231211
</button>
232212

233-
<button onclick="showModalFromChild(this)">
213+
<button onclick="showModalFromChild(this); toggleTabFromChild(this,'abstract')">
234214
<span class="material-symbols-outlined">description</span>
235215
abstract
236216
</button>
237217
</div>
238218

239219
<div class="modal">
240-
<div class="modal-content">
220+
<div class="modal-container">
241221

242-
<div class="modal-content-header">
222+
<div class="modal-tab-picker">
223+
<button class="cite" onclick="toggleTabFromChild(this,'cite')">
243224
Cite
225+
</button>
226+
227+
<button class="abstract" onclick="toggleTabFromChild(this,'abstract')">
228+
Abstract
229+
</button>
230+
244231
<button onclick="hideModalFromChild(this)">
245232
<span class="material-symbols-outlined">close</span>
246233
</button>
247234
</div>
248235

249-
<div class="modal-content-body">
236+
<div class="modal-tab-content cite">
237+
<div class="modal-tab-content-body">
250238
@inproceedings{angelo2022typed,
251239
author = {\^{A}ngelo, Pedro and Florido, M\'{a}rio},
252240
title = {A Typed Lambda Calculus with Gradual Intersection Types},
@@ -266,8 +254,8 @@ <h3>Conference papers</h3>
266254
}
267255
</div>
268256

269-
<div class="modal-content-footer">
270-
<button onclick="copyBib(this)">
257+
<div class="modal-tab-content-footer">
258+
<button onclick="copyContents(this)">
271259
<span class="material-symbols-outlined">content_copy</span>
272260
copy
273261
</button>
@@ -276,10 +264,20 @@ <h3>Conference papers</h3>
276264
<span class="material-symbols-outlined">download</span>
277265
download
278266
</button>
267+
</div>
268+
</div>
279269

280-
<button onclick="hideModalFromChild(this)">
281-
<span class="material-symbols-outlined">close</span>
282-
close</button>
270+
<div class="modal-tab-content abstract">
271+
<div class="modal-tab-content-body">
272+
Intersection types have the power to type expressions which are all of many different types. Gradual types combine type checking at both compile-time and run-time. Here we combine these two approaches in a new typed calculus that harness both of their strengths. We incorporate these two contributions in a single typed calculus and define an operational semantics with type cast annotations. We also prove several crucial properties of the type system, namely that types are preserved during compilation and evaluation, and that the refined criteria for gradual typing holds.
273+
</div>
274+
275+
<div class="modal-tab-content-footer">
276+
<button onclick="copyContents(this)">
277+
<span class="material-symbols-outlined">content_copy</span>
278+
copy
279+
</button>
280+
</div>
283281
</div>
284282

285283
</div>
@@ -295,12 +293,6 @@ <h3>Conference papers</h3>
295293
Type Inference for Rank 2 Gradual Intersection Types.
296294
TFP 2019.
297295
</p>
298-
<p>
299-
In this paper, we extend a rank 2 intersection type system with gradual types.
300-
We then show that the problem of finding a principal typing for a lambda term, in a rank 2 gradual intersection type system is decidable.
301-
We present a type inference algorithm which builds the principal typing of a term through the generation of type constraints which are solved by a new extended unification algorithm constructing the most general unifier for rank 2 gradual intersection types.
302-
</p>
303-
304296
<p>
305297
<div class="paper-iteration">
306298
<a href="https://doi.org/10.1007/978-3-030-47147-7_5" target="_blank">
@@ -313,28 +305,36 @@ <h3>Conference papers</h3>
313305
pdf
314306
</a>
315307

316-
<button onclick="showModalFromChild(this)">
308+
<button onclick="showModalFromChild(this); toggleTabFromChild(this,'cite')">
317309
<span class="material-symbols-outlined">format_quote</span>
318310
cite
319311
</button>
320312

321-
<button onclick="showModalFromChild(this)">
313+
<button onclick="showModalFromChild(this); toggleTabFromChild(this,'abstract')">
322314
<span class="material-symbols-outlined">description</span>
323315
abstract
324316
</button>
325317
</div>
326318

327319
<div class="modal">
328-
<div class="modal-content">
320+
<div class="modal-container">
329321

330-
<div class="modal-content-header">
322+
<div class="modal-tab-picker">
323+
<button class="cite" onclick="toggleTabFromChild(this,'cite')">
331324
Cite
325+
</button>
326+
327+
<button class="abstract" onclick="toggleTabFromChild(this,'abstract')">
328+
Abstract
329+
</button>
330+
332331
<button onclick="hideModalFromChild(this)">
333332
<span class="material-symbols-outlined">close</span>
334333
</button>
335334
</div>
336335

337-
<div class="modal-content-body">
336+
<div class="modal-tab-content cite">
337+
<div class="modal-tab-content-body">
338338
@InProceedings{angelo2020type,
339339
author="{\^A}ngelo, Pedro and Florido, M{\'a}rio",
340340
editor="Bowman, William J. and Garcia, Ronald",
@@ -350,8 +350,8 @@ <h3>Conference papers</h3>
350350
}
351351
</div>
352352

353-
<div class="modal-content-footer">
354-
<button onclick="copyBib(this)">
353+
<div class="modal-tab-content-footer">
354+
<button onclick="copyContents(this)">
355355
<span class="material-symbols-outlined">content_copy</span>
356356
copy
357357
</button>
@@ -360,10 +360,20 @@ <h3>Conference papers</h3>
360360
<span class="material-symbols-outlined">download</span>
361361
download
362362
</button>
363+
</div>
364+
</div>
363365

364-
<button onclick="hideModalFromChild(this)">
365-
<span class="material-symbols-outlined">close</span>
366-
close</button>
366+
<div class="modal-tab-content abstract">
367+
<div class="modal-tab-content-body">
368+
In this paper, we extend a rank 2 intersection type system with gradual types. We then show that the problem of finding a principal typing for a lambda term, in a rank 2 gradual intersection type system is decidable. We present a type inference algorithm which builds the principal typing of a term through the generation of type constraints which are solved by a new extended unification algorithm constructing the most general unifier for rank 2 gradual intersection types.
369+
</div>
370+
371+
<div class="modal-tab-content-footer">
372+
<button onclick="copyContents(this)">
373+
<span class="material-symbols-outlined">content_copy</span>
374+
copy
375+
</button>
376+
</div>
367377
</div>
368378

369379
</div>

0 commit comments

Comments
 (0)