Rewrote the comments system. (#1)
old one basically bitrotted to death, may it rinse in prosciutto Reviewed-on: #1 Co-authored-by: flashwave <me@flash.moe> Co-committed-by: flashwave <me@flash.moe>
This commit is contained in:
parent
6b2bfb726f
commit
7353553de7
66 changed files with 3320 additions and 2088 deletions
assets
36
assets/common.css/loading.css
Normal file
36
assets/common.css/loading.css
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
.msz-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
min-width: var(--msz-loading-container-width, calc(var(--msz-loading-size, 1) * 100px));
|
||||
min-height: var(--msz-loading-container-height, calc(var(--msz-loading-size, 1) * 100px));
|
||||
}
|
||||
.msz-loading-inline {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.msz-loading-frame {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.msz-loading-icon {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
gap: var(--msz-loading-gap, calc(var(--msz-loading-size, 1) * 1px));
|
||||
margin: var(--msz-loading-margin, calc(var(--msz-loading-size, 1) * 10px));
|
||||
}
|
||||
|
||||
.msz-loading-icon-block {
|
||||
background: var(--msz-loading-colour, currentColor);
|
||||
width: var(--msz-loading-width, calc(var(--msz-loading-size, 1) * 10px));
|
||||
height: var(--msz-loading-height, calc(var(--msz-loading-size, 1) * 10px));
|
||||
}
|
||||
|
||||
.msz-loading-icon-block-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
@ -20,3 +20,5 @@ html, body {
|
|||
--font-regular: Verdana, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
|
||||
--font-monospace: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
}
|
||||
|
||||
@include loading.css;
|
||||
|
|
|
|||
|
|
@ -3,8 +3,44 @@ const $query = document.querySelector.bind(document);
|
|||
const $queryAll = document.querySelectorAll.bind(document);
|
||||
const $text = document.createTextNode.bind(document);
|
||||
|
||||
const $insertBefore = function(ref, elem) {
|
||||
ref.parentNode.insertBefore(elem, ref);
|
||||
const $insertBefore = function(target, element) {
|
||||
target.parentNode.insertBefore(element, target);
|
||||
};
|
||||
|
||||
const $appendChild = function(element, child) {
|
||||
switch(typeof child) {
|
||||
case 'undefined':
|
||||
break;
|
||||
|
||||
case 'string':
|
||||
element.appendChild($text(child));
|
||||
break;
|
||||
|
||||
case 'function':
|
||||
$appendChild(element, child());
|
||||
break;
|
||||
|
||||
case 'object':
|
||||
if(child === null)
|
||||
break;
|
||||
|
||||
if(child instanceof Node)
|
||||
element.appendChild(child);
|
||||
else if(child?.element instanceof Node)
|
||||
element.appendChild(child.element);
|
||||
else if(typeof child?.toString === 'function')
|
||||
element.appendChild($text(child.toString()));
|
||||
break;
|
||||
|
||||
default:
|
||||
element.appendChild($text(child.toString()));
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const $appendChildren = function(element, ...children) {
|
||||
for(const child of children)
|
||||
$appendChild(element, child);
|
||||
};
|
||||
|
||||
const $removeChildren = function(element) {
|
||||
|
|
@ -12,120 +48,87 @@ const $removeChildren = function(element) {
|
|||
element.firstChild.remove();
|
||||
};
|
||||
|
||||
const $jsx = (type, props, ...children) => $create({ tag: type, attrs: props, child: children });
|
||||
const $fragment = function(props, ...children) {
|
||||
const fragment = new DocumentFragment(props);
|
||||
$appendChildren(fragment, ...children);
|
||||
return fragment;
|
||||
};
|
||||
|
||||
const $create = function(info, attrs, child, created) {
|
||||
info = info || {};
|
||||
const $element = function(type, props, ...children) {
|
||||
if(typeof type === 'function')
|
||||
return new type(props ?? {}, ...children);
|
||||
|
||||
if(typeof info === 'string') {
|
||||
info = {tag: info};
|
||||
if(attrs)
|
||||
info.attrs = attrs;
|
||||
if(child)
|
||||
info.child = child;
|
||||
if(created)
|
||||
info.created = created;
|
||||
}
|
||||
const element = document.createElement(type ?? 'div');
|
||||
|
||||
const elem = document.createElement(info.tag || 'div');
|
||||
|
||||
if(info.attrs) {
|
||||
const attrs = info.attrs;
|
||||
|
||||
for(let key in attrs) {
|
||||
const attr = attrs[key];
|
||||
if(attr === undefined || attr === null)
|
||||
if(props)
|
||||
for(let key in props) {
|
||||
const prop = props[key];
|
||||
if(prop === undefined || prop === null)
|
||||
continue;
|
||||
|
||||
switch(typeof attr) {
|
||||
switch(typeof prop) {
|
||||
case 'function':
|
||||
if(key.substring(0, 2) === 'on')
|
||||
key = key.substring(2).toLowerCase();
|
||||
elem.addEventListener(key, attr);
|
||||
element.addEventListener(key, prop);
|
||||
break;
|
||||
|
||||
case 'object':
|
||||
if(attr instanceof Array) {
|
||||
if(prop instanceof Array) {
|
||||
if(key === 'class')
|
||||
key = 'classList';
|
||||
|
||||
const prop = elem[key];
|
||||
const attr = element[key];
|
||||
let addFunc = null;
|
||||
|
||||
if(prop instanceof Array)
|
||||
addFunc = prop.push.bind(prop);
|
||||
else if(prop instanceof DOMTokenList)
|
||||
addFunc = prop.add.bind(prop);
|
||||
if(attr instanceof Array)
|
||||
addFunc = attr.push.bind(attr);
|
||||
else if(attr instanceof DOMTokenList)
|
||||
addFunc = attr.add.bind(attr);
|
||||
|
||||
if(addFunc !== null) {
|
||||
for(let j = 0; j < attr.length; ++j)
|
||||
addFunc(attr[j]);
|
||||
for(let j = 0; j < prop.length; ++j)
|
||||
addFunc(prop[j]);
|
||||
} else {
|
||||
if(key === 'classList')
|
||||
key = 'class';
|
||||
elem.setAttribute(key, attr.toString());
|
||||
element.setAttribute(key, prop.toString());
|
||||
}
|
||||
} else {
|
||||
for(const attrKey in attr)
|
||||
elem[key][attrKey] = attr[attrKey];
|
||||
if(key === 'class' || key === 'className')
|
||||
key = 'classList';
|
||||
|
||||
let setFunc = null;
|
||||
if(element[key] instanceof DOMTokenList)
|
||||
setFunc = (ak, av) => { if(av) element[key].add(ak); };
|
||||
else if(element[key] instanceof CSSStyleDeclaration)
|
||||
setFunc = (ak, av) => { element[key].setProperty(ak, av); }
|
||||
else
|
||||
setFunc = (ak, av) => { element[key][ak] = av; };
|
||||
|
||||
for(const attrKey in prop) {
|
||||
const attrValue = prop[attrKey];
|
||||
if(attrValue)
|
||||
setFunc(attrKey, attrValue);
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case 'boolean':
|
||||
if(attr)
|
||||
elem.setAttribute(key, '');
|
||||
if(prop)
|
||||
element.setAttribute(key, '');
|
||||
break;
|
||||
|
||||
default:
|
||||
if(key === 'className')
|
||||
key = 'class';
|
||||
elem.setAttribute(key, attr.toString());
|
||||
|
||||
element.setAttribute(key, prop.toString());
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(info.child) {
|
||||
let children = info.child;
|
||||
$appendChildren(element, ...children);
|
||||
|
||||
if(!Array.isArray(children))
|
||||
children = [children];
|
||||
|
||||
for(const child of children) {
|
||||
switch(typeof child) {
|
||||
case 'string':
|
||||
elem.appendChild(document.createTextNode(child));
|
||||
break;
|
||||
|
||||
case 'object':
|
||||
if(child instanceof Element) {
|
||||
elem.appendChild(child);
|
||||
} else if('element' in child) {
|
||||
const childElem = child.element;
|
||||
if(childElem instanceof Element)
|
||||
elem.appendChild(childElem);
|
||||
else
|
||||
elem.appendChild($create(child));
|
||||
} else if('getElement' in child) {
|
||||
const childElem = child.getElement();
|
||||
if(childElem instanceof Element)
|
||||
elem.appendChild(childElem);
|
||||
else
|
||||
elem.appendChild($create(child));
|
||||
} else {
|
||||
elem.appendChild($create(child));
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
elem.appendChild(document.createTextNode(child.toString()));
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(info.created)
|
||||
info.created(elem);
|
||||
|
||||
return elem;
|
||||
return element;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
const MszOAuth2LoadingIcon = function() {
|
||||
const element = <div class="oauth2-loading-icon"/>;
|
||||
const MszLoadingIcon = function() {
|
||||
const element = <div class="msz-loading-icon"/>;
|
||||
for(let i = 0; i < 9; ++i)
|
||||
element.appendChild(<div class="oauth2-loading-icon-block"/>);
|
||||
element.appendChild(<div class="msz-loading-icon-block"/>);
|
||||
|
||||
// this is moderately cursed but it'll do
|
||||
const blocks = [
|
||||
|
|
@ -26,7 +26,7 @@ const MszOAuth2LoadingIcon = function() {
|
|||
tsLastUpdate = tsCurrent;
|
||||
|
||||
for(let i = 0; i < blocks.length; ++i)
|
||||
blocks[(counter + i) % blocks.length].classList.toggle('oauth2-loading-icon-block-hidden', i < 3);
|
||||
blocks[(counter + i) % blocks.length].classList.toggle('msz-loading-icon-block-hidden', i < 3);
|
||||
|
||||
++counter;
|
||||
} finally {
|
||||
|
|
@ -56,20 +56,51 @@ const MszOAuth2LoadingIcon = function() {
|
|||
};
|
||||
};
|
||||
|
||||
const MszOAuth2Loading = function(element) {
|
||||
const MszLoading = function(options=null) {
|
||||
if(typeof options !== 'object')
|
||||
throw 'options must be an object';
|
||||
|
||||
let {
|
||||
element, size, colour,
|
||||
width, height, inline,
|
||||
containerWidth, containerHeight,
|
||||
gap, margin, hidden,
|
||||
} = options ?? {};
|
||||
|
||||
if(typeof element === 'string')
|
||||
element = document.querySelector(element);
|
||||
if(!(element instanceof HTMLElement))
|
||||
element = <div class="oauth2-loading"/>;
|
||||
element = <div class="msz-loading"/>;
|
||||
|
||||
if(!element.classList.contains('oauth2-loading'))
|
||||
element.classList.add('oauth2-loading');
|
||||
if(!element.classList.contains('msz-loading'))
|
||||
element.classList.add('msz-loading');
|
||||
if(inline)
|
||||
element.classList.add('msz-loading-inline');
|
||||
if(hidden)
|
||||
element.classList.add('hidden');
|
||||
|
||||
if(typeof size === 'number' && size > 0)
|
||||
element.style.setProperty('--msz-loading-size', size);
|
||||
if(typeof containerWidth === 'string')
|
||||
element.style.setProperty('--msz-loading-container-width', containerWidth);
|
||||
if(typeof containerHeight === 'string')
|
||||
element.style.setProperty('--msz-loading-container-height', containerHeight);
|
||||
if(typeof gap === 'string')
|
||||
element.style.setProperty('--msz-loading-gap', gap);
|
||||
if(typeof margin === 'string')
|
||||
element.style.setProperty('--msz-loading-margin', margin);
|
||||
if(typeof width === 'string')
|
||||
element.style.setProperty('--msz-loading-width', width);
|
||||
if(typeof height === 'string')
|
||||
element.style.setProperty('--msz-loading-height', height);
|
||||
if(typeof colour === 'string')
|
||||
element.style.setProperty('--msz-loading-colour', colour);
|
||||
|
||||
let icon;
|
||||
if(element.childElementCount < 1) {
|
||||
icon = new MszOAuth2LoadingIcon;
|
||||
icon = new MszLoadingIcon;
|
||||
icon.play();
|
||||
element.appendChild(<div class="oauth2-loading-frame">{icon}</div>);
|
||||
element.appendChild(<div class="msz-loading-frame">{icon}</div>);
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
@ -3,3 +3,5 @@
|
|||
#include html.js
|
||||
#include uniqstr.js
|
||||
#include xhr.js
|
||||
|
||||
#include loading.jsx
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ const $xhr = (function() {
|
|||
return headers;
|
||||
})(xhr.getAllResponseHeaders());
|
||||
|
||||
if(options.csrf && headers.has('x-csrf-token'))
|
||||
if(headers.has('x-csrf-token'))
|
||||
$csrf.token = headers.get('x-csrf-token');
|
||||
|
||||
resolve({
|
||||
|
|
|
|||
|
|
@ -1,159 +0,0 @@
|
|||
.comment {
|
||||
margin: 10px;
|
||||
}
|
||||
.comment__reply-toggle {
|
||||
display: none;
|
||||
}
|
||||
.comment__reply-toggle:checked ~ .comment--reply {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.comment--reply {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.comment--deleted > .comment__container {
|
||||
opacity: .5;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
.comment--deleted > .comment__container:hover {
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.comment__container {
|
||||
display: flex;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.comment__mention {
|
||||
color: var(--user-colour);
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
.comment__mention:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.comment__actions {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
font-size: .9em;
|
||||
align-items: center;
|
||||
}
|
||||
.comment__action {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.comment__action:not(:last-child) {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.comment__action--link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.comment__action--post {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.comment__action--button {
|
||||
cursor: pointer;
|
||||
font: 12px/20px var(--font-regular);
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.comment__action--hide {
|
||||
opacity: 0;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
|
||||
.comment__action--voted {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.comment__action__checkbox {
|
||||
vertical-align: text-top;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.comment__replies .comment--indent-1,
|
||||
.comment__replies .comment--indent-2,
|
||||
.comment__replies .comment--indent-3,
|
||||
.comment__replies .comment--indent-4,
|
||||
.comment__replies .comment--indent-5 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.comment__avatar {
|
||||
flex: 0 0 auto;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.comment__replies .comment__avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.comment__content {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.comment__content:hover .comment__action--hide {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.comment__info {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.comment__text {
|
||||
margin-right: 2px;
|
||||
}
|
||||
.comment__text--input {
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 50px;
|
||||
font: 12px/20px var(--font-regular);
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.comment__user {
|
||||
color: var(--user-colour);
|
||||
text-decoration: none;
|
||||
}
|
||||
.comment__user--link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.comment__date,
|
||||
.comment__pin {
|
||||
color: #666;
|
||||
font-size: .9em;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.comment__link {
|
||||
color: #666;
|
||||
display: inline-flex;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.comment__pin {
|
||||
margin-left: 4px;
|
||||
}
|
||||
.comment__pin:before {
|
||||
content: "-";
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
.comments {
|
||||
--comments-max-height: 600px;
|
||||
margin: 1px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.comments__listing {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.comments__listing--limit {
|
||||
max-height: var(--comments-max-height);
|
||||
}
|
||||
|
||||
/*.comments__input,*/
|
||||
.comments__javascript,
|
||||
.comments__notice--staff {
|
||||
border-bottom: 1px solid var(--accent-colour);
|
||||
padding-bottom: 1px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.comments__none,
|
||||
.comments__javascript,
|
||||
.comments__notice {
|
||||
padding: 10px;
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comments__notice__link {
|
||||
color: var(--accent-colour);
|
||||
text-decoration: none;
|
||||
}
|
||||
.comments__notice__link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
121
assets/misuzu.css/comments/entry.css
Normal file
121
assets/misuzu.css/comments/entry.css
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
.comments-entry-main {
|
||||
display: grid;
|
||||
grid-template-columns: 46px 1fr;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.comments-entry-root {
|
||||
padding-bottom: 2px;
|
||||
border-top: 1px solid var(--accent-colour);
|
||||
}
|
||||
|
||||
.comments-entry-replies {
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.comments-entry-avatar {
|
||||
flex: 0 0 auto;
|
||||
padding: 4px;
|
||||
}
|
||||
.comments-entry-wrap {
|
||||
flex: 0 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.comments-entry-meta {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.comments-entry-user {
|
||||
display: flex;
|
||||
}
|
||||
.comments-entry-user-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
.comments-entry-user-link:hover,
|
||||
.comments-entry-user-link:focus {
|
||||
text-decoration: underline solid var(--user-colour, var(--text-colour, #fff));
|
||||
}
|
||||
.comments-entry-user-dead {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.comments-entry-time {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.comments-entry-time-edited,
|
||||
.comments-entry-time-pinned,
|
||||
.comments-entry-time-deleted {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.comments-entry-time-pinned .comments-entry-time-icon {
|
||||
rotate: 45deg;
|
||||
}
|
||||
.comments-entry-time-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.comments-entry-time-link:hover,
|
||||
.comments-entry-time-link:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.comments-entry-actions {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.comments-entry-actions-group {
|
||||
display: flex;
|
||||
border-radius: 3px;
|
||||
padding: 1px;
|
||||
gap: 1px;
|
||||
transition: opacity .1s;
|
||||
}
|
||||
.comments-entry-actions-group-votes,
|
||||
.comments-entry-actions-group-replies {
|
||||
border: 1px solid var(--accent-colour);
|
||||
}
|
||||
.comments-entry-actions-group-disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.comments-entry-action {
|
||||
background: transparent;
|
||||
border-width: 0;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 3px 6px;
|
||||
cursor: pointer;
|
||||
transition: background-color .1s;
|
||||
min-width: 24px;
|
||||
min-height: 22px;
|
||||
color: inherit;
|
||||
}
|
||||
.comments-entry-action:not([disabled]):hover,
|
||||
.comments-entry-action:not([disabled]):focus {
|
||||
background: var(--comments-entry-action-background-hover, #fff4);
|
||||
}
|
||||
.comments-entry-action-reply-active {
|
||||
background: #fff2;
|
||||
}
|
||||
.comments-entry-action-vote-like.comments-entry-action-vote-cast {
|
||||
background: #0808;
|
||||
}
|
||||
.comments-entry-action-vote-like {
|
||||
--comments-entry-action-background-hover: #0804;
|
||||
}
|
||||
.comments-entry-action-vote-dislike.comments-entry-action-vote-cast {
|
||||
background: #c008;
|
||||
}
|
||||
.comments-entry-action-vote-dislike {
|
||||
--comments-entry-action-background-hover: #c004;
|
||||
}
|
||||
75
assets/misuzu.css/comments/form.css
Normal file
75
assets/misuzu.css/comments/form.css
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
.comments-form {
|
||||
border: 1px solid var(--accent-colour);
|
||||
border-radius: 3px;
|
||||
margin: 2px 0;
|
||||
display: grid;
|
||||
grid-template-columns: 46px 1fr;
|
||||
transition: opacity .1s;
|
||||
}
|
||||
.comments-form-root {
|
||||
margin: 2px;
|
||||
}
|
||||
.comments-form-disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.comments-form-avatar {
|
||||
flex: 0 0 auto;
|
||||
padding: 3px;
|
||||
}
|
||||
.comments-form-wrap {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 32px;
|
||||
gap: 2px;
|
||||
margin: 3px;
|
||||
margin-left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.comments-form-input {
|
||||
overflow: hidden;
|
||||
}
|
||||
.comments-form-input textarea {
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
height: 0;
|
||||
}
|
||||
.comments-form-root .comments-form-input textarea {
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.comments-form-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.comments-form-status {
|
||||
flex: 1 1 auto;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.4em;
|
||||
padding: 0 6px;
|
||||
overflow: hidden;
|
||||
transition: color .2s;
|
||||
}
|
||||
.comments-form-status-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.comments-form-status-error {
|
||||
color: #c00;
|
||||
}
|
||||
|
||||
.comments-form-pin {
|
||||
flex: 0 0 auto;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.comments-form-post {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
8
assets/misuzu.css/comments/listing.css
Normal file
8
assets/misuzu.css/comments/listing.css
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
.comments-listing {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
.comments-listing-root {
|
||||
margin: 2px;
|
||||
}
|
||||
5
assets/misuzu.css/comments/main.css
Normal file
5
assets/misuzu.css/comments/main.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@include comments/form.css;
|
||||
@include comments/entry.css;
|
||||
@include comments/listing.css;
|
||||
@include comments/notice.css;
|
||||
@include comments/options.css;
|
||||
14
assets/misuzu.css/comments/notice.css
Normal file
14
assets/misuzu.css/comments/notice.css
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
.comments-notice {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.4em;
|
||||
line-height: 1.5em;
|
||||
gap: 6px;
|
||||
padding: 12px;
|
||||
margin: 2px;
|
||||
}
|
||||
.comments-notice-inner {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
32
assets/misuzu.css/comments/options.css
Normal file
32
assets/misuzu.css/comments/options.css
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
.comments-options {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin: 2px;
|
||||
padding: 6px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.comments-options-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.comments-options-action {
|
||||
color: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 4px 8px;
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
border-radius: 4px;
|
||||
transition: background-color .1s, opacity .1s;
|
||||
}
|
||||
.comments-options-action[disabled] {
|
||||
opacity: .5;
|
||||
}
|
||||
.comments-options-action:not([disabled]):hover,
|
||||
.comments-options-action:not([disabled]):focus {
|
||||
background-color: #fff4;
|
||||
}
|
||||
|
|
@ -121,8 +121,7 @@ html {
|
|||
@include changelog/log.css;
|
||||
@include changelog/pagination.css;
|
||||
|
||||
@include comments/comment.css;
|
||||
@include comments/comments.css;
|
||||
@include comments/main.css;
|
||||
|
||||
@include forum/actions.css;
|
||||
@include forum/categories.css;
|
||||
|
|
|
|||
144
assets/misuzu.js/comments/api.js
Normal file
144
assets/misuzu.js/comments/api.js
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
const MszCommentsApi = (() => {
|
||||
return {
|
||||
getCategory: async name => {
|
||||
if(typeof name !== 'string' || name.trim() === '')
|
||||
throw new Error('name is not a valid category name');
|
||||
|
||||
const { status, body } = await $xhr.get(
|
||||
`/comments/categories/${name}`,
|
||||
{ type: 'json' }
|
||||
);
|
||||
if(status !== 200)
|
||||
throw new Error(body.error?.text ?? 'something went wrong', { cause: body.error?.name ?? 'something' });
|
||||
|
||||
return body;
|
||||
},
|
||||
updateCategory: async (name, args) => {
|
||||
if(typeof name !== 'string' || name.trim() === '')
|
||||
throw new Error('name is not a valid category name');
|
||||
if(typeof args !== 'object' || args === null)
|
||||
throw new Error('args must be a non-null object');
|
||||
|
||||
const { status, body } = await $xhr.post(
|
||||
`/comments/categories/${name}`,
|
||||
{ csrf: true, type: 'json' },
|
||||
args
|
||||
);
|
||||
if(status !== 200)
|
||||
throw new Error(body.error?.text ?? 'something went wrong', { cause: body.error?.name ?? 'something' });
|
||||
|
||||
return body;
|
||||
},
|
||||
getPost: async post => {
|
||||
if(typeof post !== 'string' || post.trim() === '')
|
||||
throw new Error('post is not a valid post id');
|
||||
|
||||
const { status, body } = await $xhr.get(
|
||||
`/comments/posts/${post}`,
|
||||
{ type: 'json' }
|
||||
);
|
||||
if(status !== 200)
|
||||
throw new Error(body.error?.text ?? 'something went wrong', { cause: body.error?.name ?? 'something' });
|
||||
|
||||
return body;
|
||||
},
|
||||
getPostReplies: async post => {
|
||||
if(typeof post !== 'string' || post.trim() === '')
|
||||
throw new Error('post is not a valid post id');
|
||||
|
||||
const { status, body } = await $xhr.get(
|
||||
`/comments/posts/${post}/replies`,
|
||||
{ type: 'json' }
|
||||
);
|
||||
if(status !== 200)
|
||||
throw new Error(body.error?.text ?? 'something went wrong', { cause: body.error?.name ?? 'something' });
|
||||
|
||||
return body;
|
||||
},
|
||||
createPost: async args => {
|
||||
if(typeof args !== 'object' || args === null)
|
||||
throw new Error('args must be a non-null object');
|
||||
|
||||
const { status, body } = await $xhr.post(
|
||||
'/comments/posts',
|
||||
{ csrf: true, type: 'json' },
|
||||
args
|
||||
);
|
||||
if(status !== 201)
|
||||
throw new Error(body.error?.text ?? 'something went wrong', { cause: body.error?.name ?? 'something' });
|
||||
|
||||
return body;
|
||||
},
|
||||
updatePost: async (post, args) => {
|
||||
if(typeof post !== 'string' || post.trim() === '')
|
||||
throw new Error('post is not a valid post id');
|
||||
if(typeof args !== 'object' || args === null)
|
||||
throw new Error('args must be a non-null object');
|
||||
|
||||
const { status, body } = await $xhr.post(
|
||||
`/comments/posts/${post}`,
|
||||
{ csrf: true, type: 'json' },
|
||||
args
|
||||
);
|
||||
if(status !== 200)
|
||||
throw new Error(body.error?.text ?? 'something went wrong', { cause: body.error?.name ?? 'something' });
|
||||
|
||||
return body;
|
||||
},
|
||||
deletePost: async post => {
|
||||
if(typeof post !== 'string' || post.trim() === '')
|
||||
throw new Error('post is not a valid post id');
|
||||
|
||||
const { status, body } = await $xhr.delete(`/comments/posts/${post}`, { csrf: true, type: 'json' });
|
||||
if(status !== 204)
|
||||
throw new Error(body.error?.text ?? 'something went wrong', { cause: body.error?.name ?? 'something' });
|
||||
},
|
||||
restorePost: async post => {
|
||||
if(typeof post !== 'string' || post.trim() === '')
|
||||
throw new Error('post is not a valid post id');
|
||||
|
||||
const { status, body } = await $xhr.post(`/comments/posts/${post}/restore`, { csrf: true, type: 'json' });
|
||||
if(status !== 200)
|
||||
throw new Error(body.error?.text ?? 'something went wrong', { cause: body.error?.name ?? 'something' });
|
||||
},
|
||||
nukePost: async post => {
|
||||
if(typeof post !== 'string' || post.trim() === '')
|
||||
throw new Error('post is not a valid post id');
|
||||
|
||||
const { status } = await $xhr.post(`/comments/posts/${post}/nuke`, { csrf: true, type: 'json' });
|
||||
if(status !== 200)
|
||||
throw new Error(body.error?.text ?? 'something went wrong', { cause: body.error?.name ?? 'something' });
|
||||
},
|
||||
createVote: async (post, vote) => {
|
||||
if(typeof post !== 'string' || post.trim() === '')
|
||||
throw new Error('post is not a valid post id');
|
||||
if(typeof vote === 'string')
|
||||
vote = parseInt(vote);
|
||||
if(typeof vote !== 'number' || isNaN(vote))
|
||||
throw new Error('vote must be a number');
|
||||
|
||||
const { status, body } = await $xhr.post(
|
||||
`/comments/posts/${post}/vote`,
|
||||
{ csrf: true, type: 'json' },
|
||||
{ vote }
|
||||
);
|
||||
if(status !== 201)
|
||||
throw new Error(body.error?.text ?? 'something went wrong', { cause: body.error?.name ?? 'something' });
|
||||
|
||||
return body;
|
||||
},
|
||||
deleteVote: async post => {
|
||||
if(typeof post !== 'string' || post.trim() === '')
|
||||
throw new Error('post is not a valid post id');
|
||||
|
||||
const { status, body } = await $xhr.delete(
|
||||
`/comments/posts/${post}/vote`,
|
||||
{ csrf: true, type: 'json' }
|
||||
);
|
||||
if(status !== 200)
|
||||
throw new Error(body.error?.text ?? 'something went wrong', { cause: body.error?.name ?? 'something' });
|
||||
|
||||
return body;
|
||||
},
|
||||
};
|
||||
})();
|
||||
119
assets/misuzu.js/comments/form.jsx
Normal file
119
assets/misuzu.js/comments/form.jsx
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
#include comments/api.js
|
||||
|
||||
const MszCommentsFormNotice = function(args) {
|
||||
const { body } = args ?? {};
|
||||
const element = <div class="comments-notice">
|
||||
<div class="comments-notice-inner">{body}</div>
|
||||
</div>;
|
||||
|
||||
return {
|
||||
get element() { return element; },
|
||||
};
|
||||
};
|
||||
|
||||
const MszCommentsForm = function(args) {
|
||||
const {
|
||||
userInfo, catInfo, postInfo,
|
||||
listing, repliesToggle, replyToggle,
|
||||
} = args ?? {};
|
||||
|
||||
const defaultStatus = () => <>Press <kbd>enter</kbd> to submit, use <kbd>shift</kbd>+<kbd>enter</kbd> to start a new line.</>;
|
||||
const status = <div class="comments-form-status-text">{defaultStatus}</div>;
|
||||
|
||||
const element = <form class={{ 'comments-form': true, 'comments-form-root': !postInfo }} style={`--user-colour: ${userInfo.colour}`}>
|
||||
<input type="hidden" name="category" value={catInfo.name} />
|
||||
{postInfo ? <input type="hidden" name="reply_to" value={postInfo.id} /> : null}
|
||||
<div class="comments-form-avatar">
|
||||
<img src={userInfo.avatar} alt="" width="40" height="40" class="avatar" />
|
||||
</div>
|
||||
<div class="comments-form-wrap">
|
||||
<div class="comments-form-input">
|
||||
<textarea class="input__textarea" name="body" placeholder="Share your extensive insights..." onkeydown={ev => {
|
||||
if(status.classList.contains('comments-form-status-error')) {
|
||||
status.classList.remove('comments-form-status-error');
|
||||
$removeChildren(status);
|
||||
$appendChild(status, defaultStatus);
|
||||
}
|
||||
|
||||
if(ev.key === 'Enter' && !ev.shiftKey) {
|
||||
ev.preventDefault();
|
||||
element.requestSubmit();
|
||||
}
|
||||
|
||||
if(ev.key === 'p' && ev.altKey) {
|
||||
ev.preventDefault();
|
||||
if(element.elements.pin)
|
||||
element.elements.pin.checked = !element.elements.pin.checked;
|
||||
}
|
||||
}} />
|
||||
</div>
|
||||
<div class="comments-form-actions">
|
||||
<div class="comments-form-status">{status}</div>
|
||||
{userInfo.can_pin && !postInfo ? <div class="comments-form-pin"><label><input type="checkbox" name="pin" /> Pin</label></div> : null}
|
||||
<div class="comments-form-post"><button class="input__button">Post</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>;
|
||||
|
||||
const forAllFields = closure => {
|
||||
for(let i = 0; i < element.elements.length; ++i)
|
||||
closure(element.elements[i]);
|
||||
};
|
||||
|
||||
const setDisabled = state => {
|
||||
element.classList.toggle('comments-form-disabled', state);
|
||||
forAllFields(field => field.disabled = state);
|
||||
};
|
||||
|
||||
element.onsubmit = async ev => {
|
||||
ev.preventDefault();
|
||||
|
||||
if(element.classList.contains('comments-form-disabled'))
|
||||
return;
|
||||
|
||||
setDisabled(true);
|
||||
|
||||
try {
|
||||
const fields = {};
|
||||
forAllFields(field => {
|
||||
if(!field.name)
|
||||
return;
|
||||
|
||||
if(field.type === 'checkbox') {
|
||||
if(field.checked)
|
||||
fields[field.name] = field.value;
|
||||
} else
|
||||
fields[field.name] = field.value;
|
||||
});
|
||||
|
||||
listing.addPost(catInfo, userInfo, await MszCommentsApi.createPost(fields));
|
||||
listing.reorder();
|
||||
listing.visible = true;
|
||||
|
||||
if(repliesToggle) {
|
||||
repliesToggle.open = true;
|
||||
++repliesToggle.count;
|
||||
}
|
||||
|
||||
if(replyToggle?.active)
|
||||
replyToggle.click();
|
||||
|
||||
element.elements.body.value = '';
|
||||
if(element.elements.pin)
|
||||
element.elements.pin.checked = false;
|
||||
} catch(ex) {
|
||||
status.classList.add('comments-form-status-error');
|
||||
status.textContent = ex;
|
||||
} finally {
|
||||
setDisabled(false);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
get element() { return element; },
|
||||
|
||||
focus() {
|
||||
element.elements.body.focus();
|
||||
},
|
||||
};
|
||||
};
|
||||
9
assets/misuzu.js/comments/init.js
Normal file
9
assets/misuzu.js/comments/init.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
#include comments/section.jsx
|
||||
|
||||
const MszCommentsInit = () => {
|
||||
const targets = Array.from($queryAll('.js-comments'));
|
||||
for(const target of targets) {
|
||||
const section = new MszCommentsSection({ category: target.dataset.category });
|
||||
target.replaceWith(section.element);
|
||||
}
|
||||
};
|
||||
652
assets/misuzu.js/comments/listing.jsx
Normal file
652
assets/misuzu.js/comments/listing.jsx
Normal file
|
|
@ -0,0 +1,652 @@
|
|||
#include msgbox.jsx
|
||||
#include comments/api.js
|
||||
#include comments/form.jsx
|
||||
|
||||
const MszCommentsEntryVoteButton = function(args) {
|
||||
const { name, title, icon, vote } = args ?? {};
|
||||
|
||||
let element, counter;
|
||||
const isCast = () => element?.classList.contains('comments-entry-action-vote-cast') === true;
|
||||
|
||||
element = <button class={`comments-entry-action comments-entry-action-vote-${name}`} onclick={() => { vote(isCast()); }}>
|
||||
{icon}
|
||||
</button>;
|
||||
|
||||
return {
|
||||
get element() { return element; },
|
||||
|
||||
get disabled() { return element.disabled; },
|
||||
set disabled(state) {
|
||||
element.disabled = state;
|
||||
},
|
||||
|
||||
get cast() { return isCast(); },
|
||||
set cast(state) {
|
||||
element.classList.toggle('comments-entry-action-vote-cast', state);
|
||||
},
|
||||
|
||||
get count() { return counter ? parseInt(counter.textContent) : 0; },
|
||||
set count(count) {
|
||||
if(count > 0) {
|
||||
if(!counter)
|
||||
element.appendChild(counter = <span />);
|
||||
|
||||
const formatted = count.toLocaleString();
|
||||
counter.textContent = formatted;
|
||||
element.title = title.replace('$0', formatted).replace('$s', count === 1 ? '' : 's');
|
||||
} else {
|
||||
if(counter) {
|
||||
element.removeChild(counter);
|
||||
counter = undefined;
|
||||
}
|
||||
|
||||
element.title = title.replace('$0', 'No').replace('$s', 's');
|
||||
}
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const MszCommentsEntryVoteActions = function(args) {
|
||||
const { vote } = args ?? {};
|
||||
|
||||
const like = new MszCommentsEntryVoteButton({
|
||||
name: 'like',
|
||||
title: '$0 like$s',
|
||||
icon: <i class="fas fa-chevron-up" />,
|
||||
vote: cast => { vote(cast ? 0 : 1); }
|
||||
});
|
||||
const dislike = new MszCommentsEntryVoteButton({
|
||||
name: 'dislike',
|
||||
title: '$0 dislike$s',
|
||||
icon: <i class="fas fa-chevron-down" />,
|
||||
vote: cast => { vote(cast ? 0 : -1); }
|
||||
});
|
||||
|
||||
const element = <div class="comments-entry-actions-group comments-entry-actions-group-votes">
|
||||
{like}
|
||||
{dislike}
|
||||
</div>;
|
||||
|
||||
return {
|
||||
get element() { return element; },
|
||||
|
||||
get disabled() { return element.classList.contains('comments-entry-actions-group-disabled'); },
|
||||
set disabled(state) {
|
||||
element.classList.toggle('comments-entry-actions-group-disabled', state);
|
||||
like.disabled = dislike.disabled = state;
|
||||
},
|
||||
|
||||
updateVotes(votes) {
|
||||
like.count = votes?.positive ?? 0;
|
||||
like.cast = votes?.vote > 0;
|
||||
dislike.count = Math.abs(votes?.negative ?? 0);
|
||||
dislike.cast = votes?.vote < 0;
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const MszCommentsEntryReplyToggleButton = function(args) {
|
||||
const { replies, toggle } = args ?? {};
|
||||
|
||||
let icon, counter;
|
||||
const element = <button class="comments-entry-action" title="No replies" onclick={() => { toggle(); }}>
|
||||
{icon = <i class="fas fa-plus" />}
|
||||
{counter = <span />}
|
||||
</button>;
|
||||
|
||||
const setVisible = state => {
|
||||
element.classList.toggle('hidden', !state);
|
||||
};
|
||||
const setOpen = state => {
|
||||
icon.classList.toggle('fa-plus', !state);
|
||||
icon.classList.toggle('fa-minus', state);
|
||||
};
|
||||
const setCount = count => {
|
||||
const formatted = count.toLocaleString();
|
||||
counter.textContent = formatted;
|
||||
element.title = `${count} ${count === 1 ? 'reply' : 'replies'}`;
|
||||
setVisible(count > 0);
|
||||
};
|
||||
|
||||
setCount(Array.isArray(replies) ? replies.length : (replies ?? 0));
|
||||
|
||||
return {
|
||||
get element() { return element; },
|
||||
|
||||
get visible() { return !element.classList.contains('hidden'); },
|
||||
set visible(state) { setVisible(state); },
|
||||
|
||||
get count() { return parseInt(counter.textContent); },
|
||||
set count(count) { setCount(count); },
|
||||
|
||||
get open() { return element.classList.contains('fa-plus'); },
|
||||
set open(state) { setOpen(state); },
|
||||
};
|
||||
};
|
||||
|
||||
const MszCommentsEntryReplyCreateButton = function(args) {
|
||||
const { toggle } = args ?? {};
|
||||
|
||||
const element = <button class="comments-entry-action" title="Reply" onclick={() => { toggle(); }}>
|
||||
<i class="fas fa-reply" />
|
||||
<span>Reply</span>
|
||||
</button>;
|
||||
|
||||
return {
|
||||
get element() { return element; },
|
||||
|
||||
get visible() { return !element.classList.contains('hidden'); },
|
||||
set visible(state) { element.classList.toggle('hidden', !state); },
|
||||
|
||||
get active() { return element.classList.contains('comments-entry-action-reply-active'); },
|
||||
set active(state) { element.classList.toggle('comments-entry-action-reply-active', state); },
|
||||
|
||||
click() {
|
||||
element.click();
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const MszCommentsEntryReplyActions = function(args) {
|
||||
const { replies, toggleReplies, toggleForm } = args ?? {};
|
||||
|
||||
const toggle = new MszCommentsEntryReplyToggleButton({ replies, toggle: toggleReplies });
|
||||
const button = toggleForm ? new MszCommentsEntryReplyCreateButton({ toggle: toggleForm }) : undefined;
|
||||
|
||||
const element = <div class="comments-entry-actions-group comments-entry-actions-group-replies">
|
||||
{toggle}
|
||||
{button}
|
||||
</div>;
|
||||
|
||||
const setVisible = state => {
|
||||
element.classList.toggle('hidden', !state);
|
||||
};
|
||||
|
||||
return {
|
||||
get element() { return element; },
|
||||
|
||||
get visible() { return !element.classList.contains('hidden'); },
|
||||
set visible(state) { setVisible(state); },
|
||||
|
||||
get toggle() { return toggle; },
|
||||
get button() { return button; },
|
||||
|
||||
updateVisible() {
|
||||
setVisible(toggle.visible || button?.visible === true);
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const MszCommentsEntryGeneralButton = function(args) {
|
||||
const { icon, title, action } = args ?? {};
|
||||
const element = <button class="comments-entry-action" title={title} onclick={() => { action(); }}>{icon}</button>;
|
||||
|
||||
return {
|
||||
get element() { return element; },
|
||||
|
||||
get visible() { return !element.classList.contains('hidden'); },
|
||||
set visible(state) { element.classList.toggle('hidden', !state); },
|
||||
|
||||
get disabled() { return element.disabled; },
|
||||
set disabled(state) { element.disabled = state; },
|
||||
};
|
||||
};
|
||||
|
||||
const MszCommentsEntryGeneralActions = function(args) {
|
||||
let deleteButton, restoreButton, nukeButton, pinButton, unpinButton;
|
||||
const element = <div class="comments-entry-actions-group">
|
||||
{deleteButton = args.delete ? new MszCommentsEntryGeneralButton({ icon: <i class="fas fa-trash" />, title: 'Delete', action: args.delete }) : null}
|
||||
{restoreButton = args.restore ? new MszCommentsEntryGeneralButton({ icon: <i class="fas fa-trash-restore" />, title: 'Restore', action: args.restore }) : null}
|
||||
{nukeButton = args.nuke ? new MszCommentsEntryGeneralButton({ icon: <i class="fas fa-radiation-alt" />, title: 'Permanently delete', action: args.nuke }) : null}
|
||||
{pinButton = args.pin ? new MszCommentsEntryGeneralButton({ icon: <i class="fas fa-thumbtack" />, title: 'Pin', action: args.pin }) : null}
|
||||
{unpinButton = args.unpin ? new MszCommentsEntryGeneralButton({ icon: <i class="fas fa-screwdriver" />, title: 'Unpin', action: args.unpin }) : null}
|
||||
</div>;
|
||||
|
||||
return {
|
||||
get element() { return element; },
|
||||
|
||||
get visible() { return !element.classList.contains('hidden'); },
|
||||
set visible(state) { element.classList.toggle('hidden', !state); },
|
||||
|
||||
get disabled() { return element.classList.contains('comments-entry-actions-group-disabled'); },
|
||||
set disabled(state) {
|
||||
element.classList.toggle('comments-entry-actions-group-disabled', state);
|
||||
if(deleteButton)
|
||||
deleteButton.disabled = state;
|
||||
if(restoreButton)
|
||||
restoreButton.disabled = state;
|
||||
if(nukeButton)
|
||||
nukeButton.disabled = state;
|
||||
if(pinButton)
|
||||
pinButton.disabled = state;
|
||||
if(unpinButton)
|
||||
unpinButton.disabled = state;
|
||||
},
|
||||
|
||||
get deleteButton() { return deleteButton; },
|
||||
get restoreButton() { return restoreButton; },
|
||||
get nukeButton() { return nukeButton; },
|
||||
|
||||
get deleteVisible() { return deleteButton?.visible === true; },
|
||||
set deleteVisible(state) {
|
||||
if(deleteButton)
|
||||
deleteButton.visible = state;
|
||||
if(restoreButton)
|
||||
restoreButton.visible = !state;
|
||||
if(nukeButton)
|
||||
nukeButton.visible = !state;
|
||||
},
|
||||
|
||||
get pinButton() { return pinButton; },
|
||||
get unpinButton() { return unpinButton; },
|
||||
|
||||
get pinVisible() { return pinButton?.visible === true; },
|
||||
set pinVisible(state) {
|
||||
if(pinButton)
|
||||
pinButton.visible = state;
|
||||
if(unpinButton)
|
||||
unpinButton.visible = !state;
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const MszCommentsEntryActions = function() {
|
||||
const element = <div class="comments-entry-actions hidden" />;
|
||||
|
||||
const hideIfNoChildren = () => {
|
||||
element.classList.toggle('hidden', element.childElementCount < 1);
|
||||
};
|
||||
hideIfNoChildren();
|
||||
|
||||
return {
|
||||
get element() { return element; },
|
||||
|
||||
appendGroup(group) {
|
||||
element.appendChild(group.element);
|
||||
hideIfNoChildren();
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const MszCommentsEntry = function(catInfo, userInfo, postInfo, listing, root) {
|
||||
const actions = new MszCommentsEntryActions;
|
||||
|
||||
const voteActions = new MszCommentsEntryVoteActions({
|
||||
vote: async vote => {
|
||||
if(voteActions.disabled)
|
||||
return;
|
||||
|
||||
voteActions.disabled = true;
|
||||
try {
|
||||
voteActions.updateVotes(vote === 0
|
||||
? await MszCommentsApi.deleteVote(postInfo.id)
|
||||
: await MszCommentsApi.createVote(postInfo.id, vote));
|
||||
} catch(ex) {
|
||||
console.error(ex);
|
||||
} finally {
|
||||
enableVoteActionsMaybe();
|
||||
}
|
||||
}
|
||||
});
|
||||
actions.appendGroup(voteActions);
|
||||
|
||||
const enableVoteActionsMaybe = () => {
|
||||
voteActions.disabled = !userInfo.can_vote || !!postInfo.deleted || !!catInfo.locked;
|
||||
};
|
||||
|
||||
enableVoteActionsMaybe();
|
||||
voteActions.updateVotes(postInfo);
|
||||
|
||||
const repliesIsArray = Array.isArray(postInfo.replies);
|
||||
const replies = new MszCommentsListing({ hidden: !repliesIsArray });
|
||||
if(repliesIsArray)
|
||||
replies.addPosts(catInfo, userInfo, postInfo.replies);
|
||||
|
||||
const repliesElem = <div class="comments-entry-replies">
|
||||
{replies}
|
||||
</div>;
|
||||
|
||||
let replyForm;
|
||||
let repliesLoaded = replies.loaded;
|
||||
const replyActions = new MszCommentsEntryReplyActions({
|
||||
replies: postInfo.replies,
|
||||
toggleReplies: async () => {
|
||||
replyActions.toggle.open = replies.visible = !replies.visible;
|
||||
if(!repliesLoaded) {
|
||||
repliesLoaded = true;
|
||||
try {
|
||||
replies.addPosts(catInfo, userInfo, await MszCommentsApi.getPostReplies(postInfo.id));
|
||||
} catch(ex) {
|
||||
console.error(ex);
|
||||
replyActions.toggle.open = false;
|
||||
repliesLoaded = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
toggleForm: userInfo.can_create ? () => {
|
||||
if(replyForm) {
|
||||
replyActions.button.active = false;
|
||||
repliesElem.removeChild(replyForm.element);
|
||||
replyForm = null;
|
||||
} else {
|
||||
replyActions.button.active = true;
|
||||
replyForm = new MszCommentsForm({
|
||||
userInfo, catInfo, postInfo,
|
||||
listing: replies,
|
||||
repliesToggle: replyActions.toggle,
|
||||
replyToggle: replyActions.button,
|
||||
});
|
||||
$insertBefore(replies.element, replyForm.element);
|
||||
replyForm.focus();
|
||||
}
|
||||
} : null,
|
||||
});
|
||||
actions.appendGroup(replyActions);
|
||||
|
||||
const enableReplyButtonMaybe = () => {
|
||||
if(replyActions.button)
|
||||
replyActions.button.visible = !catInfo.locked && !postInfo.deleted;
|
||||
replyActions.updateVisible();
|
||||
};
|
||||
|
||||
replyActions.toggle.open = replies.visible;
|
||||
enableReplyButtonMaybe();
|
||||
|
||||
const generalActions = new MszCommentsEntryGeneralActions({
|
||||
delete: postInfo.can_delete ? async () => {
|
||||
generalActions.disabled = true;
|
||||
try {
|
||||
if(!await MszShowConfirmBox(`Are you sure you want to delete comment #${postInfo.id}?`, 'Deleting a comment'))
|
||||
return;
|
||||
|
||||
postInfo.deleted = new Date;
|
||||
await MszCommentsApi.deletePost(postInfo.id);
|
||||
if(generalActions.restoreButton) {
|
||||
setOptionalTime(deletedElem, new Date, 'commentDeleted');
|
||||
generalActions.deleteVisible = false;
|
||||
enableVoteActionsMaybe();
|
||||
enableReplyButtonMaybe();
|
||||
listing.reorder();
|
||||
} else
|
||||
nukeThePost();
|
||||
} catch(ex) {
|
||||
delete postInfo.deleted;
|
||||
console.error(ex);
|
||||
} finally {
|
||||
generalActions.disabled = false;
|
||||
}
|
||||
} : null,
|
||||
restore: postInfo.can_delete_any ? async () => {
|
||||
generalActions.disabled = true;
|
||||
const deleted = postInfo.deleted;
|
||||
try {
|
||||
delete postInfo.deleted;
|
||||
await MszCommentsApi.restorePost(postInfo.id);
|
||||
setOptionalTime(deletedElem, null, 'commentDeleted');
|
||||
generalActions.deleteVisible = true;
|
||||
enableVoteActionsMaybe();
|
||||
enableReplyButtonMaybe();
|
||||
listing.reorder();
|
||||
} catch(ex) {
|
||||
postInfo.deleted = deleted;
|
||||
console.error(ex);
|
||||
} finally {
|
||||
generalActions.disabled = false;
|
||||
}
|
||||
} : null,
|
||||
nuke: postInfo.can_delete_any ? async () => {
|
||||
generalActions.disabled = true;
|
||||
try {
|
||||
await MszCommentsApi.nukePost(postInfo.id);
|
||||
nukeThePost();
|
||||
} catch(ex) {
|
||||
console.error(ex);
|
||||
} finally {
|
||||
generalActions.disabled = false;
|
||||
}
|
||||
} : null,
|
||||
pin: root && userInfo.can_pin ? async () => {
|
||||
generalActions.disabled = true;
|
||||
try {
|
||||
if(!await MszShowConfirmBox(`Are you sure you want to pin comment #${postInfo.id}?`, 'Pinning a comment'))
|
||||
return;
|
||||
|
||||
const result = await MszCommentsApi.updatePost(postInfo.id, { pin: 'on' });
|
||||
generalActions.pinVisible = !result.pinned;
|
||||
setOptionalTime(pinnedElem, result.pinned, 'commentPinned');
|
||||
listing.reorder();
|
||||
} catch(ex) {
|
||||
console.error(ex);
|
||||
} finally {
|
||||
generalActions.disabled = false;
|
||||
}
|
||||
} : null,
|
||||
unpin: root && userInfo.can_pin ? async () => {
|
||||
generalActions.disabled = true;
|
||||
try {
|
||||
const result = await MszCommentsApi.updatePost(postInfo.id, { pin: '' });
|
||||
generalActions.pinVisible = !result.pinned;
|
||||
setOptionalTime(pinnedElem, result.pinned, 'commentPinned');
|
||||
listing.reorder();
|
||||
} catch(ex) {
|
||||
console.error(ex);
|
||||
} finally {
|
||||
generalActions.disabled = false;
|
||||
}
|
||||
} : null,
|
||||
});
|
||||
actions.appendGroup(generalActions);
|
||||
|
||||
generalActions.deleteVisible = !postInfo.deleted;
|
||||
generalActions.pinVisible = !postInfo.pinned;
|
||||
|
||||
const userAvatarElem = <img alt="" width="40" height="40" class="avatar" />;
|
||||
const userNameElem = <div class="comments-entry-user" />;
|
||||
|
||||
const createdTimeElem = <a href={`#comment-${postInfo.id}`} class="comments-entry-time-link" />;
|
||||
const editedElem = <div class="comments-entry-time comments-entry-time-edited">
|
||||
<div class="comments-entry-time-icon"><i class="fas fa-pencil-alt" /></div>
|
||||
</div>;
|
||||
const pinnedElem = <div class="comments-entry-time comments-entry-time-pinned">
|
||||
<div class="comments-entry-time-icon"><i class="fas fa-thumbtack" /></div>
|
||||
</div>;
|
||||
const deletedElem = <div class="comments-entry-time comments-entry-time-deleted">
|
||||
<div class="comments-entry-time-icon"><i class="fas fa-trash" /></div>
|
||||
</div>;
|
||||
|
||||
const bodyElem = <div class="comments-entry-body" />;
|
||||
const setBody = body => { bodyElem.textContent = body ?? '[deleted]'; };
|
||||
setBody(postInfo?.body);
|
||||
|
||||
const element = <div id={`comment-${postInfo.id}`} data-comment={postInfo.id} class={{ 'comments-entry': true, 'comments-entry-root': root }}>
|
||||
<div class="comments-entry-main">
|
||||
<div class="comments-entry-avatar">
|
||||
{userAvatarElem}
|
||||
</div>
|
||||
<div class="comments-entry-wrap">
|
||||
<div class="comments-entry-meta">
|
||||
<div class="comments-entry-user">
|
||||
{userNameElem}
|
||||
</div>
|
||||
<div class="comments-entry-time">
|
||||
<div class="comments-entry-time-icon">—</div>
|
||||
{createdTimeElem}
|
||||
</div>
|
||||
{editedElem}
|
||||
{pinnedElem}
|
||||
{deletedElem}
|
||||
</div>
|
||||
{bodyElem}
|
||||
{actions}
|
||||
</div>
|
||||
</div>
|
||||
{repliesElem}
|
||||
</div>;
|
||||
|
||||
const setUserInfo = userInfo => {
|
||||
$removeChildren(userNameElem);
|
||||
if(userInfo) {
|
||||
if(typeof userInfo.colour === 'string')
|
||||
element.style.setProperty('--user-colour', userInfo.colour);
|
||||
userAvatarElem.src = userInfo.avatar;
|
||||
userNameElem.appendChild(<a class="comments-entry-user-link" href={userInfo.profile} style="color: var(--user-colour);">{userInfo.name}</a>);
|
||||
} else {
|
||||
element.style.removeProperty('--user-colour');
|
||||
userAvatarElem.src = '/images/no-avatar.png';
|
||||
userNameElem.appendChild(<span class="comments-entry-user-dead">Deleted user</span>);
|
||||
}
|
||||
};
|
||||
setUserInfo(postInfo.user);
|
||||
|
||||
const setCreatedTime = date => {
|
||||
if(typeof date === 'string')
|
||||
date = new Date(date);
|
||||
|
||||
$removeChildren(createdTimeElem);
|
||||
element.dataset.commentCreated = date.getTime();
|
||||
const time = <time class="comments-entry-time-text" datetime={date.toISOString()} title={date.toString()}>{MszSakuya.formatTimeAgo(date)}</time>;
|
||||
createdTimeElem.appendChild(time);
|
||||
MszSakuya.trackElement(time);
|
||||
};
|
||||
setCreatedTime(postInfo.created);
|
||||
|
||||
const updateOrderValue = () => {
|
||||
let order = parseInt(element.dataset.commentCreated ?? 0);
|
||||
|
||||
if(element.dataset.commentDeleted !== undefined)
|
||||
order -= parseInt(element.dataset.commentDeleted);
|
||||
else if(element.dataset.commentPinned !== undefined)
|
||||
order += parseInt(element.dataset.commentPinned);
|
||||
|
||||
element.dataset.commentOrder = order;
|
||||
};
|
||||
|
||||
const setOptionalTime = (elem, date, name, reorder=true, textIfTrue=null) => {
|
||||
if(typeof date === 'string')
|
||||
date = new Date(date);
|
||||
|
||||
while(!(elem.lastChild instanceof HTMLDivElement))
|
||||
elem.removeChild(elem.lastChild);
|
||||
|
||||
if(date) {
|
||||
if(date instanceof Date) {
|
||||
if(name)
|
||||
element.dataset[name] = date.getTime();
|
||||
|
||||
const timeElem = <time class="comments-entry-time-text" datetime={date.toISOString()} title={date.toString()}>{MszSakuya.formatTimeAgo(date)}</time>
|
||||
elem.appendChild(timeElem);
|
||||
MszSakuya.trackElement(timeElem);
|
||||
} else {
|
||||
// this is kiiiind of a hack but commentCreated isn't updated through this function so who cares lol !
|
||||
if(name)
|
||||
element.dataset[name] = element.dataset.commentCreated;
|
||||
|
||||
if(typeof textIfTrue === 'string')
|
||||
elem.appendChild(<span>{textIfTrue}</span>);
|
||||
}
|
||||
|
||||
elem.classList.remove('hidden');
|
||||
} else {
|
||||
if(name)
|
||||
delete element.dataset[name];
|
||||
elem.classList.add('hidden');
|
||||
}
|
||||
|
||||
if(reorder)
|
||||
updateOrderValue();
|
||||
};
|
||||
|
||||
setOptionalTime(editedElem, postInfo.edited, 'commentEdited', false);
|
||||
setOptionalTime(pinnedElem, postInfo.pinned, 'commentPinned', false);
|
||||
setOptionalTime(deletedElem, postInfo.deleted, 'commentDeleted', false, 'deleted');
|
||||
updateOrderValue();
|
||||
|
||||
const nukeThePost = () => {
|
||||
if(replies.count < 1 && replyActions.toggle.count < 1)
|
||||
listing.element.removeChild(element);
|
||||
else {
|
||||
generalActions.visible = false;
|
||||
generalActions.disabled = true;
|
||||
enableVoteActionsMaybe();
|
||||
enableReplyButtonMaybe();
|
||||
setUserInfo(null);
|
||||
setBody(null);
|
||||
setOptionalTime(deletedElem, true, 'commentDeleted', true, 'deleted');
|
||||
listing.reorder();
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
get element() { return element; },
|
||||
|
||||
updateLocked() {
|
||||
enableVoteActionsMaybe();
|
||||
enableReplyButtonMaybe();
|
||||
replies.updateLocked();
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const MszCommentsListing = function(options) {
|
||||
let { hidden, root } = options ?? {};
|
||||
|
||||
let loading; // intentionally left as undefined here so the === null is still false
|
||||
const entries = new Map;
|
||||
const element = <div class={{ 'comments-listing': true, 'comments-listing-root': root, 'hidden': hidden }} />;
|
||||
|
||||
const pub = {
|
||||
get element() { return element; },
|
||||
get count() { return loading === null ? element.childElementCount : 0; },
|
||||
|
||||
get visible() { return !element.classList.contains('hidden'); },
|
||||
set visible(state) { element.classList.toggle('hidden', !state); },
|
||||
|
||||
get loaded() { return loading === null; },
|
||||
|
||||
reset() {
|
||||
entries.clear();
|
||||
$removeChildren(element);
|
||||
loading = new MszLoading;
|
||||
element.appendChild(loading.element);
|
||||
},
|
||||
removeLoading() {
|
||||
loading?.element.remove();
|
||||
loading = null;
|
||||
},
|
||||
|
||||
reorder() {
|
||||
// this feels yucky but it works
|
||||
const items = Array.from(element.children).sort((a, b) => parseInt(b.dataset.commentOrder) - parseInt(a.dataset.commentOrder));
|
||||
for(const item of items)
|
||||
element.appendChild(item);
|
||||
},
|
||||
updateLocked() {
|
||||
for(const [, value] of entries)
|
||||
value.updateLocked();
|
||||
},
|
||||
|
||||
addPost(catInfo, userInfo, postInfo) {
|
||||
const existing = element.querySelector(`[data-comment="${postInfo.id}"]`);
|
||||
if(existing)
|
||||
element.removeChild(existing);
|
||||
|
||||
const entry = new MszCommentsEntry(catInfo ?? {}, userInfo ?? {}, postInfo, pub, root);
|
||||
entries.set(postInfo.id, entry);
|
||||
element.appendChild(entry.element);
|
||||
},
|
||||
addPosts(catInfo, userInfo, posts) {
|
||||
try {
|
||||
if(!Array.isArray(posts))
|
||||
throw 'posts must be an array';
|
||||
catInfo ??= {};
|
||||
userInfo ??= {};
|
||||
for(const postInfo of posts)
|
||||
pub.addPost(catInfo, userInfo, postInfo);
|
||||
} finally {
|
||||
pub.removeLoading();
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
return pub;
|
||||
};
|
||||
94
assets/misuzu.js/comments/options.jsx
Normal file
94
assets/misuzu.js/comments/options.jsx
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
#include msgbox.jsx
|
||||
#include comments/api.js
|
||||
|
||||
const MszCommentsOptionsLockAction = function(catInfo, reinit) {
|
||||
const element = <button class="comments-options-action"/>;
|
||||
|
||||
const setLocked = state => {
|
||||
$removeChildren(element);
|
||||
if(state) {
|
||||
element.appendChild(<i class="fas fa-unlock" />);
|
||||
element.appendChild(<span>Unlock</span>);
|
||||
} else {
|
||||
element.appendChild(<i class="fas fa-lock" />);
|
||||
element.appendChild(<span>Lock</span>);
|
||||
}
|
||||
};
|
||||
|
||||
setLocked(catInfo.locked);
|
||||
|
||||
element.onclick = async () => {
|
||||
element.disabled = true;
|
||||
try {
|
||||
if(!catInfo.locked && !await MszShowConfirmBox(`Are you sure you want to lock comments category ${catInfo.name}?`, 'Locked a comment section'))
|
||||
return;
|
||||
|
||||
const result = await MszCommentsApi.updateCategory(catInfo.name, { lock: catInfo.locked ? '0' : '1' });
|
||||
if('locked' in result) {
|
||||
if(result.locked)
|
||||
catInfo.locked = result.locked;
|
||||
else
|
||||
delete catInfo.locked;
|
||||
}
|
||||
|
||||
setLocked(catInfo.locked);
|
||||
reinit();
|
||||
} catch(ex) {
|
||||
console.error(ex);
|
||||
} finally {
|
||||
element.disabled = false;
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
get element() { return element; },
|
||||
};
|
||||
};
|
||||
|
||||
const MszCommentsOptionsRetryAction = function(section) {
|
||||
const element = <button class="comments-options-action">
|
||||
<i class="fas fa-sync-alt" />
|
||||
Retry
|
||||
</button>;
|
||||
|
||||
element.onclick = async () => {
|
||||
element.disabled = true;
|
||||
try {
|
||||
await section.reload();
|
||||
} catch(ex) {
|
||||
console.error(ex);
|
||||
} finally {
|
||||
element.disabled = false;
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
get element() { return element; },
|
||||
};
|
||||
};
|
||||
|
||||
const MszCommentsOptions = function() {
|
||||
const actions = <div class="comments-options-actions" />;
|
||||
const element = <div class="comments-options hidden">
|
||||
{actions}
|
||||
</div>;
|
||||
|
||||
const hideIfNoChildren = () => {
|
||||
element.classList.toggle('hidden', actions.childElementCount < 1);
|
||||
};
|
||||
hideIfNoChildren();
|
||||
|
||||
return {
|
||||
get element() { return element; },
|
||||
|
||||
reset() {
|
||||
$removeChildren(actions);
|
||||
hideIfNoChildren();
|
||||
},
|
||||
|
||||
appendAction(action) {
|
||||
actions.appendChild(action.element);
|
||||
hideIfNoChildren();
|
||||
},
|
||||
};
|
||||
};
|
||||
83
assets/misuzu.js/comments/section.jsx
Normal file
83
assets/misuzu.js/comments/section.jsx
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
#include msgbox.jsx
|
||||
#include comments/api.js
|
||||
#include comments/form.jsx
|
||||
#include comments/listing.jsx
|
||||
#include comments/options.jsx
|
||||
|
||||
const MszCommentsSection = function(args) {
|
||||
let { category: catName } = args ?? {};
|
||||
|
||||
const options = new MszCommentsOptions;
|
||||
const listing = new MszCommentsListing({ root: true });
|
||||
const element = <div class="comments">
|
||||
{options}
|
||||
{listing}
|
||||
</div>;
|
||||
|
||||
let form;
|
||||
let retryAct;
|
||||
|
||||
const clearForm = () => {
|
||||
if(form) {
|
||||
element.removeChild(form.element);
|
||||
form = undefined;
|
||||
}
|
||||
};
|
||||
const setForm = elem => {
|
||||
clearForm();
|
||||
form = elem;
|
||||
$insertBefore(element.firstChild, form.element);
|
||||
};
|
||||
const initForm = (userInfo, catInfo) => {
|
||||
if(!userInfo)
|
||||
setForm(new MszCommentsFormNotice({ body: 'You must be logged in to post comments.' }));
|
||||
else if(!userInfo.can_create)
|
||||
setForm(new MszCommentsFormNotice({ body: 'You are not allowed to comment.' }));
|
||||
else if(catInfo.locked)
|
||||
setForm(new MszCommentsFormNotice({ body: 'This comment section is closed.' }));
|
||||
else
|
||||
setForm(new MszCommentsForm({ userInfo, catInfo, listing }));
|
||||
};
|
||||
|
||||
const pub = {
|
||||
get element() { return element; },
|
||||
|
||||
async reload() {
|
||||
clearForm();
|
||||
listing.reset();
|
||||
|
||||
try {
|
||||
const { user, category, posts } = await MszCommentsApi.getCategory(catName);
|
||||
|
||||
retryAct = undefined;
|
||||
options.reset();
|
||||
|
||||
initForm(user, category);
|
||||
|
||||
if(user?.can_lock)
|
||||
options.appendAction(new MszCommentsOptionsLockAction(
|
||||
category,
|
||||
() => {
|
||||
initForm(user, category);
|
||||
listing.updateLocked();
|
||||
}
|
||||
));
|
||||
|
||||
listing.addPosts(category, user, posts);
|
||||
} catch(ex) {
|
||||
console.error(ex);
|
||||
listing.removeLoading();
|
||||
|
||||
form = new MszCommentsFormNotice({ body: 'Failed to load comments.' });
|
||||
$insertBefore(element.firstChild, form.element);
|
||||
|
||||
if(!retryAct)
|
||||
options.appendAction(retryAct = new MszCommentsOptionsRetryAction(pub));
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
pub.reload();
|
||||
|
||||
return pub;
|
||||
};
|
||||
|
|
@ -9,41 +9,32 @@ const MszAudioEmbedPlayerEvents = function() {
|
|||
};
|
||||
|
||||
const MszAudioEmbed = function(player) {
|
||||
const elem = $create({
|
||||
attrs: {
|
||||
classList: ['aembed', 'aembed-' + player.getType()],
|
||||
},
|
||||
child: player,
|
||||
});
|
||||
const element = $element('div', { classList: ['aembed', 'aembed-' + player.getType()] }, player);
|
||||
|
||||
return {
|
||||
getElement: function() {
|
||||
return elem;
|
||||
},
|
||||
get element() { return element; },
|
||||
get player() { return player; },
|
||||
appendTo: function(target) {
|
||||
target.appendChild(elem);
|
||||
target.appendChild(element);
|
||||
},
|
||||
insertBefore: function(ref) {
|
||||
$insertBefore(ref, elem);
|
||||
$insertBefore(ref, element);
|
||||
},
|
||||
nuke: function() {
|
||||
elem.remove();
|
||||
element.remove();
|
||||
},
|
||||
replaceElement(target) {
|
||||
$insertBefore(target, elem);
|
||||
$insertBefore(target, element);
|
||||
target.remove();
|
||||
},
|
||||
getPlayer: function() {
|
||||
return player;
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const MszAudioEmbedPlayer = function(metadata, options) {
|
||||
options = options || {};
|
||||
|
||||
const shouldAutoplay = options.autoplay === undefined || options.autoplay,
|
||||
haveNativeControls = options.nativeControls !== undefined && options.nativeControls;
|
||||
const shouldAutoplay = options.autoplay === undefined || options.autoplay;
|
||||
const haveNativeControls = options.nativeControls !== undefined && options.nativeControls;
|
||||
|
||||
const playerAttrs = {
|
||||
src: metadata.url,
|
||||
|
|
@ -58,26 +49,21 @@ const MszAudioEmbedPlayer = function(metadata, options) {
|
|||
const watchers = new MszWatchers;
|
||||
watchers.define(MszAudioEmbedPlayerEvents());
|
||||
|
||||
const player = $create({
|
||||
tag: 'audio',
|
||||
attrs: playerAttrs,
|
||||
});
|
||||
const element = $element('audio', playerAttrs);
|
||||
|
||||
const pub = {
|
||||
getElement: function() {
|
||||
return player;
|
||||
},
|
||||
get element() { return element; },
|
||||
appendTo: function(target) {
|
||||
target.appendChild(player);
|
||||
target.appendChild(element);
|
||||
},
|
||||
insertBefore: function(ref) {
|
||||
$insertBefore(ref, player);
|
||||
$insertBefore(ref, element);
|
||||
},
|
||||
nuke: function() {
|
||||
player.remove();
|
||||
element.remove();
|
||||
},
|
||||
replaceElement(target) {
|
||||
$insertBefore(target, player);
|
||||
$insertBefore(target, element);
|
||||
target.remove();
|
||||
},
|
||||
getType: function() { return 'external'; },
|
||||
|
|
@ -86,76 +72,76 @@ const MszAudioEmbedPlayer = function(metadata, options) {
|
|||
pub.watch = (name, handler) => watchers.watch(name, handler);
|
||||
pub.unwatch = (name, handler) => watchers.unwatch(name, handler);
|
||||
|
||||
player.addEventListener('play', function() { watchers.call('play', pub); });
|
||||
element.addEventListener('play', function() { watchers.call('play', pub); });
|
||||
|
||||
const pPlay = function() { player.play(); };
|
||||
const pPlay = function() { element.play(); };
|
||||
pub.play = pPlay;
|
||||
|
||||
const pPause = function() { player.pause(); };
|
||||
const pPause = function() { element.pause(); };
|
||||
pub.pause = pPause;
|
||||
|
||||
let stopCalled = false;
|
||||
player.addEventListener('pause', function() {
|
||||
element.addEventListener('pause', function() {
|
||||
watchers.call(stopCalled ? 'stop' : 'pause', pub);
|
||||
stopCalled = false;
|
||||
});
|
||||
|
||||
const pStop = function() {
|
||||
stopCalled = true;
|
||||
player.pause();
|
||||
player.currentTime = 0;
|
||||
element.pause();
|
||||
element.currentTime = 0;
|
||||
};
|
||||
pub.stop = pStop;
|
||||
|
||||
const pIsPlaying = function() { return !player.paused; };
|
||||
const pIsPlaying = function() { return !element.paused; };
|
||||
pub.isPlaying = pIsPlaying;
|
||||
|
||||
const pIsMuted = function() { return player.muted; };
|
||||
const pIsMuted = function() { return element.muted; };
|
||||
pub.isMuted = pIsMuted;
|
||||
|
||||
let lastMuteState = player.muted;
|
||||
player.addEventListener('volumechange', function() {
|
||||
if(lastMuteState !== player.muted) {
|
||||
lastMuteState = player.muted;
|
||||
let lastMuteState = element.muted;
|
||||
element.addEventListener('volumechange', function() {
|
||||
if(lastMuteState !== element.muted) {
|
||||
lastMuteState = element.muted;
|
||||
watchers.call('mute', pub, [lastMuteState]);
|
||||
} else
|
||||
watchers.call('volume', pub, [player.volume]);
|
||||
watchers.call('volume', pub, [element.volume]);
|
||||
});
|
||||
|
||||
const pSetMuted = function(state) { player.muted = state; };
|
||||
const pSetMuted = function(state) { element.muted = state; };
|
||||
pub.setMuted = pSetMuted;
|
||||
|
||||
const pGetVolume = function() { return player.volume; };
|
||||
const pGetVolume = function() { return element.volume; };
|
||||
pub.getVolume = pGetVolume;
|
||||
|
||||
const pSetVolume = function(volume) { player.volume = volume; };
|
||||
const pSetVolume = function(volume) { element.volume = volume; };
|
||||
pub.setVolume = pSetVolume;
|
||||
|
||||
const pGetPlaybackRate = function() { return player.playbackRate; };
|
||||
const pGetPlaybackRate = function() { return element.playbackRate; };
|
||||
pub.getPlaybackRate = pGetPlaybackRate;
|
||||
|
||||
player.addEventListener('ratechange', function() {
|
||||
watchers.call('rate', pub, [player.playbackRate]);
|
||||
element.addEventListener('ratechange', function() {
|
||||
watchers.call('rate', pub, [element.playbackRate]);
|
||||
});
|
||||
|
||||
const pSetPlaybackRate = function(rate) { player.playbackRate = rate; };
|
||||
const pSetPlaybackRate = function(rate) { element.playbackRate = rate; };
|
||||
pub.setPlaybackRate = pSetPlaybackRate;
|
||||
|
||||
window.addEventListener('durationchange', function() {
|
||||
watchers.call('duration', pub, [player.duration]);
|
||||
watchers.call('duration', pub, [element.duration]);
|
||||
});
|
||||
|
||||
const pGetDuration = function() { return player.duration; };
|
||||
const pGetDuration = function() { return element.duration; };
|
||||
pub.getDuration = pGetDuration;
|
||||
|
||||
window.addEventListener('timeupdate', function() {
|
||||
watchers.call('time', pub, [player.currentTime]);
|
||||
watchers.call('time', pub, [element.currentTime]);
|
||||
});
|
||||
|
||||
const pGetTime = function() { return player.currentTime; };
|
||||
const pGetTime = function() { return element.currentTime; };
|
||||
pub.getTime = pGetTime;
|
||||
|
||||
const pSeek = function(time) { player.currentTime = time; };
|
||||
const pSeek = function(time) { element.currentTime = time; };
|
||||
pub.seek = pSeek;
|
||||
|
||||
return pub;
|
||||
|
|
@ -167,38 +153,32 @@ const MszAudioEmbedPlaceholder = function(metadata, options) {
|
|||
if(typeof options.player !== 'function' && typeof options.onclick !== 'function')
|
||||
throw 'Neither a player nor an onclick handler were provided.';
|
||||
|
||||
let title = [],
|
||||
album = undefined;
|
||||
let title = [];
|
||||
let album;
|
||||
if(metadata.media !== undefined && metadata.media.tags !== undefined) {
|
||||
const tags = metadata.media.tags;
|
||||
|
||||
if(tags.title !== undefined) {
|
||||
if(tags.artist !== undefined) {
|
||||
title.push({
|
||||
tag: 'span',
|
||||
attrs: {
|
||||
className: 'aembedph-info-title-artist',
|
||||
},
|
||||
child: tags.artist,
|
||||
});
|
||||
title.push($element(
|
||||
'span',
|
||||
{ className: 'aembedph-info-title-artist' },
|
||||
tags.artist,
|
||||
));
|
||||
title.push(' - ');
|
||||
}
|
||||
|
||||
title.push({
|
||||
tag: 'span',
|
||||
attrs: {
|
||||
className: 'aembedph-info-title-title',
|
||||
},
|
||||
child: tags.title,
|
||||
});
|
||||
title.push($element(
|
||||
'span',
|
||||
{ className: 'aembedph-info-title-title' },
|
||||
tags.title,
|
||||
));
|
||||
} else {
|
||||
title.push({
|
||||
tag: 'span',
|
||||
attrs: {
|
||||
className: 'aembedph-info-title-title',
|
||||
},
|
||||
child: metadata.title,
|
||||
});
|
||||
title.push($element(
|
||||
'span',
|
||||
{ className: 'aembedph-info-title-title' },
|
||||
metadata.title,
|
||||
));
|
||||
}
|
||||
|
||||
if(tags.album !== undefined && tags.album !== tags.title)
|
||||
|
|
@ -207,159 +187,131 @@ const MszAudioEmbedPlaceholder = function(metadata, options) {
|
|||
|
||||
const infoChildren = [];
|
||||
|
||||
infoChildren.push({
|
||||
tag: 'h1',
|
||||
attrs: {
|
||||
className: 'aembedph-info-title',
|
||||
},
|
||||
child: title,
|
||||
});
|
||||
infoChildren.push($element(
|
||||
'h1',
|
||||
{ className: 'aembedph-info-title' },
|
||||
...title,
|
||||
));
|
||||
|
||||
infoChildren.push({
|
||||
tags: 'p',
|
||||
attrs: {
|
||||
className: 'aembedph-info-album',
|
||||
},
|
||||
child: album,
|
||||
});
|
||||
infoChildren.push($element(
|
||||
'p',
|
||||
{ className: 'aembedph-info-album' },
|
||||
album,
|
||||
));
|
||||
|
||||
infoChildren.push({
|
||||
tag: 'div',
|
||||
attrs: {
|
||||
className: 'aembedph-info-site',
|
||||
},
|
||||
child: metadata.site_name,
|
||||
});
|
||||
infoChildren.push($element(
|
||||
'div',
|
||||
{ className: 'aembedph-info-site' },
|
||||
metadata.site_name,
|
||||
));
|
||||
|
||||
const style = [];
|
||||
if(typeof metadata.color !== 'undefined')
|
||||
style.push('--aembedph-colour: ' + metadata.color);
|
||||
|
||||
const coverBackground = $create({
|
||||
attrs: {
|
||||
className: 'aembedph-bg',
|
||||
},
|
||||
child: {
|
||||
tag: 'img',
|
||||
attrs: {
|
||||
alt: '',
|
||||
src: metadata.image,
|
||||
onerror: function(ev) {
|
||||
coverBackground.classList.add('aembedph-bg-none');
|
||||
},
|
||||
const coverBackground = $element(
|
||||
'div',
|
||||
{ className: 'aembedph-bg' },
|
||||
$element('img', {
|
||||
alt: '',
|
||||
src: metadata.image,
|
||||
onerror: function(ev) {
|
||||
coverBackground.classList.add('aembedph-bg-none');
|
||||
},
|
||||
},
|
||||
});
|
||||
}),
|
||||
);
|
||||
|
||||
const coverPreview = $create({
|
||||
attrs: {
|
||||
className: 'aembedph-info-cover',
|
||||
},
|
||||
child: {
|
||||
tag: 'img',
|
||||
attrs: {
|
||||
alt: '',
|
||||
src: metadata.image,
|
||||
onerror: function(ev) {
|
||||
coverPreview.classList.add('aembedph-info-cover-none');
|
||||
},
|
||||
const coverPreview = $element(
|
||||
'div',
|
||||
{ className: 'aembedph-info-cover' },
|
||||
$element('img', {
|
||||
alt: '',
|
||||
src: metadata.image,
|
||||
onerror: function(ev) {
|
||||
coverPreview.classList.add('aembedph-info-cover-none');
|
||||
},
|
||||
},
|
||||
});
|
||||
}),
|
||||
);
|
||||
|
||||
const pub = {};
|
||||
let element;
|
||||
const pub = {
|
||||
get element() { return element; },
|
||||
};
|
||||
|
||||
const elem = $create({
|
||||
attrs: {
|
||||
element = $element(
|
||||
'div',
|
||||
{
|
||||
className: ('aembedph aembedph-' + (options.type || 'external')),
|
||||
style: style.join(';'),
|
||||
title: metadata.title,
|
||||
},
|
||||
child: [
|
||||
coverBackground,
|
||||
{
|
||||
attrs: {
|
||||
className: 'aembedph-fg',
|
||||
},
|
||||
child: [
|
||||
{
|
||||
attrs: {
|
||||
className: 'aembedph-info',
|
||||
},
|
||||
child: [
|
||||
coverPreview,
|
||||
{
|
||||
attrs: {
|
||||
className: 'aembedph-info-body',
|
||||
},
|
||||
child: infoChildren,
|
||||
}
|
||||
],
|
||||
coverBackground,
|
||||
$element(
|
||||
'div',
|
||||
{ className: 'aembedph-fg' },
|
||||
$element(
|
||||
'div',
|
||||
{ className: 'aembedph-info' },
|
||||
coverPreview,
|
||||
$element(
|
||||
'div',
|
||||
{ className: 'aembedph-info-body' },
|
||||
...infoChildren
|
||||
),
|
||||
),
|
||||
$element(
|
||||
'div',
|
||||
{
|
||||
className: 'aembedph-play',
|
||||
onclick: function(ev) {
|
||||
if(ev.target.tagName.toLowerCase() === 'a')
|
||||
return;
|
||||
|
||||
if(typeof options.onclick === 'function') {
|
||||
options.onclick(ev);
|
||||
return;
|
||||
}
|
||||
|
||||
const player = new options.player(metadata, options);
|
||||
|
||||
const embed = new MszAudioEmbed(player);
|
||||
if(options.autoembed === undefined || options.autoembed)
|
||||
embed.replaceElement(element);
|
||||
|
||||
if(typeof options.onembed === 'function')
|
||||
options.onembed(embed);
|
||||
},
|
||||
{
|
||||
attrs: {
|
||||
className: 'aembedph-play',
|
||||
onclick: function(ev) {
|
||||
if(ev.target.tagName.toLowerCase() === 'a')
|
||||
return;
|
||||
|
||||
if(typeof options.onclick === 'function') {
|
||||
options.onclick(ev);
|
||||
return;
|
||||
}
|
||||
|
||||
const player = new options.player(metadata, options);
|
||||
|
||||
const embed = new MszAudioEmbed(player);
|
||||
if(options.autoembed === undefined || options.autoembed)
|
||||
embed.replaceElement(elem);
|
||||
|
||||
if(typeof options.onembed === 'function')
|
||||
options.onembed(embed);
|
||||
},
|
||||
},
|
||||
$element(
|
||||
'div',
|
||||
{ className: 'aembedph-play-internal', },
|
||||
$element('i', { className: 'fas fa-play fa-3x fa-fw' }),
|
||||
),
|
||||
$element(
|
||||
'div',
|
||||
{ className: 'aembedph-play-external' },
|
||||
$element(
|
||||
'a',
|
||||
{
|
||||
className: 'aembedph-play-external-link',
|
||||
href: metadata.url,
|
||||
target: '_blank',
|
||||
rel: 'noopener',
|
||||
},
|
||||
child: [
|
||||
{
|
||||
attrs: {
|
||||
className: 'aembedph-play-internal',
|
||||
},
|
||||
child: {
|
||||
tag: 'i',
|
||||
attrs: {
|
||||
className: 'fas fa-play fa-3x fa-fw',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
attrs: {
|
||||
className: 'aembedph-play-external',
|
||||
},
|
||||
child: {
|
||||
tag: 'a',
|
||||
attrs: {
|
||||
className: 'aembedph-play-external-link',
|
||||
href: metadata.url,
|
||||
target: '_blank',
|
||||
rel: 'noopener',
|
||||
},
|
||||
child: ('or listen on ' + metadata.site_name + '?')
|
||||
},
|
||||
}
|
||||
],
|
||||
}
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
`or listen on ${metadata.site_name}?`
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
pub.getElement = function() { return elem; };
|
||||
pub.appendTo = function(target) { target.appendChild(elem); };
|
||||
pub.insertBefore = function(ref) { $insertBefore(ref, elem); };
|
||||
pub.appendTo = function(target) { target.appendChild(element); };
|
||||
pub.insertBefore = function(ref) { $insertBefore(ref, element); };
|
||||
pub.nuke = function() {
|
||||
elem.remove();
|
||||
element.remove();
|
||||
};
|
||||
pub.replaceElement = function(target) {
|
||||
$insertBefore(target, elem);
|
||||
$insertBefore(target, element);
|
||||
target.remove();
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -30,18 +30,7 @@ const MszEmbed = (function() {
|
|||
}
|
||||
|
||||
$removeChildren(target);
|
||||
target.appendChild($create({
|
||||
tag: 'i',
|
||||
attrs: {
|
||||
className: 'fas fa-2x fa-spinner fa-pulse',
|
||||
style: {
|
||||
width: '32px',
|
||||
height: '32px',
|
||||
lineHeight: '32px',
|
||||
textAlign: 'center',
|
||||
},
|
||||
},
|
||||
}));
|
||||
target.appendChild((new MszLoading({ inline: true })).element);
|
||||
|
||||
if(filtered.has(cleanUrl))
|
||||
filtered.get(cleanUrl).push(target);
|
||||
|
|
@ -51,16 +40,16 @@ const MszEmbed = (function() {
|
|||
|
||||
const replaceWithUrl = function(targets, url) {
|
||||
for(const target of targets) {
|
||||
let body = $create({
|
||||
tag: 'a',
|
||||
attrs: {
|
||||
let body = $element(
|
||||
'a',
|
||||
{
|
||||
className: 'link',
|
||||
href: url,
|
||||
target: '_blank',
|
||||
rel: 'noopener noreferrer',
|
||||
},
|
||||
child: url
|
||||
});
|
||||
url
|
||||
);
|
||||
$insertBefore(target, body);
|
||||
target.remove();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,24 @@
|
|||
const MszImageEmbed = function(metadata, options, target) {
|
||||
options = options || {};
|
||||
|
||||
const image = $create({
|
||||
tag: 'img',
|
||||
attrs: {
|
||||
alt: target.dataset.mszEmbedAlt || '',
|
||||
src: metadata.url,
|
||||
},
|
||||
const element = $element('img', {
|
||||
alt: target.dataset.mszEmbedAlt || '',
|
||||
src: metadata.url,
|
||||
});
|
||||
|
||||
const pub = {
|
||||
getElement: function() {
|
||||
return image;
|
||||
},
|
||||
get element() { return element; },
|
||||
appendTo: function(target) {
|
||||
target.appendChild(image);
|
||||
target.appendChild(element);
|
||||
},
|
||||
insertBefore: function(ref) {
|
||||
$insertBefore(ref, image);
|
||||
$insertBefore(ref, element);
|
||||
},
|
||||
nuke: function() {
|
||||
image.remove();
|
||||
element.remove();
|
||||
},
|
||||
replaceElement(target) {
|
||||
$insertBefore(target, image);
|
||||
$insertBefore(target, element);
|
||||
target.remove();
|
||||
},
|
||||
getType: function() { return 'external'; },
|
||||
|
|
|
|||
|
|
@ -45,38 +45,33 @@ const MszVideoConstrainSize = function(w, h, mw, mh) {
|
|||
|
||||
const MszVideoEmbed = function(playerOrFrame) {
|
||||
const frame = playerOrFrame;
|
||||
const player = 'getPlayer' in frame ? frame.getPlayer() : frame;
|
||||
const player = frame?.player ?? frame;
|
||||
|
||||
const elem = $create({
|
||||
attrs: {
|
||||
classList: ['embed', 'embed-' + player.getType()],
|
||||
},
|
||||
child: frame,
|
||||
});
|
||||
const element = $element(
|
||||
'div',
|
||||
{ classList: ['embed', 'embed-' + player.getType()] },
|
||||
frame,
|
||||
);
|
||||
|
||||
return {
|
||||
getElement: function() {
|
||||
return elem;
|
||||
},
|
||||
get element() { return element; },
|
||||
get player() { return player; },
|
||||
appendTo: function(target) {
|
||||
target.appendChild(elem);
|
||||
target.appendChild(element);
|
||||
},
|
||||
insertBefore: function(ref) {
|
||||
$insertBefore(ref, elem);
|
||||
$insertBefore(ref, element);
|
||||
},
|
||||
nuke: function() {
|
||||
elem.remove();
|
||||
element.remove();
|
||||
},
|
||||
replaceElement(target) {
|
||||
$insertBefore(target, elem);
|
||||
$insertBefore(target, element);
|
||||
target.remove();
|
||||
},
|
||||
getFrame: function() {
|
||||
return frame;
|
||||
},
|
||||
getPlayer: function() {
|
||||
return player;
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
|
|
@ -91,119 +86,78 @@ const MszVideoEmbedFrame = function(player, options) {
|
|||
icoVolQuiet = 'fa-volume-down',
|
||||
icoVolLoud = 'fa-volume-up';
|
||||
|
||||
const btnPlayPause = $create({
|
||||
attrs: {},
|
||||
child: {
|
||||
tag: 'i',
|
||||
attrs: {
|
||||
classList: ['fas', 'fa-fw', icoStatePlay],
|
||||
},
|
||||
const btnPlayPause = $element('div', null, $element(
|
||||
'i', { classList: ['fas', 'fa-fw', icoStatePlay] }
|
||||
));
|
||||
|
||||
const btnStop = $element('div', null, $element(
|
||||
'i', { classList: ['fas', 'fa-fw', icoStateStop] }
|
||||
));
|
||||
|
||||
const numCurrentTime = $element('div');
|
||||
const sldProgress = $element('div');
|
||||
const numDurationRemaining = $element('div');
|
||||
|
||||
const btnVolMute = $element('div', null, $element(
|
||||
'i', {
|
||||
// isMuted === icoVolMute
|
||||
// vol < 0.01 === icoVolOff
|
||||
// vol < 0.5 === icoVolQuiet
|
||||
// vol < 1.0 === icoVolLoud
|
||||
classList: ['fas', 'fa-fw', icoVolLoud],
|
||||
}
|
||||
});
|
||||
));
|
||||
|
||||
const btnStop = $create({
|
||||
attrs: {},
|
||||
child: {
|
||||
tag: 'i',
|
||||
attrs: {
|
||||
classList: ['fas', 'fa-fw', icoStateStop],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const numCurrentTime = $create({
|
||||
attrs: {},
|
||||
});
|
||||
|
||||
const sldProgress = $create({
|
||||
attrs: {},
|
||||
child: [],
|
||||
});
|
||||
|
||||
const numDurationRemaining = $create({
|
||||
attrs: {},
|
||||
});
|
||||
|
||||
const btnVolMute = $create({
|
||||
attrs: {},
|
||||
child: {
|
||||
tag: 'i',
|
||||
attrs: {
|
||||
// isMuted === icoVolMute
|
||||
// vol < 0.01 === icoVolOff
|
||||
// vol < 0.5 === icoVolQuiet
|
||||
// vol < 1.0 === icoVolLoud
|
||||
classList: ['fas', 'fa-fw', icoVolLoud],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const elem = $create({
|
||||
attrs: {
|
||||
const element = $element(
|
||||
'div',
|
||||
{
|
||||
className: 'embedvf',
|
||||
style: {
|
||||
width: player.getWidth().toString() + 'px',
|
||||
height: player.getHeight().toString() + 'px',
|
||||
},
|
||||
},
|
||||
child: [
|
||||
{
|
||||
attrs: {
|
||||
className: 'embedvf-player',
|
||||
},
|
||||
child: player,
|
||||
},
|
||||
{
|
||||
attrs: {
|
||||
className: 'embedvf-overlay',
|
||||
},
|
||||
child: [
|
||||
{
|
||||
attrs: {
|
||||
className: 'embedvf-controls',
|
||||
},
|
||||
child: [
|
||||
btnPlayPause,
|
||||
btnStop,
|
||||
numCurrentTime,
|
||||
sldProgress,
|
||||
numDurationRemaining,
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
$element('div', { className: 'embedvf-player' }, player),
|
||||
$element(
|
||||
'div',
|
||||
{ className: 'embedvf-overlay' },
|
||||
$element(
|
||||
'div',
|
||||
{ className: 'embedvf-controls' },
|
||||
btnPlayPause,
|
||||
btnStop,
|
||||
numCurrentTime,
|
||||
sldProgress,
|
||||
numDurationRemaining,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
return {
|
||||
getElement: function() {
|
||||
return elem;
|
||||
},
|
||||
get element() { return element; },
|
||||
get player() { return player; },
|
||||
appendTo: function(target) {
|
||||
target.appendChild(elem);
|
||||
target.appendChild(element);
|
||||
},
|
||||
insertBefore: function(ref) {
|
||||
$insertBefore(ref, elem);
|
||||
$insertBefore(ref, element);
|
||||
},
|
||||
nuke: function() {
|
||||
elem.remove();
|
||||
element.remove();
|
||||
},
|
||||
replaceElement(target) {
|
||||
$insertBefore(target, elem);
|
||||
$insertBefore(target, element);
|
||||
target.remove();
|
||||
},
|
||||
getPlayer: function() {
|
||||
return player;
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const MszVideoEmbedPlayer = function(metadata, options) {
|
||||
options = options || {};
|
||||
|
||||
const shouldAutoplay = options.autoplay === undefined || options.autoplay,
|
||||
haveNativeControls = options.nativeControls !== undefined && options.nativeControls,
|
||||
shouldObserveResize = options.observeResize === undefined || options.observeResize;
|
||||
const shouldAutoplay = options.autoplay === undefined || options.autoplay;
|
||||
const haveNativeControls = options.nativeControls !== undefined && options.nativeControls;
|
||||
const shouldObserveResize = options.observeResize === undefined || options.observeResize;
|
||||
|
||||
const videoAttrs = {
|
||||
src: metadata.url,
|
||||
|
|
@ -230,32 +184,27 @@ const MszVideoEmbedPlayer = function(metadata, options) {
|
|||
const watchers = new MszWatchers;
|
||||
watchers.define(MszVideoEmbedPlayerEvents());
|
||||
|
||||
const player = $create({
|
||||
tag: 'video',
|
||||
attrs: videoAttrs,
|
||||
});
|
||||
const element = $element('video', videoAttrs);
|
||||
|
||||
const setSize = function(w, h) {
|
||||
const size = constrainSize(w, h, initialSize[0], initialSize[1]);
|
||||
player.style.width = size[0].toString() + 'px';
|
||||
player.style.height = size[1].toString() + 'px';
|
||||
element.style.width = size[0].toString() + 'px';
|
||||
element.style.height = size[1].toString() + 'px';
|
||||
};
|
||||
|
||||
const pub = {
|
||||
getElement: function() {
|
||||
return player;
|
||||
},
|
||||
get element() { return element; },
|
||||
appendTo: function(target) {
|
||||
target.appendChild(player);
|
||||
target.appendChild(element);
|
||||
},
|
||||
insertBefore: function(ref) {
|
||||
$insertBefore(ref, player);
|
||||
$insertBefore(ref, element);
|
||||
},
|
||||
nuke: function() {
|
||||
player.remove();
|
||||
element.remove();
|
||||
},
|
||||
replaceElement(target) {
|
||||
$insertBefore(target, player);
|
||||
$insertBefore(target, element);
|
||||
target.remove();
|
||||
},
|
||||
getType: function() { return 'external'; },
|
||||
|
|
@ -267,78 +216,78 @@ const MszVideoEmbedPlayer = function(metadata, options) {
|
|||
pub.unwatch = (name, handler) => watchers.unwatch(name, handler);
|
||||
|
||||
if(shouldObserveResize)
|
||||
player.addEventListener('resize', function() { setSize(player.videoWidth, player.videoHeight); });
|
||||
element.addEventListener('resize', function() { setSize(element.videoWidth, element.videoHeight); });
|
||||
|
||||
player.addEventListener('play', function() { watchers.call('play'); });
|
||||
element.addEventListener('play', function() { watchers.call('play'); });
|
||||
|
||||
const pPlay = function() { player.play(); };
|
||||
const pPlay = function() { element.play(); };
|
||||
pub.play = pPlay;
|
||||
|
||||
const pPause = function() { player.pause(); };
|
||||
const pPause = function() { element.pause(); };
|
||||
pub.pause = pPause;
|
||||
|
||||
let stopCalled = false;
|
||||
player.addEventListener('pause', function() {
|
||||
element.addEventListener('pause', function() {
|
||||
watchers.call(stopCalled ? 'stop' : 'pause');
|
||||
stopCalled = false;
|
||||
});
|
||||
|
||||
const pStop = function() {
|
||||
stopCalled = true;
|
||||
player.pause();
|
||||
player.currentTime = 0;
|
||||
element.pause();
|
||||
element.currentTime = 0;
|
||||
};
|
||||
pub.stop = pStop;
|
||||
|
||||
const pIsPlaying = function() { return !player.paused; };
|
||||
const pIsPlaying = function() { return !element.paused; };
|
||||
pub.isPlaying = pIsPlaying;
|
||||
|
||||
const pIsMuted = function() { return player.muted; };
|
||||
const pIsMuted = function() { return element.muted; };
|
||||
pub.isMuted = pIsMuted;
|
||||
|
||||
let lastMuteState = player.muted;
|
||||
player.addEventListener('volumechange', function() {
|
||||
if(lastMuteState !== player.muted) {
|
||||
lastMuteState = player.muted;
|
||||
let lastMuteState = element.muted;
|
||||
element.addEventListener('volumechange', function() {
|
||||
if(lastMuteState !== element.muted) {
|
||||
lastMuteState = element.muted;
|
||||
watchers.call('mute', lastMuteState);
|
||||
} else
|
||||
watchers.call('volume', player.volume);
|
||||
watchers.call('volume', element.volume);
|
||||
});
|
||||
|
||||
const pSetMuted = function(state) { player.muted = state; };
|
||||
const pSetMuted = function(state) { element.muted = state; };
|
||||
pub.setMuted = pSetMuted;
|
||||
|
||||
const pGetVolume = function() { return player.volume; };
|
||||
const pGetVolume = function() { return element.volume; };
|
||||
pub.getVolume = pGetVolume;
|
||||
|
||||
const pSetVolume = function(volume) { player.volume = volume; };
|
||||
const pSetVolume = function(volume) { element.volume = volume; };
|
||||
pub.setVolume = pSetVolume;
|
||||
|
||||
const pGetPlaybackRate = function() { return player.playbackRate; };
|
||||
const pGetPlaybackRate = function() { return element.playbackRate; };
|
||||
pub.getPlaybackRate = pGetPlaybackRate;
|
||||
|
||||
player.addEventListener('ratechange', function() {
|
||||
watchers.call('rate', player.playbackRate);
|
||||
element.addEventListener('ratechange', function() {
|
||||
watchers.call('rate', element.playbackRate);
|
||||
});
|
||||
|
||||
const pSetPlaybackRate = function(rate) { player.playbackRate = rate; };
|
||||
const pSetPlaybackRate = function(rate) { element.playbackRate = rate; };
|
||||
pub.setPlaybackRate = pSetPlaybackRate;
|
||||
|
||||
window.addEventListener('durationchange', function() {
|
||||
watchers.call('duration', player.duration);
|
||||
watchers.call('duration', element.duration);
|
||||
});
|
||||
|
||||
const pGetDuration = function() { return player.duration; };
|
||||
const pGetDuration = function() { return element.duration; };
|
||||
pub.getDuration = pGetDuration;
|
||||
|
||||
window.addEventListener('timeupdate', function() {
|
||||
watchers.call('time', player.currentTime);
|
||||
watchers.call('time', element.currentTime);
|
||||
});
|
||||
|
||||
const pGetTime = function() { return player.currentTime; };
|
||||
const pGetTime = function() { return element.currentTime; };
|
||||
pub.getTime = pGetTime;
|
||||
|
||||
const pSeek = function(time) { player.currentTime = time; };
|
||||
const pSeek = function(time) { element.currentTime = time; };
|
||||
pub.seek = pSeek;
|
||||
|
||||
return pub;
|
||||
|
|
@ -347,9 +296,9 @@ const MszVideoEmbedPlayer = function(metadata, options) {
|
|||
const MszVideoEmbedYouTube = function(metadata, options) {
|
||||
options = options || {};
|
||||
|
||||
const ytOrigin = 'https://www.youtube.com',
|
||||
playerId = 'yt-' + $rngs(8),
|
||||
shouldAutoplay = options.autoplay === undefined || options.autoplay;
|
||||
const ytOrigin = 'https://www.youtube.com';
|
||||
const playerId = 'yt-' + $rngs(8);
|
||||
const shouldAutoplay = options.autoplay === undefined || options.autoplay;
|
||||
|
||||
let embedUrl = 'https://www.youtube.com/embed/' + metadata.youtube_video_id + '?enablejsapi=1';
|
||||
|
||||
|
|
@ -376,31 +325,26 @@ const MszVideoEmbedYouTube = function(metadata, options) {
|
|||
const watchers = new MszWatchers;
|
||||
watchers.define(MszVideoEmbedPlayerEvents());
|
||||
|
||||
const player = $create({
|
||||
tag: 'iframe',
|
||||
attrs: {
|
||||
frameborder: 0,
|
||||
allow: 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',
|
||||
allowfullscreen: 'allowfullscreen',
|
||||
src: embedUrl,
|
||||
},
|
||||
const element = $element('iframe', {
|
||||
frameborder: 0,
|
||||
allow: 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',
|
||||
allowfullscreen: 'allowfullscreen',
|
||||
src: embedUrl,
|
||||
});
|
||||
|
||||
const pub = {
|
||||
getElement: function() {
|
||||
return player;
|
||||
},
|
||||
get element() { return element; },
|
||||
appendTo: function(target) {
|
||||
target.appendChild(player);
|
||||
target.appendChild(element);
|
||||
},
|
||||
insertBefore: function(ref) {
|
||||
$insertBefore(ref, player);
|
||||
$insertBefore(ref, element);
|
||||
},
|
||||
nuke: function() {
|
||||
player.remove();
|
||||
element.remove();
|
||||
},
|
||||
replaceElement(target) {
|
||||
$insertBefore(target, player);
|
||||
$insertBefore(target, element);
|
||||
target.remove();
|
||||
},
|
||||
getType: function() { return 'youtube'; },
|
||||
|
|
@ -413,7 +357,7 @@ const MszVideoEmbedYouTube = function(metadata, options) {
|
|||
pub.unwatch = (name, handler) => watchers.unwatch(name, handler);
|
||||
|
||||
const postMessage = function(data) {
|
||||
player.contentWindow.postMessage(JSON.stringify(data), ytOrigin);
|
||||
element.contentWindow.postMessage(JSON.stringify(data), ytOrigin);
|
||||
};
|
||||
const postCommand = function(name, args) {
|
||||
postMessage({
|
||||
|
|
@ -532,7 +476,7 @@ const MszVideoEmbedYouTube = function(metadata, options) {
|
|||
}
|
||||
});
|
||||
|
||||
player.addEventListener('load', function(ev) {
|
||||
element.addEventListener('load', function(ev) {
|
||||
postMessage({
|
||||
id: playerId,
|
||||
event: 'listening',
|
||||
|
|
@ -559,49 +503,44 @@ const MszVideoEmbedYouTube = function(metadata, options) {
|
|||
const MszVideoEmbedNicoNico = function(metadata, options) {
|
||||
options = options || {};
|
||||
|
||||
const nndOrigin = 'https://embed.nicovideo.jp',
|
||||
playerId = 'nnd-' + $rngs(8),
|
||||
shouldAutoplay = options.autoplay === undefined || options.autoplay;
|
||||
const nndOrigin = 'https://embed.nicovideo.jp';
|
||||
const playerId = 'nnd-' + $rngs(8);
|
||||
const shouldAutoplay = options.autoplay === undefined || options.autoplay;
|
||||
|
||||
let embedUrl = 'https://embed.nicovideo.jp/watch/' + metadata.nicovideo_video_id + '?jsapi=1&playerId=' + playerId;
|
||||
|
||||
if(metadata.nicovideo_start_time)
|
||||
embedUrl += '&from=' + encodeURIComponent(metadata.nicovideo_start_time);
|
||||
|
||||
let isMuted = undefined,
|
||||
volume = undefined,
|
||||
duration = undefined,
|
||||
currentTime = undefined,
|
||||
isPlaying = false;
|
||||
let isMuted = undefined;
|
||||
let volume = undefined;
|
||||
let duration = undefined;
|
||||
let currentTime = undefined;
|
||||
let isPlaying = false;
|
||||
|
||||
const watchers = new MszWatchers;
|
||||
watchers.define(MszVideoEmbedPlayerEvents());
|
||||
|
||||
const player = $create({
|
||||
tag: 'iframe',
|
||||
attrs: {
|
||||
frameborder: 0,
|
||||
allow: 'autoplay',
|
||||
allowfullscreen: 'allowfullscreen',
|
||||
src: embedUrl,
|
||||
},
|
||||
const element = $element('iframe', {
|
||||
frameborder: 0,
|
||||
allow: 'autoplay',
|
||||
allowfullscreen: 'allowfullscreen',
|
||||
src: embedUrl,
|
||||
});
|
||||
|
||||
const pub = {
|
||||
getElement: function() {
|
||||
return player;
|
||||
},
|
||||
get element() { return element; },
|
||||
appendTo: function(target) {
|
||||
target.appendChild(player);
|
||||
target.appendChild(element);
|
||||
},
|
||||
insertBefore: function(ref) {
|
||||
$insertBefore(ref, player);
|
||||
$insertBefore(ref, element);
|
||||
},
|
||||
nuke: function() {
|
||||
player.remove();
|
||||
element.remove();
|
||||
},
|
||||
replaceElement(target) {
|
||||
$insertBefore(target, player);
|
||||
$insertBefore(target, element);
|
||||
target.remove();
|
||||
},
|
||||
getType: function() { return 'nicovideo'; },
|
||||
|
|
@ -617,7 +556,7 @@ const MszVideoEmbedNicoNico = function(metadata, options) {
|
|||
if(name === undefined)
|
||||
throw 'name must be specified';
|
||||
|
||||
player.contentWindow.postMessage({
|
||||
element.contentWindow.postMessage({
|
||||
playerId: playerId,
|
||||
sourceConnectorType: 1,
|
||||
eventName: name,
|
||||
|
|
@ -742,35 +681,29 @@ const MszVideoEmbedPlaceholder = function(metadata, options) {
|
|||
|
||||
const infoChildren = [];
|
||||
|
||||
infoChildren.push({
|
||||
tag: 'h1',
|
||||
attrs: {
|
||||
className: 'embedph-info-title',
|
||||
},
|
||||
child: metadata.title,
|
||||
});
|
||||
infoChildren.push($element(
|
||||
'h1',
|
||||
{ className: 'embedph-info-title' },
|
||||
metadata.title,
|
||||
));
|
||||
|
||||
if(metadata.description) {
|
||||
let firstLine = metadata.description.split("\n")[0].trim();
|
||||
if(firstLine.length > 300)
|
||||
firstLine = firstLine.substring(0, 300).trim() + '...';
|
||||
|
||||
infoChildren.push({
|
||||
tag: 'div',
|
||||
attrs: {
|
||||
className: 'embedph-info-desc',
|
||||
},
|
||||
child: firstLine,
|
||||
});
|
||||
infoChildren.push($element(
|
||||
'div',
|
||||
{ className: 'embedph-info-desc' },
|
||||
firstLine,
|
||||
));
|
||||
}
|
||||
|
||||
infoChildren.push({
|
||||
tag: 'div',
|
||||
attrs: {
|
||||
className: 'embedph-info-site',
|
||||
},
|
||||
child: metadata.site_name,
|
||||
});
|
||||
infoChildren.push($element(
|
||||
'div',
|
||||
{ className: 'embedph-info-site' },
|
||||
metadata.site_name,
|
||||
));
|
||||
|
||||
const style = [];
|
||||
if(typeof metadata.color !== 'undefined')
|
||||
|
|
@ -788,116 +721,88 @@ const MszVideoEmbedPlaceholder = function(metadata, options) {
|
|||
style.push('height: ' + size[1].toString() + 'px');
|
||||
}
|
||||
|
||||
const pub = {};
|
||||
let element;
|
||||
const pub = {
|
||||
get element() { return element; },
|
||||
};
|
||||
|
||||
const elem = $create({
|
||||
attrs: {
|
||||
element = $element(
|
||||
'div',
|
||||
{
|
||||
className: ('embedph embedph-' + (options.type || 'external')),
|
||||
style: style.join(';'),
|
||||
},
|
||||
child: [
|
||||
{
|
||||
attrs: {
|
||||
className: 'embedph-bg',
|
||||
},
|
||||
child: {
|
||||
tag: 'img',
|
||||
attrs: {
|
||||
src: metadata.image,
|
||||
$element(
|
||||
'div',
|
||||
{ className: 'embedph-bg' },
|
||||
$element('img', { src: metadata.image }),
|
||||
),
|
||||
$element(
|
||||
'div',
|
||||
{ className: 'embedph-fg' },
|
||||
$element(
|
||||
'div',
|
||||
{ className: 'embedph-info' },
|
||||
$element(
|
||||
'div',
|
||||
{ className: 'embedph-info-wrap' },
|
||||
$element('div', { className: 'embedph-info-bar' }),
|
||||
$element('div', { className: 'embedph-info-body' }, ...infoChildren),
|
||||
),
|
||||
),
|
||||
$element(
|
||||
'div',
|
||||
{
|
||||
className: 'embedph-play',
|
||||
onclick: function(ev) {
|
||||
if(ev.target.tagName.toLowerCase() === 'a')
|
||||
return;
|
||||
|
||||
if(typeof options.onclick === 'function') {
|
||||
options.onclick(ev);
|
||||
return;
|
||||
}
|
||||
|
||||
const player = new options.player(metadata, options);
|
||||
let frameOrPlayer = player;
|
||||
|
||||
if(typeof options.frame === 'function')
|
||||
frameOrPlayer = new options.frame(player, options);
|
||||
|
||||
const embed = new MszVideoEmbed(frameOrPlayer);
|
||||
if(options.autoembed === undefined || options.autoembed)
|
||||
embed.replaceElement(element);
|
||||
|
||||
if(typeof options.onembed === 'function')
|
||||
options.onembed(embed);
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
attrs: {
|
||||
className: 'embedph-fg',
|
||||
},
|
||||
child: [
|
||||
$element(
|
||||
'div',
|
||||
{ className: 'embedph-play-internal' },
|
||||
$element('i', { className: 'fas fa-play fa-4x fa-fw' }),
|
||||
),
|
||||
$element(
|
||||
'a',
|
||||
{
|
||||
attrs: {
|
||||
className: 'embedph-info',
|
||||
},
|
||||
child: {
|
||||
attrs: {
|
||||
className: 'embedph-info-wrap',
|
||||
},
|
||||
child: [
|
||||
{
|
||||
attrs: {
|
||||
className: 'embedph-info-bar',
|
||||
},
|
||||
},
|
||||
{
|
||||
attrs: {
|
||||
className: 'embedph-info-body',
|
||||
},
|
||||
child: infoChildren,
|
||||
}
|
||||
],
|
||||
},
|
||||
className: 'embedph-play-external',
|
||||
href: metadata.url,
|
||||
target: '_blank',
|
||||
rel: 'noopener',
|
||||
},
|
||||
{
|
||||
attrs: {
|
||||
className: 'embedph-play',
|
||||
onclick: function(ev) {
|
||||
if(ev.target.tagName.toLowerCase() === 'a')
|
||||
return;
|
||||
`or watch on ${metadata.site_name}?`
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
if(typeof options.onclick === 'function') {
|
||||
options.onclick(ev);
|
||||
return;
|
||||
}
|
||||
|
||||
const player = new options.player(metadata, options);
|
||||
let frameOrPlayer = player;
|
||||
|
||||
if(typeof options.frame === 'function')
|
||||
frameOrPlayer = new options.frame(player, options);
|
||||
|
||||
const embed = new MszVideoEmbed(frameOrPlayer);
|
||||
if(options.autoembed === undefined || options.autoembed)
|
||||
embed.replaceElement(elem);
|
||||
|
||||
if(typeof options.onembed === 'function')
|
||||
options.onembed(embed);
|
||||
},
|
||||
},
|
||||
child: [
|
||||
{
|
||||
attrs: {
|
||||
className: 'embedph-play-internal',
|
||||
},
|
||||
child: {
|
||||
tag: 'i',
|
||||
attrs: {
|
||||
className: 'fas fa-play fa-4x fa-fw',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: 'a',
|
||||
attrs: {
|
||||
className: 'embedph-play-external',
|
||||
href: metadata.url,
|
||||
target: '_blank',
|
||||
rel: 'noopener',
|
||||
},
|
||||
child: ('or watch on ' + metadata.site_name + '?'),
|
||||
}
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
pub.getElement = function() { return elem; };
|
||||
pub.appendTo = function(target) { target.appendChild(elem); };
|
||||
pub.insertBefore = function(ref) { $insertBefore(ref, elem); };
|
||||
pub.appendTo = function(target) { target.appendChild(element); };
|
||||
pub.insertBefore = function(ref) { $insertBefore(ref, element); };
|
||||
pub.nuke = function() {
|
||||
elem.remove();
|
||||
element.remove();
|
||||
};
|
||||
pub.replaceElement = function(target) {
|
||||
$insertBefore(target, elem);
|
||||
$insertBefore(target, element);
|
||||
target.remove();
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -9,15 +9,15 @@ const MszForumEditor = function(form) {
|
|||
if(!(form instanceof Element))
|
||||
throw 'form must be an instance of element';
|
||||
|
||||
const buttonsElem = form.querySelector('.js-forum-posting-buttons'),
|
||||
textElem = form.querySelector('.js-forum-posting-text'),
|
||||
parserElem = form.querySelector('.js-forum-posting-parser'),
|
||||
previewElem = form.querySelector('.js-forum-posting-preview'),
|
||||
modeElem = form.querySelector('.js-forum-posting-mode'),
|
||||
markupActs = form.querySelector('.js-forum-posting-actions');
|
||||
const buttonsElem = form.querySelector('.js-forum-posting-buttons');
|
||||
const textElem = form.querySelector('.js-forum-posting-text');
|
||||
const parserElem = form.querySelector('.js-forum-posting-parser');
|
||||
const previewElem = form.querySelector('.js-forum-posting-preview');
|
||||
const modeElem = form.querySelector('.js-forum-posting-mode');
|
||||
const markupActs = form.querySelector('.js-forum-posting-actions');
|
||||
|
||||
let lastPostText = '',
|
||||
lastPostParser;
|
||||
let lastPostText = '';
|
||||
let lastPostParser;
|
||||
|
||||
const eepromClient = new MszEEPROM(peepApp, peepPath);
|
||||
const eepromHistory = <div class="eeprom-widget-history-items"/>;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
#include msgbox.jsx
|
||||
#include comments/init.js
|
||||
#include embed/embed.js
|
||||
#include events/christmas2019.js
|
||||
#include events/events.js
|
||||
|
|
@ -52,7 +53,7 @@
|
|||
|
||||
for(const elem of elems)
|
||||
elem.addEventListener('keydown', ev => {
|
||||
if((ev.code === 'Enter' || ev.code === 'NumpadEnter') && ev.ctrlKey && !ev.altKey && !ev.shiftKey && !ev.metaKey) {
|
||||
if(ev.key === 'Enter' && ev.ctrlKey && !ev.altKey && !ev.shiftKey && !ev.metaKey) {
|
||||
// hack: prevent forum editor from screaming when using this keycombo
|
||||
// can probably be done in a less stupid manner
|
||||
MszForumEditorAllowClose = true;
|
||||
|
|
@ -129,6 +130,7 @@
|
|||
MszEmbed.init(`${location.protocol}//uiharu.${location.host}`);
|
||||
|
||||
initXhrActions();
|
||||
MszCommentsInit();
|
||||
|
||||
// only used by the forum posting form
|
||||
initQuickSubmit();
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ const MsgMessagesList = function(list) {
|
|||
},
|
||||
removeItem: item => {
|
||||
$arrayRemoveValue(items, item);
|
||||
item.getElement().remove();
|
||||
item.element.remove();
|
||||
recountSelected();
|
||||
watchers.call('select', selectedCount, items.length);
|
||||
},
|
||||
|
|
@ -150,7 +150,7 @@ const MsgMessagesEntry = function(entry) {
|
|||
|
||||
return {
|
||||
getId: () => msgId,
|
||||
getElement: () => entry,
|
||||
get element() { return entry; },
|
||||
isRead: isRead,
|
||||
setRead: setRead,
|
||||
isSent: isSent,
|
||||
|
|
|
|||
|
|
@ -107,7 +107,11 @@ const MszMessages = () => {
|
|||
if(typeof body === 'object' && typeof body.unread === 'number')
|
||||
if(body.unread > 0)
|
||||
for(const msgsUserBtn of msgsUserBtns)
|
||||
msgsUserBtn.append($create({ child: body.unread.toLocaleString(), attrs: { className: 'header__desktop__user__button__count' } }));
|
||||
msgsUserBtn.append($element(
|
||||
'div',
|
||||
{ className: 'header__desktop__user__button__count' },
|
||||
body.unread.toLocaleString()
|
||||
));
|
||||
});
|
||||
|
||||
const msgsListElem = $query('.js-messages-list');
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ const MszMessagesRecipient = function(element) {
|
|||
update().finally(() => nameTimeout = undefined);
|
||||
|
||||
return {
|
||||
getElement: () => element,
|
||||
get element() { return element; },
|
||||
onUpdate: handler => {
|
||||
if(typeof handler !== 'function')
|
||||
throw 'handler must be a function';
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ const MszMessagesReply = function(element) {
|
|||
});
|
||||
|
||||
return {
|
||||
getElement: () => element,
|
||||
get element() { return element; },
|
||||
setWarning: text => {
|
||||
if(warnElem === undefined || warnText === undefined)
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -1,36 +0,0 @@
|
|||
.oauth2-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.oauth2-loading-frame {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.oauth2-loading-icon {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
gap: 2px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.oauth2-loading-icon-block {
|
||||
background: #fff;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.oauth2-loading-icon-block-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.oauth2-loading-text {
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
|
@ -63,7 +63,6 @@ a:focus {
|
|||
margin: 10px;
|
||||
}
|
||||
|
||||
@include loading.css;
|
||||
@include banner.css;
|
||||
@include error.css;
|
||||
@include device.css;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
#include loading.jsx
|
||||
#include app/info.jsx
|
||||
#include app/scope.jsx
|
||||
#include header/header.js
|
||||
|
|
@ -30,7 +29,7 @@ const MszOAuth2AuthoriseErrors = Object.freeze({
|
|||
|
||||
const MszOAuth2Authorise = async () => {
|
||||
const queryParams = new URLSearchParams(window.location.search);
|
||||
const loading = new MszOAuth2Loading('.js-loading');
|
||||
const loading = new MszLoading({ element: '.js-loading', size: 2 });
|
||||
const header = new MszOAuth2Header;
|
||||
|
||||
const fAuths = document.querySelector('.js-authorise-form');
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
#include loading.jsx
|
||||
#include app/info.jsx
|
||||
#include app/scope.jsx
|
||||
#include header/header.js
|
||||
|
|
@ -6,7 +5,7 @@
|
|||
|
||||
const MszOAuth2Verify = () => {
|
||||
const queryParams = new URLSearchParams(window.location.search);
|
||||
const loading = new MszOAuth2Loading('.js-loading');
|
||||
const loading = new MszLoading({ element: '.js-loading', size: 2 });
|
||||
const header = new MszOAuth2Header;
|
||||
|
||||
const fAuths = document.querySelector('.js-verify-authorise');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue