-
-
Notifications
You must be signed in to change notification settings - Fork 5.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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>
- Loading branch information
3 people
authored
May 21, 2020
1 parent
3eb3239
commit b02d2c3
Showing
12 changed files
with
130 additions
and
127 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,41 +1,42 @@ | ||
| @import "~tributejs/dist/tribute.css"; | ||
|
|
||
| .tribute-container { | ||
| box-shadow: 0 1px 3px 1px #c7c7c7; | ||
|
|
||
| ul { | ||
| background: #ffffff; | ||
| } | ||
|
|
||
| li { | ||
| padding: 8px 12px; | ||
| border-bottom: 1px solid #dcdcdc; | ||
|
|
||
| img { | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
| width: 28px; | ||
| height: 28px; | ||
| margin-right: 5px; | ||
| } | ||
|
|
||
| span.fullname { | ||
| font-weight: normal; | ||
| font-size: .8rem; | ||
| margin-left: 3px; | ||
| } | ||
| } | ||
|
|
||
| li.highlight, | ||
| li:hover { | ||
| background: #2185d0; | ||
| color: #ffffff; | ||
| } | ||
| box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); | ||
| border-radius: .25rem; | ||
| } | ||
|
|
||
| .tribute-container ul { | ||
| margin-top: 0 !important; | ||
| background: #ffffff !important; | ||
| } | ||
|
|
||
| .tribute-container li { | ||
| padding: 3px .5rem !important; | ||
| } | ||
|
|
||
| .tribute-container li span.fullname { | ||
| font-weight: normal; | ||
| font-size: .8rem; | ||
| margin-left: 3px; | ||
| } | ||
|
|
||
| .tribute-container li.highlight, | ||
| .tribute-container li:hover { | ||
| background: #2185d0 !important; | ||
| color: #ffffff !important; | ||
| } | ||
|
|
||
| .tribute-item { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .tribute-item .emoji { | ||
| .tribute-item .emoji, | ||
| .tribute-item img[src*="/avatar/"] { | ||
| margin-right: .5rem; | ||
| } | ||
|
|
||
| .tribute-container img { | ||
| width: 1.5rem !important; | ||
| height: 1.5rem !important; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters