-
Notifications
You must be signed in to change notification settings - Fork 87
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2cd22cd
commit f4b331a
Showing
8 changed files
with
278 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
.gmf-floorselector { | ||
overflow: hidden; | ||
background-color: transparent; | ||
padding: 0; | ||
&:hover { | ||
background-color: transparent; | ||
} | ||
.btn-floor { | ||
margin: 0; | ||
height: $map-tools-size; | ||
width: $map-tools-size; | ||
background-color: $map-tools-bg-color; | ||
border: solid 0.06rem $border-color; | ||
color: $map-tools-color; | ||
&:hover { | ||
background-color: $map-tools-bg-color; | ||
} | ||
&:focus { | ||
background-color: $map-tools-bg-color; | ||
outline: none; | ||
box-shadow: none; | ||
} | ||
&.active { | ||
outline: none; | ||
background-color: $brand-secondary; | ||
} | ||
} | ||
.btn-group-floors { | ||
margin-top: 0.2rem; | ||
margin-bottom: 0.2rem; | ||
transition-property: top; | ||
transition-duration: 500ms; | ||
transition-timing-function: ease; | ||
} | ||
.btn-floor-up { | ||
position: absolute; | ||
top: 0; | ||
z-index: 1; | ||
} | ||
.btn-floor-down { | ||
position: absolute; | ||
bottom: 0; | ||
z-index: 1; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,169 @@ | ||
/* eslint max-len: ["error", { "code": 110, "ignoreComments": true }] */ | ||
|
||
import angular from 'angular'; | ||
|
||
import {findIndex as findIndexInArray} from 'ol/array.js'; | ||
|
||
|
||
/** | ||
* @type {!angular.IModule} | ||
* @hidden | ||
*/ | ||
const module = angular.module('gmfFloorselector', []); | ||
|
||
|
||
module.run(/* @ngInject */ ($templateCache) => { | ||
// @ts-ignore: webpack | ||
$templateCache.put('gmf/floor/floorselectorcomponent', require('./floorselectorcomponent.html')); | ||
}); | ||
|
||
module.value('gmfFloorselectorTemplateUrl', | ||
/** | ||
* @param {!angular.IAttributes} $attrs Attributes. | ||
* @return {string} The template url. | ||
*/ | ||
($attrs) => { | ||
const templateUrl = $attrs['gmfFloorselectorTemplateUrl']; | ||
return templateUrl !== undefined ? templateUrl : | ||
'gmf/floor/floorselectorcomponent'; | ||
}); | ||
|
||
|
||
/** | ||
* @param {!angular.IAttributes} $attrs Attributes. | ||
* @param {!function(!angular.IAttributes): string} gmfFloorselectorTemplateUrl Template function. | ||
* @return {string} Template URL. | ||
* @ngInject | ||
* @private | ||
* @hidden | ||
*/ | ||
function gmfFloorselectorTemplateUrl($attrs, gmfFloorselectorTemplateUrl) { | ||
return gmfFloorselectorTemplateUrl($attrs); | ||
} | ||
|
||
|
||
/** | ||
* @private | ||
* @hidden | ||
*/ | ||
class Controller { | ||
|
||
/** | ||
* @param {!angular.IScope} $scope Angular scope. | ||
* @param {!JQuery} $element Element. | ||
* @private | ||
* @ngInject | ||
* @ngdoc controller | ||
* @ngname GmfFilterselectorController | ||
*/ | ||
constructor($scope, $element) { | ||
|
||
/** | ||
* @type {Array.<Object.<string, string>>} | ||
*/ | ||
this.items; | ||
|
||
/** | ||
* @type {number} | ||
*/ | ||
this.size; | ||
|
||
/** | ||
* @type {string} | ||
*/ | ||
this.floor; | ||
|
||
/** | ||
* @type {number} | ||
*/ | ||
this.currentIndex; | ||
|
||
/** | ||
* @type {number} | ||
* @private | ||
*/ | ||
this.lowerBound_; | ||
|
||
/** | ||
* @type {number} | ||
* @private | ||
*/ | ||
this.upperBound_; | ||
|
||
this.scope = $scope; | ||
this.element = $element; | ||
} | ||
|
||
$postLink() { | ||
this.scope.$watch( | ||
() => { | ||
return this.floor; | ||
}, | ||
() => { | ||
this.floorChanged_(); | ||
} | ||
); | ||
|
||
this.element[0].addEventListener('wheel', (event) => { | ||
this.scope.$apply(() => { | ||
const delta = event.deltaY > 0 ? -1 : 1; | ||
this.move(delta); | ||
}); | ||
}); | ||
} | ||
|
||
/** | ||
* @private | ||
*/ | ||
floorChanged_() { | ||
const floor = this.floor; | ||
|
||
// Update currentIndex | ||
this.currentIndex = findIndexInArray(this.items, function(item) { | ||
return item.value === floor; | ||
}); | ||
console.assert(this.currentIndex > -1); | ||
|
||
const buttonGroup = this.element.find('.btn-group-floors'); | ||
|
||
const buttonUp = this.element.find('.btn-floor-up'); | ||
const maxTop = buttonUp.position().top + buttonUp.outerHeight(true); | ||
|
||
const buttonDown = this.element.find('.btn-floor-down'); | ||
const minTop = buttonDown.position().top - buttonGroup.outerHeight(true); | ||
|
||
const currentButton = this.element.find(`.btn-floor:nth(${this.currentIndex})`); | ||
let top = ( | ||
this.element.innerHeight() / 2 | ||
- currentButton.position().top | ||
- currentButton.outerHeight(true) / 2 | ||
); | ||
top = Math.min(top, maxTop); | ||
top = Math.max(top, minTop); | ||
buttonGroup.css('top', top); | ||
} | ||
|
||
/** | ||
* @param {number} delta Signed number of floors to move. | ||
*/ | ||
move(delta) { | ||
const newindex = this.currentIndex - delta; // Items are in reversed order | ||
if (newindex >= 0 && newindex < this.items.length) { | ||
this.floor = this.items[newindex].value; | ||
} | ||
} | ||
} | ||
|
||
|
||
module.component('gmfFloorselector', { | ||
bindings: { | ||
floor: '=', | ||
items: '<', | ||
size: '<' | ||
}, | ||
controller: Controller, | ||
templateUrl: gmfFloorselectorTemplateUrl | ||
}); | ||
|
||
|
||
export default module; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
<div role="group" class="btn-group-floors btn-group-vertical"> | ||
<button type="button" class="btn btn-floor" | ||
ng-repeat="item in ::$ctrl.items" | ||
ng-class="{active: item.value == $ctrl.floor}" | ||
ng-click="$ctrl.floor = item.value">{{::item.label}}</button> | ||
</div> | ||
<button type="button" class="btn btn-floor btn-floor-up increment fa fa-2x fa-angle-up" ng-click="$ctrl.move(+1)"></button> | ||
<button type="button" class="btn btn-floor btn-floor-down decrement fa fa-2x fa-angle-down" ng-click="$ctrl.move(-1)"></button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
/** | ||
*/ | ||
import angular from 'angular'; | ||
import gmfFloorFloorSelectorComponent from 'gmf/floor/floorselectorComponent.js'; | ||
|
||
import './floor.scss'; | ||
|
||
|
||
/** | ||
* @type {!angular.IModule} | ||
*/ | ||
export default angular.module('gmfFloorModule', [ | ||
gmfFloorFloorSelectorComponent.name, | ||
]); |