"About" funzionante
This commit is contained in:
parent
04b47630eb
commit
eab4cc957e
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue