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>release
silverwind
GitHub
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 {uniq} from '../utils.js';
|
||||
|
||||
export const issuesTribute = window.config.Tribute ? new Tribute({
|
||||
values: window.config.tributeValues,
|
||||
noMatchTemplate() { return null },
|
||||
menuItemTemplate(item) {
|
||||
const div = $('<div/>');
|
||||
div.append($('<img/>', {src: item.original.avatar}));
|
||||
div.append($('<span/>', {class: 'name'}).text(item.original.name));
|
||||
if (item.original.fullname && item.original.fullname !== '') {
|
||||
div.append($('<span/>', {class: 'fullname'}).text(item.original.fullname));
|
||||
}
|
||||
return div.html();
|
||||
}
|
||||
}) : null;
|
||||
|
||||
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;
|
||||
function makeCollections({mentions, emoji}) {
|
||||
const collections = [];
|
||||
|
||||
if (mentions) {
|
||||
collections.push({
|
||||
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 (emojiInputs.length > 0) {
|
||||
emojiTribute.attach(emojiInputs);
|
||||
if (emoji) {
|
||||
collections.push({
|
||||
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');
|
||||
if (content !== null) {
|
||||
emojiTribute.attach(document.getElementById('content'));
|
||||
return collections;
|
||||
}
|
||||
|
||||
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