-
Notifications
You must be signed in to change notification settings - Fork 1.7k
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.
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
Addons: integrate with new beta addons flyout #1526
base: master
Are you sure you want to change the base?
Changes from 20 commits
c1ea98e
476abbd
09c6a18
bc09448
71c978e
70f94e1
f6edac2
04d7909
775addd
e068ac2
cb78b36
577f5a6
6140050
92f65aa
7a743bb
7671e07
356cd80
0033307
ef0a57e
ecebe4c
c805605
131de0d
53e32c6
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,34 +1,132 @@ | ||
{% if READTHEDOCS %} | ||
{# Add rst-badge after rst-versions for small badge style. #} | ||
<div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="{{ _('Versions') }}"> | ||
<span class="rst-current-version" data-toggle="rst-current-version"> | ||
<span class="fa fa-book"> Read the Docs</span> | ||
v: {{ current_version }} | ||
<span class="fa fa-caret-down"></span> | ||
</span> | ||
<div class="rst-other-versions"> | ||
<!-- This style is injected ONLY on Read the Docs and it's missing. --> | ||
<style> | ||
.rtd-current-item { | ||
font-weight: bold; | ||
} | ||
</style> | ||
|
||
<script type="text/javascript"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Similar to above, we should no longer be using inline |
||
function renderLanguages(config) { | ||
if (!config.projects.translations.length) { | ||
return ""; | ||
} | ||
|
||
const languagesHTML = ` | ||
<dl> | ||
<dt>{{ _('Languages') }}</dt> | ||
${ config.projects.translations.map( | ||
(translation) => ` | ||
<dd ${ translation.slug == config.projects.current.slug ? 'class="rtd-current-item"' : '' }> | ||
<a href="${ translation.urls.documentation }">${ translation.language.code }</a> | ||
</dd> | ||
`).join("\n")} | ||
</dl> | ||
`; | ||
return languagesHTML; | ||
} | ||
|
||
function renderVersions(config) { | ||
if (!config.versions.active.length) { | ||
return ""; | ||
} | ||
const versionsHTML = ` | ||
<dl> | ||
<dt>{{ _('Versions') }}</dt> | ||
{% for slug, url in versions %} | ||
<dd><a href="{{ url }}">{{ slug }}</a></dd> | ||
{% endfor %} | ||
${ config.versions.active.map( | ||
(version) => ` | ||
<dd ${ version.slug === config.versions.current.slug ? 'class="rtd-current-item"' : '' }> | ||
<a href="${ version.urls.documentation }">${ version.slug }</a> | ||
</dd> | ||
`).join("\n")} | ||
</dl> | ||
`; | ||
return versionsHTML; | ||
} | ||
|
||
function renderDownloads(config) { | ||
if (!Object.keys(config.versions.current.downloads).length) { | ||
return ""; | ||
} | ||
const downloadsNameDisplay = { | ||
pdf: "PDF", | ||
epub: "Epub", | ||
humitos marked this conversation as resolved.
Show resolved
Hide resolved
|
||
htmlzip: "HTML", | ||
}; | ||
|
||
const downloadsHTML = ` | ||
<dl> | ||
<dt>{{ _('Downloads') }}</dt> | ||
{% for type, url in downloads %} | ||
<dd><a href="{{ url }}">{{ type }}</a></dd> | ||
{% endfor %} | ||
</dl> | ||
<dl> | ||
{# Translators: The phrase "Read the Docs" is not translated #} | ||
<dt>{{ _('On Read the Docs') }}</dt> | ||
<dd> | ||
<a href="//{{ PRODUCTION_DOMAIN }}/projects/{{ slug }}/?fromdocs={{ slug }}">{{ _('Project Home') }}</a> | ||
</dd> | ||
${ Object.entries(config.versions.current.downloads).map( | ||
([name, url]) => ` | ||
<dd> | ||
<a href="//{{ PRODUCTION_DOMAIN }}/builds/{{ slug }}/?fromdocs={{ slug }}">{{ _('Builds') }}</a> | ||
<a href="${ url }">${ downloadsNameDisplay[name] }</a> | ||
</dd> | ||
`).join("\n")} | ||
</dl> | ||
</div> | ||
</div> | ||
{% endif %} | ||
`; | ||
return downloadsHTML; | ||
} | ||
|
||
document.addEventListener("readthedocs-addons-data-ready", function(event) { | ||
const config = event.detail.data(); | ||
|
||
const flyout = ` | ||
<div class="rst-versions" data-toggle="rst-versions" role="note"> | ||
<span class="rst-current-version" data-toggle="rst-current-version"> | ||
<span class="fa fa-book"> Read the Docs</span> | ||
v: ${ config.versions.current.slug } | ||
<span class="fa fa-caret-down"></span> | ||
</span> | ||
<div class="rst-other-versions"> | ||
<div class="injected"> | ||
${ renderLanguages(config) } | ||
${ renderVersions(config) } | ||
${ renderDownloads(config) } | ||
<dl> | ||
<dt>{{ _('On Read the Docs') }}</dt> | ||
<dd> | ||
<a href="${ config.projects.current.urls.home }">{{ _('Project Home') }}</a> | ||
</dd> | ||
<dd> | ||
<a href="${ config.projects.current.urls.builds }">{{ _('Builds') }}</a> | ||
</dd> | ||
<dd> | ||
<a href="${ config.projects.current.urls.downloads }">{{ _('Downloads') }}</a> | ||
</dd> | ||
</dl> | ||
<dl> | ||
<dt>{{ _('Search') }}</dt> | ||
<dd> | ||
<div style="padding: 6px;"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This should be moved to our CSS rules, hardcoded element styles should be avoided. |
||
<form id="flyout-search-form"> | ||
<input | ||
class="wy-form" | ||
type="text" | ||
name="q" | ||
aria-label="{{ _('Search docs') }}" | ||
placeholder="{{ _('Search docs') }}" | ||
/> | ||
</form> | ||
</div> | ||
</dd> | ||
</dl> | ||
<hr /> | ||
<small> | ||
<span>Hosted by <a href="https://readthedocs.org">Read the Docs</a></span> | ||
<span> · </span> | ||
<a href="https://docs.readthedocs.io/page/privacy-policy.html">{{ _('Privacy Policy') }}</a> | ||
</small> | ||
</div> | ||
</div> | ||
`; | ||
|
||
// Inject the generated flyout into the body HTML element. | ||
document.body.insertAdjacentHTML("beforeend", flyout); | ||
|
||
// Trigger the Read the Docs Addons Search modal when clicking on the "Search" form from inside the flyout. | ||
document.querySelector("#flyout-search-form").addEventListener("focusin", () => { | ||
const event = new CustomEvent("readthedocs-search-show"); | ||
document.dispatchEvent(event); | ||
}); | ||
}); | ||
</script> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For a beta release of the theme, we should put CSS in the SASS source files instead of an inline
style
.