aboutsummaryrefslogtreecommitdiffstats
path: root/view
diff options
context:
space:
mode:
Diffstat (limited to 'view')
-rw-r--r--view/css/conversation.css36
-rw-r--r--view/js/main.js333
-rw-r--r--view/tpl/conv_item.tpl19
-rw-r--r--view/tpl/pinned_item.tpl2
4 files changed, 340 insertions, 50 deletions
diff --git a/view/css/conversation.css b/view/css/conversation.css
index d8a893b0e..ef55d83e6 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -193,10 +193,22 @@ a.wall-item-name-link {
color: var(--bs-primary);
}
-.item-highlight {
+.item-highlight,
+.item-indent,
+.wall-item-comment {
position: relative;
}
+.item-fade-in {
+ opacity: 0;
+ transform: scale(.7) translateY(-20px);
+ transition: opacity 0.3s ease-out, transform 0.3s ease-out;
+}
+.item-fade-in.show {
+ opacity: 1;
+ transform: scale(1) translateY(0);
+}
+
.item-highlight:after {
content: '';
position: absolute;
@@ -217,6 +229,28 @@ a.wall-item-name-link {
to { background-color: none; }
}
+.item-indent {
+ /* This must be equal to .item.indent:before width */
+ padding-left: .75rem;
+}
+
+.item-indent:before {
+ content: '';
+ position: absolute;
+ height: 100%;
+ width: .75rem;
+ top: 0;
+ left: 0;
+ border-color: var(--hz-item-indent, var(--bs-border-color));
+ border-radius: 0 var(--bs-border-radius) 0 0;
+ border-style: solid;
+ border-width: 1px 1px 0 0;
+}
+
+.wall-item-comment.expanded {
+ opacity: 0.5;
+}
+
/* comment_item */
diff --git a/view/js/main.js b/view/js/main.js
index 7043c8577..598a48ee6 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -28,6 +28,8 @@ var expanded_items = [];
var updateTimeout = [];
const singlethread_modules = ['display', 'hq'];
const redirect_modules = ['display', 'notify'];
+let b64mids = [];
+
var page_cache = {};
@@ -87,6 +89,80 @@ $(document).ready(function() {
}
});
+ document.addEventListener('click', function(event) {
+ const targetElement = event.target.closest('.wall-item-reaction');
+ if (!targetElement) return;
+
+ const userClick = event.isTrusted;
+ const id = targetElement.dataset.itemId;
+ const mid = targetElement.dataset.itemMid;
+ const parent = targetElement.dataset.itemParent;
+ const uuid = targetElement.dataset.itemUuid;
+ const verb = targetElement.dataset.itemVerb;
+
+ if (targetElement.classList.contains('wall-item-comment')) {
+ const subWrapper = document.getElementById(`wall-item-sub-thread-wrapper-${id}`);
+
+ subWrapper.style.setProperty('--hz-item-indent', stringToHslColor(uuid));
+
+ if (userClick && targetElement.classList.contains('expanded')) {
+ if (subWrapper.closest('.item-indent') === null) {
+ document.querySelectorAll('.thread-wrapper.item-highlight').forEach(el => {
+ el.classList.remove('item-highlight');
+ });
+ }
+
+ const parentSubWrapper = document.querySelectorAll(`#wall-item-sub-thread-wrapper-${parent} .wall-item-sub-thread-wrapper`);
+ parentSubWrapper.forEach(el => {
+ if (el.children.length > 0) {
+ el.classList.add('item-indent');
+ }
+ });
+
+ targetElement.classList.add('disabled');
+ return;
+ }
+
+ if (subWrapper.closest('.item-indent') !== null) {
+ subWrapper.classList.add('item-indent');
+ targetElement.classList.add('disabled');
+ }
+
+ targetElement.classList.add('expanded');
+
+ if (!userClick) {
+ targetElement.classList.add('disabled');
+ }
+ }
+
+ request(id, mid, verb, parent, uuid, userClick);
+
+ });
+
+ document.addEventListener('click', function(event) {
+ const targetElement = event.target.closest('.dropdown-item-expand');
+ if (!targetElement) return;
+
+ event.preventDefault();
+
+ const id = targetElement.dataset.itemId;
+ const uuid = targetElement.dataset.itemUuid;
+
+ const loading = document.getElementById('like-rotator-' + id);
+ loading.style.display = 'block';
+
+ document.querySelectorAll('.thread-wrapper.item-highlight').forEach(el => {
+ el.classList.remove('item-highlight');
+ });
+
+ const wrapper = document.getElementById('thread-wrapper-' + id);
+ if (!wrapper.classList.contains('toplevel_item')) {
+ document.documentElement.style.setProperty('--hz-item-highlight', stringToHslColor(uuid));
+ }
+
+ autoExpand(id);
+ });
+
// @hilmar |->
if ( typeof(window.tao) == 'undefined' ) {
window.tao = {};
@@ -756,7 +832,7 @@ function updateConvItems(mode, data) {
if (data_json.includes(bParam_mid) && elem.parentNode.classList.contains('wall-item-sub-thread-wrapper')) {
if (!elem.parentNode.parentNode.classList.contains('toplevel_item')) {
elem.parentNode.parentNode.classList.add('item-highlight');
- document.documentElement.style.setProperty('--hz-item-highlight', stringToHlsColor(JSON.parse(elem.parentNode.parentNode.dataset.b64mids)[0]));
+ document.documentElement.style.setProperty('--hz-item-highlight', stringToHslColor(JSON.parse(elem.parentNode.parentNode.dataset.b64mids)[0]));
}
}
@@ -1292,27 +1368,80 @@ function justifyPhotosAjax(id) {
$('#' + id).justifiedGallery('norewind').on('jg.complete', function(e){ justifiedGalleryActive = false; });
}
-function request(id, mid, verb, parent, uuid) {
+function request(id, mid, verb, parent, uuid, userClick) {
+
+ if (verb === 'load') {
+ const dots = document.getElementById('load-more-dots-' + parent);
+ dots.classList.add('jumping-dots');
+
+ const parent_sub = document.getElementById('wall-item-sub-thread-wrapper-' + parent);
+ const offset = parent_sub.children.length;
+
+ fetch('/request?offset=' + offset + '&verb=' + verb + '&mid=' + mid + '&parent=' + parent + '&module=' + module)
+ .then(response => response.json())
+ .then(obj => {
+ let parser = new DOMParser();
+ let doc = parser.parseFromString(obj.html, 'text/html');
+ let b64mids = [];
+
+ doc.querySelectorAll('.thread-wrapper').forEach(function (e) {
+ let data = JSON.parse(e.dataset.b64mids);
+ b64mids.push(...data);
+ });
+
+ imagesLoaded(doc.querySelectorAll('.wall-item-body img'), function () {
+ injectWithAnimation('wall-item-sub-thread-wrapper-' + parent, doc);
+ dots.classList.remove('jumping-dots');
+
+ const loadmore_progress = document.getElementById('load-more-progress-' + parent);
+ loadmore_progress.style.width = Math.round(100 * parent_sub.children.length / loadmore_progress.dataset.commentsTotal) + '%';
+
+ if (Number(parent_sub.children.length) === Number(loadmore_progress.dataset.commentsTotal)) {
+ const loadmore = document.getElementById('load-more-' + parent);
+ loadmore.remove();
+ }
+
+ updateRelativeTime('.autotime');
+ collapseHeight();
+
+ document.dispatchEvent(new CustomEvent('hz:sse_setNotificationsStatus', { detail: b64mids }));
+ document.dispatchEvent(new Event('hz:sse_bs_counts'));
+ });
+
+ })
+ .catch(error => {
+ console.error('Error fetching data:', error);
+ });
+
+ return;
+ }
const loading = document.getElementById('like-rotator-' + id);
- loading.style.display = 'block';
+
+ if (userClick) {
+ loading.style.display = 'block';
+ }
if (verb === 'comment') {
- if (singlethread_modules.indexOf(module) !== -1) {
+ if (userClick && singlethread_modules.indexOf(module) !== -1) {
let stateObj = { b64mid: uuid };
history.pushState(stateObj, '', module + '/' + uuid);
}
- document.querySelectorAll('.thread-wrapper.item-highlight').forEach(el => {
- el.classList.remove('item-highlight');
- el.style.boxShadow = '';
- });
-
const wrapper = document.getElementById('thread-wrapper-' + id);
- if (!wrapper.classList.contains('toplevel_item')) {
- wrapper.classList.add('item-highlight');
- document.documentElement.style.setProperty('--hz-item-highlight', stringToHlsColor(uuid));
+ const subWrapper = document.getElementById('wall-item-sub-thread-wrapper-' + id);
+
+ if (userClick && !wrapper.classList.contains('toplevel_item')) {
+ if (wrapper.closest('.item-indent') === null) {
+ document.querySelectorAll('.thread-wrapper.item-highlight').forEach(el => {
+ el.classList.remove('item-highlight');
+ });
+
+ wrapper.classList.add('item-highlight');
+ subWrapper.classList.remove('item-indent');
+ document.documentElement.style.setProperty('--hz-item-highlight', stringToHslColor(uuid));
+ }
}
fetch('/request?verb=' + verb + '&mid=' + mid + '&parent=' + parent + '&module=' + module)
@@ -1320,7 +1449,6 @@ function request(id, mid, verb, parent, uuid) {
.then(obj => {
let parser = new DOMParser();
let doc = parser.parseFromString(obj.html, 'text/html');
- let b64mids = [];
doc.querySelectorAll('.thread-wrapper').forEach(function (e) {
let data = JSON.parse(e.dataset.b64mids);
@@ -1328,13 +1456,15 @@ function request(id, mid, verb, parent, uuid) {
});
imagesLoaded(doc.querySelectorAll('.wall-item-body img'), function () {
- injectWithAnimation('wall-item-sub-thread-wrapper-' + id, obj.html);
+ injectWithAnimation('wall-item-sub-thread-wrapper-' + id, doc, true);
updateRelativeTime('.autotime');
- loading.style.display = 'none';
collapseHeight();
- document.dispatchEvent(new CustomEvent('hz:sse_setNotificationsStatus', { detail: b64mids }));
- document.dispatchEvent(new Event('hz:sse_bs_counts'));
+ if (userClick) {
+ loading.style.display = 'none';
+ document.dispatchEvent(new CustomEvent('hz:sse_setNotificationsStatus', { detail: b64mids }));
+ document.dispatchEvent(new Event('hz:sse_bs_counts'));
+ }
});
})
@@ -1377,32 +1507,140 @@ function request(id, mid, verb, parent, uuid) {
}
-function injectWithAnimation(container, html) {
- const target = document.getElementById(container);
- target.innerHTML = html;
+function injectWithAnimation(containerId, parsedDoc, overwrite = false) {
+ const container = document.getElementById(containerId);
+ if (!container) return;
+ if (overwrite) container.innerHTML = '';
- target.animate([
- { opacity: 0, transform: 'translateY(-20px)' },
- { opacity: 1, transform: 'translateY(0)' }
- ], {
- duration: 300,
- easing: 'ease-out'
- });
+ const newElements = Array.from(parsedDoc.body.children);
- // For children animation
- Array.from(target.children).forEach((el, i) => {
- el.animate([
- { opacity: 0, transform: 'scale(.7)' },
- { opacity: 1, transform: 'scale(1)' }
- ], {
- duration: 300,
- delay: i * 50,
- fill: 'both',
- easing: 'ease-out'
- });
- });
+ for (let i = newElements.length - 1; i >= 0; i--) {
+ const el = newElements[i].cloneNode(true);
+ el.classList.add('item-fade-in');
+ container.insertBefore(el, container.firstChild);
+
+ // Remove classes after transition ends
+ const onTransitionEnd = (event) => {
+ el.classList.remove('item-fade-in', 'show');
+ el.removeEventListener('transitionend', onTransitionEnd);
+ };
+ el.addEventListener('transitionend', onTransitionEnd);
+
+ setTimeout(() => {
+ el.classList.add('show');
+ }, (newElements.length - 1 - i) * 30);
+ }
}
+const autoExpand = (function () {
+ const clickedElements = new Set(); // Stores clicked button references
+
+ // We wait 10 seconds for images. Set the timeout here slightly higher.
+ function waitForElement(selector, timeout = 11000) {
+ return new Promise((resolve, reject) => {
+ // Check if the element already exists
+ const element = document.querySelector(selector);
+
+ if (element) {
+ resolve(element);
+ return;
+ }
+
+ // Set up a timeout to reject the promise if the element doesn't appear in time
+ const timer = setTimeout(() => {
+ observer.disconnect();
+ reject(new Error(`Element "${selector}" not found within ${timeout}ms`));
+ }, timeout);
+
+ // Create a MutationObserver to watch for DOM changes
+ const observer = new MutationObserver(() => {
+ const el = document.querySelector(selector);
+ if (el) {
+ clearTimeout(timer);
+ observer.disconnect();
+ resolve(el);
+ }
+ });
+
+ // Start observing the document for changes
+ observer.observe(document.documentElement, {
+ childList: true,
+ subtree: true
+ });
+ });
+ }
+
+ async function autoExpand(id) {
+ const loading = document.getElementById('like-rotator-' + id);
+ const maxIterations = 3;
+
+ try {
+ // Step 1: Ensure initial button is clicked
+ const initBtnSelector = '#wall-item-comment-' + id;
+ const initBtn = await waitForElement(initBtnSelector);
+
+ if (!clickedElements.has(initBtn)) {
+ initBtn.click();
+ clickedElements.add(initBtn);
+ }
+
+ // Step 2: Loop until no new buttons are found
+ let newButtonsFound;
+
+ const commentSelector = `#wall-item-sub-thread-wrapper-${id} .thread-wrapper`;
+ const commentBtnSelector = `#wall-item-sub-thread-wrapper-${id} .wall-item-comment`;
+ const subsSelector = `#wall-item-sub-thread-wrapper-${id}, #wall-item-sub-thread-wrapper-${id} .wall-item-sub-thread-wrapper`;
+
+ let iteration = 1;
+
+ do {
+ newButtonsFound = false;
+
+ // Wait for any comment to appear
+ await waitForElement(commentSelector);
+
+ document.querySelectorAll(subsSelector).forEach(el => {
+ if (el.children.length > 0) {
+ el.classList.add('item-indent');
+ }
+ });
+
+ const expandButtons = document.querySelectorAll(commentBtnSelector);
+
+ for (const btn of expandButtons) {
+ if (!clickedElements.has(btn)) {
+ btn.click();
+ clickedElements.add(btn);
+ newButtonsFound = true;
+ // Optional: await waitForElement(...) to wait for new content
+ }
+ }
+
+ // Wait between iterations to allow UI to update
+ if (newButtonsFound) {
+ await new Promise(res => setTimeout(res, 700));
+ iteration++;
+
+ }
+ } while (newButtonsFound && iteration < maxIterations);
+
+ console.log('All replies loaded!');
+
+ loading.style.display = 'none';
+
+ document.dispatchEvent(new CustomEvent('hz:sse_setNotificationsStatus', { detail: b64mids }));
+ document.dispatchEvent(new Event('hz:sse_bs_counts'));
+
+ } catch (error) {
+ loading.style.display = 'none';
+ console.error("autoExpand failed:", error.message);
+ }
+ }
+
+ return autoExpand;
+})();
+
+
function stringToHexColor(str) {
let hash = 0;
for (let i = 0; i < str.length; i++) {
@@ -1416,11 +1654,18 @@ function stringToHexColor(str) {
return color;
}
-function stringToHlsColor(str) {
- let stringUniqueHash = [...str].reduce((acc, char) => {
- return char.charCodeAt(0) + ((acc << 5) - acc);
- }, 0);
- return `hsl(${stringUniqueHash % 360}, 95%, 70%)`;
+function stringToHslColor(str) {
+ let hash = 0;
+ for (let i = 0; i < str.length; i++) {
+ hash = str.charCodeAt(i) + ((hash << 5) - hash);
+ hash |= 0;
+ }
+
+ const hue = Math.abs(hash) % 360;
+ const sat = 50 + (Math.abs(hash) % 50); // 50% to 99%
+ const light = 40 + (Math.abs(hash >> 8) % 40); // 40% to 79%
+
+ return `hsl(${hue}, ${sat}%, ${light}%)`;
}
function dolike(ident, verb) {
diff --git a/view/tpl/conv_item.tpl b/view/tpl/conv_item.tpl
index 6d8aa6abc..39634f429 100644
--- a/view/tpl/conv_item.tpl
+++ b/view/tpl/conv_item.tpl
@@ -1,4 +1,4 @@
-{{if $item.comment_firstcollapsed}}
+{{if !$item.threaded && $item.comment_firstcollapsed}}
<div id="hide-comments-outer-{{$item.parent}}" class="hide-comments-outer fakelink small" onclick="showHideComments({{$item.id}});">
<i id="hide-comments-icon-{{$item.id}}" class="bi bi-chevron-down align-middle hide-comments-icon"></i> <span id="hide-comments-label-{{$item.id}}" class="hide-comments-label align-middle" data-expanded="{{$item.collapse_comments}}" data-collapsed="{{$item.expand_comments}}">{{$item.expand_comments}}</span>{{if !$item.threaded}}&nbsp;<span id="hide-comments-total-{{$item.id}}" class="hide-comments-label align-middle">{{$item.num_comments}}</span>{{/if}}
</div>
@@ -111,7 +111,7 @@
<div class="wall-item-tools-left hstack gap-1" id="wall-item-tools-left-{{$item.id}}">
{{foreach $item.responses as $verb=>$response}}
{{if !($verb == 'comment' && (($item.toplevel && !$item.blog_mode) || $response.count == 0))}}
- <button type="button" title="{{$response.count}} {{$response.button.label}}" class="btn btn-sm btn-link{{if !$item.observer_activity.$verb}} link-secondary{{/if}} wall-item-{{$response.button.class}}" onclick="request({{$item.id}}, '{{$item.rawmid}}', '{{$verb}}', {{$item.parent}}, '{{$item.mid}}'); return false;" id="wall-item-{{$verb}}-{{$item.id}}">
+ <button type="button" title="{{$response.count}} {{$response.button.label}}" class="btn btn-sm btn-link{{if !$item.observer_activity.$verb}} link-secondary{{/if}} wall-item-reaction wall-item-{{$response.button.class}}" id="wall-item-{{$verb}}-{{$item.id}}" data-item-id="{{$item.id}}" data-item-mid="{{$item.rawmid}}" data-item-verb="{{$verb}}" data-item-parent="{{$item.parent}}" data-item-uuid="{{$item.mid}}">
<i class="bi bi-{{$response.button.icon}} generic-icons"></i>{{if $response.count}}<span style="display: inline-block; margin-top: -.25rem;" class="align-top">{{$response.count}}</span>{{/if}}
</button>
{{/if}}
@@ -191,6 +191,9 @@
{{if $item.star}}
<a class="dropdown-item" href="#" onclick="dostar({{$item.id}}); return false;"><i id="starred-{{$item.id}}" class="generic-icons-nav bi{{if $item.star.isstarred}} starred bi-star-fill{{else}} unstarred bi-star{{/if}}" title="{{$item.star.toggle}}"></i>{{$item.star.toggle}}</a>
{{/if}}
+ {{if $item.expand}}
+ <a class="dropdown-item dropdown-item-expand" href="#" data-item-id="{{$item.id}}" data-item-uuid="{{$item.mid}}"><i id="expand-{{$item.id}}" class="generic-icons-nav bi bi-arrows-angle-expand" title="{{$item.expand}}"></i>{{$item.expand}}</a>
+ {{/if}}
{{if $item.thread_action_menu}}
{{foreach $item.thread_action_menu as $mitem}}
<a class="dropdown-item" {{if $mitem.href}}href="{{$mitem.href}}"{{/if}} {{if $mitem.action}}onclick="{{$mitem.action}}"{{/if}} {{if $mitem.title}}title="{{$mitem.title}}"{{/if}} ><i class="generic-icons-nav bi bi-{{$mitem.icon}}"></i>{{$mitem.title}}</a>
@@ -209,7 +212,7 @@
{{/if}}
{{if $item.settings}}
<div class="dropdown-divider"></div>
- <a class="dropdown-item conversation-settings-link" href="" data-bs-toggle="modal" data-bs-target="#conversation_settings">{{$item.settings}}</a>
+ <a class="dropdown-item conversation-settings-link" href="#" data-bs-toggle="modal" data-bs-target="#conversation_settings">{{$item.settings}}</a>
{{/if}}
</div>
</div>
@@ -219,6 +222,14 @@
</div>
</div>
{{if $item.thread_level == 1}}
+ {{if $item.toplevel && $item.load_more && $item.threaded && !$item.blog_mode}}
+ <div id="load-more-progress-wrapper-{{$item.id}}" class="progress " role="progressbar" aria-valuenow="{{$item.comments_total_percent}}" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
+ <div id="load-more-progress-{{$item.id}}" class="progress-bar bg-info" style="width: {{$item.comments_total_percent}}%; margin-left: auto; margin-right: auto;" data-comments-total="{{$item.comments_total}}"></div>
+ </div>
+ <div id="load-more-{{$item.id}}" class="text-center text-secondary cursor-pointer" title="{{$item.load_more_title}}" onclick="request(0, '{{$item.rawmid}}', 'load', {{$item.parent}}, ''); return false;">
+ <span id="load-more-dots-{{$item.id}}" class=""><span class="dot-1">-</span> <span class="dot-2">-</span> <span class="dot-3">-</span></span>
+ </div>
+ {{/if}}
<div id="wall-item-sub-thread-wrapper-{{$item.id}}" class="wall-item-sub-thread-wrapper">
{{foreach $item.children as $child}}
{{include file="{{$child.template}}" item=$child}}
@@ -238,6 +249,6 @@
</div>
{{/if}}
</div>
-{{if $item.comment_lastcollapsed}}
+{{if !$item.threaded && $item.comment_lastcollapsed}}
</div>
{{/if}}
diff --git a/view/tpl/pinned_item.tpl b/view/tpl/pinned_item.tpl
index b5b5c931e..db3a175da 100644
--- a/view/tpl/pinned_item.tpl
+++ b/view/tpl/pinned_item.tpl
@@ -102,7 +102,7 @@
<div class="p-2 wall-item-tools d-flex justify-content-between">
<div class="wall-item-tools-left hstack gap-1" id="pinned-item-tools-left-{{$id}}">
{{foreach $responses as $verb=>$response}}
- <button type="button" title="{{$response.count}} {{$response.button.label}}" class="btn btn-sm btn-link{{if !$observer_activity.$verb}} link-secondary{{/if}} wall-item-{{$response.button.class}}" onclick="request({{$id}}, '{{$rawmid}}', '{{$verb}}', {{$parent}}, '{{$mid}}'); return false;" id="pinned-item-{{$verb}}-{{$id}}">
+ <button type="button" title="{{$response.count}} {{$response.button.label}}" class="disabled btn btn-sm btn-link{{if !$observer_activity.$verb}} link-secondary{{/if}} wall-item-{{$response.button.class}}" id="pinned-item-{{$verb}}-{{$id}}">
<i class="bi bi-{{$response.button.icon}} generic-icons"></i>{{if $response.count}}<span style="display: inline-block; margin-top: -.25rem;" class="align-top">{{$response.count}}</span>{{/if}}
</button>
{{/foreach}}
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-03 12:46:21 +0000