Topic

Back To Home

Back to Mapboard Topic Panel wiki

Topic

Topics are a division of the app that holds other components from phila-vue-comps.

A set of "closed" Topics look like this:

An "open" Topic looks like this:

How it works

Topics hold other components. This is done flexibly by having the topic include a TopicComponentGroup, which can provide all of those components:

<transition name="topic-body">
  <div class="topic-body"
       v-if="shouldShowBody"
       :data-topic-key="topicKey"
  >
    <topic-component-group :topic-components="topic.components" />
  </div>
</transition>

In a Vue template

Topics should only be added as a set. The phila-vue-comps component TopicSet does this. It includes:

<topic v-for="topic in this.$config.topics"
       :topicKey="topic.key"
       :key="topic.key"
/>

Right now the only way to work with a topic set is to use a config. This could be amended so that it uses a config if there is one, or the info could be written in another way.

The "handle-topic-header-click" Event

There is a function in @philly/vue-datafetch which can be called by any component which uses the Topic component:

handleTopicHeaderClick(nextTopic) {
  this.$controller.handleTopicHeaderClick(nextTopic);
}

In a Mapboard config file

In a Mapboard-based app, Topics are written into a config, as in this description of a Topics Configuration.

These Topics are then created for each topic in the config, when you include a TopicSet component in your main.js:

components: [
  {
    type: 'topic-set',
    options: {
      defaultTopic: 'property'
    }
  },
],

The components that you put into the config will be created/mounted when the topic is opened, because of the TopicComponentGroup in the Topic template.

option	definition	required?
key	a key for the topic	yes
icon	a font-awesome icon, which has to be imported in main.js	no
label	the topic name in the site	no
dataSources	the topic will not be openable until this datasource resolves	no
showTopicBasedOnOtherData	sets conditions, based on datasources not in the topic, which will hide it	no
showTopicOnlyIfDataExists	sets conditions, based on datasources in the topic, which will hide it	no
components	an array of components	no
identifyFeature	sets the type of feature on a map that the topic requires	no
parcel	sets the type of parcel the topic refers to	no