syncfusion-ember/common/ej.scroller.js

1440 строки
75 KiB
JavaScript

/**
* @fileOverview Plugin to style the Html ScrollBar elements
* @copyright Copyright Syncfusion Inc. 2001 - 2015. All rights reserved.
* Use of this code is subject to the terms of our license.
* A copy of the current license can be obtained at any time by e-mailing
* licensing@syncfusion.com. Any infringement will be prosecuted under
* applicable laws.
* @version 12.1
* @author <a href="mailto:licensing@syncfusion.com">Syncfusion Inc</a>
*/
(function ($, ej, window, undefined) {
'use strict';
ej.widget("ejScrollBar", "ej.ScrollBar", {
defaults: {
orientation: "horizontal",
viewportSize: 0,
height: 18,
width: 18,
smallChange: 57,
largeChange: 57,
value: 0,
maximum: 0,
minimum: 0,
buttonSize: 18,
infiniteScrolling: false
},
validTags: ["div"],
type: "transclude",
dataTypes: {
buttonSize: "number",
smallChange: "number",
largeChange: "number",
},
observables: ["value"],
value: ej.util.valueFunction("value"),
_enabled: true,
content: function () {
if (!this._content || !this._content.length) {
if (this.model.orientation === "horizontal") {
this._content = this.element.find(".e-hhandle");
}
else {
this._content = this.element.find(".e-vhandle");
}
}
return this._content;
},
_init: function () {
this.element.addClass("e-widget");
this._ensureScrollers();
this.content();
this._setInitialValues();
},
_setInitialValues: function () {
var xy = "X";
if (this.model.orientation === ej.ScrollBar.Orientation.Horizontal) {
this.element.addClass("e-hscrollbar");
}
else {
this.element.addClass("e-vscrollbar");
xy = "Y";
}
if (this.value() !== 0 || this.model.minimum !== 0) {
if (this.value() < this.model.minimum)
this.value(this.model.minimum);
this["scroll"](this.value(), "none");
}
},
_ensureScrollers: function () {
var jqVersion = $.fn.jquery, height, width;
if (this.model.height) {
this.element.height(this.model.height);
}
if (this.model.width) {
this.element.width(this.model.width);
}
var d2;
if (!this._scrollData) {
if (this.model.orientation === "vertical") {
this._scrollData = this._createScroller("Height", "Y", "Top", "e-v");
}
else {
this._scrollData = this._createScroller("Width", "X", "Left", "e-h");
}
}
},
_setModel: function (option) {
for (var prop in option) {
if (prop === "value") {
if (this.value()) {
this.scroll(this.value(), "none");
}
} else {
this.refresh();
break;
}
}
},
_createScroller: function (dimension, xy, position, css) {
var height;
var d = {};
var jqVersion = $.fn.jquery;
d.dimension = dimension;
d.xy = xy;
d.position = position;
d.css = css;
d.uDimension = dimension;
this._calculateLayout(d);
this._createLayout(d);
var buttons = this[d.main].find(".e-button");
this._off(buttons, "mousedown")
._on(buttons, "mousedown", { d: d, step: 1 }, this._spaceMouseDown);
this._off(this[d.scroll], "mousedown")
._on(this[d.scroll], "mousedown", { d: d }, this._spaceMouseDown);
this._off(this[d.handler], "mousedown touchstart")
._on(this[d.handler], "mousedown touchstart", { d: d }, this._mouseDown);
return d;
},
_createLayout: function (d) {
var divString = "<div class='" + d.css + "{0}' style='" + d.dimension + ":{1}px'>{2}</div>";
var jqVersion = $.fn.jquery;
var lit = {}, height;
lit[d.dimension] = d.modelDim;
var el = ej.buildTag(
"div." + d.css + "scroll e-box",
String.format(divString, "up e-chevron-up_01 e-icon e-box e-button", d.buttonSize) +
String.format(divString, "handlespace", d.handleSpace,
String.format(divString, "handle e-box e-pinch", d.handle)) +
String.format(divString, "down e-chevron-down_01 e-icon e-box e-button", d.buttonSize),
lit
);
this.element.append(el);
this.element.find('.e-vhandle').addClass("e-v-line e-icon");
this.element.find('.e-hhandle').addClass("e-h-line e-icon");
jqVersion === "1.7.1" || jqVersion === "1.7.2" ? height = d.uDimension.toLowerCase() : height = "outer" + d.uDimension;
this[d.handler] = this.element.find("." + d.handler);
this[d.handler].css("transition", "none");
this[d.scroll] = this[d.handler].parent();
this[d.main] = this[d.scroll].parent();
this[d.main].find(".e-button")["outer" + d.uDimension](d.buttonSize);
},
_calculateLayout: function (d) {
d.scrollDim = "scroll" + d.dimension;
d.lPosition = d.position.toLowerCase();
d.clientXy = "page" + d.xy;
d.scrollVal = "scroll" + d.position;
d.scrollOneStepBy = this.model.smallChange;
d.modelDim = this.model[(d.dimension = d.dimension.toLowerCase())];
d.handler = d.css + "handle";
d.buttonSize = this.model.buttonSize;
d.main = d.css + "scroll";
d.scroll = d.css + "ScrollSpace";
d.handleSpace = d.modelDim - 2 * d.buttonSize;
d.scrollable = (this.model.maximum - this.model.minimum);
var trackLength = this.model.height;
if (this.model.orientation === "horizontal")
trackLength = this.model.width;
d.handle = (this.model.viewportSize / ((this.model.maximum - this.model.minimum) + this.model.viewportSize)) * (trackLength - 2 * this.model.buttonSize);
var check;
!ej.isNullOrUndefined(this.model.elementHeight) && typeof this.model.elementHeight === "string" && this.model.elementHeight.indexOf("%") != -1 ? check = true : check = false;
if (d.handle < 20 && !check) d.handle = 20;
d.onePx = d.scrollable / (d.handleSpace - d.handle);
d.fromScroller = false;
d.up = true;
d.vInterval = undefined;
},
_updateLayout: function (d) {
this.element.height(this.model.height);
this.element.width(this.model.width);
var handle = this.element.find("." + d.css + "handle");
var handleSpace = this.element.find("." + d.css + "handlespace");
var size = d.dimension == "width" ? handle.css('left') : handle.css('top');
var dimension = d.dimension == "width" ? handleSpace.outerWidth() : handleSpace.outerHeight();
if (size !== undefined && size !== "auto") {
if (!(dimension >= d.handle + parseFloat(size)))
if (this.model.enableRTL) handle.css(d.dimension === "width" ? 'left' : 'top', (parseFloat(dimension) - d.handle));
else handle.css(d.dimension === "width" ? 'left' : 'top', (parseFloat(dimension) - d.handle) > 0 ? (parseFloat(dimension) - d.handle) : 0);
}
this.element.find("." + d.css + "scroll").css(d.dimension, d.modelDim + "px")
.find(".e-button").css(d.dimension, this.model.buttonSize).end()
.find("." + d.css + "handlespace").css(d.dimension, d.handleSpace + "px")
.find("." + d.css + "handle").css(d.dimension, d.handle + "px");
},
refresh: function () {
this._ensureScrollers();
if (this.value()) {
this.scroll(this.value(), "none");
}
if (this._scrollData) {
this._calculateLayout(this._scrollData);
this._updateLayout(this._scrollData);
}
},
scroll: function (pixel, source, triggerEvent, e) {
var dS = this._scrollData;
if (!triggerEvent) {
if (this.model.orientation === ej.ScrollBar.Orientation.Horizontal) {
if (this._trigger("scroll", { source: source || "custom", scrollData: this._scrollData, scrollLeft: pixel, originalEvent: e }))
return;
}
else {
if (this._trigger("scroll", { source: source || "custom", scrollData: this._scrollData, scrollTop: pixel, originalEvent: e }))
return;
}
}
if (this._scrollData) {
if (this._scrollData.enableRTL && (e == "mousemove" || e == "touchmove") && ej.browserInfo().name != "msie")
this.value(-dS.scrollable + pixel);
else {
if (this._scrollData.enableRTL && (e == "mousemove" || e == "touchmove") && ej.browserInfo().name == "msie") this.value(-1 * pixel);
else this.value(pixel);
}
if (this.content().length > 0) {
if (this.model.orientation === ej.ScrollBar.Orientation.Horizontal) {
var left = (this.element.find('.e-hhandlespace').width() - this.element.find('.e-hhandle').outerWidth());
pixel = left < ((pixel - this.model.minimum) / this._scrollData.onePx) ? left : ((pixel - this.model.minimum) / this._scrollData.onePx);
if (this._scrollData.enableRTL && (e == "mousemove" || e == "touchmove") && ej.browserInfo().name != "msie") {
pixel = left - pixel;
pixel > 0 ? pixel = pixel * -1 : pixel;
}
if (this._scrollData.enableRTL && (e == "mousemove" || e == "touchmove") && ej.browserInfo().name == "msie") pixel = -pixel;
this._scrollData.enableRTL && pixel > 0 && !this._scrollData._scrollleftflag ? pixel = 0 : pixel
if (this._scrollData._scrollleftflag) {
pixel > 0 ? pixel = pixel * -1 : pixel;
this.value(pixel);
}
this.content()[0].style.left = pixel + "px";
this._scrollData._scrollleftflag = false;
}
else {
var top = (this.element.find('.e-vhandlespace').height() - this.element.find('.e-vhandle').outerHeight());
pixel = top < ((pixel - this.model.minimum) / this._scrollData.onePx) ? top : ((pixel - this.model.minimum) / this._scrollData.onePx);
if (ej.browserInfo().name == "msie" && isNaN(pixel)) pixel = "";
this.content()[0].style.top = pixel + "px";
}
}
}
},
_changeTop: function (d, step, source) {
var start, t;
if (d.dimension === "height")
start = this.value();
else
start = this.value();
t = start + step;
d.step = step;
if ((d.enableRTL && step < 0) || (step > 0 && !d.enableRTL)) {
if (d.enableRTL) {
if (t < this.model.maximum * -1)
t = this.model.maximum * -1;
}
else {
if (t > this.model.maximum)
t = this.model.maximum;
}
}
else {
if (d.enableRTL) {
if (t > this.model.minimum)
t = this.model.minimum;
}
else {
if (t < this.model.minimum)
t = this.model.minimum;
}
}
if (t !== start || this.model.infiniteScrolling) {
this["scroll"](t, source);
}
return t !== start;
},
_mouseUp: function (e) {
if (!e.data) return;
var d = e.data.d;
clearInterval(d.vInterval);
if (e.type == "touchend") $(e.target).removeClass("e-touch");
if (e.type === "mouseup" || e.type === "touchend" || (!e.toElement && !e.relatedTarget && !e.target)) {
this._prevY = this._d = this._data = null;
this._off($(document), "mousemove touchmove", this._mouseMove);
$(document).off("mouseup touchend", ej.proxy(this._mouseUp, this));
d.fromScroller = false;
this[d.scroll].off("mousemove");
this[d.handler].off("mousemove").css("transition", "");
if (e.data.source === "thumb" && !ej.isNullOrUndefined(this.model)) {
$.when(this.content()).done(ej.proxy(function () {
this._trigger("thumbEnd", { originalEvent: e, scrollData: d });
}, this));
}
}
d.up = true;
},
_mouseDown: function (down) {
if (!this._enabled) return;
this._d = down;
this._data = this._d.data.d,
this._data.target = this._d.target;
this._data.fromScroller = true;
this[this._data.handler].css("transition", "none");
this._on($(document), "mousemove touchmove", { d: this._data, source: "thumb" }, this._mouseMove);
this._trigger("thumbStart", { originalEvent: this._d, scrollData: this._data });
$(document).one("mouseup touchend", { d: this._data, source: "thumb" }, ej.proxy(this._mouseUp, this));
if (down.type == "touchstart") $(down.target).addClass("e-touch");
},
_mouseCall: function (move) {
move.type = "mouseup";
this._mouseUp(move);
},
_mouseMove: function (move) {
var value, step = 0, top = parseInt(this[this._data.handler].css(this._data.lPosition)) || 0;
move.preventDefault();
var skip = 1;
if (ej.isNullOrUndefined(move.target.tagName)) {
if ($(move.target).is(document)) {
this._mouseCall(move);
return;
}
}
else if (move.target.tagName.toLowerCase() === "iframe") { this._mouseCall(move); return; }
var pageXY = move.type == "mousemove" ? move[this._data.clientXy] : move.originalEvent.changedTouches[0][this._data.clientXy];
if (this._prevY && pageXY !== this._prevY) {
step = (pageXY - this._prevY);
if (this.model.infiniteScrolling) {
top = top + step;
this._data.step = step;
if (this._data.enableRTL ? top > 0 : top < 0) top = 0;
if ((top * (this._data.enableRTL ? -1 : 1)) + this._data.handle >= this._data.handleSpace)
top = (this._data.handleSpace - this._data.handle) * (this._data.enableRTL ? -1 : 1);
value = Math.ceil(top * this._data.onePx);
this["scroll"](value, "thumb");
}
else {
value = step * this._data.onePx;
this._changeTop(this._data, value, "thumb", this._d);
}
this._trigger("thumbMove", { originalEvent: move, direction: (this._data.step > 0) ? +1 : -1, scrollData: this._data });
}
if (skip === 1)
this._prevY = pageXY;
},
_spaceMouseDown: function (e) {
if (!e.data || !this._enabled) return;
var d = e.data.d;
var offsetValue = this[d.handler][0].getBoundingClientRect();
if (e.which !== 1 || e.target === this[d.handler][0]) return;
var step = e.data.step ? this.model.smallChange : this.model.largeChange, hTop = e.data.top || offsetValue[d.lPosition];
e[d.clientXy] = e[d.clientXy] || 0;
if (e[d.clientXy] < hTop) step *= -1;
d.target = e.target;
this._changeTop(d, step, step === 3 ? "track" : "button", e);
if (e.data.step !== 1) {
this[d.scroll].mousemove(function () {
d.up = true;
});
}
d.up = false;
d.vInterval = setInterval(ej.proxy(function () {
if (step < 0 ? hTop + (step / d.onePx) < e[d.clientXy] : hTop + d.handle + (step / d.onePx) > e[d.clientXy])
d.up = true;
if (d.up) {
clearInterval(d.vInterval);
return;
}
this._changeTop(d, step, step === 3 ? "track" : "button", e);
e.data ? hTop = e.data.top || offsetValue[d.lPosition] : hTop = offsetValue[d.lPosition];
}, this), 150);
$(document).one("mouseup", { d: d }, ej.proxy(this._mouseUp, this));
$(document).mouseout({ d: d }, ej.proxy(this._mouseUp, this));
},
_remove: function () {
if (this.model.orientation === ej.ScrollBar.Orientation.Horizontal)
this.element.find(".e-hscroll").remove();
if (this.model.orientation === ej.ScrollBar.Orientation.Vertical)
this.element.find(".e-vscroll").remove();
this._scrollData = null;
this._content = null;
},
_destroy: function () {
this.element.remove();
},
});
ej.ScrollBar.Orientation = {
Horizontal: "horizontal",
Vertical: "vertical"
};
})(jQuery, Syncfusion, window);;
/**
* @fileOverview Plugin to style the Html Scroller elements
* @copyright Copyright Syncfusion Inc. 2001 - 2015. All rights reserved.
* Use of this code is subject to the terms of our license.
* A copy of the current license can be obtained at any time by e-mailing
* licensing@syncfusion.com. Any infringement will be prosecuted under
* applicable laws.
* @version 12.1
* @author <a href="mailto:licensing@syncfusion.com">Syncfusion Inc</a>
*/
(function ($, ej, window, undefined) {
'use strict';
ej.widget("ejScroller", "ej.Scroller", {
_addToPersist: ["scrollLeft", "scrollTop"],
defaults: {
height: 250,
autoHide: false,
animationSpeed: 600,
width: 0,
scrollOneStepBy: 57,
buttonSize: 18,
scrollLeft: 0,
scrollTop: 0,
targetPane: null,
scrollerSize: 18,
enablePersistence: false,
enableRTL: undefined,
enableTouchScroll: true,
enabled: true,
create: null,
destroy: null,
wheelStart: null,
wheelMove: null,
wheelStop: null
},
validTags: ["div"],
type: "transclude",
dataTypes: {
buttonSize: "number",
scrollOneStepBy: "number"
},
observables: ["scrollTop", "scrollLeft"],
scrollTop: ej.util.valueFunction("scrollTop"),
scrollLeft: ej.util.valueFunction("scrollLeft"),
keyConfigs: {
up: "38",
down: "40",
left: "37",
right: "39",
pageUp: "33",
pageDown: "34",
pageLeft: "ctrl+37",
pageRight: "ctrl+39"
},
content: function () {
if (!this._contentOffsetParent && this._content && this._content[0]) this._contentOffsetParent = this._content[0].offsetParent;
if (!this._content || !this._content.length || !this._contentOffsetParent)
this._content = this.element.children().first().addClass("e-content");
return this._content;
},
_setFirst: true,
_updateScroll: false,
_init: function () {
if (!ej.isNullOrUndefined(this.content()[0])) {
this._isJquery3 = (parseInt($.fn.jquery) >= 3) ? true : false;
this._tempWidth = this.model.width;
this._prevScrollWidth = this.content()[0].scrollWidth, this._prevScrollHeight = this.content()[0].scrollHeight;
this.element.addClass("e-widget");
this.content();
this._browser = ej.browserInfo().name;
this._wheelStart = true;
this._eleHeight = this.model.height;
this._eleWidth = this.model.width;
this._isNativeScroll = ej.isDevice();
this.model.targetPane != null && this.content().find(this.model.targetPane).addClass('e-target-pane');
if (this.model.enableRTL === undefined) {
this.model.enableRTL = this.element.css("direction") === "rtl";
}
this._ensureScrollers();
if (this.model.enableRTL) {
this.element.addClass("e-rtl");
this._rtlScrollLeftValue = this.content().scrollLeft();
}
this._isNativeScroll && this.element.addClass("e-native-scroll");
this._on(this.content(), "scroll", this._scroll);
this.model.targetPane != null && this._on(this.content().find(this.model.targetPane), "scroll", this._scroll);
if (this.scrollLeft())
this._setScrollLeftValue(this.scrollLeft());
if (this.scrollTop())
this.scrollTop(this._isJquery3 ? Math.ceil(this.scrollTop()) : this.scrollTop());
this.content().scrollTop(this.scrollTop());
if (this.model.autoHide) {
this._autohide();
}
if (this.model.enabled) {
this.enable();
}
else {
this.disable();
}
this._setDimension();
if (this._prevScrollWidth !== this.content()[0].scrollWidth || this._prevScrollHeight !== this.content()[0].scrollHeight) this.refresh();
}
this._addActionClass();
this._isNativeScroll && this._on(this.content(), "scrollstop", this._touchDown);
},
_addActionClass: function () {
//e-pinch class enables the touch mode operations in IE browsers
if (this._browser == "msie") {
this.content().removeClass('e-pinch e-pan-x e-pan-y');
if (this._vScrollbar && this._hScrollbar) this.content().addClass('e-pinch');
else if (this._vScrollbar && !this._hScrollbar) this.content().addClass('e-pan-x');
else if (this._hScrollbar && !this._vScrollbar) this.content().addClass('e-pan-y');
}
},
_setDimension: function () {
if (!ej.isNullOrUndefined(this.model.height) && typeof this.model.height === "string" && this.model.height.indexOf("%") != -1) {
if (!(this._vScroll || this._hScroll)) $(this.content()[0]).height("");
else this.model.height = this._convertPercentageToPixel(parseInt(this._eleHeight), this.element.parent().height());
}
if (!ej.isNullOrUndefined(this.model.width) && typeof this.model.width === "string" && this.model.width.indexOf("%") != -1) {
if (!(this._hScroll || this._vScroll)) $(this.content()[0]).width("");
else this.model.width = this._convertPercentageToPixel(parseInt(this._eleWidth), this.element.parent().width());
}
},
_setScrollLeftValue: function (leftValue) {
if (this.model.enableRTL) {
if (ej.browserInfo().name == "mozilla")
leftValue = leftValue < 0 ? leftValue : (leftValue * -1);
else if (!ej.isNullOrUndefined(this._rtlScrollLeftValue) && (ej.browserInfo().name == "chrome" || this._rtlScrollLeftValue > 0))
leftValue = leftValue < 0 ? (this._rtlScrollLeftValue + leftValue) : (this._rtlScrollLeftValue - leftValue);
else
leftValue = Math.abs(leftValue);
}
this.content().scrollLeft(leftValue);
},
_ensureScrollers: function () {
var jqVersion = $.fn.jquery, height, width;
this.model.height = typeof this.model.height == "string" && this.model.height.indexOf("px") != -1 ? parseInt(this.model.height) : this.model.height;
this.model.width = typeof this.model.width == "string" && this.model.width.indexOf("px") != -1 ? parseInt(this.model.width) : this.model.width;
if (this.model.height) {
this.element.height(this.model.height);
}
if (this.model.width) {
this.element.width(this.model.width);
}
this._off(this.content(), "mousedown touchstart");
if (this.content().length > 0) {
if (this.isVScroll()) {
if (!this._tempVscrollbar) {
this._vScrollbar = this._createScrollbar(ej.ScrollBar.Orientation.Vertical, this.isHScroll());
this._tempVscrollbar = this._vScrollbar;
}
if (this.model.enableTouchScroll)
this._on(this.content(), "mousedown touchstart", { d: this._vScrollbar._scrollData }, this._mouseDownOnContent);
} else {
this._vScrollbar = null;
this._tempVscrollbar = this._vScrollbar;
this.element.children(".e-vscrollbar").remove();
}
if (this.isHScroll()) {
if (!this._tempHscrollbar) {
this._hScrollbar = this._createScrollbar(ej.ScrollBar.Orientation.Horizontal, this.isVScroll());
this._tempHscrollbar = this._hScrollbar;
}
if (this.model.enableTouchScroll)
this._on(this.content(), "mousedown touchstart", { d: this._hScrollbar._scrollData }, this._mouseDownOnContent);
} else {
this._hScrollbar = null;
this._tempHscrollbar = this._hScrollbar;
this.element.children(".e-hscrollbar").remove();
}
if (!this._vScrollbar && !this._hScrollbar)
this.content().css({ width: "auto", height: "auto" });
if (!(this.element.find(".e-hscroll").length > 0)) {
if (this._vScrollbar) {
this.content().outerHeight(this.content().outerHeight() - 1);
}
}
jqVersion === "1.7.1" || jqVersion === "1.7.2" ? (this._contentHeight = "height", this._contentWidth = "width") : (this._contentHeight = "outerHeight", this._contentWidth = "outerWidth");
this._hScroll = this.isHScroll(), this._vScroll = this.isVScroll();
if (this._hScroll || this._vScroll) {
this.content().addClass("e-content");
var rect = this._exactElementDimension(this.element);
this._elementDimension(rect);
if (this.model.targetPane !== null && this.content().find(this.model.targetPane)[0] !== undefined) this.content().find(this.model.targetPane)[0].scrollLeft = this.scrollLeft();
else if (!this.isHScroll() && (this.element.children(".e-hscrollbar").length > 0)) this._ensureScrollers();
if ((isNaN(this._eleWidth) && (this._eleWidth.indexOf("%") > 0)) && (isNaN(this._eleHeight) && (this._eleHeight.indexOf("%") > 0))) $(window).on('resize', $.proxy(this._resetScroller, this));
} else
this.content().removeClass("e-content");
this._setDimension();
this._parentHeight = $(this.element).parent().height(); this._parentWidth = $(this.element).parent().width();
}
},
_elementDimension: function (rect) {
this._ElementHeight = rect.height - (this["border_bottom"] + this["border_top"] + this["padding_bottom"] + this["padding_top"]);
this.content()[this._contentHeight](this._ElementHeight - ((this._hScroll && !this.model.autoHide) ? this.model.scrollerSize :
this.element.find(".e-hscrollbar").is(':visible') ? this.model.scrollerSize : 0));
this._ElementWidth = rect.width - (this["border_left"] + this["border_right"] + this["padding_left"] + this["padding_right"]);
this.content()[this._contentWidth](this._ElementWidth - ((this._vScroll && !this.model.autoHide) ? this.model.scrollerSize :
this.element.find(".e-vscrollbar").is(':visible') ? this.model.scrollerSize : 0));
},
_convertPercentageToPixel: function (ele, outer) {
return Math.floor((ele * outer) / 100);
},
isHScroll: function () {
var updatedWidth = (parseFloat($.fn.jquery) >= 3) ? Math.ceil(this.element.width()) : this.element.width();
var modelWidth = this.model.width;
if (!ej.isNullOrUndefined(this.model.width)) {
if (typeof this.model.width === "string" && this.model.width.indexOf("%") != -1) {
modelWidth = updatedWidth;
} else {
modelWidth = (parseFloat($.fn.jquery) >= 3 && !isNaN(parseFloat(this.model.width))) ? Math.ceil(parseFloat(this.model.width)) : this.model.width;
}
}
if (!ej.isNullOrUndefined(this._tempWidth) && typeof this._tempWidth === "string" && this._tempWidth.indexOf("%") != -1) {
if (!ej.isNullOrUndefined(this.model.width) && typeof this.model.width === "string" && this.model.width.indexOf("%") != -1)
return this.content()[0].scrollWidth > updatedWidth;
else if (this.content()[0].scrollWidth > updatedWidth) return true;
}
else {
if (modelWidth > 0) {
var $paneObject = this.content().find(this.model.targetPane);
if (this.model.targetPane != null && $paneObject.length)
return ($paneObject[0].scrollWidth + $paneObject.siblings().width()) > modelWidth;
else {
if (this.content()[0].scrollWidth > modelWidth) return true;
else if (this.content()[0].scrollWidth == modelWidth)
if (this.model.autoHide && $(this.content()[0]).find('> *').length > 0) return $(this.content()[0]).find('> *')[0].scrollWidth > $(this.content()[0]).width();
else if ($(this.content()[0]).find('> *').length > 0) return $(this.content()[0]).find('> *')[0].scrollWidth > (!ej.isNullOrUndefined(this._tempVscrollbar) ? modelWidth - this.model.scrollerSize : modelWidth);
return false;
}
return false;
}
return false;
}
},
isVScroll: function () {
//To avoid unnecessarilly render the vertical scrollbar for 1 or 2 px difference range.
var border = 2;
if (!ej.isNullOrUndefined(this.model.height) && typeof this.model.height === "string" && this.model.height.indexOf("%") != -1)
return this.content()[0].scrollHeight > this.element.outerHeight(); //this._convertPercentageToPixel(parseInt(this._eleHeight), this.element.parent().height());
else if (this.model.height > 0) {
if ((this.content()[0].scrollHeight > Math.ceil(this.model.height))) return true;
else if (this.isHScroll()) if ((this.content()[0].scrollHeight == this.model.height || (this.content()[0].scrollHeight > this.model.height - (this.model.scrollerSize - border)))) return true;
}
return false;
},
_setModel: function (option) {
for (var prop in option) {
switch (prop) {
case "enableRTL":
if (option[prop]) {
this.element.addClass("e-rtl");
this._rtlScrollLeftValue = this.content().scrollLeft();
if (!ej.isNullOrUndefined(this._hScrollbar)) this._hScrollbar._scrollData.enableRTL = true;
} else {
this.element.removeClass("e-rtl");
if (!ej.isNullOrUndefined(this._hScrollbar)) this._hScrollbar._scrollData.enableRTL = false;
}
if (this._hScrollbar) {
this.element.find(".e-hhandle").css("left", 0);
this._hScrollbar.value(0);
}
break;
case "scrollLeft":
if (parseFloat(ej.util.getVal(option[prop])) < 0 || !this._hScroll) option[prop] = 0;
if (this._hScrollbar) option[prop] = parseFloat(ej.util.getVal(option[prop])) > this._hScrollbar._scrollData.scrollable ? this._hScrollbar._scrollData.scrollable : parseFloat(ej.util.getVal(option[prop]));
this._setScrollLeftValue(parseFloat(option[prop]));
this["scrollLeft"](option[prop]);
if (this._hScrollbar && !(this._hScrollbar._scrollData._scrollleftflag && this.model.enableRTL))
this.scrollX(option[prop], true);
break;
case "scrollTop":
if (this._vScrollbar) option[prop] = parseFloat(ej.util.getVal(option[prop])) > this._vScrollbar._scrollData.scrollable ? this._vScrollbar._scrollData.scrollable : parseFloat(ej.util.getVal(option[prop]));
if (parseFloat(option[prop]) < 0 || !this._vScroll) option[prop] = 0;
this.content().scrollTop(parseFloat(option[prop]));
this["scrollTop"](option[prop]);
this.scrollY(option[prop], true);
break;
case "touchScroll":
if (!this.model.enableTouchScroll)
this._off(this.content(), "mousedown touchstart");
else {
if (this._vScrollbar)
this._on(this.content(), "mousedown touchstart", { d: this._vScrollbar._scrollData }, this._mouseDownOnContent);
if (this._hScrollbar)
this._on(this.content(), "mousedown touchstart", { d: this._hScrollbar._scrollData }, this._mouseDownOnContent);
}
break;
case "scrollOneStepBy":
if (this._vScrollbar) {
this._vScrollbar._scrollData.scrollOneStepBy = option[prop];
this._vScrollbar.model.smallChange = option[prop];
}
if (this._hScrollbar) {
this._hScrollbar._scrollData.scrollOneStepBy = option[prop];
this._hScrollbar.model.smallChange = option[prop];
}
break;
case "buttonSize":
if (this._vScrollbar) this._vScrollbar.model.buttonSize = this.model.buttonSize;
if (this._hScrollbar) this._hScrollbar.model.buttonSize = this.model.buttonSize;
this.refresh();
break;
case "height": this._eleHeight = option[prop];
this.refresh();
break;
case "width": this._eleWidth = option[prop];
this.refresh();
break;
case "enabled":
if (!option[prop]) this.disable();
else this.enable();
break;
default:
this.refresh();
}
}
},
_createScrollbar: function (orientation, isOtherScroll) {
var proxy = this;
var id, viewportSize, width, height, maximum, value;
var div = document.createElement("div");
if (orientation === ej.ScrollBar.Orientation.Vertical) {
width = this.model.scrollerSize;
if (!ej.isNullOrUndefined(this.model.height) && typeof this.model.height === "string" && this.model.height.indexOf("%") != -1)
height = viewportSize = this.element.height() - (isOtherScroll ? this.model.scrollerSize : 0);
else
height = viewportSize = this.model.height - (isOtherScroll ? this.model.scrollerSize : 0);
maximum = this.content()[0]["scrollHeight"];
value = this.scrollTop();
}
else {
width = viewportSize = this.model.width - (isOtherScroll ? this.model.scrollerSize : 0);
height = this.model.scrollerSize;
if (!ej.isNullOrUndefined(this.model.width) && typeof this.model.width === "string" && this.model.width.indexOf("%") != -1) {
width = viewportSize = this.element.width() - (isOtherScroll ? this.model.scrollerSize : 0);
maximum = this.content()[0]["scrollWidth"];
}
else {
var $pane = this.content().find(this.model.targetPane);
if (this.model.targetPane != null && $pane.length)
maximum = $pane[0]["scrollWidth"] + $pane.parent().width() - $pane.width();
else
maximum = this.content()[0]["scrollWidth"];
}
value = this.scrollLeft();
}
if (this.element.children(".e-hscrollbar").length > 0)
$(this.element.children(".e-hscrollbar")).before(div);
else
this.element.append(div);
$(div).ejScrollBar({
elementHeight: proxy._eleHeight,
elementWidth: proxy._eleWidth,
buttonSize: proxy.model.buttonSize,
orientation: orientation,
viewportSize: viewportSize,
height: height,
width: width,
maximum: maximum - viewportSize,
value: value,
smallChange: this.model.scrollOneStepBy,
largeChange: 3 * this.model.scrollOneStepBy,
scroll: ej.proxy(this._scrollChanged, this),
thumbEnd: ej.proxy(this._thumbEnd, this),
thumbStart: ej.proxy(this._thumbStart, this),
thumbMove: ej.proxy(this._thumbMove, this),
});
var scrollbar = $(div).ejScrollBar("instance");
(orientation === ej.ScrollBar.Orientation.Vertical || !isOtherScroll) && this._off(this.element, this._browser == "msie" ? "wheel mousewheel" : "mousewheel DOMMouseScroll", this._mouseWheel)
._on(this.element, this._browser == "msie" ? "wheel mousewheel" : "mousewheel DOMMouseScroll", { d: scrollbar._scrollData }, this._mouseWheel);
if (orientation === ej.ScrollBar.Orientation.Horizontal) {
this._scrollXdata = scrollbar._scrollData;
}
else
this._scrollYdata = scrollbar._scrollData;
if (orientation === ej.ScrollBar.Orientation.Horizontal && this.model.enableRTL) {
scrollbar._scrollData.enableRTL = true;
}
scrollbar._enabled = this.model.enabled;
return scrollbar;
},
_updateScrollbar: function (orientation, isOtherScroll) {
var scrollbar = orientation === ej.ScrollBar.Orientation.Vertical ? this._vScrollbar : this._hScrollbar;
if (scrollbar) {
if (orientation === ej.ScrollBar.Orientation.Vertical) {
scrollbar.model.width = this.model.scrollerSize;
scrollbar.model.height = scrollbar.model.viewportSize = this.model.height - (isOtherScroll ? this.model.scrollerSize : 0);
scrollbar.model.maximum = this.content()[0]["scrollHeight"] - scrollbar.model.viewportSize;
scrollbar.model.value = this.scrollTop();
}
else {
scrollbar.model.width = scrollbar.model.viewportSize = this.model.width - (isOtherScroll ? this.model.scrollerSize : 0);
scrollbar.model.height = this.model.scrollerSize;
scrollbar.model.maximum = ((this.model.targetPane != null && this.content().find(this.model.targetPane).length > 0) ? this.content().find(this.model.targetPane)[0]["scrollWidth"] + (this.content().width() - this.content().find($(this.model.targetPane)).outerWidth()) : this.content()[0]["scrollWidth"]) - scrollbar.model.viewportSize;
if (!this.model.enableRTL)
scrollbar.model.value = this.scrollLeft();
}
}
},
_autohide: function () {
if (this.model.autoHide) {
this.element.addClass("e-autohide");
this._on(this.element, "mouseenter mouseleave touchstart touchend", this._scrollerHover);
if (!this.element.is(":hover")) this.content().siblings(".e-scrollbar.e-js").hide();
this._elementDimension(this._exactElementDimension(this.element));
}
else {
this.element.removeClass("e-autohide");
this._off(this.element, "mouseenter mouseleave touchstart touchend", this._scrollerHover);
this.content().siblings(".e-scrollbar.e-js").show();
}
},
_scrollChanged: function (e) {
this._updateScroll = true;
if (e.scrollTop !== undefined)
this.scrollY(e.scrollTop, true, "", e.source);
else if (e.scrollLeft !== undefined)
this.scrollX(e.scrollLeft, true, "", e.source);
this._updateScroll = false;
var proxy = this;
$.when(this.content()).done(ej.proxy(function () {
proxy._trigger("scrollEnd", { scrollData: e });
}));
},
_bindBlurEvent: function (scrollObj, e) {
this._scrollEle = $(scrollObj).data('ejScrollBar');
this._event = e; var proxy = this;
this._listener = function (e) {
this._scrollEle._off($(document), "mousemove touchmove", this._scrollEle._mouseMove);
$(document).off("mouseup touchend", ej.proxy(this._scrollEle._mouseUp, this._scrollEle));
this._scrollEle._prevY = null;
this._off($(document), "mousemove touchmove", this._mouseMove);
this._off($(document), "mouseup touchend", this._mouseUp);
this._off($(window), "blur");
if (this._evtData.handler === "e-vhandle") this._scrollEle._trigger("thumbEnd", { originalEvent: this._event, scrollData: this._evtData });
else this._scrollEle._trigger("thumbEnd", { originalEvent: this._event, scrollData: this._evtData });
};
this._on($(window), "blur", this._listener);
},
_thumbStart: function (e) {
this._evtData = e.scrollData;
var scrollObj = e.scrollData.handler === "e-vhandle" ? this.element.find('.' + e.scrollData.handler).closest('.e-scrollbar') : this.element.find('.' + e.scrollData.handler).closest('.e-scrollbar'); var scrollObj = e.scrollData.handler === "e-vhandle" ? this.element.find('.' + e.scrollData.handler).closest('.e-scrollbar') : this.element.find('.' + e.scrollData.handler).closest('.e-scrollbar');
this._bindBlurEvent(scrollObj, e);
this._trigger("thumbStart", e);
},
_thumbMove: function (e) {
this._trigger("thumbMove", e);
},
_thumbEnd: function (e) {
this._trigger("thumbEnd", e);
this._off($(window), "blur");
},
refresh: function (needRefresh) {
if (!needRefresh) {
this.element.find(">.e-content").removeAttr("style");
}
else {
this._tempVscrollbar = null;
this.element.children(".e-vscrollbar").remove();
this._tempHscrollbar = null;
this.element.children(".e-hscrollbar").remove();
}
if (!ej.isNullOrUndefined(this._eleHeight) && typeof this._eleHeight === "string" && this._eleHeight.indexOf("%") != -1 && this._parentHeight != $(this.element).parent().height()) {
var element = this._exactElementDimension(this.element.parent());
element = element.height - (this["border_bottom"] + this["border_top"] + this["padding_bottom"] + this["padding_top"]);
this.model.height = this._convertPercentageToPixel(parseInt(this._eleHeight), element);
}
if (!ej.isNullOrUndefined(this._eleWidth) && typeof this._eleWidth === "string" && this._eleWidth.indexOf("%") != -1 && this._parentWidth != $(this.element).parent().width()) {
var element = this._exactElementDimension(this.element.parent());
element = element.width - (this["border_left"] + this["border_right"] + this["padding_left"] + this["padding_right"]);
this.model.width = this._convertPercentageToPixel(parseInt(this._eleWidth), element);
}
this._ensureScrollers();
var scrollLeftValue = this.model.scrollLeft;
if (this.model.enableRTL) {
!this.element.hasClass("e-rtl") && this.element.addClass("e-rtl");
this._rtlScrollLeftValue = this.content().scrollLeft();
scrollLeftValue > 0 ? this.content().scrollLeft(this._rtlScrollLeftValue - scrollLeftValue) : this._setScrollLeftValue(scrollLeftValue);
}
else
this.content().scrollLeft(scrollLeftValue);
if ((this.scrollTop() && ej.isNullOrUndefined(this._vScrollbar)) || (!ej.isNullOrUndefined(this._vScrollbar) && (this._vScrollbar && this._vScrollbar._scrollData != null) && !this._vScrollbar._scrollData.skipChange))
this.scrollTop(this._isJquery3 ? Math.ceil(this.scrollTop()) : this.scrollTop());
this.content().scrollTop(this.scrollTop());
if (this._vScrollbar) {
this._vScrollbar._scrollData.dimension = "Height";
this._updateScrollbar(ej.ScrollBar.Orientation.Vertical, this._hScroll);
this._vScroll && !this._vScrollbar._calculateLayout(this._vScrollbar._scrollData) && this._vScrollbar._updateLayout(this._vScrollbar._scrollData);
}
if (this._hScrollbar) {
this._hScrollbar._scrollData.dimension = "Width";
this._updateScrollbar(ej.ScrollBar.Orientation.Horizontal, this._vScroll);
this._hScroll && !this._hScrollbar._calculateLayout(this._hScrollbar._scrollData) && this._hScrollbar._updateLayout(this._hScrollbar._scrollData);
}
if (ej.browserInfo().name == "msie" && ej.browserInfo().version == "8.0")
this.element.find(".e-hhandle").css("left", "0px");
else
this.model.targetPane != null && this._on(this.content().find(this.model.targetPane), "scroll", this._scroll);
this._addActionClass();
this._autohide();
},
_exactElementDimension: function (element) {
var rect = element.get(0).getBoundingClientRect(), direction = ["left", "right", "top", "bottom"], width, height;
rect.width ? width = rect.width : width = rect.right - rect.left;
rect.height ? height = rect.height : height = rect.bottom - rect.top;
for (var i = 0; i < direction.length; i++) {
this["border_" + direction[i]] = isNaN(parseFloat(element.css("border-" + direction[i] + "-width"))) ? 0 : parseFloat(element.css("border-" + direction[i] + "-width"));
this["padding_" + direction[i]] = isNaN(parseFloat(element.css("padding-" + direction[i]))) ? 0 : parseFloat(element.css("padding-" + direction[i]));
}
return rect = { width: width, height: height };
},
_keyPressed: function (action, target) {
if (!this.model.enabled) return;
if (["input", "select", "textarea"].indexOf(target.tagName.toLowerCase()) !== -1)
return true;
var d, iChar;
if (["up", "down", "pageUp", "pageDown"].indexOf(action) !== -1) {
if (this._vScrollbar) {
if (ej.browserInfo().name == "msie" && this.model.allowVirtualScrolling)
this._content.focus();
d = this._vScrollbar._scrollData;
}
iChar = "o";
} else if (["left", "right", "pageLeft", "pageRight"].indexOf(action) !== -1) {
if (this._hScrollbar)
d = this._hScrollbar._scrollData;
iChar = "i";
} else return true;
if (!d) return true;
return !this._changeTop(d, (action.indexOf(iChar) < 0 ? -1 : 1) * (action[0] !== "p" ? 1 : 3) * d.scrollOneStepBy, "key");
},
scrollY: function (pixel, disableAnimation, animationSpeed, source, e) {
var proxy = this;
if (pixel === "") return;
if (disableAnimation) {
var e = { source: source || "custom", scrollData: this._vScrollbar ? this._vScrollbar._scrollData : null, scrollTop: pixel, originalEvent: e };
pixel = (!this._isJquery3) ? e.scrollTop : Math.ceil(e.scrollTop);
this.scrollTop(pixel);
if (this._trigger("scroll", e)) return;
this.content().scrollTop(pixel);
return;
}
if (ej.isNullOrUndefined(animationSpeed) || animationSpeed === "") animationSpeed = 100;
if (this._vScrollbar) pixel = parseFloat(pixel) > this._vScrollbar._scrollData.scrollable ? this._vScrollbar._scrollData.scrollable : parseFloat(pixel)
pixel = (!this._isJquery3) ? pixel : Math.ceil(pixel);
this.scrollTop(pixel);
this.content().stop().animate({
scrollTop: pixel
}, animationSpeed, 'linear', function () {
if (proxy._trigger("scroll", { source: source || "custom", scrollData: proxy._vScrollbar ? proxy._vScrollbar._scrollData : null, scrollTop: pixel, originalEvent: e })) return;
})
},
scrollX: function (pixel, disableAnimation, animationSpeed, source, e) {
var proxy = this;
if (pixel === "") return;
if (this._hScrollbar) pixel = parseFloat(pixel) > this._hScrollbar._scrollData.scrollable ? this._hScrollbar._scrollData.scrollable : parseFloat(pixel);
var browserName = ej.browserInfo().name;
if (this.model.enableRTL && browserName != "mozilla") {
if (pixel < 0) pixel = Math.abs(pixel);
var content = this.model.targetPane != null ? this.content().find(this.model.targetPane)[0] : this.content()[0];
if (e != "mousemove" && e != "touchmove" && (browserName != "msie")) if (browserName != "msie") pixel = this._hScrollbar._scrollData.scrollable - pixel;
}
this.scrollLeft(pixel);
if (disableAnimation) {
if (this._trigger("scroll", { source: source || "custom", scrollData: this._hScrollbar ? this._hScrollbar._scrollData : null, scrollLeft: pixel, originalEvent: e }))
return;
if (this.model.targetPane != null && this.content().find(this.model.targetPane).length)
this.content().find(this.model.targetPane).scrollLeft(pixel);
else
this.content().scrollLeft(pixel);
return;
}
if (ej.isNullOrUndefined(animationSpeed) || animationSpeed === "") animationSpeed = 100;
if (this.model.targetPane != null && this.content().find(this.model.targetPane).length)
this.content().find(this.model.targetPane).stop().animate({
scrollLeft: pixel
}, animationSpeed, 'linear');
else this.content().stop().animate({
scrollLeft: pixel
}, animationSpeed, 'linear', function () {
if (proxy._trigger("scroll", { source: source || "custom", scrollData: proxy._hScrollbar ? proxy._hScrollbar._scrollData : null, scrollLeft: pixel, originalEvent: e })) return;
});
},
enable: function () {
var scroller = this.element.find(".e-vscrollbar,.e-hscrollbar,.e-vscroll,.e-hscroll,.e-vhandle,.e-hhandle,.e-vscroll .e-icon,.e-hscroll .e-icon");
if (scroller.hasClass("e-disable")) {
scroller.removeClass("e-disable").attr({ "aria-disabled": false });
this.model.enabled = true;
}
if (this._vScrollbar)
this._vScrollbar._enabled = this.model.enabled;
if (this._hScrollbar)
this._hScrollbar._enabled = this.model.enabled;
},
disable: function () {
var scroller = this.element.find(".e-vscrollbar,.e-hscrollbar,.e-vscroll,.e-hscroll,.e-vhandle,.e-hhandle,.e-vscroll .e-icon,.e-hscroll .e-icon");
scroller.addClass("e-disable").attr({ "aria-disabled": true });
this.model.enabled = false;
if (this._vScrollbar)
this._vScrollbar._enabled = this.model.enabled;
if (this._hScrollbar)
this._hScrollbar._enabled = this.model.enabled;
},
_changeTop: function (d, step, source, e) {
var start = Math.ceil(this.model.targetPane != null && d.dimension != "height" ? this.content().find(this.model.targetPane)[d.scrollVal]() : this.content()[d.scrollVal]()), t;
if (d.dimension == "height" && start == 0)
start = this.scrollTop() != 0 ? this.scrollTop() : 0;
t = start + step;
if (!d.enableRTL ? t > d.scrollable : t < d.scrollable) t = Math.round(d.scrollable);
if (!d.enableRTL ? t < 0 : t > 0) t = 0;
if (t !== start) {
this["scroll" + d.xy](t, true, "", source, e);
if (d.xy === "X" && !ej.isNullOrUndefined(this._hScrollbar))
this._hScrollbar["scroll"](t, source, true, e);
else if (!ej.isNullOrUndefined(this._vScrollbar))
this._vScrollbar["scroll"](t, source, true, e);
}
return t !== start;
},
_mouseWheel: function (e) {
if (this._vScrollbar && e.ctrlKey)
return;
if (!this._vScrollbar && !e.shiftKey)
return;
if (!e.data || !this.model.enabled) return;
var delta = 0, data = e.data.d, ori = e, direction;
e = e.originalEvent;
this._wheelStart && this._trigger("wheelStart", { originalEvent: e, scrollData: ori.data.d });
this._wheelStart = false;
clearTimeout($.data(this, 'timer'));
if (this._wheelx != 1 && (e.wheelDeltaX == 0 || e.wheelDeltaY == 0))
this._wheelx = 1;
if (navigator.platform.indexOf("Mac") == 0 && (this._wheelx == 0)) {
if (this._browser == "webkit" || this._browser == "chrome")
return true;
}
if (this._browser == "mozilla")
e.axis == e.HORIZONTAL_AXIS ? data = this._scrollXdata : this._scrollYdata;
else if (this._browser == "msie") {
if ((e.type == "wheel")) delta = e.deltaX / 120;
if ((e.type == "mousewheel" && e.shiftKey)) {
data = this._scrollXdata;
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}
}
else if (this._wheelx && e.wheelDeltaX != 0 && e.wheelDeltaY == 0 && this._scrollXdata)
data = this._scrollXdata;
if (e.wheelDeltaX == 0) this._wheelx = e.wheelDeltaX;
if (e.wheelDelta) {
delta = this._normalizingDelta(e);
if (window.opera) {
if (parseFloat(window.opera.version, 10) < 10)
delta = -delta;
}
} else if (e.detail) delta = e.detail / 3;
if (!delta) return;
if ((ori.originalEvent))
if (ori.originalEvent.wheelDelta && ori.originalEvent.wheelDelta > 0 || ori.originalEvent.detail && ori.originalEvent.detail < 0) direction = -1;
else direction = 1;
if (this._changeTop(data, delta * data.scrollOneStepBy, "wheel", e)) {
e.preventDefault ? e.preventDefault() : ori.preventDefault();
ori.stopImmediatePropagation();
ori.stopPropagation();
this._trigger("wheelMove", { originalEvent: e, scrollData: ori.data.d, direction: direction });
}
else {
this._trigger("scrollEnd", { originalEvent: e, scrollData: ori });
this._wheelx = 0;
}
var proxy = this;
$.data(this, 'timer', setTimeout(function () {
proxy._wheelStart = true;
proxy._trigger("wheelStop", { originalEvent: e, scrollData: ori.data.d, direction: direction });
}, 250));
},
_normalizingDelta: function (e) {
var delta = navigator.platform.indexOf("Mac") == 0 ? -e.wheelDelta / 3 : -e.wheelDelta / 120;
return delta;
},
_contentHeightWidth: function () {
if (this.content().siblings().css("display") == "block" && this.model.autoHide) {
this._hScroll && this.content()[this._contentHeight](this._ElementHeight - (this.model.scrollerSize));
this._vScroll && this.content()[this._contentWidth](this._ElementWidth - (this.model.scrollerSize));
}
else if (this.content().siblings().css("display") == "none" && this.model.autoHide && (this._vScroll || this._hScroll)) {
this.content()[this._contentHeight](this._ElementHeight);
this.content()[this._contentWidth](this._ElementWidth);
}
},
_scrollerHover: function (e) {
if (this.model.enabled) {
if ((e.type == "mouseenter" || e.type == "touchstart") && !this.content().siblings().is(":visible")) {
this.content().siblings().css("display", "block");
this._contentHeightWidth();
this._ensureScrollers();
this._setScrollLeftValue(this.model.scrollLeft);
this._trigger("scrollVisible", { originalEvent: e });
}
else if (e.type == "mouseleave" || e.type == "touchend") {
this.content().siblings().hide();
this._contentHeightWidth();
this._trigger("scrollHide", { originalEvent: e });
}
}
},
_mouseUp: function (e) {
if (!e.data) return;
var d = e.data.d;
if (this.model.enableRTL && (e.type == "mouseup" || e.type == "touchend")) {
this.model.scrollLeft = this._rtlScrollLeftValue - this.model.scrollLeft;
}
if (e.type === "mouseup" || e.type === "touchend" || (!e.toElement && !e.relatedTarget)) {
this.content().css("cursor", "default");
this._off($(document), "mousemove touchmove");
this._off(this.content(), "touchmove", this._touchMove);
this._off($(document), "mouseup touchend", this._mouseUp);
d.fromScroller = false;
if (this._mouseMoved === true && e.data.source === "thumb" && !ej.isNullOrUndefined(this.model)) {
$.when(this.content()).done(ej.proxy(function () {
this._trigger("thumbEnd", { originalEvent: e, scrollData: d });
}, this));
this._off($(window), "blur");
}
}
d.up = true;
this._mouseMoved = false;
window.ontouchmove = null;
},
_mouseDownOnContent: function (down) {
this._startX = (down.clientX != undefined) ? down.clientX : down.originalEvent.changedTouches[0].clientX;
this._startY = (down.clientY != undefined) ? down.clientY : down.originalEvent.changedTouches[0].clientY;
this._timeStart = down.timeStamp || Date.now();
if (!this.model.enabled) return;
var d = down.data.d;
this._evtData = down.data;
var scrollObj = d.handler === "e-vhandle" ? this.element.find('.' + d.handler).closest('.e-scrollbar') : this.element.find('.' + d.handler).closest('.e-scrollbar');
this._bindBlurEvent(scrollObj, down);
if (this._trigger("thumbStart", { originalEvent: down, scrollData: d }))
return;
if (down.which == 3 && down.button == 2) return;
d.fromScroller = true;
var prevY = null, skip = 1, min = 5, direction;
this._document = $(document); this._window = $(window);
if (Math.abs(this._relDisX) > Math.abs(this._relDisY))
this._swipe = (this._relDisX < 0) ? "left" : "right";
else
this._swipe = (this._relDisY < 0) ? "up" : "down";
this._mouseMove = function (move) {
if (this.model.enableRTL) {
this._UpdateScrollLeftValue(down);
}
if (this._startX + this._startY != move.clientX + move.clientY) {
this._relDisX = ((move.clientX != undefined) ? this._startx = move.clientX : this._startx = move.originalEvent.changedTouches[0].clientX) - this._startX;
this._relDisY = ((move.clientY != undefined) ? this._starty = move.clientY : this._starty = move.originalEvent.changedTouches[0].clientY) - this._startY;
this._duration = (move.timeStamp || Date.now()) - this._timeStart;
this._velocityY = Math.abs(this._relDisY) / this._duration;
this._velocityX = Math.abs(this._relDisX) / this._duration;
if (!ej.isNullOrUndefined(move.target.tagName) && move.target.tagName.toLowerCase() === "iframe") {
move.type = "mouseup";
this._mouseUp(move);
return;
}
var pageXY = move.type == "mousemove" ? move[d.clientXy] : move.originalEvent.changedTouches[0][d.clientXy];
if (prevY && pageXY !== prevY) {
this._mouseMoved = true;
var diff = pageXY - prevY, sTop = this.model[d.scrollVal] - (diff);
if (skip == 1 && Math.abs(diff) > min) {
direction = d.position;
skip = 0;
}
if (skip == 0) prevY = pageXY;
if (sTop >= 0 && sTop <= d.scrollable && direction === d.position) {
var top = this._velocityY > 0.5 && this._duration < 50 && d.position == "Top";
var left = this._velocityX > 0.5 && this._duration < 50 && d.position == "Left";
var swipeXY = ((this._velocityY > 0.5) || (this._velocityX > 0.5)) && this._duration < 50;
if (swipeXY) {
if (top) {
sTop = Math.abs(this._relDisY) + (this._duration * this._velocityY);
if (this._startY > this._starty) {
sTop += this.scrollTop();
if (sTop > d.scrollable) sTop = d.scrollable;
}
else {
if (sTop < this.scrollTop()) sTop = Math.abs(sTop - this.scrollTop());
if (sTop > this.scrollTop())
sTop = 0;
}
if (this.scrollTop() <= d.scrollable) this["scrollY"](sTop, false, this.model.animationSpeed, "thumb");
}
else if (left) {
sTop = Math.abs(this._relDisX);
if (this._startX > this._startx) {
sTop += this.scrollLeft();
if (sTop > d.scrollable) sTop = d.scrollable;
}
else {
sTop -= this.scrollLeft();
sTop = Math.abs(sTop);
if (sTop > d.scrollable || sTop >= this.scrollLeft()) sTop = 0;
}
if (this.scrollLeft() <= d.scrollable) this["scrollX"](sTop, false, this.model.animationSpeed, "thumb");
}
}
else {
this["scroll" + d.xy](sTop, true, "", "thumb", move.type);
if (d.xy === "X")
this._hScrollbar["scroll"](sTop, "thumb", true, move.type);
else if (!ej.isNullOrUndefined(this._vScrollbar))
this._vScrollbar["scroll"](sTop, "thumb", true, move.type);
this.content().css("cursor", "pointer");
this._trigger("thumbMove", { originalEvent: move, direction: (this._swipe == "down" || this._swipe == "right") ? 1 : -1, scrollData: d });
}
}
}
window.ontouchmove = function (e) {
e = e || window.event;
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
}
if (prevY == null) prevY = pageXY;
if (((Math.round(this._content["scrollTop"]()) == 0) && this._swipe == "down" || ((Math.ceil(this._content["scrollTop"]()) == d.scrollable || Math.ceil(this._content["scrollTop"]()) + 1 == d.scrollable) && this._swipe == "up"))) {
this._trigger("scrollEnd", { originalEvent: move.originalEvent, scrollData: move });
window.ontouchmove = null;
}
}
}
this._trigger("touchStart", { originalEvent: down, direction: (this._swipe == "down" || this._swipe == "right") ? 1 : -1, scrollData: this._scrollData, scrollTop: this.content().scrollTop(), scrollLeft: this.content().scrollLeft() });
this._on($(document), "mousemove", { d: d, source: "thumb" }, this._mouseMove);
if (!this._isNativeScroll) this._on($(document), "touchmove", { d: d, source: "thumb" }, this._mouseMove);
else {
this._on(this.content(), "touchmove", { d: d, source: "thumb" }, this._touchMove);
}
this._on($(document), "mouseup touchend", { d: d, source: "thumb" }, this._mouseUp);
},
_touchMove: function (e) {
this.content().css("cursor", "pointer");
this._mouseMoved = true;
this._tempLeft = this.model.targetPane != null ? this.content().find(this.model.targetPane).scrollLeft() : this.content().scrollLeft();
this._tempTop = this.content().scrollTop();
},
_touchDown: function (e) {
var data;
if (this._tempLeft != this.scrollLeft()) data = this._scrollXdata;
else if (this._tempTop != this.scrollTop()) data = this._scrollYdata;
else data = (!this._scrollYdata) ? this._scrollXdata : this._scrollYdata;
this._trigger("scrollStop", { source: "thumb" || "custom", originalEvent: e, scrollData: data, scrollTop: this.content().scrollTop(), scrollLeft: this.content().scrollLeft() });
},
_speedScrolling: function (e) {
if (this._mouseMoved) {
if (this.element.find(".e-vhandle").length > 0) {
var scrollTop = this.content().scrollTop();
if (this._tempTop !== scrollTop) {
this._trigger("thumbMove", { originalEvent: e, direction: (this._swipe == "down" || this._swipe == "right") ? 1 : -1, scrollData: this._scrollData });
this._vScrollbar["scroll"](this.content().scrollTop(), "thumb", true, "touchmove");
var e = { source: "thumb" || "custom", scrollData: this._vScrollbar ? this._vScrollbar._scrollData : null, scrollTop: this.content().scrollTop(), originalEvent: e };
var pixel = (!this._isJquery3) ? e.scrollTop : Math.ceil(e.scrollTop);
this.scrollTop(pixel);
if (this._trigger("scroll", e)) return;
}
}
if (this.element.find(".e-hhandle").length > 0) {
var contentArea = this.model.targetPane != null ? this.content().find(this.model.targetPane) : this.content();
var scrollLeft = contentArea.scrollLeft();
if (this._tempLeft !== scrollLeft) {
this._trigger("thumbMove", { originalEvent: e, direction: (this._swipe == "down" || this._swipe == "right") ? 1 : -1, scrollData: this._scrollData });
this._hScrollbar["scroll"](contentArea.scrollLeft(), "thumb", true, "touchmove");
var e = { source: "thumb" || "custom", scrollData: this._hScrollbar ? this._hScrollbar._scrollData : null, scrollLeft: this.content().scrollLeft(), originalEvent: e };
var pixel = (!this._isJquery3) ? e.scrollLeft : Math.ceil(e.scrollLeft);
this.scrollLeft(pixel);
if (this._trigger("scroll", e)) return;
}
}
this.content().css("cursor", "pointer");
}
},
_scroll: function (e) {
var dS = [this._vScrollbar ? this._vScrollbar._scrollData : null, this._hScrollbar ? this._hScrollbar._scrollData : null];
if (this._evtData) var data = this._evtData.d ? this._evtData.d : this._evtData;
for (var i = 0; i < 2; i++) {
var d = dS[i];
if (!d || d.skipChange) continue;
if (this.model && ((!this.model.targetPane) || (this.model.targetPane && data && data.xy != "X")))
d.dimension === "height" ? this.scrollTop(e.target[d.scrollVal]) : this.scrollLeft(e.target[d.scrollVal])
if (this.model && this.model.targetPane != null && i == 1 && this.content().find(this.model.targetPane).length)
d.sTop = this.content().find(this.model.targetPane)[0][d.scrollVal];
else d.scrollVal == "scrollTop" ? d.sTop = this.scrollTop() : d.sTop = this.scrollLeft();
this[d.scrollVal](d.sTop);
if (d.fromScroller) continue;
if (i === 1) {
var content = this.content()[0];
if (this._rtlScrollLeftValue && content.scrollWidth - content.clientWidth != this._rtlScrollLeftValue)
this._rtlScrollLeftValue = content.scrollWidth - content.clientWidth;
d.sTop = (this.model && ej.browserInfo().name != "mozilla" && this.model.enableRTL && !this._hScrollbar._scrollData._scrollleftflag) ? (this._rtlScrollLeftValue == 0 ? (d.sTop * -1) : (d.sTop - this._rtlScrollLeftValue)) : d.sTop;
this._hScrollbar["scroll"](d.sTop, "", true);
} else
this._vScrollbar["scroll"](d.sTop, "", true);
if (dS.length == 2 && i == 1 || dS.length == 1 && i == 0) {
this._externalScroller = false;
this.model && this._trigger('scroll', { source: "custom", scrollData: this._hScrollbar ? this._hScrollbar._scrollData : null, scrollLeft: this.scrollLeft(), originalEvent: e });
}
}
if (this._isNativeScroll && this.model.enableTouchScroll) this._speedScrolling(e);
this._UpdateScrollLeftValue(e);
},
_UpdateScrollLeftValue: function (e) {
if (this.model && e.type != "touchstart" && e.type != "mousedown" && this.model.enableRTL && this._rtlScrollLeftValue && this.model.scrollLeft != this._previousScrollLeft) {
this.model.scrollLeft = this._rtlScrollLeftValue - this.model.scrollLeft;
this._previousScrollLeft = this.model.scrollLeft;
}
if ((this.model && e.type == "touchstart" || e.type == "mousedown") && this.model.enableRTL) {
this.model.scrollLeft = this.content().scrollLeft();
this.option("scrollLeft", this.content().scrollLeft());
}
},
_changevHandlerPosition: function (top) {
var scrollbar = this._vScrollbar;
if (scrollbar) {
top = scrollbar._scrollData != null && top >= scrollbar._scrollData.scrollable ? scrollbar._scrollData.scrollable : top;
if (scrollbar != null && top >= 0 && top <= scrollbar._scrollData.scrollable)
scrollbar[scrollbar._scrollData.handler].css(scrollbar._scrollData.lPosition, (top / scrollbar._scrollData.onePx) + "px");
}
},
_changehHandlerPosition: function (left) {
var scrollbar = this._hScrollbar;
if (scrollbar) {
left = scrollbar._scrollData != null && left >= scrollbar._scrollData.scrollable ? scrollbar._scrollData.scrollable : left;
if (scrollbar != null && top >= 0 && left <= scrollbar._scrollData.scrollable)
scrollbar[scrollbar._scrollData.handler].css(scrollbar._scrollData.lPosition, (left / scrollbar._scrollData.onePx) + "px");
}
},
_destroy: function () {
this._off(this.content(), "scrollstop", this._touchDown);
this.element.css({ "width": "", "height": "" }).children(".e-vscrollbar,.e-hscrollbar").remove();
this.content().removeClass("e-content").css({ "width": "", "height": "" });
this.element.removeClass("e-widget");
},
_preventDefault: function (e) {
e = e || window.event;
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
}
});
})(jQuery, Syncfusion, window);