d2l-scroll-wrapper.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../d2l-icons/tier1-icons.html">
<link rel="import" href="../d2l-icons/d2l-icon-button.html">
<link rel="import" href="../d2l-colors/d2l-colors.html">
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="d2l-sticky-element.html">

<!--
# D2L Scroll Wrapper

<link rel="import" href="d2l-scroll-wrapper.html">
<div>
	<d2l-scroll-wrapper
		id="scroll-wrapper"
		style="width: 300px"
		scroll-duration="500"
		scroll-amount="0.8"
		start-icon="d2l-tier1:chevron-left"
		end-icon="d2l-tier1:chevron-right"
	 >
		 <div style="width: 350px; height: 100px">
			Stuff
		 </div>
	</d2l-scroll-wrapper>
</div>

## Usage
```
	<link rel="import" href="d2l-scroll-wrapper.html">
	<style>
		#scroll-wrapper {
			--d2l-scroll-wrapper-h-scroll: {
				/* styles to apply when horizontal scrollbar appears */
			};

			/* Note that the left/right styles are applied at the same time if there is no scrollbar */
			--d2l-scroll-wrapper-left: {
				/* styles to apply when scrolled to the left */
			};
			--d2l-scroll-wrapper-right: {
				/* styles to apply when scrolled to the right */
			};

			--d2l-scroll-wrapper-action: {
				/* styles for the left/right action buttons */
			};

			--d2l-scroll-wrapper-action-hidden: {
				/* css to hide an action button */
			};

			--d2l-scroll-wrapper-action-visible: {
				/* css to show an action button */
			};

			--d2l-scroll-wrapper-action-start: {
				/* styles for the action button on the left (scrolls toward start) */
			};

			--d2l-scroll-wrapper-action-end: {
				/* styles for the action button on the right (scrolls toward end) */
			};
		}
	</style>
	The attributes are optional
	<d2l-scroll-wrapper
		id="scroll-wrapper"
		style="width: 300px"
		scroll-duration="500"
		scroll-amount="0.8"
		start-icon="d2l-tier1:chevron-left"
		end-icon="d2l-tier1:chevron-right"
	>
		<div style="width: 350px">Stuff</div>
	</d2l-scroll-wrapper>
```
@demo ./demo/d2l-scroll-wrapper.html Scroll Wrapper Demo
-->
<dom-module id="d2l-scroll-wrapper">
	<template strip-whitespace>
		<style>
			:host {
				display: block;
				width: 100%;

				--d2l-scroll-wrapper-action-offset: -15px;

				--d2l-scroll-wrapper-action: {
					position: absolute;
					top: 10px;
					border-radius: 50%;
					border: 1px solid var(--d2l-scroll-wrapper-border-color);
					background-color: var(--d2l-scroll-wrapper-background-color);
					height: 18px;
					width: 18px;
					padding: 10px;
					box-sizing: content-box;
				};

				--d2l-scroll-wrapper-sticky: {
					/* height of button (40) + distance of button from top (10) + desired spacing (10) */
					margin-bottom: 60px;
				};

				--d2l-scroll-wrapper-action-hidden: {
					display: none;
				};

				--d2l-scroll-wrapper-action-visible: {
					display: inline;
				};

				--d2l-scroll-wrapper-action-start: {
					right: auto;
					left: var(--d2l-scroll-wrapper-action-offset);
				};

				--d2l-scroll-wrapper-action-end: {
					right: var(--d2l-scroll-wrapper-action-offset);
					left: auto;
				};
			}

			#wrapper {
				overflow-x: auto;
				width: 100%;
				box-sizing: border-box;
			}

			:host([h-scrollbar]) #wrapper,
			:host-context([dir="rtl"])[scroll-rtl-reverse][h-scrollbar] #wrapper,
			:host-context([dir="rtl"])[scroll-rtl-negative][h-scrollbar] #wrapper {
				@apply(--d2l-scroll-wrapper-h-scroll);
			}

			/* So, shady DOM doesn't like this syntax, but ShadowDOM needs it */
			:host-context([dir="rtl"]):host([scroll-rtl-reverse][h-scrollbar]) #wrapper,
			:host-context([dir="rtl"]):host([scroll-rtl-negative][h-scrollbar]) #wrapper {
				@apply(--d2l-scroll-wrapper-h-scroll);
			}

			:host-context([dir="rtl"])[scroll-rtl-reverse][scrollbar-right] #wrapper,
			:host-context([dir="rtl"])[scroll-rtl-negative][scrollbar-right] #wrapper,
			:host([scrollbar-left]) #wrapper {
				@apply(--d2l-scroll-wrapper-left);
			}

			:host-context([dir="rtl"]):host([scroll-rtl-reverse][scrollbar-right]) #wrapper,
			:host-context([dir="rtl"]):host([scroll-rtl-negative][scrollbar-right]) #wrapper {
				@apply(--d2l-scroll-wrapper-left);
			}

			:host-context([dir="rtl"])[scroll-rtl-reverse][scrollbar-left] #wrapper,
			:host-context([dir="rtl"])[scroll-rtl-negative][scrollbar-left] #wrapper,
			:host([scrollbar-right]) #wrapper {
				@apply(--d2l-scroll-wrapper-right);
			}

			:host-context([dir="rtl"]):host([scroll-rtl-reverse][scrollbar-left]) #wrapper,
			:host-context([dir="rtl"]):host([scroll-rtl-negative][scrollbar-left]) #wrapper {
				@apply(--d2l-scroll-wrapper-right);
			}

			.action {
				@apply(--d2l-scroll-wrapper-action);
			}
			.sticky {
				@apply(--d2l-scroll-wrapper-action-hidden);
				@apply(--d2l-scroll-wrapper-sticky);
			}

			:host-context([dir="rtl"]) .left .action,
			.right .action {
				@apply(--d2l-scroll-wrapper-action-end);
			}

			:host-context([dir="rtl"]) .right .action,
			.left .action {
				@apply(--d2l-scroll-wrapper-action-start);
			}

			:host-context([dir="rtl"]) .left,
			.right {
				float: right;
			}

			:host-context([dir="rtl"]) .right,
			.left {
				float: left;
			}

			:host-context([dir="rtl"])[h-scrollbar] .sticky,
			:host([h-scrollbar]) .sticky {
				@apply(--d2l-scroll-wrapper-action-visible);
			}

			:host-context([dir="rtl"]):host([h-scrollbar]) .sticky {
				@apply(--d2l-scroll-wrapper-action-visible);
			}

			/* Hide the start/end buttons depending on the state */
			:host-context([dir="rtl"])[scroll-rtl-default][scrollbar-right] .left,
			:host-context([dir="rtl"])[scroll-rtl-default][scrollbar-left] .right,
			:host-context([dir="rtl"])[scroll-rtl-reverse][scrollbar-right] .right,
			:host-context([dir="rtl"])[scroll-rtl-negative][scrollbar-right] .right,
			:host-context([dir="rtl"])[scroll-rtl-reverse][scrollbar-left] .left,
			:host-context([dir="rtl"])[scroll-rtl-negative][scrollbar-left] .left,
			:host-context([dir="rtl"]) .sticky,
			:host([scrollbar-right]) .right,
			:host([scrollbar-left]) .left {
				@apply(--d2l-scroll-wrapper-action-hidden);
			}

			:host-context([dir="rtl"]):host([scroll-rtl-default][scrollbar-right]) .left,
			:host-context([dir="rtl"]):host([scroll-rtl-default][scrollbar-left]) .right,
			:host-context([dir="rtl"]):host([scroll-rtl-reverse][scrollbar-right]) .right,
			:host-context([dir="rtl"]):host([scroll-rtl-negative][scrollbar-right]) .right,
			:host-context([dir="rtl"]):host([scroll-rtl-reverse][scrollbar-left]) .left,
			:host-context([dir="rtl"]):host([scroll-rtl-negative][scrollbar-left]) .left {
				@apply(--d2l-scroll-wrapper-action-hidden);
			}
		</style>
		<d2l-sticky-element class="left sticky" disabled="[[scrollbarLeft]]">
			<button
				is="d2l-icon-button"
				class="action"
				icon="[[startIcon]]"
				on-tap="handleTapLeft"
				tabindex="-1"
				aria-hidden="true"
			></button>
		</d2l-sticky-element>
		<d2l-sticky-element class="right sticky" disabled="[[scrollbarRight]]">
			<button
				is="d2l-icon-button"
				class="action"
				icon="[[endIcon]]"
				on-tap="handleTapRight"
				tabindex="-1"
				aria-hidden="true"
			></button>
		</d2l-sticky-element>
		<div id="wrapper" class="wrapper">
			<content></content>
		</div>
	</template>
	<script>
		(function() {
			var getScrollType = (function() {
				var type;

				return function getScrollType() {
					if (type) {
						return type;
					}
					type = 'reverse';
					var div = document.createElement('div');
					div.innerHTML = '<div dir="rtl" style="font-size: 14px; width: 1px; height: 1px; position: absolute; top: -1000px; overflow: scroll">A</div>';
					var definer = div.firstChild;
					document.body.appendChild(div);
					if (definer.scrollLeft > 0) {
						type = 'default';
					} else {
						definer.scrollLeft = 1;
						if (definer.scrollLeft === 0) {
							type = 'negative';
						}
					}
					document.body.removeChild(div);
					return type;
				};
			})();
			Polymer({
				is: 'd2l-scroll-wrapper',
				behaviors: [Polymer.IronResizableBehavior],

				properties: {
					/** Whether this element has a horizontal scrollbar */
					hScrollbar: {
						type: Boolean,
						reflectToAttribute: true,
						notify: true,
						value: false,
						readOnly: true
					},
					/** Whether this element is scrolled to the left */
					scrollbarLeft: {
						type: Boolean,
						reflectToAttribute: true,
						notify: true,
						value: false,
						readOnly: true
					},
					/** Whether this element is scrolled to the right */
					scrollbarRight: {
						type: Boolean,
						reflectToAttribute: true,
						notify: true,
						value: false,
						readOnly: true
					},
					/** The browser doesn't change scroll behavior on RTL. Use for styling buttons and applying mixins on RTL. See scrollRtlReverse and scrollRtlNegative */
					scrollRtlDefault: {
						type: Boolean,
						reflectToAttribute: true,
						notify: true,
						value: false,
						readOnly: true
					},
					/** The browser reverses the scrollLeft value on RTL */
					scrollRtlReverse: {
						type: Boolean,
						reflectToAttribute: true,
						notify: true,
						value: false,
						readOnly: true
					},
					/** The browser negates the scrollLeft value on RTL */
					scrollRtlNegative: {
						type: Boolean,
						reflectToAttribute: true,
						notify: true,
						value: false,
						readOnly: true
					},
					/** The duration for smooth scroll. 0 disables smooth scroll */
					scrollDuration: {
						type: Number,
						value: 500
					},
					/** The percentage of clientWidth to scroll by on clicking the action buttons */
					scrollAmount: {
						type: Number,
						value: 0.8
					},
					/** The icon to use for the start action button (left) */
					startIcon: {
						type: String,
						value: 'd2l-tier1:chevron-left'
					},
					/** The icon to use for the end action button (right) */
					endIcon: {
						type: String,
						value: 'd2l-tier1:chevron-right'
					},

					isRTL: {
						type: Boolean,
						value: false,
						readOnly: true
					}
				},

				listeners: {
					'iron-resize': 'checkScrollbar',
					'wrapper.scroll': 'checkScrollThresholds'
				},

				calculateRTL: function() {
					if (this.$$('[dir="rtl"] *')) {
						return true;
					}
					try {
						return !!this.$$(':host-context([dir="rtl"]) *');
					} catch (e) {
						return false;
					}
				},

				/* Scrolls to the left. Right when dir=rtl */
				handleTapLeft: function() {
					var scrollDistance = this.$.wrapper.clientWidth * this.scrollAmount;
					this.scrollDistance(-scrollDistance, true);
				},

				/* Scrolls to the right. Left when dir=rtl */
				handleTapRight: function() {
					var scrollDistance = this.$.wrapper.clientWidth * this.scrollAmount;
					this.scrollDistance(scrollDistance, true);
				},

				/* Scrolls the set distance. positive === right, negative === left. Reversed when dir=rtl */
				scrollDistance: function(distance, smooth) {
					if (this.isRTL) {
						if (this.scrollRtlReverse) {
							this.scroll(this.$.wrapper.scrollLeft + distance, smooth);
						} else {
							this.scroll(this.$.wrapper.scrollLeft - distance, smooth);
						}
					} else {
						this.scroll(this.$.wrapper.scrollLeft + distance, smooth);
					}
				},

				/* Sets scrollLeft to the argument. Optionally scroll smoothly. Behavior depends when dir=rtl */
				scroll: function(left, smooth) {
					if (smooth && this.scrollDuration > 0) {
						var easingFn = function easeOutQuad(t, b, c, d) {
							t /= d;
							return -c * t * (t - 2) + b;
						};
						var animationId = Math.random();
						var duration = this.scrollDuration;
						var startTime = Date.now();
						var currentScrollLeft = this.$.wrapper.scrollLeft;
						var deltaScrollLeft = left - currentScrollLeft;
						this._currentAnimationId = animationId;
						(function updateFrame() {
							var now = Date.now();
							var elapsedTime = now - startTime;
							if (elapsedTime > duration) {
								this.$.wrapper.scrollLeft = left;
							} else if (this._currentAnimationId === animationId) {
								this.$.wrapper.scrollLeft = easingFn(elapsedTime, currentScrollLeft, deltaScrollLeft, duration);
								requestAnimationFrame(updateFrame.bind(this));
							}
						}).call(this);
					} else {
						this.$.wrapper.scrollLeft = left;
					}
				},

				ready: function() {
					this.async(function() {
						this._setScrollRtlDefault(getScrollType() === 'default');
						this._setScrollRtlReverse(getScrollType() === 'reverse');
						this._setScrollRtlNegative(getScrollType() === 'negative');
					}, 1);
				},

				attached: function() {
					// HACK. Edge doesn't update the offsetWidth/scrollWidth correctly
					// until after checkScrollThresholds has run. So run this twice
					this.async(this.checkScrollbar, 1);
					this.async(this.checkScrollbar, 1);
					this._setIsRTL(this.calculateRTL());
				},

				checkScrollbar: function() {
					var hScrollbar = this.$.wrapper.offsetWidth !== this.$.wrapper.scrollWidth;
					this._setHScrollbar(hScrollbar);
					this.$.wrapper.tabIndex = hScrollbar ? 0 : -1;
					this.checkScrollThresholds();
				},

				checkScrollThresholds: function() {
					var lowerScrollValue = this.$.wrapper.scrollWidth - this.$.wrapper.offsetWidth - Math.abs(this.$.wrapper.scrollLeft);
					this._setScrollbarLeft(this.$.wrapper.scrollLeft === 0);
					this._setScrollbarRight(lowerScrollValue <= 0);
				}
			});
		})();
	</script>
</dom-module>