diff options
| -rw-r--r-- | CHANGELOG.md | 2 | ||||
| -rw-r--r-- | templates/web/base/common_header_tags.html | 3 | ||||
| -rw-r--r-- | templates/web/fixmystreet.com/footer_extra.html | 18 | ||||
| -rw-r--r-- | templates/web/fixmystreet.com/footer_extra_js.html | 3 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet.com/base.scss | 31 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/header.js | 3 | ||||
| -rw-r--r-- | web/js/lazyload.js | 29 |
7 files changed, 72 insertions, 17 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index f9b5fb971..271728446 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ - Fix issue with red bars on bar graph of many categories. - Prefetch translations in /reports list of bodies. - Ignore deleted/area-less bodies in dashboard list. + - UK: + - Lazy load images in the footer. * v2.3 (18th December 2017) - New features: diff --git a/templates/web/base/common_header_tags.html b/templates/web/base/common_header_tags.html index 749a4f740..541bb1a56 100644 --- a/templates/web/base/common_header_tags.html +++ b/templates/web/base/common_header_tags.html @@ -14,7 +14,8 @@ <script nonce="[% csp_nonce %]"> window.Modernizr=function(e,t,n){function r(e){p.cssText=e}function o(e,t){return typeof e===t}var a,i,c,l="2.8.3",s={},u=t.documentElement,d="modernizr",f=t.createElement(d),p=f.style,m=({}.toString,{}),h=[],y=h.slice,v=function(e,n,r,o){var a,i,c,l,s=t.createElement("div"),f=t.body,p=f||t.createElement("body");if(parseInt(r,10))for(;r--;)c=t.createElement("div"),c.id=o?o[r]:d+(r+1),s.appendChild(c);return a=["­",'<style id="s',d,'">',e,"</style>"].join(""),s.id=d,(f?s:p).innerHTML+=a,p.appendChild(s),f||(p.style.background="",p.style.overflow="hidden",l=u.style.overflow,u.style.overflow="hidden",u.appendChild(p)),i=n(s,e),f?s.parentNode.removeChild(s):(p.parentNode.removeChild(p),u.style.overflow=l),!!i},g=function(t){var n=e.matchMedia||e.msMatchMedia;if(n)return n(t)&&n(t).matches||!1;var r;return v("@media "+t+" { #"+d+" { position: absolute; } }",function(t){r="absolute"==(e.getComputedStyle?getComputedStyle(t,null):t.currentStyle).position}),r},b={}.hasOwnProperty;c=o(b,"undefined")||o(b.call,"undefined")?function(e,t){return t in e&&o(e.constructor.prototype[t],"undefined")}:function(e,t){return b.call(e,t)};for(var E in m)c(m,E)&&(i=E.toLowerCase(),s[i]=m[E](),h.push((s[i]?"":"no-")+i));return r(""),f=a=null,s._version=l,s.mq=g,s.testStyles=v,s}(this,this.document); var fixmystreet=fixmystreet||{}; - (function(b){var a=b.documentElement;a.className=a.className.replace(/\bno-js\b/,"js");var c=-1<a.className.indexOf("iel8"),c=Modernizr.mq("(min-width: 48em)")||c?"desktop":"mobile";b=b.getElementById("js-meta-data");fixmystreet.page=b.getAttribute("data-page");fixmystreet.cobrand=b.getAttribute("data-cobrand");"mobile"==c&&(a.className+=" mobile","around"==fixmystreet.page&&(a.className+=" map-fullscreen only-map map-reporting"))})(document); + (function(b){var a=b.documentElement;a.className=a.className.replace(/\bno-js\b/,"js");var c=-1<a.className.indexOf("iel8");c=Modernizr.mq("(min-width: 48em)")||c?"desktop":"mobile";b=b.getElementById("js-meta-data");"IntersectionObserver"in window&&(a.className+=" lazyload");fixmystreet.page=b.getAttribute("data-page");fixmystreet.cobrand=b.getAttribute("data-cobrand");"mobile"==c&&(a.className+=" mobile","around"==fixmystreet.page&&(a.className+=" map-fullscreen only-map map-reporting"))})(document); + </script> [% IF robots %] diff --git a/templates/web/fixmystreet.com/footer_extra.html b/templates/web/fixmystreet.com/footer_extra.html index 819943f67..6edf23b9f 100644 --- a/templates/web/fixmystreet.com/footer_extra.html +++ b/templates/web/fixmystreet.com/footer_extra.html @@ -9,11 +9,11 @@ </div> <div class="fms-app-badges"> - <a href="https://itunes.apple.com/gb/app/fixmystreet/id297456545"> - <img alt="FixMyStreet app on the App Store" src="[% base %]/cobrands/fixmystreet/images/itunes_store_logo.png" srcset="[% base %]/cobrands/fixmystreet/images/itunes_store_logo.png 1x, [% base %]/cobrands/fixmystreet/images/itunes_store_logo@2.png 2x" /> + <a class="js-lazyload fms-app-badge fms-app-badge--ios" href="https://itunes.apple.com/gb/app/fixmystreet/id297456545"> + FixMyStreet app on the App Store </a> - <a href="https://play.google.com/store/apps/details?id=org.mysociety.FixMyStreet"> - <img alt="FixMyStreet Android app on Google Play" src="[% base %]/cobrands/fixmystreet/images/google_play_logo.png" srcset="[% base %]/cobrands/fixmystreet/images/google_play_logo.png 1x, [% base %]/cobrands/fixmystreet/images/google_play_logo@2.png 2x" /> + <a class="js-lazyload fms-app-badge fms-app-badge--android" href="https://play.google.com/store/apps/details?id=org.mysociety.FixMyStreet"> + FixMyStreet Android app on Google Play </a> </div> </div> @@ -59,11 +59,11 @@ <div class="mysoc-footer__orgs"> <p class="mysoc-footer__org"> Built by - <a href="https://www.mysociety.org?utm_source=fixmystreet.com&utm_content=footer+logo&utm_medium=link&utm_campaign=mysoc_footer" class="mysoc-footer__org__logo mysoc-footer__org__logo--mysociety">mySociety</a> + <a href="https://www.mysociety.org?utm_source=fixmystreet.com&utm_content=footer+logo&utm_medium=link&utm_campaign=mysoc_footer" class="js-lazyload mysoc-footer__org__logo mysoc-footer__org__logo--mysociety">mySociety</a> </p> <p class="mysoc-footer__org"> Powered by - <a href="http://fixmystreet.org" class="mysoc-footer__org__logo mysoc-footer__org__logo--fms-platform">FixMyStreet Platform</a> + <a href="http://fixmystreet.org" class="js-lazyload mysoc-footer__org__logo mysoc-footer__org__logo--fms-platform">FixMyStreet Platform</a> </p> </div> </div> @@ -76,9 +76,9 @@ <div class="col-sm-2"> <ul class="mysoc-footer__badges"> - <li role="presentation"><a href="https://github.com/mysociety/fixmystreet" class="mysoc-footer__badge mysoc-footer__badge--github">Github</a></li> - <li role="presentation"><a href="https://twitter.com/fixmystreet/" class="mysoc-footer__badge mysoc-footer__badge--twitter">Twitter</a></li> - <li role="presentation"><a href="https://www.facebook.com/FixMyStreet" class="mysoc-footer__badge mysoc-footer__badge--facebook">Facebook</a></li> + <li role="presentation"><a href="https://github.com/mysociety/fixmystreet" class="js-lazyload mysoc-footer__badge mysoc-footer__badge--github">Github</a></li> + <li role="presentation"><a href="https://twitter.com/fixmystreet/" class="js-lazyload mysoc-footer__badge mysoc-footer__badge--twitter">Twitter</a></li> + <li role="presentation"><a href="https://www.facebook.com/FixMyStreet" class="js-lazyload mysoc-footer__badge mysoc-footer__badge--facebook">Facebook</a></li> </ul> </div> diff --git a/templates/web/fixmystreet.com/footer_extra_js.html b/templates/web/fixmystreet.com/footer_extra_js.html index cb1b78743..0e0300af7 100644 --- a/templates/web/fixmystreet.com/footer_extra_js.html +++ b/templates/web/fixmystreet.com/footer_extra_js.html @@ -1,4 +1,7 @@ [% +scripts.push( + version('/js/lazyload.js'), +); IF bodyclass.match('mappage'); scripts.push( version('/vendor/OpenLayers.Projection.OrdnanceSurvey.js'), diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss index d8f8f123e..2ae67d5a6 100644 --- a/web/cobrands/fixmystreet.com/base.scss +++ b/web/cobrands/fixmystreet.com/base.scss @@ -199,6 +199,10 @@ $grid-breakpoint-sm: $mysoc-footer-breakpoint-sm; @import "mysoc_footer"; +html.lazyload .js-lazyload { + background-image: none; +} + .mysoc-footer { @media print { @@ -261,14 +265,27 @@ $grid-breakpoint-sm: $mysoc-footer-breakpoint-sm; .fms-app-badges { margin: 1em 0; - - a { - text-decoration: none; +} +.fms-app-badge { + display: inline-block; + text-decoration: none; + width: 135px; + height: 0; + padding-top: 40px; + background-size: 135px 40px; + overflow: hidden; + margin-right: 0.5em; +} +.fms-app-badge--ios { + background-image: url('/cobrands/fixmystreet/images/itunes_store_logo.png'); + @media ($high-dpi-screen) { + background-image: url('/cobrands/fixmystreet/images/itunes_store_logo@2.png'); } - - img { - border: none; - margin-right: 0.5em; +} +.fms-app-badge--android { + background-image: url('/cobrands/fixmystreet/images/google_play_logo.png'); + @media ($high-dpi-screen) { + background-image: url('/cobrands/fixmystreet/images/google_play_logo@2.png'); } } diff --git a/web/cobrands/fixmystreet/header.js b/web/cobrands/fixmystreet/header.js index e4b0a9a91..103922b08 100644 --- a/web/cobrands/fixmystreet/header.js +++ b/web/cobrands/fixmystreet/header.js @@ -8,6 +8,9 @@ var fixmystreet = fixmystreet || {}; var iel8 = E.className.indexOf('iel8') > -1; var type = Modernizr.mq('(min-width: 48em)') || iel8 ? 'desktop' : 'mobile'; var meta = D.getElementById('js-meta-data'); + if ('IntersectionObserver' in window) { + E.className += ' lazyload'; + } fixmystreet.page = meta.getAttribute('data-page'); fixmystreet.cobrand = meta.getAttribute('data-cobrand'); if (type == 'mobile') { diff --git a/web/js/lazyload.js b/web/js/lazyload.js new file mode 100644 index 000000000..50cc8c46e --- /dev/null +++ b/web/js/lazyload.js @@ -0,0 +1,29 @@ +(function(){ + if (!('IntersectionObserver' in window)) { + return; + } + + // Now we're here, we can assume quite modern JavaScript! + + const observer = new IntersectionObserver(onIntersection, { + rootMargin: "50px 0px" + }); + + const images = document.querySelectorAll(".js-lazyload"); + images.forEach(image => { + observer.observe(image); + }); + + function onIntersection(entries, observer) { + entries.forEach(entry => { + if (entry.intersectionRatio > 0) { + // Loading the image is the only thing we care about, so can + // stop observing. + observer.unobserve(entry.target); + // Removing this class (which is suppressing background-image) + // will trigger the image load + entry.target.classList.remove('js-lazyload'); + } + }); + } +})(); |