Skip to content

Commit b02d2c3

Browse files
silverwindmrsdizzietechknowlogick
authoredMay 21, 2020
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 <[email protected]> * rewrite to only use one instance of Tribute * refactor * fix copy/paste error Co-authored-by: mrsdizzie <[email protected]> Co-authored-by: techknowlogick <[email protected]>
1 parent 3eb3239 commit b02d2c3

File tree

12 files changed

+130
-127
lines changed

12 files changed

+130
-127
lines changed
 

‎package-lock.json

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
"svgo-loader": "2.2.1",
4040
"swagger-ui": "3.25.3",
4141
"terser-webpack-plugin": "3.0.1",
42+
"tributejs": "5.1.3",
4243
"vue": "2.6.11",
4344
"vue-bar-graph": "1.2.0",
4445
"vue-calendar-heatmap": "0.8.4",

‎public/vendor/plugins/tribute/tribute.css

-27
This file was deleted.

‎public/vendor/plugins/tribute/tribute.min.js

-2
This file was deleted.

‎templates/base/footer.tmpl

-4
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,6 @@
3434
<script src='{{ URLJoin .RecaptchaURL "api.js"}}' async></script>
3535
{{end}}
3636
{{end}}
37-
{{if .RequireTribute}}
38-
<script src="{{StaticUrlPrefix}}/vendor/plugins/tribute/tribute.min.js"></script>
39-
{{end}}
40-
4137
<script src="{{StaticUrlPrefix}}/fomantic/semantic.min.js?v={{MD5 AppVer}}"></script>
4238
<script src="{{StaticUrlPrefix}}/js/index.js?v={{MD5 AppVer}}"></script>
4339
{{template "custom/footer" .}}

‎templates/base/head.tmpl

-4
Original file line numberDiff line numberDiff line change
@@ -119,10 +119,6 @@
119119
{{if .RequireSimpleMDE}}
120120
<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/simplemde/simplemde.min.css">
121121
{{end}}
122-
123-
{{if .RequireTribute}}
124-
<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/tribute/tribute.css">
125-
{{end}}
126122
<link rel="stylesheet" href="{{StaticUrlPrefix}}/fomantic/semantic.min.css?v={{MD5 AppVer}}">
127123
<link rel="stylesheet" href="{{StaticUrlPrefix}}/css/index.css?v={{MD5 AppVer}}">
128124
<noscript>

‎templates/pwa/serviceworker_js.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ var urlsToCache = [
1010
'{{StaticUrlPrefix}}/js/swagger.js?v={{MD5 AppVer}}',
1111
'{{StaticUrlPrefix}}/js/dropzone.js',
1212
'{{StaticUrlPrefix}}/js/datetimepicker.js',
13+
'{{StaticUrlPrefix}}/js/tribute.js',
1314
'{{StaticUrlPrefix}}/vendor/plugins/codemirror/addon/mode/loadmode.js',
1415
'{{StaticUrlPrefix}}/vendor/plugins/codemirror/mode/meta.js',
1516
'{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.min.js',
@@ -24,7 +25,6 @@ var urlsToCache = [
2425
'{{StaticUrlPrefix}}/vendor/assets/font-awesome/css/font-awesome.min.css',
2526
'{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.css',
2627
'{{StaticUrlPrefix}}/vendor/plugins/simplemde/simplemde.min.css',
27-
'{{StaticUrlPrefix}}/vendor/plugins/tribute/tribute.css',
2828
{{if .IsSigned }}
2929
{{ if ne .SignedUser.Theme "gitea" }}
3030
'{{StaticUrlPrefix}}/css/theme-{{.SignedUser.Theme}}.css?v={{MD5 AppVer}}',

‎web_src/js/features/tribute.js

+67-51
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,77 @@
11
import {emojiKeys, emojiHTML, emojiString} from './emoji.js';
2+
import {uniq} from '../utils.js';
23

3-
export const issuesTribute = window.config.Tribute ? new Tribute({
4-
values: window.config.tributeValues,
5-
noMatchTemplate() { return null },
6-
menuItemTemplate(item) {
7-
const div = $('<div/>');
8-
div.append($('<img/>', {src: item.original.avatar}));
9-
div.append($('<span/>', {class: 'name'}).text(item.original.name));
10-
if (item.original.fullname && item.original.fullname !== '') {
11-
div.append($('<span/>', {class: 'fullname'}).text(item.original.fullname));
12-
}
13-
return div.html();
14-
}
15-
}) : null;
16-
17-
export const emojiTribute = window.config.Tribute ? new Tribute({
18-
collection: [{
19-
trigger: ':',
20-
requireLeadingSpace: true,
21-
values(query, cb) {
22-
const matches = [];
23-
for (const name of emojiKeys) {
24-
if (name.includes(query)) {
25-
matches.push(name);
26-
if (matches.length > 5) break;
4+
function makeCollections({mentions, emoji}) {
5+
const collections = [];
6+
7+
if (mentions) {
8+
collections.push({
9+
trigger: ':',
10+
requireLeadingSpace: true,
11+
values: (query, cb) => {
12+
const matches = [];
13+
for (const name of emojiKeys) {
14+
if (name.includes(query)) {
15+
matches.push(name);
16+
if (matches.length > 5) break;
17+
}
2718
}
19+
cb(matches);
20+
},
21+
lookup: (item) => item,
22+
selectTemplate: (item) => {
23+
if (typeof item === 'undefined') return null;
24+
return emojiString(item.original);
25+
},
26+
menuItemTemplate: (item) => {
27+
return `<div class="tribute-item">${emojiHTML(item.original)}<span>${item.original}</span></div>`;
2828
}
29-
cb(matches);
30-
},
31-
lookup(item) {
32-
return item;
33-
},
34-
selectTemplate(item) {
35-
if (typeof item === 'undefined') return null;
36-
return emojiString(item.original);
37-
},
38-
menuItemTemplate(item) {
39-
return `<div class="tribute-item">${emojiHTML(item.original)}<span>${item.original}</span></div>`;
40-
}
41-
}]
42-
}) : null;
43-
44-
export function initTribute() {
45-
if (!window.config.Tribute) return;
46-
47-
let content = document.getElementById('content');
48-
if (content !== null) {
49-
issuesTribute.attach(content);
29+
});
5030
}
5131

52-
const emojiInputs = document.querySelectorAll('.emoji-input');
53-
if (emojiInputs.length > 0) {
54-
emojiTribute.attach(emojiInputs);
32+
if (emoji) {
33+
collections.push({
34+
values: window.config.tributeValues,
35+
noMatchTemplate: () => null,
36+
menuItemTemplate: (item) => {
37+
return `
38+
<div class="tribute-item">
39+
<img src="${item.original.avatar}"/>
40+
<span class="name">${item.original.name}</span>
41+
${item.original.fullname && item.original.fullname !== '' ? `<span class="fullname">${item.original.fullname}</span>` : ''}
42+
</div>
43+
`;
44+
}
45+
});
5546
}
5647

57-
content = document.getElementById('content');
58-
if (content !== null) {
59-
emojiTribute.attach(document.getElementById('content'));
48+
return collections;
49+
}
50+
51+
export default async function attachTribute(elementOrNodeList, {mentions, emoji} = {}) {
52+
if (!window.config.Tribute || !elementOrNodeList) return;
53+
const nodes = Array.from('length' in elementOrNodeList ? elementOrNodeList : [elementOrNodeList]);
54+
if (!nodes.length) return;
55+
56+
const mentionNodes = nodes.filter((node) => {
57+
return mentions || node.id === 'content';
58+
});
59+
const emojiNodes = nodes.filter((node) => {
60+
return emoji || node.id === 'content' || node.classList.contains('emoji-input');
61+
});
62+
const uniqueNodes = uniq([...mentionNodes, ...emojiNodes]);
63+
if (!uniqueNodes.length) return;
64+
65+
const {default: Tribute} = await import(/* webpackChunkName: "tribute" */'tributejs');
66+
67+
const collections = makeCollections({
68+
mentions: mentions || mentionNodes.length > 0,
69+
emoji: emoji || emojiNodes.length > 0,
70+
});
71+
72+
const tribute = new Tribute({collection: collections});
73+
for (const node of uniqueNodes) {
74+
tribute.attach(node);
6075
}
76+
return tribute;
6177
}

‎web_src/js/index.js

+6-7
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import initGitGraph from './features/gitgraph.js';
1414
import initClipboard from './features/clipboard.js';
1515
import initUserHeatmap from './features/userheatmap.js';
1616
import initDateTimePicker from './features/datetimepicker.js';
17-
import {initTribute, issuesTribute, emojiTribute} from './features/tribute.js';
17+
import attachTribute from './features/tribute.js';
1818
import createDropzone from './features/dropzone.js';
1919
import highlight from './features/highlight.js';
2020
import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
@@ -891,8 +891,7 @@ async function initRepository() {
891891
if ($editContentZone.html().length === 0) {
892892
$editContentZone.html($('#edit-content-form').html());
893893
$textarea = $editContentZone.find('textarea');
894-
issuesTribute.attach($textarea.get());
895-
emojiTribute.attach($textarea.get());
894+
attachTribute($textarea.get(), {mentions: true, emoji: true});
896895

897896
let dz;
898897
const $dropzone = $editContentZone.find('.dropzone');
@@ -1496,7 +1495,8 @@ function setCommentSimpleMDE($editArea) {
14961495
$(simplemde.codemirror.getInputField()).addClass('js-quick-submit');
14971496
simplemde.codemirror.setOption('extraKeys', {
14981497
Enter: () => {
1499-
if (!(issuesTribute.isActive || emojiTribute.isActive)) {
1498+
const tributeContainer = document.querySelector('.tribute-container');
1499+
if (tributeContainer && tributeContainer.style.display !== 'none') {
15001500
return CodeMirror.Pass;
15011501
}
15021502
},
@@ -1507,8 +1507,7 @@ function setCommentSimpleMDE($editArea) {
15071507
cm.execCommand('delCharBefore');
15081508
}
15091509
});
1510-
issuesTribute.attach(simplemde.codemirror.getInputField());
1511-
emojiTribute.attach(simplemde.codemirror.getInputField());
1510+
attachTribute(simplemde.codemirror.getInputField(), {mentions: true, emoji: true});
15121511
return simplemde;
15131512
}
15141513

@@ -2431,7 +2430,6 @@ $(document).ready(async () => {
24312430
initContextPopups();
24322431
initNotificationsTable();
24332432
initNotificationCount();
2434-
initTribute();
24352433

24362434
// Repo clone url.
24372435
if ($('#repo-clone-url').length > 0) {
@@ -2473,6 +2471,7 @@ $(document).ready(async () => {
24732471
// parallel init of lazy-loaded features
24742472
await Promise.all([
24752473
highlight(document.querySelectorAll('pre code')),
2474+
attachTribute(document.querySelectorAll('#content, .emoji-input')),
24762475
initGitGraph(),
24772476
initClipboard(),
24782477
initUserHeatmap(),

‎web_src/js/utils.js

+5
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,8 @@ export function isObject(obj) {
2323
export function isDarkTheme() {
2424
return document.documentElement.classList.contains('theme-arc-green');
2525
}
26+
27+
// removes duplicate elements in an array
28+
export function uniq(arr) {
29+
return Array.from(new Set(arr));
30+
}

‎web_src/less/_tribute.less

+32-31
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,42 @@
1+
@import "~tributejs/dist/tribute.css";
2+
13
.tribute-container {
2-
box-shadow: 0 1px 3px 1px #c7c7c7;
3-
4-
ul {
5-
background: #ffffff;
6-
}
7-
8-
li {
9-
padding: 8px 12px;
10-
border-bottom: 1px solid #dcdcdc;
11-
12-
img {
13-
display: inline-block;
14-
vertical-align: middle;
15-
width: 28px;
16-
height: 28px;
17-
margin-right: 5px;
18-
}
19-
20-
span.fullname {
21-
font-weight: normal;
22-
font-size: .8rem;
23-
margin-left: 3px;
24-
}
25-
}
26-
27-
li.highlight,
28-
li:hover {
29-
background: #2185d0;
30-
color: #ffffff;
31-
}
4+
box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25);
5+
border-radius: .25rem;
6+
}
7+
8+
.tribute-container ul {
9+
margin-top: 0 !important;
10+
background: #ffffff !important;
11+
}
12+
13+
.tribute-container li {
14+
padding: 3px .5rem !important;
15+
}
16+
17+
.tribute-container li span.fullname {
18+
font-weight: normal;
19+
font-size: .8rem;
20+
margin-left: 3px;
21+
}
22+
23+
.tribute-container li.highlight,
24+
.tribute-container li:hover {
25+
background: #2185d0 !important;
26+
color: #ffffff !important;
3227
}
3328

3429
.tribute-item {
3530
display: flex;
3631
align-items: center;
3732
}
3833

39-
.tribute-item .emoji {
34+
.tribute-item .emoji,
35+
.tribute-item img[src*="/avatar/"] {
4036
margin-right: .5rem;
4137
}
38+
39+
.tribute-container img {
40+
width: 1.5rem !important;
41+
height: 1.5rem !important;
42+
}

‎web_src/less/themes/theme-arc-green.less

+13
Original file line numberDiff line numberDiff line change
@@ -1625,3 +1625,16 @@ footer .container .links > * {
16251625
.repository.release #release-list > li .detail .dot {
16261626
background-color: #888;
16271627
}
1628+
1629+
.tribute-container {
1630+
box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .6);
1631+
}
1632+
1633+
.tribute-container ul {
1634+
background: #2d303b !important;
1635+
}
1636+
1637+
.tribute-container li.highlight,
1638+
.tribute-container li:hover {
1639+
background: #728e5e !important;
1640+
}

0 commit comments

Comments
 (0)