add option customSize to scale to arbitrary width and height #17

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "zooming",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "homepage": "https://github.com/kingdido999/zooming",
   "authors": [
     "Desmond Ding <kingdido999@gmail.com>"

demo/js/custom.js

@@ -7,12 +7,15 @@ var config = customZooming.config(),
     BG_COLOR_DEFAULT            = config.bgColor,
     BG_COLOR_DARK               = '#000',
     ENABLE_GRAB_DEFAULT         = config.enableGrab,
+    SCALE_BASE_DEFAULT          = config.scaleBase,
+    SCALE_BASE_SMALL            = 0.8,
     ACTIVE_CLASS                = 'button-primary',
 
     btnFast = document.getElementById('btn-fast'),
     btnSlow = document.getElementById('btn-slow'),
     btnDark = document.getElementById('btn-dark'),
     btnNoGrab = document.getElementById('btn-no-grab')
+    btnScaleSmall = document.getElementById('btn-scale-small')
 
 function isActive (el) {
   return el.classList.contains(ACTIVE_CLASS)
@@ -79,3 +82,16 @@ function noGrab() {
 
   customZooming.config({ enableGrab: enable })
 }
+
+function scaleSmall() {
+  var scaleBase
+  if (isActive(btnScaleSmall)) {
+    scaleBase = SCALE_BASE_DEFAULT
+    deactivate(btnScaleSmall)
+  } else {
+    scaleBase = SCALE_BASE_SMALL
+    activate(btnScaleSmall)
+  }
+
+  customZooming.config({ scaleBase: scaleBase })
+}

docs/index.html

@@ -159,6 +159,12 @@ <h3 class='mb0 no-anchor'></h3>
                         .scrollThreshold
                       </a></li>
 
+                      <li><a
+                        href='#OPTIONS.customSize'
+                        class='regular pre-open'>
+                        .customSize
+                      </a></li>
+
                       <li><a
                         href='#OPTIONS.onOpen'
                         class='regular pre-open'>
@@ -888,6 +894,7 @@ <h3 class='fl m0' id='options'>
   <span class="hljs-attr">scaleBase</span>: <span class="hljs-number">1.0</span>,
   <span class="hljs-attr">scaleExtra</span>: <span class="hljs-number">0.5</span>,
   <span class="hljs-attr">scrollThreshold</span>: <span class="hljs-number">40</span>,
+  <span class="hljs-attr">customSize</span>: <span class="hljs-literal">null</span>,
   <span class="hljs-attr">onOpen</span>: <span class="hljs-literal">null</span>,
   <span class="hljs-attr">onClose</span>: <span class="hljs-literal">null</span>,
   <span class="hljs-attr">onRelease</span>: <span class="hljs-literal">null</span>,
@@ -1345,6 +1352,57 @@ <h3 class='fl m0' id='options'>
 
 
 
+
+
+
+
+</section>
+
+      </div>
+    </div>
+
+    <div class='border-bottom' id='OPTIONS.customSize'>
+      <div class="clearfix small pointer toggle-sibling">
+        <div class="py1 contain">
+            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
+            <span class='code strong strong truncate'>customSize</span>
+        </div>
+      </div>
+      <div class="clearfix display-none toggle-target">
+        <section class='p2 mb2 clearfix bg-white minishadow'>
+
+
+
+  <p>Scale (zoom in) to given width and height. Ignore scaleBase if set.</p>
+
+
+  <div class='pre p1 fill-light mt0'>customSize</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <div class='py1 quiet mt1 prose-big'>Example</div>
+
+
+      <pre class='p1 overflow-auto round fill-light'>customSize: { <span class="hljs-attr">x</span>: <span class="hljs-number">800</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">400</span> }</pre>
+
+
+
+
 
 
 

index.html

@@ -69,8 +69,9 @@ <h4>Image zoom that makes sense.</h4>
 
       <div class="row">
         <a class="button" id="btn-fast" onclick="fast()">faster</a>
-        <a class="button" id="btn-slow" onclick="slow()">slow down</a>
-        <a class="button" id="btn-dark" onclick="dark()">make it dark</a>
+        <a class="button" id="btn-slow" onclick="slow()">slower</a>
+        <a class="button" id="btn-dark" onclick="dark()">dark</a>
+        <a class="button" id="btn-scale-small" onclick="scaleSmall()">smaller</a>
         <a class="button" id="btn-no-grab" onclick="noGrab()">no grab</a>
       </div>
 

package.json

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

src/_defaults.js

@@ -15,6 +15,7 @@
  *   scaleBase: 1.0,
  *   scaleExtra: 0.5,
  *   scrollThreshold: 40,
+ *   customSize: null,
  *   onOpen: null,
  *   onClose: null,
  *   onRelease: null,
@@ -86,6 +87,14 @@ const OPTIONS = {
    */
   scrollThreshold: 40,
 
+  /**
+   * Scale (zoom in) to given width and height. Ignore scaleBase if set.
+   * @type {Object}
+   * @example
+   * customSize: { x: 800, y: 400 }
+   */
+  customSize: null,
+
   /**
    * A callback function that will be called when a target is opened and
    * transition has ended. It will get the target element as the argument.

src/_trans.js

@@ -14,23 +14,35 @@ const calculateTranslate = (rect) => {
   }
 }
 
-const calculateScale = (rect, scaleBase) => {
-  const windowCenter = getWindowCenter()
-  const targetHalfWidth = half(rect.width)
-  const targetHalfHeight = half(rect.height)
+const calculateScale = (rect, scaleBase, customSize) => {
+  if (customSize) {
+    return {
+      x: customSize.x / rect.width,
+      y: customSize.y / rect.height
+    }
+  } else {
+    const targetHalfWidth = half(rect.width)
+    const targetHalfHeight = half(rect.height)
+    const windowCenter = getWindowCenter()
 
-  // The distance between target edge and window edge
-  const targetEdgeToWindowEdge = {
-    x: windowCenter.x - targetHalfWidth,
-    y: windowCenter.y - targetHalfHeight
-  }
+    // The distance between target edge and window edge
+    const targetEdgeToWindowEdge = {
+      x: windowCenter.x - targetHalfWidth,
+      y: windowCenter.y - targetHalfHeight
+    }
 
-  const scaleHorizontally = targetEdgeToWindowEdge.x / targetHalfWidth
-  const scaleVertically = targetEdgeToWindowEdge.y / targetHalfHeight
+    const scaleHorizontally = targetEdgeToWindowEdge.x / targetHalfWidth
+    const scaleVertically = targetEdgeToWindowEdge.y / targetHalfHeight
 
-  // The additional scale is based on the smaller value of
-  // scaling horizontally and scaling vertically
-  return scaleBase + Math.min(scaleHorizontally, scaleVertically)
+    // The additional scale is based on the smaller value of
+    // scaling horizontally and scaling vertically
+    const scale = scaleBase + Math.min(scaleHorizontally, scaleVertically)
+
+    return {
+      x: scale,
+      y: scale
+    }
+  }
 }
 
 export {

src/main.js

@@ -98,7 +98,7 @@ Zooming.prototype = {
 
     const rect = this.target.getBoundingClientRect()
     this.translate = calculateTranslate(rect)
-    this.scale = calculateScale(rect, this.options.scaleBase)
+    this.scale = calculateScale(rect, this.options.scaleBase, this.options.customSize)
 
     // force layout update
     this.target.offsetWidth
@@ -113,7 +113,7 @@ Zooming.prototype = {
         ${this.options.transitionDuration}s
         ${this.options.transitionTimingFunction}`,
       transform: `translate(${this.translate.x}px, ${this.translate.y}px)
-        scale(${this.scale})`
+        scale(${this.scale.x},${this.scale.y})`
     }
 
     // trigger transition
@@ -240,7 +240,7 @@ Zooming.prototype = {
       cursor: this.style.cursor.move,
       transform: `translate(
         ${this.translate.x + dx}px, ${this.translate.y + dy}px)
-        scale(${this.scale + scaleExtra})`
+        scale(${this.scale.x + scaleExtra},${this.scale.y + scaleExtra})`
     })
 
     const onEnd = () => {
@@ -276,7 +276,7 @@ Zooming.prototype = {
       transition: transformCssProp,
       transform: `translate(
         ${this.translate.x + dx}px, ${this.translate.y + dy}px)
-        scale(${this.scale + scaleExtra})`
+        scale(${this.scale.x + scaleExtra},${this.scale.y + scaleExtra})`
     })
 
     this.body.style.cursor = this.style.cursor.move

test.html

@@ -72,8 +72,9 @@ <h4>Image zoom that makes sense.</h4>
 
       <div class="row">
         <a class="button" id="btn-fast" onclick="fast()">faster</a>
-        <a class="button" id="btn-slow" onclick="slow()">slow down</a>
-        <a class="button" id="btn-dark" onclick="dark()">make it dark</a>
+        <a class="button" id="btn-slow" onclick="slow()">slower</a>
+        <a class="button" id="btn-dark" onclick="dark()">dark</a>
+        <a class="button" id="btn-scale-small" onclick="scaleSmall()">smaller</a>
         <a class="button" id="btn-no-grab" onclick="noGrab()">no grab</a>
       </div>
 

test/test.js

@@ -26,6 +26,7 @@ describe('API', function() {
       scaleBase: 0.8,
       scaleExtra: 0.3,
       scrollThreshold: 50,
+      customSize: { x: 800, y: 400 },
       onOpen: function() { return 'onOpen' },
       onClose: function() { return 'onClose' },
       onRelease: function() { return 'onRelease' },