Permalink
Browse files

代码精简

  • Loading branch information...
1 parent 317243f commit dc70ec49d4c863c5fa290c969b456a4d05d7f81a @sunnylost committed Nov 6, 2013
Showing with 65 additions and 81 deletions.
  1. +65 −81 avatarClip/index.js
View
146 avatarClip/index.js
@@ -1,28 +1,30 @@
(function() {
+ var doc = $(document),
+ isDown = false,
+ rdatas = /([^:]+)(?::(\S+))?/,
+ imgWidth,
+ imgHeight;
+
var Frame = function(container) {
this.init(container);
};
Frame.prototype = {
init: function(container) {
var that = this, el, img;
-
that.container = container;
- el = that.el = $(that.tmpl);
+
+ el = that.el = $(that.tmpl);
img = container.find('img');
- that.rdatas = /([^:]+)(?::(\S+))?/,
- that.isDown = false;
- that.imgSize = {
- width: img.width(),
- height: img.height()
- }
+ imgWidth = img.width();
+ imgHeight = img.height();
container.append(el);
el.on('mousedown', $.proxy(that.events.mousedown, that));
},
limit: {
- min: 10,
+ min: 60,
max: 300
},
@@ -72,95 +74,84 @@
events: {
mousedown: function(e) {
var type = $(e.target).data('type'),
- el = this.el;
- this.isDown = true;
+ el = this.el;
+
+ isDown = true;
this.origin = {
x: e.clientX,
y: e.clientY
};
- this.pos = el.position();
+ this.pos = el.position();
this.size = {
- width: el.width(),
+ width : el.width(),
height: el.height()
};
- $(document).on('mousemove', { type: type }, $.proxy(this.events.mousemove, this))
- .on('mouseup', $.proxy(this.events.mouseup, this));
+ doc.on('mousemove', { type: type }, $.proxy(this.events.mousemove, this))
+ .on('mouseup', $.proxy(this.events.mouseup, this));
},
mousemove: function(e) {
+ if(!isDown) return;
this.clearSelection();
- var that = this;
- if(!that.isDown) return;
- var m = e.data.type.match(that.rdatas),
+ var m = e.data.type.match(rdatas),
type = m[1];
- that[type](e.clientX, e.clientY, m[2]);
+ this[type](e.clientX, e.clientY, m[2]);
},
mouseup: function() {
- this.isDown = false;
- $(document).off('mousemove')
- .off('mouseup');
+ isDown = false;
+ doc.off('mousemove')
+ .off('mouseup');
}
},
change: function(x, y, dir) {
var that = this,
el = that.el,
origin = that.origin,
- imgSize = that.imgSize,
pos = that.pos,
size = that.size,
limit = that.limit,
min = limit.min,
max = limit.max,
w = size.width,
h = size.height,
- result = {},
- w, h, t, l,
- ratio,
+ t, l,
config = this.resizeConfig[dir],
offsetX = x - origin.x,
offsetY = y - origin.y;
- if(dir) {
- w = size.width + config.width * offsetX;
- h = size.height + config.height * offsetX;
- }
-
- if(w < min || h < min) {
- w = h = min;
- } else if(w > max || h > max) {
- w = h = max;
- } else {
- l = pos.left + (dir ? (config.left * offsetX) : offsetX);
- t = pos.top + (dir ? (config.top * offsetX) : offsetY);
- l < 0 && (l = 0);
- t < 0 && (t = 0);
- }
-
- imgSize.width < (l + w) && (l = imgSize.width - w);
- imgSize.height < (t + h) && (t = imgSize.height - h);
-
- result = {
- width: w,
- height: h,
- top: t,
- left: l
- };
-
- ratio = this.ratio(l, t, w, h, imgSize.width, imgSize.height);
- el.css(result);
- that.container.trigger('change', [ ratio ]);
- },
+ if(dir) {
+ w += config.width * offsetX;
+ h += config.height * offsetX;
+ }
- ratio: function(x1, y1, x2, y2, x3, y3) {
- return {
- h: (x1 / (x3 || x2)).toFixed(2),
- v: (y1 / (y3 || y2)).toFixed(2),
- hr: x3 ? (x2 / x3).toFixed(2) : 0,
- vr: y3 ? (y2 / y3).toFixed(2) : 0,
+ if(w < min || h < min) {
+ w = h = min;
+ } else if(w > max || h > max) {
+ w = h = max;
+ } else {
+ l = pos.left + (dir ? (config.left * offsetX) : offsetX);
+ t = pos.top + (dir ? (config.top * offsetX) : offsetY);
+ l < 0 && (l = 0);
+ t < 0 && (t = 0);
}
+
+ imgWidth < (l + w) && (l = imgWidth - w);
+ imgHeight < (t + h) && (t = imgHeight - h);
+ el.css({
+ width : w,
+ height: h,
+ top : t,
+ left : l
+ });
+ that.container.trigger('change', [{
+ h : (l / imgWidth).toFixed(2),
+ v : (t / imgHeight).toFixed(2),
+ hr: (w / imgWidth).toFixed(2),
+ vr: (h / imgHeight).toFixed(2)
+ }]);
}
};
@@ -170,18 +161,14 @@
Clip.prototype = {
init: function(container) {
- var that = this, el, img;
+ var that = this, el;
$.each(that.events, function(k, v) {
container.on(k, $.proxy(v, that));
});
el = that.el = $(that.tmpl.replace('$', container.find('img').attr('src')));
container.parent().append(el);
- img = that.img = el.find('img');
- that.imgSize = {
- width: img.width(),
- height: img.height()
- };
+ that.img = el.find('img');
that.size = {
width: el.width(),
height: el.height()
@@ -195,22 +182,19 @@
events: {
change: function(e, ratio) {
var size = this.size,
- imgSize = this.imgSize,
- result = {
- top: -1 * ratio.v * imgSize.height,
- left: -1 * ratio.h * imgSize.width
- };
-
- if(ratio.hr || ratio.vr) {
- imgSize.width = result.width = (size.width / ratio.hr);
- imgSize.height = result.height = (size.height / ratio.vr);
- }
- this.img.css(result);
+ img = this.img;
+
+ img.css({
+ top : -1 * ratio.v * img.height(),
+ left : -1 * ratio.h * img.width(),
+ width : (size.width / ratio.hr).toFixed(2),
+ height : (size.height / ratio.vr).toFixed(2)
+ });
}
}
};
- $.fn.clip = function(opts) {
+ $.fn.clip = function() {
var that = $(this),
f = new Frame(that),
c = new Clip(that);
@@ -221,4 +205,4 @@
$(function() {
$('.img').clip();
-})
+})

0 comments on commit dc70ec4

Please sign in to comment.