По умолчанию стоит строго квадратная обрезка, тоесть увеличиваем рамку по ширине а у нас увеличивается и высота. Вопрос как сделать ширину и высоту рамки независимыми, чтобы можно было сделать прямоугольные аватарки как в том же вконтакте.
Методом вычислений вышел на файл: /components/com_community/assets/release/js/bundle.js,
но вот что где и как изменить не могу понять. Изначально он скомпилировал в мин версию, вот открытая версия, ток выкинул немного лишнего а то не помещается все:
function(a, b, c, d) {
joms.util || (joms.util = {}), joms.util.crop = d(a, b, c)
}(window, joms.jQuery, !joms.mobile, function(a, b, c) {
function d(a) {
return d.attach(a)
}
function e() {
p.css({
top: "",
left: "",
right: "",
bottom: "",
width: "",
height: "",
webkitTransform: "",
mozTransform: "",
transform: ""
})
}
function f() {
var a = q[0],
b = q.children("img"),
c = p.position();
s = {
imageWidth: b.width(),
imageHeight: b.height(),
wrapperTop: a.scrollTop,
wrapperLeft: a.scrollLeft,
wrapperWidth: q.width(),
wrapperHeight: q.height(),
cropperTop: c.top + a.scrollTop,
cropperLeft: c.left + a.scrollLeft,
cropperWidth: p.outerWidth(),
cropperHeight: p.outerHeight()
}
}
function g(a) {
f(), t = l(a)
}
function h(a) {
var b, c = s,
d = a.deltaY,
e = a.deltaX;
e = Math.min(e, c.imageWidth - c.cropperWidth - c.cropperLeft), e = Math.max(e, 0 - c.cropperLeft), d = Math.min(d, c.imageHeight - c.cropperHeight - c.cropperTop), d = Math.max(d, 0 - c.cropperTop), b = "translate3d(" + e + "px, " + d + "px, 0)", p.css({
webkitTransform: b,
mozTransform: b,
transform: b
})
}
function i(a) {
var b = t,
c = s,
d = {};
b.match(/n/)? (
d.top = "auto",
d.bottom = c.wrapperHeight - c.cropperTop - c.cropperHeight,
d.height = c.cropperHeight - a.deltaY
) : b.match(/s/) && (
d.bottom = "auto",
d.top = c.cropperTop,
d.height = c.cropperHeight + a.deltaY
), b.match(/e/)? (
d.right = "auto",
d.left = c.cropperLeft,
d.width = c.cropperWidth + a.deltaX
) : b.match(/w/) && (
d.left = "auto",
d.right = c.wrapperWidth - c.cropperLeft - c.cropperWidth,
d.width = c.cropperWidth - a.deltaX
),
d.width = d.height = Math.max(d.width || 0, d.height || 0, 64),
b.match(/n/)? d.height = Math.min(d.height, c.wrapperHeight - d.bottom) : b.match(/s/)? d.height = Math.min(d.height, c.imageHeight - d.top) : "auto" !== p[0].style.top ? d.height = Math.min(d.height, c.imageHeight - parseInt(p.css("top"))) : d.height = Math.min(d.height, c.wrapperHeight - parseInt(p.css("bottom"))), b.match(/e/)? d.width = Math.min(d.width, c.imageWidth - d.left) : b.match(/w/)? d.width = Math.min(d.width, c.wrapperWidth - d.right) : "auto" !== p[0].style.left ? d.width = Math.min(d.width, c.imageWidth - parseInt(p.css("left"))) : d.width = Math.min(d.width, c.wrapperWidth - parseInt(p.css("right"))), d.width = d.height = Math.min(d.width, d.height), p.css(d)
}
function j() {
var a = p.position(),
b = s;
p.css({
top: Math.max(a.top + b.wrapperTop, 0),
left: Math.max(a.left + b.wrapperLeft, 0),
right: "",
bottom: "",
webkitTransform: "",
mozTransform: "",
transform: ""
}), f()
}
function k(a, b) {
var c = p.offset();
return {
top: b - c.top,
left: a - c.left
}
}
function l(a) {
var b = c ? 15 : 20,
d = k(a.center.pageX, a.center.pageY),
e = s,
f = "";
return d.top < b ? f += "n" : d.top > e.cropperHeight - b && (f += "s"), d.left < b ? f += "w" : d.left > e.cropperWidth - b && (f += "e"), f
}
function m() {
c && p.on("mousemove.joms-cropper", o)
}
function n() {
c && p.off("mousemove.joms-cropper")
}
function o(a) {
var c, d = b(a.target).parent().offset(),
e = a.pageX - d.left,
g = a.pageY - d.top,
h = 15,
i = "";
f(),
c = s,
g < c.cropperTop - c.wrapperTop + h ? i += "n" : g > c.cropperTop - c.wrapperTop + c.cropperHeight - h && (i += "s"),
e < c.cropperLeft - c.wrapperLeft + h ? i += "w" : e > c.cropperLeft - c.wrapperLeft + c.cropperWidth - h && (i += "e"),
p.css({
cursor: i ? i + "-resize" : ""
})
}
var p, q, r, s, t;
d.init = function() {
q || (q = b('<div class="joms-cropper__wrapper" />')), p || (p = b('<div class="joms-cropper__box" />'))
}, d.attach = function(a) {
return d.init(), d.detach(), e(), b(a).wrap(q), q = b(a).parent(), p.insertAfter(a), r || (r = new joms.Hammer(p[0]), r.on("touch drag release", function(a) {
a.stopPropagation(), a.preventDefault(), a.gesture.stopPropagation(), a.gesture.preventDefault(), "touch" === a.type ? (n(), g(a.gesture)) : "release" !== a.type ? u(a.gesture) : (j(a.gesture), m())
})), m(), a
}, d.detach = function() {
d.init(), p.detach(), q.children().unwrap(), q.detach()
}, d.getSelection = function() {
var a = s;
return {
x: a.cropperLeft,
y: a.cropperTop,
width: a.cropperWidth,
height: a.cropperHeight
}
};
var u = joms._.throttle(function(a) {
t ? i(a) : h(a)
}, c ? 10 : 100);
return d
}), c("utils/crop", function() {}), c("utils/map", ["core"], function() {
joms.util || (joms.util = {}), joms.util.map = function(a) {
if ("function" == typeof a) {
if (window.google && window.google.map && window.google.map.places) return void a();
if (joms.util.map.loading) return void joms.util.map.queue.push(a);
joms.util.map.loading = !0, joms.util.map.queue = [a], joms.util.map.execQueue = function(a) {
for (; joms.util.map.queue.length;) joms.util.map.queue.shift()(a);
joms.util.map.loading = !1
}, joms.util.map.gmapcallback = function() {
joms.util.map.execQueue()
};
var b = document.createElement("script");
b.type = "text/javascript", b.src = "//maps.googleapis.com/maps/api/js?libraries=places&sensor=false&callback=joms.util.map.gmapcallback", document.body.appendChild(b)
}
}, joms.util.map.nearbySearch = function(a, b, c) {
var d = new window.google.maps.places.PlacesService(a),
e = {
location: b,
radius: 2e3
};
d.nearbySearch(e, function(a, b) {
var d, e, f;
if (b !== window.google.maps.places.PlacesServiceStatus.OK) return void c({
error: "Unable to find your nearest location."
});
if (!a || !a.length) return void c({
error: "Unable to find your nearest location."
});
for (d = [], e = 0, f; e < a.length; e++) f = a[e], d.push({
lat: f.geometry.location.lat(),
lng: f.geometry.location.lng(),
name: f.name,
vicinity: f.vicinity
});
c(d)
})
}
}), c("utils/popup", ["core", "utils/map"], function() {
function a() {}
a.prototype.prepare = function(a) {
var b, c;
return joms.jQuery.magnificPopup ? (b = this.showPopup(), void a(b)) : (c = this, void this.loadlib(function() {
joms.jQuery.magnificPopup && (b = c.showPopup(), a(b))
}))
}, a.prototype.showPopup = function() {
joms.jQuery.magnificPopup.open({
type: "inline",
items: {
src: []
},
tClose: window.joms_lang.COM_COMMUNITY_CLOSE_BUTTON,
tLoading: window.joms_lang.COM_COMMUNITY_POPUP_LOADING
});
var a = joms.jQuery.magnificPopup.instance,
b = "joms-popup__wrapper";
return joms.mobile && (b += " joms-popup__mobile"), a.container.addClass(b), a.updateStatus("loading"), a.container.off("click.joms-closepopup", ".joms-js--button-close").on("click.joms-closepopup", ".joms-js--button-close", function() {
a.close()
}), a
}, a.prototype.loadlib = function(a) {
a()
}, joms.util || (joms.util = {}), joms.util.popup = new a
}),
function(a, b, d) {
joms.util || (joms.util = {}), joms.util.dropdown = d(a, b), c("utils/dropdown", ["utils/popup"], function() {
return joms.util.dropdown
})
}(window, joms.jQuery, function(a, b, c) {
function d() {
m && m.hide(), l && g(l)
}
function e(a) {
var c, e;
return a.stopPropagation(), a.preventDefault(), c = b(a.currentTarget), e = c.siblings(t), e.length ? e.is(":visible")? (e.hide(), void g(c)) : "large" === joms.screenSize()? (d(), e.show(), f(c), l = c, m = e, void i(e.attr("class") || "")) : void joms.util.popup.prepare(function(a) {
n = a, n.items[0] = {
type: "inline",
src: h(e)
}, n.updateItemHTML(), i(e.attr("class") || ""), o = n.contentContainer, o.on("click", "li > a", function() {
n.close()
})
}) : void 0
}
function f(a) {
var b = a.parent();
b.hasClass(".joms-focus__button--options--desktop")? b.addClass("active") : a.addClass("active")
}
function g(a) {
var b = a.parent();
b.hasClass(".joms-focus__button--options--desktop")? b.removeClass("active") : a.removeClass("active")
}
function h(a) {
return '<div class="joms-popup joms-popup--dropdown">' + a[0].outerHTML + "</div>"
}
function i(a) {
return a.match("joms-popover--toolbar-general")? void joms.api.notificationGeneral() : a.match("joms-popover--toolbar-friendrequest")? void joms.api.notificationFriend() : a.match("joms-popover--toolbar-pm")? void joms.api.notificationPm() : void 0
}
function j() {
k(), p || (p = b(document.body)), p.on(q, d), p.on(q, s, e), p.on(r, s, d), p.on(q, t, function(a) {
b(a.target).data("propagate") || a.stopPropagation(), u(a)
})
}
function k() {
p && (p.off(q), p.off(q, s), p.off(r, s), p.off(q, t))
}
var l, m, n, o, p, q = "click.dropdown",
r = "collapse.dropdown",
s = "[data-ui-object=joms-dropdown-button]",
t = ".joms-dropdown,.joms-popover",
u = joms._.debounce(function(c) {
var e, f, g, h, i, j, k = c.currentTarget.className || "";
k.indexOf("joms-dropdown--privacy") < 0 || (e = b(c.currentTarget), f = b(c.target).closest("li"), f.length && (g = b(".joms-button--privacy").filter('[data-name="' + e.data("name") + '"]'), h = g.children("[data-ui-object=joms-dropdown-value]"), i = g.children("span"), j = g.find("use"), h.val(f.data("value")), i.html(f.children("span").html()), j.attr("xlink:href", a.location.href.replace(/#.*$/, "") + "#" + f.data("classname"))), d(), n && n.close())
}, 100);
return {
start: j,
stop: k
}
}),
function(a, b, c) {
joms.util || (joms.util = {}), joms.util.hovercard = c(a, b)
}(window, joms.jQuery, function(a, b) {
function c() {
joms.mobile || b(document.body).off(l).off(m).on(l, n, d).on(m, n, e)
}
function d(a) {
var c = b(a.target),
d = c.data("author");
return h || f(), clearTimeout(j), k[d] ? (clearTimeout(i), void(i = setTimeout(function() {
g(k[d], c)
}, 400))) : void joms.ajax({
func: "profile,ajaxFetchCard",
data: [d],
callback: function(a) {
a.html && (k[d] = a.html, clearTimeout(i), g(a.html, c))
}
})
}
function e() {
clearTimeout(i), j = setTimeout(function() {
h && h.hide()
}, 400)
}
function f() {
h = b("<div>Loading...</div>"), h.css({
position: "absolute",
zIndex: 2e3
}), h.appendTo(document.body), h.on(l, function() {
clearTimeout(j)
}), h.on(m, e)
}
function g(c, d) {
var e = b(document),
f = d.offset(),
g = d.width(),
i = d.height(),
j = a.innerWidth,
k = a.innerHeight + e.scrollTop(),
l = 140,
m = f.left + 320 < j,
n = f.top + i + 10;
h.html(c), h.css({
top: -1e4,
left: m ? f.left : "",
right: m ? "" : j - f.left - g
}), h.show(), l = h.height(), n + l > k && (n = f.top - l - 4), h.css({
top: n
})
}
var h, i, j, k = {},
l = "mouseover.joms-hcard",
m = "mouseout.joms-hcard",
n = "img[data-author]";
return {
initialize: c
}
}), c("utils/hovercard", function() {}),
function(a, b) {
joms.util || (joms.util = {}), joms.util.loadLib = b(a)
}(window, function(a) {
function b(a) {
return a()
}
function c(b) {
return a.MediaElement ? b() : void joms.$LAB.script(joms.ASSETS_URL + "vendors/mediaelement/mediaelement-and-player.min.js").wait(function() {
b()
})
}
function d(b) {
return a.flowplayer ? b() : void joms.$LAB.script(joms.ASSETS_URL + "flowplayer/flowplayer-3.2.6.min.js").wait(function() {
b()
})
}
function e(b) {
return a.plupload ? b() : void joms.$LAB.script(joms.ASSETS_URL + "vendors/plupload.min.js").wait(function() {
b()
})
}
function f(a) {
return joms.jQuery ? joms.jQuery.trumbowyg ? a() : (joms.loadCSS(joms.ASSETS_URL + "vendors/trumbowyg/ui/trumbowyg.min.css"), void joms.$LAB.script(joms.ASSETS_URL + "vendors/trumbowyg/trumbowyg.min.js").wait().script(joms.ASSETS_URL + "vendors/trumbowyg/plugins/base64/trumbowyg.base64.min.js").wait().script(joms.ASSETS_URL + "vendors/trumbowyg/plugins/upload/trumbowyg.upload.js").wait(function() {
a()
})) : !1
}
function g(b) {
return a.Sortable ? b() : void joms.$LAB.script(joms.ASSETS_URL + "dragsort/jquery.dragsort-0.5.1.min.js").wait(function() {
b()
})
}
function h(a, h) {
return "gmap" === a ? b(h) : "mediaelement" === a ? c(h) : "flowplayer" === a ? d(h) : "plupload" === a ? e(h) : "trumbowyg" === a ? f(h) : "dragsort" === a ? g(h) : void h()
}
return h
}), c("utils/loadlib", function() {}),
function(a, b) {
joms.util || (joms.util = {}), joms.util.tab = b(a)
}(window, function() {
function a() {
b(), c()
}
function b() {
function a(a) {
var b, c, d, g = joms.jQuery(a.currentTarget),
h = g.parent(e),
i = g.attr("href");
if (g.find(".joms-tab__bar--button").length && (d = joms.jQuery(a.target), d.hasClass("add") || d[0].tagName.match(/use|svg/i))) return a.preventDefault(), a.stopPropagation(), !1;
if (0 === i.indexOf("#")) return b = g.closest(e).siblings(i), b.show().siblings(f).hide(), g.addClass("active").siblings("a").removeClass("active"), c = h.data("id"), c && (c = "#tab:" + c + "/" + g.data("id"), window.location = c), !1
}
function b() {
c(), d || (d = joms.jQuery(document.body)), d.on("click.joms-tab", e + " a", a)
}
function c() {
d && d.off("click.joms-tab")
}
var d, e = ".joms-tab__bar",
f = ".joms-tab__content";
b()
}
function c() {
joms.jQuery(".cTabsBar").on("click", "li", function(a) {
var b, c, d = joms.jQuery(a.currentTarget),
e = d.closest(".cTabsBar").siblings(".cTabsContentWrap");
e.length && (b = d.prevAll().length, c = e.children(".cTabsContent").eq(b), c.length && (d.addClass("cTabCurrent").siblings(".cTabCurrent").removeClass("cTabCurrent"), c.siblings(".cTabsContent").hide(), c.show()))
})
}
return {
start: a
}
}), c("utils/tab", function() {}),
function(a, b, c) {
joms.util || (joms.util = {}), joms.util.tagging = c(a, b), b.fn.jomsTagging = function(a) {
return this.each(function() {
joms.util.tagging(this, a)
})
}
}(window, joms.jQuery, function(a, b) {
function c(a, c) {
return this.textarea = a, this.fetcher = c || !1, this.$textarea = b(a), this.$textarea.data("initialValue", a.value), this.$textarea.data(h, this), this.$textarea.on("focus." + h, b.proxy(this.initialize, this)), this
}
var d = 13,
e = 27,
f = 38,
g = 40,
h = "joms-tagging",
i = ".joms-textarea",
j = i + "__wrapper",
k = i + "__beautifier",
l = i + "__hidden",
m = i + "__tag-ct",
n = i + "__tag-item",
o = n + "--active",
p = /@\[\[(\d+):contact:([^\]]+)\]\]/g,
q = /@\[\[(\d+):contact:([^\]]+)\]\]/,
r = /(^|#|\s)(#[^#\s]+)/g,
s = "$1<b>$2</b>",
t = /\n/g,
u = "<br>";
return c.prototype.initialize = function() {
var a, c, d, e, f;
if (this.dropdownIsOpened = !1, this.dropdownIsClicked = !1, this.dropdownSelectedItem = !1, this.domPrepare(), this.tagsAdded = [], a = "", this.$textarea.data("initialValue") && (a = this.textarea.value, c = a.match(p), this.textarea.value = a.replace(p, "$2"), c && c.length))
for (f = 0; f < c.length; f++) d = c[f].match(q), e = a.indexOf(c[f]), a = a.replace(c[f], d[2]), this.tagsAdded.push({
id: d[1],
name: d[2],
start: e,
length: d[2].length
});
this.beautifierUpdate(a, this.tagsAdded), this.hiddenUpdate(a, this.tagsAdded), this.inputAutogrow(), this.$textarea.off("focus." + h).on("focus." + h, b.proxy(this.inputOnKeydown, this)).off("click." + h).on("click." + h, b.proxy(this.inputOnKeydown, this)).off("keydown." + h).on("keydown." + h, b.proxy(this.inputOnKeydown, this)).off("keyup." + h).on("keyup." + h, b.proxy(this.inputOnKeyup, this)).off("input." + h).on("input." + h, b.proxy(this.inputOnInput, this)).off("blur." + h).on("blur." + h, b.proxy(this.inputOnBlur, this)), this.$dropdown.off("mouseenter." + h).on("mouseenter." + h, n, b.proxy(this.dropdownOnMouseEnter, this)).off("mousedown." + h).on("mousedown." + h, n, b.proxy(this.dropdownOnMouseDown, this)).off("mouseup." + h).on("mouseup." + h, n, b.proxy(this.dropdownOnMouseUp, this)), this.textarea.joms_beautifier = this.$beautifier, this.textarea.joms_hidden = this.$hidden;
var g = this;
this.textarea.joms_reset = function() {
g.inputReset()
}
}, c.prototype.domPrepare = function() {
this.$wrapper = this.$textarea.parent(j), this.$wrapper.length || (this.$textarea.wrap('<div class="' + j.substr(1) + '"></div>'), this.$wrapper = this.$textarea.parent()), this.$beautifier = this.$wrapper.children(k), this.$beautifier.length || (this.$beautifier = b('<div class="' + i.substr(1) + " " + k.substr(1) + '"></div>'), this.$beautifier.prependTo(this.$wrapper)), this.$hidden = this.$wrapper.children(l), this.$hidden.length || (this.$hidden = b('<input type="hidden" class="' + l.substr(1) + '">'), this.$hidden.appendTo(this.$wrapper)), this.$dropdown = this.$wrapper.children(m), this.$dropdown.length || (this.$dropdown = b('<div class="' + m.substr(1) + '"></div>'), this.$dropdown.appendTo(this.$wrapper))
}, c.prototype.inputPrepare = function() {}, c.prototype.inputReset = function() {
this.tagsAdded && (this.tagsAdded = [])
}, c.prototype.inputAutogrow = function() {
var a, b = +this.$textarea.data(h + "-prevHeight");
this.$wrapper.css({
height: b
}), this.$textarea.css({
height: ""
}), a = this.textarea.scrollHeight + 2, this.$textarea.css({
height: a
}), a !== +b && this.$textarea.data(h + "-prevHeight", a), this.$wrapper.css({
height: ""
})
}, c.prototype.inputOnKeydown = function(a) {
return this.dropdownIsOpened && [d, e, f, g].indexOf(a.keyCode) >= 0 ? !1 : a.keyCode === e ? (this.inputReset(), !1) : (this.prevSelStart = this.textarea.selectionStart, void(this.prevSelEnd = this.textarea.selectionEnd))
}, c.prototype.inputOnKeyup = function(a) {
if (this.dropdownIsOpened) {