Type sorting. Terms spacer.

This commit is contained in:
kor 2018-07-18 02:09:23 +12:00
parent 233b4a5252
commit 96d4448015
4 changed files with 129 additions and 108 deletions

View File

@ -17,7 +17,6 @@ Small self contained project for playing with [Indental](https://wiki.xxiivv.com
- Project list - Project list
- Done % - Done %
- Filter done/not done - Filter done/not done
- Limit types to top x
- Full tags page - Full tags page
- Full types page - Full types page
- Settings file (list of type icons etc) - Settings file (list of type icons etc)

View File

@ -43,6 +43,9 @@ body {
.menu:hover a:hover { .menu:hover a:hover {
color: #eee; color: #eee;
} }
.menu-spacer {
height: 30px;
}
.menu-item { .menu-item {
font-size:1.5em; font-size:1.5em;
height: 50px; height: 50px;

View File

@ -4,9 +4,6 @@ function DataWrap()
this.database = null; this.database = null;
this.keys = null; this.keys = null;
// SETTINGS
this.statsNumTags = 10;
this.install = function() this.install = function()
{ {
this.database = new Indental(DATABASE).parse(); this.database = new Indental(DATABASE).parse();
@ -170,21 +167,34 @@ function DataWrap()
{ {
stats.terms += db[dbKeys[i]].TERM.length; stats.terms += db[dbKeys[i]].TERM.length;
} }
} }
// SORT TYPES, TAKE TOP X
// Create items array
var typeItems = Object.keys(stats.types).map(function(key)
{
return [key, stats.types[key]];
});
// Sort the array based on the second element
typeItems.sort(function(first, second)
{
return second[1] - first[1];
});
stats.types = typeItems;
// SORT TAGS, TAKE TOP X // SORT TAGS, TAKE TOP X
// Create items array // Create items array
var items = Object.keys(stats.tags).map(function(key) var tagItems = Object.keys(stats.tags).map(function(key)
{ {
return [key, stats.tags[key]]; return [key, stats.tags[key]];
}); });
// Sort the array based on the second element // Sort the array based on the second element
items.sort(function(first, second) tagItems.sort(function(first, second)
{ {
return second[1] - first[1]; return second[1] - first[1];
}); });
stats.tags = tagItems;
stats.tags = items.slice(0, this.statsNumTags);
return stats; return stats;
} }

View File

@ -5,6 +5,10 @@ function ViewMasonry()
this.grid = null; this.grid = null;
this.menu = null; this.menu = null;
// SETTINGS
this.statsNumTags = 5;
this.statsNumTypes = 10;
// SETTINGS // SETTINGS
this.useMasonry = true; this.useMasonry = true;
this.divNamePre = 'item'; this.divNamePre = 'item';
@ -170,7 +174,6 @@ function ViewMasonry()
this.doStats = function(stats) this.doStats = function(stats)
{ {
// DISPLAY
let menuContent = ``; let menuContent = ``;
// TYPE // TYPE
@ -181,106 +184,112 @@ function ViewMasonry()
menuContent += `</div>`; menuContent += `</div>`;
menuContent += `</a>`; menuContent += `</a>`;
if (typeof stats.types['article'] !== 'undefined') for (var ty = 0; ty < Math.min(stats.types.length, this.statsNumTypes); ty++)
{ {
menuContent += `<a href='#type-article'>`; if (stats.types[ty][0] == 'article')
menuContent += `<div class="menu-item">`; {
menuContent += `<div class="count">${stats.types['article']}</div>`; menuContent += `<a href='#type-article'>`;
menuContent += `<i class="far fa-newspaper"></i>`; menuContent += `<div class="menu-item">`;
menuContent += `</div>`; menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
menuContent += `</a>`; menuContent += `<i class="far fa-newspaper"></i>`;
} menuContent += `</div>`;
if (typeof stats.types['podcast'] !== 'undefined') menuContent += `</a>`;
{ }
menuContent += `<a href='#type-podcast'>`; else if (stats.types[ty][0] == 'podcast')
menuContent += `<div class="menu-item">`; {
menuContent += `<div class="count">${stats.types['podcast']}</div>`; menuContent += `<a href='#type-podcast'>`;
menuContent += `<i class="fas fa-podcast"></i>`; menuContent += `<div class="menu-item">`;
menuContent += `</div>`; menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
menuContent += `</a>`; menuContent += `<i class="fas fa-podcast"></i>`;
} menuContent += `</div>`;
if (typeof stats.types['video'] !== 'undefined') menuContent += `</a>`;
{ }
menuContent += `<a href='#type-video'>`; else if (stats.types[ty][0] == 'video')
menuContent += `<div class="menu-item">`; {
menuContent += `<div class="count">${stats.types['video']}</div>`; menuContent += `<a href='#type-video'>`;
menuContent += `<i class="fas fa-tv"></i>`; menuContent += `<div class="menu-item">`;
menuContent += `</div>`; menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
menuContent += `</a>`; menuContent += `<i class="fas fa-tv"></i>`;
} menuContent += `</div>`;
if (typeof stats.types['list'] !== 'undefined') menuContent += `</a>`;
{ }
menuContent += `<a href='#type-list'>`; else if (stats.types[ty][0] == 'list')
menuContent += `<div class="menu-item">`; {
menuContent += `<div class="count">${stats.types['list']}</div>`; menuContent += `<a href='#type-list'>`;
menuContent += `<i class="fas fa-file-alt"></i>`; menuContent += `<div class="menu-item">`;
menuContent += `</div>`; menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
menuContent += `</a>`; menuContent += `<i class="fas fa-file-alt"></i>`;
} menuContent += `</div>`;
if (typeof stats.types['book'] !== 'undefined') menuContent += `</a>`;
{ }
menuContent += `<a href='#type-book'>`; else if (stats.types[ty][0] == 'book')
menuContent += `<div class="menu-item">`; {
menuContent += `<div class="count">${stats.types['book']}</div>`; menuContent += `<a href='#type-book'>`;
menuContent += `<i class="fas fa-book-open"></i>`; menuContent += `<div class="menu-item">`;
menuContent += `</div>`; menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
menuContent += `</a>`; menuContent += `<i class="fas fa-book-open"></i>`;
} menuContent += `</div>`;
if (typeof stats.types['game'] !== 'undefined') menuContent += `</a>`;
{ }
menuContent += `<a href='#type-game'>`; else if (stats.types[ty][0] == 'game')
menuContent += `<div class="menu-item">`; {
menuContent += `<div class="count">${stats.types['game']}</div>`; menuContent += `<a href='#type-game'>`;
menuContent += `<i class="fas fa-gamepad"></i>`; menuContent += `<div class="menu-item">`;
menuContent += `</div>`; menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
menuContent += `</a>`; menuContent += `<i class="fas fa-gamepad"></i>`;
} menuContent += `</div>`;
if (typeof stats.types['service'] !== 'undefined') menuContent += `</a>`;
{ }
menuContent += `<a href='#type-service'>`; else if (stats.types[ty][0] == 'service')
menuContent += `<div class="menu-item">`; {
menuContent += `<div class="count">${stats.types['service']}</div>`; menuContent += `<a href='#type-service'>`;
menuContent += `<i class="fas fa-server"></i>`; menuContent += `<div class="menu-item">`;
menuContent += `</div>`; menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
menuContent += `</a>`; menuContent += `<i class="fas fa-server"></i>`;
} menuContent += `</div>`;
if (typeof stats.types['lecture'] !== 'undefined') menuContent += `</a>`;
{ }
menuContent += `<a href='#type-lecture'>`; else if (stats.types[ty][0] == 'lecture')
menuContent += `<div class="menu-item">`; {
menuContent += `<div class="count">${stats.types['lecture']}</div>`; menuContent += `<a href='#type-lecture'>`;
menuContent += `<i class="fas fa-chalkboard-teacher"></i>`; menuContent += `<div class="menu-item">`;
menuContent += `</div>`; menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
menuContent += `</a>`; menuContent += `<i class="fas fa-chalkboard-teacher"></i>`;
} menuContent += `</div>`;
if (typeof stats.types['quote'] !== 'undefined') menuContent += `</a>`;
{ }
menuContent += `<a href='#type-quote'>`; else if (stats.types[ty][0] == 'quote')
menuContent += `<div class="menu-item">`; {
menuContent += `<div class="count">${stats.types['quote']}</div>`; menuContent += `<a href='#type-quote'>`;
menuContent += `<i class="fas fa-comment"></i>`; menuContent += `<div class="menu-item">`;
menuContent += `</div>`; menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
menuContent += `</a>`; menuContent += `<i class="fas fa-comment"></i>`;
} menuContent += `</div>`;
if (typeof stats.types['tool'] !== 'undefined') menuContent += `</a>`;
{ }
menuContent += `<a href='#type-tool'>`; else if (stats.types[ty][0] == 'tool')
menuContent += `<div class="menu-item">`; {
menuContent += `<div class="count">${stats.types['tool']}</div>`; menuContent += `<a href='#type-tool'>`;
menuContent += `<i class="fas fa-wrench"></i>`; menuContent += `<div class="menu-item">`;
menuContent += `</div>`; menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
menuContent += `</a>`; menuContent += `<i class="fas fa-wrench"></i>`;
} menuContent += `</div>`;
if (typeof stats.types['music'] !== 'undefined') menuContent += `</a>`;
{ }
menuContent += `<a href='#type-music'>`; else if (stats.types[ty][0] == 'music')
menuContent += `<div class="menu-item">`; {
menuContent += `<div class="count">${stats.types['music']}</div>`; menuContent += `<a href='#type-music'>`;
menuContent += `<i class="fas fa-music"></i>`; menuContent += `<div class="menu-item">`;
menuContent += `</div>`; menuContent += `<div class="count">${stats.types[ty][1]}</div>`;
menuContent += `</a>`; menuContent += `<i class="fas fa-music"></i>`;
menuContent += `</div>`;
menuContent += `</a>`;
}
} }
// SPACER
menuContent += `<div class="menu-spacer"></div>`;
// TERM // TERM
if (stats.terms > 0) if (stats.terms > 0)
{ {
@ -298,7 +307,7 @@ function ViewMasonry()
{ {
menuContent += `<div class="menu-tag-container">`; menuContent += `<div class="menu-tag-container">`;
menuContent += `<i class="fas fa-tag"></i>`; menuContent += `<i class="fas fa-tag"></i>`;
for (var t = 0; t < stats.tags.length; t++) for (var t = 0; t < Math.min(stats.types.length, this.statsNumTags); t++)
{ {
menuContent += `<a href='#tag-${stats.tags[t][0]}'>`; menuContent += `<a href='#tag-${stats.tags[t][0]}'>`;
menuContent += `<div class="menu-tag">`; menuContent += `<div class="menu-tag">`;