fitobject - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

fitobject.js

 /**
- * @preserve fitobject - v0.1.0 - 2017-05-05
+ * @preserve fitobject - v0.2.0 - 2017-05-05
  * Fit an object to cover or be contained by its container.
@@ -15,2 +15,12 @@ * https://github.com/dannydb/fitobject
 }(function($) {
+  var $object = null;
+  var $container = null;
+  var $objectWrapper = null;
+  var objectRatio = null;
+  var containerRatio = null;
+  var isShallowObject = null;
+  var fullObjectHeight = null;
+  var fullObjectWidth = null;
+  var horizontalOffset = null;
+  var verticalOffset = null;
 
@@ -24,18 +34,34 @@ /**
    * @param  {Object} container A jQuery-wrapped DOM element
-   * @param  {[type]} fit       The fit behavior - either 'cover' or 'contain'.
+   * @param  {String} fit       The fit behavior - either 'cover' or 'contain'.
+   * @param  {Object} safeArea  Area to avoid cropping into (optional)
    */
-	return function fitObject(object, container, fit) {
-    var $object = $(object);
-    var $container = $(container);
-    var $objectWrapper = $container.find('.object-fit-wrapper');
-    var containerRatio = $container.height() / $container.width();
-    var objectRatio = $object.innerHeight() / $object.width();
-    var shallowObject = objectRatio < containerRatio;
+	var fitObject = function (object, container, fit, safeArea) {
     var newCss = null;
 
-    if (fit === 'cover' && shallowObject){
+    safeArea = safeArea || {
+      'top': 0,
+      'right': 0,
+      'bottom': 0,
+      'left': 0
+    };
+
+    $object = $(object);
+    $container = $(container);
+    $objectWrapper = $container.find('.object-fit-wrapper');
+
+    objectRatio = $object.innerHeight() / $object.width();
+    containerRatio = $container.height() / $container.width();
+    isShallowObject = objectRatio < containerRatio;
+
+    fullObjectHeight = $container.width() * objectRatio;
+    fullObjectWidth = $container.height() / objectRatio;
+
+    horizontalOffset = ($container.width() - fullObjectWidth) / 2;
+    verticalOffset = ($container.height() - fullObjectHeight) / 2;
+
+    if (fit === 'cover' && isShallowObject){
       newCss = {
         height: $container.height(),
-        width: $container.height() / objectRatio,
-        left: ($container.width() - $container.height() / objectRatio) / 2,
+        width: fullObjectWidth,
+        left: handleCropBias(horizontalOffset, 'horizontal', safeArea),
         top: 0
@@ -45,25 +71,25 @@ }
 
-    if (fit === 'cover' && !shallowObject){
+    if (fit === 'cover' && !isShallowObject){
       newCss = {
-        height: $container.width() * objectRatio,
+        height: fullObjectHeight,
         width: $container.width(),
         left: 0,
-        top: ($container.height() - $container.width() * objectRatio) / 2
+        top: handleCropBias(verticalOffset, 'vertical', safeArea)
       }
     }
 
-    if (fit === 'contain' && shallowObject){
+    if (fit === 'contain' && isShallowObject){
       newCss = {
-        height: $container.width() * objectRatio,
+        height: fullObjectHeight,
         width: $container.width(),
         left: 0,
-        top: ($container.height() - $container.width() * objectRatio) / 2
+        top: verticalOffset
       }
     }
 
-    if (fit === 'contain' && !shallowObject){
+    if (fit === 'contain' && !isShallowObject){
       newCss = {
         height: $container.height(),
-        width: $container.height() / objectRatio,
-        left: ($container.width() - $container.height() / objectRatio) / 2,
+        width: fullObjectWidth,
+        left: horizontalOffset,
         top: 0
@@ -86,9 +112,42 @@ }
     }
+	}
 
-    // Make sure object will be positioned relative to its container
-    if ($container.css('position') === 'static') {
-      $container.css('position', 'relative');
+  /**
+   * Modify the offset to avoid cropping into a safe area
+   * Adapted from NYT5-foundation's responsive-image.js
+   * @param  {Number} offset    The original centering offset
+   * @param  {String} direction Either 'vertical' or 'horizontal'
+   * @param  {Object} safeArea  Area to avoid cropping into
+   * @return {Number}           The modified offset
+   */
+  var handleCropBias = function (offset, direction, safeArea) {
+    var verticalBias = (safeArea['bottom'] - safeArea['top']) / 100;
+    var horizontalBias = (safeArea['right'] - safeArea['left']) / 100;
+    var pixelsCropped = null;
+
+    if (direction === 'horizontal') {
+      pixelsCropped = fullObjectWidth - $container.width();
+      offset += pixelsCropped * horizontalBias;
     }
-	}
 
+    if (direction === 'vertical') {
+      pixelsCropped = fullObjectHeight - $container.height();
+      offset += pixelsCropped * verticalBias;
+    }
+
+    // Make sure the biased offset covers the top and left
+    if (offset > 0) {
+      offset = 0;
+    }
+
+    // Make sure the biased offset covers the right and bottom
+    if (offset < -pixelsCropped) {
+      offset = -pixelsCropped
+    }
+
+    return offset;
+  };
+
+  return fitObject;
+
 }));

package.json

 {
   "name": "fitobject",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Fit an object to cover or be contained by its container.",
@@ -5,0 +5,0 @@ "main": "fitobject.js",

README.md

@@ -12,5 +12,30 @@ # fitobject
 
+```html
+<div class="container">
+  <img class="object" src="http://placehold.it/400x300" />
+</div>
+
+<script>
+  var fitObject = require('fitobject');
+  fitObject('.object', '.container', 'cover');
+</script>
+```
+
+The third argument specifies how the object should be fit to its container. Specify either `'cover'` or `'contain'`.
+
+The `fitObject` function also accepts a "safe area" as a fourth, optional argument an object. When the object fit method is set to `'cover'`, the safe area can define a region of the object to avoid cropping into.
+
+<img src="https://cloud.githubusercontent.com/assets/419297/25910766/8b30a470-357f-11e7-850e-d11e7889f4ed.png" width="400" />
+
+Here is the above example again with a safe area defined:
+
 ```js
-var fitObject = require('fitobject');
-fitObject('.object', '.container', 'cover');
+var safeArea = {
+  'top': 25,   // 25% of the vertical dimension from the top
+  'right': 0,  // 0% of the horizontal dimension from the right
+  'bottom': 0, // 0% of the vertical dimension from the bottom
+  'left': 50   // 50% of the horizontal dimension from the left
+}
+
+fitObject('.object', '.container', 'cover', safeArea);
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7224

increased by53.87%

Lines of code

128

increased by60%

Number of lines in readme file

41

increased by156.25%

No dependency changes