Skip to content
Snippets Groups Projects
Commit db7d8045 authored by Jettka, Daniel's avatar Jettka, Daniel
Browse files

overlay extension: added data type and js/css for displaying links in overlay with iframe

parent 262c521e
Branches
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
css/overlayer.css 0 → 100644
+ 90
− 0
View file @ db7d8045
/* avoid background scrolling */
.noscroll{
overflow: hidden;
}
/* overlay box */
div#overlayBackground{
background:rgba(0, 0, 0, 0.7) none repeat scroll 0 0!important;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:500;
}
div#overlayBox{
position:fixed;
top:15%;
left:5%;
right:5%;
bottom:15%;
background-color:#fff;
color:#7F7F7F;
padding:20px;
border:2px solid #ccc;
border-radius: 20px;
box-shadow: 0 1px 5px #333;
z-index:501;
}
@media (min-width: 800px) {
div#overlayBox{
left:10%;
right:10%;
}
}
@media (min-width: 1200px) {
div#overlayBox{
left:15;
right:15%;
}
}
@media (min-width: 1400px) {
div#overlayBox{
left:20%;
right:20%;
}
}
a#overlayBoxclose{
float:right;
width:26px;
height:26px;
background:transparent url("https://corpora.uni-hamburg.de/hzsk/sites/default/files/images/icons/cancel-icon.png") repeat top left;
color:transparent;
margin-top:-30px;
margin-right:-30px;
cursor:pointer;
}
div#overlayBoxContent{
/* overflow:auto; */
max-height:100%;
max-width:100%;
}
a.overlayLink:after{
content: "";
display: inline-block;
background: url("https://corpora.uni-hamburg.de/hzsk/sites/default/files/images/icons/window-open-icon.png") no-repeat top right;
width: 16px;
height: 12px;
margin: 0 0 -1px 5px;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
a.overlayLink.noIcon:after{
content: "";
display: none;
background: none;
width: 0;
height: 0;
margin: 0;
}
index.html
+ 25
− 0
View file @ db7d8045
......@@ -20,6 +20,7 @@
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/infobar.css" />
<link rel="stylesheet" href="css/timeline.css" />
<link rel="stylesheet" href="css/overlayer.css">
<script src="js/d3.v3.min.js"></script>
<script src="js/vue.min.js"></script>
......@@ -34,6 +35,9 @@
<script src="js/tags.js"></script>
<script src="js/utils.js"></script>
<script src="js/modernizr-custom.js"></script>
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/overlayer.js"></script>
<!--[if lt IE 9]>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"
......@@ -143,6 +147,21 @@ cpietsch@gmail.com
<span v-else-if="entry.type === 'function'">
<span v-html="getContent(entry)"></span>
</span>
<span v-else-if="entry.type === 'overlay'">
<div v-if="item[entry.source] === 'no pdf' || item[entry.source] === 'no audio'">
-
</div>
<div v-else-if="item[entry.source].split('.').pop() === 'mp3'">
<a :href="item[entry.source]" target="_blank" class="overlayLink audio noIcon" data-overlay-left-right-margin="10%" data-overlay-top-bottom-margin="10%">
{{ item[entry.source].split('/').pop() }}
</a>
</div>
<div v-else>
<a :href="item[entry.source]" target="_blank" class="overlayLink noIcon" data-overlay-left-right-margin="10%" data-overlay-top-bottom-margin="10%">
{{ item[entry.source].split('/').pop() }}
</a>
</div>
</span>
<span v-else>
{{ getContent(entry) }}
</span>
......@@ -193,5 +212,11 @@ cpietsch@gmail.com
<script src="js/sidebars.js"></script>
<script src="js/viz.js"></script>
<script>
$(document).ready( function( ) {
//activate processing overlayer links (opening overlay box)
$("body").overlayer({});
});
</script>
</body>
</html>
js/jquery-2.1.0.min.js 0 → 100644
+ 4
− 0
View file @ db7d8045
This diff is collapsed.
js/overlayer.js 0 → 100644
+ 89
− 0
View file @ db7d8045
(function ( $ ) {
$.fn.overlayer = function( options ) {
var settings = $.extend({
inactive: []
}, options );
return this.each(function() {
var doc = this;
$(doc).delegate('a.overlayLink', 'click', function(evt) {
evt.stopPropagation();
evt.preventDefault();
// open overlay box
$('body', window.top.document).append("<div class='overlayBackground overlayBoxclose' id='overlayBackground'></div>"+
"<div class='overlayBox' id='overlayBox'>"+
"<a class='overlayBoxclose' id='overlayBoxclose' title='Close box'>close</a>"+
"<div id='overlayBoxContent'>"+
"<img height='30' src='/hzsk/sites/default/files/images/icons/spinner-small.gif' alt='Please wait while loading...'/>"+
"</div>"+
"</div>");
// avoid scrolling on body
$('body', window.top.document).toggleClass("noscroll");
// register handler for closing the box
$('.overlayBoxclose', window.top.document).click(function(){
$('#overlayBoxContent', window.top.document).html('');
$('#overlayBox', window.top.document).remove();
$('#overlayBackground', window.top.document).remove();
$('body', window.top.document).toggleClass("noscroll");
});
var hrefAttr = $(this).attr('href');
if (typeof hrefAttr !== typeof undefined && hrefAttr !== false) {
if (hrefAttr.match("^#")) {
// href value refers to #id
$('#overlayBoxContent', window.top.document).css("height", "100%");
$('#overlayBoxContent', window.top.document).html($(hrefAttr).html());
} else{
// href value understood to refer to url
$('#overlayBoxContent', window.top.document).css("height", "100%");
//don't show spinner
//$('#overlayBoxContent', window.top.document).css("background", "url(https://corpora.uni-hamburg.de/hzsk/sites/default/files/images/icons/spinner-small.gif) center center no-repeat");
// test if href attribute refers to audio file (e.g. mp3)
if(hrefAttr.split('.').pop() == 'mp3'){
$('#overlayBoxContent', window.top.document).html('<div style="height: 100%; display: flex; justify-content: center; align-items: center;">'
+'<audio controls="controls">'
+'<source src="'+hrefAttr+'" />'
+'</audio></div>');
} else{
$('#overlayBoxContent', window.top.document).html('<iframe width="100%" height="99%" src="'+hrefAttr+'" style="background-color:white;"></iframe>');
}
}
var dataOverlayMargin = $(this).data('overlay-top-bottom-margin');
if(typeof dataOverlayMargin !== typeof undefined && dataOverlayMargin !== false){
if (dataOverlayMargin.match("^.+$")) {
$('#overlayBox', window.top.document).css("top", dataOverlayMargin);
$('#overlayBox', window.top.document).css("bottom", dataOverlayMargin);
}
}
var dataOverlayMargin = $(this).data('overlay-left-right-margin');
if(typeof dataOverlayMargin !== typeof undefined && dataOverlayMargin !== false){
if (dataOverlayMargin.match("^.+$")) {
$('#overlayBox', window.top.document).css("right", dataOverlayMargin);
$('#overlayBox', window.top.document).css("left", dataOverlayMargin);
}
}
}
});
return this;
});
}
}( jQuery ));
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment