Link hit box expanded. Tinkering with images.

This commit is contained in:
kor 2018-07-18 18:36:36 +12:00
parent 2c80240ae0
commit eb317a18a2
13 changed files with 648 additions and 24 deletions

4
.gitignore vendored
View File

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

View File

@ -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.
- Personal notes system.
- Develop a content tag/type/project filtering/sorting system for re-use in website.
- Personal notes system with simple, portable data storage.
## Data
- [content/Memex.ndtl](content/Memex.ndtl)
## Dependencies

497
asset/imagesloaded.pkgd.js vendored Normal file
View File

@ -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;
});

7
asset/imagesloaded.pkgd.min.js vendored Normal file

File diff suppressed because one or more lines are too long

59
asset/style.css vendored
View File

@ -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 {
color: var(--color-content2);
text-decoration: underline;
.grid-item a {
text-decoration: none;
}
.grid-item:hover a#url, .grid-item:hover a#urlseen {
color: var(--color-content3);
.grid-item a .title {
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 {
background-color: var(--color-content3);
color: var(--color-content1);
.grid-item a .link-line {
color: var(--color-content2);
font-size: var(--size-font-body);
margin-top: var(--size-item-elem-padding);
float: left;
clear: both;
}
/* TITLE */
.title {
margin-right: calc(var(--type-icon-size) * 2);
font-size: var(--size-font-title);
color: var(--color-content3);
.grid-item a i {
color: var(--color-content2);
float: left;
}
.grid-item a .link-title {
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,

View File

@ -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
`

Binary file not shown.

After

Width:  |  Height:  |  Size: 91 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 147 KiB

View File

@ -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>

View File

@ -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}">`;
entry += `<div class="title">${key.to_properCase()}</div>`;
let entry = ``;
// 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;