diff --git a/dmp-frontend/src/app/form/dynamic-form.component.css b/dmp-frontend/src/app/form/dynamic-form.component.css index f5621e21c..81e4095c2 100644 --- a/dmp-frontend/src/app/form/dynamic-form.component.css +++ b/dmp-frontend/src/app/form/dynamic-form.component.css @@ -4,36 +4,28 @@ margin-top:15px; } - - -.styled-scrollbar::-webkit-scrollbar-track { - box-shadow: inset 0 0 6px rgba(0,0,0,0.3); - -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); - background-color: #F5F5F5; - border-radius: 10px; -} - -.styled-scrollbar::-webkit-scrollbar-thumb { - border-radius: 10px; - background-image: -webkit-gradient(linear, - left bottom, - left top, - color-stop(0.44, rgb(122,153,217)), - color-stop(0.72, rgb(73,125,189)), - color-stop(0.86, rgb(28,58,148))); -} - .parent-div { height: calc(100vh - 80px); width:100%; } + + .child-div-left{ - overflow-y: scroll; height: 100%; } .child-div-right { overflow-y: scroll; height: 100%; +} + + +.form-body-container{ + height: calc(100vh - 80px - 130px); + overflow-y:scroll; +} + +.form-footer-container { + height: 130px; } \ No newline at end of file diff --git a/dmp-frontend/src/app/form/dynamic-form.component.html b/dmp-frontend/src/app/form/dynamic-form.component.html index f8ae86d96..16fd3af0b 100644 --- a/dmp-frontend/src/app/form/dynamic-form.component.html +++ b/dmp-frontend/src/app/form/dynamic-form.component.html @@ -1,83 +1,94 @@
-
+
+ + -
+
-
-
-

{{section.title}}

-
-
- -
-
- + + +
+
+

{{section.title}}

+
+
+ +
+
+ +
+ +

{{section.title}}

+ +
+ +
+
+ +
- -

{{section.title}}

- -
- -
-
- + + + + +
+ Saved the following values
{{payLoad}}
-
- -
+ +
+ +
+ +
+ +
-
- Saved the following values
{{payLoad}} +
+ +
- -

Form value: {{ form.value | json }}

- - - -
- -
-
-
-
- {{dirtyValues}}% -
-
-
+ + + + + +
-
+
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts index 56f581086..2ac390bb8 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 ] @@ -185,6 +191,10 @@ export class DynamicFormComponent implements OnInit { (err) => { }); + + var formScroller = new PerfectScrollbar("#form-container"); + var tocScroller = new PerfectScrollbar("#toc-container"); + } scrollToElemID(elemID) { @@ -194,7 +204,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; @@ -206,6 +216,7 @@ export class DynamicFormComponent implements OnInit { } ngAfterViewChecked(): void { //navigate to certain section of the page + try { document.querySelector('#' + this.fragment).scrollIntoView(); } catch (e) { } @@ -219,18 +230,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/app/form/fields/autocomplete-remote/autocomplete-remote.component.css b/dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.css index e69de29bb..5c5c93cc9 100644 --- a/dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.css +++ b/dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.css @@ -0,0 +1,3 @@ +.autocomplete{ + overflow: visible !important; +} \ No newline at end of file diff --git a/dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.html b/dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.html index b31d2ade3..8a4246bf0 100644 --- a/dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.html +++ b/dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.html @@ -1,4 +1,4 @@ - + diff --git a/dmp-frontend/src/app/services/global-variables.service.ts b/dmp-frontend/src/app/services/global-variables.service.ts index f607948da..80fba05f4 100644 --- a/dmp-frontend/src/app/services/global-variables.service.ts +++ b/dmp-frontend/src/app/services/global-variables.service.ts @@ -12,6 +12,15 @@ export class GlobalVariables { } + + + getFormHasPaging() : boolean{ + return this.storage.retrieve('form-paging-flag'); + } + + setFormHasPaging(formHasPaging : boolean){ + this.storage.store('form-paging-flag',formHasPaging); + } 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