mirror of
https://github.com/TangentFoxy/memex.git
synced 2024-11-22 04:54:23 +00:00
Refactor griditem to article, menu to nav.
This commit is contained in:
kor
parent
bd830ddc0c
commit
302fa39509
@ -68,11 +68,11 @@ Stored in a human-readable, flat-file database called [Indental](https://wiki.xx
|
||||
| ---: | :--- |
|
||||
| STATSNUMTAGS | max limit of tags to show in menu |
|
||||
| STATSNUMTYPE | max limit of types to show in menu |
|
||||
| WIDEGRIDITEM | allow wide entries (`WIDE : true`) |
|
||||
| WIDEARTICLE | allow wide entries (`WIDE : true`) |
|
||||
| AUTOWIDETRIGGER | automaticly wide entry if it has more QOTE entries than this number |
|
||||
| USEMASONRY | enable [masonry](https://masonry.desandro.com/) layout library usage |
|
||||
| MASONRYPROGRESS | masonry re-layout as images load (true), or only once all images complete (false) |
|
||||
| GRIDITEMIDBASE | CSS name prefix |
|
||||
| ARTICLEIDBASE | CSS name prefix |
|
||||
| SHOWUPPER | toggle display of upper entry element(s) |
|
||||
| SHOWTITLE | toggle display of entry title |
|
||||
| SHOWAUTH | toggle display of entry author(s) |
|
||||
|
||||
@ -161,12 +161,12 @@ nav:hover {
|
||||
nav::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.menu-itemgroup {
|
||||
.nav-itemgroup {
|
||||
padding-bottom: var(--size-menu-itemgroup-sepv);
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
.menu-item {
|
||||
.nav-item {
|
||||
padding-bottom: calc(var(--size-menu-item-sepv) / 2);
|
||||
padding-top: calc(var(--size-menu-item-sepv) / 2);
|
||||
font-size: var(--size-font-menutypes);
|
||||
@ -177,18 +177,18 @@ nav::-webkit-scrollbar {
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
.menu-item:hover {
|
||||
.nav-item:hover {
|
||||
color: var(--color-menuascent);
|
||||
opacity: var(--alpha-ascent);
|
||||
}
|
||||
.menu-itemcount {
|
||||
.nav-itemcount {
|
||||
padding-right: calc(var(--size-menu-item-seph) / 2);
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
.menu-itemicon {
|
||||
.nav-itemicon {
|
||||
margin-left: calc(var(--size-menu-item-seph) / 2);
|
||||
margin-top: calc(var(--size-font-bodytypes) / 10);
|
||||
width: calc(var(--size-font-bodytypes) * 1.25);
|
||||
@ -196,11 +196,11 @@ nav::-webkit-scrollbar {
|
||||
text-align: center;
|
||||
float: left;
|
||||
}
|
||||
.menu-tagcontainer {
|
||||
.nav-tagcontainer {
|
||||
margin: 0 auto;
|
||||
display: table;
|
||||
}
|
||||
.menu-tagicon {
|
||||
.nav-tagicon {
|
||||
padding-bottom: calc(var(--size-menu-item-sepv) / 2);
|
||||
padding-top: calc(var(--size-menu-item-sepv) / 2);
|
||||
font-size: var(--size-font-menutags);
|
||||
@ -211,7 +211,7 @@ nav::-webkit-scrollbar {
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
.menu-tag {
|
||||
.nav-tag {
|
||||
padding-bottom: calc(var(--size-menu-tag-sepv) / 2);
|
||||
padding-top: calc(var(--size-menu-tag-sepv) / 2);
|
||||
font-size: var(--size-font-body);
|
||||
@ -221,23 +221,23 @@ nav::-webkit-scrollbar {
|
||||
float: left;
|
||||
clear: left;
|
||||
}
|
||||
.menu-tagcount {
|
||||
.nav-tagcount {
|
||||
padding-right: var(--size-menu-tag-sepv);
|
||||
text-align: right;
|
||||
float: left;
|
||||
}
|
||||
.menu-taglabel {
|
||||
.nav-taglabel {
|
||||
text-align: left;
|
||||
float: left;
|
||||
}
|
||||
.menu-tag:hover {
|
||||
.nav-tag:hover {
|
||||
opacity: var(--alpha-ascent);
|
||||
}
|
||||
.menu-tag:hover .menu-taglabel {
|
||||
.nav-tag:hover .nav-taglabel {
|
||||
background-color: var(--color-itemascent);
|
||||
color: var(--color-menubg);
|
||||
}
|
||||
.menu-tag:hover .menu-tagcount {
|
||||
.nav-tag:hover .nav-tagcount {
|
||||
color: var(--color-itemascent);
|
||||
}
|
||||
|
||||
@ -258,7 +258,7 @@ main:after {
|
||||
}
|
||||
|
||||
/* GRID ITEM */
|
||||
article, .griditem-wide {
|
||||
article, .article-wide {
|
||||
padding-bottom: var(--size-grid-gutter);
|
||||
border-radius: var(--size-item-corner);
|
||||
margin-bottom: var(--size-grid-gutter);
|
||||
@ -269,7 +269,7 @@ article, .griditem-wide {
|
||||
float: left;
|
||||
}
|
||||
@media screen and (min-width: 886px) {
|
||||
.griditem-wide {
|
||||
.article-wide {
|
||||
width: calc(var(--size-grid-column) * 2 + var(--size-grid-gutter));
|
||||
}
|
||||
}
|
||||
@ -279,22 +279,22 @@ article:hover {
|
||||
article::selection {
|
||||
background: var(--b_high);
|
||||
}
|
||||
.griditem-containerupper {
|
||||
.article-containerupper {
|
||||
padding: var(--size-grid-gutter) var(--size-grid-gutter) 0 var(--size-grid-gutter);
|
||||
display: inline-block;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
}
|
||||
.griditem-containerlower {
|
||||
.article-containerlower {
|
||||
padding: 0 var(--size-grid-gutter) 0 var(--size-grid-gutter);
|
||||
z-index: 100;
|
||||
}
|
||||
.griditem-containerlower:empty {
|
||||
.article-containerlower:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*IMAGE*/
|
||||
.griditem-containerupper-image {
|
||||
.article-containerupper-image {
|
||||
padding: var(--size-grid-gutter) var(--size-grid-gutter) 0 var(--size-grid-gutter);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
@ -304,7 +304,7 @@ article::selection {
|
||||
z-index: 200;
|
||||
top: 0;
|
||||
}
|
||||
.griditem-containerlower-image {
|
||||
.article-containerlower-image {
|
||||
padding: var(--size-grid-gutter);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@ -312,15 +312,15 @@ article::selection {
|
||||
z-index: 200;
|
||||
left: 0;
|
||||
}
|
||||
.griditem-containerlower-image:empty {
|
||||
.article-containerlower-image:empty {
|
||||
display: none;
|
||||
}
|
||||
.griditem-image {
|
||||
.article-image {
|
||||
background: transparent;
|
||||
padding-bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.griditem-image-img {
|
||||
.article-image-img {
|
||||
vertical-align: middle; /* vertical-align css hack removes bottom padding */
|
||||
object-fit: cover;
|
||||
margin-bottom: 0px;
|
||||
@ -331,7 +331,7 @@ article::selection {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.griditem-img {
|
||||
.article-img {
|
||||
vertical-align: middle; /* vertical-align css hack removes bottom padding */
|
||||
width: calc(100% + var(--size-grid-gutter)*2);
|
||||
max-height: 1000px;
|
||||
@ -348,41 +348,41 @@ article::selection {
|
||||
z-index: 150;
|
||||
opacity: 0;
|
||||
}
|
||||
.griditem-image:hover .image-overlay {
|
||||
.article-image:hover .image-overlay {
|
||||
opacity: var(--alpha-darken);
|
||||
}
|
||||
.griditem-image .griditem-link {
|
||||
.article-image .article-link {
|
||||
display: none;
|
||||
}
|
||||
.griditem-image:hover .griditem-link {
|
||||
.article-image:hover .article-link {
|
||||
display: initial;
|
||||
text-shadow: 0 0 3em #000;
|
||||
}
|
||||
|
||||
/* TITLE */
|
||||
.griditem-title {
|
||||
.article-title {
|
||||
color: var(--color-item);
|
||||
font-size: var(--size-font-title);
|
||||
text-decoration: none;
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
.griditem-image .griditem-title {
|
||||
.article-image .article-title {
|
||||
display: none;
|
||||
}
|
||||
.griditem-image:hover .griditem-title {
|
||||
.article-image:hover .article-title {
|
||||
display: initial;
|
||||
text-shadow: 0 0 3em #000;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* LINK */
|
||||
.griditem-linkcontainer {
|
||||
.article-linkcontainer {
|
||||
margin-top: var(--size-item-elem-padding);
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
.griditem-link {
|
||||
.article-link {
|
||||
width: calc(100% - var(--size-font-bodytypes) * 2);
|
||||
float: left;
|
||||
clear: both;
|
||||
@ -390,37 +390,37 @@ article::selection {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.griditem-linktitle {
|
||||
.article-linktitle {
|
||||
opacity: var(--alpha-idle);
|
||||
color: var(--color-item);
|
||||
font-size: var(--size-font-body);
|
||||
float: left;
|
||||
}
|
||||
.griditem-link:hover .griditem-linktitle {
|
||||
.article-link:hover .article-linktitle {
|
||||
background-color: var(--color-itemascent);
|
||||
color: var(--color-itembg);
|
||||
}
|
||||
.griditem-linkicon {
|
||||
.article-linkicon {
|
||||
width: 23px;
|
||||
font-size: 15px;
|
||||
color: var(--color-item);
|
||||
float: left;
|
||||
}
|
||||
article:hover .griditem-linktitle {
|
||||
article:hover .article-linktitle {
|
||||
opacity: var(--alpha-enabled);
|
||||
}
|
||||
.griditem-link:hover .griditem-linktitle {
|
||||
.article-link:hover .article-linktitle {
|
||||
opacity: var(--alpha-ascent);
|
||||
}
|
||||
|
||||
/* TYPE */
|
||||
.griditem-typecontainer {
|
||||
.article-typecontainer {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
margin-right: var(--size-grid-gutter);
|
||||
}
|
||||
.griditem-type {
|
||||
.article-type {
|
||||
width: calc(var(--size-font-bodytypes)*2);
|
||||
color: var(--color-item);
|
||||
padding-bottom: var(--size-grid-gutter);
|
||||
@ -431,21 +431,21 @@ article:hover .griditem-linktitle {
|
||||
float: right;
|
||||
text-decoration: none;
|
||||
}
|
||||
.griditem-image .griditem-typeicon {
|
||||
.article-image .article-typeicon {
|
||||
display: none;
|
||||
}
|
||||
.griditem-image:hover .griditem-typeicon {
|
||||
.article-image:hover .article-typeicon {
|
||||
display: initial;
|
||||
color: var(--color-image);
|
||||
}
|
||||
.griditem-typeicon {
|
||||
.article-typeicon {
|
||||
opacity: var(--alpha-idleicon);
|
||||
}
|
||||
article:hover .griditem-typeicon {
|
||||
article:hover .article-typeicon {
|
||||
opacity: var(--alpha-enabledicon);
|
||||
color: var(--color-item);
|
||||
}
|
||||
.griditem-type:hover .griditem-typeicon {
|
||||
.article-type:hover .article-typeicon {
|
||||
opacity: var(--alpha-ascent);
|
||||
color: var(--color-itemascent);
|
||||
}
|
||||
@ -458,61 +458,61 @@ article:hover .griditem-typeicon {
|
||||
article:hover .article-icon {
|
||||
opacity: var(--alpha-enabledicon);
|
||||
}
|
||||
.griditem-row {
|
||||
.article-row {
|
||||
padding-top: var(--size-item-elem-padding);
|
||||
color: var(--color-item);
|
||||
font-size: var(--size-font-body);
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
article:hover .griditem-row {
|
||||
article:hover .article-row {
|
||||
color: var(--color-item);
|
||||
}
|
||||
.griditem-image .griditem-row {
|
||||
.article-image .article-row {
|
||||
color: var(--color-image);
|
||||
}
|
||||
.griditem-rowtext {
|
||||
.article-rowtext {
|
||||
display: inline;
|
||||
opacity: var(--alpha-idle);
|
||||
}
|
||||
article:hover .griditem-rowtext {
|
||||
article:hover .article-rowtext {
|
||||
opacity: var(--alpha-enabled);
|
||||
}
|
||||
.griditem-file {
|
||||
.article-file {
|
||||
word-break: break-all;
|
||||
}
|
||||
.griditem-file-link {
|
||||
.article-file-link {
|
||||
color: var(--color-item);
|
||||
text-decoration: none;
|
||||
}
|
||||
.griditem-file-link:hover {
|
||||
.article-file-link:hover {
|
||||
background-color: var(--color-itemascent);
|
||||
color: var(--color-itembg);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* IMAGE */
|
||||
.griditem-containerlower-image {
|
||||
.article-containerlower-image {
|
||||
display: none;
|
||||
}
|
||||
.griditem-image:hover .griditem-containerlower-image {
|
||||
.article-image:hover .article-containerlower-image {
|
||||
display: initial;
|
||||
}
|
||||
.griditem-taglink {
|
||||
.article-taglink {
|
||||
color: var(--color-item);
|
||||
text-decoration:none;
|
||||
}
|
||||
article:hover .griditem-taglink {
|
||||
article:hover .article-taglink {
|
||||
color: var(--color-item);
|
||||
}
|
||||
article:hover .griditem-taglink:hover {
|
||||
article:hover .article-taglink:hover {
|
||||
background-color: var(--color-itemascent);
|
||||
color: var(--color-itembg);
|
||||
}
|
||||
.griditem-image:hover .griditem-taglink {
|
||||
.article-image:hover .article-taglink {
|
||||
color: #fff;
|
||||
}
|
||||
.griditem-image:hover .griditem-taglink:hover {
|
||||
.article-image:hover .article-taglink:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
@ -2,11 +2,11 @@ const SETTINGS =
|
||||
{
|
||||
STATSNUMTAGS: 5,
|
||||
STATSNUMTYPE: 10,
|
||||
WIDEGRIDITEM: true,
|
||||
WIDEARTICLE: true,
|
||||
AUTOWIDETRIGGER: 4,
|
||||
USEMASONRY: true,
|
||||
MASONRYPROGRESS: true,
|
||||
GRIDITEMIDBASE: 'item',
|
||||
ARTICLEIDBASE: 'item',
|
||||
SHOWUPPER: true,
|
||||
SHOWTITLE: true,
|
||||
SHOWDATE: true,
|
||||
|
||||
@ -73,17 +73,17 @@ function View()
|
||||
{
|
||||
let value = db[key];
|
||||
let itemClass = "article";
|
||||
if (SETTINGS.WIDEGRIDITEM)
|
||||
if (SETTINGS.WIDEARTICLE)
|
||||
{
|
||||
if (this.isDefined(value.WIDE) && value.WIDE)
|
||||
{
|
||||
itemClass += " griditem-wide";
|
||||
itemClass += " article-wide";
|
||||
}
|
||||
else if (this.isDefined(value.QOTE))
|
||||
{
|
||||
if (Array.isArray(value.QOTE) && value.QOTE.length > SETTINGS.AUTOWIDETRIGGER)
|
||||
{
|
||||
itemClass += " griditem-wide";
|
||||
itemClass += " article-wide";
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -92,13 +92,13 @@ function View()
|
||||
let entryIsImageType = (SETTINGS.SHOWIMAG && this.isType(value.TYPE, 'image'));
|
||||
if (entryIsImageType)
|
||||
{
|
||||
itemClass += " griditem-image";
|
||||
itemClass += " article-image";
|
||||
onclickImage = `onclick="main.view.handleImageClick(event, this, '${value.FILE}');"
|
||||
style="cursor: pointer;"`;
|
||||
}
|
||||
|
||||
// ARTICLE
|
||||
let entry = `<article class="${itemClass}" id="${SETTINGS.GRIDITEMIDBASE + value.DIID}">`;
|
||||
let entry = `<article class="${itemClass}" id="${SETTINGS.ARTICLEIDBASE + value.DIID}">`;
|
||||
if (this.isDefined(value.LINK))
|
||||
{
|
||||
var idUrl = "url";
|
||||
@ -111,24 +111,24 @@ function View()
|
||||
if (SETTINGS.SHOWLINK && !this.isObject(value.LINK))
|
||||
{
|
||||
// If this item has only one link then make the whole title the link
|
||||
entry += `<a class="griditem-link" href="${String(value.LINK)}" id="${idUrl}">`;
|
||||
entry += `<a class="article-link" href="${String(value.LINK)}" id="${idUrl}">`;
|
||||
}
|
||||
}
|
||||
|
||||
// UPPER CONTENT START
|
||||
if (SETTINGS.SHOWUPPER)
|
||||
{
|
||||
let upperClass = 'griditem-containerupper';
|
||||
let upperClass = 'article-containerupper';
|
||||
if (entryIsImageType)
|
||||
{
|
||||
upperClass = 'griditem-containerupper-image';
|
||||
upperClass = 'article-containerupper-image';
|
||||
}
|
||||
entry += `<div class="${upperClass}" ${onclickImage}>`;
|
||||
|
||||
// TITLE
|
||||
if (SETTINGS.SHOWTITLE)
|
||||
{
|
||||
entry += `<header class="griditem-title">${key.to_properCase()}</header>`;
|
||||
entry += `<header class="article-title">${key.to_properCase()}</header>`;
|
||||
}
|
||||
|
||||
// LINK END
|
||||
@ -138,13 +138,13 @@ function View()
|
||||
{
|
||||
for (let l = 0; l < value.LINK.length; l++)
|
||||
{
|
||||
entry += `<a class="griditem-link" href="${String(value.LINK[l])}" id="${idUrl}">`;
|
||||
entry += `<div class="griditem-linkcontainer"><div class="griditem-linkicon">${this.buildIcon('link')}</div><div class="griditem-linktitle">${this.extractRootDomain(value.LINK[l])}</div></div></a>`;
|
||||
entry += `<a class="article-link" href="${String(value.LINK[l])}" id="${idUrl}">`;
|
||||
entry += `<div class="article-linkcontainer"><div class="article-linkicon">${this.buildIcon('link')}</div><div class="article-linktitle">${this.extractRootDomain(value.LINK[l])}</div></div></a>`;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
entry += `<div class="griditem-linkcontainer"><div class="griditem-linkicon">${this.buildIcon('link')}</div><div class="griditem-linktitle">${this.extractRootDomain(value.LINK)}</div></div></a>`;
|
||||
entry += `<div class="article-linkcontainer"><div class="article-linkicon">${this.buildIcon('link')}</div><div class="article-linktitle">${this.extractRootDomain(value.LINK)}</div></div></a>`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -152,11 +152,11 @@ function View()
|
||||
if (SETTINGS.SHOWTYPE && this.isDefined(value.TYPE))
|
||||
{
|
||||
|
||||
entry += `<div class="griditem-typecontainer">`;
|
||||
entry += `<div class="article-typecontainer">`;
|
||||
for (let tc = 0; tc < value.TYPE.length; tc++)
|
||||
{
|
||||
entry += `<a class="griditem-type" href='#type-${value.TYPE[tc]}'>`;
|
||||
entry += this.buildIcon(value.TYPE[tc], value.TYPE[tc], 'griditem-typeicon');
|
||||
entry += `<a class="article-type" href='#type-${value.TYPE[tc]}'>`;
|
||||
entry += this.buildIcon(value.TYPE[tc], value.TYPE[tc], 'article-typeicon');
|
||||
entry += `</a>`;
|
||||
}
|
||||
entry += `</div>`;
|
||||
@ -169,10 +169,10 @@ function View()
|
||||
// LOWER CONTENT START
|
||||
if (SETTINGS.SHOWLOWER)
|
||||
{
|
||||
let lowerClass = 'griditem-containerlower';
|
||||
let lowerClass = 'article-containerlower';
|
||||
if (entryIsImageType)
|
||||
{
|
||||
lowerClass = 'griditem-containerlower-image';
|
||||
lowerClass = 'article-containerlower-image';
|
||||
}
|
||||
entry += `<div class="${lowerClass}" ${onclickImage}>`;
|
||||
|
||||
@ -197,7 +197,7 @@ function View()
|
||||
let content = '';
|
||||
for (var i = 0; i < value.TAGS.length; i++)
|
||||
{
|
||||
content += `<a class="griditem-taglink" href="#tag-${value.TAGS[i]}">${value.TAGS[i]}</a>`;
|
||||
content += `<a class="article-taglink" href="#tag-${value.TAGS[i]}">${value.TAGS[i]}</a>`;
|
||||
if (i + 1 !== value.TAGS.length)
|
||||
{
|
||||
content += `, `;
|
||||
@ -212,7 +212,7 @@ function View()
|
||||
let content = '';
|
||||
for (var i = 0; i < value.PROJ.length; i++)
|
||||
{
|
||||
content += `<a class="griditem-taglink" href="#proj-${value.PROJ[i]}">${value.PROJ[i].to_properCase()}</a>`;
|
||||
content += `<a class="article-taglink" href="#proj-${value.PROJ[i]}">${value.PROJ[i].to_properCase()}</a>`;
|
||||
if (i + 1 != value.PROJ.length)
|
||||
{
|
||||
content += `, `;
|
||||
@ -252,7 +252,7 @@ function View()
|
||||
&& this.isImage(value.FILE))
|
||||
{
|
||||
entry += `<div class="image">`;
|
||||
entry += `<img class="griditem-img" src="content/media/${value.FILE}" onclick="lightbox.load('content/media/${value.FILE}')">`;
|
||||
entry += `<img class="article-img" src="content/media/${value.FILE}" onclick="lightbox.load('content/media/${value.FILE}')">`;
|
||||
entry += `</div>`;
|
||||
}
|
||||
|
||||
@ -263,13 +263,13 @@ function View()
|
||||
{
|
||||
for (var i = 0; i < value.FILE.length; i++)
|
||||
{
|
||||
entry += this.doRow('file', `<a class="griditem-file-link" href="content/media/${value.FILE[i]}">${value.FILE[i]}</a>`, 'griditem-file');
|
||||
entry += this.doRow('file', `<a class="article-file-link" href="content/media/${value.FILE[i]}">${value.FILE[i]}</a>`, 'article-file');
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
// single
|
||||
entry += this.doRow('file', `<a class="griditem-file-link" href="content/media/${value.FILE}">${value.FILE}</a>`, 'griditem-file');
|
||||
entry += this.doRow('file', `<a class="article-file-link" href="content/media/${value.FILE}">${value.FILE}</a>`, 'article-file');
|
||||
}
|
||||
}
|
||||
|
||||
@ -287,7 +287,7 @@ function View()
|
||||
{
|
||||
entry += `<div class="image-overlay"></div>`;
|
||||
}
|
||||
entry += `<img class="griditem-image-img" src="content/media/${value.FILE}">`;
|
||||
entry += `<img class="article-image-img" src="content/media/${value.FILE}">`;
|
||||
entry += `</div>`;
|
||||
}
|
||||
|
||||
@ -297,90 +297,89 @@ function View()
|
||||
|
||||
this.doRow = function(type, content, extraClass)
|
||||
{
|
||||
return `<div class="griditem-row${extraClass != undefined ? ' '+extraClass : ''}">
|
||||
return `<div class="article-row${extraClass != undefined ? ' '+extraClass : ''}">
|
||||
${type != undefined ? this.buildIcon(type) : ''}
|
||||
<div class="griditem-rowtext">${content}</div>
|
||||
<div class="article-rowtext">${content}</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
this.stats = function(value)
|
||||
{
|
||||
let menuContent = ``;
|
||||
let navContent = ``;
|
||||
if (window.showAdd !== undefined && window.showAdd)
|
||||
{
|
||||
// ADD
|
||||
menuContent += `<div class="menu-itemgroup">`;
|
||||
menuContent += `<a href='#add' class="menu-item">`;
|
||||
menuContent += `<b>a</b>dd`;
|
||||
menuContent += `</a>`;
|
||||
menuContent += `</div>`;
|
||||
navContent += `<div class="nav-itemgroup">`;
|
||||
navContent += `<a href='#add' class="nav-item">`;
|
||||
navContent += `<b>a</b>dd`;
|
||||
navContent += `</a>`;
|
||||
navContent += `</div>`;
|
||||
}
|
||||
|
||||
// TOTAL
|
||||
menuContent += `<div class="menu-itemgroup">`;
|
||||
menuContent += `<a href='#' class="menu-item">`;
|
||||
menuContent += `<div class="menu-itemcount">${value.total}</div>`;
|
||||
menuContent += `<i title="all" class="menu-itemicon fas fa-asterisk"></i>`;
|
||||
menuContent += `</a>`;
|
||||
menuContent += `</div>`;
|
||||
navContent += `<div class="nav-itemgroup">`;
|
||||
navContent += `<a href='#' class="nav-item">`;
|
||||
navContent += `<div class="nav-itemcount">${value.total}</div>`;
|
||||
navContent += `<i title="all" class="nav-itemicon fas fa-asterisk"></i>`;
|
||||
navContent += `</a>`;
|
||||
navContent += `</div>`;
|
||||
|
||||
// DONE
|
||||
if (SETTINGS.SHOWDONE)
|
||||
{
|
||||
menuContent += `<div class="menu-itemgroup">`;
|
||||
menuContent += `<a href='#done-true' class="menu-item">`;
|
||||
menuContent += `<div class="menu-itemcount">${value.done}</div>`;
|
||||
menuContent += `<i title="done" class="menu-itemicon fas fa-check"></i>`;
|
||||
menuContent += `</a>`;
|
||||
menuContent += `<a href='#done-false' class="menu-item">`;
|
||||
menuContent += `<div class="menu-itemcount">${value.total - value.done}</div>`;
|
||||
menuContent += `<i title="to do" class="menu-itemicon fas fa-times"></i>`;
|
||||
menuContent += `</a>`;
|
||||
menuContent += `</div>`;
|
||||
navContent += `<div class="nav-itemgroup">`;
|
||||
navContent += `<a href='#done-true' class="nav-item">`;
|
||||
navContent += `<div class="nav-itemcount">${value.done}</div>`;
|
||||
navContent += `<i title="done" class="nav-itemicon fas fa-check"></i>`;
|
||||
navContent += `</a>`;
|
||||
navContent += `<a href='#done-false' class="nav-item">`;
|
||||
navContent += `<div class="nav-itemcount">${value.total - value.done}</div>`;
|
||||
navContent += `<i title="to do" class="nav-itemicon fas fa-times"></i>`;
|
||||
navContent += `</a>`;
|
||||
navContent += `</div>`;
|
||||
}
|
||||
|
||||
menuContent += `<div class="menu-itemgroup">`;
|
||||
navContent += `<div class="nav-itemgroup">`;
|
||||
for (let ty = 0; ty < Math.min(value.types.length, SETTINGS.STATSNUMTYPE); ty++)
|
||||
{
|
||||
const type = value.types[ty][0];
|
||||
const count = value.types[ty][1];
|
||||
const icon = this.getIcon(type);
|
||||
menuContent += `<a href='#type-${type}' class="menu-item">`;
|
||||
menuContent += `<div class="menu-itemcount">${count}</div>`;
|
||||
menuContent += `<i title="${type}" class="menu-itemicon ${icon}"></i>`;
|
||||
menuContent += `</a>`;
|
||||
navContent += `<a href='#type-${type}' class="nav-item">`;
|
||||
navContent += `<div class="nav-itemcount">${count}</div>`;
|
||||
navContent += `<i title="${type}" class="nav-itemicon ${icon}"></i>`;
|
||||
navContent += `</a>`;
|
||||
}
|
||||
menuContent += `</div>`;
|
||||
navContent += `</div>`;
|
||||
|
||||
// TERM
|
||||
menuContent += `<div class="menu-itemgroup">`;
|
||||
navContent += `<div class="nav-itemgroup">`;
|
||||
if (value.terms > 0)
|
||||
{
|
||||
// menuContent += `<div class="menu-item-space"></div>`;
|
||||
menuContent += `<a href='#term' class="menu-item">`;
|
||||
menuContent += `<div class="menu-itemcount">${value.terms}</div>`;
|
||||
menuContent += `<i title="terms" class="menu-itemicon fas fa-ribbon"></i>`;
|
||||
menuContent += `</a>`;
|
||||
navContent += `<a href='#term' class="nav-item">`;
|
||||
navContent += `<div class="nav-itemcount">${value.terms}</div>`;
|
||||
navContent += `<i title="terms" class="nav-itemicon fas fa-ribbon"></i>`;
|
||||
navContent += `</a>`;
|
||||
}
|
||||
menuContent += `</div>`;
|
||||
navContent += `</div>`;
|
||||
|
||||
// TAGS
|
||||
menuContent += `<div class="menu-itemgroup">`;
|
||||
navContent += `<div class="nav-itemgroup">`;
|
||||
if (value.tags.length > 0)
|
||||
{
|
||||
menuContent += `<div class="menu-tagcontainer">`;
|
||||
menuContent += `<i title="tags" class="menu-tagicon fas fa-tag"></i>`;
|
||||
navContent += `<div class="nav-tagcontainer">`;
|
||||
navContent += `<i title="tags" class="nav-tagicon fas fa-tag"></i>`;
|
||||
for (var t = 0; t < Math.min(value.tags.length, SETTINGS.STATSNUMTAGS); t++)
|
||||
{
|
||||
menuContent += `<a class="menu-tag" href='#tag-${value.tags[t][0]}'>`;
|
||||
menuContent += `<div class="menu-tagcount">${value.tags[t][1]}</div>`;
|
||||
menuContent += `<div class="menu-taglabel">${value.tags[t][0]}</div>`;
|
||||
menuContent += `</a>`;
|
||||
navContent += `<a class="nav-tag" href='#tag-${value.tags[t][0]}'>`;
|
||||
navContent += `<div class="nav-tagcount">${value.tags[t][1]}</div>`;
|
||||
navContent += `<div class="nav-taglabel">${value.tags[t][0]}</div>`;
|
||||
navContent += `</a>`;
|
||||
}
|
||||
menuContent += `</div>`;
|
||||
navContent += `</div>`;
|
||||
}
|
||||
menuContent += `</div>`;
|
||||
this.nav.innerHTML = menuContent;
|
||||
navContent += `</div>`;
|
||||
this.nav.innerHTML = navContent;
|
||||
}
|
||||
|
||||
this.handleImageClick = function(e, element, file)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user