Switch opencollective image listing and avatars fadein

mochajs · Dec 22, 2017 · a125438 · a125438
1 parent 1f11c77
commit a125438
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 31 deletions.
diff --git a/docs/_includes/backers.md b/docs/_includes/backers.md
@@ -2,5 +2,5 @@
 
 Find Mocha helpful? Become a [backer](https://opencollective.com/mochajs#support) and support Mocha with a monthly donation. 
 
-{: id="_backers" }
+{: id="_backers" class="image-list" }
 {% for i in (0..29) %}[![](//opencollective.com/mochajs/backer/{{ i }}/avatar.jpg)](https://opencollective.com/mochajs/backer/{{ i }}/website){: target="_blank" rel="noopener"}{% endfor %}
diff --git a/docs/_includes/head.html b/docs/_includes/head.html
@@ -9,5 +9,4 @@
  <!--[if lt IE 9]>
  <script src="js/html5shiv.min.js"></script>
  <![endif]-->
- <script src="js/avatars.js"></script>
 </head>
diff --git a/docs/_includes/sponsors.md b/docs/_includes/sponsors.md
@@ -2,5 +2,7 @@
 
 Use Mocha at Work? Ask your manager or marketing team if they'd help [support](https://opencollective.com/mochajs#support) our project. Your company's logo will also be displayed on [npmjs.com](http://npmjs.com/package/mocha) and our [GitHub repository](https://github.com/mochajs/mocha#sponsors).
 
-{: id="_sponsors" }
-{% for i in (0..29) %}[![](//opencollective.com/mochajs/sponsor/{{ i }}/avatar.jpg){: onload="window.avatars.sponsorLoaded()" }](https://opencollective.com/mochajs/sponsor/{{ i }}/website){: target="_blank"} {% endfor %}
+{: class="image-list faded-images" }
+{% for i in (0..15) %}[![](//opencollective.com/mochajs/sponsor/{{ i }}/avatar.jpg)](https://opencollective.com/mochajs/sponsor/{{ i }}/website){: target="_blank"} {% endfor %}
+
+<script src="js/avatars.js"></script>
diff --git a/docs/css/style.css b/docs/css/style.css
@@ -57,37 +57,32 @@ header {
  font-style: normal
 }
 
-#_backers {
- display: flex;
- flex-wrap: wrap;
+.image-list {
+ overflow: hidden;
 }
 
-#_backers a {
- margin: 3px;
+.image-list a {
+ float: left;
+ margin: 6px;
 }
 
-#_backers a img {
+.image-list a img {
  display: block;
- width: 64px;
  height: 64px;
-
- margin: 0;
- box-shadow: none;
-
- background: url(/images/backer-background.svg?inline) center center no-repeat;
 }
 
-#_sponsors a {
+.faded-images img {
  opacity: 0;
  transition: opacity .3s;
 }
 
-#_sponsors a img {
- max-height: 64px;
+.faded-images.is-loaded img {
+ opacity: 1;
 }
 
-#_sponsors.onload a {
- opacity: 1;
+#_backers a img {
+ width: 64px;
+ background: url(/images/backer-background.svg?inline) center center no-repeat;
 }
 
 h2 {

diff --git a/docs/js/avatars.js b/docs/js/avatars.js
@@ -1,15 +1,23 @@
 (function () {
  'use strict';
- // dumb thing that helps with animation of avatars
- var avatars = window.avatars = function (type) {
- return function avatarLoaded () {
- avatars[type] = typeof avatars[type] === 'number' ? avatars[type] + 1 : 1;
- if (avatars[type] === 30) {
- document.getElementById(type).classList.add('onload');
+
+ var imageLists = document.querySelectorAll('.image-list');
+
+ Array.prototype.forEach.call(imageLists, function (imageList) {
+ var images = imageList.querySelectorAll('img');
+ var counter = images.length;
+
+ function onloadHandler() {
+ counter -= 1;
+
+ if (counter === 0) {
+ imageList.classList.add('is-loaded');
  }
- };
- };
+ }
+
+ for (var i = 0; i < images.length; i += 1) {
+ images[i].onload = onloadHandler;
+ }
+ });
 
- avatars.backerLoaded = avatars('_backers');
- avatars.sponsorLoaded = avatars('_sponsors');
 }());