Move tributejs to npm/webpack (#11497)
* Move tributejs to npm/webpack - Move vendored bundle to npm and webpack - Rewrote initialization to single function - Restyled it (made it a bit smaller) - Fixed it for arc-green * fix mention * also include emoji on #content * Update web_src/less/_tribute.less Co-authored-by: mrsdizzie <info@mrsdizzie.com> * rewrite to only use one instance of Tribute * refactor * fix copy/paste error Co-authored-by: mrsdizzie <info@mrsdizzie.com> Co-authored-by: techknowlogick <techknowlogick@gitea.io>mj-v1.14.3
parent
3eb323901c
commit
b02d2c3772
@ -1,27 +0,0 @@
|
|||||||
.tribute-container {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: auto;
|
|
||||||
max-height: 300px;
|
|
||||||
max-width: 500px;
|
|
||||||
overflow: auto;
|
|
||||||
display: block;
|
|
||||||
z-index: 999999; }
|
|
||||||
.tribute-container ul {
|
|
||||||
margin: 0;
|
|
||||||
margin-top: 2px;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
background: #efefef; }
|
|
||||||
.tribute-container li {
|
|
||||||
padding: 5px 5px;
|
|
||||||
cursor: pointer; }
|
|
||||||
.tribute-container li.highlight, .tribute-container li:hover {
|
|
||||||
background: #ddd; }
|
|
||||||
.tribute-container li span {
|
|
||||||
font-weight: bold; }
|
|
||||||
.tribute-container li.no-match {
|
|
||||||
cursor: default; }
|
|
||||||
.tribute-container .menu-highlighted {
|
|
||||||
font-weight: bold; }
|
|
File diff suppressed because one or more lines are too long
@ -1,61 +1,77 @@
|
|||||||
import {emojiKeys, emojiHTML, emojiString} from './emoji.js';
|
import {emojiKeys, emojiHTML, emojiString} from './emoji.js';
|
||||||
|
import {uniq} from '../utils.js';
|
||||||
|
|
||||||
export const issuesTribute = window.config.Tribute ? new Tribute({
|
function makeCollections({mentions, emoji}) {
|
||||||
values: window.config.tributeValues,
|
const collections = [];
|
||||||
noMatchTemplate() { return null },
|
|
||||||
menuItemTemplate(item) {
|
if (mentions) {
|
||||||
const div = $('<div/>');
|
collections.push({
|
||||||
div.append($('<img/>', {src: item.original.avatar}));
|
trigger: ':',
|
||||||
div.append($('<span/>', {class: 'name'}).text(item.original.name));
|
requireLeadingSpace: true,
|
||||||
if (item.original.fullname && item.original.fullname !== '') {
|
values: (query, cb) => {
|
||||||
div.append($('<span/>', {class: 'fullname'}).text(item.original.fullname));
|
const matches = [];
|
||||||
}
|
for (const name of emojiKeys) {
|
||||||
return div.html();
|
if (name.includes(query)) {
|
||||||
}
|
matches.push(name);
|
||||||
}) : null;
|
if (matches.length > 5) break;
|
||||||
|
}
|
||||||
export const emojiTribute = window.config.Tribute ? new Tribute({
|
|
||||||
collection: [{
|
|
||||||
trigger: ':',
|
|
||||||
requireLeadingSpace: true,
|
|
||||||
values(query, cb) {
|
|
||||||
const matches = [];
|
|
||||||
for (const name of emojiKeys) {
|
|
||||||
if (name.includes(query)) {
|
|
||||||
matches.push(name);
|
|
||||||
if (matches.length > 5) break;
|
|
||||||
}
|
}
|
||||||
|
cb(matches);
|
||||||
|
},
|
||||||
|
lookup: (item) => item,
|
||||||
|
selectTemplate: (item) => {
|
||||||
|
if (typeof item === 'undefined') return null;
|
||||||
|
return emojiString(item.original);
|
||||||
|
},
|
||||||
|
menuItemTemplate: (item) => {
|
||||||
|
return `<div class="tribute-item">${emojiHTML(item.original)}<span>${item.original}</span></div>`;
|
||||||
}
|
}
|
||||||
cb(matches);
|
});
|
||||||
},
|
|
||||||
lookup(item) {
|
|
||||||
return item;
|
|
||||||
},
|
|
||||||
selectTemplate(item) {
|
|
||||||
if (typeof item === 'undefined') return null;
|
|
||||||
return emojiString(item.original);
|
|
||||||
},
|
|
||||||
menuItemTemplate(item) {
|
|
||||||
return `<div class="tribute-item">${emojiHTML(item.original)}<span>${item.original}</span></div>`;
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
}) : null;
|
|
||||||
|
|
||||||
export function initTribute() {
|
|
||||||
if (!window.config.Tribute) return;
|
|
||||||
|
|
||||||
let content = document.getElementById('content');
|
|
||||||
if (content !== null) {
|
|
||||||
issuesTribute.attach(content);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const emojiInputs = document.querySelectorAll('.emoji-input');
|
if (emoji) {
|
||||||
if (emojiInputs.length > 0) {
|
collections.push({
|
||||||
emojiTribute.attach(emojiInputs);
|
values: window.config.tributeValues,
|
||||||
|
noMatchTemplate: () => null,
|
||||||
|
menuItemTemplate: (item) => {
|
||||||
|
return `
|
||||||
|
<div class="tribute-item">
|
||||||
|
<img src="${item.original.avatar}"/>
|
||||||
|
<span class="name">${item.original.name}</span>
|
||||||
|
${item.original.fullname && item.original.fullname !== '' ? `<span class="fullname">${item.original.fullname}</span>` : ''}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
content = document.getElementById('content');
|
return collections;
|
||||||
if (content !== null) {
|
}
|
||||||
emojiTribute.attach(document.getElementById('content'));
|
|
||||||
|
export default async function attachTribute(elementOrNodeList, {mentions, emoji} = {}) {
|
||||||
|
if (!window.config.Tribute || !elementOrNodeList) return;
|
||||||
|
const nodes = Array.from('length' in elementOrNodeList ? elementOrNodeList : [elementOrNodeList]);
|
||||||
|
if (!nodes.length) return;
|
||||||
|
|
||||||
|
const mentionNodes = nodes.filter((node) => {
|
||||||
|
return mentions || node.id === 'content';
|
||||||
|
});
|
||||||
|
const emojiNodes = nodes.filter((node) => {
|
||||||
|
return emoji || node.id === 'content' || node.classList.contains('emoji-input');
|
||||||
|
});
|
||||||
|
const uniqueNodes = uniq([...mentionNodes, ...emojiNodes]);
|
||||||
|
if (!uniqueNodes.length) return;
|
||||||
|
|
||||||
|
const {default: Tribute} = await import(/* webpackChunkName: "tribute" */'tributejs');
|
||||||
|
|
||||||
|
const collections = makeCollections({
|
||||||
|
mentions: mentions || mentionNodes.length > 0,
|
||||||
|
emoji: emoji || emojiNodes.length > 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const tribute = new Tribute({collection: collections});
|
||||||
|
for (const node of uniqueNodes) {
|
||||||
|
tribute.attach(node);
|
||||||
}
|
}
|
||||||
|
return tribute;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in new issue