Clean up classes and lint JS.

twbs · Jun 8, 2019 · e434915 · e434915
1 parent 66bcfee
commit e434915
Showing 1 changed file with 100 additions and 89 deletions.
diff --git a/site/content/docs/4.3/thanks.md b/site/content/docs/4.3/thanks.md
@@ -38,103 +38,114 @@ Through donations and sponsorships we are able to maintain & improve Bootstrap.
 </div>
 
 <script>
-  function displaySponsors(sponsorList) {
-    var sponsorListEl = document.getElementById('sponsorList')
-    var output = []
-
-    sponsorList.forEach(function (sponsor) {
-      output.push(
-        '<div class="m-2 position-relative">',
-        ' <div style="width:100px; height: 100px;" class="img-thumbnail d-flex align-items-center justify-content-center overflow-hidden">',
-        '   <div class="w-100">',
-        '    <img src="' + sponsor.avatar + '" alt="' + sponsor.name + '" class="mh-100 mw-100">',
-        '   </div>',
-        ' </div>',
-        ' <h3 class="h6 pt-2">',
-      )
-
-      if (sponsor.website) {
-        output.push('<a href="' + sponsor.website + '" class="stretched-link text-reset">' + sponsor.name + '</a>')
-      } else {
-        output.push(sponsor.name)
-      }
-
-      output.push(
-        ' </h3>',
-        '</div>'
-      )
-    })
-
-    sponsorListEl.innerHTML = output.join('')
-  }
-
-  function displayBackers(backerList) {
-    var backerListEl = document.getElementById('backerList')
-    var output = []
-
-    backerList.forEach(function (backer) {
-      output.push(
-        '<div class="m-1 position-relative">',
-        ' <div style="width:50px; height: 50px;" class="img-thumbnail d-flex align-items-center justify-content-center overflow-hidden">'
-      )
-
-      if (backer.website) {
+  (function () {
+    'use strict'
+
+    function displaySponsors(sponsorList) {
+      var sponsorListEl = document.getElementById('sponsorList')
+      var output = []
+
+      sponsorList.forEach(function (sponsor) {
         output.push(
-          '<a href="' + backer.website + '" class="stretched-link text-reset" title="' + backer.name + '">'
+          '<div class="m-2 position-relative">',
+          ' <div class="img-thumbnail mx-auto d-flex align-items-center justify-content-center overflow-hidden" style="width:100px; height: 100px;">',
+          '  <img class="img-fluid d-block" src="' + sponsor.avatar + '" alt="' + sponsor.name + '">',
+          ' </div>',
+          ' <h3 class="h6 pt-2">',
         )
-      }
-
-      output.push('<img src="' + backer.avatar + '" alt="' + backer.name + '" class="mh-100 mw-100">')
-
-      if (backer.website) {
-        output.push('</a>')
-      }
-
-      output.push(
-        ' </div>',
-        '</div>',
-      )
-    })
-
-    backerListEl.innerHTML = output.join('')
-  }
-
-  function requestOC(cb) {
-    var ocURL = 'https://opencollective.com/api/groups/bootstrap/backers'
-    var xhr = new XMLHttpRequest()
-
-    xhr.open('GET', ocURL, true)
-    xhr.onload = function () {
-      if (xhr.readyState !== 4) {
-        return
-      }
-
-      if (xhr.status === 200) {
-        cb(JSON.parse(xhr.responseText), null)
-      } else {
-        cb(null, xhr.statusText)
-      }
+
+        if (sponsor.website) {
+          output.push('<a href="' + sponsor.website + '" class="stretched-link text-reset">' + sponsor.name + '</a>')
+        } else {
+          output.push(sponsor.name)
+        }
+
+        output.push(
+          ' </h3>',
+          '</div>'
+        )
+      })
+
+      sponsorListEl.innerHTML = output.join('')
     }
-    xhr.send()
-  }
 
-  (function () {
-    requestOC(function (allBackerList, error) {
-      var backerList = allBackerList.filter(function (backer) { return backer.tier === 'backer' })
-      var sponsorList = allBackerList.filter(function (backer) { return backer.tier === 'sponsor' })
+    function displayBackers(backerList) {
+      var backerListEl = document.getElementById('backerList')
+      var output = []
+
+      backerList.forEach(function (backer) {
+        output.push(
+          '<div class="m-1 position-relative">',
+          ' <div class="img-thumbnail d-flex align-items-center justify-content-center overflow-hidden" style="width:50px; height: 50px;">'
+        )
+
+        if (backer.website) {
+          output.push(
+            '<a href="' + backer.website + '" class="stretched-link text-reset" title="' + backer.name + '">'
+          )
+        }
+
+        output.push('<img src="' + backer.avatar + '" alt="' + backer.name + '" class=""img-fluid d-block>')
 
-      // Sort by total amount donated
-      sponsorList.sort(function (sponsor1, sponsor2) { return sponsor2.directDonations - sponsor1.directDonations })
-      sponsorList = sponsorList.slice(0, 10)
+        if (backer.website) {
+          output.push('</a>')
+        }
 
-      displaySponsors(sponsorList)
+        output.push(
+          ' </div>',
+          '</div>',
+        )
+      })
 
-      // Sort by total amount donated
-      backerList.sort(function (backer1, backer2) { return backer2.directDonations - backer1.directDonations })
-      backerList = backerList.slice(0, 10)
+      backerListEl.innerHTML = output.join('')
+    }
+
+    function requestOC(cb) {
+      var ocURL = 'https://opencollective.com/api/groups/bootstrap/backers'
+      var xhr = new XMLHttpRequest()
+
+      xhr.open('GET', ocURL, true)
+      xhr.addEventListener('load', function () {
+        if (xhr.readyState !== 4) {
+          return
+        }
+
+        if (xhr.status === 200) {
+          cb(JSON.parse(xhr.responseText), null)
+        } else {
+          cb(null, xhr.statusText)
+        }
+      })
+
+      xhr.send()
+    }
 
-      displayBackers(backerList)
-    })
+    (function () {
+      requestOC(function (allBackerList) {
+        var backerList = allBackerList.filter(function (backer) {
+          return backer.tier === 'backer'
+        })
+        var sponsorList = allBackerList.filter(function (backer) {
+          return backer.tier === 'sponsor'
+        })
+
+        // Sort by total amount donated
+        sponsorList.sort(function (sponsor1, sponsor2) {
+          return sponsor2.directDonations - sponsor1.directDonations
+        })
+        sponsorList = sponsorList.slice(0, 10)
+
+        displaySponsors(sponsorList)
+
+        // Sort by total amount donated
+        backerList.sort(function (backer1, backer2) {
+          return backer2.directDonations - backer1.directDonations
+        })
+        backerList = backerList.slice(0, 10)
+
+        displayBackers(backerList)
+      })
+    })()
   })()
 </script>
 {{< /services.inline >}}