var documentationState = { navigation: [], activeArticleId: null, siteConfig: null, searchable: null }; var isEditMode = false; var originalContent = new Map(); var currentArticleData = {}; var docInitialized = false; var documentationContentTypeId = 's7NRehvDHNiXnufmx'; var documentationLoading = false; function logClientEvent(event, meta) { if (typeof console !== 'undefined' && console.info) { console.info('[documentation] ' + event, meta || {}); } } function clearElement(element) { if (!element) { return; } while (element.firstChild) { element.removeChild(element.firstChild); } } function cloneChildNodes(element) { var clones = []; if (!element) { return clones; } var child = element.firstChild; while (child) { clones.push(child.cloneNode(true)); child = child.nextSibling; } return clones; } function restoreElementChildren(element, clones) { if (!element || !Array.isArray(clones)) { return; } while (element.firstChild) { element.removeChild(element.firstChild); } for (var i = 0; i < clones.length; i++) { element.appendChild(clones[i].cloneNode(true)); } } function convertHtmlToDescriptors(html) { if (!html || typeof html !== 'string') { return []; } if (typeof DOMParser === 'undefined') { return []; } try { var parser = new DOMParser(); var doc = parser.parseFromString(html, 'text/html'); if (!doc || !doc.body) { return []; } return buildDescriptorsFromChildNodes(doc.body); } catch (error) { return []; } } var allowedElementTags = { a: true, article: true, aside: true, blockquote: true, code: true, div: true, em: true, figure: true, figcaption: true, footer: true, h1: true, h2: true, h3: true, h4: true, h5: true, h6: true, header: true, i: true, li: true, nav: true, ol: true, p: true, pre: true, section: true, small: true, span: true, strong: true, sub: true, sup: true, table: true, tbody: true, td: true, th: true, thead: true, tr: true, ul: true }; var voidElementTags = { br: true, hr: true, img: true }; function sanitizeAttributeValue(name, value) { if (value === 0) { return '0'; } if (!value) { return null; } var stringValue = String(value).trim(); if (!stringValue) { return null; } if (/[<>]/.test(stringValue)) { return null; } if (name === 'href') { var unsafe = stringValue.toLowerCase(); if (unsafe.indexOf('javascript:') === 0 || unsafe.indexOf('data:javascript') === 0) { return null; } } return stringValue; } function extractAttributesFromElement(element) { var attributes = {}; if (!element || !element.attributes) { return attributes; } for (var i = 0; i < element.attributes.length; i++) { var attr = element.attributes[i]; var name = attr.name.toLowerCase(); var value = sanitizeAttributeValue(name, attr.value); if (!value) { continue; } if (name === 'target' && value !== '_blank') { continue; } if (name === 'href' || name === 'id' || name === 'title' || name === 'role' || name === 'alt') { attributes[name] = value; continue; } if (name === 'target' && value === '_blank') { attributes.target = '_blank'; if (!attributes.rel) { attributes.rel = 'noopener noreferrer'; } continue; } if (name === 'rel') { attributes.rel = value; continue; } if (name === 'class') { attributes['class'] = value; continue; } if (name.indexOf('aria-') === 0 || name.indexOf('data-') === 0) { attributes[name] = value; } } return attributes; } function buildDescriptorsFromChildNodes(element) { var descriptors = []; var child = element.firstChild; while (child) { var descriptor = nodeToDescriptor(child); if (descriptor) { if (descriptor.type === 'fragment' && Array.isArray(descriptor.children)) { for (var i = 0; i < descriptor.children.length; i++) { descriptors.push(descriptor.children[i]); } } else { descriptors.push(descriptor); } } child = child.nextSibling; } return descriptors; } function nodeToDescriptor(node) { if (!node) { return null; } if (node.nodeType === 3) { var textValue = node.textContent; if (!textValue || !textValue.replace(/[\s\u00a0]+/g, '').length) { return null; } return { type: 'text', text: textValue }; } if (node.nodeType === 1) { var tagName = String(node.tagName || '').toLowerCase(); if (!allowedElementTags[tagName] && !voidElementTags[tagName]) { var fallbackChildren = buildDescriptorsFromChildNodes(node); if (fallbackChildren.length === 1) { return fallbackChildren[0]; } return { type: 'fragment', children: fallbackChildren }; } var descriptor = { type: 'element', tag: tagName }; var attrs = extractAttributesFromElement(node); if (Object.keys(attrs).length) { descriptor.attributes = attrs; } var children = buildDescriptorsFromChildNodes(node); if (children.length && !voidElementTags[tagName]) { descriptor.children = children; } return descriptor; } return null; } function extractElementStructure(element) { if (!element) { return []; } return buildDescriptorsFromChildNodes(element); } function normalizeAttributes(attributes) { var normalized = {}; if (!attributes) { return normalized; } for (var key in attributes) { if (!Object.prototype.hasOwnProperty.call(attributes, key)) { continue; } var value = sanitizeAttributeValue(key, attributes[key]); if (!value) { continue; } if (key === 'target' && value !== '_blank') { continue; } normalized[key] = value; } if (normalized.target === '_blank' && !normalized.rel) { normalized.rel = 'noopener noreferrer'; } return normalized; } function createDomNodeFromDescriptor(descriptor) { if (!descriptor) { return null; } if (descriptor.type === 'text') { return document.createTextNode(descriptor.text || ''); } if (descriptor.type === 'element') { var tagName = descriptor.tag; if (!allowedElementTags[tagName] && !voidElementTags[tagName]) { return null; } var element = document.createElement(tagName); var attributes = normalizeAttributes(descriptor.attributes); for (var name in attributes) { if (Object.prototype.hasOwnProperty.call(attributes, name)) { element.setAttribute(name, attributes[name]); } } if (!voidElementTags[tagName]) { appendDescriptorsToElement(element, descriptor.children || []); } return element; } return null; } function appendDescriptorsToElement(element, descriptors) { if (!element || !Array.isArray(descriptors)) { return; } for (var i = 0; i < descriptors.length; i++) { var node = createDomNodeFromDescriptor(descriptors[i]); if (node) { element.appendChild(node); } } } function stripHtmlTagsToText(html) { if (!html || typeof html !== 'string') { return ''; } var text = html.replace(/<[^>]*>/g, ' '); text = text.replace(/ /gi, ' '); return text.replace(/\s+/g, ' ').trim(); } function extractProcessorPayload(response) { if (!response) { return null; } if (response.data && response.data.result && response.data.result.data) { return response.data.result.data; } if (response.result && response.result.data) { return response.result.data; } if (response.data) { return response.data; } return response; } function applySiteConfig(siteConfig) { if (!siteConfig || typeof siteConfig !== 'object') { return; } var titleElement = document.querySelector('.docTitle h1'); if (titleElement && siteConfig.site_title) { titleElement.textContent = siteConfig.site_title; } var subtitleElement = document.querySelector('.docTitle p'); if (subtitleElement && siteConfig.site_subtitle) { subtitleElement.textContent = siteConfig.site_subtitle; } var searchInput = document.getElementById('docSearch'); if (searchInput && siteConfig.search_placeholder) { searchInput.placeholder = siteConfig.search_placeholder; } } function renderNavigation(navigation, activeArticleId) { var navTree = document.getElementById('navTree'); if (!navTree) { return; } clearElement(navTree); if (!Array.isArray(navigation) || navigation.length === 0) { var placeholder = document.createElement('div'); placeholder.className = 'navSection navSection--empty'; placeholder.textContent = 'No sections available yet.'; navTree.appendChild(placeholder); return; } for (var i = 0; i < navigation.length; i++) { var section = navigation[i] || {}; var sectionKey = section.id || ('section-' + i); var sectionWrapper = document.createElement('div'); sectionWrapper.className = 'navSection'; sectionWrapper.setAttribute('data-section-id', sectionKey); var headerButton = document.createElement('button'); headerButton.className = 'navSectionHeader'; headerButton.setAttribute('data-section-id', sectionKey); headerButton.onclick = (function(sectionId) { return function() { toggleNavSection(sectionId); }; })(sectionKey); var iconSpan = document.createElement('span'); iconSpan.className = 'navIcon'; iconSpan.textContent = section.icon || ''; headerButton.appendChild(iconSpan); var titleSpan = document.createElement('span'); titleSpan.textContent = section.title || 'Untitled Section'; headerButton.appendChild(titleSpan); var toggleSpan = document.createElement('span'); toggleSpan.className = 'navToggle'; toggleSpan.id = 'toggle-' + sectionKey; toggleSpan.textContent = '▶'; headerButton.appendChild(toggleSpan); sectionWrapper.appendChild(headerButton); var childrenContainer = document.createElement('div'); childrenContainer.className = 'navSectionChildren'; childrenContainer.id = 'children-' + sectionKey; var children = Array.isArray(section.children) ? section.children : []; var sectionHasActive = false; if (children.length === 0) { var emptyChild = document.createElement('div'); emptyChild.className = 'navChild navChild--empty'; emptyChild.textContent = 'No articles in this section yet.'; childrenContainer.appendChild(emptyChild); } else { for (var j = 0; j < children.length; j++) { var child = children[j] || {}; var childButton = document.createElement('button'); childButton.className = 'navChild'; childButton.setAttribute('data-article-id', child.id || ''); if (child.title) { var tooltip = child.title; if (child.estimated_reading_time) { tooltip += ' · ' + child.estimated_reading_time; } childButton.title = tooltip; } childButton.onclick = (function(articleId) { return function() { loadArticle(articleId); }; })(child.id); if (child.id === activeArticleId) { childButton.classList.add('active'); sectionHasActive = true; } var childTitle = document.createElement('span'); childTitle.textContent = child.title || 'Untitled Article'; childButton.appendChild(childTitle); if (child.estimated_reading_time) { var timeSpan = document.createElement('span'); timeSpan.className = 'navChildTime'; timeSpan.textContent = child.estimated_reading_time; childButton.appendChild(timeSpan); } childrenContainer.appendChild(childButton); } } if (section.expanded || section.expanded_by_default || sectionHasActive) { childrenContainer.classList.add('expanded'); toggleSpan.classList.add('expanded'); headerButton.classList.add('active'); } sectionWrapper.appendChild(childrenContainer); navTree.appendChild(sectionWrapper); } } function setActiveNavigationArticle(articleId) { var navTree = document.getElementById('navTree'); if (!navTree) { return; } var navButtons = navTree.querySelectorAll('.navChild'); for (var i = 0; i < navButtons.length; i++) { navButtons[i].classList.remove('active'); } if (!articleId) { return; } var activeButton = navTree.querySelector('.navChild[data-article-id="' + articleId + '"]'); if (activeButton) { activeButton.classList.add('active'); var sectionContainer = activeButton.parentNode; if (sectionContainer && sectionContainer.classList) { sectionContainer.classList.add('expanded'); } var sectionId = sectionContainer && sectionContainer.id ? sectionContainer.id.replace('children-', '') : null; if (sectionId) { var toggle = document.getElementById('toggle-' + sectionId); if (toggle) { toggle.classList.add('expanded'); } var header = document.querySelector('.navSectionHeader[data-section-id="' + sectionId + '"]'); if (header) { header.classList.add('active'); } } } } function renderArticle(article, breadcrumbTemplate, searchable) { var articleTitle = document.getElementById('articleTitle'); if (articleTitle) { articleTitle.textContent = article && article.title ? article.title : 'Untitled Article'; } var readingTime = document.getElementById('readingTime'); if (readingTime) { readingTime.textContent = (article && article.metadata && article.metadata.estimated_reading_time) || '--'; } var difficultyLevel = document.getElementById('difficultyLevel'); if (difficultyLevel) { difficultyLevel.textContent = (article && article.metadata && article.metadata.difficulty_level) || '--'; } var lastUpdated = document.getElementById('lastUpdated'); if (lastUpdated) { lastUpdated.textContent = (article && article.metadata && article.metadata.last_updated) || '--'; } var contentContainer = document.getElementById('articleContent'); if (!contentContainer) { return; } clearElement(contentContainer); var sections = article && article.content && Array.isArray(article.content.sections) ? article.content.sections : []; var normalizedSections = []; if (!sections.length) { var placeholder = document.createElement('div'); placeholder.className = 'contentPlaceholder'; placeholder.textContent = 'This article does not have any content yet.'; contentContainer.appendChild(placeholder); } else { for (var i = 0; i < sections.length; i++) { var sectionData = sections[i] || {}; var sectionWrapper = document.createElement('div'); sectionWrapper.className = 'contentSection'; var nodes = Array.isArray(sectionData.nodes) ? sectionData.nodes : []; if (!nodes.length && sectionData.html) { nodes = convertHtmlToDescriptors(sectionData.html); } if (nodes.length) { var nodesForRendering = JSON.parse(JSON.stringify(nodes)); appendDescriptorsToElement(sectionWrapper, nodesForRendering); } if (!sectionWrapper.firstChild) { var fallbackHtml = sectionData.html || ''; var textFallback = stripHtmlTagsToText(fallbackHtml); if (textFallback) { var paragraph = document.createElement('p'); paragraph.textContent = textFallback; sectionWrapper.appendChild(paragraph); } } if (!sectionWrapper.firstChild) { var emptyParagraph = document.createElement('p'); emptyParagraph.textContent = 'This section is currently empty.'; sectionWrapper.appendChild(emptyParagraph); } var preparedNodes = nodes.length ? nodes : extractElementStructure(sectionWrapper); var storedNodes = Array.isArray(preparedNodes) ? JSON.parse(JSON.stringify(preparedNodes)) : []; normalizedSections.push({ type: sectionData.type || 'content', nodes: storedNodes }); contentContainer.appendChild(sectionWrapper); } } renderBreadcrumb(breadcrumbTemplate, article ? article.title : null); renderTableOfContents(article ? article.table_of_contents : []); applyHeadingAnchors(article ? article.table_of_contents : []); renderComplementaryInfo(article ? article.complementary_info : [], searchable); var metadataClone = article && article.metadata ? JSON.parse(JSON.stringify(article.metadata)) : {}; currentArticleData = { id: article ? article.id : null, title: article ? article.title : '', slug: article ? article.slug : '', category: article ? article.category : '', content: { sections: normalizedSections }, metadata: metadataClone }; } function renderTableOfContents(tocItems) { var tocNav = document.getElementById('tocNav'); if (!tocNav) { return; } clearElement(tocNav); if (!Array.isArray(tocItems) || tocItems.length === 0) { var placeholder = document.createElement('p'); placeholder.className = 'tocPlaceholder'; placeholder.textContent = 'No table of contents available.'; tocNav.appendChild(placeholder); return; } for (var i = 0; i < tocItems.length; i++) { var item = tocItems[i] || {}; if (!item.id) { continue; } var link = document.createElement('a'); link.className = 'tocItem' + (i === 0 ? ' active' : ''); link.href = '#' + item.id; link.setAttribute('data-heading-id', item.id); link.textContent = item.title || 'Section'; link.onclick = (function(headingId) { return function(event) { event.preventDefault(); scrollToHeading(headingId); setActiveTocItem(headingId); }; })(item.id); tocNav.appendChild(link); } } function setActiveTocItem(headingId) { var tocNav = document.getElementById('tocNav'); if (!tocNav) { return; } var items = tocNav.querySelectorAll('.tocItem'); for (var i = 0; i < items.length; i++) { items[i].classList.remove('active'); } if (!headingId) { return; } var active = tocNav.querySelector('.tocItem[data-heading-id="' + headingId + '"]'); if (active) { active.classList.add('active'); } } function applyHeadingAnchors(tocItems) { if (!Array.isArray(tocItems) || tocItems.length === 0) { return; } var articleContent = document.getElementById('articleContent'); if (!articleContent) { return; } var headings = articleContent.querySelectorAll('h1, h2, h3, h4, h5, h6'); var headingList = Array.prototype.slice.call(headings); for (var i = 0; i < tocItems.length; i++) { var item = tocItems[i]; if (!item || !item.id) { continue; } var existing = document.getElementById(item.id); if (existing) { continue; } for (var j = 0; j < headingList.length; j++) { var heading = headingList[j]; if (!heading) { continue; } if (heading.textContent && item.title && heading.textContent.trim().toLowerCase() === item.title.trim().toLowerCase()) { heading.id = item.id; break; } } } } function renderComplementaryInfo(items, searchable) { var container = document.getElementById('complementaryInfo'); if (!container) { return; } clearElement(container); var appended = false; if (Array.isArray(items)) { for (var i = 0; i < items.length; i++) { var item = items[i] || {}; var card = buildComplementaryCard(item); if (card) { container.appendChild(card); appended = true; } } } var searchCard = buildSearchMetricsCard(searchable); if (searchCard) { container.appendChild(searchCard); appended = true; } if (!appended) { var placeholder = document.createElement('div'); placeholder.className = 'complementaryCard complementaryCard--placeholder'; placeholder.textContent = 'No complementary resources available yet.'; container.appendChild(placeholder); } } function buildComplementaryCard(item) { if (!item) { return null; } var type = item.type || 'info'; if (type === 'video') { return buildVideoCard(item); } if (type === 'checklist') { return buildChecklistCard(item); } if (type === 'stats') { return buildStatsCard(item); } return buildInfoCard(item); } function buildVideoCard(item) { var card = document.createElement('div'); card.className = 'complementaryCard complementaryCard--video'; var title = document.createElement('h5'); title.textContent = item.title || 'Video'; card.appendChild(title); var placeholder = document.createElement('div'); placeholder.className = 'videoPlaceholder'; placeholder.textContent = '▶'; placeholder.onclick = function() { showVideoDemo(item.data || {}); }; card.appendChild(placeholder); if (item.data && item.data.duration) { var meta = document.createElement('p'); meta.className = 'videoMeta'; meta.textContent = 'Duration: ' + item.data.duration; card.appendChild(meta); } return card; } function buildChecklistCard(item) { var data = item.data || {}; var checklistItems = Array.isArray(data.items) ? data.items : []; var card = document.createElement('div'); card.className = 'complementaryCard'; var title = document.createElement('h5'); title.textContent = item.title || 'Checklist'; card.appendChild(title); if (!checklistItems.length) { var note = document.createElement('p'); note.textContent = 'No checklist items available.'; card.appendChild(note); return card; } var list = document.createElement('ul'); list.className = 'checklist'; for (var i = 0; i < checklistItems.length; i++) { var listItem = document.createElement('li'); var icon = document.createElement('i'); icon.className = 'check icon'; listItem.appendChild(icon); var text = document.createElement('span'); text.textContent = checklistItems[i]; listItem.appendChild(text); list.appendChild(listItem); } card.appendChild(list); return card; } function buildStatsCard(item) { var data = item.data || {}; var metrics = Array.isArray(data.metrics) ? data.metrics : []; var card = document.createElement('div'); card.className = 'complementaryCard'; var title = document.createElement('h5'); title.textContent = item.title || 'Key Metrics'; card.appendChild(title); if (!metrics.length) { var note = document.createElement('p'); note.textContent = 'Metrics will appear here once available.'; card.appendChild(note); return card; } var grid = document.createElement('div'); grid.className = 'statsGrid'; for (var i = 0; i < metrics.length; i++) { var metric = metrics[i] || {}; var stat = document.createElement('div'); stat.className = 'statItem'; var value = document.createElement('div'); value.className = 'statValue'; value.textContent = metric.value || '--'; stat.appendChild(value); var label = document.createElement('div'); label.className = 'statLabel'; label.textContent = metric.label || ''; stat.appendChild(label); grid.appendChild(stat); } card.appendChild(grid); return card; } function buildInfoCard(item) { var card = document.createElement('div'); card.className = 'complementaryCard'; var title = document.createElement('h5'); title.textContent = item.title || 'Resource'; card.appendChild(title); var description = document.createElement('p'); var data = item.data || {}; description.textContent = data.description || 'Additional information will be available soon.'; card.appendChild(description); return card; } function buildSearchMetricsCard(searchable) { if (!searchable) { return null; } var card = document.createElement('div'); card.className = 'complementaryCard'; var title = document.createElement('h5'); title.textContent = 'Documentation Summary'; card.appendChild(title); var metrics = document.createElement('div'); metrics.className = 'statsGrid'; var total = document.createElement('div'); total.className = 'statItem'; var totalValue = document.createElement('div'); totalValue.className = 'statValue'; totalValue.textContent = String(searchable.total_articles || 0); total.appendChild(totalValue); var totalLabel = document.createElement('div'); totalLabel.className = 'statLabel'; totalLabel.textContent = 'Articles'; total.appendChild(totalLabel); metrics.appendChild(total); var categories = document.createElement('div'); categories.className = 'statItem'; var categoriesValue = document.createElement('div'); categoriesValue.className = 'statValue'; categoriesValue.textContent = String(searchable.categories || 0); categories.appendChild(categoriesValue); var categoriesLabel = document.createElement('div'); categoriesLabel.className = 'statLabel'; categoriesLabel.textContent = 'Sections'; categories.appendChild(categoriesLabel); metrics.appendChild(categories); if (searchable.avg_reading_time) { var reading = document.createElement('div'); reading.className = 'statItem'; var readingValue = document.createElement('div'); readingValue.className = 'statValue'; readingValue.textContent = searchable.avg_reading_time; reading.appendChild(readingValue); var readingLabel = document.createElement('div'); readingLabel.className = 'statLabel'; readingLabel.textContent = 'Avg Reading Time'; reading.appendChild(readingLabel); metrics.appendChild(reading); } var updated = document.createElement('div'); updated.className = 'statItem'; var updatedValue = document.createElement('div'); updatedValue.className = 'statValue'; updatedValue.textContent = searchable.last_updated || '--'; updated.appendChild(updatedValue); var updatedLabel = document.createElement('div'); updatedLabel.className = 'statLabel'; updatedLabel.textContent = 'Last Refresh'; updated.appendChild(updatedLabel); metrics.appendChild(updated); card.appendChild(metrics); return card; } function renderBreadcrumb(template, articleTitle) { var container = document.getElementById('breadcrumb'); if (!container) { return; } clearElement(container); var items = Array.isArray(template) && template.length ? template : buildDefaultBreadcrumb(articleTitle); for (var i = 0; i < items.length; i++) { var crumb = items[i] || {}; if (i > 0) { var separator = document.createElement('span'); separator.className = 'breadcrumb-separator'; separator.textContent = '>'; container.appendChild(separator); } if (crumb.link) { var link = document.createElement('a'); link.textContent = crumb.title || 'Item'; link.onclick = (function(linkTarget) { return function() { phoros.page.change(linkTarget); }; })(crumb.link); container.appendChild(link); } else { var label = document.createElement('span'); if (crumb.current) { label.className = 'current-page'; } label.textContent = crumb.title || articleTitle || 'Current'; container.appendChild(label); } } } function buildDefaultBreadcrumb(articleTitle) { return [ { title: 'Documentation', link: 'documentation' }, { title: articleTitle || 'Article', current: true } ]; } function updateDocumentationNotice(message, tone) { var existingNotice = document.getElementById('docStatusNotice'); if (!message) { if (existingNotice && existingNotice.parentNode) { existingNotice.parentNode.removeChild(existingNotice); } return; } if (!existingNotice) { existingNotice = document.createElement('p'); existingNotice.id = 'docStatusNotice'; existingNotice.className = 'docStatusNotice'; var titleBlock = document.querySelector('.docTitle'); if (titleBlock) { titleBlock.appendChild(existingNotice); } } existingNotice.textContent = message; existingNotice.setAttribute('data-tone', tone || 'info'); } function setDocumentationInteractive(isReady, message, tone) { var disable = !isReady; var searchInput = document.getElementById('docSearch'); if (searchInput) { searchInput.disabled = disable; } var searchButton = document.querySelector('.searchBtn'); if (searchButton) { searchButton.disabled = disable; searchButton.setAttribute('aria-disabled', disable ? 'true' : 'false'); } var editBtn = document.getElementById('editBtn'); if (editBtn) { editBtn.disabled = disable; editBtn.setAttribute('aria-disabled', disable ? 'true' : 'false'); if (disable && isEditMode) { exitEditMode(); } } if (typeof message === 'string') { updateDocumentationNotice(message, tone || (disable ? 'info' : 'ready')); } } function displayLoadError(message, tone) { var errorMessage = message || 'Unable to load documentation right now.'; updateDocumentationNotice(errorMessage, tone || 'error'); var articleTitle = document.getElementById('articleTitle'); if (articleTitle) { articleTitle.textContent = errorMessage; } var contentContainer = document.getElementById('articleContent'); if (contentContainer) { clearElement(contentContainer); var placeholder = document.createElement('div'); placeholder.className = 'contentPlaceholder'; placeholder.textContent = errorMessage; contentContainer.appendChild(placeholder); } } function requestDocumentation(articleId, callback) { var payload = { contentType_id: documentationContentTypeId }; if (articleId) { payload.article_id = articleId; } logClientEvent('documentation:request:start', { articleId: articleId || 'initial' }); phoros.processor('documentation/getDocumentation', { type: 'getDocumentation', contentType_id: documentationContentTypeId, payload: payload }, function(error, result) { if (error) { logClientEvent('documentation:request:error', { message: error.message, articleId: articleId || 'initial' }); callback(error); return; } if (!result || !result.success) { var message = (result && (result.error || result.message)) || 'Unknown error'; logClientEvent('documentation:request:failed', { message: message, articleId: articleId || 'initial' }); callback(new Error(message)); return; } var data = extractProcessorPayload(result) || {}; var meta = result.metadata || result.meta || {}; data.__meta = meta; logClientEvent('documentation:request:completed', { articleId: articleId || (data.currentArticle && data.currentArticle.id) || 'initial', source: meta.source || (meta.fallback ? 'fallback' : 'unknown') }); callback(null, data); }); } function handleDocumentationData(data, requestedArticleId) { if (!data) { displayLoadError('No data returned from processor.'); return; } var meta = data.__meta || {}; if (data.__meta) { delete data.__meta; } documentationState.lastMeta = meta; documentationState.navigation = Array.isArray(data.navigation) ? data.navigation : []; documentationState.siteConfig = data.site_config || null; documentationState.searchable = data.searchable_content || null; documentationState.activeArticleId = data.currentArticle && data.currentArticle.id ? data.currentArticle.id : requestedArticleId || null; applySiteConfig(documentationState.siteConfig); renderNavigation(documentationState.navigation, documentationState.activeArticleId); setActiveNavigationArticle(documentationState.activeArticleId); if (meta.source === 'fallback') { updateDocumentationNotice('Using starter documentation while the database seeds.', 'warning'); } else { updateDocumentationNotice(''); } if (data.currentArticle) { renderArticle(data.currentArticle, data.breadcrumb_template, documentationState.searchable); } else { displayLoadError('No article data available.'); } } function initializeDocumentation(forceRefresh) { if (documentationLoading) { logClientEvent('documentation:init:blocked', { reason: 'in-progress' }); return; } if (docInitialized && !forceRefresh) { logClientEvent('documentation:init:skipped', { reason: 'already-initialized' }); return; } documentationLoading = true; setDocumentationInteractive(false); displayLoadError('Loading article...', 'info'); requestDocumentation(null, function(error, data) { documentationLoading = false; if (error) { logClientEvent('documentation:init:error', { message: error.message }); displayLoadError(error.message || 'Failed to load documentation.'); return; } docInitialized = true; setDocumentationInteractive(true); handleDocumentationData(data, data.currentArticle && data.currentArticle.id); }); } function toggleNavSection(sectionId) { var children = document.getElementById('children-' + sectionId); var toggle = document.getElementById('toggle-' + sectionId); var header = document.querySelector('.navSectionHeader[data-section-id="' + sectionId + '"]'); if (!children || !toggle) { return; } var isExpanded = children.classList.contains('expanded'); if (isExpanded) { children.classList.remove('expanded'); toggle.classList.remove('expanded'); if (header) { header.classList.remove('active'); } } else { children.classList.add('expanded'); toggle.classList.add('expanded'); if (header) { header.classList.add('active'); } } } function loadArticle(articleId) { if (!articleId) { return; } logClientEvent('documentation:article:load', { articleId: articleId }); updateDocumentationNotice('Loading article...', 'info'); documentationState.activeArticleId = articleId; var articleTitle = document.getElementById('articleTitle'); if (articleTitle) { articleTitle.textContent = 'Loading article...'; } setActiveNavigationArticle(articleId); requestDocumentation(articleId, function(error, data) { if (error) { displayLoadError(error.message || 'Failed to load article.'); return; } handleDocumentationData(data, articleId); }); } function scrollToHeading(id) { if (!id) { return; } var element = document.getElementById(id); if (element) { element.scrollIntoView({ behavior: 'smooth', block: 'start' }); setActiveTocItem(id); } } function toggleSidebar() { var sidebar = document.getElementById('docSidebar'); if (sidebar) { sidebar.classList.toggle('open'); } } function handleSearchKey(event) { if (!event) { return; } if (event.key === 'Enter') { event.preventDefault(); performDocSearch(); } else if (event.key === 'Escape') { event.preventDefault(); var input = event.target; if (input && typeof input.value === 'string') { input.value = ''; } clearSearchResults(); } } function clearSearchResults() { var resultsContainer = document.getElementById('searchResults'); if (!resultsContainer) { return; } clearElement(resultsContainer); if (!resultsContainer.classList.contains('hidden')) { resultsContainer.classList.add('hidden'); } } function findSearchMatches(query) { var normalizedQuery = (query || '').toLowerCase(); if (!normalizedQuery) { return []; } var searchable = documentationState.searchable || {}; var index = Array.isArray(searchable.index) ? searchable.index : []; var matches = []; for (var i = 0; i < index.length; i++) { var entry = index[i] || {}; var haystack = [ entry.title, entry.section_title, entry.excerpt, Array.isArray(entry.tags) ? entry.tags.join(' ') : '', Array.isArray(entry.keywords) ? entry.keywords.join(' ') : '' ].join(' ').toLowerCase(); if (haystack.indexOf(normalizedQuery) !== -1) { matches.push(entry); } } if (!matches.length) { var navigation = Array.isArray(documentationState.navigation) ? documentationState.navigation : []; for (var sectionIndex = 0; sectionIndex < navigation.length; sectionIndex++) { var navSection = navigation[sectionIndex] || {}; var navChildren = Array.isArray(navSection.children) ? navSection.children : []; for (var childIndex = 0; childIndex < navChildren.length; childIndex++) { var navChild = navChildren[childIndex] || {}; if ((navChild.title || '').toLowerCase().indexOf(normalizedQuery) !== -1) { matches.push({ id: navChild.id, title: navChild.title, section_title: navSection.title, estimated_reading_time: navChild.estimated_reading_time, difficulty_level: navChild.difficulty_level, excerpt: '', tags: [] }); } } } } if (matches.length > 12) { matches = matches.slice(0, 12); } return matches; } function renderSearchResults(query, matches) { var resultsContainer = document.getElementById('searchResults'); if (!resultsContainer) { return; } clearElement(resultsContainer); var header = document.createElement('div'); header.className = 'searchResultsHeader'; var title = document.createElement('h2'); title.textContent = 'Search Results'; header.appendChild(title); var meta = document.createElement('span'); meta.className = 'searchResultsMeta'; meta.textContent = matches.length + ' match' + (matches.length === 1 ? '' : 'es') + ' for "' + query + '"'; header.appendChild(meta); var clearButton = document.createElement('button'); clearButton.type = 'button'; clearButton.className = 'searchResultsClear'; clearButton.textContent = 'Clear'; clearButton.onclick = function() { var searchInput = document.getElementById('docSearch'); if (searchInput) { searchInput.value = ''; } clearSearchResults(); }; header.appendChild(clearButton); resultsContainer.appendChild(header); if (!matches.length) { var empty = document.createElement('p'); empty.className = 'searchResultEmpty'; empty.textContent = 'No articles found yet. Try a different keyword.'; resultsContainer.appendChild(empty); resultsContainer.classList.remove('hidden'); return; } var list = document.createElement('ul'); list.className = 'searchResultList'; for (var i = 0; i < matches.length; i++) { var match = matches[i] || {}; var listItem = document.createElement('li'); listItem.className = 'searchResultItem'; var button = document.createElement('button'); button.type = 'button'; button.onclick = (function(articleId) { return function() { if (articleId) { loadArticle(articleId); } clearSearchResults(); }; })(match.id); var heading = document.createElement('h3'); heading.className = 'searchResultTitle'; heading.textContent = match.title || 'Untitled Article'; button.appendChild(heading); if (match.excerpt) { var excerpt = document.createElement('p'); excerpt.className = 'searchResultExcerpt'; excerpt.textContent = match.excerpt; button.appendChild(excerpt); } var metaLine = document.createElement('div'); metaLine.className = 'searchResultMeta'; var metaParts = []; if (match.section_title) { metaParts.push(match.section_title); } if (match.estimated_reading_time) { metaParts.push(match.estimated_reading_time); } if (match.difficulty_level) { metaParts.push(match.difficulty_level); } if (Array.isArray(match.tags) && match.tags.length) { metaParts.push('#' + match.tags.slice(0, 3).join(' #')); } metaLine.textContent = metaParts.join(' • '); button.appendChild(metaLine); listItem.appendChild(button); list.appendChild(listItem); } resultsContainer.appendChild(list); resultsContainer.classList.remove('hidden'); resultsContainer.scrollIntoView({ behavior: 'smooth', block: 'start' }); } function performDocSearch() { var queryInput = document.getElementById('docSearch'); if (!queryInput || queryInput.disabled) { return; } var query = queryInput.value.trim(); if (!query) { clearSearchResults(); return; } var matches = findSearchMatches(query); renderSearchResults(query, matches); } function showVideoDemo(videoData) { var title = (videoData && videoData.title) || 'Video Preview'; var description = (videoData && videoData.description) || 'Video content will be available in the next version.'; var details = ''; if (videoData && videoData.video_url) { details = '\n\nVideo URL: ' + videoData.video_url; } Swal.fire({ title: title, text: description + details, icon: 'info', confirmButtonColor: '#3973e1' }); } function toggleEditMode() { var editBtn = document.getElementById('editBtn'); if (!editBtn || editBtn.disabled) { return; } isEditMode = !isEditMode; var editBtnText = document.getElementById('editBtnText'); var saveBtn = document.getElementById('saveBtn'); var cancelBtn = document.getElementById('cancelBtn'); if (isEditMode) { editBtn.classList.add('editing'); editBtnText.textContent = 'Editing...'; saveBtn.classList.remove('hidden'); cancelBtn.classList.remove('hidden'); makeContentEditable(); storeOriginalContent(); } else { exitEditMode(); } } function makeContentEditable() { var articleTitle = document.getElementById('articleTitle'); if (articleTitle) { makeElementEditable(articleTitle, 'Article Title'); } var readingTime = document.getElementById('readingTime'); if (readingTime) { makeElementEditable(readingTime, 'Reading Time'); } var difficultyLevel = document.getElementById('difficultyLevel'); if (difficultyLevel) { makeElementEditable(difficultyLevel, 'Difficulty'); } var contentSections = document.querySelectorAll('.contentSection'); for (var i = 0; i < contentSections.length; i++) { makeElementEditable(contentSections[i], 'Content Section ' + (i + 1)); } } function makeElementEditable(element, label) { element.contentEditable = true; element.classList.add('editable'); var editLabel = document.createElement('div'); editLabel.className = 'edit-label'; editLabel.textContent = label; element.parentNode.insertBefore(editLabel, element); element.editLabel = editLabel; } function storeOriginalContent() { originalContent = new Map(); var editableElements = document.querySelectorAll('.editable'); for (var i = 0; i < editableElements.length; i++) { var element = editableElements[i]; originalContent.set(element, cloneChildNodes(element)); } } function cancelEdit() { var editableElements = document.querySelectorAll('.editable'); for (var i = 0; i < editableElements.length; i++) { var element = editableElements[i]; var stored = originalContent.get(element); if (stored) { restoreElementChildren(element, stored); } } exitEditMode(); } function exitEditMode() { isEditMode = false; var editBtn = document.getElementById('editBtn'); var editBtnText = document.getElementById('editBtnText'); var saveBtn = document.getElementById('saveBtn'); var cancelBtn = document.getElementById('cancelBtn'); editBtn.classList.remove('editing'); editBtnText.textContent = 'Edit'; saveBtn.classList.add('hidden'); cancelBtn.classList.add('hidden'); var editableElements = document.querySelectorAll('.editable'); for (var i = 0; i < editableElements.length; i++) { var element = editableElements[i]; element.contentEditable = false; element.classList.remove('editable'); if (element.editLabel && element.editLabel.parentNode) { element.editLabel.parentNode.removeChild(element.editLabel); delete element.editLabel; } } var editLabels = document.querySelectorAll('.edit-label'); for (var j = 0; j < editLabels.length; j++) { var label = editLabels[j]; if (label.parentNode) { label.parentNode.removeChild(label); } } } function saveDocumentation() { if (!isEditMode) { return; } var editedContent = collectEditedContent(); var saveBtn = document.getElementById('saveBtn'); saveBtn.disabled = true; var saveBtnIcon = saveBtn.querySelector('i'); var saveBtnText = saveBtn.querySelector('span'); if (saveBtnIcon) { saveBtnIcon.className = 'spinner loading icon'; } if (saveBtnText) { saveBtnText.textContent = 'Saving...'; } phoros.processor('documentation/saveDocumentation', { type: 'saveDocumentation', contentType_id: documentationContentTypeId, payload: { article_id: currentArticleData.id, content: editedContent, contentType_id: documentationContentTypeId } }, function(error, result) { saveBtn.disabled = false; var currentIcon = saveBtn.querySelector('i'); var currentText = saveBtn.querySelector('span'); if (currentIcon) { currentIcon.className = 'save icon'; } if (currentText) { currentText.textContent = 'Save'; } if (error) { console.error('Failed to save documentation:', error); Swal.fire({ title: 'Save Failed', text: 'Failed to save documentation changes: ' + error, icon: 'error', confirmButtonColor: '#3973e1' }); return; } if (result && result.success) { Swal.fire({ title: 'Saved Successfully', text: 'Documentation has been updated successfully.', icon: 'success', confirmButtonColor: '#3973e1', timer: 2000, showConfirmButton: false }); exitEditMode(); if (currentArticleData.id) { loadArticle(currentArticleData.id); } } else { Swal.fire({ title: 'Save Failed', text: 'Failed to save documentation changes.', icon: 'error', confirmButtonColor: '#3973e1' }); } }); } function collectEditedContent() { var content = { title: '', metadata: {}, sections: [] }; var articleTitle = document.getElementById('articleTitle'); if (articleTitle) { content.title = articleTitle.textContent.trim(); } var readingTime = document.getElementById('readingTime'); if (readingTime) { content.metadata.estimated_reading_time = readingTime.textContent.trim(); } var difficultyLevel = document.getElementById('difficultyLevel'); if (difficultyLevel) { content.metadata.difficulty_level = difficultyLevel.textContent.trim(); } if (currentArticleData.metadata) { content.metadata.author = currentArticleData.metadata.author || 'Elecare.ai Team'; content.metadata.target_audience = Array.isArray(currentArticleData.metadata.target_audience) ? currentArticleData.metadata.target_audience : []; content.metadata.tags = Array.isArray(currentArticleData.metadata.tags) ? currentArticleData.metadata.tags : []; content.metadata.related_articles = Array.isArray(currentArticleData.metadata.related_articles) ? currentArticleData.metadata.related_articles : []; content.metadata.version = currentArticleData.metadata.version || '1.0'; } content.category = currentArticleData.category || ''; var sections = document.querySelectorAll('.contentSection'); for (var i = 0; i < sections.length; i++) { var section = sections[i]; content.sections.push({ type: 'content', nodes: extractElementStructure(section) }); } return content; } if (!docInitialized) { initializeDocumentation(); }