From d03f2d7fc82f78e89821b7d301ee59f5c301789f Mon Sep 17 00:00:00 2001
From: Dominic Masters <dominic@domsplace.com>
Date: Sun, 28 Oct 2018 18:52:38 +1100
Subject: [PATCH] Removed test props, fixed image scaling issue.

---
 public/objects/image/Image.jsx                | 59 +++++++++++--------
 public/pages/contact/ContactPage.jsx          |  2 +-
 public/pages/home/sections/BannerSection.jsx  |  2 +-
 .../home/sections/ExistingWorkSection.jsx     |  1 -
 4 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/public/objects/image/Image.jsx b/public/objects/image/Image.jsx
index c310cad..3f874b7 100644
--- a/public/objects/image/Image.jsx
+++ b/public/objects/image/Image.jsx
@@ -24,7 +24,7 @@
 import React from 'react';
 import LoadableImage from './LoadableImage';
 
-const DPI_RATIOS = 4;
+const DPI_RATIOS = [1,2,4];
 
 export default (props) => {
   let newProps = {...props};
@@ -66,6 +66,11 @@ export default (props) => {
   //Image
   sources = sources || [];
 
+  //Sort the sources by their size
+  sources.sort((l,r) => {
+    return (l.size||l.width) - (r.size||r.width);
+  });
+
   let sourcesByWidth = {};
   let sourceElements = [];
 
@@ -78,51 +83,57 @@ export default (props) => {
   for(let i = 0; i < sources.length; i++) {
     let source = sources[i];
     let width = source.size || source.width;
-    let isLast = (i+1) === sources.length;
 
-    for(let scale = 1; scale <= DPI_RATIOS; scale++) {//4 = max scales
-      let scaledWidth = Math.round(width / scale);
+    //Thanks to maxWidth prop we need to check if this iteration is the last.
+    let maxWidthBreak = false;
+    if(maxWidth && i > 0) {
+      if(width >= maxWidth) maxWidthBreak = true;
+    }
+
+
+    DPI_RATIOS.forEach(ratio => {
+      let scaledWidth = Math.round(width / ratio);
+
+      //Don't scale less than the smallest image (i.e. 200px@1x shouldn't be 50@4x)
+      if(scaledWidth < (sources[0].size||sources[0].width)) return false;
+
       let o = {...source};
-      o.scale = scale;//Inject scale (DPI ratio)
-      o.isLast = isLast;//Is Last used for min-width rather than max-width
-
-      let widthKey = `${scaledWidth}`;
+      o.scale = ratio;//Inject scale (DPI ratio)
 
       //Create an array for this screen width
+      let widthKey = `${scaledWidth}`;
       sourcesByWidth[widthKey] = sourcesByWidth[widthKey] || [];
       sourcesByWidth[widthKey].push(o);//Add this source
-    }
+    });
+
+    //Was this the last iteration?
+    if(maxWidthBreak) break;
   }
 
-  //Sort by size in descending order
+  //Sort by size in ascending order
   let keys = Object.keys(sourcesByWidth);
   keys.sort((l, r) => {
     return parseInt(l) - parseInt(r);
   });
 
-  let breakNext = false;
+  //let breakNext = false;
   for(let i = 0; i < keys.length; i++) {
-    if(breakNext) break;
     let k = keys[i];//The pixel size
 
     let ss = sourcesByWidth[k];//Sources at this pixel resolution (array of sources)
-    let mediaQuery = `(max-width:${k}px)`;//Media query
+    if(!ss.length) continue;
+
+    let mediaQuery;//Media query
     let sss = [];
 
-    let isNextBreak = false;
-    if(maxWidth && (i+1 < keys.length)) {
-      if(keys[i+1] > parseInt(maxWidth)) isNextBreak = true;
-    }
-    if(isNextBreak) {
-      breakNext = true;
+    //Try and make this media query be max width by the next key
+    if(i+1 < keys.length) {
+      let nextKey = keys[i+1];
+      mediaQuery = `(max-width:${nextKey}px)`;
+    } else {
       mediaQuery = `(min-width:${k}px)`;
     }
 
-    if(ss.length && ss[0].isLast) {
-      let prev = i > 0 ? keys[i-1] : 0;
-      mediaQuery = `(min-width:${prev}px)`;
-    }
-
     for(let x = 0; x < ss.length; x++) {
       let scale = ss[x];
       let source = scale.src || scale.path;
diff --git a/public/pages/contact/ContactPage.jsx b/public/pages/contact/ContactPage.jsx
index 36ab1e2..57138ac 100644
--- a/public/pages/contact/ContactPage.jsx
+++ b/public/pages/contact/ContactPage.jsx
@@ -109,7 +109,7 @@ class ContactPage extends React.Component {
               onError={ this.onError.bind(this) }
               manager={ this.manager }
             >
-              <FormGroup test="First Group">
+              <FormGroup>
                 <Label htmlFor="name">
                   { Language.get("pages.contact.name.label") }
                 </Label>
diff --git a/public/pages/home/sections/BannerSection.jsx b/public/pages/home/sections/BannerSection.jsx
index e9e2e92..49f61c2 100644
--- a/public/pages/home/sections/BannerSection.jsx
+++ b/public/pages/home/sections/BannerSection.jsx
@@ -42,7 +42,7 @@ export default (props) => {
     >
       <PageBoundary full>
         <FloatingContentBox position="middle center" size="large" className="u-text-center">
-          <ElementScrollFader from="bottom" test="yes">
+          <ElementScrollFader from="bottom" >
             <Title>{ Language.get("pages.home.banner.title") }</Title>
             <Subtitle className="u-responsive--small-up">{ Language.get("pages.home.banner.subtitle") }</Subtitle>
           </ElementScrollFader>
diff --git a/public/pages/home/sections/ExistingWorkSection.jsx b/public/pages/home/sections/ExistingWorkSection.jsx
index 56b2839..2b371d8 100644
--- a/public/pages/home/sections/ExistingWorkSection.jsx
+++ b/public/pages/home/sections/ExistingWorkSection.jsx
@@ -140,7 +140,6 @@ export default props => {
           src={ require('@assets/images/work-showcase/kopalife.png') }
           title={ Language.get("pages.home.work.kopa.heading") }
           description={ Language.get("pages.home.work.kopa.description") }
-          test="true"
         />
 
         {/* SMAI */}