198 |
);
202 | }
203 |
204 | postInitialize() {
205 |
206 | this.own(this.sections.on("go-to", (camera: Camera) => {
207 | this.view.goTo(camera);
208 | }));
209 |
210 | new Popup({ appState: this.appState, container: "popup"});
211 | }
212 |
213 | floorMapping(num: number) { return num; }
214 | }
215 |
216 | export = BuildingViewer;
217 |
--------------------------------------------------------------------------------
/src/js/config.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2019 Esri
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | *
16 | */
17 | import { tsx } from "esri/widgets/support/widget";
18 | import HomeSection from "./sections/HomeSection";
19 | import { FloorsSection, Floor } from "./sections/FloorsSection";
20 | import SurroundingsSection from "./sections/SurroundingsSection";
21 | import Collection from "esri/core/Collection";
22 | import {Timetable, DayTimetable} from "./widgets/Timetable/Timetable";
23 |
24 | export const portalUrl = "https://zurich.maps.arcgis.com";
25 |
26 | export const websceneId = "543648a92446497db8a92c06ce1ad0b1";
27 |
28 | export const sections = [
29 | // Check the different files
30 | // to adapt to your need
31 | // or create a new section by
32 | // implement a subclass from `Section`
33 |
34 | // The about Turangua section:
35 | new HomeSection({
36 | content: (that: any) => ({this.sections.paneLeft(this.firstRendering)}
199 |
200 | {this.sections.paneRight(this.firstRendering)}
201 | Tūranga is a library in Central Christchurch and the main library of Christchurch City Libraries, New Zealand. It is the largest library in the South Island and the third-biggest in New Zealand. The previous Christchurch Central Library opened in 1982 on the corner of Oxford Terrace and Gloucester Street but was closed after the February 2011 Christchurch earthquake and demolished in 2014 to make way for the Convention Centre Precinct.
), 37 | timetable: new Timetable({ 38 | dates: new Collection([ 39 | new DayTimetable({ 40 | opens: "8:00", 41 | closes: "20:00" 42 | }), 43 | new DayTimetable({ 44 | opens: "8:00", 45 | closes: "20:00" 46 | }), 47 | new DayTimetable({ 48 | opens: "8:00", 49 | closes: "20:00" 50 | }), 51 | new DayTimetable({ 52 | opens: "8:00", 53 | closes: "20:00" 54 | }), 55 | new DayTimetable({ 56 | opens: "8:00", 57 | closes: "20:00" 58 | }), 59 | new DayTimetable({ 60 | opens: "10:00", 61 | closes: "17:00" 62 | }), 63 | new DayTimetable({ 64 | opens: "10:00", 65 | closes: "17:00" 66 | }) 67 | ]) 68 | }) 69 | }), 70 | // The different floors for Turanga: 71 | new FloorsSection({ 72 | floors: new Collection([ 73 | new Floor({ 74 | title: "He Hononga", 75 | subtitle: "connection", 76 | audio: "https://my.christchurchcitylibraries.com/wp-content/uploads/sites/5/2019/01/He-Hononga.mp3", 77 | floor: 0, 78 | content: (that: any) => (Open an hour earlier than the rest of the building on weekdays, He Hononga | Connection, Ground Level is the place to return library items, collect holds, browse magazines, DVDs and new arrivals, visit the café or interact with the Discovery Wall.
It offers experiences geared towards a wide cross-section of our community. Grab a hot drink at the espresso bar, attend an event in our community arena, or help the kids explore the play and craft areas and children’s resources. It’s also a great place for young adults to hang out, play videogames, try out VR or get some study done.
Find resources and services to help you develop your knowledge about your own identity, your ancestors, your whakapapa and also about the place that they called home – its land and buildings.
Explore the nonfiction collection with thousands of books on a huge range of subjects. Get help with print and online resources for research or recreation. Use the public internet computers or, for those who want a low-key space to read or study, there is a separate room called ‘The Quiet Place’. Study, research or browse for some recreational reading.
Browse the World Languages, Music and Fiction collections, including Biographies and Graphic Novels. Visit the two roof gardens with great views across the city. Explore your creativity in the Production Studio using creative technology such as 3D printers and sewing machines. Create and edit music and video using the Audio/Video Studio, or take a class in the Computer Labs with a great range of software available.
55 | {this.legend.render()}
56 |
);
57 | }
58 | }
59 |
60 |
61 | @subclass("playButton")
62 | class PlayButton extends Widget {
63 | @property()
64 | playing: boolean = false;
65 |
66 | @property()
67 | audioSrc: string;
68 |
69 | @property({dependsOn: ["audioSrc"], readOnly: true })
70 | get audio() {
71 | return new Audio(this.audioSrc);
72 | }
73 |
74 | postInitialize() {
75 | this.watch("audio", audio => {
76 | audio.addEventListener("ended", () => {
77 | audio.currentTime = 0;
78 | this.playing = false;
79 | });
80 | });
81 | }
82 |
83 | render() {
84 | const dynamicCss = {
85 | "playing": this.playing
86 | };
87 |
88 | return (
89 |
94 | );
95 | }
96 |
97 | onClick(event: Event) {
98 | if (this.playing) {
99 | this.playing = false;
100 | this.audio.pause();
101 | }
102 | else {
103 | this.audio.play();
104 | this.playing = true;
105 | }
106 | }
107 | }
108 |
109 | interface FloorCtorArgs {
110 | title: string;
111 | subtitle: string;
112 | content: (that: Floor) => any;
113 | floor: number;
114 | audio?: string;
115 | }
116 |
117 | interface FloorsSectionCtorArgs {
118 | floors?: CollectionListen to the name of this floor {this.playButton.render()}
) : null; 148 | return (
149 | {this.content(this)}
150 | {audio}
151 |
);
152 | }
153 |
154 | constructor(args: FloorCtorArgs) {
155 | super(args as any);
156 | }
157 |
158 | activate() {
159 | // put audio back to 0
160 | this.playButton.audio.currentTime = 0;
161 | }
162 | }
163 |
164 | @subclass("sections/FloorsSection")
165 | export class FloorsSection extends Section {
166 | @property()
167 | title = "Floor by floor";
168 |
169 | @property()
170 | id = "floors";
171 |
172 | @property({ aliasOf: "appState.floorNumber"})
173 | selectedFloor: number;
174 |
175 | private oldDate: Date;
176 |
177 | @property()
178 | previousSelectedFloor: number;
179 |
180 | @property()
181 | floorSelector: FloorSelector;
182 |
183 | @property()
184 | legendWrapper: LegendWrapper;
185 |
186 | @property()
187 | layer: FeatureLayer;
188 |
189 | @property({constructOnly: true })
190 | layerNameForInfoPoint = appUtils.FLOOR_POINTS_LAYER_PREFIX;
191 |
192 | @property({constructOnly: true })
193 | layerNameForPicturePoint = appUtils.INTERNAL_INFOPOINTS_LAYER_PREFIX;
194 |
195 | @property()
196 | picturePointsLayer: FeatureLayer;
197 |
198 | @property()
199 | minFloor: number;
200 |
201 | @property()
202 | maxFloor: number;
203 |
204 | private handles = new Handles();
205 |
206 | @property({constructOnly: true})
207 | floors: Collection{currentLevel.title}
) : ({currentLevel.title}
) : null; 213 | return currentLevel ? (
214 |
) : null;
220 | }
221 |
222 | paneRight() {
223 | const floorSelector = this.floorSelector ? this.floorSelector.render() : null;
224 | return (floor
215 | {selectedFloor}
216 | {title} 217 |[{currentLevel.subtitle}]
218 |{currentLevel.render()}
219 | {floorSelector}
);
225 | }
226 |
227 | constructor(args: FloorsSectionCtorArgs | FloorsSectionCtorArgs2) {
228 | super(args as any);
229 | }
230 |
231 | postInitialize() {
232 | watchUtils.whenOnce(this, "appState", () => {
233 | this.legendWrapper = new LegendWrapper({
234 | appState: this.appState
235 | }, "floorLegend");
236 |
237 | const floorSelectorCtorArgs = this.minFloor != null && this.maxFloor != null ? {
238 | appState: this.appState,
239 | minFloor: this.minFloor,
240 | maxFloor: this.maxFloor
241 | } : {
242 | appState: this.appState
243 | }
244 |
245 | this.floorSelector = new FloorSelector(floorSelectorCtorArgs);
246 |
247 | watchUtils.on(this, "appState.view.map.layers", "change", this.getExtraInfoLayers.bind(this));
248 |
249 | watchUtils.init(this, "selectedFloor", (selectedFloor) => {
250 | if (this.floors) {
251 | this.floors.getItemAt(selectedFloor).activate();
252 | }
253 |
254 | // filter the picture and infoLayer:
255 | if (this.layer) {
256 | this.layer.definitionExpression = "level_id = " + selectedFloor;
257 | }
258 |
259 | if (this.picturePointsLayer) {
260 | this.picturePointsLayer.definitionExpression = "level_id = " + selectedFloor;
261 | }
262 | });
263 | });
264 | }
265 |
266 | onEnter() {
267 | this.selectedFloor = 1;
268 |
269 | if (this.floors) {
270 | this.floors.getItemAt(this.selectedFloor).activate();
271 | }
272 |
273 | this.appState.view.environment.lighting.directShadowsEnabled = false;
274 | this.appState.view.environment.lighting.ambientOcclusionEnabled = false;
275 | this.oldDate = this.appState.view.environment.lighting.date;
276 | this.appState.view.environment.lighting.date = new Date("Thu Aug 01 2019 03:00:00 GMT+0200 (Central European Summer Time)");
277 | this.handles.add(this.appState.view.on("click", (event: any) => {
278 | // the hitTest() checks to see if any graphics in the view
279 | // intersect the given screen x, y coordinates
280 | this.appState.view.hitTest(event)
281 | .then((response) => {
282 | const filtered = response.results.filter((result: any) => {
283 | return result.graphic.layer === this.picturePointsLayer;
284 | })[0];
285 | if (filtered) {
286 | this.appState.popupInfo = new PopupInfo({
287 | image: filtered.graphic.attributes.url,
288 | credit: filtered.graphic.attributes.title
289 | });
290 | }
291 | });
292 | }), "click");
293 |
294 | this.legendWrapper.hide = !this.layer;
295 |
296 | if (this.layer) {
297 | this.layer.visible = true;
298 | }
299 |
300 | if (this.picturePointsLayer) {
301 | this.picturePointsLayer.visible = true;
302 | }
303 |
304 | }
305 |
306 | onLeave() {
307 | this.handles.remove("click");
308 | this.appState.view.environment.lighting.directShadowsEnabled = true;
309 | this.appState.view.environment.lighting.ambientOcclusionEnabled = true;
310 | this.appState.view.environment.lighting.date = this.oldDate;
311 |
312 | this.legendWrapper.hide = true;
313 |
314 | if (this.layer) {
315 | this.layer.visible = false;
316 | }
317 |
318 | if (this.picturePointsLayer) {
319 | this.picturePointsLayer.visible = false;
320 | }
321 | }
322 |
323 | private getExtraInfoLayers() {
324 | if (this.appState && this.appState.view.map.layers.length > 0) {
325 | // Get the info points on the floors:
326 | if (!this.layer) {
327 | this.layer = appUtils.findLayer(this.appState.view.map.layers, this.layerNameForInfoPoint) as FeatureLayer;
328 | if (this.layer) {
329 | this.layer.visible = false;
330 | this.legendWrapper.legend.layerInfos = [
331 | {
332 | layer: this.layer,
333 | title: "Legend",
334 | hideLayers: []
335 | }
336 | ];
337 | }
338 | }
339 | // Get extra pictures:
340 | if (!this.picturePointsLayer) {
341 | this.picturePointsLayer = appUtils.findLayer(this.appState.view.map.layers, this.layerNameForPicturePoint) as FeatureLayer;
342 | if (this.picturePointsLayer) {
343 | this.picturePointsLayer.visible = false;
344 | this.picturePointsLayer.outFields = ["*"];
345 | }
346 | }
347 |
348 | }
349 | }
350 | }
351 |
--------------------------------------------------------------------------------
/src/js/sections/HomeSection.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2019 Esri
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | *
16 | */
17 | import { subclass, property } from "esri/core/accessorSupport/decorators";
18 | import { tsx } from "esri/widgets/support/widget";
19 | import Section from "./Section";
20 | import AppState from "../AppState";
21 | import { Timetable } from "../widgets/Timetable/Timetable";
22 | import Viewpoints from "../widgets/Viewpoints/Viewpoints";
23 | import * as watchUtils from "esri/core/watchUtils";
24 | import Handles from "esri/core/Handles";
25 | import FeatureLayer from "esri/layers/FeatureLayer";
26 | import * as appUtils from "../support/appUtils";
27 | import Collection from "esri/core/Collection";
28 | import PopupInfo from "../widgets/Popup/PopupInfo";
29 | import WebScene from "esri/WebScene";
30 |
31 | interface HomeSectionCtorArgs {
32 | content?: (that: HomeSection) => any;
33 | timetable?: Timetable;
34 | title?: string;
35 | showExternalPoints?: boolean;
36 | }
37 |
38 | @subclass("sections/HomeSection")
39 | class HomeSection extends Section {
40 | @property()
41 | title = "Overview";
42 |
43 | @property()
44 | id = "home";
45 |
46 | @property({ constructOnly: true })
47 | timetable: Timetable;
48 |
49 | @property()
50 | private textTitle: string;
51 |
52 | @property()
53 | appState: AppState;
54 |
55 | @property()
56 | infoPointsLayer: FeatureLayer;
57 |
58 | @property({ constructOnly: true })
59 | showExternalPoints: boolean = false;
60 |
61 | private handles = new Handles();
62 |
63 | @property()
64 | content: (that: this) => any = (that: this) => (this.appState.view.map as WebScene).portalItem.snippet;
65 |
66 | @property({dependsOn: ["appState"], readOnly: true})
67 | get viewpoints() {
68 | return new Viewpoints({appState: this.appState});
69 | }
70 |
71 | render() {
72 | const timetable = this.timetable ? (Opening hours
74 |
75 | {this.timetable.render()}
76 |
77 | {this.textTitle}
) : null; 79 | 80 | return (
81 |
);
87 | }
88 |
89 | paneRight() {
90 | const viewpoints = this.viewpoints ? this.viewpoints.render() : null;
91 | return (
82 | {title}
83 | {this.content(this)}
84 |
85 | {timetable}
86 | {viewpoints}
);
92 | }
93 |
94 | constructor(args: HomeSectionCtorArgs) {
95 | super(args as any);
96 | }
97 |
98 | postInitialize() {
99 | // Optionally add the external info points to display pictures:
100 | watchUtils.whenOnce(this, "appState", () => {
101 | watchUtils.on(this, "appState.view.map.layers", "change", () => {
102 | if (this.appState && this.appState.view.map.layers.length > 0) {
103 | this.infoPointsLayer = this.appState.view.map.layers.find(layer => layer.title.indexOf(appUtils.EXTERNAL_INFOPOINT_LAYER_PREFIX) > -1) as FeatureLayer;
104 |
105 | if (this.infoPointsLayer) {
106 | this.infoPointsLayer.visible = false;
107 | this.infoPointsLayer.outFields = ["*"];
108 | this.infoPointsLayer.visible = false;
109 | this.infoPointsLayer.popupTemplate.overwriteActions = true;
110 | this.infoPointsLayer.popupTemplate.actions = new Collection();
111 | }
112 | }
113 | });
114 | });
115 |
116 | // Get the title to display in the text:
117 | watchUtils.whenOnce(this, "appState.view.map.portalItem.title", () => {
118 | this.textTitle = (this.appState.view.map as WebScene).portalItem.title;
119 | });
120 |
121 | // Enabling external point if we are in the home section:
122 | watchUtils.init(this, "appState.pageLocation", (l) => {
123 | if (this.infoPointsLayer) {
124 | this.infoPointsLayer.visible = this.showExternalPoints && l === "home";
125 | }
126 | });
127 | }
128 |
129 | onEnter() {
130 | // reset the active viewpoint each time we go in home section:
131 | this.viewpoints.activeViewpoint = null;
132 |
133 | // check if we click on an external point and display a popup if that is the case:
134 | this.handles.add(this.appState.view.on("click", (event: any) => {
135 | this.appState.view.hitTest(event)
136 | .then((response) => {
137 | const filtered = response.results.filter((result: any) => {
138 | return result.graphic.layer === this.infoPointsLayer;
139 | })[0];
140 | if (filtered) {
141 | this.appState.popupInfo = new PopupInfo({
142 | image: filtered.graphic.attributes.url,
143 | credit: filtered.graphic.attributes.title
144 | })
145 | }
146 | });
147 | }), "click");
148 | }
149 |
150 | onLeave() {
151 | // when not in home, remove the click listener:
152 | this.handles.remove("click");
153 | }
154 | }
155 |
156 | export = HomeSection;
157 |
--------------------------------------------------------------------------------
/src/js/sections/Section.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2019 Esri
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | *
16 | */
17 | import { subclass,property } from "esri/core/accessorSupport/decorators";
18 |
19 | import Camera from "esri/Camera";
20 | import Widget from "esri/widgets/Widget";
21 |
22 | import AppState from "../AppState";
23 |
24 | @subclass("sections/Section")
25 | abstract class Section extends Widget {
26 | @property()
27 | appState: AppState;
28 |
29 | @property()
30 | abstract title: string;
31 |
32 | @property()
33 | abstract id: string;
34 |
35 | @property()
36 | camera: Camera;
37 |
38 | @property()
39 | active: boolean = false;
40 |
41 | abstract render(): any;
42 |
43 | abstract paneRight(): any;
44 |
45 | onEnter() {}
46 |
47 | onLeave() {}
48 |
49 | postInitialize() {
50 | this.own(this.watch("camera", camera => {
51 | if (camera) {
52 | this.emit("go-to", camera);
53 | }
54 | }));
55 | }
56 | }
57 |
58 | export = Section;
59 |
--------------------------------------------------------------------------------
/src/js/sections/Sections.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2019 Esri
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | *
16 | */
17 | import { subclass, property } from "esri/core/accessorSupport/decorators";
18 | import { tsx } from "esri/widgets/support/widget";
19 |
20 | import Collection from "esri/core/Collection";
21 | import Section from "./Section";
22 | import AppState from "../AppState";
23 |
24 | type SectionSubclass = Pick{panes}
);
116 | }
117 |
118 | public paneRight(firstRendering = true) {
119 | const panes = this.swapPanes("paneRight", firstRendering);
120 | return ({panes}
);
121 | }
122 |
123 | public menu() {
124 | let items = this.map((section, i) => {
125 | const slash = i !== 0 ? (/ ) : null;
126 | return [slash, this.renderOneSectionMenu(section, i)];
127 | });
128 | return ();
129 | }
130 |
131 | private renderOneSectionMenu(section: SectionSubclass, i: number) {
132 | const classes = section.active? "active" : "";
133 | return ( {this.activateSection(section.id);}}>{section.title});
134 | }
135 |
136 | private swapPanes(renderViewToCall: string, firstRendering = true) {
137 |
138 |
139 | const activeSectionClasses = firstRendering ? "pane" : "active pane";
140 | const previousActiveSectionClasses = firstRendering ? "active pane" : "pane";
141 |
142 | const currentPane = this.activeSection ? ({this.activeSection[renderViewToCall]()}
) : null;
143 | const previousUsedPane = this.previousActiveSection ? ({this.previousActiveSection[renderViewToCall]()}
) : null;
144 |
145 | return ({previousUsedPane}{currentPane}
);
146 | }
147 | }
148 |
149 | export = Sections;
150 |
--------------------------------------------------------------------------------
/src/js/sections/SurroundingsSection.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2019 Esri
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | *
16 | */
17 | import { subclass, property } from "esri/core/accessorSupport/decorators";
18 | import { tsx } from "esri/widgets/support/widget";
19 |
20 | import Section from "./Section";
21 | import AppState from "../AppState";
22 | import Collection from "esri/core/Collection";
23 | import WebScene from "esri/WebScene";
24 | import Camera from "esri/Camera";
25 | import Widget from "esri/widgets/Widget";
26 | import Toggle from "../widgets/Toggle/Toggle";
27 | import * as watchUtils from "esri/core/watchUtils";
28 | import FeatureLayer from "esri/layers/FeatureLayer";
29 | import GroupLayer from "esri/layers/GroupLayer";
30 | import * as appUtils from "../support/appUtils";
31 |
32 | @subclass("SurroundingsElement")
33 | class SurroundingsElement extends Widget {
34 | @property()
35 | toggle = new Toggle();
36 |
37 | @property({aliasOf: "toggle.active"})
38 | set active(isActive: boolean) {
39 | this.toggle.active = isActive;
40 | }
41 | get active() {
42 | return this.toggle.active;
43 | }
44 |
45 | @property()
46 | title: string;
47 |
48 | @property()
49 | layer: FeatureLayer | GroupLayer;
50 |
51 | @property()
52 | appState: AppState;
53 |
54 | @property()
55 | camera: Camera;
56 |
57 | activate() {
58 | this.appState.view.goTo(this.camera);
59 | if (this.layer) {
60 | this.layer.visible = true;
61 | }
62 | }
63 |
64 | deactivate() {
65 | if (this.layer) {
66 | this.layer.visible = false;
67 | }
68 | }
69 |
70 | content() {
71 | return ();
72 | }
73 |
74 | render() {
75 | return (
76 |
);
82 | }
83 |
84 | constructor(args: any) {
85 | super(args);
86 |
87 | if (args.content) {
88 | this.content = args.content.bind(this);
89 | }
90 |
91 | this.watch("active", (isActive) => {
92 | if (isActive) {
93 | this.activate();
94 | }
95 | else {
96 | this.deactivate();
97 | }
98 | });
99 | }
100 | }
101 |
102 | @subclass("PoIElement")
103 | class PoIElement extends Widget {
104 | @property()
105 | camera: Camera;
106 |
107 | @property()
108 | name: string;
109 |
110 | constructor(args: {name: string, camera: Camera, appState: AppState}) {
111 | super(args as any);
112 | }
113 |
114 | @property()
115 | appState: AppState;
116 |
117 | render() {
118 | return (
119 |
120 | );
121 | }
122 |
123 | onClick(event: Event) {
124 | this.appState.view.goTo(this.camera);
125 | }
126 | }
127 |
128 | @subclass("sections/SurroundingsSection")
129 | class SurroundingsSection extends Section {
130 | @property()
131 | title = "Surroundings";
132 |
133 | @property()
134 | appState: AppState;
135 |
136 | @property()
137 | id = "surroundings";
138 |
139 | @property()
140 | poiElements: Collectionthis.active = !this.active}> 77 | {this.toggle.render()} 78 | {this.title} 79 |
80 |{this.content()}
81 |
167 | {poiElementsItems.toArray()}
168 |
);
169 | }
170 | }));
171 | }
172 |
173 | return elements;
174 | }
175 | else {
176 | return new Collection
209 |
);
212 | }
213 |
214 | paneRight() {
215 | return ();
216 | }
217 |
218 | onEnter() {
219 | this.elements.forEach(el => el.active = el.title === "Points of Interest");
220 | }
221 |
222 | onLeave() {
223 | this.elements.forEach(e => e.active = false);
224 | }
225 | }
226 |
227 | export = SurroundingsSection;
228 |
--------------------------------------------------------------------------------
/src/js/sections/css/sections.scss:
--------------------------------------------------------------------------------
1 | @import "../../../css/variables.scss";
2 | @import "../../../css/mixins.scss";
3 |
4 | /***************
5 | Slide animation
6 | ****************/
7 |
8 | .side-container .pane {
9 | @include transition(all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.6s cubic-bezier(0.42,0,0.58,1));
10 | position: absolute;
11 | opacity: 0;
12 | top: 0;
13 | }
14 |
15 | .side-container.left .pane {
16 | left: -1000px;
17 | width: 390px;
18 | }
19 |
20 | .side-container.right .pane {
21 | right: -1000px;
22 | width: 190px;
23 | }
24 |
25 | .side-container.right .pane.active {
26 | right: 0;
27 | opacity: 1;
28 | }
29 |
30 | .side-container.left .pane.active {
31 | left: 0;
32 | opacity: 1;
33 | }
34 |
35 | .side-container.left .pane h1 {
36 | @include transition(margin 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55));
37 | margin-left: -200px;
38 | }
39 |
40 | .side-container.left .pane.active h1 {
41 | margin-left: 0;
42 | }
43 |
44 | .side-container.left .pane h2 {
45 | @include transition(margin 0.8s ease);
46 | margin-left: -200px;
47 | }
48 |
49 | .side-container.left .pane h2:nth-child(2) {
50 | @include transition(margin 0.8s ease 0.3s);
51 | }
52 |
53 | .side-container.left .pane h2:nth-child(3) {
54 | @include transition(margin 0.8s ease 0.6s);
55 | }
56 |
57 | .side-container.left .pane.active h2 {
58 | margin-left: 0;
59 | }
60 |
61 | /***************
62 | Surroundings
63 | ****************/
64 |
65 | #surroundings {
66 | .element {
67 | width: 100%;
68 | @include transition(margin 0.3s ease);
69 | margin-left: -200px;
70 |
71 | a {
72 | color: $primaryColor;
73 | vertical-align: -2px;
74 | margin-left: 20px;
75 | text-decoration: none;
76 | }
77 |
78 | &.active {
79 | a {
80 | color: $orange;
81 | }
82 | }
83 | }
84 |
85 | .slash-title.width-toggle {
86 | width: 100%;
87 |
88 | &::before {
89 | display: none;
90 | }
91 | }
92 |
93 | // .toggle {
94 | // border-color: $primaryColor;
95 |
96 | // .knob {
97 | // background-color: $primaryColor;
98 | // }
99 | // }
100 | }
101 |
102 | .active #surroundings {
103 | .element {
104 | margin-left: 0;
105 | }
106 |
107 | .element:nth-child(1) {
108 | @include transition-delay(0.2s);
109 | }
110 |
111 | .element:nth-child(2) {
112 | @include transition-delay(0.3s);
113 | }
114 |
115 | .element:nth-child(3) {
116 | @include transition-delay(0.4s);
117 | }
118 | }
119 |
120 | /***************
121 | Floors
122 | ****************/
123 |
124 | #floors {
125 | pointer-events: all;
126 | h1 {
127 | margin-left: 120px;
128 | // width:
129 | pointer-events: all;
130 | width: 600px;
131 | }
132 |
133 | h1.number {
134 | margin-left: 0;
135 | margin-top: 25px;
136 | color: $orange;
137 | }
138 |
139 | .level, .number {
140 | position: absolute;
141 | }
142 |
143 | .level {
144 | margin-top: 61px;
145 | z-index: 2;
146 | margin-left: 28px;
147 | opacity: 0.8;
148 | }
149 |
150 | .number {
151 | font-size: 200px;
152 | z-index: 1;
153 | }
154 |
155 | h3.subtitle {
156 | font-family: "Avenir Next";
157 | font-weight: normal;
158 | font-style: italic;
159 | font-size: 40px;
160 | letter-spacing: 8px;
161 | opacity: 0.3;
162 | margin-top: -30px;
163 | margin-left: 125px;
164 | pointer-events: all;
165 | }
166 |
167 | .italic {
168 | font-style: italic;
169 | opacity: 0.5;
170 | }
171 |
172 | .content {
173 | margin-top: 50px;
174 | }
175 |
176 | .play_button {
177 | $play_button_background: scale-color($primaryColor, $lightness: -70%);
178 | position: relative;
179 | background: $play_button_background;
180 | border: none;
181 | outline: none;
182 | padding: 6px;
183 | border-radius: 13px;
184 | cursor: pointer;
185 | margin-left: 5px;
186 | vertical-align: -2px;
187 | border: 1px solid $primaryColor;
188 |
189 | .play_button__icon {
190 | $size: 12px;
191 | height: $size;
192 | width: $size;
193 | line-height: $size;
194 | position: relative;
195 | left: 1px;
196 | z-index: 0;
197 | box-sizing: border-box;
198 | display: inline-block;
199 | overflow: hidden;
200 |
201 | &:before, &:after {
202 | content: '';
203 | position: absolute;
204 | transition: 0.3s;
205 | background: #FFF;
206 | height: 100%;
207 | width: 50%;
208 | top: 0;
209 | }
210 |
211 | &:before {
212 | left: 0;
213 | }
214 |
215 | &:after {
216 | right: 0;
217 | }
218 | }
219 |
220 | .play_button__mask {
221 | position: absolute;
222 | z-index: 1;
223 | left: 0;
224 | top: 0;
225 | width: 100%;
226 | height: 100%;
227 | display: block;
228 |
229 | &:before, &:after {
230 | content: '';
231 | position: absolute;
232 | left: 0;
233 | height: 100%;
234 | width: 150%;
235 | background: $play_button_background;
236 | transition: all 0.3s ease-out;
237 | }
238 |
239 | &:before {
240 | top: -100%;
241 | transform-origin: 0% 100%;
242 | transform: rotate(26.5deg);
243 | }
244 |
245 | &:after {
246 | transform-origin: 0% 0%;
247 | transform: rotate(-26.5deg);
248 | top: 100%;
249 | }
250 | }
251 |
252 | &.playing {
253 | .play_button__icon {
254 | left: 0;
255 |
256 | &:before {
257 | transform: translateX(-25%);
258 | }
259 |
260 | &:after {
261 | transform: translateX(25%);
262 | }
263 | }
264 |
265 | .play_button__mask {
266 | &:before, &:after {
267 | transform: rotate(0);
268 | }
269 | }
270 | }
271 | }
272 | }
273 |
274 | #floorLegend {
275 | position: absolute;
276 | bottom: 30px;
277 | left: 15px;
278 |
279 | &.hide {
280 | display: none;
281 | }
282 |
283 | div {
284 | background: transparent;
285 | color: #fff;
286 | font-size: 15px;
287 | line-height: 22px;
288 | }
289 |
290 | .esri-legend__layer-caption, .esri-widget__heading {
291 | display: none;
292 | }
293 |
294 | .esri-legend__layer-row {
295 | height: 28px;
296 | display: block;
297 | }
298 |
299 | svg {
300 | transform: scale(0.7);
301 | }
302 | }
303 |
304 | #surroundings {
305 | .active .content {
306 | display: block;
307 |
308 | a {
309 | color: #fff;
310 | }
311 |
312 | & > div {
313 | a {
314 | @include transition(all 0.8s);
315 | }
316 | svg {
317 | @include transition(all 0.8s);
318 | }
319 | }
320 |
321 | & > div:hover {
322 | a {
323 | color: #fff;
324 | }
325 |
326 | svg {
327 | opacity: 1;
328 | }
329 | }
330 | }
331 |
332 | .content {
333 | pointer-events: all;
334 | margin-top: -30px;
335 | font-size: 25px;
336 | line-height: 40px;
337 | margin-left: 25px;
338 | display: none;
339 |
340 |
341 |
342 | svg {
343 | width: 15px;
344 | opacity: 0.5;
345 | }
346 | }
347 | }
348 |
--------------------------------------------------------------------------------
/src/js/support/BuildingVisualisation.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2019 Esri
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | *
16 | */
17 | import { subclass, property } from "esri/core/accessorSupport/decorators";
18 |
19 | // Esri
20 | import Accessor from "esri/core/Accessor";
21 | import BuildingSceneLayer from "esri/layers/BuildingSceneLayer";
22 | import * as watchUtils from "esri/core/watchUtils";
23 | import Renderer from "esri/renderers/Renderer";
24 | import { createFilterFor, FLOOR_FILTER_NAME, definitionExpressions } from "./visualVariables";
25 |
26 | // App
27 | import AppState from "../AppState";
28 | import * as buildingSceneLayerUtils from "./buildingSceneLayerUtils";
29 |
30 | interface BuildingVisualisationCtorArgs {
31 | layer: BuildingSceneLayer;
32 | appState: AppState;
33 | customBaseRenderer?: any;
34 | floorMapping?: (originalFloor: number) => number;
35 | extraQuery?: string;
36 | }
37 |
38 | @subclass("support/BuildingVisualisation")
39 | class BuildingVisualisation extends Accessor {
40 | //--------------------------------------------------------------------------
41 | //
42 | // Properties
43 | //
44 | //--------------------------------------------------------------------------
45 | @property()
46 | layer: BuildingSceneLayer;
47 |
48 | private initialRenderer: HashMapSurroundings
210 | {this.elements.map(l => l.render()).toArray()} 211 |
58 |
);
61 | }
62 |
63 | private activeLevel(newLevel: number) {
64 | event.stopPropagation();
65 | this.activeFloor = newLevel;
66 | }
67 |
68 | constructor(args: FloorSelectorCtorArgs | FloorSelectorCtorArgs2) {
69 | super(args as any);
70 | }
71 | }
72 |
73 | export = FloorSelector;
74 |
--------------------------------------------------------------------------------
/src/js/widgets/FloorSelector/css/floorSelector.scss:
--------------------------------------------------------------------------------
1 | @use "sass:math";
2 | @import "../../../../css/variables.scss";
3 | @import "../../../../css/mixins.scss";
4 |
5 | $transition-time: 0.5s;
6 |
7 | .floor-selector {
8 | pointer-events: all;
9 |
10 | .level {
11 | font-family: 'Roboto Condensed', sans-serif; // import font!
12 | cursor: pointer;
13 | list-style: none;
14 | display: block;
15 | pointer-events: all;
16 | width: 100%;
17 | font-size: $floorSelectorLevelFontSize;
18 | text-align: right;
19 | @include transition(all $transition-time);
20 | margin-left: 200px;
21 |
22 | &:hover {
23 | font-size: $floorSelectorLevelOverFontSize;
24 | }
25 |
26 | &:first-child {
27 | margin-top: -$floorSelectorLevelFontSize - 15px;
28 | }
29 |
30 | &.active {
31 | font-size: $floorSelectorLevelActiveFontSize;
32 | margin-top: math.div(-$floorSelectorLevelActiveFontSize, 2) + 15px;
33 | margin-bottom: math.div(-$floorSelectorLevelActiveFontSize, 2) + 15px;
34 | color: #F6A803;
35 | text-transform: uppercase;
36 | pointer-events: all;
37 |
38 | &:first-child {
39 | margin-top: -$floorSelectorLevelActiveFontSize + 10px;
40 | }
41 | }
42 | }
43 | }
44 |
45 | .active .floor-selector {
46 | .level {
47 | margin-left: 0;
48 |
49 | &.active {
50 | margin-left: 15px;
51 | }
52 | }
53 |
54 | .level:nth-child(1) {
55 | @include transition(all $transition-time, margin-left 0.8s 0.1s);
56 | }
57 |
58 | .level:nth-child(2) {
59 | @include transition(all $transition-time, margin-left 0.8s 0.2s);
60 | }
61 |
62 | .level:nth-child(3) {
63 | @include transition(all $transition-time, margin-left 0.8s 0.3s);
64 | }
65 |
66 | .level:nth-child(4) {
67 | @include transition(all $transition-time, margin-left 0.8s 0.4s);
68 | }
69 |
70 | .level:nth-child(5) {
71 | @include transition(all $transition-time, margin-left 0.8s 0.5s);
72 | }
73 |
74 | .level:nth-child(6) {
75 | @include transition(all $transition-time, margin-left 0.8s 0.6s);
76 | }
77 |
78 | .level:nth-child(7) {
79 | @include transition(all $transition-time, margin-left 0.8s 0.7s);
80 | }
81 |
82 | .level:nth-child(8) {
83 | @include transition(all $transition-time, margin-left 0.8s 0.8s);
84 | }
85 |
86 | .level:nth-child(9) {
87 | @include transition(all $transition-time, margin-left 0.8s 0.9s);
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/src/js/widgets/Popup/Popup.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2019 Esri
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | *
16 | */
17 | import { subclass, property } from "esri/core/accessorSupport/decorators";
18 | import { tsx } from "esri/widgets/support/widget";
19 | import AppState from "../../AppState";
20 | import Widget from "esri/widgets/Widget";
21 |
22 | @subclass("widgets/Popup")
23 | class Popup extends Widget {
24 | @property({aliasOf: "appState.popupInfo.active"})
25 | active: boolean = false;
26 |
27 | @property({aliasOf: "appState.popupInfo.image"})
28 | image: string;
29 |
30 | @property({aliasOf: "appState.popupInfo.credit"})
31 | credit: string;
32 |
33 | @property()
34 | appState: AppState;
35 |
36 | constructor(args: {appState: AppState, container: string}) {
37 | super(args);
38 | }
39 |
40 | render() {
41 | const activeClass = {
42 | "active": this.active
43 | };
44 | const image = this.image ? (Select floor
59 |- {levels}
{this.credit}
{image}{credit}
);
47 | }
48 |
49 | private onClick(event: Event) {
50 | event.stopPropagation();
51 | this.active = false;
52 | }
53 | }
54 |
55 | export = Popup;
56 |
--------------------------------------------------------------------------------
/src/js/widgets/Popup/PopupInfo.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2019 Esri
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | *
16 | */
17 | import { subclass, property } from "esri/core/accessorSupport/decorators";
18 | import Accessor from "esri/core/Accessor";
19 |
20 | @subclass("PopupInfo")
21 | class PopupInfo extends Accessor {
22 | @property()
23 | image: string;
24 |
25 | @property()
26 | credit: string;
27 |
28 | @property()
29 | active: boolean = true;
30 | }
31 |
32 | export = PopupInfo;
33 |
--------------------------------------------------------------------------------
/src/js/widgets/Popup/css/popup.scss:
--------------------------------------------------------------------------------
1 | @import "../../../../css/variables.scss";
2 | @import "../../../../css/mixins.scss";
3 |
4 | #appDiv #popup {
5 | z-index: 100;
6 | position: absolute;
7 | width: 0%;
8 | height: 0%;
9 | overflow: hidden;
10 | left: 50%;
11 | top: 50%;
12 | background: #fff;
13 | opacity: 0;
14 | box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
15 | // display: none;
16 |
17 | @include transition(width 0.5s ease, height 0.5s ease, opacity 0.5s ease, left 0.5s ease, top 0.5s ease);
18 |
19 | & > img {
20 | width: 100%;
21 | }
22 |
23 | &.active {
24 | // display: block;
25 | width: 90%;
26 | height: 90%;
27 | left: 5%;
28 | top: 5%;
29 | opacity: 1;
30 | cursor: pointer;
31 | pointer-events: all;
32 | }
33 |
34 | .credit {
35 | position: absolute;
36 | width: 100%;
37 | bottom: -2px;
38 | background: rgba(0,0,0,0.5);
39 |
40 | & > div {
41 | margin: 10px 20px;
42 | }
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/js/widgets/Timetable/Timetable.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2019 Esri
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | *
16 | */
17 | import { subclass, property } from "esri/core/accessorSupport/decorators";
18 | import { tsx } from "esri/widgets/support/widget";
19 | import Widget from "esri/widgets/Widget";
20 | import Collection from "esri/core/Collection";
21 |
22 | const daysName = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
23 |
24 | interface TimetableCtorArgs {
25 | dates: Collection
68 |
);
71 | }
72 | else {
73 | return (Today
69 |{this.openDate.getHours()}:00 - {this.closeDate.getHours()}:00
70 |
74 |
);
77 | }
78 | }
79 |
80 | constructor(args: DayTimetableCtorArgs) {
81 | super(args as any);
82 | }
83 | }
84 |
85 | @subclass("widgets/Timetable")
86 | export class Timetable extends Widget {
87 | @property()
88 | today = new Date();
89 |
90 | @property()
91 | dates: Collection{daysName[this.openDate.getDay()]}
75 |{this.openDate.getHours()}:00 - {this.closeDate.getHours()}:00
76 | {knob}
);
32 | }
33 |
34 | private onClick(event: Event) {
35 | event.stopPropagation();
36 | this.active = (!this.active);
37 | }
38 | }
39 |
40 | export = Toggle;
41 |
--------------------------------------------------------------------------------
/src/js/widgets/Toggle/css/toggle.scss:
--------------------------------------------------------------------------------
1 | @use "sass:math";
2 | @import "../../../../css/variables.scss";
3 | @import "../../../../css/mixins.scss";
4 |
5 | $color: #a3a3a3;
6 | $size: 16px;
7 |
8 | .toggle {
9 | display: inline-block;
10 | width: 35px;
11 | height: $size;
12 | border-radius: $size;
13 | border: solid 1px $primaryColor;
14 | background: rgba(100,100,100,0.5);
15 | cursor: pointer;
16 |
17 | .knob {
18 | height: ($size - 2);
19 | width: ($size - 2);
20 | border-radius: math.div($size - 2, 2);
21 | margin-top: 1px;
22 | margin-left: 1px;
23 | background-color: $primaryColor;
24 |
25 | @include transition(all 0.3s);
26 | }
27 |
28 | &.active {
29 | border-color: $orange;
30 |
31 | .knob {
32 | margin-left: 19px;
33 | background-color: $orange;
34 | }
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/js/widgets/Viewpoints/OneViewpoint.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2019 Esri
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | *
16 | */
17 | import { subclass, property } from "esri/core/accessorSupport/decorators";
18 | import { tsx } from "esri/widgets/support/widget";
19 | import Slide from "esri/webscene/Slide";
20 | import AppState from "../../AppState";
21 | import Widget from "esri/widgets/Widget";
22 |
23 | @subclass("widgets/Viewpoints/Viewpoint")
24 | class OneViewpoint extends Widget {
25 | @property()
26 | slide: Slide;
27 |
28 | @property()
29 | appState: AppState;
30 |
31 | @property()
32 | active: boolean = false;
33 |
34 | render() {
35 | const activeClass = {
36 | "active": this.active
37 | };
38 | return (
62 |
) : null;
67 | }
68 |
69 | postInitialize() {
70 | (this.appState.view.map as WebScene).presentation.slides.on("change", () => this.notifyChange("slides"));
71 | this.slides.on("change", this.watchActiveSlide.bind(this));
72 | this.watchActiveSlide();
73 | }
74 |
75 | watchActiveSlide() {
76 | this.handles.removeAll();
77 | this.slides.forEach(s => {
78 | this.handles.add(
79 | watchUtils.init(s, "active", (active) => {
80 | if (active) {
81 | this.activeViewpoint = s;
82 | }
83 | }),
84 | "active"
85 | );
86 | });
87 | }
88 | }
89 |
90 | export = Viewpoints;
91 |
--------------------------------------------------------------------------------
/src/js/widgets/Viewpoints/css/viewpoints.scss:
--------------------------------------------------------------------------------
1 | @import "../../../../css/variables.scss";
2 | @import "../../../../css/mixins.scss";
3 |
4 | #appDiv .viewpoints {
5 | width: 300px;
6 | margin-left: -100px;
7 | pointer-events: all;
8 |
9 | h2.slash-title {
10 | margin-bottom: 20px;
11 | }
12 |
13 | & > div > div {
14 | height: 30px;
15 | }
16 |
17 | a {
18 | color: $viewpointItemColor;
19 | margin-left: 8px;
20 | text-decoration: none;
21 | }
22 |
23 | svg {
24 | width: 15px;
25 | opacity: 0.5;
26 | vertical-align: -2px;
27 | }
28 |
29 | .viewpoint {
30 | @include transition(all 0.5s);
31 | margin-left: 200px;
32 | font-family: 'Roboto Condensed', sans-serif; // import font!
33 | cursor: pointer;
34 | list-style: none;
35 | display: block;
36 | pointer-events: all;
37 | width: 100%;
38 | font-size: $viewpointItemFontSize;
39 | text-align: right;
40 |
41 | &:first-child {
42 | margin-top: 0;
43 | }
44 |
45 | &.active {
46 | font-size: $viewpointItemActiveFontSize;
47 | color: $viewpointItemActiveColor;
48 |
49 | &:first-child {
50 | margin-top: 0;
51 | }
52 |
53 | &:hover {
54 | color: $viewpointItemActiveColor;
55 | }
56 | }
57 |
58 | &:hover {
59 | font-size: $viewpointItemOverFontSize;
60 | color: $viewpointItemOverColor;
61 | }
62 | }
63 | }
64 |
65 |
66 | #appDiv .active .viewpoints {
67 | .viewpoint {
68 | margin-left: 0;
69 | }
70 |
71 | .viewpoint:nth-child(1) {
72 | @include transition(all 0.5s, margin-left 0.8s 0.1s);
73 | }
74 |
75 | .viewpoint:nth-child(2) {
76 | @include transition(all 0.5s, margin-left 0.8s 0.2s);
77 | }
78 |
79 | .viewpoint:nth-child(3) {
80 | @include transition(all 0.5s, margin-left 0.8s 0.3s);
81 | }
82 |
83 | .viewpoint:nth-child(4) {
84 | @include transition(all 0.5s, margin-left 0.8s 0.4s);
85 | }
86 |
87 | .viewpoint:nth-child(5) {
88 | @include transition(all 0.5s, margin-left 0.8s 0.5s);
89 | }
90 | }
91 |
--------------------------------------------------------------------------------
/src/js/widgets/widgets.scss:
--------------------------------------------------------------------------------
1 | @import url("./Toggle/css/toggle.css");
2 | @import url("./FloorSelector/css/floorSelector.css");
3 | @import url("./Timetable/css/timetable.css");
4 | @import url("./Viewpoints/css/viewpoints.css");
5 | @import url("./Popup/css/popup.css");
6 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "esModuleInterop": true,
4 | "experimentalDecorators": true,
5 | "inlineSourceMap": false,
6 | "jsx": "react",
7 | "lib": [ "dom", "es2015", "scripthost" ],
8 | "module": "amd",
9 | "importHelpers": true,
10 | "noEmitHelpers": true,
11 | "noEmitOnError": true,
12 | "noImplicitAny": true,
13 | "noImplicitThis": true,
14 | "noImplicitUseStrict": true,
15 | "noUnusedLocals": true,
16 | "jsxFactory": "tsx",
17 | "suppressImplicitAnyIndexErrors": true,
18 | "target": "es5",
19 | "baseUrl": ".",
20 | "moduleResolution": "node",
21 | "types": [
22 | "dojo",
23 | "./typings/arcgis-js-api-4.20"
24 | ]
25 | },
26 | "include": [
27 | "./src/js/**/*"
28 | ],
29 | "exclude": [
30 | "node_modules",
31 | "typings"
32 | ]
33 | }
34 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | "align": false,
4 | "ban": false,
5 | "class-name": true,
6 | "comment-format": false,
7 | "curly": true,
8 | "eofline": true,
9 | "forin": false,
10 | "indent": [
11 | true,
12 | "spaces"
13 | ],
14 | "interface-name": false,
15 | "jsdoc-format": true,
16 | "label-position": true,
17 | "max-line-length": false,
18 | "member-access": false,
19 | "member-ordering": false,
20 | "no-any": false,
21 | "no-arg": true,
22 | "no-bitwise": false,
23 | "no-conditional-assignment": false,
24 | "no-console": false,
25 | "no-consecutive-blank-lines": false,
26 | "no-construct": true,
27 | "no-debugger": true,
28 | "no-default-export": false,
29 | "no-duplicate-variable": true,
30 | "no-empty": false,
31 | "no-eval": true,
32 | "no-inferrable-types": true,
33 | "no-internal-module": true,
34 | "no-require-imports": false,
35 | "no-shadowed-variable": false,
36 | "no-string-literal": false,
37 | "no-switch-case-fall-through": false,
38 | "no-trailing-whitespace": false,
39 | "no-unused-expression": false,
40 | "no-use-before-declare": false,
41 | "no-var-keyword": true,
42 | "no-var-requires": false,
43 | "one-line": [
44 | true,
45 | "check-open-brace",
46 | "check-whitespace"
47 | ],
48 | "quotemark": [
49 | true,
50 | "double"
51 | ],
52 | "radix": true,
53 | "semicolon": [
54 | true,
55 | "always"
56 | ],
57 | "switch-default": false,
58 | "trailing-comma": [
59 | true,
60 | {
61 | "multiline": "never",
62 | "singleline": "never"
63 | }
64 | ],
65 | "triple-equals": [
66 | true,
67 | "allow-null-check"
68 | ],
69 | "typedef": false,
70 | "typedef-whitespace": [
71 | true,
72 | {
73 | "call-signature": "nospace",
74 | "index-signature": "nospace",
75 | "parameter": "nospace",
76 | "property-declaration": "nospace",
77 | "variable-declaration": "nospace"
78 | },
79 | {
80 | "call-signature": "onespace",
81 | "index-signature": "onespace",
82 | "parameter": "onespace",
83 | "property-declaration": "onespace",
84 | "variable-declaration": "onespace"
85 | }
86 | ],
87 | "variable-name": false,
88 | "whitespace": [
89 | true,
90 | "check-branch",
91 | "check-decl",
92 | "check-operator",
93 | "check-module",
94 | "check-separator",
95 | "check-type",
96 | "check-typecast"
97 | ]
98 | }
99 | }
--------------------------------------------------------------------------------
Point of view
63 |-
64 | {items}
65 |