/* * Copyright 2019 Esri * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * */ import { subclass, property } from "esri/core/accessorSupport/decorators"; import { tsx } from "esri/widgets/support/widget"; import Collection from "esri/core/Collection"; import Section from "./Section"; import AppState from "../AppState"; type SectionSubclass = Pick; @subclass("sections/Section") class Sections extends Collection { //-------------------------------------------------------------------------- // // Properties // //-------------------------------------------------------------------------- @property() set activeSection(sectionToActivate: SectionSubclass) { if (sectionToActivate !== this._get("activeSection")) { this.previousActiveSection = this.activeSection; if (this.previousActiveSection) { this.previousActiveSection.onLeave(); } this.forEach(section => { if (section !== sectionToActivate) { section.active = false; } else { section.active = true; } }); this.appState.pageLocation = sectionToActivate ? sectionToActivate.id : null; this._set("activeSection", sectionToActivate); if (this.activeSection) { this.activeSection.onEnter(); } } if (this.activeSection.camera) { this.emit("go-to", this.activeSection.camera); } } @property({ constructOnly: true}) private appState: AppState; //-------------------------------------------------------------------------- // // Variables // //-------------------------------------------------------------------------- previousActiveSection: SectionSubclass = null; activeSectionNode: HTMLElement = null; previousActiveSectionNode: HTMLElement = null; //-------------------------------------------------------------------------- // // Life circle // //-------------------------------------------------------------------------- constructor(sections: SectionSubclass[], appState: AppState) { super(sections.map((section) => { section.appState = appState; return section; })); this.appState = appState; this.watch("appState.pageLocation", this.activateSection); } //-------------------------------------------------------------------------- // // Public methods // //-------------------------------------------------------------------------- activateSection(section: string | number | SectionSubclass) { if (section instanceof Section) { this.activeSection = section; } if (typeof section === "string") { this.activeSection = this.find((s) => s.id === section); } if (typeof section === "number") { this.activeSection = this.getItemAt(section); } } public paneLeft(firstRendering = true) { const panes = this.swapPanes("render", firstRendering); return (
{panes}
); } public paneRight(firstRendering = true) { const panes = this.swapPanes("paneRight", firstRendering); return (
{panes}
); } public menu() { let items = this.map((section, i) => { const slash = i !== 0 ? (/ ) : null; return [slash, this.renderOneSectionMenu(section, i)]; }); return (); } private renderOneSectionMenu(section: SectionSubclass, i: number) { const classes = section.active? "active" : ""; return ( {this.activateSection(section.id);}}>{section.title}); } private swapPanes(renderViewToCall: string, firstRendering = true) { const activeSectionClasses = firstRendering ? "pane" : "active pane"; const previousActiveSectionClasses = firstRendering ? "active pane" : "pane"; const currentPane = this.activeSection ? (
{this.activeSection[renderViewToCall]()}
) : null; const previousUsedPane = this.previousActiveSection ? (
{this.previousActiveSection[renderViewToCall]()}
) : null; return (
{previousUsedPane}{currentPane}
); } } export = Sections;