|
70 | 70 | }); |
71 | 71 | |
72 | 72 | const customWidget = document.createElement("div"); |
| 73 | + // create the Calcite HTML |
73 | 74 | customWidget.innerHTML = ` |
74 | 75 | <div class="custom-coordinate-conversion"> |
75 | 76 | |
|
96 | 97 | watch( |
97 | 98 | () => vm.conversions.getItemAt(0)?.format, |
98 | 99 | (format) => updateFormats(format), |
99 | | - { initial: true } |
| 100 | + { initial: true } // initial: true will trigger the callback immediately |
100 | 101 | ); |
101 | 102 | watch( |
102 | 103 | () => vm.conversions.getItemAt(0)?.displayCoordinate, |
|
120 | 121 | |
121 | 122 | coordinateSelect.addEventListener("calciteSelectChange", (event) => { |
122 | 123 | const value = event.target.value; |
123 | | - const format = vm.formats.find((format) => format.name === value); |
124 | | - const newConversion = new Conversion({ format }); |
| 124 | + const format = vm.formats.find((format) => format.name === value); // find new format |
| 125 | + const newConversion = new Conversion({ format }); // create new conversion |
125 | 126 | vm.conversions.removeAt(0); |
126 | | - vm.conversions.add(newConversion, 0); |
| 127 | + vm.conversions.add(newConversion, 0); // place conversion at the top |
127 | 128 | }); |
128 | 129 | |
129 | 130 | coordinateMode.addEventListener("calciteSegmentedControlChange", (event) => { |
|
132 | 133 | </calcite-accordion-item> |
133 | 134 | <calcite-accordion-item heading="4. Capturing a point" |
134 | 135 | description="Calling a ViewModel method and navigating to the returned point" icon-start="pin"> |
135 | | - <esri-demo-code language="js" source="coordinateEditable.addEventListener( |
| 136 | + <esri-demo-code language="js" source="// when inline editable is changed |
| 137 | +coordinateEditable.addEventListener( |
136 | 138 | "calciteInlineEditableEditConfirm", |
137 | 139 | () => { |
138 | 140 | reverseConvert(); |
139 | 141 | } |
140 | 142 | ); |
141 | 143 | |
| 144 | +// convert string coordinate to map point |
142 | 145 | async function reverseConvert() { |
143 | 146 | coordinateEditable.editingEnabled = false; |
144 | 147 | const value = coordinateInput.value; |
145 | 148 | try { |
146 | 149 | const point = await vm.reverseConvert(value, activeFormat); |
147 | 150 | vm.view.goTo(point); |
148 | 151 | } catch (e) { |
149 | | - coordinateInput.status = "invalid"; |
| 152 | + coordinateInput.status = "invalid"; // set inline editable to invalid |
150 | 153 | } |
151 | 154 | }"></esri-demo-code> |
152 | 155 | </calcite-accordion-item> |
|
0 commit comments