makary/phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-06-08 04:18:52 +00:00
Code Issues Projects Releases Packages Wiki Activity

[ticket/13713] Move html from JS to mentions templates

Browse source 
PHPBB3-13713
This commit is contained in:
Marc Alexander 2021-05-19 21:30:27 +02:00
parent 00e43600c1
commit 1b5c521d8f
No known key found for this signature in database
GPG key ID: 50E0D2423696F995
2 changed files with 21 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
phpBB/assets/javascript/mentions.js
View file

@ -24,7 +24,6 @@
const mentionNamesLimit = $mentionDataContainer.data('mentionNamesLimit'); const mentionNamesLimit = $mentionDataContainer.data('mentionNamesLimit');
const mentionTopicId = $mentionDataContainer.data('topicId'); const mentionTopicId = $mentionDataContainer.data('topicId');
const mentionUserId = $mentionDataContainer.data('userId'); const mentionUserId = $mentionDataContainer.data('userId');
const $mentionAvatarTemplate = $('[data-id="mentions-avatar-span"]');
let queryInProgress = null; let queryInProgress = null;
const cachedNames = []; const cachedNames = [];
const cachedAll = []; const cachedAll = [];
@ -38,10 +37,10 @@
*/ */
function defaultAvatar(type) { function defaultAvatar(type) {
if (type === 'g') { if (type === 'g') {
return '<svg class="mention-media-avatar" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path fill-rule="evenodd" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>'; return $('[data-id="mention-default-avatar-group"]').html();
} }
return '<svg class="mention-media-avatar" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path fill-rule="evenodd" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"/></svg>'; return $('[data-id="mention-default-avatar"]').html();
} }
/** /**
@ -56,21 +55,20 @@
return defaultAvatar(type); return defaultAvatar(type);
} }
const $avatarSpan = $($mentionAvatarTemplate.html());
if (data.html === '') { if (data.html === '') {
const $avatarImg = $avatarSpan.find('img'); const $avatarImg = $($('[data-id="mention-media-avatar-img"]').html());
$avatarImg.attr({ $avatarImg.attr({
src: data.src, src: data.src,
width: data.width, width: data.width,
height: data.height, height: data.height,
alt: data.title, alt: data.title,
}); });
} else { return $avatarImg.get(0).outerHTML;
$avatarSpan.html(data.html);
} }
return $avatarSpan.get(0).outerHTML; const $avatarImg = $(data.html);
$avatarImg.addClass('mention-media-avatar');
return $avatarImg.get(0).outerHTML;
} }
/** /**
@ -264,14 +262,20 @@
function menuItemTemplate(data) { function menuItemTemplate(data) {
const itemData = data; const itemData = data;
const avatar = getAvatar(itemData.avatar, itemData.type); const avatar = getAvatar(itemData.avatar, itemData.type);
const rank = (itemData.rank) ? '<span class=\'mention-rank\'>' + itemData.rank + '</span>' : ''; const rank = (itemData.rank) ? $($('[data-id="mention-rank-span"]').html()).text(itemData.rank).get(0).outerHTML : '';
const $mentionContainer = $('.' + tribute.current.collection.containerClass); const $mentionContainer = $('.' + tribute.current.collection.containerClass);
if (typeof $mentionContainer !== 'undefined' && $mentionContainer.children('ul').hasClass('mention-list') === false) { if (typeof $mentionContainer !== 'undefined' && $mentionContainer.children('ul').hasClass('mention-list') === false) {
$mentionContainer.children('ul').addClass('mention-list'); $mentionContainer.children('ul').addClass('mention-list');
} }
return '<span class=\'mention-media\'>' + avatar + '</span><span class=\'mention-name\'>' + itemData.name + rank + '</span>'; const $avatarSpan = $($('[data-id="mention-media-span"]').html());
$avatarSpan.html(avatar);
const $nameSpan = $($('[data-id="mention-name-span"]').html());
$nameSpan.html(itemData.name + rank);
return $avatarSpan.get(0).outerHTML + $nameSpan.get(0).outerHTML;
} }
this.isEnabled = function() { this.isEnabled = function() {

7
phpBB/styles/prosilver/template/mentions_templates.html
View file

@ -1 +1,6 @@
<template data-id="mentions-avatar-span"><span class="mention-media-avatar"><img class="avatar" src="" alt=""></span></template> <template data-id="mention-media-span"><span class="mention-media"></span></template>
<template data-id="mention-media-avatar-img"><img class="avatar mention-media-avatar" src="" alt=""></template>
<template data-id="mention-name-span"><span class="mention-name"></span></template>
<template data-id="mention-default-avatar"><svg class="mention-media-avatar" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path fill-rule="evenodd" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"/></svg></template>
<template data-id="mention-default-avatar-group"><svg class="mention-media-avatar" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path fill-rule="evenodd" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg></template>
<template data-id="mention-rank-span"><span class="mention-rank"></span></template>