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)