+
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts
index 10b4a52f7..5a9bcc2f9 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-form.component.ts
@@ -24,17 +24,23 @@ var flatten = require('flat');
declare var $ :any;
-//import * as $ from '../../../node_modules/jquery/dist/jquery'
-
import * as scroll from '../../assets/jquery.scrollTo.min.js';
+import '../../assets/custom.js';
+declare function simple_notifier(type: string, title: string, message:string): any;
+//import '../../assets/perfect-scrollbar/perfect-scrollbar.js';
+declare var PerfectScrollbar : any;
+
@Component({
selector: 'dynamic-form',
templateUrl: './dynamic-form.component.html',
- styleUrls: ['./dynamic-form.component.css'],
+ styleUrls: [
+ './dynamic-form.component.css',
+ '../../assets/perfect-scrollbar/perfect-scrollbar.css'
+ ],
providers: [
FieldControlService, ServerService, dataModelBuilder
]
@@ -187,6 +193,10 @@ export class DynamicFormComponent implements OnInit {
(err) => {
});
+
+ var formScroller = new PerfectScrollbar("#form-container");
+ var tocScroller = new PerfectScrollbar("#toc-container");
+ debugger;
}
scrollToElemID(elemID) {
@@ -196,7 +206,7 @@ export class DynamicFormComponent implements OnInit {
private patchForm(flatList: any) {
- debugger;
+
for (var prop in flatList) {
if (flatList.hasOwnProperty(prop)) {
if (prop.endsWith('.id') || prop.endsWith('.answer') || prop.endsWith('.value')) continue;
@@ -208,6 +218,7 @@ export class DynamicFormComponent implements OnInit {
}
ngAfterViewChecked(): void { //navigate to certain section of the page
+
try {
document.querySelector('#' + this.fragment).scrollIntoView();
} catch (e) { }
@@ -221,18 +232,18 @@ export class DynamicFormComponent implements OnInit {
//data.properties = this.xml2jsonOBJ.json2xml_str(JSON.stringify(this.form.value));
data.properties = JSON.stringify(this.form.value);
- this.serverService.setDataset(data).subscribe((data) => {
- console.log("Updated dataset");
- this.router.navigate(['/workspace'], { queryParams: { /*returnUrl: this.state.url*/ }});
- //VALE EDW NA SE PIGAINEI PISW KAI NA SOU VGAZEI ENA MHNYMA SUCCESS... (to success tha to valw egw an thes)
-
- },
+ this.serverService.setDataset(data).subscribe(
+ (data) => {
+ console.log("Updated dataset");
+ //simple_notifier("success",null,"Saved form progress");
+ this.router.navigate(['/workspace'], { queryParams: { /*returnUrl: this.state.url*/ }});
+ },
(err) => {
-
+ simple_notifier("danger",null,"Could not save form progress");
});
},
(err) => {
-
+ simple_notifier("danger",null,"Could not save form progress");
});
}
diff --git a/dmp-frontend/src/assets/perfect-scrollbar/perfect-scrollbar.css b/dmp-frontend/src/assets/perfect-scrollbar/perfect-scrollbar.css
new file mode 100644
index 000000000..a16e20743
--- /dev/null
+++ b/dmp-frontend/src/assets/perfect-scrollbar/perfect-scrollbar.css
@@ -0,0 +1,112 @@
+/*
+ * Container style
+ */
+ .ps {
+ overflow: hidden !important;
+ overflow-anchor: none;
+ -ms-overflow-style: none;
+ touch-action: auto;
+ -ms-touch-action: auto;
+ }
+
+ /*
+ * Scrollbar rail styles
+ */
+ .ps__rail-x {
+ display: none;
+ opacity: 0;
+ transition: background-color .2s linear, opacity .2s linear;
+ -webkit-transition: background-color .2s linear, opacity .2s linear;
+ height: 15px;
+ /* there must be 'bottom' or 'top' for ps__rail-x */
+ bottom: 0px;
+ /* please don't change 'position' */
+ position: absolute;
+ }
+
+ .ps__rail-y {
+ display: none;
+ opacity: 0;
+ transition: background-color .2s linear, opacity .2s linear;
+ -webkit-transition: background-color .2s linear, opacity .2s linear;
+ width: 15px;
+ /* there must be 'right' or 'left' for ps__rail-y */
+ right: 0;
+ /* please don't change 'position' */
+ position: absolute;
+ }
+
+ .ps--active-x > .ps__rail-x,
+ .ps--active-y > .ps__rail-y {
+ display: block;
+ background-color: transparent;
+ }
+
+ .ps:hover > .ps__rail-x,
+ .ps:hover > .ps__rail-y,
+ .ps--focus > .ps__rail-x,
+ .ps--focus > .ps__rail-y,
+ .ps--scrolling-x > .ps__rail-x,
+ .ps--scrolling-y > .ps__rail-y {
+ opacity: 0.6;
+ }
+
+ .ps__rail-x:hover,
+ .ps__rail-y:hover,
+ .ps__rail-x:focus,
+ .ps__rail-y:focus {
+ background-color: #eee;
+ opacity: 0.9;
+ }
+
+ /*
+ * Scrollbar thumb styles
+ */
+ .ps__thumb-x {
+ background-color: #aaa;
+ border-radius: 6px;
+ transition: background-color .2s linear, height .2s ease-in-out;
+ -webkit-transition: background-color .2s linear, height .2s ease-in-out;
+ height: 6px;
+ /* there must be 'bottom' for ps__thumb-x */
+ bottom: 2px;
+ /* please don't change 'position' */
+ position: absolute;
+ }
+
+ .ps__thumb-y {
+ background-color: #aaa;
+ border-radius: 6px;
+ transition: background-color .2s linear, width .2s ease-in-out;
+ -webkit-transition: background-color .2s linear, width .2s ease-in-out;
+ width: 6px;
+ /* there must be 'right' for ps__thumb-y */
+ right: 2px;
+ /* please don't change 'position' */
+ position: absolute;
+ }
+
+ .ps__rail-x:hover > .ps__thumb-x,
+ .ps__rail-x:focus > .ps__thumb-x {
+ background-color: #999;
+ height: 11px;
+ }
+
+ .ps__rail-y:hover > .ps__thumb-y,
+ .ps__rail-y:focus > .ps__thumb-y {
+ background-color: #999;
+ width: 11px;
+ }
+
+ /* MS supports */
+ @supports (-ms-overflow-style: none) {
+ .ps {
+ overflow: auto !important;
+ }
+ }
+
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ .ps {
+ overflow: auto !important;
+ }
+ }
\ No newline at end of file
diff --git a/dmp-frontend/src/assets/perfect-scrollbar/perfect-scrollbar.js b/dmp-frontend/src/assets/perfect-scrollbar/perfect-scrollbar.js
new file mode 100644
index 000000000..d3b2c0f4d
--- /dev/null
+++ b/dmp-frontend/src/assets/perfect-scrollbar/perfect-scrollbar.js
@@ -0,0 +1,1297 @@
+/*!
+ * perfect-scrollbar v1.2.0
+ * (c) 2017 Hyunje Jun
+ * @license MIT
+ */
+(function (global, factory) {
+ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+ typeof define === 'function' && define.amd ? define(factory) :
+ (global.PerfectScrollbar = factory());
+}(this, (function () { 'use strict';
+
+function get(element) {
+ return getComputedStyle(element);
+}
+
+function set(element, obj) {
+ for (var key in obj) {
+ var val = obj[key];
+ if (typeof val === 'number') {
+ val = val + "px";
+ }
+ element.style[key] = val;
+ }
+ return element;
+}
+
+function div(className) {
+ var div = document.createElement('div');
+ div.className = className;
+ return div;
+}
+
+var elMatches =
+ Element.prototype.matches ||
+ Element.prototype.webkitMatchesSelector ||
+ Element.prototype.msMatchesSelector;
+
+function matches(element, query) {
+ if (!elMatches) {
+ throw new Error('No element matching method supported');
+ }
+
+ return elMatches.call(element, query);
+}
+
+function remove(element) {
+ if (element.remove) {
+ element.remove();
+ } else {
+ if (element.parentNode) {
+ element.parentNode.removeChild(element);
+ }
+ }
+}
+
+function queryChildren(element, selector) {
+ return Array.prototype.filter.call(element.children, function (child) { return matches(child, selector); }
+ );
+}
+
+var cls = {
+ main: 'ps',
+ element: {
+ thumb: function (x) { return ("ps__thumb-" + x); },
+ rail: function (x) { return ("ps__rail-" + x); },
+ consuming: 'ps__child--consume',
+ },
+ state: {
+ focus: 'ps--focus',
+ active: function (x) { return ("ps--active-" + x); },
+ scrolling: function (x) { return ("ps--scrolling-" + x); },
+ },
+};
+
+/*
+ * Helper methods
+ */
+var scrollingClassTimeout = { x: null, y: null };
+
+function addScrollingClass(i, x) {
+ var classList = i.element.classList;
+ var className = cls.state.scrolling(x);
+
+ if (classList.contains(className)) {
+ clearTimeout(scrollingClassTimeout[x]);
+ } else {
+ classList.add(className);
+ }
+}
+
+function removeScrollingClass(i, x) {
+ scrollingClassTimeout[x] = setTimeout(
+ function () { return i.isAlive && i.element.classList.remove(cls.state.scrolling(x)); },
+ i.settings.scrollingThreshold
+ );
+}
+
+function setScrollingClassInstantly(i, x) {
+ addScrollingClass(i, x);
+ removeScrollingClass(i, x);
+}
+
+var EventElement = function EventElement(element) {
+ this.element = element;
+ this.handlers = {};
+};
+
+var prototypeAccessors = { isEmpty: { configurable: true } };
+
+EventElement.prototype.bind = function bind (eventName, handler) {
+ if (typeof this.handlers[eventName] === 'undefined') {
+ this.handlers[eventName] = [];
+ }
+ this.handlers[eventName].push(handler);
+ this.element.addEventListener(eventName, handler, false);
+};
+
+EventElement.prototype.unbind = function unbind (eventName, target) {
+ var this$1 = this;
+
+ this.handlers[eventName] = this.handlers[eventName].filter(function (handler) {
+ if (target && handler !== target) {
+ return true;
+ }
+ this$1.element.removeEventListener(eventName, handler, false);
+ return false;
+ });
+};
+
+EventElement.prototype.unbindAll = function unbindAll () {
+ var this$1 = this;
+
+ for (var name in this$1.handlers) {
+ this$1.unbind(name);
+ }
+};
+
+prototypeAccessors.isEmpty.get = function () {
+ var this$1 = this;
+
+ return Object.keys(this.handlers).every(
+ function (key) { return this$1.handlers[key].length === 0; }
+ );
+};
+
+Object.defineProperties( EventElement.prototype, prototypeAccessors );
+
+var EventManager = function EventManager() {
+ this.eventElements = [];
+};
+
+EventManager.prototype.eventElement = function eventElement (element) {
+ var ee = this.eventElements.filter(function (ee) { return ee.element === element; })[0];
+ if (!ee) {
+ ee = new EventElement(element);
+ this.eventElements.push(ee);
+ }
+ return ee;
+};
+
+EventManager.prototype.bind = function bind (element, eventName, handler) {
+ this.eventElement(element).bind(eventName, handler);
+};
+
+EventManager.prototype.unbind = function unbind (element, eventName, handler) {
+ var ee = this.eventElement(element);
+ ee.unbind(eventName, handler);
+
+ if (ee.isEmpty) {
+ // remove
+ this.eventElements.splice(this.eventElements.indexOf(ee), 1);
+ }
+};
+
+EventManager.prototype.unbindAll = function unbindAll () {
+ this.eventElements.forEach(function (e) { return e.unbindAll(); });
+ this.eventElements = [];
+};
+
+EventManager.prototype.once = function once (element, eventName, handler) {
+ var ee = this.eventElement(element);
+ var onceHandler = function (evt) {
+ ee.unbind(eventName, onceHandler);
+ handler(evt);
+ };
+ ee.bind(eventName, onceHandler);
+};
+
+function createEvent(name) {
+ if (typeof window.CustomEvent === 'function') {
+ return new CustomEvent(name);
+ } else {
+ var evt = document.createEvent('CustomEvent');
+ evt.initCustomEvent(name, false, false, undefined);
+ return evt;
+ }
+}
+
+var processScrollDiff = function(
+ i,
+ axis,
+ diff,
+ useScrollingClass,
+ forceFireReachEvent
+) {
+ if ( useScrollingClass === void 0 ) useScrollingClass = true;
+ if ( forceFireReachEvent === void 0 ) forceFireReachEvent = false;
+
+ var fields;
+ if (axis === 'top') {
+ fields = [
+ 'contentHeight',
+ 'containerHeight',
+ 'scrollTop',
+ 'y',
+ 'up',
+ 'down' ];
+ } else if (axis === 'left') {
+ fields = [
+ 'contentWidth',
+ 'containerWidth',
+ 'scrollLeft',
+ 'x',
+ 'left',
+ 'right' ];
+ } else {
+ throw new Error('A proper axis should be provided');
+ }
+
+ processScrollDiff$1(i, diff, fields, useScrollingClass, forceFireReachEvent);
+};
+
+function processScrollDiff$1(
+ i,
+ diff,
+ ref,
+ useScrollingClass,
+ forceFireReachEvent
+) {
+ var contentHeight = ref[0];
+ var containerHeight = ref[1];
+ var scrollTop = ref[2];
+ var y = ref[3];
+ var up = ref[4];
+ var down = ref[5];
+ if ( useScrollingClass === void 0 ) useScrollingClass = true;
+ if ( forceFireReachEvent === void 0 ) forceFireReachEvent = false;
+
+ var element = i.element;
+
+ // reset reach
+ i.reach[y] = null;
+
+ // 1 for subpixel rounding
+ if (element[scrollTop] < 1) {
+ i.reach[y] = 'start';
+ }
+
+ // 1 for subpixel rounding
+ if (element[scrollTop] > i[contentHeight] - i[containerHeight] - 1) {
+ i.reach[y] = 'end';
+ }
+
+ if (diff) {
+ element.dispatchEvent(createEvent(("ps-scroll-" + y)));
+
+ if (diff < 0) {
+ element.dispatchEvent(createEvent(("ps-scroll-" + up)));
+ } else if (diff > 0) {
+ element.dispatchEvent(createEvent(("ps-scroll-" + down)));
+ }
+
+ if (useScrollingClass) {
+ setScrollingClassInstantly(i, y);
+ }
+ }
+
+ if (i.reach[y] && (diff || forceFireReachEvent)) {
+ element.dispatchEvent(createEvent(("ps-" + y + "-reach-" + (i.reach[y]))));
+ }
+}
+
+function toInt(x) {
+ return parseInt(x, 10) || 0;
+}
+
+function isEditable(el) {
+ return (
+ matches(el, 'input,[contenteditable]') ||
+ matches(el, 'select,[contenteditable]') ||
+ matches(el, 'textarea,[contenteditable]') ||
+ matches(el, 'button,[contenteditable]')
+ );
+}
+
+function outerWidth(element) {
+ var styles = get(element);
+ return (
+ toInt(styles.width) +
+ toInt(styles.paddingLeft) +
+ toInt(styles.paddingRight) +
+ toInt(styles.borderLeftWidth) +
+ toInt(styles.borderRightWidth)
+ );
+}
+
+var env = {
+ isWebKit: document && 'WebkitAppearance' in document.documentElement.style,
+ supportsTouch:
+ window &&
+ ('ontouchstart' in window ||
+ (window.DocumentTouch && document instanceof window.DocumentTouch)),
+ supportsIePointer: navigator && navigator.msMaxTouchPoints,
+};
+
+var updateGeometry = function(i) {
+ var element = i.element;
+
+ i.containerWidth = element.clientWidth;
+ i.containerHeight = element.clientHeight;
+ i.contentWidth = element.scrollWidth;
+ i.contentHeight = element.scrollHeight;
+
+ if (!element.contains(i.scrollbarXRail)) {
+ // clean up and append
+ queryChildren(element, cls.element.rail('x')).forEach(function (el) { return remove(el); }
+ );
+ element.appendChild(i.scrollbarXRail);
+ }
+ if (!element.contains(i.scrollbarYRail)) {
+ // clean up and append
+ queryChildren(element, cls.element.rail('y')).forEach(function (el) { return remove(el); }
+ );
+ element.appendChild(i.scrollbarYRail);
+ }
+
+ if (
+ !i.settings.suppressScrollX &&
+ i.containerWidth + i.settings.scrollXMarginOffset < i.contentWidth
+ ) {
+ i.scrollbarXActive = true;
+ i.railXWidth = i.containerWidth - i.railXMarginWidth;
+ i.railXRatio = i.containerWidth / i.railXWidth;
+ i.scrollbarXWidth = getThumbSize(
+ i,
+ toInt(i.railXWidth * i.containerWidth / i.contentWidth)
+ );
+ i.scrollbarXLeft = toInt(
+ (i.negativeScrollAdjustment + element.scrollLeft) *
+ (i.railXWidth - i.scrollbarXWidth) /
+ (i.contentWidth - i.containerWidth)
+ );
+ } else {
+ i.scrollbarXActive = false;
+ }
+
+ if (
+ !i.settings.suppressScrollY &&
+ i.containerHeight + i.settings.scrollYMarginOffset < i.contentHeight
+ ) {
+ i.scrollbarYActive = true;
+ i.railYHeight = i.containerHeight - i.railYMarginHeight;
+ i.railYRatio = i.containerHeight / i.railYHeight;
+ i.scrollbarYHeight = getThumbSize(
+ i,
+ toInt(i.railYHeight * i.containerHeight / i.contentHeight)
+ );
+ i.scrollbarYTop = toInt(
+ element.scrollTop *
+ (i.railYHeight - i.scrollbarYHeight) /
+ (i.contentHeight - i.containerHeight)
+ );
+ } else {
+ i.scrollbarYActive = false;
+ }
+
+ if (i.scrollbarXLeft >= i.railXWidth - i.scrollbarXWidth) {
+ i.scrollbarXLeft = i.railXWidth - i.scrollbarXWidth;
+ }
+ if (i.scrollbarYTop >= i.railYHeight - i.scrollbarYHeight) {
+ i.scrollbarYTop = i.railYHeight - i.scrollbarYHeight;
+ }
+
+ updateCss(element, i);
+
+ if (i.scrollbarXActive) {
+ element.classList.add(cls.state.active('x'));
+ } else {
+ element.classList.remove(cls.state.active('x'));
+ i.scrollbarXWidth = 0;
+ i.scrollbarXLeft = 0;
+ element.scrollLeft = 0;
+ }
+ if (i.scrollbarYActive) {
+ element.classList.add(cls.state.active('y'));
+ } else {
+ element.classList.remove(cls.state.active('y'));
+ i.scrollbarYHeight = 0;
+ i.scrollbarYTop = 0;
+ element.scrollTop = 0;
+ }
+};
+
+function getThumbSize(i, thumbSize) {
+ if (i.settings.minScrollbarLength) {
+ thumbSize = Math.max(thumbSize, i.settings.minScrollbarLength);
+ }
+ if (i.settings.maxScrollbarLength) {
+ thumbSize = Math.min(thumbSize, i.settings.maxScrollbarLength);
+ }
+ return thumbSize;
+}
+
+function updateCss(element, i) {
+ var xRailOffset = { width: i.railXWidth };
+ if (i.isRtl) {
+ xRailOffset.left =
+ i.negativeScrollAdjustment +
+ element.scrollLeft +
+ i.containerWidth -
+ i.contentWidth;
+ } else {
+ xRailOffset.left = element.scrollLeft;
+ }
+ if (i.isScrollbarXUsingBottom) {
+ xRailOffset.bottom = i.scrollbarXBottom - element.scrollTop;
+ } else {
+ xRailOffset.top = i.scrollbarXTop + element.scrollTop;
+ }
+ set(i.scrollbarXRail, xRailOffset);
+
+ var yRailOffset = { top: element.scrollTop, height: i.railYHeight };
+ if (i.isScrollbarYUsingRight) {
+ if (i.isRtl) {
+ yRailOffset.right =
+ i.contentWidth -
+ (i.negativeScrollAdjustment + element.scrollLeft) -
+ i.scrollbarYRight -
+ i.scrollbarYOuterWidth;
+ } else {
+ yRailOffset.right = i.scrollbarYRight - element.scrollLeft;
+ }
+ } else {
+ if (i.isRtl) {
+ yRailOffset.left =
+ i.negativeScrollAdjustment +
+ element.scrollLeft +
+ i.containerWidth * 2 -
+ i.contentWidth -
+ i.scrollbarYLeft -
+ i.scrollbarYOuterWidth;
+ } else {
+ yRailOffset.left = i.scrollbarYLeft + element.scrollLeft;
+ }
+ }
+ set(i.scrollbarYRail, yRailOffset);
+
+ set(i.scrollbarX, {
+ left: i.scrollbarXLeft,
+ width: i.scrollbarXWidth - i.railBorderXWidth,
+ });
+ set(i.scrollbarY, {
+ top: i.scrollbarYTop,
+ height: i.scrollbarYHeight - i.railBorderYWidth,
+ });
+}
+
+var clickRail = function(i) {
+ i.event.bind(i.scrollbarY, 'mousedown', function (e) { return e.stopPropagation(); });
+ i.event.bind(i.scrollbarYRail, 'mousedown', function (e) {
+ var positionTop =
+ e.pageY -
+ window.pageYOffset -
+ i.scrollbarYRail.getBoundingClientRect().top;
+ var direction = positionTop > i.scrollbarYTop ? 1 : -1;
+
+ i.element.scrollTop += direction * i.containerHeight;
+ updateGeometry(i);
+
+ e.stopPropagation();
+ });
+
+ i.event.bind(i.scrollbarX, 'mousedown', function (e) { return e.stopPropagation(); });
+ i.event.bind(i.scrollbarXRail, 'mousedown', function (e) {
+ var positionLeft =
+ e.pageX -
+ window.pageXOffset -
+ i.scrollbarXRail.getBoundingClientRect().left;
+ var direction = positionLeft > i.scrollbarXLeft ? 1 : -1;
+
+ i.element.scrollLeft += direction * i.containerWidth;
+ updateGeometry(i);
+
+ e.stopPropagation();
+ });
+};
+
+var dragThumb = function(i) {
+ bindMouseScrollHandler(i, [
+ 'containerWidth',
+ 'contentWidth',
+ 'pageX',
+ 'railXWidth',
+ 'scrollbarX',
+ 'scrollbarXWidth',
+ 'scrollLeft',
+ 'x' ]);
+ bindMouseScrollHandler(i, [
+ 'containerHeight',
+ 'contentHeight',
+ 'pageY',
+ 'railYHeight',
+ 'scrollbarY',
+ 'scrollbarYHeight',
+ 'scrollTop',
+ 'y' ]);
+};
+
+function bindMouseScrollHandler(
+ i,
+ ref
+) {
+ var containerHeight = ref[0];
+ var contentHeight = ref[1];
+ var pageY = ref[2];
+ var railYHeight = ref[3];
+ var scrollbarY = ref[4];
+ var scrollbarYHeight = ref[5];
+ var scrollTop = ref[6];
+ var y = ref[7];
+
+ var element = i.element;
+
+ var startingScrollTop = null;
+ var startingMousePageY = null;
+ var scrollBy = null;
+
+ function mouseMoveHandler(e) {
+ element[scrollTop] =
+ startingScrollTop + scrollBy * (e[pageY] - startingMousePageY);
+ addScrollingClass(i, y);
+ updateGeometry(i);
+
+ e.stopPropagation();
+ e.preventDefault();
+ }
+
+ function mouseUpHandler() {
+ removeScrollingClass(i, y);
+ i.event.unbind(i.ownerDocument, 'mousemove', mouseMoveHandler);
+ }
+
+ i.event.bind(i[scrollbarY], 'mousedown', function (e) {
+ startingScrollTop = element[scrollTop];
+ startingMousePageY = e[pageY];
+ scrollBy =
+ (i[contentHeight] - i[containerHeight]) /
+ (i[railYHeight] - i[scrollbarYHeight]);
+
+ i.event.bind(i.ownerDocument, 'mousemove', mouseMoveHandler);
+ i.event.once(i.ownerDocument, 'mouseup', mouseUpHandler);
+
+ e.stopPropagation();
+ e.preventDefault();
+ });
+}
+
+var keyboard = function(i) {
+ var element = i.element;
+
+ var elementHovered = function () { return matches(element, ':hover'); };
+ var scrollbarFocused = function () { return matches(i.scrollbarX, ':focus') || matches(i.scrollbarY, ':focus'); };
+
+ function shouldPreventDefault(deltaX, deltaY) {
+ var scrollTop = element.scrollTop;
+ if (deltaX === 0) {
+ if (!i.scrollbarYActive) {
+ return false;
+ }
+ if (
+ (scrollTop === 0 && deltaY > 0) ||
+ (scrollTop >= i.contentHeight - i.containerHeight && deltaY < 0)
+ ) {
+ return !i.settings.wheelPropagation;
+ }
+ }
+
+ var scrollLeft = element.scrollLeft;
+ if (deltaY === 0) {
+ if (!i.scrollbarXActive) {
+ return false;
+ }
+ if (
+ (scrollLeft === 0 && deltaX < 0) ||
+ (scrollLeft >= i.contentWidth - i.containerWidth && deltaX > 0)
+ ) {
+ return !i.settings.wheelPropagation;
+ }
+ }
+ return true;
+ }
+
+ i.event.bind(i.ownerDocument, 'keydown', function (e) {
+ if (
+ (e.isDefaultPrevented && e.isDefaultPrevented()) ||
+ e.defaultPrevented
+ ) {
+ return;
+ }
+
+ if (!elementHovered() && !scrollbarFocused()) {
+ return;
+ }
+
+ var activeElement = document.activeElement
+ ? document.activeElement
+ : i.ownerDocument.activeElement;
+ if (activeElement) {
+ if (activeElement.tagName === 'IFRAME') {
+ activeElement = activeElement.contentDocument.activeElement;
+ } else {
+ // go deeper if element is a webcomponent
+ while (activeElement.shadowRoot) {
+ activeElement = activeElement.shadowRoot.activeElement;
+ }
+ }
+ if (isEditable(activeElement)) {
+ return;
+ }
+ }
+
+ var deltaX = 0;
+ var deltaY = 0;
+
+ switch (e.which) {
+ case 37: // left
+ if (e.metaKey) {
+ deltaX = -i.contentWidth;
+ } else if (e.altKey) {
+ deltaX = -i.containerWidth;
+ } else {
+ deltaX = -30;
+ }
+ break;
+ case 38: // up
+ if (e.metaKey) {
+ deltaY = i.contentHeight;
+ } else if (e.altKey) {
+ deltaY = i.containerHeight;
+ } else {
+ deltaY = 30;
+ }
+ break;
+ case 39: // right
+ if (e.metaKey) {
+ deltaX = i.contentWidth;
+ } else if (e.altKey) {
+ deltaX = i.containerWidth;
+ } else {
+ deltaX = 30;
+ }
+ break;
+ case 40: // down
+ if (e.metaKey) {
+ deltaY = -i.contentHeight;
+ } else if (e.altKey) {
+ deltaY = -i.containerHeight;
+ } else {
+ deltaY = -30;
+ }
+ break;
+ case 32: // space bar
+ if (e.shiftKey) {
+ deltaY = i.containerHeight;
+ } else {
+ deltaY = -i.containerHeight;
+ }
+ break;
+ case 33: // page up
+ deltaY = i.containerHeight;
+ break;
+ case 34: // page down
+ deltaY = -i.containerHeight;
+ break;
+ case 36: // home
+ deltaY = i.contentHeight;
+ break;
+ case 35: // end
+ deltaY = -i.contentHeight;
+ break;
+ default:
+ return;
+ }
+
+ if (i.settings.suppressScrollX && deltaX !== 0) {
+ return;
+ }
+ if (i.settings.suppressScrollY && deltaY !== 0) {
+ return;
+ }
+
+ element.scrollTop -= deltaY;
+ element.scrollLeft += deltaX;
+ updateGeometry(i);
+
+ if (shouldPreventDefault(deltaX, deltaY)) {
+ e.preventDefault();
+ }
+ });
+};
+
+var wheel = function(i) {
+ var element = i.element;
+
+ function shouldPreventDefault(deltaX, deltaY) {
+ var scrollTop = element.scrollTop;
+ if (deltaX === 0) {
+ if (!i.scrollbarYActive) {
+ return false;
+ }
+ if (
+ (scrollTop === 0 && deltaY > 0) ||
+ (scrollTop >= i.contentHeight - i.containerHeight && deltaY < 0)
+ ) {
+ return !i.settings.wheelPropagation;
+ }
+ }
+
+ var scrollLeft = element.scrollLeft;
+ if (deltaY === 0) {
+ if (!i.scrollbarXActive) {
+ return false;
+ }
+ if (
+ (scrollLeft === 0 && deltaX < 0) ||
+ (scrollLeft >= i.contentWidth - i.containerWidth && deltaX > 0)
+ ) {
+ return !i.settings.wheelPropagation;
+ }
+ }
+ return true;
+ }
+
+ function getDeltaFromEvent(e) {
+ var deltaX = e.deltaX;
+ var deltaY = -1 * e.deltaY;
+
+ if (typeof deltaX === 'undefined' || typeof deltaY === 'undefined') {
+ // OS X Safari
+ deltaX = -1 * e.wheelDeltaX / 6;
+ deltaY = e.wheelDeltaY / 6;
+ }
+
+ if (e.deltaMode && e.deltaMode === 1) {
+ // Firefox in deltaMode 1: Line scrolling
+ deltaX *= 10;
+ deltaY *= 10;
+ }
+
+ if (deltaX !== deltaX && deltaY !== deltaY /* NaN checks */) {
+ // IE in some mouse drivers
+ deltaX = 0;
+ deltaY = e.wheelDelta;
+ }
+
+ if (e.shiftKey) {
+ // reverse axis with shift key
+ return [-deltaY, -deltaX];
+ }
+ return [deltaX, deltaY];
+ }
+
+ function shouldBeConsumedByChild(target, deltaX, deltaY) {
+ // FIXME: this is a workaround for