/*
* imgAreaSelect jQuery plugin
- * version 0.9.3
+ * version 0.9.10
*
- * Copyright (c) 2008-2010 Michal Wojciechowski (odyniec.net)
+ * Copyright (c) 2008-2013 Michal Wojciechowski (odyniec.net)
*
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
scaleX, scaleY,
- resizeMargin = 10,
-
resize,
minWidth, minHeight, maxWidth, maxHeight,
docElem = document.documentElement,
+ ua = navigator.userAgent,
+
$p, d, i, o, w, h, adjusted;
function viewX(x) {
var sx = noScale || scaleX, sy = noScale || scaleY;
selection = {
- x1: round(x1 / sx),
- y1: round(y1 / sy),
- x2: round(x2 / sx),
- y2: round(y2 / sy)
+ x1: round(x1 / sx || 0),
+ y1: round(y1 / sy || 0),
+ x2: round(x2 / sx || 0),
+ y2: round(y2 / sy || 0)
};
selection.width = selection.x2 - selection.x1;
}
function adjust() {
- if (!$img.width())
+ if (!imgLoaded || !$img.width())
return;
imgOfs = { left: round($img.offset().left), top: round($img.offset().top) };
- imgWidth = $img.width();
- imgHeight = $img.height();
+ imgWidth = $img.innerWidth();
+ imgHeight = $img.innerHeight();
+
+ imgOfs.top += ($img.outerHeight() - imgHeight) >> 1;
+ imgOfs.left += ($img.outerWidth() - imgWidth) >> 1;
- minWidth = options.minWidth || 0;
- minHeight = options.minHeight || 0;
- maxWidth = min(options.maxWidth || 1<<24, imgWidth);
- maxHeight = min(options.maxHeight || 1<<24, imgHeight);
+ minWidth = round(options.minWidth / scaleX) || 0;
+ minHeight = round(options.minHeight / scaleY) || 0;
+ maxWidth = round(min(options.maxWidth / scaleX || 1<<24, imgWidth));
+ maxHeight = round(min(options.maxHeight / scaleY || 1<<24, imgHeight));
if ($().jquery == '1.3.2' && position == 'fixed' &&
!docElem['getBoundingClientRect'])
imgOfs.left += max(document.body.scrollLeft, docElem.scrollLeft);
}
- parOfs = $.inArray($parent.css('position'), ['absolute', 'relative']) + 1 ?
+ parOfs = /absolute|relative/.test($parent.css('position')) ?
{ left: round($parent.offset().left) - $parent.scrollLeft(),
top: round($parent.offset().top) - $parent.scrollTop() } :
position == 'fixed' ?
switch ($handles.length) {
case 8:
- $($handles[4]).css({ left: w / 2 });
- $($handles[5]).css({ left: w, top: h / 2 });
- $($handles[6]).css({ left: w / 2, top: h });
- $($handles[7]).css({ top: h / 2 });
+ $($handles[4]).css({ left: w >> 1 });
+ $($handles[5]).css({ left: w, top: h >> 1 });
+ $($handles[6]).css({ left: w >> 1, top: h });
+ $($handles[7]).css({ top: h >> 1 });
case 4:
$handles.slice(1,3).css({ left: w });
$handles.slice(2,4).css({ top: h });
}
if (resetKeyPress !== false) {
- if ($.imgAreaSelect.keyPress != docKeyPress)
+ if ($.imgAreaSelect.onKeyPress != docKeyPress)
$(document).unbind($.imgAreaSelect.keyPress,
$.imgAreaSelect.onKeyPress);
$.imgAreaSelect.onKeyPress = docKeyPress);
}
- if ($.browser.msie && $border.outerWidth() - $border.innerWidth() == 2) {
+ if (msie && $border.outerWidth() - $border.innerWidth() == 2) {
$border.css('margin', 0);
setTimeout(function () { $border.css('margin', 'auto'); }, 0);
}
resize = '';
if (options.resizable) {
- if (y <= resizeMargin)
+ if (y <= options.resizeMargin)
resize = 'n';
- else if (y >= selection.height - resizeMargin)
+ else if (y >= selection.height - options.resizeMargin)
resize = 's';
- if (x <= resizeMargin)
+ if (x <= options.resizeMargin)
resize += 'w';
- else if (x >= selection.width - resizeMargin)
+ else if (x >= selection.width - options.resizeMargin)
resize += 'e';
}
function docMouseUp(event) {
$('body').css('cursor', '');
-
if (options.autoHide || selection.width * selection.height == 0)
hide($box.add($outer), function () { $(this).hide(); });
- options.onSelectEnd(img, getSelection());
-
$(document).unbind('mousemove', selectingMouseMove);
$box.mousemove(areaMouseMove);
+
+ options.onSelectEnd(img, getSelection());
}
function areaMouseDown(event) {
}
function selectingMouseMove(event) {
- x2 = resize == '' || /w|e/.test(resize) || aspectRatio ? evX(event) : viewX(selection.x2);
- y2 = resize == '' || /n|s/.test(resize) || aspectRatio ? evY(event) : viewY(selection.y2);
+ x2 = /w|e|^$/.test(resize) || aspectRatio ? evX(event) : viewX(selection.x2);
+ y2 = /n|s|^$/.test(resize) || aspectRatio ? evY(event) : viewY(selection.y2);
doResize();
}
function startSelection() {
+ $(document).unbind('mousemove', startSelection);
adjust();
x2 = x1;
resize = '';
- if ($outer.is(':not(:visible)'))
+ if (!$outer.is(':visible'))
$box.add($outer).hide().fadeIn(options.fadeSpeed||0);
shown = true;
}
function cancelSelection() {
- $(document).unbind('mousemove', startSelection);
+ $(document).unbind('mousemove', startSelection)
+ .unbind('mouseup', cancelSelection);
hide($box.add($outer));
- selection = { x1: selX(x1), y1: selY(y1), x2: selX(x1), y2: selY(y1),
- width: 0, height: 0 };
+ setSelection(selX(x1), selY(y1), selX(x1), selY(y1));
- options.onSelectChange(img, getSelection());
- options.onSelectEnd(img, getSelection());
+ if (!(this instanceof $.imgAreaSelect)) {
+ options.onSelectChange(img, getSelection());
+ options.onSelectEnd(img, getSelection());
+ }
}
function imgMouseDown(event) {
startX = x1 = evX(event);
startY = y1 = evY(event);
- $(document).one('mousemove', startSelection)
- .one('mouseup', cancelSelection);
+ $(document).mousemove(startSelection).mouseup(cancelSelection);
return false;
}
setOptions(options = $.extend({
classPrefix: 'imgareaselect',
movable: true,
- resizable: true,
parent: 'body',
+ resizable: true,
+ resizeMargin: 10,
onInit: function () {},
onSelectStart: function () {},
onSelectChange: function () {},
};
function styleOptions($elem, props) {
- for (option in props)
+ for (var option in props)
if (options[option] !== undefined)
$elem.css(props[option], options[option]);
}
if (o = options.borderColor2)
$($border[1]).css({ borderStyle: 'dashed', borderColor: o });
- $box.append($area.add($border).add($handles).add($areaOpera));
+ $box.append($area.add($border).add($areaOpera)).append($handles);
- if ($.browser.msie) {
- if (o = $outer.css('filter').match(/opacity=([0-9]+)/))
+ if (msie) {
+ if (o = ($outer.css('filter')||'').match(/opacity=(\d+)/))
$outer.css('opacity', o[1]/100);
- if (o = $border.css('filter').match(/opacity=([0-9]+)/))
+ if (o = ($border.css('filter')||'').match(/opacity=(\d+)/))
$border.css('opacity', o[1]/100);
}
}
this.remove = function () {
- $img.unbind('mousedown', imgMouseDown);
+ setOptions({ disable: true });
$box.add($outer).remove();
};
this.setSelection = setSelection;
+ this.cancelSelection = cancelSelection;
+
this.update = doUpdate;
+ var msie = (/msie ([\w.]+)/i.exec(ua)||[])[1],
+ opera = /opera/i.test(ua),
+ safari = /webkit/i.test(ua) && !/chrome/i.test(ua);
+
$p = $img;
while ($p.length) {
zIndex = options.zIndex || zIndex;
- if ($.browser.msie)
+ if (msie)
$img.attr('unselectable', 'on');
- $.imgAreaSelect.keyPress = $.browser.msie ||
- $.browser.safari ? 'keydown' : 'keypress';
+ $.imgAreaSelect.keyPress = msie || safari ? 'keydown' : 'keypress';
+
+ if (opera)
- if ($.browser.opera)
$areaOpera = div().css({ width: '100%', height: '100%',
position: 'absolute', zIndex: zIndex + 2 || 2 });
img.complete || img.readyState == 'complete' || !$img.is('img') ?
imgLoad() : $img.one('load', imgLoad);
+
+ if (!imgLoaded && msie && msie >= 7)
+ img.src = img.src;
};
$.fn.imgAreaSelect = function (options) {
fnp / redakcja.git / blobdiff