enable markdown editor link fixes #25

This commit is contained in:
rimu 2024-02-28 20:12:57 +13:00
parent ee806ba06c
commit da0fc848d9
9 changed files with 149 additions and 57 deletions

View file

@ -11,6 +11,7 @@ document.addEventListener("DOMContentLoaded", function () {
setupKeyboardShortcuts();
setupTopicChooser();
setupConversationChooser();
setupMarkdownEditorEnabler();
});
@ -551,7 +552,26 @@ function displayTimeTracked() {
}
}
/*register a service worker */
function setupMarkdownEditorEnabler() {
const markdownEnablerLinks = document.querySelectorAll('.markdown_editor_enabler');
markdownEnablerLinks.forEach(function(link) {
link.addEventListener('click', function(event) {
event.preventDefault();
const dataId = link.dataset.id;
if(dataId) {
var downarea = new DownArea({
elem: document.querySelector('#' + dataId),
resize: DownArea.RESIZE_VERTICAL,
hide: ['heading', 'bold-italic'],
});
setupAutoResize(dataId);
link.style.display = 'none';
}
});
});
}
/* register a service worker */
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/static/service_worker.js', {scope: '/static/'}).then(function(registration) {
@ -559,7 +579,7 @@ if ('serviceWorker' in navigator) {
// console.log('ServiceWorker2 registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker2 registration failed: ', err);
console.log('ServiceWorker registration failed: ', err);
});
});
}

View file

@ -1255,4 +1255,22 @@ fieldset legend {
right: 0;
}
#post_reply_markdown_editor_enabler {
display: none;
position: absolute;
bottom: 3px;
right: 0;
}
@media (min-width: 768px) {
#post_reply_markdown_editor_enabler {
display: inline-block;
}
}
.create_post_markdown_editor_enabler {
text-align: right;
margin-bottom: 10px;
display: block;
}
/*# sourceMappingURL=structure.css.map */

View file

@ -934,4 +934,20 @@ fieldset {
bottom: 0;
right: 0;
}
}
#post_reply_markdown_editor_enabler {
display: none;
position: absolute;
bottom: 3px;
right: 0;
@include breakpoint(phablet) {
display: inline-block;
}
}
.create_post_markdown_editor_enabler {
text-align: right;
margin-bottom: 10px;
display: block;
}

View file

@ -41,7 +41,7 @@
<link href="{{ url_for('static', filename='structure.css', changed=getmtime('structure.css')) }}" type="text/css" rel="stylesheet" />
<link href="{{ url_for('static', filename='styles.css', changed=getmtime('styles.css')) }}" type="text/css" rel="stylesheet" />
<link href="{{ url_for('static', filename='themes/high_contrast/styles.css') }}" type="text/css" rel="alternate stylesheet" title="High contrast" />
{% if markdown_editor %}
{% if not low_bandwidth %}
<link href="{{ url_for('static', filename='js/markdown/downarea.css') }}" type="text/css" rel="stylesheet" />
{% endif %}
{% if theme() and file_exists('app/templates/themes/' + theme() + '/styles.css') %}
@ -235,7 +235,7 @@
{% endif %}
<script type="text/javascript" src="{{ url_for('static', filename='js/htmx.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/scripts.js', changed=getmtime('js/scripts.js')) }}"></script>
{% if markdown_editor and not low_bandwidth %}
{% if not low_bandwidth %}
<script type="text/javascript" src="{{ url_for('static', filename='js/markdown/downarea.js') }}"></script>
{% endif %}
{% if theme() and file_exists('app/templates/themes/' + theme() + '/scripts.js') %}

View file

@ -28,34 +28,42 @@
<div class="tab-pane fade show active" id="discussion-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
{{ render_field(form.discussion_title) }}
{{ render_field(form.discussion_body) }}
{% if markdown_editor %}
<script nonce="{{ session['nonce'] }}">
window.addEventListener("load", function () {
var downarea = new DownArea({
elem: document.querySelector('#discussion_body'),
resize: DownArea.RESIZE_VERTICAL,
hide: ['heading', 'bold-italic'],
});
setupAutoResize('discussion_body');
});
</script>
{% if not low_bandwidth %}
{% if markdown_editor %}
<script nonce="{{ session['nonce'] }}">
window.addEventListener("load", function () {
var downarea = new DownArea({
elem: document.querySelector('#discussion_body'),
resize: DownArea.RESIZE_VERTICAL,
hide: ['heading', 'bold-italic'],
});
setupAutoResize('discussion_body');
});
</script>
{% else %}
<a href="#" aria-hidden="true" class="markdown_editor_enabler create_post_markdown_editor_enabler" data-id="discussion_body">{{ _('Enable markdown editor') }}</a>
{% endif %}
{% endif %}
</div>
<div class="tab-pane fade" id="link-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
{{ render_field(form.link_title) }}
{{ render_field(form.link_url) }}
{{ render_field(form.link_body) }}
{% if markdown_editor %}
<script nonce="{{ session['nonce'] }}">
window.addEventListener("load", function () {
var downarea = new DownArea({
elem: document.querySelector('#link_body'),
resize: DownArea.RESIZE_VERTICAL,
hide: ['heading', 'bold-italic'],
});
setupAutoResize('link_body');
});
</script>
{% if not low_bandwidth %}
{% if markdown_editor %}
<script nonce="{{ session['nonce'] }}">
window.addEventListener("load", function () {
var downarea = new DownArea({
elem: document.querySelector('#link_body'),
resize: DownArea.RESIZE_VERTICAL,
hide: ['heading', 'bold-italic'],
});
setupAutoResize('link_body');
});
</script>
{% else %}
<a href="#" aria-hidden="true" class="markdown_editor_enabler create_post_markdown_editor_enabler" data-id="link_body">{{ _('Enable markdown editor') }}</a>
{% endif %}
{% endif %}
</div>
<div class="tab-pane fade" id="image-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
@ -64,17 +72,21 @@
{{ render_field(form.image_alt_text) }}
<small class="field_hint">{{ _('Describe the image, to help visually impaired people.') }}</small>
{{ render_field(form.image_body) }}
{% if markdown_editor %}
<script nonce="{{ session['nonce'] }}">
window.addEventListener("load", function () {
var downarea = new DownArea({
elem: document.querySelector('#image_body'),
resize: DownArea.RESIZE_VERTICAL,
hide: ['heading', 'bold-italic'],
});
setupAutoResize('image_body');
});
</script>
{% if not low_bandwidth %}
{% if markdown_editor %}
<script nonce="{{ session['nonce'] }}">
window.addEventListener("load", function () {
var downarea = new DownArea({
elem: document.querySelector('#image_body'),
resize: DownArea.RESIZE_VERTICAL,
hide: ['heading', 'bold-italic'],
});
setupAutoResize('image_body');
});
</script>
{% else %}
<a href="#" aria-hidden="true" class="markdown_editor_enabler create_post_markdown_editor_enabler" data-id="image_body">{{ _('Enable markdown editor') }}</a>
{% endif %}
{% endif %}
</div>
<div class="tab-pane fade" id="poll-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">

View file

@ -21,17 +21,21 @@
<p>{{ _('This post is hosted on beehaw.org which has <a href="https://docs.beehaw.org/docs/core-principles/what-is-beehaw/" target="_blank" rel="nofollow">higher standards of behaviour than most places. Be nice</a>.') }}</p>
{% endif %}
{{ render_form(form) }}
{% if markdown_editor %}
<script nonce="{{ session['nonce'] }}">
window.addEventListener("load", function () {
var downarea = new DownArea({
elem: document.querySelector('#body'),
resize: DownArea.RESIZE_VERTICAL,
hide: ['heading', 'bold-italic'],
{% if not low_bandwidth %}
{% if markdown_editor %}
<script nonce="{{ session['nonce'] }}">
window.addEventListener("load", function () {
var downarea = new DownArea({
elem: document.querySelector('#body'),
resize: DownArea.RESIZE_VERTICAL,
hide: ['heading', 'bold-italic'],
});
setupAutoResize('body');
});
setupAutoResize('body');
});
</script>
</script>
{% else %}
<a href="#" aria-hidden="true" id="post_reply_markdown_editor_enabler" class="markdown_editor_enabler" data-id="body">{{ _('Enable markdown editor') }}</a>
{% endif %}
{% endif %}
</div>
</div>

View file

@ -23,17 +23,21 @@
<p>{{ _('This post is hosted on beehaw.org which has <a href="https://docs.beehaw.org/docs/core-principles/what-is-beehaw/" target="_blank" rel="nofollow">high er standards of behaviour than most places. Be nice</a>.') }}</p>
{% endif %}
{{ render_form(form) }}
{% if markdown_editor %}
<script nonce="{{ session['nonce'] }}">
window.addEventListener("load", function () {
var downarea = new DownArea({
elem: document.querySelector('#body'),
resize: DownArea.RESIZE_VERTICAL,
hide: ['heading', 'bold-italic'],
{% if not low_bandwidth %}
{% if markdown_editor %}
<script nonce="{{ session['nonce'] }}">
window.addEventListener("load", function () {
var downarea = new DownArea({
elem: document.querySelector('#body'),
resize: DownArea.RESIZE_VERTICAL,
hide: ['heading', 'bold-italic'],
});
setupAutoResize('body');
});
setupAutoResize('body');
});
</script>
</script>
{% else %}
<a href="#" aria-hidden="true" id="post_reply_markdown_editor_enabler" class="markdown_editor_enabler" data-id="body">{{ _('Enable markdown editor') }}</a>
{% endif %}
{% endif %}
</div>
</div>

View file

@ -24,6 +24,23 @@
{{ render_field(form.password_field) }}
<hr />
{{ render_field(form.about) }}
{% if not low_bandwidth %}
{% if markdown_editor %}
<script nonce="{{ session['nonce'] }}">
window.addEventListener("load", function () {
var downarea = new DownArea({
elem: document.querySelector('#about'),
resize: DownArea.RESIZE_VERTICAL,
hide: ['heading', 'bold-italic'],
value: {{ form.about.data | tojson | safe }}
});
setupAutoResize('about');
});
</script>
{% else %}
<a href="#" aria-hidden="true" class="markdown_editor_enabler create_post_markdown_editor_enabler" data-id="about">{{ _('Enable markdown editor') }}</a>
{% endif %}
{% endif %}
{{ render_field(form.matrixuserid) }}
<small class="field_hint">e.g. @something:matrix.org. Include leading @ and use : before server</small>
{{ render_field(form.profile_file) }}

View file

@ -140,6 +140,7 @@ def edit_profile(actor):
form.password_field.data = ''
return render_template('user/edit_profile.html', title=_('Edit profile'), form=form, user=current_user,
markdown_editor=current_user.markdown_editor,
moderating_communities=moderating_communities(current_user.get_id()),
joined_communities=joined_communities(current_user.get_id())
)