refactor; complete api testing

README.md

@@ -62,11 +62,11 @@ Under project folder:
 
 `yarn watch`
 
-Now open up `index.html` and play around with it!
+Open up `index.html` and play around with it!
 
 ## Test
 
-Open up `test.html` for browser testing.
+Open up `test.html` for browser testing (keep your cursor away from the browser window).
 
 ## Methods
 
@@ -103,8 +103,8 @@ Takes an options object. Available options:
 | enableGrab               | Boolean          | true                      | To be able to grab and drag the image for extra zoom-in. |
 | preloadImage             | Boolean          | true                      | Preload images with attribute `data-original`. |
 | transitionDuration       | Number           | 0.4                       | Transition duration in seconds. [More](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration) |
-| transitionTimingFunction | String           | 'cubic-bezier(.4,0,0,1)'  | Transition timing function. [More](https://developer.mozilla.org/en-US/docs/Web/CSS/single-transition-timing-function) |
-| bgColor                  | String           | '#fff'                    | Overlay background color. |
+| transitionTimingFunction | String           | 'cubic-bezier(0.4, 0, 0, 1)' | Transition timing function. [More](https://developer.mozilla.org/en-US/docs/Web/CSS/single-transition-timing-function) |
+| bgColor                  | String           | 'rgb(255, 255, 255)'      | Overlay background color. |
 | bgOpacity                | Number           | 1                         | Overlay background capacity. |
 | scaleBase                | Number           | 1.0                       | The base scale factor for zooming. By default scale to fit the window. |
 | scaleExtra               | Number           | 0.5                       | The extra scale factor when grabbing the image. |

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "zooming",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "homepage": "https://github.com/kingdido999/zooming",
   "authors": [
     "Desmond Ding <[email protected]>"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zooming",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "Image zoom that makes sense.",
   "main": "src/zooming.js",
   "repository": {

src/helpers.js

@@ -1,26 +1,6 @@
 // webkit prefix
 const prefix = 'WebkitAppearance' in document.documentElement.style ? '-webkit-' : ''
 
-const options = {
-  defaultZoomable: 'img[data-action="zoom"]',
-  enableGrab: true,
-  preloadImage: true,
-  transitionDuration: 0.4,
-  transitionTimingFunction: 'cubic-bezier(.4,0,0,1)',
-  bgColor: '#fff',
-  bgOpacity: 1,
-  scaleBase: 1.0,
-  scaleExtra: 0.5,
-  scrollThreshold: 40,
-  onOpen: null,
-  onClose: null,
-  onRelease: null,
-  onBeforeOpen: null,
-  onBeforeClose: null,
-  onBeforeGrab: null,
-  onBeforeRelease: null
-}
-
 const sniffTransition = (el) => {
   let ret     = {}
   const trans = ['webkitTransition', 'transition', 'mozTransition']
@@ -90,7 +70,6 @@ const preloadImage = (url) => (new Image()).src = url
 
 export {
   prefix,
-  options,
   sniffTransition,
   checkTrans,
   toggleListeners,

src/options.js

@@ -0,0 +1,19 @@
+export const options = {
+  defaultZoomable: 'img[data-action="zoom"]',
+  enableGrab: true,
+  preloadImage: true,
+  transitionDuration: 0.4,
+  transitionTimingFunction: 'cubic-bezier(0.4, 0, 0, 1)',
+  bgColor: 'rgb(255, 255, 255)',
+  bgOpacity: 1,
+  scaleBase: 1.0,
+  scaleExtra: 0.5,
+  scrollThreshold: 40,
+  onOpen: null,
+  onClose: null,
+  onRelease: null,
+  onBeforeOpen: null,
+  onBeforeClose: null,
+  onBeforeGrab: null,
+  onBeforeRelease: null
+}

src/zooming.js

@@ -1,4 +1,5 @@
-import { prefix, options, sniffTransition, checkTrans, toggleListeners, preloadImage } from './helpers'
+import { prefix, sniffTransition, checkTrans, toggleListeners, preloadImage } from './helpers'
+import { options } from './options'
 
 // elements
 const body    = document.body
@@ -176,9 +177,10 @@ const eventHandler = {
 
 // init ------------------------------------------------------------------------
 
+overlay.setAttribute('id', 'zoom-overlay')
 setStyle(overlay, {
   zIndex: 998,
-  background: options.bgColor,
+  backgroundColor: options.bgColor,
   position: 'fixed',
   top: 0,
   left: 0,