Start v6
Glen Cheney
2 years ago
parent
34b086274b
commit
8a4911e100
@ -1,13 +1,3 @@
|
||||
{
|
||||
"presets": [
|
||||
[
|
||||
"@babel/preset-env",
|
||||
{
|
||||
"targets": {
|
||||
"browsers": "> 1%, not dead, not IE < 11, IE 11, not OperaMini all",
|
||||
"node": "current"
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
"presets": [["@babel/preset-env"]]
|
||||
}
|
||||
|
||||
@ -0,0 +1,4 @@
|
||||
> 1%
|
||||
not dead
|
||||
not ie <= 11
|
||||
not OperaMini all
|
||||
@ -1,12 +1,12 @@
|
||||
version: 2
|
||||
updates:
|
||||
- package-ecosystem: npm
|
||||
directory: "/"
|
||||
schedule:
|
||||
interval: weekly
|
||||
time: "13:00"
|
||||
open-pull-requests-limit: 10
|
||||
ignore:
|
||||
- dependency-name: cssnano
|
||||
versions:
|
||||
- 5.0.0
|
||||
- package-ecosystem: npm
|
||||
directory: '/'
|
||||
schedule:
|
||||
interval: weekly
|
||||
time: '13:00'
|
||||
open-pull-requests-limit: 10
|
||||
ignore:
|
||||
- dependency-name: cssnano
|
||||
versions:
|
||||
- 5.0.0
|
||||
|
||||
@ -0,0 +1,14 @@
|
||||
node_modules
|
||||
dist
|
||||
coverage
|
||||
docs/dist
|
||||
docs/css
|
||||
docs/_site
|
||||
prism.js
|
||||
prism.css
|
||||
|
||||
.jekyll-cache
|
||||
|
||||
# Prettier can't handle liquid templates AND changes the JSON attributes to use
|
||||
# double quotes, breaking the parser.
|
||||
*.html
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,7 +1,6 @@
|
||||
|
||||
# Options in this file override ones set in _config.yml
|
||||
|
||||
host: 0.0.0.0
|
||||
environment: "development"
|
||||
environment: 'development'
|
||||
url: http://localhost:4000
|
||||
baseurl: ""
|
||||
baseurl: ''
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
@import "./extensions/variables";
|
||||
@import "./extensions/mixins";
|
||||
@import './extensions/variables';
|
||||
@import './extensions/mixins';
|
||||
|
||||
@import "./global-rules/global";
|
||||
@import "./global-rules/type";
|
||||
@import "./global-rules/grid";
|
||||
@import "./global-rules/forms";
|
||||
@import "./global-rules/helpers";
|
||||
@import './global-rules/global';
|
||||
@import './global-rules/type';
|
||||
@import './global-rules/grid';
|
||||
@import './global-rules/forms';
|
||||
@import './global-rules/helpers';
|
||||
|
||||
@import "./components/buttons";
|
||||
@import "./components/demo-list";
|
||||
@import "./components/site-nav";
|
||||
@import './components/buttons';
|
||||
@import './components/demo-list';
|
||||
@import './components/site-nav';
|
||||
|
||||
@import "./pages/homepage-filters";
|
||||
@import "./pages/compound-filters";
|
||||
@import "./pages/faq";
|
||||
@import './pages/homepage-filters';
|
||||
@import './pages/compound-filters';
|
||||
@import './pages/faq';
|
||||
|
||||
@ -1 +1 @@
|
||||
.picture-item{height:220px;margin-left:0;margin-top:24px}.picture-item img{display:block;width:100%}@supports ((-o-object-fit:cover) or (object-fit:cover)){.picture-item img{height:100%;max-width:none;-o-object-fit:cover;object-fit:cover}}.picture-item--h2{height:464px}.picture-item__inner{background:#ecf0f1;height:100%;overflow:hidden;position:relative}img.picture-item__blur{display:none}.picture-item__details{align-items:baseline;display:flex;justify-content:space-between;padding:1em;width:100%}.picture-item__description{margin:0;padding:0 2em 1em 1em;width:100%}.picture-item__title{flex-shrink:0;margin-right:4px}.picture-item__tags{flex-shrink:1;margin:0;text-align:right}@media screen and (min-width:768px){.picture-item--overlay .picture-item__details{background-color:rgba(0,0,0,.6);bottom:0;color:#fff;left:0;overflow:hidden;position:absolute;width:100%}.picture-item--overlay .picture-item__description{display:none}@supports (filter:blur(1px)) and ((-webkit-clip-path:inset(0 0 0 0)) or (clip-path:inset(0 0 0 0))){.picture-item--overlay .picture-item__blur{-webkit-clip-path:inset(170px 0 0 0);clip-path:inset(170px 0 0 0);display:block;filter:blur(7px);left:0;position:absolute;top:0;z-index:1}.picture-item--overlay .picture-item__details{background:none}.picture-item--overlay .picture-item__tags,.picture-item--overlay .picture-item__title{position:relative;z-index:2}}}.my-shuffle-container{overflow:hidden;position:relative}.my-sizer-element{opacity:0;position:absolute;visibility:hidden}.shuffle--animatein{overflow:visible}.shuffle--animatein .picture-item__inner{opacity:0;transform:translateY(220px)}.shuffle--animatein .picture-item__inner--transition{transition:all .6s ease}.shuffle--animatein .picture-item.in .picture-item__inner{opacity:1;transform:translate(0)}@media screen and (max-width:767px){.picture-item{height:auto;margin-top:20px}.picture-item__description,.picture-item__details{font-size:.875em;padding:.625em}.picture-item__description{padding-bottom:1.25em;padding-right:.875em}.picture-item--h2{height:auto}}
|
||||
.picture-item{height:220px;margin-left:0;margin-top:24px}.picture-item img{display:block;width:100%}@supports (object-fit:cover){.picture-item img{height:100%;max-width:none;object-fit:cover}}.picture-item--h2{height:464px}.picture-item__inner{background:#ecf0f1;height:100%;overflow:hidden;position:relative}img.picture-item__blur{display:none}.picture-item__details{align-items:baseline;display:flex;justify-content:space-between;padding:1em;width:100%}.picture-item__description{margin:0;padding:0 2em 1em 1em;width:100%}.picture-item__title{flex-shrink:0;margin-right:4px}.picture-item__tags{flex-shrink:1;margin:0;text-align:right}@media screen and (min-width:768px){.picture-item--overlay .picture-item__details{background-color:#0009;bottom:0;color:#fff;left:0;overflow:hidden;position:absolute;width:100%}.picture-item--overlay .picture-item__description{display:none}@supports (filter:blur(1px)) and ((-webkit-clip-path:inset(0 0 0 0)) or (clip-path:inset(0 0 0 0))){.picture-item--overlay .picture-item__blur{-webkit-clip-path:inset(170px 0 0 0);clip-path:inset(170px 0 0 0);display:block;filter:blur(7px);left:0;position:absolute;top:0;z-index:1}.picture-item--overlay .picture-item__details{background:none}.picture-item--overlay .picture-item__tags,.picture-item--overlay .picture-item__title{position:relative;z-index:2}}}.my-shuffle-container{overflow:hidden;position:relative}.my-sizer-element{opacity:0;position:absolute;visibility:hidden}.shuffle--animatein{overflow:visible}.shuffle--animatein .picture-item__inner{opacity:0;transform:translateY(220px)}.shuffle--animatein .picture-item__inner--transition{transition:all .6s ease}.shuffle--animatein .picture-item.in .picture-item__inner{opacity:1;transform:translate(0)}@media screen and (max-width:767px){.picture-item{height:auto;margin-top:20px}.picture-item__description,.picture-item__details{font-size:.875em;padding:.625em}.picture-item__description{padding-bottom:1.25em;padding-right:.875em}.picture-item--h2{height:auto}}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,151 +1,140 @@
|
||||
'use strict';
|
||||
|
||||
var Sprite = function (context, img, size) {
|
||||
this.ctx = context;
|
||||
this.img = img;
|
||||
this.width = size;
|
||||
this.height = size;
|
||||
this.frameWidth = size;
|
||||
this.frameHeight = size;
|
||||
};
|
||||
|
||||
// Assuming horizontal sprite
|
||||
Sprite.prototype.getFrame = function (frame) {
|
||||
return {
|
||||
x: frame * this.frameWidth,
|
||||
y: 0,
|
||||
};
|
||||
};
|
||||
|
||||
Sprite.prototype.clearCanvas = function () {
|
||||
this.ctx.clearRect(0, 0, this.width, this.height);
|
||||
};
|
||||
|
||||
Sprite.prototype.drawFrame = function (frameNumber) {
|
||||
var frame = this.getFrame(frameNumber);
|
||||
|
||||
// Clear out the last frame
|
||||
this.clearCanvas();
|
||||
|
||||
// Draw to the context. This method is really confusing...
|
||||
this.ctx.drawImage(
|
||||
this.img,
|
||||
frame.x,
|
||||
frame.y,
|
||||
this.width,
|
||||
this.height,
|
||||
0,
|
||||
0,
|
||||
this.width,
|
||||
this.height
|
||||
);
|
||||
};
|
||||
|
||||
var Favicon = function (src, numFrames, framesPerAnimation, animationDelay) {
|
||||
|
||||
// Variables based on params
|
||||
this.src = src;
|
||||
this.numFrames = numFrames;
|
||||
this.framesPerAnimation = framesPerAnimation;
|
||||
this.animationDelay = animationDelay;
|
||||
|
||||
// Elements
|
||||
this.canvas = document.createElement('canvas');
|
||||
this.img = document.createElement('img');
|
||||
this.html = document.documentElement;
|
||||
|
||||
// Calculations
|
||||
this.size = window.devicePixelRatio > 1 ? 32 : 16;
|
||||
|
||||
// If it's not a data url, pick apart the filename and add @2x for retina
|
||||
if (!this.src.match(/data:/) && window.devicePixelRatio > 1) {
|
||||
var dot = this.src.lastIndexOf('.');
|
||||
this.src = this.src.substring(0, dot) + '@2x' + this.src.substring(dot);
|
||||
class Sprite {
|
||||
constructor(context, img, size) {
|
||||
this.ctx = context;
|
||||
this.img = img;
|
||||
this.width = size;
|
||||
this.height = size;
|
||||
this.frameWidth = size;
|
||||
this.frameHeight = size;
|
||||
}
|
||||
|
||||
this.currentFrame = 0;
|
||||
// Assuming horizontal sprite
|
||||
getFrame(frame) {
|
||||
return {
|
||||
x: frame * this.frameWidth,
|
||||
y: 0,
|
||||
};
|
||||
}
|
||||
|
||||
clearCanvas() {
|
||||
this.ctx.clearRect(0, 0, this.width, this.height);
|
||||
}
|
||||
|
||||
drawFrame(frameNumber) {
|
||||
var frame = this.getFrame(frameNumber);
|
||||
|
||||
// Chrome chokes on this. It looks like it can handle 4 frames per second
|
||||
this.fps = 24;
|
||||
// Clear out the last frame
|
||||
this.clearCanvas();
|
||||
|
||||
// No #favicon element, stop
|
||||
if (!document.getElementById('favicon')) {
|
||||
return;
|
||||
// Draw to the context. This method is really confusing...
|
||||
this.ctx.drawImage(this.img, frame.x, frame.y, this.width, this.height, 0, 0, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
class Favicon {
|
||||
constructor(src, numFrames, framesPerAnimation, animationDelay) {
|
||||
// Variables based on params
|
||||
this.src = src;
|
||||
this.numFrames = numFrames;
|
||||
this.framesPerAnimation = framesPerAnimation;
|
||||
this.animationDelay = animationDelay;
|
||||
|
||||
// Elements
|
||||
this.canvas = document.createElement('canvas');
|
||||
this.img = document.createElement('img');
|
||||
this.html = document.documentElement;
|
||||
|
||||
// Calculations
|
||||
this.size = window.devicePixelRatio > 1 ? 32 : 16;
|
||||
|
||||
// If it's not a data url, pick apart the filename and add @2x for retina
|
||||
if (!this.src.match(/data:/) && window.devicePixelRatio > 1) {
|
||||
var dot = this.src.lastIndexOf('.');
|
||||
this.src = this.src.substring(0, dot) + '@2x' + this.src.substring(dot);
|
||||
}
|
||||
|
||||
// Save context
|
||||
this.ctx = this.canvas.getContext('2d');
|
||||
this.currentFrame = 0;
|
||||
|
||||
// Set canvas dimensions based on device DPI
|
||||
this.canvas.height = this.canvas.width = this.size;
|
||||
// Chrome chokes on this. It looks like it can handle 4 frames per second
|
||||
this.fps = 24;
|
||||
|
||||
// Create a new sprite 32x32 size with 32x32 sprites
|
||||
this.sprite = new Sprite(this.ctx, this.img, this.size);
|
||||
// No #favicon element, stop
|
||||
if (!document.getElementById('favicon')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Bind the image load handler
|
||||
this.img.onload = this.onSpriteLoaded.bind(this);
|
||||
// Save context
|
||||
this.ctx = this.canvas.getContext('2d');
|
||||
|
||||
// Trigger image to load
|
||||
this.img.src = this.src;
|
||||
};
|
||||
// Set canvas dimensions based on device DPI
|
||||
this.canvas.height = this.canvas.width = this.size;
|
||||
|
||||
Favicon.prototype.getData = function () {
|
||||
return this.canvas.toDataURL('image/png');
|
||||
};
|
||||
// Create a new sprite 32x32 size with 32x32 sprites
|
||||
this.sprite = new Sprite(this.ctx, this.img, this.size);
|
||||
|
||||
// Clone the current #favicon and replace it with a new element
|
||||
// which has the updated data URI href
|
||||
Favicon.prototype.setFavicon = function () {
|
||||
var data = this.getData();
|
||||
var originalFavicon = document.getElementById('favicon');
|
||||
var clone = originalFavicon.cloneNode(true);
|
||||
// Bind the image load handler
|
||||
this.img.onload = this.onSpriteLoaded.bind(this);
|
||||
|
||||
clone.setAttribute('href', data);
|
||||
originalFavicon.parentNode.replaceChild(clone, originalFavicon);
|
||||
};
|
||||
// Trigger image to load
|
||||
this.img.src = this.src;
|
||||
}
|
||||
|
||||
// Request Animation Frame Loop
|
||||
Favicon.prototype.loop = function (timestamp) {
|
||||
// If not enough time has elapse since the last call
|
||||
// immediately call the next rAF
|
||||
if (timestamp - this.lastExecuted < this.timeToElapse) {
|
||||
return requestAnimationFrame(this.loop.bind(this));
|
||||
getData() {
|
||||
return this.canvas.toDataURL('image/png');
|
||||
}
|
||||
|
||||
// Increment current frame
|
||||
this.currentFrame += 1;
|
||||
if (this.currentFrame === this.numFrames) {
|
||||
this.currentFrame = 0;
|
||||
// Clone the current #favicon and replace it with a new element
|
||||
// which has the updated data URI href
|
||||
setFavicon() {
|
||||
var data = this.getData();
|
||||
var originalFavicon = document.getElementById('favicon');
|
||||
var clone = originalFavicon.cloneNode(true);
|
||||
|
||||
clone.setAttribute('href', data);
|
||||
originalFavicon.parentNode.replaceChild(clone, originalFavicon);
|
||||
}
|
||||
|
||||
// Completed an animation state
|
||||
this.timeToElapse = this.currentFrame % this.framesPerAnimation === 0 ?
|
||||
this.animationDelay :
|
||||
1000 / this.fps;
|
||||
// Request Animation Frame Loop
|
||||
loop(timestamp) {
|
||||
// If not enough time has elapse since the last call
|
||||
// immediately call the next rAF
|
||||
if (timestamp - this.lastExecuted < this.timeToElapse) {
|
||||
return requestAnimationFrame(this.loop.bind(this));
|
||||
}
|
||||
|
||||
// Draw current frame from sprite
|
||||
this.sprite.drawFrame(this.currentFrame);
|
||||
// Increment current frame
|
||||
this.currentFrame += 1;
|
||||
if (this.currentFrame === this.numFrames) {
|
||||
this.currentFrame = 0;
|
||||
}
|
||||
|
||||
// Swap <link>
|
||||
this.setFavicon();
|
||||
// Completed an animation state
|
||||
this.timeToElapse = this.currentFrame % this.framesPerAnimation === 0 ? this.animationDelay : 1000 / this.fps;
|
||||
|
||||
// Set a timeout to draw again
|
||||
this.lastExecuted = timestamp;
|
||||
// Draw current frame from sprite
|
||||
this.sprite.drawFrame(this.currentFrame);
|
||||
|
||||
// Continue loop
|
||||
return requestAnimationFrame(this.loop.bind(this));
|
||||
};
|
||||
// Swap <link>
|
||||
this.setFavicon();
|
||||
|
||||
// Sprite loaded
|
||||
Favicon.prototype.onSpriteLoaded = function () {
|
||||
// Draw the first frame when the image loads
|
||||
this.sprite.drawFrame(this.currentFrame);
|
||||
// Set a timeout to draw again
|
||||
this.lastExecuted = timestamp;
|
||||
|
||||
// Swap <link>
|
||||
this.setFavicon();
|
||||
// Continue loop
|
||||
return requestAnimationFrame(this.loop.bind(this));
|
||||
}
|
||||
|
||||
// Start loop
|
||||
requestAnimationFrame(this.loop.bind(this));
|
||||
};
|
||||
// Sprite loaded
|
||||
onSpriteLoaded() {
|
||||
// Draw the first frame when the image loads
|
||||
this.sprite.drawFrame(this.currentFrame);
|
||||
|
||||
// Swap <link>
|
||||
this.setFavicon();
|
||||
|
||||
// Start loop
|
||||
requestAnimationFrame(this.loop.bind(this));
|
||||
}
|
||||
}
|
||||
|
||||
new Favicon(window.site_url + '/img/favicon-sprite.png', 21, 7, 3000 * 1);
|
||||
|
||||
@ -1,56 +1,56 @@
|
||||
'use strict';
|
||||
|
||||
var Shuffle = window.Shuffle;
|
||||
|
||||
var Demo = function () {
|
||||
this.element = document.getElementById('grid');
|
||||
this.gridItems = this.element.querySelectorAll('.picture-item');
|
||||
var sizer = this.element.querySelector('.my-sizer-element');
|
||||
|
||||
this.shuffle = new Shuffle(this.element, {
|
||||
itemSelector: '.picture-item',
|
||||
sizer: sizer,
|
||||
});
|
||||
class Demo {
|
||||
constructor() {
|
||||
this.element = document.getElementById('grid');
|
||||
this.gridItems = this.element.querySelectorAll('.picture-item');
|
||||
var sizer = this.element.querySelector('.my-sizer-element');
|
||||
|
||||
this.shuffle = new Shuffle(this.element, {
|
||||
itemSelector: '.picture-item',
|
||||
sizer: sizer,
|
||||
});
|
||||
|
||||
var callback = this.showItemsInViewport.bind(this);
|
||||
this.observer = new IntersectionObserver(callback, {
|
||||
threshold: 0.5,
|
||||
});
|
||||
|
||||
// Loop through each grid item and add it to the viewport watcher.
|
||||
for (var i = 0; i < this.gridItems.length; i++) {
|
||||
this.observer.observe(this.gridItems[i]);
|
||||
}
|
||||
|
||||
var callback = this.showItemsInViewport.bind(this);
|
||||
this.observer = new window.IntersectionObserver(callback, {
|
||||
threshold: 0.5,
|
||||
});
|
||||
// Add the transition class to the items after ones that are in the viewport
|
||||
// have received the `in` class.
|
||||
setTimeout(() => {
|
||||
this.addTransitionToItems();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// Loop through each grid item and add it to the viewport watcher.
|
||||
for (var i = 0; i < this.gridItems.length; i++) {
|
||||
this.observer.observe(this.gridItems[i]);
|
||||
/**
|
||||
* Add the `in` class to the element after it comes into view.
|
||||
*/
|
||||
showItemsInViewport(changes) {
|
||||
changes.forEach(function (change) {
|
||||
if (change.isIntersecting) {
|
||||
change.target.classList.add('in');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add the transition class to the items after ones that are in the viewport
|
||||
// have received the `in` class.
|
||||
setTimeout(function () {
|
||||
this.addTransitionToItems();
|
||||
}.bind(this), 100);
|
||||
};
|
||||
|
||||
/**
|
||||
* Add the `in` class to the element after it comes into view.
|
||||
*/
|
||||
Demo.prototype.showItemsInViewport = function (changes) {
|
||||
changes.forEach(function (change) {
|
||||
if (change.isIntersecting) {
|
||||
change.target.classList.add('in');
|
||||
/**
|
||||
* Only the items out of the viewport should transition. This way, the first
|
||||
* visible ones will snap into place.
|
||||
*/
|
||||
addTransitionToItems() {
|
||||
for (var i = 0; i < this.gridItems.length; i++) {
|
||||
var inner = this.gridItems[i].querySelector('.picture-item__inner');
|
||||
inner.classList.add('picture-item__inner--transition');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Only the items out of the viewport should transition. This way, the first
|
||||
* visible ones will snap into place.
|
||||
*/
|
||||
Demo.prototype.addTransitionToItems = function () {
|
||||
for (var i = 0; i < this.gridItems.length; i++) {
|
||||
var inner = this.gridItems[i].querySelector('.picture-item__inner');
|
||||
inner.classList.add('picture-item__inner--transition');
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
window.demo = new Demo();
|
||||
});
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
printWidth: 120,
|
||||
trailingComma: 'all',
|
||||
semi: true,
|
||||
tabWidth: 2,
|
||||
singleQuote: true,
|
||||
};
|
||||
@ -1,3 +1,3 @@
|
||||
export default function arrayMax(array) {
|
||||
return Math.max.apply(Math, array); // eslint-disable-line prefer-spread
|
||||
return Math.max(...array);
|
||||
}
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
export default function arrayMin(array) {
|
||||
return Math.min.apply(Math, array); // eslint-disable-line prefer-spread
|
||||
return Math.min(...array);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue