Current section

Files

Jump to
zotonic_mod_admin priv lib js modules z.cropcenter.js
Raw

priv/lib/js/modules/z.cropcenter.js

$(function() {
$.extend($.fn,
{
cropcenter: function(settings) {
var config = {
editable: true,
hiddenInput: "#crop_center",
removeButton: "#crop-center-remove",
message: "#crop-center-message"
};
if (settings) {
$.extend(config, settings);
}
var el = this;
el.find("img").one('load', function() {
var $img = $(this);
setTimeout(function() {
// do stuff
var scale = parseInt(el.attr("data-original-width"), 10) / $img.width();
var offset_h = $img.position().left + parseInt($img.css("margin-left"), 10);
var offset_v = $img.position().top + parseInt($img.css("margin-top"), 10);
var $guide_h = $("<div>").attr("class", "admin-cropguide admin-cropguide-horiz").hide();
var $guide_v = $("<div>").attr("class", "admin-cropguide admin-cropguide-vert").hide();
el.append($guide_h).append($guide_v);
function removeCrop() {
$guide_h.fadeOut();
$guide_v.fadeOut();
$(config.hiddenInput).val("");
$(config.removeButton).hide();
$(config.message).show();
return false;
}
function setCrop(x, y) {
// here x,y are in image coordinates
$guide_h.show().css("top", y/scale + offset_v);
$guide_v.show().css("left", x/scale + offset_h);
$(config.hiddenInput).val((x>=0?"+":"")+x + (y>=0?"+":"")+y);
$(config.removeButton).show();
$(config.message).hide();
}
function setCropFromEvent(e) {
var o = el.offset();
var x = e.pageX - o.left;
var y = e.pageY - o.top;
setCrop(Math.ceil(x*scale), Math.ceil(y*scale));
}
function setCropFromValue(val) {
var l = val.match(/([+-]\d+)([+-]\d+)/);
if (!l) {
removeCrop();
} else {
setCrop(parseInt(l[1], 10), parseInt(l[2], 10));
}
}
// hook up the events
if (config.editable) {
var dragging = false;
el.mousedown(function(e) {
if (e.which == 1) {
dragging = true;
setCropFromEvent(e);
}
});
el.mousemove(function(e) {
if (dragging) setCropFromEvent(e);
});
el.mouseup(function() {
dragging = false;
});
$(config.removeButton).click(removeCrop);
}
setCropFromValue($(config.hiddenInput).val());
}, 100);
}).each(function() {
if (this.complete) {
$(this).trigger('load');
}
});
}
});
});