|
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. Layout" description="The layout of the application" |
58 | | - icon-start="group-layout-elements"> |
59 | | - <esri-devsummit-code source=" <calcite-shell> |
60 | | - <calcite-navigation slot="header"> |
61 | | - <calcite-navigation-logo slot="logo"> |
62 | | - </calcite-navigation> |
63 | | - <calcite-shell-panel slot="panel-start"> |
64 | | - <calcite-panel> |
65 | | - <calcite-block collapsible heading="Windmill Configuration"></calcite-block> |
66 | | - <calcite-block collapsible heading="Windmills" description="A list of displayed windmills"> |
67 | | - <calcite-list></calcite-list> |
68 | | - </calcite-block> |
69 | | - </calcite-panel> |
70 | | - </calcite-shell-panel> |
71 | | - <div id="viewDiv"> |
72 | | -</calcite-shell>"></esri-devsummit-code> |
| 57 | + <calcite-accordion-item expanded heading="1. TODO" description="TODO" icon-start="group-layout-elements"> |
| 58 | + <esri-devsummit-code source="TODO"></esri-devsummit-code> |
73 | 59 | </calcite-accordion-item> |
74 | | - <calcite-accordion-item heading="2. Windmill list creation" description="Generating the list using calicte-list" |
75 | | - icon-start="list"> |
76 | | - <esri-devsummit-code source="const list = document.getElementById("turbine-list"); |
77 | | -list.innerHTML = ""; |
78 | | -turbines.forEach((turbine) => { |
79 | | - const listItem = document.createElement("calcite-list-item"); |
80 | | - const { site_name, unique_id, manufac, model, on_year } = |
81 | | - turbine.attributes; |
82 | | - listItem.label = `${site_name}: ${unique_id}`; |
83 | | - listItem.description = `${manufac} - ${model}`; |
84 | | - list.appendChild(listItem); |
85 | | -});"></esri-devsummit-code> |
86 | | - </calcite-accordion-item> |
87 | | - <calcite-accordion-item heading="3. List Item event" description="Using the list event to go to a windmill" |
88 | | - icon-start="recurrence"> |
89 | | - <esri-devsummit-code source="listItem.addEventListener("calciteListItemSelect", () => { |
90 | | - view.goTo({ |
91 | | - target: turbine.geometry, |
92 | | - scale: 1500, |
93 | | - }); |
94 | | -});"></esri-devsummit-code> |
95 | | - </calcite-accordion-item> |
96 | | - <calcite-accordion-item heading="4. Slider event" |
97 | | - description="Watching for calcite control events to modify the map" icon-start="recurrence"> |
98 | | - <esri-devsummit-code source="const windSpeedEl = document.getElementById("wind-speed"); |
99 | | -windSpeedEl.addEventListener("calciteSliderChange", function (event) { |
100 | | - windSpeed = event.target.value; |
101 | | - updateWindResetButton(); |
102 | | - initTurbineRenderDebounced(); |
103 | | -});"></esri-devsummit-code> |
104 | | - </calcite-accordion-item> |
105 | | - <calcite-accordion-item heading="5. Theming" description="Using CSS vars to theme the application" |
106 | | - icon-start="palette"> |
107 | | - <esri-devsummit-code source="calcite-shell { |
108 | | - --calcite-ui-brand: #ffbe83; |
109 | | - --calcite-color-brand: #ffbe83; |
110 | | - --calcite-color-brand-hover: #ffe9d5; |
111 | | - --calcite-color-brand-press: #ffe9d5; |
112 | | -} |
113 | | -.calcite-mode-dark calcite-shell { |
114 | | - --calcite-ui-brand: #bcd9da; |
115 | | - --calcite-color-brand: #bcd9da; |
116 | | - --calcite-color-brand-hover: #b9d0bd; |
117 | | - --calcite-color-brand-press: #b9d0bd; |
118 | | -}"></esri-devsummit-code> |
| 60 | + <calcite-accordion-item heading="2. TODO" description="TODO" icon-start="list"> |
| 61 | + <esri-devsummit-code source="TODO"></esri-devsummit-code> |
119 | 62 | </calcite-accordion-item> |
120 | 63 | </calcite-accordion> |
121 | 64 | </div> |
|
0 commit comments