Merge pull request #322 from Wikia/IW-1296

IW-1296 | reversible dropdown with canFlip property

Author: latata

app/components/dropdown.js

@@ -1,6 +1,9 @@
 import Component from '@ember/component';
+import { computed } from '@ember/object';
 import { or } from '@ember/object/computed';
 
+import getViewportSize from '../utils/viewport-size';
+
 const isTouchDevice = ('ontouchstart' in window);
 
 export default Component.extend({
@@ -11,37 +14,59 @@ export default Component.extend({
 		'hasDarkShadow:wds-has-dark-shadow',
 		'isLevel2:wds-dropdown-level-2:wds-dropdown',
 		'isTouchDevice:wds-is-touch-device',
+		'isFlipped:wds-is-flipped',
 	],
 
 	isClicked: false,
 	isLevel2: false,
+	isFlipped: false,
+	canFlip: false,
 	isTouchDevice: isTouchDevice,
 
 	isActive: or('dropdownExpanded', 'isClicked'),
 
+	contentElement: computed('element', function () {
+		return this.element && this.element.querySelector('.wds-dropdown__content');
+	}),
+
 	init() {
 		this._super(...arguments);
 
-		if (this.mouseEnter) {
-			this.mouseEnter = this.mouseEnter.bind(this);
-		}
-		this.mouseLeave = this.mouseLeave.bind(this);
+		this._mouseEnter = this._mouseEnter.bind(this);
+		this._mouseLeave = this._mouseLeave.bind(this);
 	},
 
 	didInsertElement() {
 		this._super(...arguments);
 
-		if (this.mouseEnter) {
-			this.element.addEventListener('mouseenter', this.mouseEnter);
-		}
-
-		this.element.addEventListener('mouseleave', this.mouseLeave);
+		this.element.addEventListener('mouseenter', this._mouseEnter);
+		this.element.addEventListener('mouseleave', this._mouseLeave);
 	},
 
-	mouseLeave() {
+	_mouseLeave() {
 		if (this.isTouchDevice) {
 			this.set('isClicked', false);
 		}
+
+		if (this.canFlip && !this.isLevel2) {
+			this.set('isFlipped', false);
+		}
+
+		if (this.mouseLeave) {
+			this.mouseLeave(...arguments);
+		}
+	},
+
+	_mouseEnter() {
+		if (this.canFlip && !this.isLevel2 && this.contentElement) {
+			const contentElementBoundingRect = this.contentElement.getBoundingClientRect();
+
+			this.set('isFlipped', contentElementBoundingRect.bottom > getViewportSize().height);
+		}
+
+		if (this.mouseEnter) {
+			this.mouseEnter(...arguments);
+		}
 	},
 
 	actions: {

app/utils/viewport-size.js

@@ -0,0 +1,6 @@
+export default function getViewportSize() {
+	return {
+		width: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
+		height: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
+	};
+}

dist/css/styles.css

@@ -144,6 +144,28 @@
 			border: 0;
 		}
 	}
+
+	&.wds-is-flipped {
+		&::before, &::after {
+			bottom: unset;
+			top: -$wds-dropdown-border-width;
+		}
+
+		&::before {
+			border-bottom-color: transparent;
+			border-top-color: $wds-color-faint-gray;
+		}
+
+		&::after {
+			border-bottom-color: transparent;
+			border-top-color: $wds-color-white;
+		}
+
+		.wds-dropdown__content {
+			bottom: 100%;
+			top: unset;
+		}
+	}
 }
 
 .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 {

dist/scss/wds-components/_dropdowns.scss

@@ -41,11 +41,25 @@
 		}
 	}
 
-	.wds-dropdown::after {
-		border-bottom-color: $dropdown-background-color;
-	}
+	.wds-dropdown {
+		&::after {
+			border-bottom-color: $dropdown-background-color;
+		}
+
+		&::before {
+			border-bottom-color: $color-page-border;
+		}
 
-	.wds-dropdown::before {
-		border-bottom-color: $color-page-border;
+		&.wds-is-flipped {
+			&::after {
+				border-bottom-color: transparent;
+				border-top-color: $dropdown-background-color;
+			}
+
+			&::before {
+				border-bottom-color: transparent;
+				border-top-color: $color-page-border;
+			}
+		}
 	}
 }

dist/scss/wds-mixins/_dropdown-theming.scss

@@ -144,6 +144,28 @@
 			border: 0;
 		}
 	}
+
+	&.wds-is-flipped {
+		&::before, &::after {
+			bottom: unset;
+			top: -$wds-dropdown-border-width;
+		}
+
+		&::before {
+			border-bottom-color: transparent;
+			border-top-color: $wds-color-faint-gray;
+		}
+
+		&::after {
+			border-bottom-color: transparent;
+			border-top-color: $wds-color-white;
+		}
+
+		.wds-dropdown__content {
+			bottom: 100%;
+			top: unset;
+		}
+	}
 }
 
 .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 {