Skip to content

Instantly share code, notes, and snippets.

@rds76
Last active Dec 16, 2019
Embed
What would you like to do?
HADasboard hack to fullscreen images on click
$(function() {
var lastParent = null, imgHackTimer = null;
var onImgClickHack = function(evnt){
// if(evnt) console.log(evnt.target.src);
if (lastParent) {
$('#fullImgHack').fadeOut('fast', function() {
$('#fullImgHack').children().appendTo(lastParent);
$('#fullImgHack').css('z-index', '0');
lastParent = null;
});
if (imgHackTimer) { clearTimeout(imgHackTimer); imgHackTimer = null;}
} else {
lastParent = $(evnt.target).parents().eq(1);
$(evnt.target).parent().siblings('h1').appendTo($('#fullImgHack'));
$(evnt.target).parent().prependTo($('#fullImgHack'));
$('#fullImgHack').css('z-index', '10').fadeIn('fast');
if (ihRetainTimeout > 0)
imgHackTimer = setTimeout(onImgClickHack, ihRetainTimeout * 1000);
}
};
// hide iframe element which overlaps img due z-index +1
if (ihIdKeywords.length > 0) {
$( ihIdKeywords.map(item => '[id*='+item+'] .outer-frame.iframe').join(', ') ).hide();
} else { $('img').parent().prev('.outer-frame.iframe').hide(); }
// crate nice hidden absulute div which has same dimensions as <ul> and put it inside gridster
$('<div id="fullImgHack" class=""></div>')
.attr('style', $('.gridster ul').attr('style'))
.css({'z-index': 1, 'position':'absolute', 'overflow': 'hidden'})
.hide()
.prependTo($('.gridster'));
// hook on click to selected images
$(ihIdKeywords.length > 0 ? ihIdKeywords.map(item => '[id*='+item+'] .img-frame').join(', ') : '.img-frame').click(onImgClickHack);
});
head_includes:
- <! head tags go here ->
- |
<style>
#fullImgHack .title {position: absolute; bottom: 0px; margin: 0px 0px 0px 0px; width: 100%; font-size: 120%;}
#fullImgHack .outer-image {width: 100%; height: 100%;}
/* use 'max-height' instead of 'height' to prevent smaller images to stretch */
#fullImgHack .img-frame {height: 100%; display: block; margin: auto;}
</style>
#
# Custom body includes - should be a YAML List, e.g.:
#
#body_includes:
# - some include
# - some other include
#
# Text will be included verbatim in the body section of the doc, use it for JavaScript
#
# It is your responsibility to ensure the HTML is correct
#
body_includes:
- <! body tags go here ->
- |
<script>
/**
* ** Fullscreen on img click hack - good for fullview cameras **
*/
var
// set timeout in sec to auto hide fullscreen mode, 0 to stay untill you click again
ihRetainTimeout = 30,
// based on widget name (be carefull as non alfa letters are replaced with '-'; leave empty [] for all images with 'img-frame' class
ihIdKeywords = ['cam', 'radar'];
$(function(){var b=null,imgHackTimer=null;var c=function(a){if(b){$('#fullImgHack').fadeOut('fast',function(){$('#fullImgHack').children().appendTo(b);$('#fullImgHack').css('z-index','0');b=null});if(imgHackTimer){clearTimeout(imgHackTimer);imgHackTimer=null}}else{b=$(a.target).parents().eq(1);$(a.target).parent().siblings('h1').appendTo($('#fullImgHack'));$(a.target).parent().prependTo($('#fullImgHack'));$('#fullImgHack').css('z-index','10').fadeIn('fast');if(ihRetainTimeout>0)imgHackTimer=setTimeout(c,ihRetainTimeout*1000)}};if(ihIdKeywords.length>0){$(ihIdKeywords.map(item=>'[id*='+item+'] .outer-frame.iframe').join(', ')).hide()}else{$('img').parent().prev('.outer-frame.iframe').hide()}$('<div id="fullImgHack" class=""></div>').attr('style',$('.gridster ul').attr('style')).css({'z-index':1,'position':'absolute','overflow':'hidden'}).hide().prependTo($('.gridster'));$(ihIdKeywords.length>0?ihIdKeywords.map(item=>'[id*='+item+'] .img-frame').join(', '):'.img-frame').click(c)});
</script>
@Jebonicus
Copy link

Jebonicus commented Aug 26, 2019

Worked great, just what I was looking for. Thanks!

@rds76
Copy link
Author

rds76 commented Dec 16, 2019

fullcode.js is just the source code, no required to place it in appdaemon skin as code is compressed (single line #37) inside variable.yaml

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment