Update readme and demo

strawdynamics · Dec 29, 2015 · 1564874 · 1564874
1 parent 39b8b73
commit 1564874
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@ Easily add "zoom on hover" functionality to your site's images. Lightweight, no-
 <a name="usage"></a>
 ## Usage
 
-Once you've installed Drift via one of the above methods, you're ready to get started. There are no dependencies, so you can just start making cool stuff. Check out the [announcement blog post](http://blog.imgix.com/TODO) for a demo, or clone/download the repository and take a peek at `index.html` in your browser. Here's an example of the most basic possible implementation:
+Once you've installed Drift via one of the above methods, you're ready to get started. There are no dependencies, so you can just start making cool stuff. Check out the [announcement blog post](http://blog.imgix.com/TODO) for a demo, or take a peek here: https://imgix.github.io/drift. Here's an example of the most basic possible implementation:
 
 ``` html
 <img src="http://assets.imgix.net/dog.png?w=400" data-zoom="http://assets.imgix.net/dog.png?w=1200">
@@ -48,7 +48,14 @@ new Drift(document.querySelector('img'), {
 	// prefixed classes will always be added as well.
 	namespace = null,
 	// Whether the ZoomPane should show whitespace when near the edges.
-	contain = true,
+	showWhitespaceAtEdges = false,
+	// Whether the inline ZoomPane should stay inside
+	// the bounds of its image.
+	containInline = false,
+	// How much to offset the ZoomPane from the
+	// interaction point when inline.
+	inlineOffsetX = 0,
+	inlineOffsetY = 0,
 	// Which trigger attribute to pull the ZoomPane image source from.
 	sourceAttribute = 'data-zoom',
 	// How much to magnify the trigger by in the ZoomPane.
@@ -57,7 +64,7 @@ new Drift(document.querySelector('img'), {
 	zoomFactor = 3,
 	// A DOM element to append the non-inline ZoomPane to.
 	// Required if `inlinePane !== true`.
-	paneContainer = null,
+	paneContainer = document.body,
 	// When to switch to an inline ZoomPane. This can be a boolean or
 	// an integer. If `true`, the ZoomPane will always be inline,
 	// if `false`, it will switch to inline when `windowWidth <= inlinePane`

diff --git a/dist/Drift.js b/dist/Drift.js
@@ -493,7 +493,6 @@ var ZoomPane = (function () {
       this.el.removeEventListener('animationend', this._completeHide, false);
       (0, _dom.removeClasses)(this.el, this.openClasses);
       (0, _dom.removeClasses)(this.el, this.closingClasses);
-      (0, _dom.removeClasses)(this.el, this.inlineClasses);
     }
   }, {
     key: 'show',

diff --git a/dist/Drift.min.js b/dist/Drift.min.js
diff --git a/index.html b/index.html
@@ -54,7 +54,7 @@
   </head>
 
   <body>
-    <img class="drift-demo-trigger" data-zoom="http://assets.imgix.net/unsplash/pretty2.jpg?w=1200&amp;ch=DPR&amp;dpr=2" src="http://assets.imgix.net/unsplash/pretty2.jpg?w=400&amp;ch=DPR&amp;dpr=2">
+    <img class="drift-demo-trigger" data-zoom="http://assets.imgix.net/unsplash/lighthouse.jpg?w=1200&amp;ch=DPR&amp;dpr=2" src="http://assets.imgix.net/unsplash/lighthouse.jpg?w=400&amp;ch=DPR&amp;dpr=2">
 
     <div class="detail">
       <section>
@@ -72,7 +72,8 @@ <h1>Drift Demo</h1>
       new Drift(document.querySelector('.drift-demo-trigger'), {
         paneContainer: document.querySelector('.detail'),
         inlinePane: 400,
-        inlineOffsetY: -85
+        inlineOffsetY: -85,
+        containInline: true
       });
     </script>
   </body>

diff --git a/src/js/ZoomPane.js b/src/js/ZoomPane.js
@@ -121,7 +121,6 @@ export default class ZoomPane {
     this.el.removeEventListener('animationend', this._completeHide, false);
     removeClasses(this.el, this.openClasses);
     removeClasses(this.el, this.closingClasses);
-    removeClasses(this.el, this.inlineClasses);
   }