From eab4cc957e41d70736a2151fe1cb91bbf91f2fea Mon Sep 17 00:00:00 2001
From: Luca Trupiano <luca.trupiano@isti.cnr.it>
Date: Tue, 16 Apr 2024 17:21:28 +0200
Subject: [PATCH] "About" funzionante

---
 css/custom2_4.3.css           |   4 +
 css/jquery.popuplayer.min.css |   1 +
 index_4.5.html                |  15 ++--
 js/lib/jquery.popuplayer.js   | 151 ++++++++++++++++++++++++++++++++++
 js/script_4.4.js              |  32 +++++++
 5 files changed, 195 insertions(+), 8 deletions(-)
 create mode 100644 css/jquery.popuplayer.min.css
 create mode 100644 js/lib/jquery.popuplayer.js

diff --git a/css/custom2_4.3.css b/css/custom2_4.3.css
index 6c82d52..1f4e9c0 100644
--- a/css/custom2_4.3.css
+++ b/css/custom2_4.3.css
@@ -324,6 +324,10 @@ li::marker {
 }
 
 
+a[target="_blank"]::after {
+  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
+  margin: 0 3px 0 5px;
+}
 /* ------- customize colors -------- */   
 
 /* LINK utili:
diff --git a/css/jquery.popuplayer.min.css b/css/jquery.popuplayer.min.css
new file mode 100644
index 0000000..fc26325
--- /dev/null
+++ b/css/jquery.popuplayer.min.css
@@ -0,0 +1 @@
+body{-webkit-backface-visibility:hidden}.popup-layer{position:absolute;display:none;top:0;right:0;bottom:0;left:0;z-index:1100;background-color:rgba(0,0,0,.2)}.popup-layer-content{position:absolute;overflow-x:hidden;overflow-y:auto;box-shadow:0 0 22px rgba(0,0,0,.4)}.popup-layer-blur{-webkit-filter:blur(3px)}
\ No newline at end of file
diff --git a/index_4.5.html b/index_4.5.html
index 069e8ed..d4ee70e 100644
--- a/index_4.5.html
+++ b/index_4.5.html
@@ -9,6 +9,7 @@
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css">
 <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Spectral">
+<link rel="stylesheet" href="./css/jquery.popuplayer.min.css">
 <!--
    -->
 <link rel="stylesheet" id="style1-Boot" href="./css/bootstrap.min.lida1.css" disabled>
@@ -87,11 +88,8 @@
 									Info
 							</a>
 							<div class="dropdown-menu" aria-labelledby="navbarDropdown">
-								<a class="dropdown-item stileLink" id="style1" href="#">Stile 1</a>
-								<a class="dropdown-item stileLink" id="style2" href="#">Stile 2</a>
-								<div class="dropdown-divider"></div>
 								<a class="dropdown-item" href="#">Aiuto</a>
-								<a class="dropdown-item" href="#">Crediti</a>
+								<a class="dropdown-item" href="#" id="visAbout">About</a>
 							</div>			
 						</li>
 
@@ -971,10 +969,10 @@
 															<div class="row no-gutters p-0 justify-content-end">
 																<div
 																	class="col px-2 pt-1 align-self-start align-items-start justify-content-end text-right position-absolute"
-																	style="z-index: 1000">
+																	style="z-index: 90">
 																	<button id="trashClaCont-xX0"
 																		class="btn btn-sm btn-outline-secondary bg-light trashClaCont border rounded text-secondary px-1 pb-0"
-																		style="z-index: 1000">
+																		style="z-index: 90">
 																		<ion-icon name="refresh-circle"></ion-icon>
 																	</button>
 																</div>
@@ -1907,7 +1905,7 @@
 											</div>
 										</div>
 										<div class="col-md-auto p-0 m-0 text-right text-success">
-											<button class="btn btn-sm removeCla text-success border rounded px-1 pb-0" style="z-index: 1000">
+											<button class="btn btn-sm removeCla text-success border rounded px-1 pb-0" style="z-index: 90">
 												<ion-icon name="close-circle"></ion-icon>
 											</button>
 										</div>
@@ -1955,7 +1953,7 @@
 									</div>
 								</div>
 								<div class="col-md-auto p-0 mr-2 mt-0 text-right text-success">
-									<button class="btn btn-sm btn-outline-success iconClClass removeCond text-success border rounded px-1 pb-0" style="z-index: 1000">
+									<button class="btn btn-sm btn-outline-success iconClClass removeCond text-success border rounded px-1 pb-0" style="z-index: 90">
 										<ion-icon name="close-circle"></ion-icon>
 									</button>
 								</div>
@@ -1978,6 +1976,7 @@
 		src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
 	<script nomodule
 		src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+	<script src="./js/lib/jquery.popuplayer.js"></script>
 </body>
 
 <div class="modal-busy" id="loader" style="display: none">
diff --git a/js/lib/jquery.popuplayer.js b/js/lib/jquery.popuplayer.js
new file mode 100644
index 0000000..99fc9a2
--- /dev/null
+++ b/js/lib/jquery.popuplayer.js
@@ -0,0 +1,151 @@
+/**
+ * jQuery Popup Layer Plugin
+ * https://github.com/edwardnevermind/jquery.popuplayer.js
+ *
+ * @author Edward
+ * MIT licensed
+ */
+
+;(function($) {
+
+    var PopupLayer = function(elem, opt) {
+        this.$elem = $(elem);
+        this.$mask = $("<div class='popup-layer'></div>");
+        this.$content = $("<div class='popup-layer-content p-3'></div>");
+        this.$blurAreas = $("body > *");
+
+        this.defaults = {
+           content: "", // 内容可以传入，纯文本和类名
+           target: "body", // 把弹出层添加到的目标节点
+           to: "top",   // 向哪个方向展开
+           screenRatio: 0.3, // 占屏幕百分比
+           heightOrWidth: 300, // 当且仅当screenRatio为0时生效
+           blur: false, // 是否开启毛玻璃效果
+           speed: 200,  // 动画速度
+           color: "#000", // 文本颜色
+           backgroundColor: "#fff", // 背景颜色
+           contentToggle: false, // 点击content是否关闭弹出层
+           closeBtn: null,  // 指定关闭按钮
+           openCallback: null, // 展开的回调
+           closeCallback: null // 关闭的回调
+        };
+
+        // 合并默认参数和自定义参数
+        this.options = $.extend({}, this.defaults, opt);
+    };
+ 
+    PopupLayer.prototype = {
+        init: function() {
+            this.attachElems();
+            this.updateContent();
+            this.bindEvents();
+        },
+        updateContent: function() {
+            this.$content.html($(this.options.content));
+
+            var that = this;
+            $(function() {
+                that.$content.children().show();
+            });
+
+            var content_position = {
+                top: 63,
+                right: 38,
+                bottom: 0,
+                left: 38
+            }
+
+            content_position[this.options.to] = "100%";
+
+            this.$content.css({
+                'top': content_position.top,
+                'right': content_position.right,
+                'bottom': content_position.bottom,
+                'left': content_position.left,
+                'color': this.options.color,
+                'background-color': this.options.backgroundColor,
+                'transition': 'all ' + (this.options.speed / 1000) + 's'
+            });
+            
+        },
+        attachElems: function() {
+            this.$content.appendTo(this.$mask);
+            this.$mask.appendTo($(this.options.target));
+        },
+        open: function() {
+            this.$mask.fadeIn(this.options.speed);
+
+            // 如果screenRatio为0那么根据屏幕宽高计算占比
+            if (this.options.screenRatio != 0) {
+                this.$content.css({
+                    [this.options.to]: (1 - this.options.screenRatio) * 100 + "%"
+                });
+            } else {
+                var ratio = 0;
+
+                if (this.options.to == "left" || this.options.to == "right"){
+                    ratio = this.options.heightOrWidth / $(window).outerWidth();
+                    
+                } else {
+                    ratio = this.options.heightOrWidth / $(window).outerHeight();
+                }
+                this.$content.css({
+                    [this.options.to]: (1 - ratio) * 100 + "%"
+                });
+            }
+            
+
+            if (this.options.blur) {
+                this.$blurAreas.addClass('popup-layer-blur');
+            }
+
+            if (this.options.openCallback) {
+                this.options.openCallback();
+            }
+        },
+        close: function() {
+            this.$mask.fadeOut(this.options.speed);
+            this.$content.css({
+                [this.options.to]: "100%"
+            })
+
+            if (this.options.blur) {
+                this.$blurAreas.removeClass('popup-layer-blur');
+            }
+
+            if (this.options.closeCallback) {
+                this.options.closeCallback();
+            }
+        },
+        bindEvents: function() {
+            var that = this;
+            this.$elem.click(function() {
+                that.open();
+            });
+
+            // 阻止点击content时冒泡到上层
+            if (!this.options.contentToggle) {
+                this.$content.click(function(event) {
+                    event.stopPropagation();
+                });
+            }
+
+            this.$mask.click(function() {
+                that.close();
+            });
+
+            if (this.options.closeBtn) {
+                $(this.options.closeBtn).click(function() {
+                    that.close();
+                })
+            }
+        }
+    };
+
+    $.fn.PopupLayer = function(options) {
+        return this.each(function() {
+            new PopupLayer(this, options).init();
+        });
+    };
+
+})(jQuery);
diff --git a/js/script_4.4.js b/js/script_4.4.js
index 4638b39..76905c1 100644
--- a/js/script_4.4.js
+++ b/js/script_4.4.js
@@ -14,6 +14,26 @@ const cssCantoHeight = 0.65;
 const cssTableMainHeight = 0.95;  //.tableMain {height: 95%;}
 const bgImgUrl1 = "./images/fefeff.png";
 const bgImgUrl2 = "./images/f8f9fa.png";
+const textAbout = '<div><h3 class="font-weight-bold">Linking Dante <small class=\"text-muted\">(LiDa)</small></h3>\n'
++ '<p>Linking Dante (LiDa) è un progetto federatore sviluppato dall’<a href="https://www.isti.cnr.it/" target="_blank" rel="noopener noreferrer">ISTI CNR</a> con l’obiettivo di digitalizzare le '
++ 'opere dantesche e la conoscenza a esse relativa, collegando – e in alcuni casi implementando – precedenti progetti per mettere a disposizione dell’utente una piattaforma integrata, dove sono '
++ 'possibili diverse tipologie di navigazione ed interrogazione. <br> La biblioteca digitale di LiDa è basata sulle tecnologie e sui linguaggi del Semantic Web e rispetta i principi FAIR (Findable, '
++ 'Accessible, Interoperable, Reusable): il testo di Dante si trova al centro di una rete che lo connette a diverse risorse che permettono di approfondire le sue caratteristiche linguistiche, '
++ 'retoriche e semantiche; per raggiungere questo scopo, LiDa ha tradotto la conoscenza relativa al testo dantesco che si trova disseminata in diversi strumenti digitali e cartacei in un grafo '
++ 'strutturato secondo logiche calcolabili ed espresso in linguaggio formale. In particolare, LiDa integra la conoscenza raccolta dai progetti:</p><ul><li><strong> <a href="https://dantesearch.dantenetwork.it/" '
++ 'target="_blank" rel="noopener noreferrer">DanteSearch</a></strong> è una risorsa digitale che permette l’interrogazione dell’intero corpus delle opere volgari e latine di Dante, che sono state interamente '
++ 'lemmatizzate e annotate in XML-TEI per descriverne la morfologia e – solo nel caso di Rime, Convivio e Commedia – la sintassi. Il progetto attivato nel 1999 ed espanso nel 2009 con il coordinamento del '
++ 'prof. Mirko Tavoni dell’Università di Pisa; all’interno di LiDa, la conoscenza raccolta da DanteSearch è stata strutturata grazie alle ontologie OLiRes e ORL, che sono a loro volta interoperabili '
++ 'con MOnt, l’ontologia delle metafore della Commedia realizzata da Carlo Meghini e Gaia Tomazzoli.</li><li><strong> <a href="https://dama.dantenetwork.it/" target="_blank" rel="noopener noreferrer">'
++ 'Dante Medieval Archive (DaMA)</a></strong>, allestito nell’ambito del progetto PRIN 2006 "La biblioteca medievale di Dante. Archivio digitale delle fonti volgari e latine (DaMA-Dante Medieval '
++ 'Archive) e edizioni commentate delle opere minori", coordinato dall’Università di Pisa, è un archivio digitale che pubblica le opere dantesche e molte delle loro fonti classiche, tardoantiche e '
++ 'medievali, in latino e in volgare; tutte le opere possono essere consultate online o	scaricate in formato XML-TEI. </li><li><strong> <a href="https://dantesources.dantenetwork.it/" target="_blank" '
++ 'rel="noopener noreferrer">DanteSources</a></strong> è stato sviluppato grazie a una collaborazione tra l’ISTI CNR e l’Università di Pisa nell’ambito del progetto PRIN (2013-2016) "Per una Enciclopedia '
++ 'Dantesca Digitale". Il progetto mette a disposizione dell’utente una biblioteca digitale delle fonti primarie delle opere minori di Dante, e permette interrogazioni complesse fornendo diverse tipologie '
++ 'di visualizzazione dei risultati. L’ontologia alla base di DanteSources è stata arricchita con il progetto“Hypermedia Dante Network” (HDN), finanziato dal bando PRIN (2017) e coordinato dall’Università '
++ 'di Pisa in collaborazione con l’ISTI CNR. Grazie a un accordo con la Società Dantesca Italiana e con l’Università di Princeton, HDN rappresenta la conoscenza sulle fonti della Commedia disseminata nei '
++ 'commenti danteschi digitalizzati dal Dartmouth Dante Project</li></ul><div>';
+
 
 
 $(document).ready(function() {
@@ -45,6 +65,18 @@ $(document).ready(function() {
     });
 
 
+	// Evento: click sulla voce about del menu info
+	$("#visAbout").PopupLayer({
+        to: 'bottom',
+        contentToggle: false,
+        screenRatio: 0.6,
+        blur: true,
+		content: textAbout,
+		color: "#212529", 
+        backgroundColor: "rgb(246, 247, 245)",
+	});
+	
+	
 	$("#incrFontSize").click(function() {
 		newFontSize = incSize($('#displaycanto').css("font-size"), 10, 18, 58)
 		newH4FontSize = incSize($('#displaycanto h4').css("font-size"), 12, 24, 72)