Fixed masonry layout.

This commit is contained in:
kor 2018-07-23 05:44:46 +12:00
parent cf00b552e8
commit d2ca4abcb3
4 changed files with 20 additions and 31 deletions

View File

@ -2,26 +2,24 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>memex</title>
<link rel="stylesheet" href="asset/style.css">
<link rel="stylesheet" href="asset/fontawesome/css/all.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<!-- <script src="asset/lib/imagesloaded.js"></script> -->
<!-- <script src="logic/lib/masonry.js"></script> -->
<script src="logic/lib/imagesloaded.js"></script>
<script src="logic/lib/masonry.js"></script>
<script src="logic/lib/runic.js"></script>
<script src="logic/lib/indental.js"></script>
<script src="content/data.ndtl"></script>
<script src="logic/wrap.js"></script>
<script src="logic/view.js"></script>
<script src="logic/main.js"></script>
<title>memex</title>
</head>
<body>
<div class="menu" id="menu"></div>
<div class="container">
<div class="container" id="container">
<div class="grid" id="grid"></div>
</div>

View File

@ -11,8 +11,7 @@ function View()
this.statsNumTypes = 10;
this.doDoubleWide = false;
// SETTINGS
this.useMasonry = false;
this.useMasonry = true;
this.divNamePre = 'item';
this.showUpper = true;
@ -36,22 +35,14 @@ function View()
if (this.useMasonry)
{
this.msnry = new Masonry('.grid', {
this.msnry = new Masonry('.grid',
{
itemSelector: '.grid-item',
columnWidth: 350,
gutter: 20,
fitWidth: true,
transitionDuration: 0,
});
///////////////////////////
// Fix squashed image divs
// var imgLoad = imagesLoaded('.grid');
// imgLoad.on( 'always', function (instance) { parent.msnry.layout(); } );
// // Above imgLoad on always msnry.layout() should work but occassionally doesn't in Chrome and NEVER does in Firefox.
// window.onload = function () { parent.msnry.layout(); }
// msnry.layout() called by window onload fixes things but not ideal.
///////////////////////////
}
}
@ -74,6 +65,10 @@ function View()
this.msnry.reloadItems();
this.msnry.layout();
}
var imgLoad = imagesLoaded( container );
// When all images finish: redo mansonry layout
imgLoad.on( 'always', function() { parent.msnry.layout(); } );
}
this.buildEntry = function(db, key)
@ -217,10 +212,6 @@ function View()
entry += `</div>`;
}
// LOWER CONTENT START
if (this.showLower)
{
@ -494,15 +485,15 @@ function View()
splitArr = domain.split('.'),
arrLen = splitArr.length;
//extracting the root domain here
//if there is a subdomain
// extracting the root domain here
// if there is a subdomain
if (arrLen > 2)
{
domain = splitArr[arrLen - 2] + '.' + splitArr[arrLen - 1];
//check to see if it's using a Country Code Top Level Domain (ccTLD) (i.e. ".me.uk")
// check to see if it's using a Country Code Top Level Domain (ccTLD) (i.e. ".me.uk")
if (splitArr[arrLen - 2].length == 2 && splitArr[arrLen - 1].length == 2)
{
//this is using a ccTLD
// this is using a ccTLD
domain = splitArr[arrLen - 3] + '.' + domain;
}
}
@ -513,7 +504,7 @@ function View()
this.extractHostname = function(url)
{
var hostname;
//find & remove protocol (http, ftp, etc.) and get hostname
// find & remove protocol (http, ftp, etc.) and get hostname
if (url.indexOf("://") > -1) {
hostname = url.split('/')[2];
@ -522,9 +513,9 @@ function View()
hostname = url.split('/')[0];
}
//find & remove port number
// find & remove port number
hostname = hostname.split(':')[0];
//find & remove "?"
// find & remove "?"
hostname = hostname.split('?')[0];
return hostname;

View File

@ -50,7 +50,7 @@ app.on('ready', () =>
app.win = new BrowserWindow({
webPreferences: {
nodeIntegration: false
}, width: 950, height: 950, backgroundColor:"#000", minWidth: 587, minHeight: 540, frame:true, autoHideMenuBar: true, icon: __dirname + '/icon.ico'})
}, width: 950, height: 950, backgroundColor:"#ddd", minWidth: 587, minHeight: 540, frame:true, autoHideMenuBar: true, icon: __dirname + '/icon.ico'})
app.win.loadURL(`file://${__dirname}/docs/index.html`)
// app.win.toggleDevTools();