Skip to content

Commit

Permalink
Added resizable TOC column support
Browse files Browse the repository at this point in the history
Merged changes from J. Ritchie Carroll to support a resizable TOC column.  Added a new ResizableTocColumn transformation argument to allow it to be enabled.
  • Loading branch information
EWSoftware committed Jul 4, 2023
1 parent e446e6d commit 48faed9
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 11 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// System : Sandcastle Tools Standard Presentation Styles
// File : Default2022Transformation.cs
// Author : Eric Woodruff ([email protected])
// Updated : 02/18/2023
// Updated : 07/04/2023
// Note : Copyright 2022-2023, Eric Woodruff, All rights reserved
//
// This file contains the class used to generate a MAML or API HTML topic from the raw topic XML data for the
Expand All @@ -18,7 +18,7 @@
// 03/16/2022 EFW Created the code
//===============================================================================================================

// Ignore Spelling: fa
// Ignore Spelling: fa resizer

using System;
using System.Collections.Generic;
Expand Down Expand Up @@ -76,6 +76,12 @@ public Default2022Transformation(Default2022PresentationStyle presentationStyle)
/// </summary>
private string RootBreadcrumbTitleText => this.TransformationArguments[nameof(RootBreadcrumbTitleText)].Value;

/// <summary>
/// Enable the resizable table of contents column
/// </summary>
private bool ResizableTocColumn => Boolean.TryParse(this.TransformationArguments[nameof(ResizableTocColumn)].Value,
out bool resizableTocColumn) && resizableTocColumn;

/// <summary>
/// Render collapsible sections
/// </summary>
Expand Down Expand Up @@ -198,8 +204,10 @@ protected override void CreateTransformationArguments()
"Sandcastle MAML Guide or XML Comments Guide."),
new TransformationArgument(nameof(RootBreadcrumbTitleText), true, true, "Docs", "Specify the " +
"text to use for the root breadcrumb's title. The default if blank is \"Docs\"."),
new TransformationArgument(nameof(ResizableTocColumn), true, true, "False", "Indicate whether " +
"or not to enable the resizable table of contents column. True to enable it, false if not."),
new TransformationArgument(nameof(CollapsibleSections), true, true, "True", "Indicate whether " +
"whether or not collapsible sections are rendered. True to include them, false if not."),
"or not collapsible sections are rendered. True to include them, false if not."),
new TransformationArgument(nameof(LogoFile), true, true, null,
"An optional logo file to insert into the topic headers. Specify the filename only, omit " +
"the path.\r\n\r\n" +
Expand Down Expand Up @@ -613,14 +621,27 @@ protected override XDocument RenderTopic()
$"href=\"{this.StyleSheetPath + Path.GetFileName(localeSpecificStyleSheet)}\" />";
}

string resizableTocStyle = String.Empty, resizerStyle = "is-hidden", resizableContentStyle = String.Empty;

if(this.ResizableTocColumn)
{
resizableTocStyle = " toc-resizable";
resizerStyle = "toc-resizer";
resizableContentStyle = " toc-resizable-content";
}

pageTemplate = LoadTemplateFile(this.TopicTemplatePath, new[] {
("{@Locale}", this.Locale),
("{@LocaleLowercase}", this.Locale.ToLowerInvariant()),
("{@IconPath}", this.IconPath),
("{@StyleSheetPath}", this.StyleSheetPath),
("{@LocaleSpecificStyleSheet}", localeSpecificStyleSheet),
("{@ScriptPath}", this.ScriptPath),
("{@DefaultLanguage}", this.DefaultLanguage) });
("{@DefaultLanguage}", this.DefaultLanguage),
("{@ResizableTocStyle}", resizableTocStyle),
("{@ResizerStyle}", resizerStyle),
("{@ResizableContentStyle}", resizableContentStyle),
});
}

// Set the default language and connect the language-specific text, and language filter on startup
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -118,20 +118,22 @@
</ul>
</nav>

<div class="columns pl-5 pr-5 fixedContent">
<div id="ContentContainer" class="columns pl-5 pr-5 fixedContent">
<div id="ShowHideTOCColumn" class="column is-hidden-tablet">
<a id="ShowHideTOC"><include item="showHideTOC" /></a>
</div>

<div id="TOCColumn" class="column is-hidden-mobile">
<div id="TOCColumn" class="column is-hidden-mobile{@ResizableTocStyle}">
<nav class="toc">
<ul id="TableOfContents" class="toc-menu">
<!-- TOC entries will be added client-side from the TOC fragment file -->
</ul>
</nav>
</div>

<div id="TopicContent" class="column content is-7">
<div id="Resizer" class="{@ResizerStyle}"></div>

<div id="TopicContent" class="column content is-7{@ResizableContentStyle}">
<!-- Topic content will go here -->
</div>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -401,3 +401,21 @@ sup.citation a:link a:visited a:active {
.toc-menu li a.has-submenu {
margin-left: -1.75em;
}

/* Resizable TOC styles */
.toc-resizable {
flex-basis: initial;
flex-grow: 0.25;
}

.toc-resizer {
cursor: ew-resize;
width: 5px;
background: #e6e6e6;
margin-top: 8px;
margin-bottom: 12px;
}

.toc-resizable-content {
flex-grow: 1;
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
// System : Sandcastle Help File Builder
// File : presentationStyle.js
// Author : Eric Woodruff ([email protected])
// Updated : 08/13/2022
// Note : Copyright 2014-2022, Eric Woodruff, All rights reserved
// Portions Copyright 2010-2022 Microsoft, All rights reserved
// Updated : 07/04/2023
// Note : Copyright 2014-2023, Eric Woodruff, All rights reserved
// Portions Copyright 2010-2023 Microsoft, All rights reserved
//
// This file contains the methods necessary to implement the language filtering, collapsible section, and
// copy to clipboard options.
Expand All @@ -19,7 +19,7 @@
// 05/04/2014 EFW Created the code based on the MS Help Viewer script
//===============================================================================================================

// Ignore Spelling: fti json
// Ignore Spelling: fti json Resizer mousedown mouseup mousemove

//===============================================================================================================
// This section contains the methods used to implement the language filter
Expand Down Expand Up @@ -684,3 +684,44 @@ function SearchForKeywords(keywords, fileInfo, wordDictionary, sortByTitle)

return content;
}

//===============================================================================================================
// This section contains the methods used to handle resizing the TOC section.
// Changes made by J. Ritchie Carroll.

var resizer, tocDiv;

window.onload = function ()
{
resizer = document.getElementById("Resizer");
tocDiv = document.getElementById("TOCColumn");

resizer.addEventListener("mousedown", function (e)
{
e.preventDefault();
document.addEventListener("mousemove", ResizerMouseMove);
document.addEventListener("mouseup", ResizerMouseUp);
});
}

function ResizerMouseMove(e)
{
const container = document.getElementById("ContentContainer");
const containerRect = container.getBoundingClientRect();
const newWidth = e.clientX - containerRect.left - 80;

// Ensure that divs are not smaller than some arbitrary minimal width
const minWidth = 50; // pixels
const contentDivWidth = containerRect.width - newWidth;

if(newWidth > minWidth && contentDivWidth > minWidth)
{
tocDiv.style.width = newWidth + 'px';
}
}

function ResizerMouseUp()
{
document.removeEventListener("mousemove", ResizerMouseMove);
document.removeEventListener("mouseup", ResizerMouseUp);
}

0 comments on commit 48faed9

Please sign in to comment.