Skip to content

Commit c988355

Browse files
author
Fengyuan Chen
committed
Release v0.1.1
1 parent 1e9bca0 commit c988355

7 files changed

+100
-51
lines changed

‎CHANGELOG.md

+7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
# Changelog
22

33

4+
## 0.1.1 (Dec 28, 2015)
5+
6+
- Supports to zoom from event triggering point.
7+
- Optimized "toggle" method.
8+
- Fixed a bug of the index of viewing image.
9+
10+
411
## 0.1.0 (Dec 24, 2015)
512

613
- Supports 2 modes: "modal" (default), "inline"

‎dist/viewer.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
/*!
2-
* Viewer v0.1.0
2+
* Viewer v0.1.1
33
* https://github.com/fengyuanchen/viewerjs
44
*
55
* Copyright (c) 2015 Fengyuan Chen
66
* Released under the MIT license
77
*
8-
* Date: 2015-12-24T07:15:14.777Z
8+
* Date: 2015-12-28T03:06:47.079Z
99
*/
1010
.viewer-zoom-in:before,
1111
.viewer-zoom-out:before,

‎dist/viewer.js

+81-39
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
/*!
2-
* Viewer v0.1.0
2+
* Viewer v0.1.1
33
* https://github.com/fengyuanchen/viewerjs
44
*
55
* Copyright (c) 2015 Fengyuan Chen
66
* Released under the MIT license
77
*
8-
* Date: 2015-12-24T07:15:17.423Z
8+
* Date: 2015-12-28T03:06:49.640Z
99
*/
1010

1111
(function (global, factory) {
@@ -81,9 +81,10 @@
8181
var round = Math.round;
8282

8383
// Utilities
84-
var EMPTY_OBJECT = {};
85-
var toString = EMPTY_OBJECT.toString;
86-
var hasOwnProperty = EMPTY_OBJECT.hasOwnProperty;
84+
var objectProto = Object.prototype;
85+
var toString = objectProto.toString;
86+
var hasOwnProperty = objectProto.hasOwnProperty;
87+
var slice = Array.prototype.slice;
8788

8889
function typeOf(obj) {
8990
return toString.call(obj).slice(8, -1).toLowerCase();
@@ -132,18 +133,13 @@
132133
}
133134

134135
function toArray(obj, offset) {
135-
var args = [];
136+
offset = offset >= 0 ? offset : 0;
136137

137138
if (Array.from) {
138-
return Array.from(obj).slice(offset || 0);
139+
return Array.from(obj).slice(offset);
139140
}
140141

141-
// This is necessary for IE8
142-
if (isNumber(offset)) {
143-
args.push(offset);
144-
}
145-
146-
return args.slice.apply(obj, args);
142+
return slice.call(obj, offset);
147143
}
148144

149145
function inArray(value, arr) {
@@ -423,6 +419,37 @@
423419
return e;
424420
}
425421

422+
function getOffset(element) {
423+
var doc = document.documentElement;
424+
var box = element.getBoundingClientRect();
425+
426+
return {
427+
left: box.left + (window.scrollX || doc && doc.scrollLeft || 0) - (doc && doc.clientLeft || 0),
428+
top: box.top + (window.scrollY || doc && doc.scrollTop || 0) - (doc && doc.clientTop || 0)
429+
};
430+
}
431+
432+
function getTouchesCenter(touches) {
433+
var length = touches.length;
434+
var pageX = 0;
435+
var pageY = 0;
436+
437+
if (length) {
438+
each(touches, function (touch) {
439+
pageX += touch.pageX;
440+
pageY += touch.pageY;
441+
});
442+
443+
pageX /= length;
444+
pageY /= length;
445+
}
446+
447+
return {
448+
pageX: pageX,
449+
pageY: pageY
450+
};
451+
}
452+
426453
function getByTag(element, tagName, index) {
427454
var elements = element.getElementsByTagName(tagName);
428455

@@ -1013,12 +1040,7 @@
10131040
break;
10141041

10151042
case 'one-to-one':
1016-
if (imageData.ratio === 1) {
1017-
_this.zoomTo(_this.initialImageData.ratio);
1018-
} else {
1019-
_this.zoomTo(1);
1020-
}
1021-
1043+
_this.toggle();
10221044
break;
10231045

10241046
case 'reset':
@@ -1179,7 +1201,7 @@
11791201
delta = e.detail > 0 ? 1 : -1;
11801202
}
11811203

1182-
_this.zoom(-delta * ratio, true);
1204+
_this.zoom(-delta * ratio, true, e);
11831205
},
11841206

11851207
keydown: function (event) {
@@ -1253,13 +1275,8 @@
12531275
// Zoom in to natural size (Key: Ctrl + 1)
12541276
case 49:
12551277
if (e.ctrlKey || e.shiftKey) {
1256-
e.preventDefault();
1257-
1258-
if (_this.imageData.ratio === 1) {
1259-
_this.zoomTo(_this.initialImageData.ratio);
1260-
} else {
1261-
_this.zoomTo(1);
1262-
}
1278+
preventDefault(e);
1279+
_this.toggle();
12631280
}
12641281

12651282
break;
@@ -1350,7 +1367,7 @@
13501367
_this.endX = touch ? touch.pageX : e.pageX;
13511368
_this.endY = touch ? touch.pageY : e.pageY;
13521369

1353-
_this.change();
1370+
_this.change(e);
13541371
}
13551372
},
13561373

@@ -1399,7 +1416,7 @@
13991416
removeClass(viewer, CLASS_HIDE);
14001417

14011418
addListener(element, EVENT_SHOWN, function () {
1402-
_this.view((_this.target ? inArray(_this.target, toArray(_this.images)) : 0) || _this.index);
1419+
_this.view(_this.target ? inArray(_this.target, toArray(_this.images)) : _this.index);
14031420
_this.target = false;
14041421
}, true);
14051422

@@ -1442,7 +1459,7 @@
14421459
addListener(viewer, EVENT_TRANSITIONEND, proxy(_this.hidden, _this), true);
14431460
removeClass(viewer, CLASS_IN);
14441461
}, true);
1445-
_this.zoomTo(0, false, true);
1462+
_this.zoomTo(0, false, false, true);
14461463
} else {
14471464
removeClass(viewer, CLASS_IN);
14481465
_this.hidden();
@@ -1510,6 +1527,7 @@
15101527
// Make the image visible if it fails to load within 1s
15111528
_this.timeout = setTimeout(function () {
15121529
removeClass(image, CLASS_INVISIBLE);
1530+
_this.timeout = false;
15131531
}, 1000);
15141532
}
15151533

@@ -1609,8 +1627,9 @@
16091627
*
16101628
* @param {Number} ratio
16111629
* @param {Boolean} hasTooltip (optional)
1630+
* @param {Event} _originalEvent (private)
16121631
*/
1613-
zoom: function (ratio, hasTooltip) {
1632+
zoom: function (ratio, hasTooltip, _originalEvent) {
16141633
var _this = this;
16151634
var imageData = _this.imageData;
16161635

@@ -1622,7 +1641,7 @@
16221641
ratio = 1 + ratio;
16231642
}
16241643

1625-
_this.zoomTo(imageData.width * ratio / imageData.naturalWidth, hasTooltip);
1644+
_this.zoomTo(imageData.width * ratio / imageData.naturalWidth, hasTooltip, _originalEvent);
16261645

16271646
return _this;
16281647
},
@@ -1632,16 +1651,19 @@
16321651
*
16331652
* @param {Number} ratio
16341653
* @param {Boolean} hasTooltip (optional)
1654+
* @param {Event} _originalEvent (private)
16351655
* @param {Boolean} _zoomable (private)
16361656
*/
1637-
zoomTo: function (ratio, hasTooltip, _zoomable) {
1657+
zoomTo: function (ratio, hasTooltip, _originalEvent, _zoomable) {
16381658
var _this = this;
16391659
var options = _this.options;
16401660
var minZoomRatio = 0.01;
16411661
var maxZoomRatio = 100;
16421662
var imageData = _this.imageData;
16431663
var newWidth;
16441664
var newHeight;
1665+
var offset;
1666+
var center;
16451667

16461668
ratio = max(0, ratio);
16471669

@@ -1658,8 +1680,28 @@
16581680

16591681
newWidth = imageData.naturalWidth * ratio;
16601682
newHeight = imageData.naturalHeight * ratio;
1661-
imageData.left -= (newWidth - imageData.width) / 2;
1662-
imageData.top -= (newHeight - imageData.height) / 2;
1683+
1684+
if (_originalEvent) {
1685+
offset = getOffset(_this.viewer);
1686+
center = _originalEvent.touches ? getTouchesCenter(_originalEvent.touches) : {
1687+
pageX: _originalEvent.pageX,
1688+
pageY: _originalEvent.pageY
1689+
};
1690+
1691+
// Zoom from the triggering point of the event
1692+
imageData.left -= (newWidth - imageData.width) * (
1693+
((center.pageX - offset.left) - imageData.left) / imageData.width
1694+
);
1695+
imageData.top -= (newHeight - imageData.height) * (
1696+
((center.pageY - offset.top) - imageData.top) / imageData.height
1697+
);
1698+
} else {
1699+
1700+
// Zoom from the center of the image
1701+
imageData.left -= (newWidth - imageData.width) / 2;
1702+
imageData.top -= (newHeight - imageData.height) / 2;
1703+
}
1704+
16631705
imageData.width = newWidth;
16641706
imageData.height = newHeight;
16651707
imageData.ratio = ratio;
@@ -1995,9 +2037,9 @@
19952037
var _this = this;
19962038

19972039
if (_this.imageData.ratio === 1) {
1998-
_this.zoomTo(_this.initialImageData.ratio);
2040+
_this.zoomTo(_this.initialImageData.ratio, true);
19992041
} else {
2000-
_this.zoomTo(1);
2042+
_this.zoomTo(1, true);
20012043
}
20022044

20032045
return _this;
@@ -2098,7 +2140,7 @@
20982140
}
20992141
},
21002142

2101-
change: function () {
2143+
change: function (originalEvent) {
21022144
var _this = this;
21032145
var offsetX = _this.endX - _this.startX;
21042146
var offsetY = _this.endY - _this.startY;
@@ -2122,7 +2164,7 @@
21222164
abs(_this.startY - _this.startY2),
21232165
abs(_this.endX - _this.endX2),
21242166
abs(_this.endY - _this.endY2)
2125-
));
2167+
), false, originalEvent);
21262168

21272169
_this.startX2 = _this.endX2;
21282170
_this.startY2 = _this.endY2;

‎dist/viewer.min.css

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/viewer.min.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
</div>
3838
<nav class="collapse navbar-collapse" id="navbar-collapse-1" role="navigation">
3939
<ul class="nav navbar-nav navbar-right">
40-
<li><a href="https://github.com/fengyuanchen/viewerjs/tree/v0.1.0/README.md">Docs</a></li>
40+
<li><a href="https://github.com/fengyuanchen/viewerjs/tree/v0.1.1/README.md">Docs</a></li>
4141
<li><a href="https://github.com/fengyuanchen/viewerjs">GitHub</a></li>
4242
<li><a href="http://chenfengyuan.com">About</a></li>
4343
<li><a href="http://fengyuanchen.github.io">More</a></li>
@@ -49,7 +49,7 @@
4949
<!-- Jumbotron -->
5050
<div class="jumbotron docs-jumbotron">
5151
<div class="container">
52-
<h1>Viewer.js <small class="version">v0.1.0</small></h1>
52+
<h1>Viewer.js <small class="version">v0.1.1</small></h1>
5353
<p class="lead">JavaScript image viewer.</p>
5454
<div class="docs-carbonads-container">
5555
<div class="docs-carbonads">

‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "viewerjs",
33
"description": "JavaScript image viewer.",
4-
"version": "0.1.0",
4+
"version": "0.1.1",
55
"main": "dist/viewer.js",
66
"license": "MIT",
77
"repository": "fengyuanchen/viewerjs",
@@ -27,7 +27,7 @@
2727
"devDependencies": {
2828
"gulp": "^3.9.0",
2929
"gulp-autoprefixer": "^3.1.0",
30-
"gulp-concat": "~2.6.0",
30+
"gulp-concat": "^2.6.0",
3131
"gulp-csscomb": "^3.0.6",
3232
"gulp-csslint": "^0.2.0",
3333
"gulp-htmlcomb": "0.1.0",
@@ -39,7 +39,7 @@
3939
"gulp-rename": "^1.2.2",
4040
"gulp-replace": "^0.5.4",
4141
"gulp-sass": "^2.1.1",
42-
"gulp-sourcemaps": "~1.6.0",
42+
"gulp-sourcemaps": "^1.6.0",
4343
"gulp-uglify": "^1.5.1"
4444
}
4545
}

0 commit comments

Comments
 (0)