-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add LocationBias component TEST=auto,manual Tested it locally with backend change.
- Loading branch information
Showing
11 changed files
with
286 additions
and
2 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,52 @@ | ||
| /** @module LocationBias */ | ||
|
|
||
| /** | ||
| * LocationBias is the core state model | ||
| * to power the LocationBias component | ||
| */ | ||
| export default class LocationBias { | ||
| constructor (data) { | ||
| /** | ||
| * The location bias accuracy which are IP, DEVICE and UNKNWON | ||
| * @type {string} | ||
| */ | ||
| this.accuracy = data.accuracy || null; | ||
|
|
||
| /** | ||
| * The latitude used for location bias | ||
| * @type {number} | ||
| */ | ||
| this.latitude = data.latitude || null; | ||
|
|
||
| /** | ||
| * The longitude used for location bias | ||
| * @type {number} | ||
| */ | ||
| this.longitude = data.longitude || null; | ||
|
|
||
| /** | ||
| * The location display name | ||
| * @type {string} | ||
| */ | ||
| this.locationDisplayName = data.locationDisplayName || null; | ||
| } | ||
|
|
||
| /** | ||
| * Create a location bias model from the provided data | ||
| * @param {Object} response The location bias response | ||
| */ | ||
| static from (response) { | ||
| if (!response) { | ||
| return new LocationBias({ | ||
| accuracy: 'UNKNOWN' | ||
| }); | ||
| } | ||
|
|
||
| return new LocationBias({ | ||
| accuracy: response.accuracy, | ||
| latitude: response.latitude, | ||
| longitude: response.longitude, | ||
| locationDisplayName: response.locationDisplayName | ||
| }); | ||
| } | ||
| } |
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,129 @@ | ||
| import Component from '../component'; | ||
| import Filter from '../../../core/models/filter'; | ||
| import StorageKeys from '../../../core/storage/storagekeys'; | ||
| import DOM from '../../dom/dom'; | ||
|
|
||
| /** | ||
| * LocationBiasComponent will show the user where is used for location bias and allow user to | ||
| * improve accuracy with HTML5 geolocation. | ||
| * | ||
| * @extends Component | ||
| */ | ||
| export default class LocationBiasComponent extends Component { | ||
| constructor (config = {}, systemConfig = {}) { | ||
| super(config, systemConfig); | ||
|
|
||
| /** | ||
| * Recieve updates from storage based on this index | ||
| * @type {StorageKey} | ||
| */ | ||
| this.moduleId = StorageKeys.LOCATION_BIAS; | ||
|
|
||
| /** | ||
| * The optional vertical key for vertical search configuration | ||
| * If not provided, when location updated, | ||
| * a universal search will be triggered. | ||
| * @type {string} | ||
| */ | ||
| this._verticalKey = config.verticalKey || null; | ||
|
|
||
| /** | ||
| * The element used for updating location | ||
| * Optionally provided. | ||
| * @type {string} CSS selector | ||
| */ | ||
| this._updateLocationEl = config.updateLocationEl || '.js-locationBias-update-location'; | ||
|
|
||
| this._locationDisplayName = ''; | ||
|
|
||
| this._accuracy = ''; | ||
|
|
||
| this._allowUpdate = true; | ||
| } | ||
|
|
||
| static get type () { | ||
| return 'LocationBias'; | ||
| } | ||
|
|
||
| static defaultTemplateName () { | ||
| return 'search/locationbias'; | ||
| } | ||
|
|
||
| onMount () { | ||
| if (!this._allowUpdate) { | ||
| return; | ||
| } | ||
| DOM.on(this._updateLocationEl, 'click', (e) => { | ||
| if ('geolocation' in navigator) { | ||
| navigator.geolocation.getCurrentPosition((position) => { | ||
| this.core.globalStorage.set(StorageKeys.GEOLOCATION, { | ||
| lat: position.coords.latitude, | ||
| lng: position.coords.longitude, | ||
| radius: position.coords.accuracy | ||
| }); | ||
| this._doSearch(); | ||
| }, (err) => { | ||
| if (err.code === 1) { | ||
| this.core.globalStorage.delete(StorageKeys.GEOLOCATION); | ||
| this._allowUpdate = false; | ||
| this.setState({ | ||
| locationDisplayName: this._locationDisplayName, | ||
| accuracy: this._accuracy | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
| // TODO: Should we throw error or warning here if no geolocation? | ||
| }); | ||
| } | ||
|
|
||
| setState (data, val) { | ||
| this._locationDisplayName = data.locationDisplayName; | ||
| this._accuracy = data.accuracy; | ||
| return super.setState(Object.assign({}, data, { | ||
| locationDisplayName: this._getLocationDisplayName(data), | ||
| accuracyText: this._getAccuracyHelpText(data.accuracy), | ||
| isPreciseLocation: data.accuracy === 'DEVICE' && this._allowUpdate, | ||
| isUnknownLocation: data.accuracy === 'UNKNOWN', | ||
| shouldShow: data.accuracy !== undefined, | ||
| allowUpdate: this._allowUpdate | ||
| }, val)); | ||
| } | ||
|
|
||
| _getLocationDisplayName (data) { | ||
| if (data.accuracy === 'UNKNOWN') { | ||
| return 'Unknown Location'; | ||
| } | ||
| return data.locationDisplayName; | ||
| } | ||
|
|
||
| _getAccuracyHelpText (accuracy) { | ||
| switch (accuracy) { | ||
| case 'IP': | ||
| return 'based on your internet address'; | ||
| case 'DEVICE': | ||
| return 'based on your device'; | ||
| default: | ||
| return ''; | ||
| } | ||
| } | ||
|
|
||
| _doSearch () { | ||
| let query = this.core.globalStorage.getState(StorageKeys.QUERY); | ||
| if (this._verticalKey) { | ||
| const allFilters = this.core.globalStorage.getAll(StorageKeys.FILTER); | ||
| const totalFilter = allFilters.length > 1 | ||
| ? Filter.and(...allFilters) | ||
| : allFilters[0]; | ||
| const facetFilter = this.core.globalStorage.getAll(StorageKeys.FACET_FILTER)[0]; | ||
| this.core.verticalSearch(this._verticalKey, { | ||
| input: query, | ||
| filter: JSON.stringify(totalFilter), | ||
| offset: this.core.globalStorage.getState(StorageKeys.SEARCH_OFFSET) || 0, | ||
| facetFilter: JSON.stringify(facetFilter) | ||
| }); | ||
| } else { | ||
| this.core.search(query); | ||
| } | ||
| } | ||
| } |
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,65 @@ | ||
| /** @define LocationBias */ | ||
|
|
||
| .yxt-LocationBias | ||
| { | ||
| $locationBias-text-font-size: $font-size-md !default; | ||
| $locationBias-text-font-weight: $font-weight-normal !default; | ||
| $locationBias-text-color: $color-text-secondary !default; | ||
| $locationBias-bullet-size: $font-size-sm / 2 !default; | ||
| $locationBias-bullet-color-default: $locationBias-text-color !default; | ||
|
|
||
| padding-bottom: $base-spacing; | ||
| display: block; | ||
| text-align: center; | ||
|
|
||
| padding-top: $base-spacing; | ||
| padding-bottom: $base-spacing; | ||
|
|
||
| @include Text( | ||
| $size: $locationBias-text-font-size, | ||
| $weight: $locationBias-text-font-weight, | ||
| $color: $locationBias-text-color | ||
| ); | ||
|
|
||
| strong | ||
| { | ||
| font-weight: $font-weight-semibold; | ||
| } | ||
|
|
||
| &-bullet | ||
| { | ||
| height: $locationBias-bullet-size; | ||
| width: $locationBias-bullet-size; | ||
| display: inline-block; | ||
| border-radius: 100%; | ||
| background: $locationBias-bullet-color-default; | ||
| } | ||
|
|
||
| &-unknownLoc | ||
| { | ||
| background-color: transparent; | ||
| border: 1px solid $locationBias-bullet-color-default; | ||
| } | ||
|
|
||
| &-preciseLoc | ||
| { | ||
| background: $color-brand-primary; | ||
| border: 1px solid $color-brand-primary; | ||
| } | ||
|
|
||
| &-locSource | ||
| { | ||
| @media (max-width: $breakpoint-mobile-max) | ||
| { | ||
| display: block; | ||
| } | ||
| } | ||
|
|
||
| &-updateLoc | ||
| { | ||
| @include Link-1; | ||
| cursor: pointer; | ||
| color: $color-brand-primary; | ||
| text-decoration: none; | ||
| } | ||
| } |
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 class="yxt-LocationBias" {{#unless shouldShow}}style="display:none"{{/unless}}> | ||
| <div class="yxt-LocationBias-container"> | ||
| <span class="yxt-locationBias-bullet {{#if isPreciseLocation}}yxt-locationBias-preciseLoc{{/if}} | ||
| {{#if isUnknownLocation}} yxt-LocationBias-unknownLoc {{/if}}"></span> | ||
| <strong>{{locationDisplayName}}</strong> | ||
| <span class="yxt-locationBias-locSource">{{#if accuracyText}}({{accuracyText}}){{/if}} {{#if allowUpdate}}| <a class="js-locationBias-update-location yxt-locationBias-updateLoc">Update your location</a>{{/if}}</span> | ||
| </div> | ||
| </div> |