Add image support/display for non-image-type entries.

This commit is contained in:
kor 2018-10-31 00:42:51 +13:00
parent e05a0ce5f6
commit a6365270b9
3 changed files with 48 additions and 11 deletions

View File

@ -262,6 +262,14 @@ body {
top: 0;
left: 0;
}
.griditem-img {
vertical-align: middle; /* vertical-align css hack removes bottom padding */
width: calc(100% + var(--size-grid-gutter)*2);
max-height: 1000px;
margin-left: calc(-1 * var(--size-grid-gutter));
margin-right: calc(-1 * var(--size-grid-gutter));
padding-top: var(--size-grid-gutter);
}
.image-overlay {
background-color: var(--color-imagedarken);
position: absolute;

View File

@ -2497,7 +2497,7 @@ MEDITATION CLASS
> "Be in this world but not of it"
LINK : http://www.duncantrussell.com/episodes/2018/5/10/david-nichtern
FILE : 12018-08-11_med.gif
TYPE : image
TYPE : quote
NOTE : Centered and deep. Softened not dulled.
ITS JUST GONE

View File

@ -78,6 +78,8 @@ function View()
let imgLoad = imagesLoaded( container );
// When all images finish: redo mansonry layout
imgLoad.on( 'always', function() { parent.msnry.layout(); } );
// As images load one by one: redo masonry layout
// imgLoad.on( 'progress', function() { parent.msnry.layout(); } );
}
this.buildEntry = function(db, key)
@ -230,18 +232,23 @@ function View()
entry += this.doMultilineFormatting(value.QOTE, "griditem-quote", "fas fa-comment textIcon");
}
// TERM
if (SETTINGS.SHOWTERM && this.isDefined(value.TERM))
{
entry += this.doMultilineFormatting(value.TERM, "griditem-term", "fas fa-ribbon textIcon");
}
// PROGRESS
if (SETTINGS.SHOWPROG && this.isDefined(value.PROG))
{
entry += `<div class="griditem-prog"><i class="fas fa-clock textIcon"></i>${value.PROG}</div>`;
}
// IMAGE - for non-image-type-entry
if (SETTINGS.SHOWIMAG
&& !this.isType(value.TYPE, 'image')
&& this.isDefined(value.FILE)
&& this.isImage(value.FILE))
{
entry += `<div class="image">`;
entry += `<img class="griditem-img" src="content/media/${value.FILE}">`;
entry += `</div>`;
}
// FILE
if (SETTINGS.SHOWFILE && this.isDefined(value.FILE))
{
@ -263,9 +270,11 @@ function View()
entry += `</div>`;
}
// IMAGE
if (SETTINGS.SHOWIMAG && this.isDefined(value.TYPE)
&& value.TYPE[0] === 'image' && this.isDefined(value.FILE))
// IMAGE - for image-type-entry
if (SETTINGS.SHOWIMAG
&& this.isType(value.TYPE, 'image')
&& this.isDefined(value.FILE)
&& this.isImage(value.FILE))
{
entry += `<div class="image">`;
if (SETTINGS.SHOWOVERLAY)
@ -430,7 +439,7 @@ function View()
return icon;
}
// GENERAL HELPER
// HELPER
this.isDefined = function(value)
{
return (typeof value !== 'undefined');
@ -441,6 +450,26 @@ function View()
return (typeof value == 'object');
}
this.isImage = function(filename)
{
return (/\.(gif|jpg|jpeg|tiff|png)$/i).test(filename);
}
this.isType = function(typeArray, value)
{
if (this.isDefined(typeArray))
{
for (var i = 0; i < typeArray.length; i++)
{
if (typeArray[i] == value)
{
return true;
}
}
}
return false;
}
String.prototype.to_properCase = function()
{
return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});