ACP search updated to support translations

v1.18.x
Peter Jaszkowiak 8 years ago
parent 2e28a8f7c7
commit a431dc0305

@ -78,6 +78,7 @@
"request": "^2.44.0",
"rimraf": "~2.5.0",
"rss": "^1.0.0",
"sanitize-html": "^1.13.0",
"semver": "^5.1.0",
"serve-favicon": "^2.1.5",
"sitemap": "^1.4.0",

@ -0,0 +1,6 @@
{
"checking-for-installed": "Checking for installed themes...",
"homepage": "Homepage",
"select-skin": "Select Skin",
"select-theme": "Select Theme"
}

@ -29,6 +29,7 @@
@import "./modules/selectable";
@import "./modules/snackbar";
@import "./modules/nprogress";
@import "./modules/search";
body {
overflow-y: scroll;

@ -0,0 +1,36 @@
#acp-search {
.dropdown-menu {
max-height: 75vh;
overflow-y: auto;
}
.state-start-typing {
.keep-typing, .search-forum, .no-results {
display: none;
}
}
.state-keep-typing {
.start-typing, .search-forum, .no-results {
display: none;
}
}
.state-no-results {
.keep-typing, .start-typing {
display: none;
}
}
.state-yes-results {
.keep-typing, .start-typing, .no-results {
display: none;
}
}
.search-disabled {
.search-forum {
display: none;
}
}
}

@ -2,113 +2,106 @@
/*globals define, admin, ajaxify, RELATIVE_PATH*/
define(function () {
var search = {},
searchIndex;
var search = {};
search.init = function () {
$.getJSON(RELATIVE_PATH + '/templates/indexed.json', function (data) {
searchIndex = data;
for (var file in searchIndex) {
if (searchIndex.hasOwnProperty(file)) {
searchIndex[file] = searchIndex[file].replace(/<img/g, '<none'); // can't think of a better solution, see #2153
searchIndex[file] = $('<div class="search-container">' + searchIndex[file] + '</div>');
searchIndex[file].find('script').remove();
searchIndex[file] = searchIndex[file].text().toLowerCase().replace(/[ |\r|\n]+/g, ' ');
}
}
function nsToTitle(namespace) {
return namespace.replace('admin/', '').split('/').map(function (str) {
return str[0].toUpperCase() + str.slice(1);
}).join(' > ');
}
delete searchIndex['/admin/header.tpl'];
delete searchIndex['/admin/footer.tpl'];
function find(dict, term) {
var html = dict.filter(function (elem) {
return elem.translations.toLowerCase().includes(term);
}).map(function (params) {
var namespace = params.namespace;
var translations = params.translations;
var title = params.title == null ? nsToTitle(namespace) : params.title;
var results = translations
.replace(new RegExp('^(?:(?!' + term + ').)*$', 'gmi'), '')
.replace(
new RegExp('^[\\s\\S]*?(.{0,25})(' + term + ')(.{0,25})[\\s\\S]*?$', 'gmi'),
'...$1<span class="search-match">$2</span>$3...<br>'
).replace(/(\n ?)+/g, '\n');
return '<li role="presentation" class="result">' +
'<a role= "menuitem" href= "' + RELATIVE_PATH + '/' + namespace + '" >' +
title +
'<br>' +
'<small><code>' +
results +
'</small></code>' +
'</a>' +
'</li>';
}).join('');
return html;
}
setupACPSearch();
search.init = function () {
socket.emit('admin.getSearchDict', {}, function (err, dict) {
if (err) {
app.alertError(err);
throw err;
}
setupACPSearch(dict);
});
};
function setupACPSearch() {
var menu = $('#acp-search .dropdown-menu'),
routes = [],
input = $('#acp-search input'),
firstResult = null;
function setupACPSearch(dict) {
var dropdown = $('#acp-search .dropdown');
var menu = $('#acp-search .dropdown-menu');
var input = $('#acp-search input');
if (!config.searchEnabled) {
menu.addClass('search-disabled');
}
input.on('keyup', function () {
$('#acp-search .dropdown').addClass('open');
dropdown.addClass('open');
});
$('#acp-search').parents('form').on('submit', function (ev) {
var input = $(this).find('input'),
href = firstResult ? firstResult : RELATIVE_PATH + '/search/' + input.val();
var firstResult = menu.find('li:first-child > a').attr('href');
var href = firstResult ? firstResult : RELATIVE_PATH + '/search/' + input.val();
ajaxify.go(href.replace(/^\//, ''));
setTimeout(function () {
$('#acp-search .dropdown').removeClass('open');
$(input).blur();
dropdown.removeClass('open');
input.blur();
}, 150);
ev.preventDefault();
return false;
});
$('#main-menu a').each(function (idx, link) {
routes.push($(link).attr('href'));
});
input.on('keyup focus', function () {
var $input = $(this),
value = $input.val().toLowerCase(),
menuItems = $('#acp-search .dropdown-menu').html('');
var value = input.val().toLowerCase();
menu.children('.result').remove();
function toUpperCase(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
}
var len = value.length;
var results;
firstResult = null;
if (value.length >= 3) {
for (var file in searchIndex) {
if (searchIndex.hasOwnProperty(file)) {
var position = searchIndex[file].indexOf(value);
if (position !== -1) {
var href = file.replace('.tpl', ''),
title = href.replace(/^\/admin\//, '').split('/'),
description = searchIndex[file].substring(Math.max(0, position - 25), Math.min(searchIndex[file].length - 1, position + 25))
.replace(value, '<span class="search-match">' + value + '</span>');
for (var t in title) {
if (title.hasOwnProperty(t)) {
title[t] = title[t]
.replace('-', ' ')
.replace(/\w\S*/g, toUpperCase);
}
}
title = title.join(' > ');
href = RELATIVE_PATH + href;
firstResult = firstResult ? firstResult : href;
if ($.inArray(href, routes) !== -1) {
menuItems.append('<li role="presentation"><a role="menuitem" href="' + href + '">' + title + '<br /><small><code>...' + description + '...</code></small></a></li>');
}
}
}
}
if (menuItems.html() === '') {
menuItems.append('<li role="presentation"><a role="menuitem" href="#">No results...</a></li>');
}
}
menu.toggleClass('state-start-typing', len === 0);
menu.toggleClass('state-keep-typing', len > 0 && len < 3);
if (len >= 3) {
menu.prepend(find(dict, value));
results = menu.children('.result').length;
menu.toggleClass('state-no-results', !results);
menu.toggleClass('state-yes-results', !!results);
if (value.length > 0) {
if (config.searchEnabled) {
menuItems.append('<li role="presentation" class="divider"></li>');
menuItems.append('<li role="presentation"><a role="menuitem" target="_top" href="' + RELATIVE_PATH + '/search/' + value + '">Search the forum for <strong>' + value + '</strong></a></li>');
} else if (value.length < 3) {
menuItems.append('<li role="presentation"><a role="menuitem" href="#">Type more to see results...</a></li>');
}
menu.find('.search-forum')
.not('.divider')
.find('a')
.attr('href', RELATIVE_PATH + '/search/' + value)
.find('strong')
.html(value);
} else {
menuItems.append('<li role="presentation"><a role="menuitem" href="#">Start typing to see results...</a></li>');
menu.removeClass('state-no-results');
}
});
}

@ -0,0 +1,128 @@
'use strict';
var fs = require('fs');
var path = require('path');
var nconf = require('nconf');
var sanitize = require('sanitize-html');
var languages = require('../languages');
var meta = require('../meta');
var utils = require('../../public/src/utils');
function walk(directory) {
return new Promise(function (resolve, reject) {
utils.walk(directory, function (err, data) {
if (err) {
reject(err);
} else {
resolve(data);
}
});
});
}
function readFile(path) {
return new Promise(function (resolve, reject) {
fs.readFile(path, function (err, data) {
if (err) {
reject(err);
} else {
resolve(data.toString());
}
});
});
}
function loadLanguage(language, filename) {
return new Promise(function (resolve, reject) {
languages.get(language, filename + '.json', function (err, data) {
if (err || !data || !Object.keys(data).length) {
reject(err);
} else {
resolve(data);
}
});
});
}
function getAdminNamespaces() {
return walk(path.resolve('./public/templates/admin'))
.then(function (directories) {
return directories.map(function (dir) {
return dir.replace(/^.*(admin.*?).tpl$/, '$1');
}).filter(function (dir) {
return !dir.includes('/partials/');
}).filter(function (dir) {
return dir.match(/\/.*\//);
});
});
}
var fallbackCache = {};
function fallback(namespace) {
fallbackCache[namespace] = fallbackCache[namespace] ||
readFile(path.resolve('./public/templates/', namespace + '.tpl'))
.then(function (template) {
var translations = sanitize(template, {
transformTags: {
'*': function () {
return {
tagName: 'div'
};
}
}
})
.replace(/(<div>)|(<\/div>)/g, '')
.replace(/([\n\r]+ ?)+/g, '\n')
.replace(/[\t ]+/g, ' ');
return {
namespace: namespace,
translations: translations,
};
});
return fallbackCache[namespace];
}
function initDict(language) {
return getAdminNamespaces().then(function (namespaces) {
return Promise.all(namespaces.map(function (namespace) {
return loadLanguage(language, namespace).then(function (translations) {
return { namespace: namespace, translations: translations };
}).then(function (params) {
var namespace = params.namespace;
var translations = params.translations;
var str = Object.keys(translations).map(function (key) {
return translations[key];
}).join('\n');
return {
namespace: namespace,
translations: str
};
})
// TODO: Use translator to get title for admin route?
.catch(function () {
return fallback(namespace);
})
.catch(function () {
return { namespace: namespace, translations: '' };
})
.then(function (params) {
params.translations = params.translations.replace(/\{[^\{\}]*\}/g, '');
return params;
});
}));
});
}
var cache = {};
function getDict(language, term) {
cache[language] = cache[language] || initDict(language);
return cache[language];
}
module.exports.getDict = getDict;

@ -15,6 +15,7 @@ var emailer = require('../emailer');
var db = require('../database');
var analytics = require('../analytics');
var index = require('./index');
var getAdminSearchDict = require('../admin/search').getDict;
var SocketAdmin = {
user: require('./admin/user'),
@ -277,5 +278,18 @@ SocketAdmin.deleteAllEvents = function (socket, data, callback) {
events.deleteAll(callback);
};
SocketAdmin.getSearchDict = function (socket, data, callback) {
user.getSettings(socket.uid, function (err, settings) {
if (err) {
return callback(err);
}
var lang = settings.userLang || meta.config.defaultLang || 'en_GB';
getAdminSearchDict(lang)
.then(function (results) {
callback(null, results);
}, callback);
});
};
module.exports = SocketAdmin;

@ -1,6 +1,6 @@
<div id="themes" class="themes">
<div class="directory row" id="installed_themes">
<i class="fa fa-refresh fa-spin"></i> Checking for installed themes...
<i class="fa fa-refresh fa-spin"></i> [[admin/appearance/themes:checking-for-installed]]
</div>
</div>

@ -149,7 +149,23 @@
<div class="" id="acp-search" >
<div class="dropdown">
<input type="text" data-toggle="dropdown" class="form-control" placeholder="Search...">
<ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
<ul class="dropdown-menu dropdown-menu-right state-start-typing" role="menu">
<li role="presentation" class="no-results">
<a>No results...</a>
</li>
<li role="presentation" class="divider search-forum"></li>
<li role="presentation" class="search-forum">
<a role="menuitem" target="_top" href="#">
Search the forum for <strong></strong>
</a>
</li>
<li role="presentation" class="keep-typing">
<a>Type more to see results...</a>
</li>
<li role="presentation" class="start-typing">
<a>Start typing to see results...</a>
</li>
</ul>
</div>
</div>
</form>

@ -10,13 +10,13 @@
<!-- IF themes.url -->
<p>
<a href="{themes.url}" target="_blank">Homepage</a>
<a href="{themes.url}" target="_blank">[[admin/appearance/themes:homepage]]</a>
</p>
<!-- ENDIF themes.url -->
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" data-action="use">
<!-- IF themes.skin -->Select Skin<!-- ELSE -->Select Theme<!-- ENDIF themes.skin -->
<!-- IF themes.skin -->[[admin/appearance/themes:select-skin]]<!-- ELSE -->[[admin/appearance/themes:select-theme]]<!-- ENDIF themes.skin -->
</a>
</div>
</div>

Loading…
Cancel
Save