From d2ca4abcb338e6b83c516a4c09eac4260b10fc1d Mon Sep 17 00:00:00 2001 From: kor Date: Mon, 23 Jul 2018 05:44:46 +1200 Subject: [PATCH] Fixed masonry layout. --- docs/index.html | 12 +++--- .../lib/{imagesloaded..js => imagesloaded.js} | 0 docs/logic/view.js | 37 +++++++------------ main.js | 2 +- 4 files changed, 20 insertions(+), 31 deletions(-) rename docs/logic/lib/{imagesloaded..js => imagesloaded.js} (100%) diff --git a/docs/index.html b/docs/index.html index 3983090..9e34a8c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -2,26 +2,24 @@ + memex - + - - + + - - - memex -
+
diff --git a/docs/logic/lib/imagesloaded..js b/docs/logic/lib/imagesloaded.js similarity index 100% rename from docs/logic/lib/imagesloaded..js rename to docs/logic/lib/imagesloaded.js diff --git a/docs/logic/view.js b/docs/logic/view.js index 9c61deb..7fb6ea9 100644 --- a/docs/logic/view.js +++ b/docs/logic/view.js @@ -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 += `
`; } - - - - // 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; diff --git a/main.js b/main.js index 5f68be2..93e9c35 100644 --- a/main.js +++ b/main.js @@ -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();