pict-docuserve 0.0.1

package/source/providers/PictRouter-Docuserve-Configuration.json

@@ -0,0 +1,26 @@
+{
+	"ProviderIdentifier": "Pict-Router",
+
+	"AutoInitialize": true,
+	"AutoInitializeOrdinal": 0,
+
+	"Routes":
+	[
+		{
+			"path": "/Home",
+			"template": "{~LV:Pict.PictApplication.showView(`Docuserve-Splash`)~}"
+		},
+		{
+			"path": "/doc/:group/:module",
+			"template": "{~LV:Pict.PictApplication.navigateToModule(Record.data.group,Record.data.module)~}"
+		},
+		{
+			"path": "/doc/:group/:module/:path",
+			"template": "{~LV:Pict.PictApplication.navigateToModulePath(Record.data.group,Record.data.module,Record.data.path)~}"
+		},
+		{
+			"path": "/page/:docpath",
+			"template": "{~LV:Pict.PictApplication.navigateToPage(Record.data.docpath)~}"
+		}
+	]
+}

package/source/views/PictView-Docuserve-Content.js

@@ -0,0 +1,208 @@
+const libPictView = require('pict-view');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: "Docuserve-Content",
+
+	DefaultRenderable: "Docuserve-Content-Display",
+	DefaultDestinationAddress: "#Docuserve-Content-Container",
+
+	AutoRender: false,
+
+	CSS: /*css*/`
+		.docuserve-content {
+			padding: 2em 3em;
+			max-width: 900px;
+			margin: 0 auto;
+		}
+		.docuserve-content-loading {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			min-height: 200px;
+			color: #999;
+			font-size: 1em;
+		}
+		.docuserve-content h1 {
+			font-size: 2em;
+			color: #2c3e50;
+			border-bottom: 1px solid #eee;
+			padding-bottom: 0.3em;
+			margin-top: 0;
+		}
+		.docuserve-content h2 {
+			font-size: 1.5em;
+			color: #2c3e50;
+			border-bottom: 1px solid #f0f0f0;
+			padding-bottom: 0.25em;
+			margin-top: 1.5em;
+		}
+		.docuserve-content h3 {
+			font-size: 1.25em;
+			color: #333;
+			margin-top: 1.25em;
+		}
+		.docuserve-content h4, .docuserve-content h5, .docuserve-content h6 {
+			color: #555;
+			margin-top: 1em;
+		}
+		.docuserve-content p {
+			line-height: 1.7;
+			color: #444;
+			margin: 0.75em 0;
+		}
+		.docuserve-content a {
+			color: #42b983;
+			text-decoration: none;
+		}
+		.docuserve-content a:hover {
+			text-decoration: underline;
+		}
+		.docuserve-content pre {
+			background: #2c3e50;
+			color: #ecf0f1;
+			padding: 1.25em;
+			border-radius: 6px;
+			overflow-x: auto;
+			line-height: 1.5;
+			font-size: 0.9em;
+		}
+		.docuserve-content code {
+			background: #f4f4f5;
+			padding: 0.15em 0.4em;
+			border-radius: 3px;
+			font-size: 0.9em;
+			color: #e74c3c;
+		}
+		.docuserve-content pre code {
+			background: none;
+			padding: 0;
+			color: inherit;
+			font-size: inherit;
+		}
+		.docuserve-content blockquote {
+			border-left: 4px solid #42b983;
+			margin: 1em 0;
+			padding: 0.5em 1em;
+			background: #f9f9f9;
+			color: #666;
+		}
+		.docuserve-content blockquote p {
+			margin: 0.25em 0;
+		}
+		.docuserve-content ul, .docuserve-content ol {
+			padding-left: 2em;
+			line-height: 1.8;
+		}
+		.docuserve-content li {
+			margin: 0.25em 0;
+			color: #444;
+		}
+		.docuserve-content hr {
+			border: none;
+			border-top: 1px solid #eee;
+			margin: 2em 0;
+		}
+		.docuserve-content table {
+			width: 100%;
+			border-collapse: collapse;
+			margin: 1em 0;
+		}
+		.docuserve-content table th {
+			background: #f5f7fa;
+			border: 1px solid #e0e0e0;
+			padding: 0.6em 0.8em;
+			text-align: left;
+			font-weight: 600;
+			color: #2c3e50;
+		}
+		.docuserve-content table td {
+			border: 1px solid #e0e0e0;
+			padding: 0.5em 0.8em;
+			color: #444;
+		}
+		.docuserve-content table tr:nth-child(even) {
+			background: #fafafa;
+		}
+		.docuserve-content img {
+			max-width: 100%;
+			height: auto;
+		}
+		.docuserve-not-found {
+			text-align: center;
+			padding: 3em 1em;
+			color: #666;
+		}
+		.docuserve-not-found h2 {
+			color: #999;
+			font-size: 1.5em;
+			border-bottom: none;
+		}
+		.docuserve-not-found code {
+			background: #f4f4f5;
+			padding: 0.15em 0.4em;
+			border-radius: 3px;
+			font-size: 0.9em;
+			color: #e74c3c;
+		}
+	`,
+
+	Templates:
+	[
+		{
+			Hash: "Docuserve-Content-Template",
+			Template: /*html*/`
+<div class="docuserve-content" id="Docuserve-Content-Body">
+	<div class="docuserve-content-loading">Loading documentation...</div>
+</div>
+`
+		}
+	],
+
+	Renderables:
+	[
+		{
+			RenderableHash: "Docuserve-Content-Display",
+			TemplateHash: "Docuserve-Content-Template",
+			DestinationAddress: "#Docuserve-Content-Container",
+			RenderMethod: "replace"
+		}
+	]
+};
+
+class DocuserveContentView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	/**
+	 * Display parsed HTML content in the content area.
+	 *
+	 * @param {string} pHTMLContent - The HTML to display
+	 */
+	displayContent(pHTMLContent)
+	{
+		this.pict.ContentAssignment.assignContent('#Docuserve-Content-Body', pHTMLContent);
+
+		// Scroll to top of content area
+		let tmpContentContainer = document.getElementById('Docuserve-Content-Container');
+		if (tmpContentContainer)
+		{
+			tmpContentContainer.scrollTop = 0;
+		}
+	}
+
+	/**
+	 * Show a loading indicator.
+	 */
+	showLoading()
+	{
+		this.pict.ContentAssignment.assignContent('#Docuserve-Content-Body', '<div class="docuserve-content-loading">Loading documentation...</div>');
+	}
+}
+
+module.exports = DocuserveContentView;
+
+module.exports.default_configuration = _ViewConfiguration;

package/source/views/PictView-Docuserve-Layout.js

@@ -0,0 +1,105 @@
+const libPictView = require('pict-view');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: "Docuserve-Layout",
+
+	DefaultRenderable: "Docuserve-Layout-Shell",
+	DefaultDestinationAddress: "#Docuserve-Application-Container",
+
+	AutoRender: false,
+
+	CSS: /*css*/`
+		#Docuserve-Application-Container {
+			display: flex;
+			flex-direction: column;
+			height: 100vh;
+			overflow: hidden;
+		}
+		#Docuserve-TopBar-Container {
+			flex-shrink: 0;
+		}
+		.docuserve-body {
+			display: flex;
+			flex: 1;
+			min-height: 0;
+		}
+		#Docuserve-Sidebar-Container {
+			flex-shrink: 0;
+			width: 280px;
+			overflow-y: auto;
+		}
+		#Docuserve-Content-Container {
+			flex: 1;
+			min-width: 0;
+			overflow-y: auto;
+		}
+	`,
+
+	Templates:
+	[
+		{
+			Hash: "Docuserve-Layout-Shell-Template",
+			Template: /*html*/`
+<div id="Docuserve-TopBar-Container"></div>
+<div class="docuserve-body">
+	<div id="Docuserve-Sidebar-Container"></div>
+	<div id="Docuserve-Content-Container"></div>
+</div>
+`
+		}
+	],
+
+	Renderables:
+	[
+		{
+			RenderableHash: "Docuserve-Layout-Shell",
+			TemplateHash: "Docuserve-Layout-Shell-Template",
+			DestinationAddress: "#Docuserve-Application-Container",
+			RenderMethod: "replace"
+		}
+	]
+};
+
+class DocuserveLayoutView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent)
+	{
+		// After the layout shell is rendered, render the child views into their containers
+		this.pict.views['Docuserve-TopBar'].render();
+		this.pict.views['Docuserve-Sidebar'].render();
+
+		// Show the splash screen initially
+		this.pict.views['Docuserve-Splash'].render();
+
+		// Inject all view CSS into the PICT-CSS style element
+		this.pict.CSSMap.injectCSS();
+
+		// Resolve the current hash on initial load
+		this.pict.PictApplication.resolveHash();
+
+		// Listen for hash changes so that plain <a href="#/..."> links trigger
+		// navigation.  This covers sidebar links, splash action buttons,
+		// in-content links, and browser back/forward navigation.
+		if (!this._HashChangeListenerBound)
+		{
+			this._HashChangeListenerBound = true;
+			let tmpSelf = this;
+			window.addEventListener('hashchange', () =>
+			{
+				tmpSelf.pict.PictApplication.resolveHash();
+			});
+		}
+
+		return super.onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent);
+	}
+}
+
+module.exports = DocuserveLayoutView;
+
+module.exports.default_configuration = _ViewConfiguration;

package/source/views/PictView-Docuserve-Sidebar.js

@@ -0,0 +1,362 @@
+const libPictView = require('pict-view');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: "Docuserve-Sidebar",
+
+	DefaultRenderable: "Docuserve-Sidebar-Content",
+	DefaultDestinationAddress: "#Docuserve-Sidebar-Container",
+
+	AutoRender: false,
+
+	CSS: /*css*/`
+		.docuserve-sidebar {
+			background-color: #f8f9fa;
+			border-right: 1px solid #e0e0e0;
+			padding: 1em 0;
+			height: 100%;
+			position: relative;
+		}
+		.docuserve-sidebar-close {
+			position: absolute;
+			top: 0.5em;
+			right: 0.5em;
+			background: none;
+			border: none;
+			color: #999;
+			font-size: 1.2em;
+			cursor: pointer;
+			padding: 0.2em 0.4em;
+			line-height: 1;
+		}
+		.docuserve-sidebar-close:hover {
+			color: #42b983;
+		}
+		.docuserve-sidebar-search {
+			padding: 0 1em 1em 1em;
+			border-bottom: 1px solid #e9ecef;
+			margin-bottom: 0.5em;
+		}
+		.docuserve-sidebar-search input {
+			width: 100%;
+			padding: 0.5em 0.75em;
+			border: 1px solid #ddd;
+			border-radius: 4px;
+			font-size: 0.85em;
+			outline: none;
+			box-sizing: border-box;
+		}
+		.docuserve-sidebar-search input:focus {
+			border-color: #42b983;
+		}
+		.docuserve-sidebar-home {
+			padding: 0.5em 1.25em;
+			font-weight: 600;
+			font-size: 0.85em;
+			text-transform: uppercase;
+			letter-spacing: 0.03em;
+		}
+		.docuserve-sidebar-home a {
+			color: #666;
+			text-decoration: none;
+			cursor: pointer;
+			user-select: none;
+		}
+		.docuserve-sidebar-home a:hover {
+			color: #42b983;
+		}
+		.docuserve-sidebar-group {
+			margin-top: 0.25em;
+		}
+		.docuserve-sidebar-group-title {
+			display: block;
+			padding: 0.5em 1.25em;
+			font-weight: 600;
+			font-size: 0.85em;
+			color: #666;
+			text-decoration: none;
+			text-transform: uppercase;
+			letter-spacing: 0.03em;
+			cursor: pointer;
+			user-select: none;
+		}
+		.docuserve-sidebar-group-title:hover {
+			color: #42b983;
+		}
+		.docuserve-sidebar-modules {
+			list-style: none;
+			margin: 0;
+			padding: 0;
+		}
+		.docuserve-sidebar-modules li {
+			padding: 0;
+		}
+		.docuserve-sidebar-modules a {
+			display: block;
+			padding: 0.3em 1.25em 0.3em 2em;
+			color: #555;
+			text-decoration: none;
+			font-size: 0.85em;
+			transition: background-color 0.1s, color 0.1s;
+			cursor: pointer;
+		}
+		.docuserve-sidebar-modules a:hover {
+			background-color: #e9ecef;
+			color: #42b983;
+		}
+		.docuserve-sidebar-modules a.active {
+			color: #42b983;
+			font-weight: 600;
+			background-color: #e8f5e9;
+		}
+		.docuserve-sidebar-modules .no-docs {
+			display: block;
+			padding: 0.3em 1.25em 0.3em 2em;
+			color: #bbb;
+			font-size: 0.85em;
+		}
+		.docuserve-sidebar-module-nav {
+			border-top: 1px solid #e9ecef;
+			margin-top: 0.5em;
+			padding-top: 0.5em;
+		}
+		.docuserve-sidebar-module-nav-section {
+			padding: 0.4em 1.25em;
+			font-weight: 600;
+			font-size: 0.8em;
+			color: #888;
+			text-transform: uppercase;
+			letter-spacing: 0.02em;
+		}
+		.docuserve-sidebar-module-nav a {
+			display: block;
+			padding: 0.25em 1.25em 0.25em 2.25em;
+			color: #555;
+			text-decoration: none;
+			font-size: 0.82em;
+			transition: background-color 0.1s, color 0.1s;
+			cursor: pointer;
+		}
+		.docuserve-sidebar-module-nav a:hover {
+			background-color: #e9ecef;
+			color: #42b983;
+		}
+	`,
+
+	Templates:
+	[
+		{
+			Hash: "Docuserve-Sidebar-Template",
+			Template: /*html*/`
+<div class="docuserve-sidebar">
+	<button class="docuserve-sidebar-close" onclick="{~P~}.views['Docuserve-Sidebar'].toggleSidebar()">&times;</button>
+	<div class="docuserve-sidebar-home">
+		<a onclick="{~P~}.PictApplication.navigateTo('/Home')">Home</a>
+	</div>
+	<div id="Docuserve-Sidebar-Groups"></div>
+	<div id="Docuserve-Sidebar-ModuleNav"></div>
+</div>
+`
+		}
+	],
+
+	Renderables:
+	[
+		{
+			RenderableHash: "Docuserve-Sidebar-Content",
+			TemplateHash: "Docuserve-Sidebar-Template",
+			DestinationAddress: "#Docuserve-Sidebar-Container",
+			RenderMethod: "replace"
+		}
+	]
+};
+
+class DocusserveSidebarView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent)
+	{
+		this.renderSidebarGroups();
+
+		return super.onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent);
+	}
+
+	/**
+	 * Render the sidebar group navigation from catalog data.
+	 */
+	renderSidebarGroups()
+	{
+		let tmpGroups = this.pict.AppData.Docuserve.SidebarGroups;
+
+		if (!tmpGroups || tmpGroups.length < 1)
+		{
+			this.pict.ContentAssignment.assignContent('#Docuserve-Sidebar-Groups', '<p style="padding: 1em; color: #999; font-size: 0.85em;">Loading catalog...</p>');
+			return;
+		}
+
+		let tmpHTML = '';
+
+		for (let i = 0; i < tmpGroups.length; i++)
+		{
+			let tmpGroup = tmpGroups[i];
+			tmpHTML += '<div class="docuserve-sidebar-group">';
+
+			// Determine the route for the group title: use the group's own route,
+			// or fall back to the first module with docs.
+			let tmpGroupRoute = tmpGroup.Route || '';
+			if (!tmpGroupRoute)
+			{
+				for (let k = 0; k < tmpGroup.Modules.length; k++)
+				{
+					if (tmpGroup.Modules[k].HasDocs && tmpGroup.Modules[k].Route)
+					{
+						tmpGroupRoute = tmpGroup.Modules[k].Route;
+						break;
+					}
+				}
+			}
+
+			if (tmpGroupRoute)
+			{
+				tmpHTML += '<a class="docuserve-sidebar-group-title" href="' + tmpGroupRoute + '">' + this.escapeHTML(tmpGroup.Name) + '</a>';
+			}
+			else
+			{
+				tmpHTML += '<div class="docuserve-sidebar-group-title">' + this.escapeHTML(tmpGroup.Name) + '</div>';
+			}
+			tmpHTML += '<ul class="docuserve-sidebar-modules">';
+
+			for (let j = 0; j < tmpGroup.Modules.length; j++)
+			{
+				let tmpModule = tmpGroup.Modules[j];
+				if (tmpModule.HasDocs)
+				{
+					let tmpActiveClass = '';
+					if (this.pict.AppData.Docuserve.CurrentGroup === tmpModule.Group && this.pict.AppData.Docuserve.CurrentModule === tmpModule.Name)
+					{
+						tmpActiveClass = ' class="active"';
+					}
+					tmpHTML += '<li><a' + tmpActiveClass + ' href="' + tmpModule.Route + '">' + this.escapeHTML(tmpModule.Name) + '</a></li>';
+				}
+				else
+				{
+					tmpHTML += '<li><span class="no-docs">' + this.escapeHTML(tmpModule.Name) + '</span></li>';
+				}
+			}
+
+			tmpHTML += '</ul>';
+			tmpHTML += '</div>';
+		}
+
+		this.pict.ContentAssignment.assignContent('#Docuserve-Sidebar-Groups', tmpHTML);
+	}
+
+	/**
+	 * Render module-specific sub-navigation when viewing a module.
+	 *
+	 * @param {string} pGroup - The group key
+	 * @param {string} pModule - The module name
+	 */
+	renderModuleNav(pGroup, pModule)
+	{
+		let tmpDocProvider = this.pict.providers['Docuserve-Documentation'];
+		if (!tmpDocProvider)
+		{
+			return;
+		}
+
+		let tmpSidebar = tmpDocProvider.getModuleSidebar(pGroup, pModule);
+		if (!tmpSidebar)
+		{
+			this.pict.ContentAssignment.assignContent('#Docuserve-Sidebar-ModuleNav', '');
+			return;
+		}
+
+		let tmpRoutePrefix = '#/doc/' + pGroup + '/' + pModule + '/';
+		let tmpHTML = '<div class="docuserve-sidebar-module-nav">';
+
+		for (let i = 0; i < tmpSidebar.length; i++)
+		{
+			let tmpEntry = tmpSidebar[i];
+
+			if (tmpEntry.Children)
+			{
+				tmpHTML += '<div class="docuserve-sidebar-module-nav-section">' + this.escapeHTML(tmpEntry.Title) + '</div>';
+
+				for (let j = 0; j < tmpEntry.Children.length; j++)
+				{
+					let tmpChild = tmpEntry.Children[j];
+					if (tmpChild.Path)
+					{
+						tmpHTML += '<a href="' + tmpRoutePrefix + tmpChild.Path + '">' + this.escapeHTML(tmpChild.Title) + '</a>';
+					}
+				}
+			}
+			else if (tmpEntry.Path)
+			{
+				tmpHTML += '<a href="' + tmpRoutePrefix + tmpEntry.Path + '">' + this.escapeHTML(tmpEntry.Title) + '</a>';
+			}
+		}
+
+		tmpHTML += '</div>';
+
+		this.pict.ContentAssignment.assignContent('#Docuserve-Sidebar-ModuleNav', tmpHTML);
+	}
+
+	/**
+	 * Toggle the sidebar visibility and update the top bar hamburger button.
+	 */
+	toggleSidebar()
+	{
+		this.pict.AppData.Docuserve.SidebarVisible = !this.pict.AppData.Docuserve.SidebarVisible;
+
+		let tmpContainer = document.getElementById('Docuserve-Sidebar-Container');
+		let tmpToggle = document.getElementById('Docuserve-TopBar-Toggle');
+
+		if (this.pict.AppData.Docuserve.SidebarVisible)
+		{
+			if (tmpContainer) tmpContainer.style.display = '';
+			if (tmpToggle) tmpToggle.style.display = 'none';
+		}
+		else
+		{
+			if (tmpContainer) tmpContainer.style.display = 'none';
+			if (tmpToggle) tmpToggle.style.display = 'inline-block';
+		}
+	}
+
+	/**
+	 * Clear the module-specific sub-navigation.
+	 */
+	clearModuleNav()
+	{
+		this.pict.ContentAssignment.assignContent('#Docuserve-Sidebar-ModuleNav', '');
+	}
+
+	/**
+	 * Escape HTML special characters.
+	 *
+	 * @param {string} pText - The text to escape
+	 * @returns {string} The escaped text
+	 */
+	escapeHTML(pText)
+	{
+		if (!pText)
+		{
+			return '';
+		}
+		return pText
+			.replace(/&/g, '&amp;')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;')
+			.replace(/"/g, '&quot;');
+	}
+}
+
+module.exports = DocusserveSidebarView;
+
+module.exports.default_configuration = _ViewConfiguration;