Refactor more docs javascript and add css compilation with gulp.
Glen Cheney
8 years ago
parent
47556e0c15
commit
a044a201fa
@ -0,0 +1,69 @@
|
|||||||
|
.demo-list .figure-wrap {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-list .figure-wrap,
|
||||||
|
.demo-list .figure-wrap img {
|
||||||
|
// Promote to its own layer. makes filters look ok on retina with images
|
||||||
|
transform: translateZ(0);
|
||||||
|
transition: .1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-list:hover .figure-wrap {
|
||||||
|
transform: scale3d( 1, 1, 1 );
|
||||||
|
|
||||||
|
img {
|
||||||
|
|
||||||
|
filter: grayscale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-list:hover .figure-wrap:hover {
|
||||||
|
z-index: 2;
|
||||||
|
transform: scale3d( 1.05, 1.05, 1 );
|
||||||
|
|
||||||
|
img {
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-list .figure-wrap:nth-child(4n + 1) {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-list .figure-wrap > a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-list .figure-wrap figcaption {
|
||||||
|
margin-top: .5em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.demo-link-container::before {
|
||||||
|
content: '➜';
|
||||||
|
color: $emerald;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
span.demo-link-container::before {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 47.9375em) {
|
||||||
|
|
||||||
|
.demo-list + .demo-list {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.figure-wrap:nth-child(odd) {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.figure-wrap:nth-child(n + 3) {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,73 @@
|
|||||||
|
// FAQ
|
||||||
|
|
||||||
|
.search-section {
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.faq-search {
|
||||||
|
-webkit-appearance: searchfield;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
border: 2px solid $gray40;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 0.5em;
|
||||||
|
font-size: 1.125em;
|
||||||
|
color: $gray40;
|
||||||
|
transition: .15s;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: $gray40;
|
||||||
|
transition: .15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
outline: 0;
|
||||||
|
color: $gray30;
|
||||||
|
border-color: $gray30;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: $gray30;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: 0;
|
||||||
|
color: $nephritis;
|
||||||
|
border-color: $nephritis;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: $nephritis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.question {
|
||||||
|
margin: 2em 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: .2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question--collapsed {
|
||||||
|
height: 0 !important; // Needs to override inline style
|
||||||
|
margin: 0;
|
||||||
|
border-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question--collapsed + .question {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question--unanswered {
|
||||||
|
padding-top: 1.25em;
|
||||||
|
border-top: 2px solid $emerald;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question__title {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question__answer {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
@ -0,0 +1,73 @@
|
|||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
max-height: 30em;
|
||||||
|
}
|
||||||
|
|
||||||
|
picture {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul ul {
|
||||||
|
padding-left: 1.25em;
|
||||||
|
margin: 0;
|
||||||
|
list-style-type: circle;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav > a {
|
||||||
|
display: block;
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-fluid {
|
||||||
|
width: 93%;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row.row--full {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breathable-list li {
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filters
|
||||||
|
.filter__label {
|
||||||
|
margin: 0 0 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter__search {
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.sort-options {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#be-social {
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,293 +0,0 @@
|
|||||||
@import "variables";
|
|
||||||
|
|
||||||
*,
|
|
||||||
*::before,
|
|
||||||
*::after {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
max-height: 30em;
|
|
||||||
}
|
|
||||||
|
|
||||||
picture {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
display: block;
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* lets have some constraints shall we */
|
|
||||||
.container-fluid {
|
|
||||||
width: 93%;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row.row--full {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul ul {
|
|
||||||
padding-left: 1.25em;
|
|
||||||
margin: 0;
|
|
||||||
list-style-type: circle;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breathable-list li {
|
|
||||||
line-height: 1.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.site-nav {
|
|
||||||
|
|
||||||
.site-nav__title {
|
|
||||||
color: $clouds;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-nav__tray {
|
|
||||||
transition: .2s;
|
|
||||||
overflow: hidden;
|
|
||||||
height: 300px;
|
|
||||||
background-color: $wetAsphalt;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-nav__tray-inner {
|
|
||||||
padding: 30px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.collapsed .site-nav__tray {
|
|
||||||
height: 0;
|
|
||||||
|
|
||||||
// IE7 wtf
|
|
||||||
.lt-ie8 & {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.site-nav__band {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 4px;
|
|
||||||
background: $wetAsphalt;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-footer {
|
|
||||||
margin-top: 2em;
|
|
||||||
padding: 1em 0;
|
|
||||||
background-color: $wetAsphalt;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-footer__credit {
|
|
||||||
margin: 0;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav > a {
|
|
||||||
display: block;
|
|
||||||
margin: 5px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.demo-list .figure-wrap {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-list .figure-wrap,
|
|
||||||
.demo-list .figure-wrap img {
|
|
||||||
// Promote to its own layer. makes filters look ok on retina with images
|
|
||||||
transform: translateZ(0);
|
|
||||||
transition: .1s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-list:hover .figure-wrap {
|
|
||||||
transform: scale3d( 1, 1, 1 );
|
|
||||||
|
|
||||||
img {
|
|
||||||
|
|
||||||
filter: grayscale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-list:hover .figure-wrap:hover {
|
|
||||||
z-index: 2;
|
|
||||||
transform: scale3d( 1.05, 1.05, 1 );
|
|
||||||
|
|
||||||
img {
|
|
||||||
filter: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-list .figure-wrap:nth-child(4n + 1) {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-list .figure-wrap > a {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-list .figure-wrap figcaption {
|
|
||||||
margin-top: .5em;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.demo-link-container::before {
|
|
||||||
content: '➜';
|
|
||||||
color: $emerald;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
span.demo-link-container::before {
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Filters
|
|
||||||
.filter__label {
|
|
||||||
margin: 0 0 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter__search {
|
|
||||||
margin: 5px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.sort-options {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#be-social {
|
|
||||||
h2 {
|
|
||||||
margin-bottom: 32px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// FAQ
|
|
||||||
|
|
||||||
.search-section {
|
|
||||||
margin-top: 1em;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
input.faq-search {
|
|
||||||
width: 100%;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
border: 2px solid $gray40;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 0.5em;
|
|
||||||
font-size: 1.125em;
|
|
||||||
color: $gray40;
|
|
||||||
transition: .15s;
|
|
||||||
|
|
||||||
@include placeholder() {
|
|
||||||
color: $gray40;
|
|
||||||
transition: .15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
outline: 0;
|
|
||||||
color: $gray30;
|
|
||||||
border-color: $gray30;
|
|
||||||
|
|
||||||
@include placeholder() {
|
|
||||||
color: $gray30;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: 0;
|
|
||||||
color: $nephritis;
|
|
||||||
border-color: $nephritis;
|
|
||||||
|
|
||||||
@include placeholder() {
|
|
||||||
color: $nephritis;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.question {
|
|
||||||
margin: 2em 0;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
// For transition
|
|
||||||
transition: .2s ease-out;
|
|
||||||
|
|
||||||
&.collapsed {
|
|
||||||
height: 0 !important; // Needs to override inline style
|
|
||||||
margin: 0;
|
|
||||||
border-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.collapsed + .question {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.question--unanswered {
|
|
||||||
padding-top: 1.25em;
|
|
||||||
border-top: 2px solid $emerald;
|
|
||||||
}
|
|
||||||
|
|
||||||
.question__title {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.question__answer {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media ( max-width: 47.9375em ) {
|
|
||||||
|
|
||||||
.demo-list + .demo-list {
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.figure-wrap:nth-child(odd) {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.figure-wrap:nth-child(n + 3) {
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-nav .btn {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
.site-nav {
|
||||||
|
|
||||||
|
.site-nav__title {
|
||||||
|
color: $clouds;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-nav__tray {
|
||||||
|
transition: .2s;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 300px;
|
||||||
|
background-color: $wetAsphalt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-nav__tray-inner {
|
||||||
|
padding: 30px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.collapsed .site-nav__tray {
|
||||||
|
height: 0;
|
||||||
|
|
||||||
|
// IE7 wtf
|
||||||
|
.lt-ie8 & {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.site-nav__band {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background: $wetAsphalt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-footer {
|
||||||
|
margin-top: 2em;
|
||||||
|
padding: 1em 0;
|
||||||
|
background-color: $wetAsphalt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-footer__credit {
|
||||||
|
margin: 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 47.9375em) {
|
||||||
|
|
||||||
|
.site-nav .btn {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,99 +1,77 @@
|
|||||||
var DEMO = (function( $, Viewport ) {
|
'use strict';
|
||||||
'use strict';
|
|
||||||
|
|
||||||
var $grid = $('#grid'),
|
var Shuffle = window.shuffle;
|
||||||
$gridItems = $grid.find('.picture-item'),
|
var Viewport = window.viewport;
|
||||||
$sizer = $grid.find('.shuffle__sizer'),
|
|
||||||
shuffle,
|
|
||||||
|
|
||||||
init = function() {
|
function toArray(arrayLike) {
|
||||||
|
if ('from' in Array) {
|
||||||
|
return Array.from(arrayLike);
|
||||||
|
}
|
||||||
|
|
||||||
|
return Array.prototype.slice.call(arrayLike);
|
||||||
|
}
|
||||||
|
|
||||||
// instantiate the plugin
|
var Demo = function () {
|
||||||
$grid.shuffle({
|
this.element = document.getElementById('grid');
|
||||||
itemSelector: '.picture-item',
|
this.gridItems = toArray(this.element.querySelectorAll('.picture-item'));
|
||||||
sizer: $sizer
|
this.sizer = this.element.querySelector('.shuffle__sizer');
|
||||||
});
|
|
||||||
|
|
||||||
shuffle = $grid.data('shuffle');
|
|
||||||
|
|
||||||
addViewportItems();
|
|
||||||
|
|
||||||
setTimeout(function() {
|
|
||||||
listen();
|
|
||||||
addTransitionToItems();
|
|
||||||
}, 100);
|
|
||||||
},
|
|
||||||
|
|
||||||
addViewportItems = function() {
|
|
||||||
$gridItems.each(function() {
|
|
||||||
Viewport.add({
|
|
||||||
element: this,
|
|
||||||
threshold: 130,
|
|
||||||
enter: showItemsInViewport
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
// Only the items out of the viewport should transition. This way, the first visible ones
|
|
||||||
// will snap into place.
|
|
||||||
addTransitionToItems = function() {
|
|
||||||
$gridItems.find('.picture-item__inner').addClass('picture-item__inner--transition');
|
|
||||||
},
|
|
||||||
|
|
||||||
showItemsInViewport = function() {
|
|
||||||
$(this).addClass('in');
|
|
||||||
},
|
|
||||||
|
|
||||||
// Re layout shuffle when images load. This is only needed
|
this.shuffle = new Shuffle(this.element, {
|
||||||
// below 768 pixels because the .picture-item height is auto and therefore
|
itemSelector: '.picture-item',
|
||||||
// the height of the picture-item is dependent on the image
|
sizer: this.sizer,
|
||||||
// I recommend using imagesloaded to determine when an image is loaded
|
});
|
||||||
// but that doesn't support IE7
|
|
||||||
listen = function() {
|
|
||||||
|
|
||||||
var debouncedLayout = $.throttle( 300, function() {
|
this.addViewportItems();
|
||||||
$grid.shuffle('update');
|
|
||||||
Viewport.refresh();
|
|
||||||
});
|
|
||||||
|
|
||||||
var $imgs = $grid.find('img');
|
|
||||||
|
|
||||||
// Get all images inside shuffle
|
setTimeout(function () {
|
||||||
$imgs.each(function() {
|
this.addTransitionToItems();
|
||||||
var proxyImage;
|
}.bind(this), 100);
|
||||||
|
};
|
||||||
|
|
||||||
// Image already loaded
|
Demo.prototype.addViewportItems = function () {
|
||||||
if ( this.complete && this.naturalWidth !== undefined ) {
|
var handler = this.showItemsInViewport;
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// If none of the checks above matched, simulate loading on detached element.
|
this.gridItems.forEach(function () {
|
||||||
proxyImage = new Image();
|
Viewport.add({
|
||||||
$( proxyImage ).on('load', function() {
|
element: this,
|
||||||
$(this).off('load');
|
threshold: 130,
|
||||||
debouncedLayout();
|
enter: handler,
|
||||||
});
|
|
||||||
|
|
||||||
proxyImage.src = this.src;
|
|
||||||
});
|
});
|
||||||
|
});
|
||||||
// Because this method doesn't seem to be perfect.
|
};
|
||||||
setTimeout(function() {
|
|
||||||
debouncedLayout();
|
Demo.prototype.showItemsInViewport = function () {
|
||||||
}, 500);
|
this.classList.add('in');
|
||||||
};
|
};
|
||||||
|
|
||||||
return {
|
/**
|
||||||
init: init,
|
* Only the items out of the viewport should transition. This way, the first
|
||||||
getShuffle: function() {
|
* visible ones will snap into place.
|
||||||
return shuffle;
|
*/
|
||||||
}
|
Demo.prototype.addTransitionToItems = function () {
|
||||||
};
|
this.gridItems.forEach(function (item) {
|
||||||
}( jQuery, window.Viewport ));
|
item.querySelector('.picture-item__inner').classList.add('picture-item__inner--transition');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
$(document).ready(function() {
|
/**
|
||||||
DEMO.init();
|
* Re-layout shuffle when images load. This is only needed below 768 pixels
|
||||||
|
* because the .picture-item height is auto and therefore the height of the
|
||||||
|
* picture-item is dependent on the image. I recommend using imagesloaded by
|
||||||
|
* desandro to determine when all your images have loaded.
|
||||||
|
*/
|
||||||
|
Demo.prototype.listenForImageLoads = function () {
|
||||||
|
var imgs = this.element.querySelectorAll('img');
|
||||||
|
var handler = function () {
|
||||||
|
this.shuffle.update();
|
||||||
|
Viewport.refresh();
|
||||||
|
}.bind(this);
|
||||||
|
|
||||||
|
for (var i = imgs.length - 1; i >= 0; i--) {
|
||||||
|
imgs[i].addEventListener('load', handler, false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
window.demo = new Demo();
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,22 +0,0 @@
|
|||||||
var DEMO = (function( $ ) {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
var init = function() {
|
|
||||||
var $grid = $('#grid'),
|
|
||||||
$sizer = $grid.find('.shuffle__sizer');
|
|
||||||
|
|
||||||
$grid.shuffle({
|
|
||||||
itemSelector: '.grid__brick',
|
|
||||||
sizer: $sizer
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
init: init
|
|
||||||
};
|
|
||||||
}( jQuery ));
|
|
||||||
|
|
||||||
|
|
||||||
$(document).ready(function() {
|
|
||||||
DEMO.init();
|
|
||||||
});
|
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
window.demo = new window.shuffle(document.getElementById('grid'), {
|
||||||
|
itemSelector: '.grid__brick',
|
||||||
|
sizer: document.querySelector('#grid .shuffle__sizer'),
|
||||||
|
});
|
||||||
@ -1,51 +1,45 @@
|
|||||||
requirejs.config({
|
requirejs.config({
|
||||||
baseUrl: site_url + '/js',
|
baseUrl: site_url + '/js',
|
||||||
paths: {
|
paths: {
|
||||||
jquery: '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min',
|
shuffle: '../dist/shuffle',
|
||||||
shuffle: '../dist/jquery.shuffle',
|
|
||||||
modernizr: '../dist/modernizr.custom.min'
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// Shimming other page javascript.
|
// Shimming other page javascript.
|
||||||
shim: {
|
shim: {
|
||||||
evenheights: {
|
|
||||||
deps: ['jquery'],
|
|
||||||
exports: 'jQuery.fn.evenHeights'
|
|
||||||
},
|
|
||||||
page: {
|
page: {
|
||||||
deps: ['jquery', 'evenheights'],
|
deps: ['evenheights'],
|
||||||
exports: 'Modules'
|
exports: 'Modules',
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// A hack for Modernizr and AMD. This lets Modernizr be in the <head> and also
|
define(function (require) {
|
||||||
// compatible with other modules.
|
'use strict';
|
||||||
define('modernizr', [], window.Modernizr);
|
|
||||||
|
|
||||||
|
|
||||||
define(function(require) {
|
|
||||||
// Get jQuery.
|
|
||||||
var $ = require('jquery');
|
|
||||||
|
|
||||||
// Get Shuffle.
|
// Get Shuffle.
|
||||||
var Shuffle = require('shuffle');
|
var Shuffle = require('shuffle');
|
||||||
|
|
||||||
// Page-level JavaScript used for the demo pages.
|
// Page-level JavaScript used for the demo pages.
|
||||||
var jqEvenHeights = require('evenheights');
|
require('evenheights');
|
||||||
var Page = require('page');
|
require('page');
|
||||||
|
|
||||||
// Create a new shuffle instance.
|
// Create a new shuffle instance.
|
||||||
var shuffle = new Shuffle($('#grid').get(0), {
|
var element = document.getElementById('grid');
|
||||||
|
var shuffle = new Shuffle(element, {
|
||||||
itemSelector: '.js-item',
|
itemSelector: '.js-item',
|
||||||
sizer: $('#js-sizer')
|
sizer: document.getElementById('js-sizer'),
|
||||||
});
|
});
|
||||||
|
|
||||||
// DO NOT use this for determining when images load.
|
// DO NOT use this for determining when images load.
|
||||||
// See http://vestride.github.io/Shuffle/images/
|
// See http://vestride.github.io/Shuffle/images/
|
||||||
// Use something like imagesLoaded.
|
// Use something like imagesLoaded.
|
||||||
$('#grid img').on('load', function() {
|
var imgs = this.element.querySelectorAll('img');
|
||||||
shuffle.layout();
|
|
||||||
});
|
var handler = function () {
|
||||||
|
shuffle.update();
|
||||||
|
};
|
||||||
|
|
||||||
|
for (var i = imgs.length - 1; i >= 0; i--) {
|
||||||
|
imgs[i].addEventListener('load', handler, false);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue