objectfit - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

contain.js

 /**
-  ## contain
+  ### contain
 
@@ -9,16 +9,2 @@ Use [letterboxing](http://en.wikipedia.org/wiki/Letterbox) or
 
-  ### Example Usage
-
-  To be completed.
-
-  ### Reference
-
-  #### `contain(container, => subject) => result`
-
-  Given the supplied `container` and `subject` bounds, determine the maximum
-  `result` bounds in which the subject can be displayed within the container
-  without distorting the aspect ratio.
-
-  All bounds are provided in the format of `[x, y, width, height]`
-
 **/
@@ -25,0 +11,0 @@ module.exports = function(container, subject) {

index.js

@@ -8,5 +8,22 @@ /**
 
+  ## Example Usage
+
+  Displayed below is an example of drawing an image on a canvas using the
+  `objectfit/contain` function.  It should be noted that as the functions
+  all use the same function signature, `objectfit/cover` could be used in
+  it's place.
+
+  <<< examples/contain.js
+
   ## Reference
+
+  All objectfit functions use the following function signature:
+
+  ```
+  fit(container, => subject) => [x, y, width, height]
+  ```
+
+  ## Implementations
+
 **/
-
 exports.contain = require('./contain');

package.json

 {
   "name": "objectfit",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Different objectfit strategies for rectangular regions preserving aspect ratio",
@@ -27,4 +27,6 @@ "main": "index.js",
     "cog": "^1.0.0",
+    "crel": "^2.1.5",
+    "fdom": "^1.2.0",
     "tape": "^3.0.1"
   }
 }

README.md

@@ -12,6 +12,51 @@ # objectfit
 
+## Example Usage
+
+Displayed below is an example of drawing an image on a canvas using the
+`objectfit/contain` function.  It should be noted that as the functions
+all use the same function signature, `objectfit/cover` could be used in
+it's place.
+
+```js
+var fit = require('objectfit/contain');
+var crel = require('crel');
+var img = crel('img', { src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Plasma_globe_60th.jpg/1024px-Plasma_globe_60th.jpg' });
+var canvas = crel('canvas');
+var css = require('fdom/css');
+var context = canvas.getContext('2d');
+
+// set document.body styling
+[ ['margin', 0], ['overflow', 'hidden'] ].forEach(css(document.body));
+
+function redraw() {
+  var bounds = fit(
+    [0, 0, window.innerWidth, window.innerHeight],
+    [0, 0, img.width, img.height]
+  );
+
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  context.drawImage.apply(context, [img].concat(bounds));
+}
+
+// redraw on image load and window resize
+img.onload = redraw;
+window.onresize = redraw;
+
+document.body.appendChild(canvas);
+
+```
+
 ## Reference
 
-## contain
+All objectfit functions use the following function signature:
 
+```
+fit(container, => subject) => [x, y, width, height]
+```
+
+## Implementations
+
+### contain
+
 Use [letterboxing](http://en.wikipedia.org/wiki/Letterbox) or
@@ -22,16 +67,7 @@ [pillarboxing](http://en.wikipedia.org/wiki/Pillar_box_(film)) to resize
 
-### Example Usage
+### cover
 
-To be completed.
+Ensure the subject completely fills the container leaving no whitespace
+visible in the container.
 
-### Reference
-
-#### `contain(container, => subject) => result`
-
-Given the supplied `container` and `subject` bounds, determine the maximum
-`result` bounds in which the subject can be displayed within the container
-without distorting the aspect ratio.
-
-All bounds are provided in the format of `[x, y, width, height]`
-
 ## License(s)
@@ -38,0 +74,0 @@

No alert changes

Improved metrics

Total package byte prevSize

7450

increased by55.69%

Number of package files

11

increased by22.22%

Lines of code

122

increased by87.69%

Number of lines in readme file

88

increased by69.23%

Worsened metrics

Dev dependency count

4

increased by100%

No dependency changes