0 Пользователей и 1 Гость просматривают эту тему.
  • 1 Ответов
  • 1820 Просмотров
*

GTOnidzuka

  • Осваиваюсь на форуме
  • 31
  • 4 / 0
JomSocial 4.2
По умолчанию стоит строго квадратная обрезка, тоесть увеличиваем рамку по ширине а у нас увеличивается и высота. Вопрос как сделать ширину и высоту рамки независимыми, чтобы можно было сделать прямоугольные аватарки как в том же вконтакте.

Методом вычислений вышел на файл: /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) {
« Последнее редактирование: 25.07.2016, 13:56:59 от GTOnidzuka »
*

GTOnidzuka

  • Осваиваюсь на форуме
  • 31
  • 4 / 0
с рамкой сам разобрался, опишу познее как и чего, но как и думал все делается в файле bundle.js. Теперь проблема в том что изображения создаются квадратными независимо от высоты рамки, поэтому вопрос: в какой файле происходит сам процесс обрезки?
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Тумба Аватара

Автор Darknemo

Ответов: 5
Просмотров: 2282
Последний ответ 25.01.2011, 19:33:48
от rdv