From 6adb041ba1c7066fd9cc27307b9fea110b5d301e Mon Sep 17 00:00:00 2001 From: Glen Cheney Date: Fri, 8 Apr 2016 13:22:59 -0700 Subject: [PATCH] Put home page demo items inside aspect boxes. --- _config.yml | 30 +++--- _includes/picture-item.html | 13 ++- _posts/2013-05-01-basic.html | 2 +- _posts/2013-06-29-image-problems.html | 8 -- _posts/2013-08-25-animated.html | 2 +- _scss/_grid.scss | 5 + _scss/_helpers.scss | 4 + _scss/shuffle-styles.scss | 128 ++++++++++++------------ css/shuffle-styles.css | 106 +++++++++++--------- css/style.css | 136 ++++++++++++++++++++++++++ dist/shuffle.js | 8 +- dist/shuffle.min.js | 2 +- index.html | 2 +- js/demos/animate-in.js | 18 ---- js/demos/homepage.js | 18 ---- js/demos/images-broken.js | 22 ----- js/page.js | 12 +++ package.json | 3 + src/get-number.js | 8 +- 19 files changed, 316 insertions(+), 211 deletions(-) delete mode 100644 js/demos/images-broken.js diff --git a/_config.yml b/_config.yml index bb85c72..08306ac 100644 --- a/_config.yml +++ b/_config.yml @@ -91,20 +91,20 @@ items: title: Baseball img: baseball.png original: baseball.jpg - cols: 3 + cols: [ 3, 4, 3 ] - groups: [ wallpaper, 3d ] date: 2011-08-14 title: Tennis img: tennis-ball.png original: tennis-ball.jpg - description: longDescription - cols: 6 + extras: [ overlay ] + cols: [3, 8, 6] - groups: [ wallpaper, 3d ] date: 2009-05-27 title: iMac img: imac.png original: imac.jpg - cols: 3 + cols: [ 3, 4, 3 ] - groups: [ graphics ] date: 2012-05-14 title: Master Chief @@ -112,27 +112,27 @@ items: original: Master_Chief_Portrait_by_Eightfold_Studios.jpg description: longDescription extras: [ h2 ] - cols: 3 + cols: [ 6, 4, 3 ] - groups: [ wallpaper, 3d ] date: 2009-09-14 title: Eightfold img: es-blue.png original: es-blue.jpg - cols: 3 + cols: [ 3, 4, 3 ] - groups: [ photography ] date: 2012-03-14 title: Pumpkin img: pumpkin.png original: pumpkin.jpg - description: longDescription - cols: 6 + extras: [ overlay ] + cols: [3, 8, 6] - groups: [ wallpaper, 3d ] date: 2013-05-19 title: Vestride img: vestride-red.png original: vestride-red.jpg extras: [ h2 ] - cols: 6 + cols: [3, 8, 6] - groups: [ graphics ] date: 2013-02-01 title: Newegg @@ -140,29 +140,29 @@ items: original: newegg.jpg description: longDescription extras: [ h2 ] - cols: 3 + cols: [ 6, 4, 3 ] - groups: [ wallpaper ] date: 2000-01-01 title: Arc img: eightfoldarc.png original: eightfoldarc.jpg - cols: 3 + cols: [ 3, 4, 3 ] - groups: [ photography ] date: 2012-07-04 title: Ground img: ground.png original: ground!.jpg - cols: 3 + cols: [ 3, 4, 3 ] - groups: [ wallpaper ] date: 2011-08-12 title: Grass img: grassy-hills.png original: grassy-hills.tif - description: longDescription - cols: 6 + extras: [ overlay ] + cols: [3, 8, 6] - groups: [ wallpaper, 3d ] date: 2013-05-19 title: Vestride img: vestride-classy.png original: vestride-classy.jpg - cols: 3 + cols: [ 3, 4, 3 ] diff --git a/_includes/picture-item.html b/_includes/picture-item.html index eef8c09..19c49ff 100644 --- a/_includes/picture-item.html +++ b/_includes/picture-item.html @@ -5,15 +5,18 @@ {% else %} {% assign extras = "" %} {% endif %} -{% if item.cols %}{% assign cols = item.cols %}{% else %}{% assign cols = 3 %}{% endif %} {% assign description = item.description %} -
+
- +
+
+ + +
+
-
{{ item.title }}
-

{{ item.groups | join: ', ' }}

+

{{ item.groups | join: ', ' }}

{% if description %}{% if description == 'longDescription' %}{% assign description = site.longDescription %}{% endif %}

{{ description }}

{% endif %}
diff --git a/_posts/2013-05-01-basic.html b/_posts/2013-05-01-basic.html index 0346796..2322697 100644 --- a/_posts/2013-05-01-basic.html +++ b/_posts/2013-05-01-basic.html @@ -19,7 +19,7 @@ extraJS: [ "demos/homepage.js" ] {% assign item = item %} {% include picture-item.html %} {% endfor %} -
+
diff --git a/_posts/2013-06-29-image-problems.html b/_posts/2013-06-29-image-problems.html index 737f356..712b923 100644 --- a/_posts/2013-06-29-image-problems.html +++ b/_posts/2013-06-29-image-problems.html @@ -41,12 +41,4 @@ extraJS: [ "demos/images.js"] -
-
-

Shuffle.js

-

{{ site.longDescription }}

-
-
- - {% include credit-jake.html %} diff --git a/_posts/2013-08-25-animated.html b/_posts/2013-08-25-animated.html index ebfb485..e97eee0 100644 --- a/_posts/2013-08-25-animated.html +++ b/_posts/2013-08-25-animated.html @@ -27,7 +27,7 @@ extraJS: [ "viewport.js", "demos/animate-in.js" ] {% assign item = item %} {% include picture-item.html %} {% endfor %} -
+
diff --git a/_scss/_grid.scss b/_scss/_grid.scss index 6f5a21e..2d6d91c 100644 --- a/_scss/_grid.scss +++ b/_scss/_grid.scss @@ -64,6 +64,11 @@ } } +@include breakpoint(md) { + + @include make-grid(md); +} + @media screen and (min-width: $viewport-at-max-grid-width) { .#{$grid-container} { diff --git a/_scss/_helpers.scss b/_scss/_helpers.scss index 42e377e..1eb7ef1 100644 --- a/_scss/_helpers.scss +++ b/_scss/_helpers.scss @@ -4,6 +4,10 @@ display: inline-block; } +@include breakpoint(sm, true) { + .hidden\@xs { display: none; } +} + // Hide from both screenreaders and browsers. .hidden { display: none !important; diff --git a/_scss/shuffle-styles.scss b/_scss/shuffle-styles.scss index cae635d..676699e 100644 --- a/_scss/shuffle-styles.scss +++ b/_scss/shuffle-styles.scss @@ -10,24 +10,61 @@ $itemHeight: 220px; .picture-item { height: 220px; margin-top: $pictureGutter; + margin-left: 0; /* shuffle items shouldn't have a left margin*/ - &.shuffle-item { - margin-left: 0; /* shuffle items shouldn't have a left margin*/ + img { + display: block; + width: 100%; + max-width: none; + height: 100%; + object-fit: cover; } - &.picture-item--h2 { - height: ($itemHeight * 2) + $pictureGutter; /* 2x the height + 1 gutter */ + .no-objectfit & img { + height: auto; + max-width: 100%; } +} - // Ehh, i should really use something other than col-6@sm to target this... - &.col-6\@sm:not(.picture-item--h2) { +.picture-item--h2 { + height: ($itemHeight * 2) + $pictureGutter; /* 2x the height + 1 gutter */ +} + +.picture-item__inner { + position: relative; + height: 100%; + overflow: hidden; + background: $clouds; +} + +.picture-item__blur { + display: none; +} + +.picture-item__details, +.picture-item__description { + padding: 1em; + width: 100%; +} +.picture-item__description { + margin: 0; + padding-top: 0; + padding-right: 2em; +} + +.picture-item__tags { + margin: 0; +} + +@include breakpoint(sm) { + + .picture-item--overlay { .picture-item__details { position: absolute; bottom: 0; left: 0; width: 100%; - background-color: #333; background-color: rgba(black, .6); color: white; overflow: hidden; @@ -38,60 +75,29 @@ $itemHeight: 220px; } } - .picture-item__inner { - position: relative; - height: 100%; - overflow: hidden; - background: $clouds; - } - - img { - display: block; - width: 100%; - height: auto; - } - - .picture-item__blur { - display: none; - } - - .picture-item__details, - .picture-item__description { - padding: 1em; - } - .picture-item__description { - margin: 0; - padding-top: 0; - padding-right: 2em; - } - - .picture-item__tags { - margin: 0; - } -} - -// Autoprefixer misses a parenthesis. -@supports (filter: blur(1px)) { - - .picture-item.col-6\@sm:not(.picture-item--h2) { - - .picture-item__blur { - position: absolute; - z-index: 1; - top: calc(50px - #{$itemHeight}); // Caption is 50px tall. - left: 0; - display: block; - filter: blur(7px); - } - - .picture-item__details { - background: none; - } - - .picture-item__tags, - .picture-item__title { - position: relative; - z-index: 2; + @supports (filter: blur(1px)) { + + .picture-item--overlay { + + .picture-item__blur { + position: absolute; + z-index: 1; + top: 0; + left: 0; + display: block; + filter: blur(7px); + clip-path: inset(#{$itemHeight - 50px} 0 0 0); + } + + .picture-item__details { + background: none; + } + + .picture-item__tags, + .picture-item__title { + position: relative; + z-index: 2; + } } } } diff --git a/css/shuffle-styles.css b/css/shuffle-styles.css index c5fcd71..e769cad 100644 --- a/css/shuffle-styles.css +++ b/css/shuffle-styles.css @@ -2,60 +2,74 @@ \*=============================================*/ .picture-item { height: 220px; - margin-top: 24px; } - .picture-item.shuffle-item { - margin-left: 0; - /* shuffle items shouldn't have a left margin*/ } - .picture-item.picture-item--h2 { - height: 464px; - /* 2x the height + 1 gutter */ } - .picture-item.col-6\@sm:not(.picture-item--h2) .picture-item__details { + margin-top: 24px; + margin-left: 0; + /* shuffle items shouldn't have a left margin*/ } + .picture-item img { + display: block; + width: 100%; + max-width: none; + height: 100%; + -o-object-fit: cover; + object-fit: cover; } + .no-objectfit .picture-item img { + height: auto; + max-width: 100%; } + +.picture-item--h2 { + height: 464px; + /* 2x the height + 1 gutter */ } + +.picture-item__inner { + position: relative; + height: 100%; + overflow: hidden; + background: #ECF0F1; } + +.picture-item__blur { + display: none; } + +.picture-item__details, +.picture-item__description { + padding: 1em; + width: 100%; } + +.picture-item__description { + margin: 0; + padding-top: 0; + padding-right: 2em; } + +.picture-item__tags { + margin: 0; } + +@media screen and (min-width: 768px) { + .picture-item--overlay .picture-item__details { position: absolute; bottom: 0; left: 0; width: 100%; - background-color: #333; background-color: rgba(0, 0, 0, 0.6); color: white; overflow: hidden; } - .picture-item.col-6\@sm:not(.picture-item--h2) .picture-item__description { + .picture-item--overlay .picture-item__description { display: none; } - .picture-item .picture-item__inner { - position: relative; - height: 100%; - overflow: hidden; - background: #ECF0F1; } - .picture-item img { - display: block; - width: 100%; - height: auto; } - .picture-item .picture-item__blur { - display: none; } - .picture-item .picture-item__details, - .picture-item .picture-item__description { - padding: 1em; } - .picture-item .picture-item__description { - margin: 0; - padding-top: 0; - padding-right: 2em; } - .picture-item .picture-item__tags { - margin: 0; } - -@supports ((-webkit-filter: blur(1px)) or (filter: blur(1px))) { - .picture-item.col-6\@sm:not(.picture-item--h2) .picture-item__blur { - position: absolute; - z-index: 1; - top: calc(50px - 220px); - left: 0; - display: block; - -webkit-filter: blur(7px); - filter: blur(7px); } - .picture-item.col-6\@sm:not(.picture-item--h2) .picture-item__details { - background: none; } - .picture-item.col-6\@sm:not(.picture-item--h2) .picture-item__tags, - .picture-item.col-6\@sm:not(.picture-item--h2) .picture-item__title { - position: relative; - z-index: 2; } } + @supports ((-webkit-filter: blur(1px)) or (filter: blur(1px))) { + .picture-item--overlay .picture-item__blur { + position: absolute; + z-index: 1; + top: 0; + left: 0; + display: block; + -webkit-filter: blur(7px); + filter: blur(7px); + -webkit-clip-path: inset(170px 0 0 0); + clip-path: inset(170px 0 0 0); } + .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; } } } /* Shuffle needs either relative or absolute positioning on the container diff --git a/css/style.css b/css/style.css index 604d1a5..5011415 100644 --- a/css/style.css +++ b/css/style.css @@ -855,6 +855,138 @@ h3:hover > a { .row { max-width: 1200px; } } +@media screen and (min-width: 1024px) { + .col-1\@md, .col-2\@md, .col-3\@md, .col-4\@md, .col-5\@md, .col-6\@md, .col-7\@md, .col-8\@md, .col-9\@md, .col-10\@md, .col-11\@md, .col-12\@md { + float: left; } + .aspect--16x9\@md { + padding-bottom: 56.25%; } + .aspect--9x16\@md { + padding-bottom: 177.77778%; } + .aspect--4x3\@md { + padding-bottom: 75%; } + .aspect--3x4\@md { + padding-bottom: 133.33333%; } + .aspect--3x2\@md { + padding-bottom: 66.66667%; } + .aspect--3x1\@md { + padding-bottom: 33.33333%; } + .aspect--2x3\@md { + padding-bottom: 150%; } + .aspect--2x1\@md { + padding-bottom: 50%; } + .aspect--1x2\@md { + padding-bottom: 200%; } + .aspect--1x1\@md { + padding-bottom: 100%; } + .aspect--none\@md { + height: auto; + padding-bottom: 0; + overflow: visible; } + .aspect--none\@md > .aspect__inner { + position: static; } + .col-1\@md { + width: 8.33333%; } + .col-2\@md { + width: 16.66667%; } + .col-3\@md { + width: 25%; } + .col-4\@md { + width: 33.33333%; } + .col-5\@md { + width: 41.66667%; } + .col-6\@md { + width: 50%; } + .col-7\@md { + width: 58.33333%; } + .col-8\@md { + width: 66.66667%; } + .col-9\@md { + width: 75%; } + .col-10\@md { + width: 83.33333%; } + .col-11\@md { + width: 91.66667%; } + .col-12\@md { + width: 100%; } + .col-pull-0\@md { + right: auto; } + .col-pull-1\@md { + right: 8.33333%; } + .col-pull-2\@md { + right: 16.66667%; } + .col-pull-3\@md { + right: 25%; } + .col-pull-4\@md { + right: 33.33333%; } + .col-pull-5\@md { + right: 41.66667%; } + .col-pull-6\@md { + right: 50%; } + .col-pull-7\@md { + right: 58.33333%; } + .col-pull-8\@md { + right: 66.66667%; } + .col-pull-9\@md { + right: 75%; } + .col-pull-10\@md { + right: 83.33333%; } + .col-pull-11\@md { + right: 91.66667%; } + .col-pull-12\@md { + right: 100%; } + .col-push-0\@md { + left: auto; } + .col-push-1\@md { + left: 8.33333%; } + .col-push-2\@md { + left: 16.66667%; } + .col-push-3\@md { + left: 25%; } + .col-push-4\@md { + left: 33.33333%; } + .col-push-5\@md { + left: 41.66667%; } + .col-push-6\@md { + left: 50%; } + .col-push-7\@md { + left: 58.33333%; } + .col-push-8\@md { + left: 66.66667%; } + .col-push-9\@md { + left: 75%; } + .col-push-10\@md { + left: 83.33333%; } + .col-push-11\@md { + left: 91.66667%; } + .col-push-12\@md { + left: 100%; } + .col-offset-0\@md { + margin-left: 0%; } + .col-offset-1\@md { + margin-left: 8.33333%; } + .col-offset-2\@md { + margin-left: 16.66667%; } + .col-offset-3\@md { + margin-left: 25%; } + .col-offset-4\@md { + margin-left: 33.33333%; } + .col-offset-5\@md { + margin-left: 41.66667%; } + .col-offset-6\@md { + margin-left: 50%; } + .col-offset-7\@md { + margin-left: 58.33333%; } + .col-offset-8\@md { + margin-left: 66.66667%; } + .col-offset-9\@md { + margin-left: 75%; } + .col-offset-10\@md { + margin-left: 83.33333%; } + .col-offset-11\@md { + margin-left: 91.66667%; } + .col-offset-12\@md { + margin-left: 100%; } } + .code-block { position: relative; overflow: visible; @@ -1178,6 +1310,10 @@ button { .ib { display: inline-block; } +@media screen and (max-width: 767px) { + .hidden\@xs { + display: none; } } + .hidden { display: none !important; visibility: hidden; } diff --git a/dist/shuffle.js b/dist/shuffle.js index 8e595ca..8b21a5c 100644 --- a/dist/shuffle.js +++ b/dist/shuffle.js @@ -1831,13 +1831,7 @@ return /******/ (function(modules) { // webpackBootstrap }); exports.default = getNumber; function getNumber(value) { - var str = value && value.toString(); - var val = parseFloat(str); - if (val + 1 >= 0) { - return val; - } - - return 0; + return parseFloat(value) || 0; } /***/ }, diff --git a/dist/shuffle.min.js b/dist/shuffle.min.js index 08fba10..3500d9e 100644 --- a/dist/shuffle.min.js +++ b/dist/shuffle.min.js @@ -1,2 +1,2 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.shuffle=e():t.shuffle=e()}(this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var s=i[n]={exports:{},id:n,loaded:!1};return t[n].call(s.exports,s,s.exports,e),s.loaded=!0,s.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function s(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t){return Array.prototype.slice.call(t)}function r(t,e,i){for(var n=0,s=t.length;s>n;n++)if(e.call(i,t[n],n,t)==={})return}function l(t,e,i){return setTimeout(t.bind(e),i)}function a(t){return Math.max.apply(Math,t)}function u(t){return Math.min.apply(Math,t)}function h(t,e){return 2===arguments.length?h(t)(e):function(e){return t.indexOf(e)>-1}}function f(){}var c=function(){function t(t,e){for(var i=0;i0?t.getSize(this.items[0].element,!0).width:e,0===n&&(n=e),n+i}},{key:"_getGutterSize",value:function(t){var e;return e="function"==typeof this.options.gutterWidth?this.options.gutterWidth(t):this.useSizer?(0,C["default"])(this.options.sizer,"marginLeft"):this.options.gutterWidth}},{key:"_setColumns",value:function(){var e=arguments.length<=0||void 0===arguments[0]?t.getSize(this.element).width:arguments[0],i=this._getGutterSize(e),n=this._getColumnSize(e,i),s=(e+i)/n;Math.abs(Math.round(s)-s)l;l++)this.positions[n+l]=o;return s}},{key:"_getColumnSpan",value:function(t,e,i){var n=t/e;return Math.abs(Math.round(n)-n)s;s++)n[s]=a(this.positions.slice(s,s+t));return n}},{key:"_getShortColumn",value:function(t,e){for(var i=u(t),n=0,s=t.length;s>n;n++)if(t[n]>=i-e&&t[n]<=i+e)return n;return 0}},{key:"_shrink",value:function(){var t=this,e=arguments.length<=0||void 0===arguments[0]?this._getConcealedItems():arguments[0];r(e,function(e,i){e.scale!==T["default"].Scale.FILTERED&&(e.scale=T["default"].Scale.FILTERED,t._queue.push({item:e,opacity:0,transitionDelay:Math.min(i*t.options.staggerAmount,t.options.staggerAmountMax),callback:function(){e.element.style.visibility="hidden"}}))},this)}},{key:"_handleResize",value:function(){if(this.isEnabled&&!this.isDestroyed){var e=t.getSize(this.element).width;e!==this.containerWidth&&this.update()}}},{key:"_getStylesForTransition",value:function(t){var e=t.item,i={opacity:t.opacity,visibility:t.visibility,transitionDelay:(t.transitionDelay||0)+"ms"},n=e.point.x,s=e.point.y;return this.options.useTransforms?i.transform="translate("+n+"px, "+s+"px) scale("+e.scale+")":(i.left=n+"px",i.top=s+"px"),i}},{key:"_transition",value:function(t){var e=this,i=this,n=this._getStylesForTransition(t),s=t.callfront||f,o=t.callback||f,r=t.item;return new Promise(function(t){var l={item:r,handler:function(e){var n=e.target;n===e.currentTarget&&(n.removeEventListener("transitionend",l.handler),n.style.transitionDelay="",i._removeTransitionReference(l),o(),t())}};s(),r.applyCss(n),e.isInitialized?(r.element.addEventListener("transitionend",l.handler),e._transitions.push(l)):(o(),t())})}},{key:"_processQueue",value:function(){var t=this,e=arguments.length<=0||void 0===arguments[0]?!0:arguments[0];this.isTransitioning&&this._cancelMovement();var i=[],n=[];this._queue.forEach(function(e){t.isInitialized&&0!==t.options.speed?n.push(e):i.push(e)}),this._styleImmediately(i);var s=n.map(function(e){return t._transition(e)});n.length>0&&this.options.speed>0?(this.isTransitioning=!0,Promise.all(s).then(this._movementFinished.bind(this))):e&&l(this._dispatchLayout,this),this._queue.length=0}},{key:"_cancelMovement",value:function(){r(this._transitions,function(t){t.item.element.removeEventListener("transitionend",t.handler)}),this._transitions.length=0,this.isTransitioning=!1}},{key:"_removeTransitionReference",value:function(t){var e=this._transitions.indexOf(t);e>-1&&this._transitions.splice(e,1)}},{key:"_styleImmediately",value:function(e){var i=this;if(e.length){var n=e.map(function(t){return t.item.element});t._skipTransitions(n,function(){e.forEach(function(t){t.item.applyCss(i._getStylesForTransition(t))})})}}},{key:"_movementFinished",value:function(){this.isTransitioning=!1,this._dispatchLayout()}},{key:"_dispatchLayout",value:function(){this._dispatch(t.EventType.LAYOUT)}},{key:"_addItems",value:function(t,e,i){var n=t.map(function(t){return new T["default"](t)});this._initItems(n),this._setTransitions(n),this.items=this.items.concat(n),e?(this._shrink(n),r(this._queue,function(t){t.skipTransition=!0}),this._processQueue(!1),this._addItemsToEnd(n,i)):this.filter(this.lastFilter)}},{key:"_addItemsToEnd",value:function(t,e){var i=this._filter(null,t).filtered,n=i.get();this._updateItemCount(),this._layout(n,!0),e&&this._setSequentialDelay(n),this._revealAppended(n)}},{key:"_revealAppended",value:function(t){l(function(){r(t,function(t){var e=window.jQuery(t);this._transition({$item:e,opacity:1,point:e.data("point"),scale:T["default"].Scale.VISIBLE})},this),this._whenCollectionDone(window.jQuery(t),"transitionend",function(){window.jQuery(t).css("transitionDelay","0ms"),this._movementFinished()})},this,this.revealAppendedDelay)}},{key:"filter",value:function(e,i){this.isEnabled&&((!e||e&&0===e.length)&&(e=t.ALL_ITEMS),this._filter(e),this._shrink(),this._updateItemCount(),this.sort(i))}},{key:"sort",value:function(){var t=arguments.length<=0||void 0===arguments[0]?this.lastSort:arguments[0];if(this.isEnabled){this._resetCols();var e=this._getFilteredItems();e=(0,z["default"])(e,t),this._layout(e),this._processQueue(),this._setContainerSize(),this.lastSort=t}}},{key:"update",value:function(t){this.isEnabled&&(t||this._setColumns(),this.sort())}},{key:"layout",value:function(){this.update(!0)}},{key:"add",value:function(t){var e=arguments.length<=1||void 0===arguments[1]?!1:arguments[1],i=arguments.length<=2||void 0===arguments[2]?!0:arguments[2];this._addItems((0,p["default"])(t),e,i)}},{key:"disable",value:function(){this.isEnabled=!1}},{key:"enable",value:function(t){this.isEnabled=!0,t!==!1&&this.update()}},{key:"remove",value:function(e){var i=this;e=(0,p["default"])(e);var n=e.map(function(t){return i.getItemByElement(t)}).filter(function(t){return!!t});if(e.length){var s=function o(){i.element.removeEventListener(t.EventType.LAYOUT,o),i._disposeItems(n),e.forEach(function(t){t.parentNode.removeChild(t)}),i.items=i.items.filter(function(t){return!h(n,t)}),i._updateItemCount(),i._dispatch(t.EventType.REMOVED,{collection:e}),e=null,n=null};this._toggleFilterClasses({filtered:[],concealed:n}),this._shrink(n),this.sort(),this.element.addEventListener(t.EventType.LAYOUT,s)}}},{key:"getItemByElement",value:function(t){for(var e=this.items.length-1;e>=0;e--)if(this.items[e].element===t)return this.items[e];return null}},{key:"destroy",value:function(){window.removeEventListener("resize",this._onResize),this.element.classList.remove("shuffle"),this.element.removeAttribute("style"),this._disposeItems(),this.items=null,this.$el=null,this.options.sizer=null,this.element=null,this._transitions=null,this.destroyed=!0}}],[{key:"getSize",value:function(t,e){var i=window.getComputedStyle(t,null),n=(0,C["default"])(t,"width",i),s=(0,C["default"])(t,"height",i);if(e){var o=(0,C["default"])(t,"marginLeft",i),r=(0,C["default"])(t,"marginRight",i),l=(0,C["default"])(t,"marginTop",i),a=(0,C["default"])(t,"marginBottom",i);n+=o+r,s+=l+a}return{width:n,height:s}}},{key:"_skipTransitions",value:function(t,e){var i="0ms",n=t.map(function(t){var e=t.style,n=e.transitionDuration,s=e.transitionDelay;return e.transitionDuration=i,e.transitionDelay=i,{duration:n,delay:s}});e(),t[0].offsetWidth,t.forEach(function(t,e){t.style.transitionDuration=n[e].duration,t.style.transitionDelay=n[e].delay})}}]),t}();D.ALL_ITEMS="all",D.FILTER_ATTRIBUTE_KEY="groups",D.EventType={LOADING:"shuffle:loading",DONE:"shuffle:done",LAYOUT:"shuffle:layout",REMOVED:"shuffle:removed"},D.ClassName=w["default"],D.options={group:D.ALL_ITEMS,speed:250,easing:"ease",itemSelector:"*",sizer:null,gutterWidth:0,columnWidth:0,delimeter:null,buffer:0,columnThreshold:.01,initialSort:null,throttle:E["default"],throttleTime:300,sequentialFadeDelay:150,staggerAmount:15,staggerAmountMax:250,useTransforms:!0},D.Point=S["default"],D.ShuffleItem=T["default"],D.sorter=z["default"],t.exports=D},function(t,e){try{new window.CustomEvent("test")}catch(i){var n=function(t,e){var i;return e=e||{bubbles:!1,cancelable:!1,detail:void 0},i=document.createEvent("CustomEvent"),i.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),i};n.prototype=window.Event.prototype,window.CustomEvent=n}},function(t,e){"use strict";function i(t,e){if(s)return s.call(t,e);for(var i=t.parentNode.querySelectorAll(e),n=0;n=h||h>e?(r&&(clearTimeout(r),r=null),l=u,o=t.apply(n,s),r||(n=s=null)):r||i.trailing===!1||(r=setTimeout(a,h)),o}}},function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var s=i(7),o=n(s),r=function(t,e){this.x=(0,o["default"])(t),this.y=(0,o["default"])(e)};r.equals=function(t,e){return t.x===e.x&&t.y===e.y},e["default"]=r},function(t,e){"use strict";function i(t){var e=t&&t.toString(),i=parseFloat(e);return i+1>=0?i:0}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=i},function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function s(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var o=function(){function t(t,e){for(var i=0;in||"sortFirst"===n||"sortLast"===s?-1:n>s||"sortLast"===n||"sortFirst"===s?1:0}),o?n:(i.reverse&&t.reverse(),t)):[]}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=o;var r=i(4),l=n(r),a={reverse:!1,by:null,randomize:!1,key:"element"}}])}); +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.shuffle=e():t.shuffle=e()}(this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var s=i[n]={exports:{},id:n,loaded:!1};return t[n].call(s.exports,s,s.exports,e),s.loaded=!0,s.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function s(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t){return Array.prototype.slice.call(t)}function r(t,e,i){for(var n=0,s=t.length;s>n;n++)if(e.call(i,t[n],n,t)==={})return}function l(t,e,i){return setTimeout(t.bind(e),i)}function a(t){return Math.max.apply(Math,t)}function u(t){return Math.min.apply(Math,t)}function h(t,e){return 2===arguments.length?h(t)(e):function(e){return t.indexOf(e)>-1}}function f(){}var c=function(){function t(t,e){for(var i=0;i0?t.getSize(this.items[0].element,!0).width:e,0===n&&(n=e),n+i}},{key:"_getGutterSize",value:function(t){var e;return e="function"==typeof this.options.gutterWidth?this.options.gutterWidth(t):this.useSizer?(0,C["default"])(this.options.sizer,"marginLeft"):this.options.gutterWidth}},{key:"_setColumns",value:function(){var e=arguments.length<=0||void 0===arguments[0]?t.getSize(this.element).width:arguments[0],i=this._getGutterSize(e),n=this._getColumnSize(e,i),s=(e+i)/n;Math.abs(Math.round(s)-s)l;l++)this.positions[n+l]=o;return s}},{key:"_getColumnSpan",value:function(t,e,i){var n=t/e;return Math.abs(Math.round(n)-n)s;s++)n[s]=a(this.positions.slice(s,s+t));return n}},{key:"_getShortColumn",value:function(t,e){for(var i=u(t),n=0,s=t.length;s>n;n++)if(t[n]>=i-e&&t[n]<=i+e)return n;return 0}},{key:"_shrink",value:function(){var t=this,e=arguments.length<=0||void 0===arguments[0]?this._getConcealedItems():arguments[0];r(e,function(e,i){e.scale!==T["default"].Scale.FILTERED&&(e.scale=T["default"].Scale.FILTERED,t._queue.push({item:e,opacity:0,transitionDelay:Math.min(i*t.options.staggerAmount,t.options.staggerAmountMax),callback:function(){e.element.style.visibility="hidden"}}))},this)}},{key:"_handleResize",value:function(){if(this.isEnabled&&!this.isDestroyed){var e=t.getSize(this.element).width;e!==this.containerWidth&&this.update()}}},{key:"_getStylesForTransition",value:function(t){var e=t.item,i={opacity:t.opacity,visibility:t.visibility,transitionDelay:(t.transitionDelay||0)+"ms"},n=e.point.x,s=e.point.y;return this.options.useTransforms?i.transform="translate("+n+"px, "+s+"px) scale("+e.scale+")":(i.left=n+"px",i.top=s+"px"),i}},{key:"_transition",value:function(t){var e=this,i=this,n=this._getStylesForTransition(t),s=t.callfront||f,o=t.callback||f,r=t.item;return new Promise(function(t){var l={item:r,handler:function(e){var n=e.target;n===e.currentTarget&&(n.removeEventListener("transitionend",l.handler),n.style.transitionDelay="",i._removeTransitionReference(l),o(),t())}};s(),r.applyCss(n),e.isInitialized?(r.element.addEventListener("transitionend",l.handler),e._transitions.push(l)):(o(),t())})}},{key:"_processQueue",value:function(){var t=this,e=arguments.length<=0||void 0===arguments[0]?!0:arguments[0];this.isTransitioning&&this._cancelMovement();var i=[],n=[];this._queue.forEach(function(e){t.isInitialized&&0!==t.options.speed?n.push(e):i.push(e)}),this._styleImmediately(i);var s=n.map(function(e){return t._transition(e)});n.length>0&&this.options.speed>0?(this.isTransitioning=!0,Promise.all(s).then(this._movementFinished.bind(this))):e&&l(this._dispatchLayout,this),this._queue.length=0}},{key:"_cancelMovement",value:function(){r(this._transitions,function(t){t.item.element.removeEventListener("transitionend",t.handler)}),this._transitions.length=0,this.isTransitioning=!1}},{key:"_removeTransitionReference",value:function(t){var e=this._transitions.indexOf(t);e>-1&&this._transitions.splice(e,1)}},{key:"_styleImmediately",value:function(e){var i=this;if(e.length){var n=e.map(function(t){return t.item.element});t._skipTransitions(n,function(){e.forEach(function(t){t.item.applyCss(i._getStylesForTransition(t))})})}}},{key:"_movementFinished",value:function(){this.isTransitioning=!1,this._dispatchLayout()}},{key:"_dispatchLayout",value:function(){this._dispatch(t.EventType.LAYOUT)}},{key:"_addItems",value:function(t,e,i){var n=t.map(function(t){return new T["default"](t)});this._initItems(n),this._setTransitions(n),this.items=this.items.concat(n),e?(this._shrink(n),r(this._queue,function(t){t.skipTransition=!0}),this._processQueue(!1),this._addItemsToEnd(n,i)):this.filter(this.lastFilter)}},{key:"_addItemsToEnd",value:function(t,e){var i=this._filter(null,t).filtered,n=i.get();this._updateItemCount(),this._layout(n,!0),e&&this._setSequentialDelay(n),this._revealAppended(n)}},{key:"_revealAppended",value:function(t){l(function(){r(t,function(t){var e=window.jQuery(t);this._transition({$item:e,opacity:1,point:e.data("point"),scale:T["default"].Scale.VISIBLE})},this),this._whenCollectionDone(window.jQuery(t),"transitionend",function(){window.jQuery(t).css("transitionDelay","0ms"),this._movementFinished()})},this,this.revealAppendedDelay)}},{key:"filter",value:function(e,i){this.isEnabled&&((!e||e&&0===e.length)&&(e=t.ALL_ITEMS),this._filter(e),this._shrink(),this._updateItemCount(),this.sort(i))}},{key:"sort",value:function(){var t=arguments.length<=0||void 0===arguments[0]?this.lastSort:arguments[0];if(this.isEnabled){this._resetCols();var e=this._getFilteredItems();e=(0,z["default"])(e,t),this._layout(e),this._processQueue(),this._setContainerSize(),this.lastSort=t}}},{key:"update",value:function(t){this.isEnabled&&(t||this._setColumns(),this.sort())}},{key:"layout",value:function(){this.update(!0)}},{key:"add",value:function(t){var e=arguments.length<=1||void 0===arguments[1]?!1:arguments[1],i=arguments.length<=2||void 0===arguments[2]?!0:arguments[2];this._addItems((0,p["default"])(t),e,i)}},{key:"disable",value:function(){this.isEnabled=!1}},{key:"enable",value:function(t){this.isEnabled=!0,t!==!1&&this.update()}},{key:"remove",value:function(e){var i=this;e=(0,p["default"])(e);var n=e.map(function(t){return i.getItemByElement(t)}).filter(function(t){return!!t});if(e.length){var s=function o(){i.element.removeEventListener(t.EventType.LAYOUT,o),i._disposeItems(n),e.forEach(function(t){t.parentNode.removeChild(t)}),i.items=i.items.filter(function(t){return!h(n,t)}),i._updateItemCount(),i._dispatch(t.EventType.REMOVED,{collection:e}),e=null,n=null};this._toggleFilterClasses({filtered:[],concealed:n}),this._shrink(n),this.sort(),this.element.addEventListener(t.EventType.LAYOUT,s)}}},{key:"getItemByElement",value:function(t){for(var e=this.items.length-1;e>=0;e--)if(this.items[e].element===t)return this.items[e];return null}},{key:"destroy",value:function(){window.removeEventListener("resize",this._onResize),this.element.classList.remove("shuffle"),this.element.removeAttribute("style"),this._disposeItems(),this.items=null,this.$el=null,this.options.sizer=null,this.element=null,this._transitions=null,this.destroyed=!0}}],[{key:"getSize",value:function(t,e){var i=window.getComputedStyle(t,null),n=(0,C["default"])(t,"width",i),s=(0,C["default"])(t,"height",i);if(e){var o=(0,C["default"])(t,"marginLeft",i),r=(0,C["default"])(t,"marginRight",i),l=(0,C["default"])(t,"marginTop",i),a=(0,C["default"])(t,"marginBottom",i);n+=o+r,s+=l+a}return{width:n,height:s}}},{key:"_skipTransitions",value:function(t,e){var i="0ms",n=t.map(function(t){var e=t.style,n=e.transitionDuration,s=e.transitionDelay;return e.transitionDuration=i,e.transitionDelay=i,{duration:n,delay:s}});e(),t[0].offsetWidth,t.forEach(function(t,e){t.style.transitionDuration=n[e].duration,t.style.transitionDelay=n[e].delay})}}]),t}();D.ALL_ITEMS="all",D.FILTER_ATTRIBUTE_KEY="groups",D.EventType={LOADING:"shuffle:loading",DONE:"shuffle:done",LAYOUT:"shuffle:layout",REMOVED:"shuffle:removed"},D.ClassName=w["default"],D.options={group:D.ALL_ITEMS,speed:250,easing:"ease",itemSelector:"*",sizer:null,gutterWidth:0,columnWidth:0,delimeter:null,buffer:0,columnThreshold:.01,initialSort:null,throttle:E["default"],throttleTime:300,sequentialFadeDelay:150,staggerAmount:15,staggerAmountMax:250,useTransforms:!0},D.Point=S["default"],D.ShuffleItem=T["default"],D.sorter=z["default"],t.exports=D},function(t,e){try{new window.CustomEvent("test")}catch(i){var n=function(t,e){var i;return e=e||{bubbles:!1,cancelable:!1,detail:void 0},i=document.createEvent("CustomEvent"),i.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),i};n.prototype=window.Event.prototype,window.CustomEvent=n}},function(t,e){"use strict";function i(t,e){if(s)return s.call(t,e);for(var i=t.parentNode.querySelectorAll(e),n=0;n=h||h>e?(r&&(clearTimeout(r),r=null),l=u,o=t.apply(n,s),r||(n=s=null)):r||i.trailing===!1||(r=setTimeout(a,h)),o}}},function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var s=i(7),o=n(s),r=function(t,e){this.x=(0,o["default"])(t),this.y=(0,o["default"])(e)};r.equals=function(t,e){return t.x===e.x&&t.y===e.y},e["default"]=r},function(t,e){"use strict";function i(t){return parseFloat(t)||0}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=i},function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function s(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var o=function(){function t(t,e){for(var i=0;in||"sortFirst"===n||"sortLast"===s?-1:n>s||"sortLast"===n||"sortFirst"===s?1:0}),o?n:(i.reverse&&t.reverse(),t)):[]}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=o;var r=i(4),l=n(r),a={reverse:!1,by:null,randomize:!1,key:"element"}}])}); //# sourceMappingURL=shuffle.min.js.map \ No newline at end of file diff --git a/index.html b/index.html index 8298b9b..b381074 100644 --- a/index.html +++ b/index.html @@ -75,7 +75,7 @@ prism: true {% assign item = item %} {% include picture-item.html %} {% endfor %} -
+
diff --git a/js/demos/animate-in.js b/js/demos/animate-in.js index 9612214..5318937 100644 --- a/js/demos/animate-in.js +++ b/js/demos/animate-in.js @@ -53,24 +53,6 @@ Demo.prototype.addTransitionToItems = function () { } }; -/** - * 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(); }); diff --git a/js/demos/homepage.js b/js/demos/homepage.js index b370d83..b5624f5 100644 --- a/js/demos/homepage.js +++ b/js/demos/homepage.js @@ -18,7 +18,6 @@ var Demo = function (element) { this.addFilterButtons(); this.addSorting(); this.addSearchFilter(); - this.listenForImageLoads(); this.mode = 'exclusive'; }; @@ -179,23 +178,6 @@ Demo.prototype._handleSearchKeyup = function (evt) { }); }; -/** - * 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(); - }.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(document.getElementById('grid')); }); diff --git a/js/demos/images-broken.js b/js/demos/images-broken.js deleted file mode 100644 index fdcb1e7..0000000 --- a/js/demos/images-broken.js +++ /dev/null @@ -1,22 +0,0 @@ - -var ImageDemo = (function( $ ) { - - var $shuffle = $('.shuffle--images'), - sizer = document.getElementById('js-sizer'), - - init = function() { - - $shuffle.shuffle({ - sizer: sizer, - itemSelector: '.js-item' - }); - }; - - return { - init: init - }; -}( jQuery )); - -$(document).ready(function() { - ImageDemo.init(); -}); diff --git a/js/page.js b/js/page.js index f9445fb..1f953cc 100644 --- a/js/page.js +++ b/js/page.js @@ -85,6 +85,18 @@ Modules.NavTray = (function () { return NavTray; }()); +Modules.Support = (function () { + var objectFit = document.createElement('div').style.objectFit === ''; + + if (!objectFit) { + document.documentElement.classList.add('no-objectfit'); + } + + return { + objectFit: objectFit, + }; +}); + Modules.Sprite = (function () { var Sprite = function (context, img, size) { this.ctx = context; diff --git a/package.json b/package.json index 21d2167..e55cde4 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,9 @@ ], "main": "dist/shuffle.js", "scripts": { + "compile": "gulp scripts", + "css": "gulp css", + "watch": "gulp watch", "test": "jest" }, "jest": { diff --git a/src/get-number.js b/src/get-number.js index d1831c1..4c0006d 100644 --- a/src/get-number.js +++ b/src/get-number.js @@ -6,11 +6,5 @@ * @return {number} `value` or zero if `value` isn't numeric. */ export default function getNumber(value) { - let str = value && value.toString(); - let val = parseFloat(str); - if (val + 1 >= 0) { - return val; - } - - return 0; + return parseFloat(value) || 0; }