Make "Expand all" translatable

Move HTML from JS to EJS

I don't know how to register i18n helper to handlebars,
so "export to raw HTML" has not been touched.
You can do the same for html.hbs if you want.

Signed-off-by: Tamotsu Takahashi <ttakah@gmail.com>
This commit is contained in:
Tamotsu Takahashi 2020-09-03 09:46:13 +09:00
parent 66fdf7b49c
commit dec2f98d9b
2 changed files with 18 additions and 9 deletions

View File

@ -840,13 +840,16 @@ let tocExpand = false
function checkExpandToggle () {
const toc = $('.ui-toc-dropdown .toc')
const toggle = $('.expand-toggle')
const expand = $('.expand-toggle.expand-all')
const collapse = $('.expand-toggle.collapse-all')
if (!tocExpand) {
toc.removeClass('expand')
toggle.text('Expand all')
expand.show()
collapse.hide()
} else {
toc.addClass('expand')
toggle.text('Collapse all')
expand.hide()
collapse.show()
}
}
@ -865,11 +868,12 @@ export function generateToc (id) {
})
/* eslint-enable no-unused-vars */
if (target.text() === 'undefined') { target.html('') }
const tocMenu = $('<div class="toc-menu"></div')
const toggle = $('<a class="expand-toggle" href="#">Expand all</a>')
const backtotop = $('<a class="back-to-top" href="#">Back to top</a>')
const gotobottom = $('<a class="go-to-bottom" href="#">Go to bottom</a>')
checkExpandToggle()
const tocMenu = $('body').children('.toc-menu')
target.append(tocMenu.clone().show())
const toggle = $('.expand-toggle', target)
const backtotop = $('.back-to-top', target)
const gotobottom = $('.go-to-bottom', target)
toggle.click(e => {
e.preventDefault()
e.stopPropagation()
@ -888,8 +892,6 @@ export function generateToc (id) {
if (window.scrollToBottom) { window.scrollToBottom() }
removeHash()
})
tocMenu.append(toggle).append(backtotop).append(gotobottom)
target.append(tocMenu)
}
// smooth all hash trigger scrolling

View File

@ -49,6 +49,13 @@
<div id="ui-toc-affix" class="ui-affix-toc ui-toc-dropdown unselectable hidden-print" data-spy="affix" style="top:51px;display:none;"></div>
</div>
</div>
<!-- toc menu -->
<div class="toc-menu" style="display: none;">
<a class="expand-toggle expand-all" href="#"><%= __('Expand all') %></a>
<a class="expand-toggle collapse-all" href="#" style="display: none;"><%= __('Collapse all') %></a>
<a class="back-to-top" href="#"><%= __('Back to top') %></a>
<a class="go-to-bottom" href="#"><%= __('Go to bottom') %></a>
</div>
<!-- clipboard modal -->
<div class="modal fade" id="clipboardModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">