From 4f44bf375fb971abfe67cb240f02ccbd610c4e9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gaute=20Fl=C3=A6gstad?= Date: Sat, 4 Oct 2025 21:45:49 +0200 Subject: [PATCH] style(#5): :lipstick: Move inline styling to the linked css file, and ran format --- index.html | 5 +- src/ElevationControl/elevationControl.js | 1 - src/MeasurementControl/measurementsPanel.css | 34 ++++++- src/MeasurementControl/measurementsPanel.js | 99 +++++++++++++++----- 4 files changed, 110 insertions(+), 29 deletions(-) diff --git a/index.html b/index.html index c32c195..85732a9 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,10 @@ href="/libs/jstree/themes/mixed/style.css" /> - + diff --git a/src/ElevationControl/elevationControl.js b/src/ElevationControl/elevationControl.js index 276456b..a8f4ebb 100644 --- a/src/ElevationControl/elevationControl.js +++ b/src/ElevationControl/elevationControl.js @@ -82,7 +82,6 @@ function moveElevationContainer() { //initiate and orchestrate all funcitons to render the Evelation control section of the sidebar propperly window.initElevationControls = function initElevationControls(viewer) { - //Creates the section createElevationPanel(viewer) diff --git a/src/MeasurementControl/measurementsPanel.css b/src/MeasurementControl/measurementsPanel.css index 18af527..f227535 100644 --- a/src/MeasurementControl/measurementsPanel.css +++ b/src/MeasurementControl/measurementsPanel.css @@ -227,10 +227,30 @@ color: #fff; } -.m-list-title, .m-data-title { +.measurements-panel { + position: relative; +} +.measurement-tools-host { + margin-bottom: 6px; +} +.measurement-items-root { + max-height: 260px; + overflow: auto; + margin-bottom: 6px; + border: 1px solid #333; + border-radius: 4px; +} +.measurement-info-message { + padding: 4px 8px; + font-size: 12px; + opacity: 0.6; +} + +.m-list-title, +.m-data-title { font-size: 12px; font-weight: 600; - letter-spacing: .5px; + letter-spacing: 0.5px; text-transform: uppercase; padding: 6px 8px 4px 14px; margin-left: 2px; @@ -239,5 +259,11 @@ align-items: center; gap: 6px; } -.m-list-title { margin: 6px 0 4px; } -.m-data-title { margin: 10px 0 8px; border-top:1px solid #303a3f; padding-top:10px; } +.m-list-title { + margin: 6px 0 4px; +} +.m-data-title { + margin: 10px 0 8px; + border-top: 1px solid #303a3f; + padding-top: 10px; +} diff --git a/src/MeasurementControl/measurementsPanel.js b/src/MeasurementControl/measurementsPanel.js index e6b32f7..c834839 100644 --- a/src/MeasurementControl/measurementsPanel.js +++ b/src/MeasurementControl/measurementsPanel.js @@ -15,11 +15,19 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) { if (menu) { const header = document.createElement('h3') header.id = 'menu_point_measurements' - header.innerHTML = 'Measurements' + const headerSpan = document.createElement('span') + headerSpan.textContent = 'Measurements' + header.appendChild(headerSpan) const panel = document.createElement('div') - panel.className = 'pv-menu-list' - panel.innerHTML = - '
' + panel.className = 'pv-menu-list measurements-panel' + const toolsHostDiv = document.createElement('div') + toolsHostDiv.id = 'measurement_tools_host' + toolsHostDiv.className = 'measurement-tools-host' + const listContainerDiv = document.createElement('div') + listContainerDiv.id = 'measurements_list' + listContainerDiv.className = 'auto' + panel.appendChild(toolsHostDiv) + panel.appendChild(listContainerDiv) // Insert before filters/tools if possible, else append at end const tools = document.getElementById('menu_tools') if (tools) { @@ -39,7 +47,7 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) { if ($(menu).accordion && $(menu).data('uiAccordion')) return if (window.jQuery) { const $p = window.jQuery(panel) - ;($p.is(':visible') ? $p.slideUp(350) : $p.slideDown(350)) + $p.is(':visible') ? $p.slideUp(350) : $p.slideDown(350) return } }) @@ -55,8 +63,7 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) { let listRoot = document.createElement('div') listRoot.id = 'measurement_items' - listRoot.style.cssText = - 'max-height:260px; overflow:auto; margin-bottom:6px; border:1px solid #333; border-radius:4px;' + listRoot.className = 'measurement-items-root' const listTitle = document.createElement('div') listTitle.className = 'm-list-title' listTitle.textContent = 'List of measurements' @@ -168,14 +175,20 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) { ) } if (targetContainer && targetContainer.children.length === 0) { - targetContainer.innerHTML = - '
Select a measurement to view its properties here
' + targetContainer.innerHTML = '' + const msg = document.createElement('div') + msg.className = 'measurement-info-message' + msg.textContent = 'Select a measurement to view its properties here' + targetContainer.appendChild(msg) } } if (targetContainer) { - targetContainer.innerHTML = - '
Select a measurement to view its properties here
' + targetContainer.innerHTML = '' + const msg2 = document.createElement('div') + msg2.className = 'measurement-info-message' + msg2.textContent = 'Select a measurement to view its properties here' + targetContainer.appendChild(msg2) } // Helper to decide if a uuid is a measurement-like object @@ -223,16 +236,38 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) { const order = Array.from(groups.keys()).sort() listRoot.innerHTML = '' if (itemsRaw.length === 0) { - listRoot.innerHTML = '
No measurements
' + const emptyEl = document.createElement('div') + emptyEl.className = 'm-empty' + emptyEl.textContent = 'No measurements' + listRoot.appendChild(emptyEl) return } order.forEach((type) => { const section = document.createElement('div') section.className = 'm-group' const gid = 'g_' + type.toLowerCase() - section.innerHTML = `\n
\n ▾\n ${type}\n \n
\n
` + const header = document.createElement('div') + header.className = 'm-group-header' + header.dataset.group = gid + header.dataset.open = 'true' + const caret = document.createElement('span') + caret.className = 'm-group-caret' + caret.textContent = '▾' + const titleSpan = document.createElement('span') + titleSpan.className = 'm-group-title' + titleSpan.textContent = type + const countSpan = document.createElement('span') + countSpan.className = 'm-group-count' + countSpan.id = gid + '_count' + header.appendChild(caret) + header.appendChild(titleSpan) + header.appendChild(countSpan) + const body = document.createElement('div') + body.className = 'm-group-body' + body.id = gid + '_body' + section.appendChild(header) + section.appendChild(body) listRoot.appendChild(section) - const body = section.querySelector('.m-group-body') groups.get(type).forEach((entry) => { const m = entry.obj const num = perTypeNumbers.get(type)?.get(m.uuid) || 0 @@ -240,14 +275,24 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) { const row = document.createElement('div') row.className = 'm-row' row.dataset.uuid = m.uuid - const icon = TYPE_ICONS[type] || TYPE_ICONS['Measurement'] - row.innerHTML = - `${icon}${baseName}` + - '' + const iconSpan = document.createElement('span') + iconSpan.className = 'm-row-icon' + iconSpan.textContent = TYPE_ICONS[type] || TYPE_ICONS['Measurement'] + const labelSpan = document.createElement('span') + labelSpan.className = 'm-row-label' + labelSpan.title = baseName + labelSpan.textContent = baseName + const delBtn = document.createElement('button') + delBtn.className = 'm-row-delete' + delBtn.dataset.act = 'delete' + delBtn.title = 'Delete' + delBtn.textContent = '×' + row.appendChild(iconSpan) + row.appendChild(labelSpan) + row.appendChild(delBtn) body.appendChild(row) }) - section.querySelector('#' + gid + '_count').textContent = - groups.get(type).length + countSpan.textContent = groups.get(type).length }) } @@ -351,7 +396,9 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) { ;[...listRoot.querySelectorAll('.m-row[data-uuid]')].forEach((el) => { el.classList.toggle('active', el.dataset.uuid === uuid) }) - const thisRow = listRoot.querySelector(`.m-row[data-uuid="${uuid}"] .m-row-label`) + const thisRow = listRoot.querySelector( + `.m-row[data-uuid="${uuid}"] .m-row-label` + ) if (thisRow) { lastSelection.uuid = uuid lastSelection.label = thisRow.textContent.trim() @@ -372,7 +419,9 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) { ;[...listRoot.querySelectorAll('.m-row[data-uuid]')].forEach((el) => { el.classList.toggle('active', el.dataset.uuid === uuid) }) - const activeRow = listRoot.querySelector(`.m-row[data-uuid="${uuid}"] .m-row-label`) + const activeRow = listRoot.querySelector( + `.m-row[data-uuid="${uuid}"] .m-row-label` + ) if (activeRow) { lastSelection.uuid = uuid lastSelection.label = activeRow.textContent.trim() @@ -403,7 +452,11 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) { const measLi = measOptions.closest('li') || measOptions let prev = measLi.previousElementSibling for (let i = 0; i < 3 && prev; i++) { - if (prev.classList && prev.classList.contains('divider') && /Measurement/i.test(prev.textContent || '')) { + if ( + prev.classList && + prev.classList.contains('divider') && + /Measurement/i.test(prev.textContent || '') + ) { prev.remove() break }