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>tokarchuk/v1.17
silverwind
5 years ago
committed by
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