Link hit box expanded. Tinkering with images.

.gitignore

@@ -1 +1,3 @@
-/content/media/*
+/content/media/*.pdf
+/content/media/*.zip
+/content/media/*.html

README.md

@@ -8,11 +8,15 @@ Formatted for long term storage (['Long site'](https://www.gwern.net/About)) and
 
 ## Goals:
 
-- Small self contained project for getting back up to speed with html/css/js.
+- Small project for getting back up to speed with html/css/js.
 - Explore 'serverless' client-side routing.
 - Explore [Indental](https://wiki.xxiivv.com/#indental) (flat-file database) and [Runic](https://wiki.xxiivv.com/#runic) (templating).
-- Develop a tag/type filtering/sorting system for re-use in website.
+- Develop a content tag/type/project filtering/sorting system for re-use in website.
-- Personal notes system.
+- Personal notes system with simple, portable data storage.
+
+## Data
+
+- [content/Memex.ndtl](content/Memex.ndtl)
 
 ## Dependencies
 

asset/imagesloaded.pkgd.js

@@ -0,0 +1,497 @@
+/*!
+ * imagesLoaded PACKAGED v4.1.4
+ * JavaScript is all like "You images are done yet or what?"
+ * MIT License
+ */
+
+/**
+ * EvEmitter v1.1.0
+ * Lil' event emitter
+ * MIT License
+ */
+
+/* jshint unused: true, undef: true, strict: true */
+
+( function( global, factory ) {
+  // universal module definition
+  /* jshint strict: false */ /* globals define, module, window */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD - RequireJS
+    define( 'ev-emitter/ev-emitter',factory );
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS - Browserify, Webpack
+    module.exports = factory();
+  } else {
+    // Browser globals
+    global.EvEmitter = factory();
+  }
+
+}( typeof window != 'undefined' ? window : this, function() {
+
+
+
+function EvEmitter() {}
+
+var proto = EvEmitter.prototype;
+
+proto.on = function( eventName, listener ) {
+  if ( !eventName || !listener ) {
+    return;
+  }
+  // set events hash
+  var events = this._events = this._events || {};
+  // set listeners array
+  var listeners = events[ eventName ] = events[ eventName ] || [];
+  // only add once
+  if ( listeners.indexOf( listener ) == -1 ) {
+    listeners.push( listener );
+  }
+
+  return this;
+};
+
+proto.once = function( eventName, listener ) {
+  if ( !eventName || !listener ) {
+    return;
+  }
+  // add event
+  this.on( eventName, listener );
+  // set once flag
+  // set onceEvents hash
+  var onceEvents = this._onceEvents = this._onceEvents || {};
+  // set onceListeners object
+  var onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || {};
+  // set flag
+  onceListeners[ listener ] = true;
+
+  return this;
+};
+
+proto.off = function( eventName, listener ) {
+  var listeners = this._events && this._events[ eventName ];
+  if ( !listeners || !listeners.length ) {
+    return;
+  }
+  var index = listeners.indexOf( listener );
+  if ( index != -1 ) {
+    listeners.splice( index, 1 );
+  }
+
+  return this;
+};
+
+proto.emitEvent = function( eventName, args ) {
+  var listeners = this._events && this._events[ eventName ];
+  if ( !listeners || !listeners.length ) {
+    return;
+  }
+  // copy over to avoid interference if .off() in listener
+  listeners = listeners.slice(0);
+  args = args || [];
+  // once stuff
+  var onceListeners = this._onceEvents && this._onceEvents[ eventName ];
+
+  for ( var i=0; i < listeners.length; i++ ) {
+    var listener = listeners[i]
+    var isOnce = onceListeners && onceListeners[ listener ];
+    if ( isOnce ) {
+      // remove listener
+      // remove before trigger to prevent recursion
+      this.off( eventName, listener );
+      // unset once flag
+      delete onceListeners[ listener ];
+    }
+    // trigger listener
+    listener.apply( this, args );
+  }
+
+  return this;
+};
+
+proto.allOff = function() {
+  delete this._events;
+  delete this._onceEvents;
+};
+
+return EvEmitter;
+
+}));
+
+/*!
+ * imagesLoaded v4.1.4
+ * JavaScript is all like "You images are done yet or what?"
+ * MIT License
+ */
+
+( function( window, factory ) { 'use strict';
+  // universal module definition
+
+  /*global define: false, module: false, require: false */
+
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( [
+      'ev-emitter/ev-emitter'
+    ], function( EvEmitter ) {
+      return factory( window, EvEmitter );
+    });
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory(
+      window,
+      require('ev-emitter')
+    );
+  } else {
+    // browser global
+    window.imagesLoaded = factory(
+      window,
+      window.EvEmitter
+    );
+  }
+
+})( typeof window !== 'undefined' ? window : this,
+
+// --------------------------  factory -------------------------- //
+
+function factory( window, EvEmitter ) {
+
+
+
+var $ = window.jQuery;
+var console = window.console;
+
+// -------------------------- helpers -------------------------- //
+
+// extend objects
+function extend( a, b ) {
+  for ( var prop in b ) {
+    a[ prop ] = b[ prop ];
+  }
+  return a;
+}
+
+var arraySlice = Array.prototype.slice;
+
+// turn element or nodeList into an array
+function makeArray( obj ) {
+  if ( Array.isArray( obj ) ) {
+    // use object if already an array
+    return obj;
+  }
+
+  var isArrayLike = typeof obj == 'object' && typeof obj.length == 'number';
+  if ( isArrayLike ) {
+    // convert nodeList to array
+    return arraySlice.call( obj );
+  }
+
+  // array of single index
+  return [ obj ];
+}
+
+// -------------------------- imagesLoaded -------------------------- //
+
+/**
+ * @param {Array, Element, NodeList, String} elem
+ * @param {Object or Function} options - if function, use as callback
+ * @param {Function} onAlways - callback function
+ */
+function ImagesLoaded( elem, options, onAlways ) {
+  // coerce ImagesLoaded() without new, to be new ImagesLoaded()
+  if ( !( this instanceof ImagesLoaded ) ) {
+    return new ImagesLoaded( elem, options, onAlways );
+  }
+  // use elem as selector string
+  var queryElem = elem;
+  if ( typeof elem == 'string' ) {
+    queryElem = document.querySelectorAll( elem );
+  }
+  // bail if bad element
+  if ( !queryElem ) {
+    console.error( 'Bad element for imagesLoaded ' + ( queryElem || elem ) );
+    return;
+  }
+
+  this.elements = makeArray( queryElem );
+  this.options = extend( {}, this.options );
+  // shift arguments if no options set
+  if ( typeof options == 'function' ) {
+    onAlways = options;
+  } else {
+    extend( this.options, options );
+  }
+
+  if ( onAlways ) {
+    this.on( 'always', onAlways );
+  }
+
+  this.getImages();
+
+  if ( $ ) {
+    // add jQuery Deferred object
+    this.jqDeferred = new $.Deferred();
+  }
+
+  // HACK check async to allow time to bind listeners
+  setTimeout( this.check.bind( this ) );
+}
+
+ImagesLoaded.prototype = Object.create( EvEmitter.prototype );
+
+ImagesLoaded.prototype.options = {};
+
+ImagesLoaded.prototype.getImages = function() {
+  this.images = [];
+
+  // filter & find items if we have an item selector
+  this.elements.forEach( this.addElementImages, this );
+};
+
+/**
+ * @param {Node} element
+ */
+ImagesLoaded.prototype.addElementImages = function( elem ) {
+  // filter siblings
+  if ( elem.nodeName == 'IMG' ) {
+    this.addImage( elem );
+  }
+  // get background image on element
+  if ( this.options.background === true ) {
+    this.addElementBackgroundImages( elem );
+  }
+
+  // find children
+  // no non-element nodes, #143
+  var nodeType = elem.nodeType;
+  if ( !nodeType || !elementNodeTypes[ nodeType ] ) {
+    return;
+  }
+  var childImgs = elem.querySelectorAll('img');
+  // concat childElems to filterFound array
+  for ( var i=0; i < childImgs.length; i++ ) {
+    var img = childImgs[i];
+    this.addImage( img );
+  }
+
+  // get child background images
+  if ( typeof this.options.background == 'string' ) {
+    var children = elem.querySelectorAll( this.options.background );
+    for ( i=0; i < children.length; i++ ) {
+      var child = children[i];
+      this.addElementBackgroundImages( child );
+    }
+  }
+};
+
+var elementNodeTypes = {
+  1: true,
+  9: true,
+  11: true
+};
+
+ImagesLoaded.prototype.addElementBackgroundImages = function( elem ) {
+  var style = getComputedStyle( elem );
+  if ( !style ) {
+    // Firefox returns null if in a hidden iframe https://bugzil.la/548397
+    return;
+  }
+  // get url inside url("...")
+  var reURL = /url\((['"])?(.*?)\1\)/gi;
+  var matches = reURL.exec( style.backgroundImage );
+  while ( matches !== null ) {
+    var url = matches && matches[2];
+    if ( url ) {
+      this.addBackground( url, elem );
+    }
+    matches = reURL.exec( style.backgroundImage );
+  }
+};
+
+/**
+ * @param {Image} img
+ */
+ImagesLoaded.prototype.addImage = function( img ) {
+  var loadingImage = new LoadingImage( img );
+  this.images.push( loadingImage );
+};
+
+ImagesLoaded.prototype.addBackground = function( url, elem ) {
+  var background = new Background( url, elem );
+  this.images.push( background );
+};
+
+ImagesLoaded.prototype.check = function() {
+  var _this = this;
+  this.progressedCount = 0;
+  this.hasAnyBroken = false;
+  // complete if no images
+  if ( !this.images.length ) {
+    this.complete();
+    return;
+  }
+
+  function onProgress( image, elem, message ) {
+    // HACK - Chrome triggers event before object properties have changed. #83
+    setTimeout( function() {
+      _this.progress( image, elem, message );
+    });
+  }
+
+  this.images.forEach( function( loadingImage ) {
+    loadingImage.once( 'progress', onProgress );
+    loadingImage.check();
+  });
+};
+
+ImagesLoaded.prototype.progress = function( image, elem, message ) {
+  this.progressedCount++;
+  this.hasAnyBroken = this.hasAnyBroken || !image.isLoaded;
+  // progress event
+  this.emitEvent( 'progress', [ this, image, elem ] );
+  if ( this.jqDeferred && this.jqDeferred.notify ) {
+    this.jqDeferred.notify( this, image );
+  }
+  // check if completed
+  if ( this.progressedCount == this.images.length ) {
+    this.complete();
+  }
+
+  if ( this.options.debug && console ) {
+    console.log( 'progress: ' + message, image, elem );
+  }
+};
+
+ImagesLoaded.prototype.complete = function() {
+  var eventName = this.hasAnyBroken ? 'fail' : 'done';
+  this.isComplete = true;
+  this.emitEvent( eventName, [ this ] );
+  this.emitEvent( 'always', [ this ] );
+  if ( this.jqDeferred ) {
+    var jqMethod = this.hasAnyBroken ? 'reject' : 'resolve';
+    this.jqDeferred[ jqMethod ]( this );
+  }
+};
+
+// --------------------------  -------------------------- //
+
+function LoadingImage( img ) {
+  this.img = img;
+}
+
+LoadingImage.prototype = Object.create( EvEmitter.prototype );
+
+LoadingImage.prototype.check = function() {
+  // If complete is true and browser supports natural sizes,
+  // try to check for image status manually.
+  var isComplete = this.getIsImageComplete();
+  if ( isComplete ) {
+    // report based on naturalWidth
+    this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );
+    return;
+  }
+
+  // If none of the checks above matched, simulate loading on detached element.
+  this.proxyImage = new Image();
+  this.proxyImage.addEventListener( 'load', this );
+  this.proxyImage.addEventListener( 'error', this );
+  // bind to image as well for Firefox. #191
+  this.img.addEventListener( 'load', this );
+  this.img.addEventListener( 'error', this );
+  this.proxyImage.src = this.img.src;
+};
+
+LoadingImage.prototype.getIsImageComplete = function() {
+  // check for non-zero, non-undefined naturalWidth
+  // fixes Safari+InfiniteScroll+Masonry bug infinite-scroll#671
+  return this.img.complete && this.img.naturalWidth;
+};
+
+LoadingImage.prototype.confirm = function( isLoaded, message ) {
+  this.isLoaded = isLoaded;
+  this.emitEvent( 'progress', [ this, this.img, message ] );
+};
+
+// ----- events ----- //
+
+// trigger specified handler for event type
+LoadingImage.prototype.handleEvent = function( event ) {
+  var method = 'on' + event.type;
+  if ( this[ method ] ) {
+    this[ method ]( event );
+  }
+};
+
+LoadingImage.prototype.onload = function() {
+  this.confirm( true, 'onload' );
+  this.unbindEvents();
+};
+
+LoadingImage.prototype.onerror = function() {
+  this.confirm( false, 'onerror' );
+  this.unbindEvents();
+};
+
+LoadingImage.prototype.unbindEvents = function() {
+  this.proxyImage.removeEventListener( 'load', this );
+  this.proxyImage.removeEventListener( 'error', this );
+  this.img.removeEventListener( 'load', this );
+  this.img.removeEventListener( 'error', this );
+};
+
+// -------------------------- Background -------------------------- //
+
+function Background( url, element ) {
+  this.url = url;
+  this.element = element;
+  this.img = new Image();
+}
+
+// inherit LoadingImage prototype
+Background.prototype = Object.create( LoadingImage.prototype );
+
+Background.prototype.check = function() {
+  this.img.addEventListener( 'load', this );
+  this.img.addEventListener( 'error', this );
+  this.img.src = this.url;
+  // check if image is already complete
+  var isComplete = this.getIsImageComplete();
+  if ( isComplete ) {
+    this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );
+    this.unbindEvents();
+  }
+};
+
+Background.prototype.unbindEvents = function() {
+  this.img.removeEventListener( 'load', this );
+  this.img.removeEventListener( 'error', this );
+};
+
+Background.prototype.confirm = function( isLoaded, message ) {
+  this.isLoaded = isLoaded;
+  this.emitEvent( 'progress', [ this, this.element, message ] );
+};
+
+// -------------------------- jQuery -------------------------- //
+
+ImagesLoaded.makeJQueryPlugin = function( jQuery ) {
+  jQuery = jQuery || window.jQuery;
+  if ( !jQuery ) {
+    return;
+  }
+  // set local variable
+  $ = jQuery;
+  // $().imagesLoaded()
+  $.fn.imagesLoaded = function( options, callback ) {
+    var instance = new ImagesLoaded( this, options, callback );
+    return instance.jqDeferred.promise( $(this) );
+  };
+};
+// try making plugin
+ImagesLoaded.makeJQueryPlugin();
+
+// --------------------------  -------------------------- //
+
+return ImagesLoaded;
+
+});
+

asset/style.css

@@ -152,6 +152,7 @@ body {
   clear: both;
 }
 .grid-item, .grid-item--width2 { 
+  text-decoration: none; 
 	border-radius: var(--size-item-corner);
 	margin-bottom: var(--size-gutter);
 	background: var(--color-content0);
@@ -159,35 +160,63 @@ body {
 	padding: var(--size-gutter); 
 	box-sizing: border-box;
 	float: left;
+  color: #000;
 }
 @media screen and (min-width: 886px) {
 	.grid-item--width2 { 
 		width: calc(var(--size-grid-column) * 2 + var(--size-gutter));
 	}
 }
+.grid-item img {
+  /*margin: calc(var(--size-gutter) * -1);
+  width: calc(100% + var(--size-gutter)*2);*/
+  max-width: 100%; 
+  height: auto;
+  clear: both;
+}
 .grid-item:hover { 
 	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .1);
 	background: var(--color-content1);
 }
 
 /* LINK */
-a#url, a#urlseen { 
+.grid-item a { 
-	color: var(--color-content2);
+  text-decoration: none;
-	text-decoration: underline; 
 }
-.grid-item:hover a#url, .grid-item:hover a#urlseen {
+.grid-item a .title { 
-	color: var(--color-content3);
+  color: var(--color-content2);
+  margin-right: calc(var(--type-icon-size) * 2);
+  font-size: var(--size-font-title);
+  color: var(--color-content3); 
+  text-decoration: none;
+  float: left;
+  clear: both;
 }
-.grid-item:hover a#url:hover, .grid-item:hover a#urlseen:hover {
+.grid-item a .link-line { 
-	background-color: var(--color-content3);
+  color: var(--color-content2);
-	color: var(--color-content1);
+  font-size: var(--size-font-body);
+  margin-top: var(--size-item-elem-padding);
+  float: left;
+  clear: both;
 }
-
+.grid-item a i { 
-/* TITLE */
+  color: var(--color-content2);
-.title {
+  float: left;
-	margin-right: calc(var(--type-icon-size) * 2);
+}
-	font-size: var(--size-font-title);
+.grid-item a .link-title { 
-	color: var(--color-content3); 
+  color: var(--color-content2);
+  float: left;
+}
+.grid-item:hover a .link-title { 
+  color: var(--color-content3);
+}
+.grid-item a:hover .title { 
+  /*background-color: var(--color-content3);
+  color: var(--color-content1);*/ 
+}
+.grid-item a:hover .link-title { 
+  background-color: var(--color-content3);
+  color: var(--color-content1);
 }
 
 /* LINK, NOTE, QUOTE, TERM, TAGS */
@@ -195,6 +224,8 @@ a#url, a#urlseen {
 	padding-top: var(--size-item-elem-padding);
 	font-size: var(--size-font-body);
 	color: var(--color-content2); 
+  float: left;
+  clear: both;
 }
 .grid-item:hover .link, 
 .grid-item:hover .note, 

content/Memex.ndtl

@@ -1616,4 +1616,50 @@ EDWARDIAN FARM
   DATE : 12018-07-18
   DONE : false
   TAGS : history
+
+CSS VARIABLES
+  LINK : https://css-tricks.com/difference-between-types-of-css-variables/
+  TYPE : article
+  DATE : 12018-07-18
+  DONE : true
+  TAGS : web, code
+  PROJ : Memex
+
+SLIDE
+  DATE : 12018-05-03
+  FILE : 12018-05-03_slide.jpg
+  TYPE : image
+  DONE : true
+
+VAN
+  DATE : 12017-01-20
+  FILE : 12017-01-20_van.jpg
+  TYPE : image
+  PROJ : Van
+  TAGS : diy
+  DONE : true
+
+FPV MOD
+  DATE : 12018-03-20
+  FILE : 12018-03-20_fpvMod.jpg
+  TYPE : image
+  PROJ : Drone
+  TAGS : diy
+  DONE : true
+
+SWITCH PANEL
+  DATE : 12018-03-20
+  FILE : 12018-07-10_switchPanel.jpg
+  TYPE : image
+  PROJ : Van
+  TAGS : diy
+  DONE : true
+
+APPLIED MINIMALISM
+  PERS : Symbol
+  SRCE : Merveilles
+  LINK : https://vimeo.com/13617755
+  DATE : 12018-07-18
+  TYPE : music
+  DONE : true
 `

index.html

@@ -6,6 +6,7 @@
   <link rel="stylesheet" href="asset/fontawesome/css/all.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <script src="asset/imagesloaded.pkgd.min.js"></script>
   <script src="asset/masonry.pkgd.min.js"></script>
   <script src="logic/runic.js"></script>
   <script src="logic/indental.js"></script>

logic/viewmasonry.js

@@ -19,15 +19,32 @@ function ViewMasonry()
     this.grid = document.getElementById("grid");
     this.menu = document.getElementById("menu");
 
+    console.log(1);
     if (this.useMasonry)
     {
-      this.msnry = new Masonry( '.grid', {
+    console.log(2);
+      this.msnry = new Masonry('.grid', {
         itemSelector: '.grid-item',
         columnWidth: 350,
         gutter: 20,
         fitWidth: true,
         transitionDuration: 0,
       });
+    console.log(3);
+
+      var imgLoad = imagesLoaded('.grid');
+      function onAlways( instance ) {
+        console.log('all images are loaded');
+        //this.msnry.layout();
+        console.log(this.msnry);
+      }
+      imgLoad.on( 'always', onAlways );
+      // imgLoad.off( 'always', onAlways );
+      imgLoad.on( 'progress', function(instance, image)
+      {
+        var result = image.isLoaded ? 'loaded' : 'broken';
+        console.log( 'image is ' + result + ' for ' + image.img.src );
+      });
     }
   }
 
@@ -62,15 +79,15 @@ function ViewMasonry()
       {
         if (Array.isArray(value.QOTE) && value.QOTE.length > 4)
         {
-          itemClass = "grid-item grid-item--width2";
+          itemClass += " grid-item--width2";
         } 
       }
     }
 
-    let entry = `<div class="${itemClass}" id="${this.divNamePre + db[key].DIID}">`;
+    let entry = ``;
-    entry += `<div class="title">${key.to_properCase()}</div>`;
+    // DIV
+    entry += `<div class="${itemClass}" id="${this.divNamePre + value.DIID}">`;
 
-    // LINK
     if (typeof value.LINK !== 'undefined')
     {
       var idUrl = "url";
@@ -81,7 +98,18 @@ function ViewMasonry()
           idUrl = "urlseen";
         }
       }
-      entry += `<div class="link"><i class="fas fa-link textIcon"></i><a href="${String(value.LINK)}" id="${idUrl}">${this.extractRootDomain(value.LINK)}</a></div>`;
+
+      // LINK START
+      entry += `<a href="${String(value.LINK)}" id="${idUrl} class="link">`;
+    }
+
+    // TITLE
+    entry += `<div class="title">${key.to_properCase()}</div>`;
+
+    // LINK END
+    if (typeof value.LINK !== 'undefined')
+    {
+      entry += `<div class="link-line"><i class="fas fa-link textIcon"></i><div class="link-title">${this.extractRootDomain(value.LINK)}</div></div></a>`;
     }
 
     // TYPE
@@ -180,6 +208,14 @@ function ViewMasonry()
       entry += `<div class="prog"><i class="fas fa-clock textIcon"></i>${value.PROG}</div>`;
     }
 
+    if (typeof value.TYPE !== 'undefined' && value.TYPE == 'image')
+    {
+      if (typeof value.FILE !== 'undefined')
+      {
+        entry += `<img src="content/media/${value.FILE}">`;
+      }
+    }
+
     entry += `</div>`;
 
     this.grid.innerHTML += entry;