mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
8 years ago
24 changed files with 527 additions and 291 deletions
@ -1,19 +0,0 @@ |
|||
<div> |
|||
<div class="editor" #editor></div> |
|||
|
|||
<div> |
|||
<form class="form-inline" [formGroup]="geolocationForm" (submit)="updateValueByInput()"> |
|||
<div class="form-group latitude-group"> |
|||
<input type="number" class="form-control" formControlName="latitude" step="any" #dateInput /> |
|||
</div> |
|||
<div class="form-group longitude-group"> |
|||
<input type="number" class="form-control" formControlName="longitude" step="any" /> |
|||
</div> |
|||
<div class="form-group" [class.hidden]="!hasValue"> |
|||
<button type="reset" class="btn btn-link clear" [disabled]="isDisabled" (click)="reset()">Clear</button> |
|||
</div> |
|||
|
|||
<button type="submit" class="hidden"></button> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
@ -1,14 +0,0 @@ |
|||
@import '_mixins'; |
|||
@import '_vars'; |
|||
|
|||
.editor { |
|||
height: 30rem; |
|||
} |
|||
|
|||
.form-inline { |
|||
margin-top: .5rem; |
|||
} |
|||
|
|||
.latitude-group { |
|||
margin-right: .25rem; |
|||
} |
|||
@ -1,217 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { AfterViewInit, Component, ElementRef, forwardRef, ViewChild } from '@angular/core'; |
|||
import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms'; |
|||
|
|||
import { Types } from './../utils/types'; |
|||
|
|||
import { ResourceLoaderService } from './../services/resource-loader.service'; |
|||
import { ValidatorsEx } from './validators'; |
|||
|
|||
declare var L: any; |
|||
|
|||
export const SQX_GEOLOCATION_EDITOR_CONTROL_VALUE_ACCESSOR: any = { |
|||
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => GeolocationEditorComponent), multi: true |
|||
}; |
|||
|
|||
interface Geolocation { |
|||
latitude: number; |
|||
longitude: number; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'sqx-geolocation-editor', |
|||
styleUrls: ['./geolocation-editor.component.scss'], |
|||
templateUrl: './geolocation-editor.component.html', |
|||
providers: [SQX_GEOLOCATION_EDITOR_CONTROL_VALUE_ACCESSOR] |
|||
}) |
|||
export class GeolocationEditorComponent implements ControlValueAccessor, AfterViewInit { |
|||
private callChange = (v: any) => { /* NOOP */ }; |
|||
private callTouched = () => { /* NOOP */ }; |
|||
private marker: any; |
|||
private map: any; |
|||
private value: Geolocation | null = null; |
|||
|
|||
public get hasValue() { |
|||
return !!this.value; |
|||
} |
|||
|
|||
public geolocationForm = |
|||
this.formBuilder.group({ |
|||
latitude: ['', |
|||
[ |
|||
ValidatorsEx.between(-90, 90) |
|||
]], |
|||
longitude: ['', |
|||
[ |
|||
ValidatorsEx.between(-180, 180) |
|||
]] |
|||
}); |
|||
|
|||
@ViewChild('editor') |
|||
public editor: ElementRef; |
|||
|
|||
public isDisabled = false; |
|||
|
|||
constructor( |
|||
private readonly resourceLoader: ResourceLoaderService, |
|||
private readonly formBuilder: FormBuilder |
|||
) { |
|||
} |
|||
|
|||
public writeValue(value: Geolocation) { |
|||
if (Types.isObject(value) && Types.isNumber(value.latitude) && Types.isNumber(value.longitude)) { |
|||
this.value = value; |
|||
} else { |
|||
this.value = null; |
|||
} |
|||
|
|||
if (this.marker) { |
|||
this.updateMarker(true, false); |
|||
} |
|||
} |
|||
|
|||
public setDisabledState(isDisabled: boolean): void { |
|||
this.isDisabled = isDisabled; |
|||
|
|||
if (isDisabled) { |
|||
if (this.map) { |
|||
this.map.zoomControl.disable(); |
|||
|
|||
this.map._handlers.forEach((handler: any) => { |
|||
handler.disable(); |
|||
}); |
|||
} |
|||
|
|||
if (this.marker) { |
|||
this.marker.dragging.disable(); |
|||
} |
|||
|
|||
this.geolocationForm.disable(); |
|||
} else { |
|||
if (this.map) { |
|||
this.map.zoomControl.enable(); |
|||
|
|||
this.map._handlers.forEach((handler: any) => { |
|||
handler.enable(); |
|||
}); |
|||
} |
|||
|
|||
if (this.marker) { |
|||
this.marker.dragging.enable(); |
|||
} |
|||
|
|||
this.geolocationForm.enable(); |
|||
} |
|||
} |
|||
|
|||
public registerOnChange(fn: any) { |
|||
this.callChange = fn; |
|||
} |
|||
|
|||
public registerOnTouched(fn: any) { |
|||
this.callTouched = fn; |
|||
} |
|||
|
|||
public updateValueByInput() { |
|||
if (this.geolocationForm.controls['latitude'].value !== null && |
|||
this.geolocationForm.controls['longitude'].value !== null && |
|||
this.geolocationForm.valid) { |
|||
this.value = this.geolocationForm.value; |
|||
} else { |
|||
this.value = null; |
|||
} |
|||
|
|||
this.updateMarker(true, true); |
|||
} |
|||
|
|||
public ngAfterViewInit() { |
|||
this.resourceLoader.loadStyle('https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css'); |
|||
this.resourceLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js').then(() => { |
|||
this.map = L.map(this.editor.nativeElement).fitWorld(); |
|||
|
|||
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { |
|||
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' |
|||
}).addTo(this.map); |
|||
|
|||
this.map.on('click', (event: any) => { |
|||
if (!this.marker && !this.isDisabled) { |
|||
const latlng = event.latlng.wrap(); |
|||
|
|||
this.value = { latitude: latlng.lat, longitude: latlng.lng }; |
|||
|
|||
this.updateMarker(false, true); |
|||
} |
|||
}); |
|||
|
|||
this.updateMarker(true, false); |
|||
|
|||
if (this.isDisabled) { |
|||
this.map.zoomControl.disable(); |
|||
|
|||
this.map._handlers.forEach((handler: any) => { |
|||
handler.disable(); |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
public reset() { |
|||
this.value = null; |
|||
|
|||
this.updateMarker(true, true); |
|||
} |
|||
|
|||
private updateMarker(zoom: boolean, fireEvent: boolean) { |
|||
if (this.value) { |
|||
if (!this.marker) { |
|||
this.marker = L.marker([0, 90], { draggable: true }).addTo(this.map); |
|||
|
|||
this.marker.on('drag', (event: any) => { |
|||
const latlng = event.latlng.wrap(); |
|||
|
|||
this.value = { latitude: latlng.lat, longitude: latlng.lng }; |
|||
}); |
|||
|
|||
this.marker.on('dragend', () => { |
|||
this.updateMarker(false, true); |
|||
}); |
|||
|
|||
if (this.isDisabled) { |
|||
this.marker.dragging.disable(); |
|||
} |
|||
} |
|||
|
|||
const latLng = L.latLng(this.value.latitude, this.value.longitude); |
|||
|
|||
if (zoom) { |
|||
this.map.setView(latLng, 8); |
|||
} else { |
|||
this.map.panTo(latLng); |
|||
} |
|||
|
|||
this.marker.setLatLng(latLng); |
|||
|
|||
this.geolocationForm.setValue(this.value, { emitEvent: false, onlySelf: false }); |
|||
} else { |
|||
if (this.marker) { |
|||
this.marker.removeFrom(this.map); |
|||
this.marker = null; |
|||
} |
|||
|
|||
this.map.fitWorld(); |
|||
|
|||
this.geolocationForm.reset(undefined, { emitEvent: false, onlySelf: false }); |
|||
} |
|||
|
|||
if (fireEvent) { |
|||
this.callChange(this.value); |
|||
this.callTouched(); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,31 @@ |
|||
<div class="editor-container"> |
|||
<form> |
|||
<div class="editor" #editor></div> |
|||
<input [class.hidden]="!isGoogleMaps" class="form-control search-control" type="text" [disabled]="isDisabled" placeholder="Search Google Maps" #searchBox /> |
|||
</form> |
|||
<div> |
|||
<form class="form-inline no-gutters" [formGroup]="geolocationForm" (change)="updateValueByInput()" (submit)="updateValueByInput()"> |
|||
<div class="form-group col-auto pr-2"> |
|||
<label for="latitude">Latitude: </label> |
|||
</div> |
|||
<div class="form-group"> |
|||
<sqx-control-errors for="latitude" style="z-index: 10000;"></sqx-control-errors> |
|||
|
|||
<input type="number" class="form-control" formControlName="latitude" step="any" /> |
|||
</div> |
|||
|
|||
<div class="form-group col-auto pr-2 pl-2"> |
|||
<label for="longitude">Longitude: </label> |
|||
</div> |
|||
<div class="form-group"> |
|||
<sqx-control-errors for="longitude" style="z-index: 10000;"></sqx-control-errors> |
|||
|
|||
<input type="number" class="form-control" formControlName="longitude" step="any" /> |
|||
</div> |
|||
|
|||
<div class="form-group col-auto"> |
|||
<button [class.hidden]="!hasValue" type="reset" class="btn btn-link clear" [disabled]="isDisabled" (click)="reset()">Clear</button> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,20 @@ |
|||
@import '_mixins'; |
|||
@import '_vars'; |
|||
|
|||
.editor { |
|||
height: 30rem; |
|||
} |
|||
|
|||
.editor-container { |
|||
position: relative; |
|||
} |
|||
|
|||
.search-control { |
|||
@include absolute(.5rem, auto, auto, .5rem); |
|||
@include box-shadow; |
|||
width: 40%; |
|||
} |
|||
|
|||
.form-inline { |
|||
margin-top: .5rem; |
|||
} |
|||
@ -0,0 +1,396 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { AfterViewInit, Component, ElementRef, forwardRef, ViewChild } from '@angular/core'; |
|||
import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms'; |
|||
|
|||
import { Types } from './../../framework/utils/types'; |
|||
|
|||
import { ResourceLoaderService } from './../../framework/services/resource-loader.service'; |
|||
import { ValidatorsEx } from './../../framework/angular/validators'; |
|||
|
|||
import { UIService } from './../services/ui.service'; |
|||
|
|||
declare var L: any; |
|||
declare var google: any; |
|||
|
|||
export const SQX_GEOLOCATION_EDITOR_CONTROL_VALUE_ACCESSOR: any = { |
|||
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => GeolocationEditorComponent), multi: true |
|||
}; |
|||
|
|||
interface Geolocation { |
|||
latitude: number; |
|||
longitude: number; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'sqx-geolocation-editor', |
|||
styleUrls: ['./geolocation-editor.component.scss'], |
|||
templateUrl: './geolocation-editor.component.html', |
|||
providers: [SQX_GEOLOCATION_EDITOR_CONTROL_VALUE_ACCESSOR] |
|||
}) |
|||
export class GeolocationEditorComponent implements ControlValueAccessor, AfterViewInit { |
|||
private callChange = (v: any) => { /* NOOP */ }; |
|||
private callTouched = () => { /* NOOP */ }; |
|||
private marker: any; |
|||
private map: any; |
|||
private value: Geolocation | null = null; |
|||
|
|||
public get hasValue() { |
|||
return !!this.value; |
|||
} |
|||
|
|||
public geolocationForm = |
|||
this.formBuilder.group({ |
|||
latitude: [ |
|||
'', |
|||
[ |
|||
ValidatorsEx.between(-90, 90) |
|||
] |
|||
], |
|||
longitude: [ |
|||
'', |
|||
[ |
|||
ValidatorsEx.between(-180, 180) |
|||
] |
|||
] |
|||
}); |
|||
|
|||
@ViewChild('editor') |
|||
public editor: ElementRef; |
|||
|
|||
@ViewChild('searchBox') |
|||
public searchBoxInput: ElementRef; |
|||
|
|||
public isGoogleMaps = false; |
|||
public isDisabled = false; |
|||
|
|||
constructor( |
|||
private readonly resourceLoader: ResourceLoaderService, |
|||
private readonly formBuilder: FormBuilder, |
|||
private readonly uiService: UIService |
|||
) { |
|||
} |
|||
|
|||
public writeValue(value: Geolocation) { |
|||
if (Types.isObject(value) && Types.isNumber(value.latitude) && Types.isNumber(value.longitude)) { |
|||
this.value = value; |
|||
} else { |
|||
this.value = null; |
|||
} |
|||
|
|||
if (this.marker || (!this.marker && this.map && this.value)) { |
|||
this.updateMarker(true, false); |
|||
} |
|||
} |
|||
|
|||
public setDisabledState(isDisabled: boolean): void { |
|||
this.isDisabled = isDisabled; |
|||
|
|||
if (!this.isGoogleMaps) { |
|||
this.setDisabledStateOSM(isDisabled); |
|||
} else { |
|||
this.setDisabledStateGoogle(isDisabled); |
|||
} |
|||
|
|||
if (isDisabled) { |
|||
this.geolocationForm.disable(); |
|||
} else { |
|||
this.geolocationForm.enable(); |
|||
} |
|||
} |
|||
|
|||
private setDisabledStateOSM(isDisabled: boolean): void { |
|||
const update: (t: any) => any = |
|||
isDisabled ? |
|||
x => x.enable() : |
|||
x => x.disable(); |
|||
|
|||
if (this.map) { |
|||
update(this.map.zoomControl); |
|||
|
|||
this.map._handlers.forEach((handler: any) => { |
|||
update(handler); |
|||
}); |
|||
} |
|||
|
|||
if (this.marker) { |
|||
update(this.marker.dragging); |
|||
} |
|||
} |
|||
|
|||
private setDisabledStateGoogle(isDisabled: boolean): void { |
|||
const enabled = !isDisabled; |
|||
|
|||
if (this.map) { |
|||
this.map.setOptions({ draggable: enabled, zoomControl: enabled }); |
|||
} |
|||
|
|||
if (this.marker) { |
|||
this.marker.setDraggable(enabled); |
|||
} |
|||
} |
|||
|
|||
public registerOnChange(fn: any) { |
|||
this.callChange = fn; |
|||
} |
|||
|
|||
public registerOnTouched(fn: any) { |
|||
this.callTouched = fn; |
|||
} |
|||
|
|||
public updateValueByInput() { |
|||
let updateMap = this.geolocationForm.controls['latitude'].value !== null && |
|||
this.geolocationForm.controls['longitude'].value !== null; |
|||
|
|||
this.value = this.geolocationForm.value; |
|||
|
|||
if (updateMap) { |
|||
this.updateMarker(true, true); |
|||
} else { |
|||
this.callChange(this.value); |
|||
this.callTouched(); |
|||
} |
|||
} |
|||
|
|||
public ngAfterViewInit() { |
|||
this.uiService.getSettings() |
|||
.subscribe(settings => { |
|||
this.isGoogleMaps = settings.mapType === 'GoogleMaps'; |
|||
|
|||
if (!this.isGoogleMaps) { |
|||
this.ngAfterViewInitOSM(); |
|||
} else { |
|||
this.ngAfterViewInitGoogle(settings.mapKey); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
private ngAfterViewInitOSM() { |
|||
this.searchBoxInput.nativeElement.remove(); |
|||
|
|||
this.resourceLoader.loadStyle('https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css'); |
|||
this.resourceLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js').then( |
|||
() => { |
|||
this.map = L.map(this.editor.nativeElement).fitWorld(); |
|||
|
|||
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', |
|||
{ |
|||
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' |
|||
}).addTo(this.map); |
|||
|
|||
this.map.on('click', |
|||
(event: any) => { |
|||
if (!this.marker && !this.isDisabled) { |
|||
const latlng = event.latlng.wrap(); |
|||
|
|||
this.value = { |
|||
latitude: latlng.lat, |
|||
longitude: latlng.lng |
|||
}; |
|||
|
|||
this.updateMarker(false, true); |
|||
} |
|||
}); |
|||
|
|||
this.updateMarker(true, false); |
|||
|
|||
if (this.isDisabled) { |
|||
this.map.zoomControl.disable(); |
|||
|
|||
this.map._handlers.forEach((handler: any) => { |
|||
handler.disable(); |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
private ngAfterViewInitGoogle(apiKey: string) { |
|||
this.resourceLoader.loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`).then( |
|||
() => { |
|||
this.map = new google.maps.Map(this.editor.nativeElement, |
|||
{ |
|||
zoom: 1, |
|||
mapTypeControl: false, |
|||
streetViewControl: false, |
|||
center: { lat: 0, lng: 0 } |
|||
}); |
|||
|
|||
const searchBox = new google.maps.places.SearchBox(this.searchBoxInput.nativeElement); |
|||
|
|||
this.map.addListener('click', |
|||
(event: any) => { |
|||
if (!this.isDisabled) { |
|||
this.value = { |
|||
latitude: event.latLng.lat(), |
|||
longitude: event.latLng.lng() |
|||
}; |
|||
|
|||
this.updateMarker(false, true); |
|||
} |
|||
}); |
|||
|
|||
this.map.addListener('bounds_changed', (event: any) => { |
|||
searchBox.setBounds(this.map.getBounds()); |
|||
}); |
|||
|
|||
searchBox.addListener('places_changed', (event: any) => { |
|||
let places = searchBox.getPlaces(); |
|||
|
|||
if (places.length === 1) { |
|||
let place = places[0]; |
|||
|
|||
if (!place.geometry) { |
|||
return; |
|||
} |
|||
|
|||
if (!this.isDisabled) { |
|||
let lat = place.geometry.location.lat(); |
|||
let lng = place.geometry.location.lng(); |
|||
|
|||
this.value = { latitude: lat, longitude: lng }; |
|||
|
|||
this.updateMarker(false, true); |
|||
} |
|||
} |
|||
}); |
|||
|
|||
this.updateMarker(true, false); |
|||
|
|||
if (this.isDisabled) { |
|||
this.map.setOptions({ draggable: false, zoomControl: false }); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
public reset() { |
|||
this.value = null; |
|||
this.searchBoxInput.nativeElement.value = null; |
|||
|
|||
this.updateMarker(true, true); |
|||
} |
|||
|
|||
private updateMarker(zoom: boolean, fireEvent: boolean) { |
|||
if (!this.isGoogleMaps) { |
|||
this.updateMarkerOSM(zoom, fireEvent); |
|||
} else { |
|||
this.updateMarkerGoogle(zoom, fireEvent); |
|||
} |
|||
} |
|||
|
|||
private updateMarkerOSM(zoom: boolean, fireEvent: boolean) { |
|||
if (this.value) { |
|||
if (!this.marker) { |
|||
this.marker = L.marker([0, 90], { draggable: true }).addTo(this.map); |
|||
|
|||
this.marker.on('drag', (event: any) => { |
|||
const latlng = event.latlng.wrap(); |
|||
|
|||
this.value = { |
|||
latitude: latlng.lat, |
|||
longitude: latlng.lng |
|||
}; |
|||
}); |
|||
|
|||
this.marker.on('dragend', () => { |
|||
this.updateMarker(false, true); |
|||
}); |
|||
|
|||
if (this.isDisabled) { |
|||
this.marker.dragging.disable(); |
|||
} |
|||
} |
|||
|
|||
const latLng = L.latLng(this.value.latitude, this.value.longitude); |
|||
|
|||
if (zoom) { |
|||
this.map.setView(latLng, 8); |
|||
} else { |
|||
this.map.panTo(latLng); |
|||
} |
|||
|
|||
this.marker.setLatLng(latLng); |
|||
|
|||
this.geolocationForm.setValue(this.value, { emitEvent: false, onlySelf: false }); |
|||
} else { |
|||
if (this.marker) { |
|||
this.marker.removeFrom(this.map); |
|||
this.marker = null; |
|||
} |
|||
|
|||
this.map.fitWorld(); |
|||
|
|||
this.geolocationForm.reset(undefined, { emitEvent: false, onlySelf: false }); |
|||
} |
|||
|
|||
if (fireEvent) { |
|||
this.callChange(this.value); |
|||
this.callTouched(); |
|||
} |
|||
} |
|||
|
|||
private updateMarkerGoogle(zoom: boolean, fireEvent: boolean) { |
|||
if (this.value) { |
|||
if (!this.marker) { |
|||
this.marker = new google.maps.Marker({ |
|||
position: { |
|||
lat: 0, |
|||
lng: 0 |
|||
}, |
|||
map: this.map, |
|||
draggable: true |
|||
}); |
|||
|
|||
this.marker.addListener('drag', (event: any) => { |
|||
if (!this.isDisabled) { |
|||
this.value = { |
|||
latitude: event.latLng.lat(), |
|||
longitude: event.latLng.lng() |
|||
}; |
|||
} |
|||
}); |
|||
this.marker.addListener('dragend', (event: any) => { |
|||
if (!this.isDisabled) { |
|||
this.value = { |
|||
latitude: event.latLng.lat(), |
|||
longitude: event.latLng.lng() |
|||
}; |
|||
|
|||
this.updateMarker(false, true); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
const latLng = { lat: this.value.latitude, lng: this.value.longitude }; |
|||
|
|||
if (zoom) { |
|||
this.map.setCenter(latLng); |
|||
} else { |
|||
this.map.panTo(latLng); |
|||
} |
|||
|
|||
this.marker.setPosition(latLng); |
|||
this.map.setZoom(12); |
|||
|
|||
this.geolocationForm.setValue(this.value, { emitEvent: false, onlySelf: false }); |
|||
} else { |
|||
if (this.marker) { |
|||
this.marker.setMap(null); |
|||
this.marker = null; |
|||
} |
|||
|
|||
this.map.setCenter({ lat: 0, lng: 0 }); |
|||
|
|||
this.geolocationForm.reset(undefined, { emitEvent: false, onlySelf: false }); |
|||
} |
|||
|
|||
if (fireEvent) { |
|||
this.callChange(this.value); |
|||
this.callTouched(); |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue