Skip to content

Commit c1e5583

Browse files
Blackheart340Blackheart340
committed
add package.json, gulp file, banner and minify version
1 parent 8d9c5ad commit c1e5583

File tree

4 files changed

+282
-0
lines changed

4 files changed

+282
-0
lines changed

‎dist/zoom.js

+217
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
/**
2+
* zoom.js - It's the best way to zoom an image
3+
* @version v0.0.1
4+
* @link https://github.com/fat/zoom.js
5+
* @license MIT
6+
*/
7+
8+
+function ($) { "use strict";
9+
10+
/**
11+
* The zoom service
12+
*/
13+
function ZoomService () {
14+
this._activeZoom =
15+
this._initialScrollPosition =
16+
this._initialTouchPosition =
17+
this._touchMoveListener = null
18+
19+
this._$document = $(document)
20+
this._$window = $(window)
21+
this._$body = $(document.body)
22+
}
23+
24+
ZoomService.prototype.listen = function () {
25+
this._$body.on('click', '[data-action="zoom"]', $.proxy(this._zoom, this))
26+
}
27+
28+
ZoomService.prototype._zoom = function (e) {
29+
var target = e.target
30+
31+
if (!target || target.tagName != 'IMG' || (target.width >= (window.innerWidth - Zoom.OFFSET))) return
32+
33+
this._activeZoomClose(true)
34+
35+
this._activeZoom = new Zoom(target)
36+
this._activeZoom.zoomImage()
37+
38+
// todo(fat): probably worth throttling this
39+
this._$window.on('scroll.zoom', $.proxy(this._scrollHandler, this))
40+
41+
this._$document.on('click.zoom', $.proxy(this._clickHandler, this))
42+
this._$document.on('keyup.zoom', $.proxy(this._keyHandler, this))
43+
this._$document.on('touchstart.zoom', $.proxy(this._touchStart, this))
44+
45+
e.stopPropagation()
46+
}
47+
48+
ZoomService.prototype._activeZoomClose = function (forceDispose) {
49+
if (!this._activeZoom) return
50+
51+
if (forceDispose) {
52+
this._activeZoom.dispose()
53+
} else {
54+
this._activeZoom.close()
55+
}
56+
57+
this._$window.off('.zoom')
58+
this._$document.off('.zoom')
59+
60+
this._activeZoom = null
61+
}
62+
63+
ZoomService.prototype._scrollHandler = function (e) {
64+
if (this._initialScrollPosition === null) this._initialScrollPosition = window.scrollY
65+
var deltaY = this._initialScrollPosition - window.scrollY
66+
if (Math.abs(deltaY) >= 40) this._activeZoomClose()
67+
}
68+
69+
ZoomService.prototype._keyHandler = function (e) {
70+
if (e.keyCode == 27) this._activeZoomClose()
71+
}
72+
73+
ZoomService.prototype._clickHandler = function (e) {
74+
e.stopPropagation()
75+
e.preventDefault()
76+
this._activeZoomClose()
77+
}
78+
79+
ZoomService.prototype._touchStart = function (e) {
80+
this._initialTouchPosition = e.touches[0].pageY
81+
$(e.target).on('touchmove.zoom', $.proxy(this._touchMove, this))
82+
}
83+
84+
ZoomService.prototype._touchMove = function (e) {
85+
if (Math.abs(e.touches[0].pageY - this._initialTouchPosition) > 10) {
86+
this._activeZoomClose()
87+
$(e.target).off('touchmove.zoom')
88+
}
89+
}
90+
91+
92+
/**
93+
* The zoom object
94+
*/
95+
function Zoom (img) {
96+
this._fullHeight =
97+
this._fullWidth =
98+
this._overlay =
99+
this._targetImageWrap = null
100+
101+
this._targetImage = img
102+
103+
this._$body = $(document.body)
104+
}
105+
106+
Zoom.OFFSET = 80
107+
Zoom._MAX_WIDTH = 2560
108+
Zoom._MAX_HEIGHT = 4096
109+
110+
Zoom.prototype.zoomImage = function () {
111+
var img = document.createElement('img')
112+
img.onload = $.proxy(function () {
113+
this._fullHeight = Number(img.height)
114+
this._fullWidth = Number(img.width)
115+
this._zoomOriginal()
116+
}, this)
117+
img.src = this._targetImage.src
118+
}
119+
120+
Zoom.prototype._zoomOriginal = function () {
121+
this._targetImageWrap = document.createElement('div')
122+
this._targetImageWrap.className = 'zoom-img-wrap'
123+
124+
this._targetImage.parentNode.insertBefore(this._targetImageWrap, this._targetImage)
125+
this._targetImageWrap.appendChild(this._targetImage)
126+
127+
$(this._targetImage)
128+
.addClass('zoom-img')
129+
.attr('data-action', 'zoom-out')
130+
131+
this._overlay = document.createElement('div')
132+
this._overlay.className = 'zoom-overlay'
133+
134+
document.body.appendChild(this._overlay)
135+
136+
this._calculateZoom()
137+
this._triggerAnimation()
138+
}
139+
140+
Zoom.prototype._calculateZoom = function () {
141+
this._targetImage.offsetWidth // repaint before animating
142+
143+
var originalFullImageWidth = this._fullWidth
144+
var originalFullImageHeight = this._fullHeight
145+
146+
var scrollTop = window.scrollY
147+
148+
var maxScaleFactor = originalFullImageWidth / this._targetImage.width
149+
150+
var viewportHeight = (window.innerHeight - Zoom.OFFSET)
151+
var viewportWidth = (window.innerWidth - Zoom.OFFSET)
152+
153+
var imageAspectRatio = originalFullImageWidth / originalFullImageHeight
154+
var viewportAspectRatio = viewportWidth / viewportHeight
155+
156+
if (originalFullImageWidth < viewportWidth && originalFullImageHeight < viewportHeight) {
157+
this._imgScaleFactor = maxScaleFactor
158+
159+
} else if (imageAspectRatio < viewportAspectRatio) {
160+
this._imgScaleFactor = (viewportHeight / originalFullImageHeight) * maxScaleFactor
161+
162+
} else {
163+
this._imgScaleFactor = (viewportWidth / originalFullImageWidth) * maxScaleFactor
164+
}
165+
}
166+
167+
Zoom.prototype._triggerAnimation = function () {
168+
this._targetImage.offsetWidth // repaint before animating
169+
170+
var imageOffset = $(this._targetImage).offset()
171+
var scrollTop = window.scrollY
172+
173+
var viewportY = scrollTop + (window.innerHeight / 2)
174+
var viewportX = (window.innerWidth / 2)
175+
176+
var imageCenterY = imageOffset.top + (this._targetImage.height / 2)
177+
var imageCenterX = imageOffset.left + (this._targetImage.width / 2)
178+
179+
this._translateY = viewportY - imageCenterY
180+
this._translateX = viewportX - imageCenterX
181+
182+
$(this._targetImage).css('transform', 'scale(' + this._imgScaleFactor + ')')
183+
$(this._targetImageWrap).css('transform', 'translate(' + this._translateX + 'px, ' + this._translateY + 'px) translateZ(0)')
184+
185+
this._$body.addClass('zoom-overlay-open')
186+
}
187+
188+
Zoom.prototype.close = function () {
189+
this._$body
190+
.removeClass('zoom-overlay-open')
191+
.addClass('zoom-overlay-transitioning')
192+
193+
// we use setStyle here so that the correct vender prefix for transform is used
194+
$(this._targetImage).css('transform', '')
195+
$(this._targetImageWrap).css('transform', '')
196+
197+
$(this._targetImage)
198+
.one($.support.transition.end, $.proxy(this.dispose, this))
199+
.emulateTransitionEnd(300)
200+
}
201+
202+
Zoom.prototype.dispose = function () {
203+
if (this._targetImageWrap && this._targetImageWrap.parentNode) {
204+
$(this._targetImage)
205+
.removeClass('zoom-img')
206+
.attr('data-action', 'zoom')
207+
208+
this._targetImageWrap.parentNode.replaceChild(this._targetImage, this._targetImageWrap)
209+
this._overlay.parentNode.removeChild(this._overlay)
210+
211+
this._$body.removeClass('zoom-overlay-transitioning')
212+
}
213+
}
214+
215+
new ZoomService().listen()
216+
217+
}(jQuery)

‎dist/zoom.min.js

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

‎gulpfile.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
var gulp = require('gulp');
2+
var uglify = require('gulp-uglify');
3+
var rename = require('gulp-rename');
4+
var gfi = require('gulp-file-insert');
5+
var header = require('gulp-header');
6+
var pkg = require('./package.json');
7+
8+
var banner = ['/**',
9+
' * <%= pkg.name %> - <%= pkg.description %>',
10+
' * @version v<%= pkg.version %>',
11+
' * @link <%= pkg.homepage %>',
12+
' * @license <%= pkg.license %>',
13+
' */',
14+
'',
15+
''].join('\n');
16+
17+
gulp.task('compress', function() {
18+
gulp.src('js/*.js')
19+
.pipe(header(banner, { pkg : pkg } ))
20+
.pipe(gulp.dest('dist'))
21+
.pipe(uglify())
22+
.pipe(header(banner, { pkg : pkg } ))
23+
.pipe(rename({
24+
extname: '.min.js'
25+
}))
26+
.pipe(gulp.dest('dist'))
27+
});
28+
29+
gulp.task('default', [ 'compress' ]);

‎package.json

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "zoom.js",
3+
"version": "0.0.1",
4+
"description": "It's the best way to zoom an image",
5+
"main": "js/zoom.js",
6+
"repository": {
7+
"type": "git",
8+
"url": "[email protected]:fat/zoom.js.git"
9+
},
10+
"keywords": [
11+
"zoom",
12+
"jquery",
13+
"image"
14+
],
15+
"author": "fat <[email protected]>",
16+
"license": "MIT",
17+
"bugs": {
18+
"url": "https://github.com/fat/zoom.js/issues"
19+
},
20+
"homepage": "https://github.com/fat/zoom.js",
21+
"devDependencies": {
22+
"gulp": "^3.8.11",
23+
"gulp-file-insert": "^1.0.2",
24+
"gulp-header": "^1.2.2",
25+
"gulp-rename": "^1.2.2",
26+
"gulp-uglify": "^1.1.0"
27+
}
28+
}

0 commit comments

Comments
 (0)