yagich/pyrom
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

reintroduce bitty and add progressive enhancement and tabs

Browse Source
This commit is contained in:
Lera Elvoé
2026-05-28 06:41:59 +03:00
parent d2ea0bbd51
commit 160629fca7
6 changed files with 65 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/templates/base.html
View File

@@ -13,6 +13,8 @@
{%- endif -%} {%- endif -%}
</head> </head>
<body> <body>
<bitty-8 data-connect="/static/js/bits/progressive-enhancement.js"></bitty-8>
<bitty-8 data-connect="/static/js/bits/ui.js"></bitty-8>
{%- include 'common/topnav.html' -%} {%- include 'common/topnav.html' -%}
{%- with messages = get_flashed_messages(with_categories=true) -%} {%- with messages = get_flashed_messages(with_categories=true) -%}
{%- if messages -%} {%- if messages -%}
@@ -23,6 +25,7 @@
{%- endwith -%} {%- endwith -%}
{%- block content -%}{%- endblock -%} {%- block content -%}{%- endblock -%}
{%- include 'common/footer.html' -%} {%- include 'common/footer.html' -%}
<script type="module" src="/static/js/vnd/bitty-8.0.0.js"></script>
<script src="{{'/static/js/ui.js' | cachebust}}"></script> <script src="{{'/static/js/ui.js' | cachebust}}"></script>
</body> </body>
</html> </html>

32
app/templates/common/macros.html
View File

@@ -73,10 +73,10 @@
{%- endmacro %} {%- endmacro %}
{% macro tabs(prefix='', labels = []) -%} {% macro tabs(prefix='', labels = []) -%}
<div class="tab-container"> <div class="tab-container" data-r="setTab">
<div class="tab-bar" role="tablist"> <div class="tab-bar" role="tablist">
{%- for tab_label in labels -%} {%- for tab_label in labels -%}
<button type="button" class="tab-button" role="tab" aria-selected="{{'true' if loop.index0==0 else 'false'}}" id="{{prefix+'-'+(tab_label | lower)+'-tab'}}" aria-controls="{{prefix+'-'+(tab_label | lower)+'-content'}}" disabled>{{tab_label}}</button> <button type="button" class="tab-button" role="tab" aria-selected="{{'true' if loop.index0==0 else 'false'}}" id="{{prefix+'-'+(tab_label | lower)+'-tab'}}" aria-controls="{{prefix+'-'+(tab_label | lower)+'-content'}}" disabled data-r="enhance" data-s="setTab" data-tab-index="{{loop.index0}}">{{tab_label}}</button>
{%- endfor -%} {%- endfor -%}
</div> </div>
{%- for tab_label in labels -%} {%- for tab_label in labels -%}
@@ -97,16 +97,16 @@
{%- call(idx) tabs(prefix='babycode', labels=['Write', 'Preview']) -%} {%- call(idx) tabs(prefix='babycode', labels=['Write', 'Preview']) -%}
{%- if idx == 0 -%} {%- if idx == 0 -%}
<span class="babycode-editor-controls"> <span class="babycode-editor-controls">
<span class="button-row"> <span class="button-row js-only" data-r="enhance">
<button type="button" class="minimal" disabled><b>B</b></button> <button type="button" class="minimal" data-babycode-tag="b" data-s="insertBabycode"><b>B</b></button>
<button type="button" class="minimal" disabled><i>i</i></button> <button type="button" class="minimal" data-babycode-tag="i" data-s="insertBabycode"><i>i</i></button>
<button type="button" class="minimal" disabled><s>S</s></button> <button type="button" class="minimal" data-babycode-tag="s" data-s="insertBabycode"><s>S</s></button>
<button type="button" class="minimal" disabled><u>U</u></button> <button type="button" class="minimal" data-babycode-tag="u" data-s="insertBabycode"><u>U</u></button>
<button type="button" class="minimal" disabled><code>://</code></button> <button type="button" class="minimal" data-babycode-tag="url" data-s="insertBabycode"><code>://</code></button>
<button type="button" class="minimal" disabled><code>&lt;/&gt;</code></button> <button type="button" class="minimal" data-babycode-tag="code" data-s="insertBabycode"><code>&lt;/&gt;</code></button>
<button type="button" class="minimal" disabled>1.</button> <button type="button" class="minimal" data-babycode-tag="ol" data-s="insertBabycode">1.</button>
<button type="button" class="minimal" disabled>&bullet;</button> <button type="button" class="minimal" data-babycode-tag="ul" data-s="insertBabycode">&bullet;</button>
<button type="button" class="minimal" disabled><img src="/static/emoji/angry.png" class="emoji"></button> <button type="button" class="minimal"><img src="/static/emoji/angry.png" class="emoji"></button>
</span> </span>
<span class="flex-last">{# stub: char count #}</span> <span class="flex-last">{# stub: char count #}</span>
</span> </span>
@@ -183,12 +183,12 @@
<a class="linkbutton" href="{{url_for('posts.edit', post_id=post.id, _anchor='babycode-content')}}">Edit</a> <a class="linkbutton" href="{{url_for('posts.edit', post_id=post.id, _anchor='babycode-content')}}">Edit</a>
{%- endif -%} {%- endif -%}
{%- if can_reply -%} {%- if can_reply -%}
<button disabled title="This feature requires JavaScript to be enabled.">Quote</button> <button data-r="enhance" disabled title="This feature requires JavaScript to be enabled.">Quote</button>
{%- endif -%} {%- endif -%}
{%- if can_delete -%} {%- if can_delete -%}
<a class="linkbutton critical" href="{{url_for('posts.delete', post_id=post.id)}}">Delete</a> <a class="linkbutton critical" href="{{url_for('posts.delete', post_id=post.id)}}">Delete</a>
{%- endif -%} {%- endif -%}
<button disabled title="This feature requires JavaScript to be enabled.">{{icn_bookmark(24)}}Bookmark&hellip;</button> <button data-r="enhance" disabled title="This feature requires JavaScript to be enabled.">{{icn_bookmark(24)}}Bookmark&hellip;</button>
</span> </span>
{%- endif -%} {%- endif -%}
</div> </div>
@@ -213,10 +213,10 @@
{% set reactors_str = reactors_str + '\n...and many others' %} {% set reactors_str = reactors_str + '\n...and many others' %}
{% endif %} {% endif %}
{% set has_reacted = get_active_user() is not none and get_active_user().username in reactors %} {% set has_reacted = get_active_user() is not none and get_active_user().username in reactors %}
<button type="button" disabled title="{{reactors_str}}" class="minimal {{'alt' if has_reacted else ''}}"><img src="/static/emoji/{{reaction.reaction_text}}.png">{{reaction.c}}</button> <button data-r="enhance" type="button" disabled title="{{reactors_str}}" class="minimal {{'alt' if has_reacted else ''}}"><img src="/static/emoji/{{reaction.reaction_text}}.png">{{reaction.c}}</button>
{%- endfor -%} {%- endfor -%}
</span> </span>
{%- if is_logged_in() and allow_reacting -%}<button disabled title="This feature requires JavaScript to be enabled.">Add reaction</button>{%- endif -%} {%- if is_logged_in() and allow_reacting -%}<button data-r="enhance" disabled title="This feature requires JavaScript to be enabled.">Add reaction</button>{%- endif -%}
{%- elif is_editing -%} {%- elif is_editing -%}
<input type="submit" value="Save"> <input type="submit" value="Save">
<a href="{{get_post_url(post.id, _anchor=true)}}" class="linkbutton warn">Cancel</a> <a href="{{get_post_url(post.id, _anchor=true)}}" class="linkbutton warn">Cancel</a>

3
data/static/css/style.css
View File

@@ -905,6 +905,9 @@ ol.sortable-list {
} }
} }
.js-only {
display: none;
}
@media (max-width: 768px) { @media (max-width: 768px) {
body { body {

17
data/static/js/bits/progressive-enhancement.js Normal file
View File

@@ -0,0 +1,17 @@
export const b = {
init: 'enhance',
}
export function enhance(_, __, el) {
console.log(el);
if (el.classList.contains('js-only')) {
el.classList.remove('js-only');
}
if (el.disabled) {
el.disabled = false;
if (el.title.search('JavaScript') !== -1) {
el.title = '';
}
}
}

25
data/static/js/bits/ui.js Normal file
View File

@@ -0,0 +1,25 @@
export const b = {}
export function setTab(_, sender, el) {
if (sender.ariaSelected === 'true') {
return;
}
if (!el.contains(sender)) {
return;
}
const tabIndex = parseInt(sender.dataset.tabIndex);
const tabPanels = el.querySelectorAll('.tab-content');
const tabButtons = el.querySelectorAll('.tab-bar button');
for (let i = 0; i < tabPanels.length; i++) {
const tabPanel = tabPanels[i];
const tabButton = tabButtons[i];
if (i === tabIndex) {
tabPanel.classList.remove('hidden');
tabButton.ariaSelected = 'true';
} else if (!tabPanel.classList.contains('hidden')) {
tabPanel.classList.add('hidden');
tabButton.ariaSelected = 'false';
}
}
}

1
data/static/js/vnd/bitty-8.0.0.js Normal file
View File

File diff suppressed because one or more lines are too long