Additional side pane toggle/widow in Playlist Story Map

[AlissaPump]

Hi,

I am fairly new to programming and am looking to insert an additional side pane content window to the already existing two (description and playlist) windows in the playlist template. 
[ATTACH=CONFIG]33751[/ATTACH]
I would like to use this window to insert a graph (I can add one with the description text but would like it as a separate entity).

Any help is greatly appreciated!

[StephenSylvia]

The first step is to download the developer version of the app from GitHub and set up computer with the appropriate build/test tools.

Then you will need to add the html elements for both the button and graph to the index.html.erb file:

The button should go within this group (around line 15)

<div id="side-pane-controls" class="region-top">
<span class="icon-open-book playlist-control toggle-description" title="Toggle Description"></span>
<span class="icon-list-2 playlist-control toggle-legend" title="Toggle Legend"></span>
<span class="icon-graph-pie playlist-control toggle-graph" title="Toggle Graph"></span>
<span class="icon-left-arrow playlist-control toggle-side-pane" title="Minimize list"></span>
<span class="icon-right-arrow playlist-control toggle-side-pane" title="Maximize list"></span>
</div>

Then add the element for your graph (around line 30)

<div id="description"></div>
<div id="legend-pane">
<div id="playlist-legend" class="legend"></div>
<div id="legend" class="legend"></div>
</div>
<div id="graph-pane"><!--Add additional components as needed--></div>
<div class="mobile-explore">



Next in the Core.js file (app/javascript/playlist/core/Core.js) you will need to add the events to enable the toggling and hide the additional hide the pane as needed.

At the bottom you file you will see the following (add what's in red):

function addSidePaneEvents()
{
$(".playlist-control").click(function(){
if ($(this).hasClass("toggle-side-pane")){
$("#side-pane").toggleClass("minimized");
}
else if ($(this).hasClass("toggle-legend")){
$("body").toggleClass("show-legend");
if ($("body").hasClass("show-description")){
$("body").removeClass("show-description");
}
if ($("body").hasClass("show-graph")){
$("body").removeClass("show-graph");
}
}
else if ($(this).hasClass("toggle-description")){
$("body").toggleClass("show-description");
if ($("body").hasClass("show-legend")){
$("body").removeClass("show-legend");
}
if ($("body").hasClass("show-graph")){
$("body").removeClass("show-graph");
}
}
else if ($(this).hasClass("toggle-graph")){
$("body").toggleClass("show-graph");
if ($("body").hasClass("show-legend")){
$("body").removeClass("show-legend");
}
if ($("body").hasClass("show-description")){
$("body").removeClass("show-description");
}
}
Helper.resetRegionLayout();
});
}


Then you will need to edit the _sidePane.scss (app/stylesheets/playlist/ui/_sidePane.scss) file to make sure the pane hide/shows at the appropriate time and matches the styling of the other panes:

At line 48, add the show-graph id

#description, #show-graph, .playlist-no-layer-message{
display: none;
padding: 15px;
font: {
family: $body-font;
size: 1em;
}
line-height: 1.2;
}

At line 69, add the class for the toggle button:

.toggle-description, .toggle-legend, .toggle-graph{
float: left;
}

The set it to be displayed when the body has the show-graph class (line 88)

body{

&.show-legend #legend-pane{
display: block;
}

&.show-description #description{
display: block;
}

&.show-graph #graph-pane{
display: block;
}

}

Then hide the button when the pane is minimized (around line 230)

.minimized{

.toggle-description, .toggle-legend, .toggle-graph{
display: none;
}

[AlissaPump]

Thank you so much for providing a quick response!

I began editing the text and I believe I just need to add the image of the graph correct?

[StephenSylvia]

Yes, the code I provided just gives you an empty pane. Any elements with the pane or associated styling/scripting you will need to add.

[AlissaPump]

I have been playing around with parameters and for some reason when clicking on the graph toggle, nothing happens. (A new side pane is not generated)  I tested the code without adding the graph image, had this error but figured it was due to nothing being generated in the graph-pane.

Do I need to add any additional codes elsewhere for this to work?

Here is the link to my map:
http://www.gisconsortium.org/webapps/storymaps/mgp/InteractiveHistory/deploy/index.html

[StephenSylvia]

It looks like the JavaScript isn't running when you click the graph icon.

Did you add the section of code to the Core.js file. You will also need to rebuild your app to include the JavaScript changes in the Playlist-viewer.min.js file.