Skip to content

Fix anchors for panel headers #454

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yamgent merged 3 commits into from
Nov 6, 2018
Merged

Fix anchors for panel headers #454

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1d248c4
Fix anchors in panel headings
jamos-tay Oct 15, 2018
fa3be99
Make hover apply to wrapper
jamos-tay Oct 30, 2018
bc74909
Replace setup file in expected
jamos-tay Nov 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 9 additions & 8 deletions asset/js/setup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,21 +15,22 @@ function flattenModals() {
});
}

function setupAnchorVisibility() {
jQuery('h1, h2, h3, h4, h5, h6').each((index, heading) => {
jQuery(heading).on('mouseenter', function () {
jQuery(this).children('.fa.fa-anchor').show();
});
jQuery(heading).on('mouseleave', function () {
jQuery(this).children('.fa.fa-anchor').hide();
function setupAnchors() {
jQuery('h1, h2, h3, h4, h5, h6, .header-wrapper').each((index, heading) => {
jQuery(heading).on('mouseenter', () => jQuery(heading).find('.fa.fa-anchor').show());
jQuery(heading).on('mouseleave', () => jQuery(heading).find('.fa.fa-anchor').hide());
});
jQuery('.fa-anchor').each((index, anchor) => {
jQuery(anchor).on('click', function () {
window.location.href = jQuery(this).attr('href');
});
});
}

function executeAfterMountedRoutines() {
flattenModals();
scrollToUrlAnchorHeading();
setupAnchorVisibility();
setupAnchors();
}

function setupSiteNav() {
Expand Down
8 changes: 8 additions & 0 deletions lib/Page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -330,6 +330,14 @@ Page.prototype.addAnchors = function (content) {
$(headingsSelector).each((i, heading) => {
$(heading).append(ANCHOR_HTML.replace('#', `#${$(heading).attr('id')}`));
});
$('panel[header]').each((i, panel) => {
const panelHeading = cheerio.load(md.render(panel.attribs.header), { xmlMode: false });
if (panelHeading(headingsSelector).length >= 1) {
const headingId = $(panelHeading(headingsSelector)[0]).attr('id');
const anchorIcon = ANCHOR_HTML.replace(/"/g, "'").replace('#', `#${headingId}`);
$(panel).attr('header', `${$(panel).attr('header')}${anchorIcon}`);
}
});
}
return $.html();
};
Expand Down
24 changes: 12 additions & 12 deletions test/test_site/expected/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,43 +235,43 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
</ol>
<img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></div>
<h1 id="panel-without-src">Panel without src<a class="fa fa-anchor" href="#panel-without-src"></a></h1>
<panel header="## Panel without src header" expanded="">
<panel header="## Panel without src header<a class='fa fa-anchor' href='#panel-without-src-header'></a>" expanded="">
<div>
<h3 id="panel-without-src-content-heading">Panel without src content heading<a class="fa fa-anchor" href="#panel-without-src-content-heading"></a></h3>
</div>
</panel>
<h1 id="panel-with-normal-src">Panel with normal src<a class="fa fa-anchor" href="#panel-with-normal-src"></a></h1>
<panel header="## Panel with normal src header" src="/test_site\testPanels\PanelNormalSource._include_.html" expanded=""></panel>
<panel header="## Panel with normal src header<a class='fa fa-anchor' href='#panel-with-normal-src-header'></a>" src="/test_site\testPanels\PanelNormalSource._include_.html" expanded=""></panel>
<h1 id="panel-with-src-from-a-page-segment">Panel with src from a page segment<a class="fa fa-anchor" href="#panel-with-src-from-a-page-segment"></a></h1>
<panel header="## Panel with src from a page segment header" src="/test_site\testPanels\PanelSourceContainsSegment._include_.html#segment" expanded="" fragment="segment"></panel>
<panel header="## Panel with src from a page segment header<a class='fa fa-anchor' href='#panel-with-src-from-a-page-segment-header'></a>" src="/test_site\testPanels\PanelSourceContainsSegment._include_.html#segment" expanded="" fragment="segment"></panel>
<h1 id="panel-with-boilerplate">Panel with boilerplate<a class="fa fa-anchor" href="#panel-with-boilerplate"></a></h1>
<panel header="## Boilerplate referencing" src="/test_site\testPanels\boilerTestPanel._include_.html" expanded=""></panel>
<panel header="## Referencing specified path in boilerplate" src="/test_site\testPanels\notInside._include_.html" expanded=""></panel>
<panel header="## Boilerplate referencing<a class='fa fa-anchor' href='#boilerplate-referencing'></a>" src="/test_site\testPanels\boilerTestPanel._include_.html" expanded=""></panel>
<panel header="## Referencing specified path in boilerplate<a class='fa fa-anchor' href='#referencing-specified-path-in-boilerplate'></a>" src="/test_site\testPanels\notInside._include_.html" expanded=""></panel>
<h1 id="nested-panel">Nested panel<a class="fa fa-anchor" href="#nested-panel"></a></h1>
<panel header="## Outer nested panel" src="/test_site\testPanels\NestedPanel._include_.html" expanded=""></panel>
<panel header="## Outer nested panel<a class='fa fa-anchor' href='#outer-nested-panel'></a>" src="/test_site\testPanels\NestedPanel._include_.html" expanded=""></panel>
<h1 id="nested-panel-without-src">Nested panel without src<a class="fa fa-anchor" href="#nested-panel-without-src"></a></h1>
<panel header="## Outer nested panel without src" expanded="">
<panel header="## Outer nested panel without src<a class='fa fa-anchor' href='#outer-nested-panel-without-src'></a>" expanded="">
<h2 id="panel-content-of-outer-nested-panel">Panel content of outer nested panel<a class="fa fa-anchor" href="#panel-content-of-outer-nested-panel"></a></h2>
<panel header="## Inner panel header without src" expanded="">
<panel header="## Inner panel header without src<a class='fa fa-anchor' href='#inner-panel-header-without-src'></a>" expanded="">
<h2 id="panel-content-of-inner-nested-panel">Panel content of inner nested panel<a class="fa fa-anchor" href="#panel-content-of-inner-nested-panel"></a></h2>
</panel>
</panel>
<h1 id="panel-with-src-from-another-markbind-site">Panel with src from another Markbind site<a class="fa fa-anchor" href="#panel-with-src-from-another-markbind-site"></a></h1>
<panel header="## Panel with src from another Markbind site header" src="/test_site\sub_site\index._include_.html" expanded=""></panel>
<panel header="## Panel with src from another Markbind site header<a class='fa fa-anchor' href='#panel-with-src-from-another-markbind-site-header'></a>" src="/test_site\sub_site\index._include_.html" expanded=""></panel>
</div>
<h1 id="modal-with-panel-inside">Modal with panel inside<a class="fa fa-anchor" href="#modal-with-panel-inside"></a></h1>
<p>
<trigger for="modal-with-panel">trigger</trigger>
</p>
<modal title="modal title with panel inside" id="modal-with-panel">
<panel header="## Panel inside modal" expanded="">
<panel header="## Panel inside modal<a class='fa fa-anchor' href='#panel-inside-modal'></a>" expanded="">
<h2 id="panel-content-inside-modal">Panel content inside modal<a class="fa fa-anchor" href="#panel-content-inside-modal"></a></h2>
</panel>
</modal>
<h1 id="unexpanded-panel">Unexpanded panel<a class="fa fa-anchor" href="#unexpanded-panel"></a></h1>
<panel header="## Unexpanded panel header">
<panel header="## Unexpanded panel header<a class='fa fa-anchor' href='#unexpanded-panel-header'></a>">
<h2 id="panel-content-of-unexpanded-panel-should-not-appear-in-search-data">Panel content of unexpanded panel should not appear in search data<a class="fa fa-anchor" href="#panel-content-of-unexpanded-panel-should-not-appear-in-search-data"></a></h2>
<panel header="## Panel header inside unexpanded panel should not appear in search data" expanded="">
<panel header="## Panel header inside unexpanded panel should not appear in search data<a class='fa fa-anchor' href='#panel-header-inside-unexpanded-panel-should-not-appear-in-search-data'></a>" expanded="">
<h2 id="panel-content-inside-unexpanded-panel-should-not-appear-in-search-data">Panel content inside unexpanded panel should not appear in search data<a class="fa fa-anchor" href="#panel-content-inside-unexpanded-panel-should-not-appear-in-search-data"></a></h2>
</panel>
</panel>
Expand Down
17 changes: 9 additions & 8 deletions test/test_site/expected/markbind/js/setup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,21 +15,22 @@ function flattenModals() {
});
}

function setupAnchorVisibility() {
jQuery('h1, h2, h3, h4, h5, h6').each((index, heading) => {
jQuery(heading).on('mouseenter', function () {
jQuery(this).children('.fa.fa-anchor').show();
});
jQuery(heading).on('mouseleave', function () {
jQuery(this).children('.fa.fa-anchor').hide();
function setupAnchors() {
jQuery('h1, h2, h3, h4, h5, h6, .header-wrapper').each((index, heading) => {
jQuery(heading).on('mouseenter', () => jQuery(heading).find('.fa.fa-anchor').show());
jQuery(heading).on('mouseleave', () => jQuery(heading).find('.fa.fa-anchor').hide());
});
jQuery('.fa-anchor').each((index, anchor) => {
Comment thread
jamos-tay marked this conversation as resolved.
jQuery(anchor).on('click', function () {
window.location.href = jQuery(this).attr('href');
});
});
}

function executeAfterMountedRoutines() {
flattenModals();
scrollToUrlAnchorHeading();
setupAnchorVisibility();
setupAnchors();
}

function setupSiteNav() {
Expand Down