Routable Panels

Questions
1

I am using router for popups I am having 2 issues:

  1. My toolbar(located in index.html) is not viewable in popup so I’ve added it again in my content: ‘’ , not sure if this is correct, it works but would prefer not to have duplicate content to maintain.

  2. I cannot open the modal using: app.popup.open(’#popup-logged-success’, true); need to open in programatically as it depends on the success of another function.

    {
 path: '/popup-logged-success/',
 popup: {
 	content: `
 	<div id="popup-logged-success"  class="success-popup popup popup-tablet-fullscreen">
 		<div class="view">
 			<div class="page">
 				<div class="full-page">
 					<a href="#" class="link popup-close back-arrow"></a>
 					<div class="success-msg">
 						<p>
 						Thanks *******<br>
 						You can view the progress<br>
 						of your call through<br>
 						the Activity Tab
 						</p>
 					</div>
 				</div>
 			</div>

 			<div class="toolbar toolbar-bottom main-toolbar no-shadow">
 				<div class="toolbar-inner">
 					<a href="/log-call/" class="link log-call">Log Call</a>
 					<a href="/activity-overview/" class="link activity">Activity</a>                       
 					<a href="/contact/" class="link msgs">Contact</a>
 				</div>
 			</div>

 		</div>
 	</div>`
     }
 },
2

In order to avoid duplication, first create a name of the html content that you dont want to duplicate and register it in the template7-helpers-list.js file:

module.exports = [‘toolbarContent’]

Then in the index.js file, before app initialization, register the content as a template7 partial:

import Template7 from ‘Template7’;

Template7.registerPartial(‘toolbarContent’, `
    <div class="toolbar toolbar-bottom main-toolbar no-shadow">
 				<div class="toolbar-inner">
 					<a href="/log-call/" class="link log-call">Log Call</a>
 					<a href="/activity-overview/" class="link activity">Activity</a>                       
 					<a href="/contact/" class="link msgs">Contact</a>
 				</div>
 			</div>
`)

Then you can call this partial anywhere you need it in your html components;

{{>”toolbarContent”}}
3
  1. Also to open a popup you need to initialize it before opening. So:
app.popup.create({
    el: “#popup-logged-success”
})

Then later when you need it you can open it