modules/eyedrop/jquery.eyedrop.js

// $Id: jquery.eyedrop.js,v 1.2 2007/01/05 16:33:31 sime Exp $
jQuery.fn.eyedrop = function () {
  $.eyedrop(this);
  return this;
};

// Called to initialize and display layers
jQuery.eyedrop = function (container) {

  var container = $(container).get(0);
  return container.eyedrop || (container.eyedrop = new jQuery._eyedrop(container));
}

jQuery._eyedrop = function (container, callback) {

  // Store eyedrop object
  var eye = this;

  // Setting some parameters here, need more control over these later.
  var action = 'crop';
  var target = '';
  var group = container.id.split('-').pop();
  var canvasWidth = '500px';
  var handleOffset = 4; // Displacement of handle on crop boundary
  var imgCropMin = 10; // Minimum cropping size in pixels.

  // Get the canvas ratio (ratio of original image).
  // TODO: This line is not compatible with IE6 or IE7 (getting the image size).
  var ratioOrig = parseInt(jQuery("#eye-image-orig").get(0).width) / parseInt(jQuery("#eye-image-orig").get(0).height);
  var ratioSelect = 0; // 0 means no ratio applied.

  // drag[] is an array for capturing values during various mouse events.
  var drag = new Array(0,0,0,0,0,0,0,0,0,0,0,0);
  // limit[] is an array for setting the drag boundaries.
  var limit = new Array(0,0,0,0);

  // X and Y = current mouse position
  // X1 and Y1 = starting position.
  // L and T captures the initial position of a moving object
  // W and H captures the horizontal/vertical distance from X and Y.
  // CanvasW and CanvasH captures the size of the canvas on mousedown
  var X = 0; var Y = 1; var X1 = 2; var Y1 = 3; var X2 = 4; var Y2 = 5; var L = 6; var T = 7; var W = 8; var H = 9; var CanvasW = 10; var CanvasH = 11;

  var oCanvas = jQuery("#eye-image").get(0).style;
  // Apply canvas width;
  oCanvas.width = canvasWidth;

  // Find the ratio between the canvas size and the original image.
  // TODO: This line is not compatible with IE6 or IE7 (getting the image size).
  var zoom = parseInt(oCanvas.width) / jQuery("#eye-image-orig").get(0).width;

  var oSelect = new Object();
  var oSelect = jQuery("#eye-crop").get(0).style;

  // The masks are the four divs surrounding the crop area.
  var oMask = new Object();
  oMask.North = jQuery("#eye-mt").get(0).style;
  oMask.West = jQuery("#eye-ml").get(0).style;
  oMask.South = jQuery("#eye-mb").get(0).style;
  oMask.East = jQuery("#eye-mr").get(0).style;

  // The handles are the images in each corner that can be dragged to resize the crop area.
  var oHand = new Object();
  oHand.NE = jQuery("#eye-ne").get(0).style;
  oHand.NW = jQuery("#eye-nw").get(0).style;
  oHand.SE = jQuery("#eye-se").get(0).style;
  oHand.SW = jQuery("#eye-sw").get(0).style;

  // Build references to the value display input elements.
  var dsp = new Array();
  $("#eyedrop-parameters").find("input").each( function(i) {
    dsp[this.id.split('-').pop()] = this;
  });

  // Gather the parameters for this layer.
  var params = new Array();
  $(container).find(".eyedrop-group-param").each( function(i) {
    params[this.id.split('-').pop()] = this.value;
  });

  /**
   * Editor initialization
   */
  eye.initialize = function (action) {

    drag[L]  = (params['x'] * zoom);
    drag[W]  = (params['w'] * zoom);
    drag[T]  = (params['y'] * zoom);
    drag[H]  = (params['h'] * zoom);
    drag[CanvasW] = parseInt(oCanvas.width);
    drag[CanvasH] = (drag[CanvasW] / ratioOrig);

    oHand.SW.left = oHand.NW.left = oHand.NW.top = oHand.NE.top = "-"+handleOffset+'px';

    eye.maskResizeLeft(drag[L], drag[W], drag[CanvasW]);
    eye.maskResizeTop(drag[T], drag[H], drag[CanvasH]);
    eye.maskResizeRight(drag[L] + drag[W], drag[W], drag[CanvasW]);
    eye.maskResizeBottom(drag[T] + drag[H], drag[H], drag[CanvasH]);

    // This syntax to output values into display boxes
    dsp['debug1'].value = "Help to debug";
    dsp['debug2'].value = "is in code";
  }

  /**
   * Mousedown handler
   */
  eye.mousedown = function (event) {

    // Capture mouse
    if (!document.dragging) {
      $(document).bind('mousemove', eye.mousemove).bind('mouseup', eye.mouseup);
      document.dragging = true;

      // Record the initial mouse position.
      drag[X1] = event.clientX;
      drag[Y1] = event.clientY;
      drag[CanvasW] = parseInt(oCanvas.width);
      drag[CanvasH] = (drag[CanvasW] / ratioOrig);

      target = event.target.id || event.srcElement.id;

      drag[T] = parseInt(oSelect.top);
      drag[L] = parseInt(oSelect.left);
      drag[W] = parseInt(oSelect.width);
      drag[H] = parseInt(oSelect.height);

      eye.setMouseLimits(target);

      // Process this event like a mouse move.
      eye.mousemove(event);
    }
    return false;
  }

  /**
   * Mousemove handler
   */
  eye.mousemove = function (event) {

    // Get main coordinates
    drag[X] = event.clientX;
    drag[Y] = event.clientY;

    var xMove = (drag[X] - drag[X1]);
    var yMove = (drag[Y] - drag[Y1]);

    xMove = Math.max(limit[X1], Math.min (limit[X2], xMove));
    yMove = Math.max(limit[Y1], Math.min (limit[Y2], yMove));

    switch(target) {
      case 'eye-crop':
        eye.maskMoveX(drag[L] + xMove, drag[W], drag[CanvasW]);
        eye.maskMoveY(drag[T] + yMove, drag[H], drag[CanvasH]);
        break;
      case 'eye-nw':
        eye.maskResizeLeft(drag[L] + xMove, drag[W] - xMove, drag[CanvasW]);
        eye.maskResizeTop(drag[T] + yMove, drag[H] - yMove, drag[CanvasH]);
        break;
      case 'eye-ne':
        eye.maskResizeRight(drag[L] + drag[W] + xMove, drag[W] + xMove, drag[CanvasW]);
        eye.maskResizeTop(drag[T] + yMove, drag[H] - yMove, drag[CanvasH]);
        break;
      case 'eye-sw':
        eye.maskResizeLeft(drag[L] + xMove, drag[W] - xMove, drag[CanvasW]);
        eye.maskResizeBottom(drag[T] + drag[H] + yMove, drag[H] + yMove, drag[CanvasH]);
        break;
      case 'eye-se':
        eye.maskResizeRight(drag[L] + drag[W] + xMove, drag[W] + xMove, drag[CanvasW]);
        eye.maskResizeBottom(drag[T] + drag[H] + yMove, drag[H] + yMove, drag[CanvasH]);
        break;
    }
  }

  /**
  * Mouseup handler
  */
  eye.mouseup = function () {
    // Uncapture mouse
    $(document).unbind('mousemove', eye.mousemove);
    $(document).unbind('mouseup', eye.mouseup);
    document.dragging = false;
  }

  eye.maskMoveX = function (selectLeft, selectWidth, canvasWidth) {

    oSelect.left       = selectLeft + 'px';
    oMask.West.width   = selectLeft + 'px';
    oMask.North.left   = selectLeft + 'px';
    oMask.South.width  = selectLeft + selectWidth + "px";
    oMask.East.left    = selectLeft + selectWidth + "px";
    oMask.North.width  = canvasWidth - selectLeft + "px";
    oMask.East.width   = canvasWidth - selectLeft - selectWidth + 'px';
  }

  eye.maskMoveY = function (selectTop, selectHeight, canvasHeight) {
    oSelect.top        = selectTop + 'px';
    oMask.North.height = selectTop + 'px';
    oMask.East.top     = selectTop + 'px';
    oMask.West.height  = selectTop + selectHeight + "px";
    oMask.South.top    = selectTop + selectHeight + "px";
    oMask.East.height  = canvasHeight - selectTop + "px";
    oMask.South.height = canvasHeight - selectTop - selectHeight + 'px';
  }

  eye.maskResizeLeft = function (selectLeft, selectWidth, canvasWidth) {
    oSelect.left      = selectLeft + 'px';
    oSelect.width     = selectWidth + 'px';
    oMask.West.width  = selectLeft + 'px';
    oMask.North.left  = selectLeft + 'px';
    oMask.North.width = canvasWidth - selectLeft + "px";
    oHand.NE.left     = selectWidth - handleOffset + "px";
    oHand.SE.left     = selectWidth - handleOffset + "px";
  }

  eye.maskResizeRight  = function (selectRight, selectWidth, canvasWidth) {

    oSelect.width      = selectWidth + 'px';
    oMask.East.left    = selectRight + "px";
    oMask.South.width  = selectRight + "px";
    oMask.East.width   = canvasWidth - selectRight + "px";
    oHand.NE.left      = selectWidth - handleOffset + "px";
    oHand.SE.left      = selectWidth - handleOffset + "px";
  }

  eye.maskResizeTop = function (selectTop, selectHeight, canvasHeight) {
    oSelect.top        = selectTop + 'px';
    oSelect.height     = selectHeight + 'px';
    oMask.North.height = selectTop + "px";
    oMask.East.top     = selectTop + "px";
    oMask.East.height  = canvasHeight - selectTop + "px";
    oHand.SW.top       = selectHeight - handleOffset + "px";
    oHand.SE.top       = selectHeight - handleOffset + "px";
  }

  eye.maskResizeBottom = function (selectBottom, selectHeight, canvasHeight) {
    oSelect.height     = selectHeight + 'px';
    oMask.South.top    = selectBottom + "px";
    oMask.West.height  = selectBottom + "px";
    oMask.South.height = canvasHeight - selectBottom + "px";
    oHand.SW.top       = selectHeight - handleOffset + "px";
    oHand.SE.top       = selectHeight - handleOffset + "px";
  }

  eye.setMouseLimits = function (target) {

    limit[X1] = parseInt(oMask.West.width) * -1;
    limit[Y1] = parseInt(oMask.North.height) * -1;
    limit[X2] = parseInt(oMask.East.width);
    limit[Y2] = parseInt(oMask.South.height);
    var width = parseInt(oSelect.width) - imgCropMin;
    var height = parseInt(oSelect.height) - imgCropMin;

    switch (target) {
      case 'eye-nw':
        limit[X2] = width;
        limit[Y2] = height;
        break;
      case 'eye-ne':
        limit[X1] = width * -1;
        limit[Y2] = height;
        break;
      case 'eye-sw':
        limit[Y1] = height * -1;
        limit[X2] = width;
        break;
      case 'eye-se':
        limit[X1] = width * -1;
        limit[Y1] = height * -1;
        break;
    }
  }

  // This returns the true width of the crop, if the ratio of width:height
  // should be fixed.
  eye.fixedRatioWidth = function (kX, kY) {
    var a1 = (Math.atan(imgOrigHeight/imgOrigWidth) * (180 / Math.PI));
    var a2 = 90 - a1;
    var a3 = (Math.atan(kY/kX) * (180 / Math.PI))
    var a4 = a3 - a2;
    var k3 = Math.sqrt(Math.pow(kX,2)+Math.pow(kY,2));
    var k6 = Math.sin(a4 / (180 / Math.PI)) * k3;
    var finalx =  Math.cos(a1) * k6;
    return finalx;
  }

    // Show the editor.
  jQuery("#eyedrop-container").fadeIn();

  // Initialize
  eye.initialize('crop');

  // Install mousedown handler (the others are set on the document on-demand)
  $('*', "#eyedrop-editor").mousedown(eye.mousedown);

  // Set linked elements/callback
  if (callback) {
    eye.linkTo(callback);
  }
}
1	// $Id: jquery.eyedrop.js,v 1.2 2007/01/05 16:33:31 sime Exp $
2	jQuery.fn.eyedrop = function () {
3	$.eyedrop(this);
4	return this;
5	};
6
7	// Called to initialize and display layers
8	jQuery.eyedrop = function (container) {
9
10	var container = $(container).get(0);
11	return container.eyedrop \|\| (container.eyedrop = new jQuery._eyedrop(container));
12	}
13
14	jQuery._eyedrop = function (container, callback) {
15
16	// Store eyedrop object
17	var eye = this;
18
19	// Setting some parameters here, need more control over these later.
20	var action = 'crop';
21	var target = '';
22	var group = container.id.split('-').pop();
23	var canvasWidth = '500px';
24	var handleOffset = 4; // Displacement of handle on crop boundary
25	var imgCropMin = 10; // Minimum cropping size in pixels.
26
27	// Get the canvas ratio (ratio of original image).
28	// TODO: This line is not compatible with IE6 or IE7 (getting the image size).
29	var ratioOrig = parseInt(jQuery("#eye-image-orig").get(0).width) / parseInt(jQuery("#eye-image-orig").get(0).height);
30	var ratioSelect = 0; // 0 means no ratio applied.
31
32	// drag[] is an array for capturing values during various mouse events.
33	var drag = new Array(0,0,0,0,0,0,0,0,0,0,0,0);
34	// limit[] is an array for setting the drag boundaries.
35	var limit = new Array(0,0,0,0);
36
37	// X and Y = current mouse position
38	// X1 and Y1 = starting position.
39	// L and T captures the initial position of a moving object
40	// W and H captures the horizontal/vertical distance from X and Y.
41	// CanvasW and CanvasH captures the size of the canvas on mousedown
42	var X = 0; var Y = 1; var X1 = 2; var Y1 = 3; var X2 = 4; var Y2 = 5; var L = 6; var T = 7; var W = 8; var H = 9; var CanvasW = 10; var CanvasH = 11;
43
44	var oCanvas = jQuery("#eye-image").get(0).style;
45	// Apply canvas width;
46	oCanvas.width = canvasWidth;
47
48	// Find the ratio between the canvas size and the original image.
49	// TODO: This line is not compatible with IE6 or IE7 (getting the image size).
50	var zoom = parseInt(oCanvas.width) / jQuery("#eye-image-orig").get(0).width;
51
52	var oSelect = new Object();
53	var oSelect = jQuery("#eye-crop").get(0).style;
54
55	// The masks are the four divs surrounding the crop area.
56	var oMask = new Object();
57	oMask.North = jQuery("#eye-mt").get(0).style;
58	oMask.West = jQuery("#eye-ml").get(0).style;
59	oMask.South = jQuery("#eye-mb").get(0).style;
60	oMask.East = jQuery("#eye-mr").get(0).style;
61
62	// The handles are the images in each corner that can be dragged to resize the crop area.
63	var oHand = new Object();
64	oHand.NE = jQuery("#eye-ne").get(0).style;
65	oHand.NW = jQuery("#eye-nw").get(0).style;
66	oHand.SE = jQuery("#eye-se").get(0).style;
67	oHand.SW = jQuery("#eye-sw").get(0).style;
68
69	// Build references to the value display input elements.
70	var dsp = new Array();
71	$("#eyedrop-parameters").find("input").each( function(i) {
72	dsp[this.id.split('-').pop()] = this;
73	});
74
75	// Gather the parameters for this layer.
76	var params = new Array();
77	$(container).find(".eyedrop-group-param").each( function(i) {
78	params[this.id.split('-').pop()] = this.value;
79	});
80
81	/**
82	* Editor initialization
83	*/
84	eye.initialize = function (action) {
85
86	drag[L] = (params['x'] * zoom);
87	drag[W] = (params['w'] * zoom);
88	drag[T] = (params['y'] * zoom);
89	drag[H] = (params['h'] * zoom);
90	drag[CanvasW] = parseInt(oCanvas.width);
91	drag[CanvasH] = (drag[CanvasW] / ratioOrig);
92
93	oHand.SW.left = oHand.NW.left = oHand.NW.top = oHand.NE.top = "-"+handleOffset+'px';
94
95	eye.maskResizeLeft(drag[L], drag[W], drag[CanvasW]);
96	eye.maskResizeTop(drag[T], drag[H], drag[CanvasH]);
97	eye.maskResizeRight(drag[L] + drag[W], drag[W], drag[CanvasW]);
98	eye.maskResizeBottom(drag[T] + drag[H], drag[H], drag[CanvasH]);
99
100	// This syntax to output values into display boxes
101	dsp['debug1'].value = "Help to debug";
102	dsp['debug2'].value = "is in code";
103	}
104
105	/**
106	* Mousedown handler
107	*/
108	eye.mousedown = function (event) {
109
110	// Capture mouse
111	if (!document.dragging) {
112	$(document).bind('mousemove', eye.mousemove).bind('mouseup', eye.mouseup);
113	document.dragging = true;
114
115	// Record the initial mouse position.
116	drag[X1] = event.clientX;
117	drag[Y1] = event.clientY;
118	drag[CanvasW] = parseInt(oCanvas.width);
119	drag[CanvasH] = (drag[CanvasW] / ratioOrig);
120
121	target = event.target.id \|\| event.srcElement.id;
122
123	drag[T] = parseInt(oSelect.top);
124	drag[L] = parseInt(oSelect.left);
125	drag[W] = parseInt(oSelect.width);
126	drag[H] = parseInt(oSelect.height);
127
128	eye.setMouseLimits(target);
129
130	// Process this event like a mouse move.
131	eye.mousemove(event);
132	}
133	return false;
134	}
135
136	/**
137	* Mousemove handler
138	*/
139	eye.mousemove = function (event) {
140
141	// Get main coordinates
142	drag[X] = event.clientX;
143	drag[Y] = event.clientY;
144
145	var xMove = (drag[X] - drag[X1]);
146	var yMove = (drag[Y] - drag[Y1]);
147
148	xMove = Math.max(limit[X1], Math.min (limit[X2], xMove));
149	yMove = Math.max(limit[Y1], Math.min (limit[Y2], yMove));
150
151	switch(target) {
152	case 'eye-crop':
153	eye.maskMoveX(drag[L] + xMove, drag[W], drag[CanvasW]);
154	eye.maskMoveY(drag[T] + yMove, drag[H], drag[CanvasH]);
155	break;
156	case 'eye-nw':
157	eye.maskResizeLeft(drag[L] + xMove, drag[W] - xMove, drag[CanvasW]);
158	eye.maskResizeTop(drag[T] + yMove, drag[H] - yMove, drag[CanvasH]);
159	break;
160	case 'eye-ne':
161	eye.maskResizeRight(drag[L] + drag[W] + xMove, drag[W] + xMove, drag[CanvasW]);
162	eye.maskResizeTop(drag[T] + yMove, drag[H] - yMove, drag[CanvasH]);
163	break;
164	case 'eye-sw':
165	eye.maskResizeLeft(drag[L] + xMove, drag[W] - xMove, drag[CanvasW]);
166	eye.maskResizeBottom(drag[T] + drag[H] + yMove, drag[H] + yMove, drag[CanvasH]);
167	break;
168	case 'eye-se':
169	eye.maskResizeRight(drag[L] + drag[W] + xMove, drag[W] + xMove, drag[CanvasW]);
170	eye.maskResizeBottom(drag[T] + drag[H] + yMove, drag[H] + yMove, drag[CanvasH]);
171	break;
172	}
173	}
174
175	/**
176	* Mouseup handler
177	*/
178	eye.mouseup = function () {
179	// Uncapture mouse
180	$(document).unbind('mousemove', eye.mousemove);
181	$(document).unbind('mouseup', eye.mouseup);
182	document.dragging = false;
183	}
184
185	eye.maskMoveX = function (selectLeft, selectWidth, canvasWidth) {
186
187	oSelect.left = selectLeft + 'px';
188	oMask.West.width = selectLeft + 'px';
189	oMask.North.left = selectLeft + 'px';
190	oMask.South.width = selectLeft + selectWidth + "px";
191	oMask.East.left = selectLeft + selectWidth + "px";
192	oMask.North.width = canvasWidth - selectLeft + "px";
193	oMask.East.width = canvasWidth - selectLeft - selectWidth + 'px';
194	}
195
196	eye.maskMoveY = function (selectTop, selectHeight, canvasHeight) {
197	oSelect.top = selectTop + 'px';
198	oMask.North.height = selectTop + 'px';
199	oMask.East.top = selectTop + 'px';
200	oMask.West.height = selectTop + selectHeight + "px";
201	oMask.South.top = selectTop + selectHeight + "px";
202	oMask.East.height = canvasHeight - selectTop + "px";
203	oMask.South.height = canvasHeight - selectTop - selectHeight + 'px';
204	}
205
206	eye.maskResizeLeft = function (selectLeft, selectWidth, canvasWidth) {
207	oSelect.left = selectLeft + 'px';
208	oSelect.width = selectWidth + 'px';
209	oMask.West.width = selectLeft + 'px';
210	oMask.North.left = selectLeft + 'px';
211	oMask.North.width = canvasWidth - selectLeft + "px";
212	oHand.NE.left = selectWidth - handleOffset + "px";
213	oHand.SE.left = selectWidth - handleOffset + "px";
214	}
215
216	eye.maskResizeRight = function (selectRight, selectWidth, canvasWidth) {
217
218	oSelect.width = selectWidth + 'px';
219	oMask.East.left = selectRight + "px";
220	oMask.South.width = selectRight + "px";
221	oMask.East.width = canvasWidth - selectRight + "px";
222	oHand.NE.left = selectWidth - handleOffset + "px";
223	oHand.SE.left = selectWidth - handleOffset + "px";
224	}
225
226	eye.maskResizeTop = function (selectTop, selectHeight, canvasHeight) {
227	oSelect.top = selectTop + 'px';
228	oSelect.height = selectHeight + 'px';
229	oMask.North.height = selectTop + "px";
230	oMask.East.top = selectTop + "px";
231	oMask.East.height = canvasHeight - selectTop + "px";
232	oHand.SW.top = selectHeight - handleOffset + "px";
233	oHand.SE.top = selectHeight - handleOffset + "px";
234	}
235
236	eye.maskResizeBottom = function (selectBottom, selectHeight, canvasHeight) {
237	oSelect.height = selectHeight + 'px';
238	oMask.South.top = selectBottom + "px";
239	oMask.West.height = selectBottom + "px";
240	oMask.South.height = canvasHeight - selectBottom + "px";
241	oHand.SW.top = selectHeight - handleOffset + "px";
242	oHand.SE.top = selectHeight - handleOffset + "px";
243	}
244
245	eye.setMouseLimits = function (target) {
246
247	limit[X1] = parseInt(oMask.West.width) * -1;
248	limit[Y1] = parseInt(oMask.North.height) * -1;
249	limit[X2] = parseInt(oMask.East.width);
250	limit[Y2] = parseInt(oMask.South.height);
251	var width = parseInt(oSelect.width) - imgCropMin;
252	var height = parseInt(oSelect.height) - imgCropMin;
253
254	switch (target) {
255	case 'eye-nw':
256	limit[X2] = width;
257	limit[Y2] = height;
258	break;
259	case 'eye-ne':
260	limit[X1] = width * -1;
261	limit[Y2] = height;
262	break;
263	case 'eye-sw':
264	limit[Y1] = height * -1;
265	limit[X2] = width;
266	break;
267	case 'eye-se':
268	limit[X1] = width * -1;
269	limit[Y1] = height * -1;
270	break;
271	}
272	}
273
274	// This returns the true width of the crop, if the ratio of width:height
275	// should be fixed.
276	eye.fixedRatioWidth = function (kX, kY) {
277	var a1 = (Math.atan(imgOrigHeight/imgOrigWidth) * (180 / Math.PI));
278	var a2 = 90 - a1;
279	var a3 = (Math.atan(kY/kX) * (180 / Math.PI))
280	var a4 = a3 - a2;
281	var k3 = Math.sqrt(Math.pow(kX,2)+Math.pow(kY,2));
282	var k6 = Math.sin(a4 / (180 / Math.PI)) * k3;
283	var finalx = Math.cos(a1) * k6;
284	return finalx;
285	}
286
287	// Show the editor.
288	jQuery("#eyedrop-container").fadeIn();
289
290	// Initialize
291	eye.initialize('crop');
292
293	// Install mousedown handler (the others are set on the document on-demand)
294	$('*', "#eyedrop-editor").mousedown(eye.mousedown);
295
296	// Set linked elements/callback
297	if (callback) {
298	eye.linkTo(callback);
299	}
300	}