Skip to content

Commit 414bf7e

Browse files
AltamashShaikhAltamashShaikh
authored
Merge pull request #952 from matomo-org/PG-5080-cleanup-parent-page
Cleanup docs parent page, #PG-5080
2 parents 1988fc9 + dc645be commit 414bf7e

6 files changed

Lines changed: 479 additions & 5 deletions

File tree

‎app/public/css/documentation.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,3 +73,77 @@
7373
.guide-sections .panel-heading {
7474
background: white;
7575
}
76+
77+
.documentation #api-docs-list {
78+
columns: 3;
79+
column-gap: 24px;
80+
list-style-type: none;
81+
padding: 0;
82+
margin: 0;
83+
}
84+
85+
.documentation #api-docs-list li {
86+
break-inside: avoid;
87+
margin-bottom: 8px;
88+
}
89+
90+
.documentation .collapsed {
91+
display: none;
92+
}
93+
94+
.documentation h2.api-swagger-index-heading {
95+
padding-bottom: 0;
96+
}
97+
98+
.documentation .api-swagger-index-toggle {
99+
position: relative;
100+
display: flex;
101+
align-items: center;
102+
width: 100%;
103+
padding: 7px 32px 7px 0;
104+
border: 0;
105+
background: transparent;
106+
color: inherit;
107+
font: inherit;
108+
line-height: inherit;
109+
text-align: left;
110+
}
111+
112+
.documentation .api-swagger-index-toggle:focus {
113+
outline: 2px solid #337ab7;
114+
outline-offset: 2px;
115+
}
116+
117+
.documentation .api-swagger-index-toggle-label {
118+
min-width: 0;
119+
}
120+
121+
.documentation .api-swagger-index-toggle-icon {
122+
position: absolute;
123+
right: 0;
124+
top: 50%;
125+
display: block;
126+
width: 24px;
127+
margin-top: -12px;
128+
font-size: 24px;
129+
font-weight: bold;
130+
line-height: 1;
131+
font-family: monospace;
132+
text-align: center;
133+
}
134+
135+
.documentation.api-swagger-index-collapsible-ready .api-swagger-index-collapsed {
136+
display: none;
137+
}
138+
139+
@media (max-width: 991px) {
140+
.documentation #api-docs-list {
141+
columns: 2;
142+
}
143+
}
144+
145+
@media (max-width: 767px) {
146+
.documentation #api-docs-list {
147+
columns: 1;
148+
}
149+
}

‎app/public/css/swagger-ui-overrides.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,11 @@
185185
display: none;
186186
}
187187

188+
/*Matomo body css makes fonts too large*/
189+
.swagger-ui .parameters-col_description {
190+
font-size: 14px;
191+
}
192+
188193
/* Revert bootstrap global <pre> styles for Swagger version badges only. */
189194
.swagger-ui .info .title small pre.version {
190195
background-color: transparent;

‎app/routes/page.php‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,6 @@ function renderGuide(Slim\Views\Twig $view, Response $response, Psr\Http\Message
116116
'selectedPiwikVersion' => Environment::getPiwikVersion(),
117117
'urlIfAvailableInNewerVersion' => (Environment::isLatestPiwikVersion() ? false : Url::getUrlIfDocumentIsAvailableInPiwikVersion($request->getUri()->getPath(), LATEST_PIWIK_DOCS_VERSION)),
118118
'pluginSpecs' => $pluginSpecs,
119-
'hideGuideSections' => true,
120119
]);
121120
});
122121

‎app/templates/api-swagger-index.twig‎

Lines changed: 167 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
{% if pluginSpecs is empty %}
77
<p>No API modules are currently available.</p>
88
{% else %}
9-
<h2>Available API modules</h2>
10-
<ul>
9+
<ul id="api-docs-list">
1110
{% for pluginSpec in pluginSpecs %}
1211
<li>
1312
<a href="{{ ('/api-reference/api/' ~ pluginSpec.slug)|completeUrl }}">{{ pluginSpec.name }}</a>
@@ -16,3 +15,169 @@
1615
</ul>
1716
{% endif %}
1817
{% endblock %}
18+
19+
{% block footer %}
20+
{{ parent() }}
21+
22+
<script type="text/javascript">
23+
(function () {
24+
let collapsedIndicator = '+';
25+
let expandedIndicator = '−';
26+
27+
function setSectionCollapsedState(section, isCollapsed) {
28+
section.button.setAttribute('aria-expanded', isCollapsed ? 'false' : 'true');
29+
section.heading.classList.toggle('api-swagger-index-heading-collapsed', isCollapsed);
30+
section.indicator.textContent = isCollapsed ? collapsedIndicator : expandedIndicator;
31+
32+
section.elements.forEach(function (element) {
33+
element.classList.toggle('api-swagger-index-collapsed', isCollapsed);
34+
element.setAttribute('aria-hidden', isCollapsed ? 'true' : 'false');
35+
});
36+
}
37+
38+
function createSectionButton(heading) {
39+
let button = document.createElement('button');
40+
button.type = 'button';
41+
button.className = 'api-swagger-index-toggle';
42+
button.setAttribute('aria-expanded', 'false');
43+
44+
let label = document.createElement('span');
45+
label.className = 'api-swagger-index-toggle-label';
46+
47+
while (heading.firstChild) {
48+
label.appendChild(heading.firstChild);
49+
}
50+
51+
let indicator = document.createElement('span');
52+
indicator.className = 'api-swagger-index-toggle-icon';
53+
indicator.setAttribute('aria-hidden', 'true');
54+
indicator.textContent = collapsedIndicator;
55+
56+
button.appendChild(label);
57+
button.appendChild(indicator);
58+
59+
heading.appendChild(button);
60+
61+
return button;
62+
}
63+
64+
function shouldStartCollapsed(section) {
65+
return !section.elements.some(function (element) {
66+
return element.id === 'api-docs-list';
67+
});
68+
}
69+
70+
function sectionContainsTarget(section, targetId) {
71+
if (section.heading.id === targetId) {
72+
return true;
73+
}
74+
75+
return section.elements.some(function (element) {
76+
if (element.id === targetId) {
77+
return true;
78+
}
79+
80+
return Array.prototype.some.call(element.querySelectorAll('[id]'), function (child) {
81+
return child.id === targetId;
82+
});
83+
});
84+
}
85+
86+
function scrollToHashTarget(targetId) {
87+
let target = document.getElementById(targetId);
88+
if (!target) {
89+
return;
90+
}
91+
92+
target.scrollIntoView();
93+
}
94+
95+
function expandSectionForHash(sections, hash) {
96+
let targetId = (hash || '').replace(/^#/, '');
97+
if (!targetId) {
98+
return;
99+
}
100+
101+
let didExpand = false;
102+
sections.forEach(function (section) {
103+
if (sectionContainsTarget(section, targetId)) {
104+
setSectionCollapsedState(section, false);
105+
didExpand = true;
106+
}
107+
});
108+
109+
if (didExpand) {
110+
window.requestAnimationFrame(function () {
111+
scrollToHashTarget(targetId);
112+
});
113+
}
114+
}
115+
116+
function initCollapsibleSections() {
117+
let docsParent = document.querySelector('.documentation');
118+
if (!docsParent) {
119+
return;
120+
}
121+
122+
let sections = [];
123+
let currentSection = null;
124+
125+
Array.prototype.forEach.call(docsParent.children, function (child) {
126+
if (child.tagName === 'H2') {
127+
currentSection = {
128+
heading: child,
129+
elements: []
130+
};
131+
sections.push(currentSection);
132+
133+
return;
134+
}
135+
136+
if (currentSection) {
137+
currentSection.elements.push(child);
138+
}
139+
});
140+
141+
let collapsibleSections = sections.map(function (section) {
142+
if (!section.elements.length) {
143+
return null;
144+
}
145+
146+
section.heading.classList.add('api-swagger-index-heading');
147+
section.button = createSectionButton(section.heading);
148+
section.indicator = section.button.querySelector('.api-swagger-index-toggle-icon');
149+
150+
section.button.addEventListener('click', function () {
151+
let isExpanded = section.button.getAttribute('aria-expanded') === 'true';
152+
setSectionCollapsedState(section, isExpanded);
153+
});
154+
155+
return section;
156+
}).filter(Boolean);
157+
158+
if (!collapsibleSections.length) {
159+
return;
160+
}
161+
162+
docsParent.classList.add('api-swagger-index-collapsible-ready');
163+
164+
collapsibleSections.forEach(function (section) {
165+
setSectionCollapsedState(section, shouldStartCollapsed(section));
166+
});
167+
168+
expandSectionForHash(collapsibleSections, window.location.hash);
169+
170+
window.addEventListener('hashchange', function () {
171+
expandSectionForHash(collapsibleSections, window.location.hash);
172+
});
173+
}
174+
175+
if (document.readyState === 'loading') {
176+
document.addEventListener('DOMContentLoaded', initCollapsibleSections);
177+
} else {
178+
initCollapsibleSections();
179+
}
180+
})();
181+
182+
</script>
183+
{% endblock %}

‎app/templates/left-menu.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
</div>
4343
{% endif %}
4444

45-
{% if pluginSpecs is defined and pluginSpecs is not empty %}
45+
{% if pluginSpecs is defined and pluginSpecs is not empty and hideGuideSections|default(false) %}
4646
<div class="guide-sections panel panel-default">
4747
<div class="panel-heading">
4848
<h4 class="panel-title">

0 commit comments

Comments
 (0)