Merge pull request #49 from cloudinary/issue-23

fix #23 responsive feature

Author: mayashavin

src/components/CldImage/CldImage.vue

@@ -1,13 +1,19 @@
 <template>
-  <div class="cld-image">
-    <img v-bind="imageAttrs" :style="style"/>
+  <div class="cld-image" :style="style">
+    <img v-bind="imageAttrs" :style="style" />
     <slot></slot>
   </div>
 </template>
 <script>
 import { Cloudinary, Transformation } from "cloudinary-core";
 import { merge, range } from "../../utils";
-import { normalizeNonCloudinary, normalizeTransformation, normalizeConfiguration, getHTMLAttributes, hasZeroSizeTransformation } from "../../helpers/attributes";
+import {
+  normalizeNonCloudinary,
+  normalizeTransformation,
+  normalizeConfiguration,
+  getHTMLAttributes,
+  hasZeroSizeTransformation
+} from "../../helpers/attributes";
 import { evalBreakpoints } from "../../helpers/evalBreakpoints";
 import {
   getResizeTransformation,
@@ -18,7 +24,7 @@ import { getPlaceholderURL } from "../../helpers/getPlaceholderURL";
 import { size } from "../../mixins/size";
 import { lazy } from "../../mixins/lazy";
 import { withOptions } from "../../mixins/withOptions";
-import { generateUrl } from '../../helpers/URLGenerator';
+import { generateUrl } from "../../helpers/URLGenerator";
 
 /**
  * Deliver images and specify image transformations using the cld-image (CldImage) component,
@@ -37,7 +43,7 @@ export default {
   name: "CldImage",
   provide() {
     return {
-      registerTransformation: this.registerTransformation,
+      registerTransformation: this.registerTransformation
     };
   },
   inject: {
@@ -99,16 +105,19 @@ export default {
   },
   methods: {
     registerTransformation(transformation) {
-      this.transformations = [...this.transformations, normalizeTransformation(transformation)];
+      this.transformations = [
+        ...this.transformations,
+        normalizeTransformation(transformation)
+      ];
     },
     computeLazyLoadSrc() {
       const src = getPlaceholderURL(
-          this.placeholder,
-          this.publicId,
-          this.configuration,
-          this.transformOptions
-        );
-      
+        this.placeholder,
+        this.publicId,
+        this.configuration,
+        this.transformOptions
+      );
+
       return {
         ...this.nonCldAttrs,
         src
@@ -117,15 +126,17 @@ export default {
   },
   computed: {
     isWithoutTransformation() {
-      return !this.publicId ||
+      return (
+        !this.publicId ||
         hasZeroSizeTransformation(this.transformations) ||
         (this.responsive && !this.size)
+      );
     },
     style() {
-      return getResponsiveStyle(this.responsive)
+      return getResponsiveStyle(this.responsive);
     },
     nonCldAttrs() {
-      return normalizeNonCloudinary(this.$attrs)
+      return normalizeNonCloudinary(this.$attrs);
     },
     transformOptions() {
       return {
@@ -134,10 +145,10 @@ export default {
           ...(this.options.transformation || []),
           ...this.transformations
         ]
-      }
+      };
     },
     isLazyLoadInvisible() {
-      return this.lazy && !this.visible
+      return this.lazy && !this.visible;
     },
     imageAttrs() {
       if (this.isWithoutTransformation) {
@@ -168,14 +179,14 @@ export default {
       });
 
       return {
-          ...this.nonCldAttrs,
-          ...htmlAttrs,
-          src
+        ...this.nonCldAttrs,
+        ...htmlAttrs,
+        src
       };
     },
     shouldMeasureSize() {
-      return !this.responsive;
+      return this.responsive !== false;
     }
-  },
+  }
 };
 </script>

src/helpers/responsiveness.js

@@ -59,7 +59,7 @@ export function getResizeTransformation(mode, size, breakpoints) {
         : {
             width: Math.floor(size.width),
             height: Math.floor(size.height)
-          }
+          };
       return normalizeTransformation({
         ...getDPRAttr(),
         crop: "fill",
@@ -72,21 +72,18 @@ export function getResizeTransformation(mode, size, breakpoints) {
         ...getDPRAttr(),
         crop: "scale",
         width: Math.floor(
-          breakpoints
-            ? findBreakpoint(breakpoints, size.width)
-            : size.width
+          breakpoints ? findBreakpoint(breakpoints, size.width) : size.width
         )
       });
 
     case "height":
-        return normalizeTransformation({
-          ...getDPRAttr(),
-          crop: "scale",
-          height: Math.floor(breakpoints
-              ? findBreakpoint(breakpoints, size.height)
-              : size.height
-          )
-        });
+      return normalizeTransformation({
+        ...getDPRAttr(),
+        crop: "scale",
+        height: Math.floor(
+          breakpoints ? findBreakpoint(breakpoints, size.height) : size.height
+        )
+      });
     default:
       return {};
   }

src/mixins/size.js

@@ -1,6 +1,5 @@
 import { pick, debounce } from "../utils";
 
-
 /**
  * If necessary posts root element
  * size information
@@ -25,8 +24,12 @@ export const size = {
           this.cancelSizeListener = watchElementSize(this.$el, size => {
             if (!size) return;
 
-            if (!this.size || this.size.width !== size.width || this.size.height !== size.height) {
-              this.size = { ...size };
+            if (
+              !this.size ||
+              this.size.width !== size.width ||
+              this.size.height !== size.height
+            ) {
+              this.size = size;
             }
           });
         }
@@ -35,7 +38,7 @@ export const size = {
           this.cancelSizeListener();
         }
       }
-    },
+    }
   },
 
   created() {
@@ -71,8 +74,10 @@ function watchElementSize(element, cb) {
     if ("ResizeObserver" in window) {
       const resizeObserver = new ResizeObserver(entries => {
         for (const entry of entries) {
-          const size = pick(entry.contentRect, ["width", "height"]);
-          delayedCallback(size);
+          delayedCallback({
+            width: entry.contentRect.width,
+            height: entry.contentRect.height
+          });
         }
       });
       resizeObserver.observe(element);
@@ -85,8 +90,8 @@ function watchElementSize(element, cb) {
       };
     } else {
       const handleWindowResize = () => {
-        const size = pick(element.getBoundingClientRect(), ["width", "height"]);
-        delayedCallback(size);
+        const rect = element.getBoundingClientRect();
+        delayedCallback({ width: rect.width, height: rect.height });
       };
       window.addEventListener("resize", handleWindowResize);
       handleWindowResize();