|
54 | 54 | <div slot="header">Widget Code Snippets</div> |
55 | 55 | <div slot="content"> |
56 | 56 | <calcite-accordion selection-mode="single" scale="l"> |
57 | | - <calcite-accordion-item expanded heading="1. TODO" description="TODO" icon-start="group-layout-elements"> |
58 | | - <esri-devsummit-code source="TODO"></esri-devsummit-code> |
| 57 | + <calcite-accordion-item heading="1. Create Calcite HTML" description="Set up the DOM using calcite-components" |
| 58 | + icon-start="code"> |
| 59 | + <esri-devsummit-code source="export function createCustomCoordinateConversion(view) { |
| 60 | + const vm = new CoordinateConversionViewModel({ |
| 61 | + view, |
| 62 | + multipleConversions: false, |
| 63 | + }); |
| 64 | + |
| 65 | + const customWidget = document.createElement("div"); |
| 66 | + customWidget.innerHTML = ` |
| 67 | + <div class="custom-coordinate-conversion"> |
| 68 | + |
| 69 | + <calcite-segmented-control id="custom-coordinate-mode"> |
| 70 | + <calcite-segmented-control-item icon-start="cursor" value="live" checked>Live</calcite-segmented-control-item> |
| 71 | + <calcite-segmented-control-item icon-start="pin" value="capture">Capture</calcite-segmented-control-item> |
| 72 | + </calcite-segmented-control> |
| 73 | + |
| 74 | + <calcite-select id="custom-coordinate-select"></calcite-select> |
| 75 | + |
| 76 | + <calcite-inline-editable id="custom-coordinate-editable" controls> |
| 77 | + <calcite-input id="custom-coordinate-input" placeholder="Enter coordinates"></calcite-input> |
| 78 | + </calcite-inline-editable> |
| 79 | + |
| 80 | + </div> |
| 81 | + `; |
| 82 | + // ... |
| 83 | +}"></esri-devsummit-code> |
| 84 | + </calcite-accordion-item> |
| 85 | + <calcite-accordion-item heading="2. Watch the ViewModel for changes and react to them" |
| 86 | + description="Watching VM properties to update the DOM" icon-start="recurrence"> |
| 87 | + <esri-devsummit-code source="watch( |
| 88 | + () => vm.conversions.getItemAt(0)?.format, |
| 89 | + (format) => updateFormats(format), |
| 90 | + { initial: true } |
| 91 | +); |
| 92 | +watch( |
| 93 | + () => vm.conversions.getItemAt(0)?.displayCoordinate, |
| 94 | + (displayCoordinate) => updateCoordinates(displayCoordinate ?? ""), |
| 95 | + { initial: true } |
| 96 | +); |
| 97 | + |
| 98 | +function updateFormats(currentFormat) { |
| 99 | + // ... Create the calcite-options |
| 100 | + coordinateSelect.innerHTML = options; |
| 101 | +} |
| 102 | + |
| 103 | +function updateCoordinates(activeDisplayCoordinate) { |
| 104 | + coordinateInput.value = activeDisplayCoordinate; |
| 105 | + coordinateInput.status = "valid"; |
| 106 | +}"></esri-devsummit-code> |
| 107 | + </calcite-accordion-item> |
| 108 | + <calcite-accordion-item heading="3. Listening to calcite components for changes" |
| 109 | + description="Add event listeners for calcite components to update the ViewModel" icon-start="recurrence"> |
| 110 | + <esri-devsummit-code source="coordinateSelect.addEventListener("calciteSelectChange", (event) => { |
| 111 | + const value = event.target.value; |
| 112 | + const format = vm.formats.find((format) => format.name === value); |
| 113 | + const newConversion = new Conversion({ format }); |
| 114 | + vm.conversions.removeAt(0); |
| 115 | + vm.conversions.add(newConversion, 0); |
| 116 | +}); |
| 117 | + |
| 118 | +coordinateMode.addEventListener("calciteSegmentedControlChange", (event) => { |
| 119 | + vm.mode = event.target.value; |
| 120 | +});"></esri-devsummit-code> |
| 121 | + </calcite-accordion-item> |
| 122 | + <calcite-accordion-item heading="4. Capturing a point" |
| 123 | + description="Calling a ViewModel method and navigating to the returned point" icon-start="pin"> |
| 124 | + <esri-devsummit-code source=" async function reverseConvert() { |
| 125 | + coordinateEditable.editingEnabled = false; |
| 126 | + const value = coordinateInput.value; |
| 127 | + try { |
| 128 | + const point = await vm.reverseConvert(value, activeFormat); |
| 129 | + vm.view.goTo(point); |
| 130 | + } catch (e) { |
| 131 | + coordinateInput.status = "invalid"; |
| 132 | + } |
| 133 | + } |
| 134 | + |
| 135 | + coordinateEditable.addEventListener( |
| 136 | + "calciteInlineEditableEditConfirm", |
| 137 | + () => { |
| 138 | + reverseConvert(); |
| 139 | + } |
| 140 | + );"></esri-devsummit-code> |
59 | 141 | </calcite-accordion-item> |
60 | | - <calcite-accordion-item heading="2. TODO" description="TODO" icon-start="list"> |
61 | | - <esri-devsummit-code source="TODO"></esri-devsummit-code> |
| 142 | + <calcite-accordion-item heading="5. Applying some CSS" description="A small bit of CSS" icon-start="palette"> |
| 143 | + <esri-devsummit-code source=".custom-coordinate-conversion { |
| 144 | + display: flex; |
| 145 | + flex-direction: column; |
| 146 | + padding: 10px; |
| 147 | + gap: 10px; |
| 148 | + background-color: white; |
| 149 | + min-width: 350px; |
| 150 | +}"></esri-devsummit-code> |
62 | 151 | </calcite-accordion-item> |
63 | 152 | </calcite-accordion> |
64 | 153 | </div> |
|
0 commit comments