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 {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