From 6b4c109cfe3844405daa71ddd4930c161b39ef85 Mon Sep 17 00:00:00 2001 From: Ricky Brundritt Date: Wed, 9 Sep 2020 23:06:52 -0700 Subject: [PATCH] Optimizations --- README.md | 2 + .../RouteUI/RouteInstructionControl.ts | 73 ++++++++++--------- src/control/RouteUI/RouteUIManager.ts | 12 +-- src/helpers/EmbeddedIcons.ts | 6 +- src/helpers/Localization.ts | 14 ++-- src/helpers/Utils.ts | 34 ++++----- 6 files changed, 77 insertions(+), 64 deletions(-) diff --git a/README.md b/README.md index 099b2a8..1b4ecf6 100644 --- a/README.md +++ b/README.md @@ -51,6 +51,8 @@ See the [documentation](https://github.com/Azure-Samples/azure-maps-services-ui/ * [Azure Maps Animation module](https://github.com/Azure-Samples/azure-maps-animations) * [Azure Maps Geolocation Control module](https://github.com/Azure-Samples/azure-maps-geolocation-control) +* [Azure Maps Fullscreen Control module](https://github.com/Azure-Samples/azure-maps-fullscreen-control) +* [Azure Maps Selection Control module](https://github.com/Azure-Samples/azure-maps-selection-control) * [Azure Maps Sync Map module](https://github.com/Azure-Samples/azure-maps-sync-maps) **Additional projects** diff --git a/src/control/RouteUI/RouteInstructionControl.ts b/src/control/RouteUI/RouteInstructionControl.ts index 2a26a17..0039826 100644 --- a/src/control/RouteUI/RouteInstructionControl.ts +++ b/src/control/RouteUI/RouteInstructionControl.ts @@ -82,7 +82,10 @@ export class RouteInstructionControl implements azmaps.Control { */ public setOptions(options: RouteInstructionControlOptions): void { if (options) { - if (typeof options.containerId !== 'undefined' && this._options.containerId !== options.containerId) { + let o = this._options; + let no: RouteInstructionControlOptions = {}; + + if (typeof options.containerId !== 'undefined' && o.containerId !== options.containerId) { if (this._control) { this._control.remove(); } @@ -91,41 +94,43 @@ export class RouteInstructionControl implements azmaps.Control { this._mapControlConatiner.remove(); } - this._options.containerId = options.containerId; + no.containerId = options.containerId; } - if (typeof options.displayDisclaimer === 'boolean' && this._options.displayDisclaimer !== options.displayDisclaimer) { - this._options.displayDisclaimer = options.displayDisclaimer; + if (typeof options.displayDisclaimer === 'boolean') { + no.displayDisclaimer = options.displayDisclaimer; } - /* if (typeof options.displayRouteSelector === 'boolean' && this._options.displayRouteSelector !== options.displayRouteSelector) { - this._options.displayRouteSelector = options.displayRouteSelector; + /* if (typeof options.displayRouteSelector === 'boolean' { + no.displayRouteSelector = options.displayRouteSelector; }*/ - if (typeof options.routeIndex === 'boolean' && this._options.routeIndex !== options.routeIndex) { - this._options.routeIndex = options.routeIndex; + if (typeof options.routeIndex === 'boolean') { + no.routeIndex = options.routeIndex; } - if (typeof options.groupInstructions === 'boolean' && this._options.groupInstructions !== options.groupInstructions) { - this._options.groupInstructions = options.groupInstructions; + if (typeof options.groupInstructions === 'boolean') { + no.groupInstructions = options.groupInstructions; } - if (options.waypointTextFormat && this._options.waypointTextFormat !== options.waypointTextFormat) { - this._options.waypointTextFormat = options.waypointTextFormat; + if (options.waypointTextFormat) { + no.waypointTextFormat = options.waypointTextFormat; } - if (options.language && this._options.language !== options.language) { - this._options.language = options.language; + if (options.language && o.language !== options.language) { + no.language = options.language; this._resources = null; } - if (options.style && this._options.style !== options.style) { - this._options.style = options.style; + if (options.style) { + no.style = options.style; } - if (options.units && this._options.units !== options.units) { - this._options.units = options.units; + if (options.units) { + no.units = options.units; } + + Object.assign(this._options, no); } this._renderRoute(); @@ -152,23 +157,25 @@ export class RouteInstructionControl implements azmaps.Control { */ public onAdd(map: azmaps.Map, options?: azmaps.ControlOptions): HTMLElement { this._map = map; + let mcc = this._mapControlConatiner; //Remove the control from the map incase it has been added previously. - if (this._mapControlConatiner) { - this._mapControlConatiner.remove(); + if (mcc) { + mcc.remove(); } if (!this._options.containerId) { //Create the container for display on the map. - this._mapControlConatiner = document.createElement('div'); - this._mapControlConatiner.classList.add('route-instruction-map-container'); - // this._mapControlConatiner.setAttribute('aria-label', this._resource.title); - this._mapControlConatiner.style.flexDirection = 'column'; + let mcc = document.createElement('div'); + mcc.classList.add('route-instruction-map-container'); + // mcc.setAttribute('aria-label', this._resource.title); + mcc.style.flexDirection = 'column'; + this._mapControlConatiner = mcc; } this._renderRoute(); - return this._mapControlConatiner; + return mcc; } /** @@ -407,7 +414,7 @@ export class RouteInstructionControl implements azmaps.Control { * @returns A boolean indicating if the instruction is for a waypoint. */ private _isWaypoint(instruction: azmapsrest.Models.RouteResultInstruction): boolean { - var m: string = instruction.maneuver; + let m: string = instruction.maneuver; switch (m) { case 'ARRIVE': case 'ARRIVE_LEFT': @@ -440,13 +447,13 @@ export class RouteInstructionControl implements azmaps.Control { waypointText: string): HTMLDivElement { //Item container - var insItemElm = document.createElement('div'); + let insItemElm = document.createElement('div'); insItemElm.classList.add('route-instruction'); //Maneuver icon - var icon = EmbeddedIcons.getRouteInstructionIcon(instruction); + let icon = EmbeddedIcons.getRouteInstructionIcon(instruction); - var maneuver = document.createElement('div'); + let maneuver = document.createElement('div'); maneuver.classList.add('route-maneuver'); maneuver.setAttribute('aria-hidden', 'true'); @@ -460,17 +467,17 @@ export class RouteInstructionControl implements azmaps.Control { insItemElm.appendChild(maneuver); if (waypointText) { - var waypointTextElm = document.createElement('span'); + let waypointTextElm = document.createElement('span'); waypointTextElm.classList.add('route-maneuver-text'); waypointTextElm.innerText = waypointText; insItemElm.appendChild(waypointTextElm); } //Message - var insText = document.createElement('div'); + let insText = document.createElement('div'); insText.classList.add('route-instruction-msg'); - var msg = instruction.message; + let msg = instruction.message; msg = this._styleTaggedMessage(msg); @@ -480,7 +487,7 @@ export class RouteInstructionControl implements azmaps.Control { //Distance if (distance > 0) { - var disText = document.createElement('div'); + let disText = document.createElement('div'); disText.classList.add('route-instruction-distance'); disText.innerHTML = Utils.formatDistance(distance, distanceUnits); diff --git a/src/control/RouteUI/RouteUIManager.ts b/src/control/RouteUI/RouteUIManager.ts index 65c0df6..3804a68 100644 --- a/src/control/RouteUI/RouteUIManager.ts +++ b/src/control/RouteUI/RouteUIManager.ts @@ -95,12 +95,12 @@ export class RouteUIManager { //Generate instructions. if (route.guidance && route.guidance.instructions) { - var traveledDistance = 0; - var traveledTime = 0; + let traveledDistance = 0; + let traveledTime = 0; - for (var i = 0, len = route.guidance.instructions.length; i < len; i++) { - var ins = route.guidance.instructions[i]; - var insElm = document.createElement('div'); + for (let i = 0, len = route.guidance.instructions.length; i < len; i++) { + let ins = route.guidance.instructions[i]; + let insElm = document.createElement('div'); insElm.className = 'azure-maps-route-instruction'; insElm.innerHTML = ins.message; @@ -125,7 +125,7 @@ export class RouteUIManager { }; private _directionsError = (error?: any) => { - var msg: string; + let msg: string; if (error.msg) { diff --git a/src/helpers/EmbeddedIcons.ts b/src/helpers/EmbeddedIcons.ts index a32a526..9b7f988 100644 --- a/src/helpers/EmbeddedIcons.ts +++ b/src/helpers/EmbeddedIcons.ts @@ -9,9 +9,9 @@ export class EmbeddedIcons { * @returns An SVG icon for a route instruction. */ public static getRouteInstructionIcon(instruction?: azmapsrest.Models.RouteResultInstruction): string { - var ds = instruction.drivingSide || 'RIGHT'; - var m: string = instruction.maneuver; - var icon: string; + let ds = instruction.drivingSide || 'RIGHT'; + let m: string = instruction.maneuver; + let icon: string; if (m) { diff --git a/src/helpers/Localization.ts b/src/helpers/Localization.ts index 10befd9..306b76a 100644 --- a/src/helpers/Localization.ts +++ b/src/helpers/Localization.ts @@ -34,8 +34,12 @@ export class Localization { language = Utils.detectLanguage(language); } - if (language && language.indexOf('-') > 0) { - language = language.substring(0, language.indexOf('-')).toLowerCase(); + if (language) { + language = language.toLowerCase(); + + if (language.indexOf('-') > 0) { + language = language.substring(0, language.indexOf('-')); + } } if (!language || this._supportedLanguages.indexOf(language) === -1) { @@ -46,11 +50,11 @@ export class Localization { return this._resxCache[language]; } - var res = await fetch(`${this._localizationFolderPath}/${language}/resource.json`); + let res = await fetch(`${this._localizationFolderPath}/${language}/resource.json`); if (res.ok) { - var r = res.json(); - var r2 = await r; + let r = res.json(); + let r2 = await r; this._resxCache[language] = r2; diff --git a/src/helpers/Utils.ts b/src/helpers/Utils.ts index e51fcc9..6407c6a 100644 --- a/src/helpers/Utils.ts +++ b/src/helpers/Utils.ts @@ -1,6 +1,6 @@ import * as azmaps from "azure-maps-control"; import * as azmapsrest from "azure-maps-rest"; -import { Localization, Resource } from './Localization'; +import { Resource } from './Localization'; export class Utils { @@ -16,17 +16,17 @@ export class Utils { */ public static highContrastStyle(): 'none' | 'light' | 'dark' { //Try and detect CSS media high contrast styles. - var elms = document.getElementsByClassName('atlas-accessibility-placeholder'); + let elms = document.getElementsByClassName('atlas-accessibility-placeholder'); if (!elms || elms.length === 0) { - var elm = document.createElement('div'); + let elm = document.createElement('div'); elm.classList.add('atlas-accessibility-placeholder'); document.body.appendChild(elm); elms = document.getElementsByClassName('atlas-accessibility-placeholder'); } if (elms && elms.length > 0) { - var zIndex = window.getComputedStyle(elms[0], null).getPropertyValue('z-index'); + let zIndex = window.getComputedStyle(elms[0], null).getPropertyValue('z-index'); switch (zIndex) { case '2': //Black on white @@ -38,7 +38,7 @@ export class Utils { } //Detect Chrome extension for high contrast. The extention adds an 'hc' attribute to the HTML tag of the page. - var htmlTag = document.getElementsByTagName('html'); + let htmlTag = document.getElementsByTagName('html'); if (htmlTag[0].getAttribute('hc') !== null) { return 'dark'; } @@ -114,7 +114,7 @@ export class Utils { */ public static formatDistance(distanceMeters: number, units: 'metric' | 'imperial', resources?: Resource): string { - var res: any = resources || { + let res: any = resources || { ft: "ft", km: "km", mi: "mi", @@ -124,7 +124,7 @@ export class Utils { if (units === 'imperial') { //miles/feet //Use miles for distances of 0.1 miles or more, use feet for shorter distances. if (distanceMeters >= 160.9344) { //use miles - var miles = distanceMeters * 0.00062137; + let miles = distanceMeters * 0.00062137; //Show one decimal is less than 100 miles. if (miles < 100) { @@ -140,7 +140,7 @@ export class Utils { } else { //KM/meters //Use km for distances of 0.1 km or more, use feet for shorter distances. if (distanceMeters >= 100) { //use miles - var km = distanceMeters * 0.001; + let km = distanceMeters * 0.001; //Show one decimal if less than 100 km. if (km < 100) { @@ -162,10 +162,10 @@ export class Utils { * @returns A formatted timespan string. */ public static formatTimespan(timeInSeconds: number, resources?: Resource): string { - var t = ''; - var days: number = 0, hours: number = 0, mins: number = 0; + let t = ''; + let days: number = 0, hours: number = 0, mins: number = 0; - var res: any = resources || { + let res: any = resources || { min: "min", mins: "mins", hr: "hr", @@ -229,11 +229,11 @@ export class Utils { * @returns A formatted arrival time. */ public static formatArriveDateTime(dateString: string): string { - var d1: any = new Date(); - var d2: any = new Date(Date.parse(dateString)); - var diff = d2 - d1; + let d1: any = new Date(); + let d2: any = new Date(Date.parse(dateString)); + let diff = d2 - d1; - var days = Math.ceil(diff / (1000 * 60 * 60 * 24)); + let days = Math.ceil(diff / (1000 * 60 * 60 * 24)); //Check to see if the arrival time is today. if (days === 0 || (days === 1 && d1.getDate() === d2.getDate())) { @@ -249,7 +249,7 @@ export class Utils { /** Retrieves the executing file/URL path of the azure-maps-services-ui library. */ public static getExecutingPath(): string { - var p = this._currentScriptPath; + let p = this._currentScriptPath; if (p.indexOf('/') > -1) { return p.substring(0, p.lastIndexOf("/")); @@ -263,7 +263,7 @@ export class Utils { ///////////////////////////// private static _getBrowserLocale(): string { - var locale = (navigator.languages && navigator.languages[0]) || navigator.language || navigator['userLanguage']; + let locale = (navigator.languages && navigator.languages[0]) || navigator.language || navigator['userLanguage']; if (locale) { //Handle complex locales by removing extra dashed info and making it look like a language code.