Browse Source
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>for-closed-social
silverwind
4 years ago
committed by
GitHub
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 130 additions and 127 deletions
Split View
Diff Options
-
+5 -0package-lock.json
-
+1 -0package.json
-
+0 -27public/vendor/plugins/tribute/tribute.css
-
+0 -2public/vendor/plugins/tribute/tribute.min.js
-
+0 -4templates/base/footer.tmpl
-
+0 -4templates/base/head.tmpl
-
+1 -1templates/pwa/serviceworker_js.tmpl
-
+67 -51web_src/js/features/tribute.js
-
+6 -7web_src/js/index.js
-
+5 -0web_src/js/utils.js
-
+32 -31web_src/less/_tribute.less
-
+13 -0web_src/less/themes/theme-arc-green.less
+ 5
- 0
package-lock.json
View File
+ 1
- 0
package.json
View File
+ 0
- 27
public/vendor/plugins/tribute/tribute.css
View File
| @ -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; } | |||
+ 0
- 2
public/vendor/plugins/tribute/tribute.min.js
File diff suppressed because it is too large
View File
+ 0
- 4
templates/base/footer.tmpl
View File
+ 0
- 4
templates/base/head.tmpl
View File
+ 1
- 1
templates/pwa/serviceworker_js.tmpl
View File
+ 67
- 51
web_src/js/features/tribute.js
View File
| @ -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; | |||
| } | |||