-
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
e7efb7a
commit 206b7eb
Showing
6 changed files
with
269 additions
and
0 deletions.
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
gmf-floorselector { | ||
right: 0.62rem; | ||
top: 0.62rem; | ||
|
||
&.ol-control { | ||
background-color: transparent; | ||
padding: 0; | ||
button { | ||
margin: 0; | ||
margin-bottom: $micro-app-margin; | ||
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: $onhover-color; | ||
} | ||
&:focus { | ||
background-color: $map-tools-bg-color; | ||
outline: none; | ||
} | ||
&:active { | ||
outline: none; | ||
} | ||
} | ||
.btn-floor { | ||
&.active { | ||
background-color: $brand-secondary; | ||
} | ||
} | ||
} | ||
&:hover { | ||
background-color: transparent; | ||
} | ||
|
||
.btn-group-floors { | ||
margin-top: 0.2rem; | ||
margin-bottom: 0.2rem; | ||
} | ||
} |
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,177 @@ | ||
/* 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. | ||
* @private | ||
* @ngInject | ||
* @ngdoc controller | ||
* @ngname GmfFilterselectorController | ||
*/ | ||
constructor($scope) { | ||
|
||
/** | ||
* @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_; | ||
|
||
$scope.$watch( | ||
function() { | ||
return this.floor; | ||
}.bind(this), | ||
function() { | ||
this.floorChanged_(); | ||
}.bind(this) | ||
); | ||
} | ||
|
||
/** | ||
* @private | ||
*/ | ||
floorChanged_() { | ||
var floor = this.floor; | ||
|
||
// Update currentIndex | ||
this.currentIndex = findIndexInArray(this.items, function(item) { | ||
return item.value === floor; | ||
}); | ||
console.assert(this.currentIndex > -1); | ||
|
||
// Update visible bounds | ||
var uBound = this.currentIndex, | ||
lBound = this.currentIndex; | ||
for (var i=1; i<this.size; i++) { | ||
if (i % 2 == 0) { | ||
uBound > 0 ? uBound -= 1 : lBound += 1; | ||
} | ||
else { | ||
lBound < (this.items.length - 1) ? lBound += 1 : uBound -= 1; | ||
} | ||
} | ||
this.upperBound_ = uBound; | ||
this.lowerBound_ = lBound; | ||
} | ||
|
||
/** | ||
* @param {number} index Item index. | ||
* @export | ||
*/ | ||
isItemVisible(index) { | ||
if (this.lowerBound_ === undefined || this.upperBound_ === undefined) { | ||
return true; | ||
} | ||
// Items are in reversed order | ||
return this.upperBound_ <= index && index <= this.lowerBound_; | ||
} | ||
|
||
/** | ||
* @param {number} delta Signed number of floors to move. | ||
*/ | ||
move(delta) { | ||
var newindex = this.currentIndex - delta; // Items are in reversed order | ||
if (newindex >= 0 && newindex < this.items.length) { | ||
this.floor = this.items[newindex].value; | ||
} | ||
} | ||
} | ||
|
||
|
||
/** | ||
* @typedef {Object} RuleCacheItem | ||
* @property {Array.<import('ngeo/rule/Rule.js').default>} customRules | ||
* @property {Array.<import('ngeo/rule/Rule.js').default>} directedRules | ||
*/ | ||
module.component('gmfFloorselector', { | ||
bindings: { | ||
floor: '=', | ||
items: '<', | ||
size: '<' | ||
}, | ||
controller: Controller, | ||
templateUrl: gmfFloorselectorTemplateUrl, | ||
link: function(scope, element, attrs, ctrl) { | ||
element[0].addEventListener('wheel', function(event) { | ||
scope.$apply(function() { | ||
var delta = event.deltaY > 0 ? -1 : 1; | ||
ctrl.move(delta); | ||
}); | ||
}); | ||
} | ||
}); | ||
|
||
|
||
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,9 @@ | ||
<button type="button" class="btn btn-floor increment fa fa-2x fa-angle-up" ng-click="$ctrl.move(+1)"></button> | ||
<div role="group" class="btn-group-floors"> | ||
<button type="button" class="btn btn-floor" | ||
ng-repeat="item in ::$ctrl.items" | ||
ng-class="{active: item.value == $ctrl.floor}" | ||
ng-show="$ctrl.isItemVisible($index)" | ||
ng-click="$ctrl.floor = item.value">{{::item.label}}</button> | ||
</div> | ||
<button type="button" class="btn btn-floor 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, | ||
]); |