open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add sort optgroups

Browse Source
This commit is contained in:
Rob Garrison 2017-12-23 09:32:15 -06:00
parent 3f72ae7448
commit 2cdc6274ab
2 changed files with 28 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
_locales/en/messages.json
View File

@ -840,14 +840,6 @@
"message": "Select a sort to apply to the installed styles",
"description": "Title on the sort select to indicate it is used for sorting entries"
},
"sortAscending": {
"message": "ascending",
"description": "Text added to indicate that a sort is in the ascending (A to Z) direction"
},
"sortDescending": {
"message": "descending",
"description": "Text added to indicate that a sort is in the descending (Z to A) direction"
},
"sortDateNewestFirst": {
"message": "newest first",
"description": "Text added to indicate that sorting a date would add the newest entries at the top"
@ -864,12 +856,20 @@
"message": "last",
"description": "Text added to indicate that entry with a disabled or usercss label will be sorted last (at the bottom)"
},
"sortLabelTitleAsc": {
"message": "Title Ascending",
"description": "Text added to option group to indicate a block of options that apply a title ascending (A to Z) sort"
},
"sortLabelTitleDesc": {
"message": "Title Descending",
"description": "Text added to option group to indicate a block of options that apply a title descending (Z to A) sort"
},
"sortStylesHelpTitle": {
"message": "Sort contents",
"description": "Label for the sort info popup on the Manage styles page"
},
"sortStylesHelp": {
"message": "Choose the type of sort to apply to the installed entries from within the sort dropdown. The default setting applies an ascending sort (A to Z) to the entry titles. Sorts that include a \"(descending)\" label will apply a descending sort (Z to A) to the title.\nThere are other presets that will allow sorting the entries by multiple criteria. Think of this like sorting a table with multiple columns and each category in a select (between the plus signs) represents a column, or group.\nFor example, if the setting is \"Enabled (first) + Title (ascending)\", the entries would sort so that all the enabled entries are sorted to the top of the list and the entry titles are then applied to both enabled tags and the disabled tags separately.",
"message": "Choose the type of sort to apply to the installed entries from within the sort dropdown. The default setting applies an ascending sort (A to Z) to the entry titles. Sorts that include a \"(descending)\" label will apply a descending sort (Z to A) to the title.\nThere are other presets that will allow sorting the entries by multiple criteria. Think of this like sorting a table with multiple columns and each category in a select (between the plus signs) represents a column, or group.\nFor example, if the setting is \"Enabled (first) + Title\", the entries would sort so that all the enabled entries are sorted to the top of the list and the entry titles are then applied to both enabled tags and the disabled tags separately.",
"description": "Text in the minihelp displayed when clicking (i) icon to the right of the sort input field on the Manage styles page"
},
"styleBadRegexp": {

24
manage/sort.js
View File

@ -53,8 +53,8 @@ const tagData = {
// Adding (assumed) most commonly used ('title,asc' should always be first)
// whitespace before & after the comma is ignored
const sortSelectOptions = [
'{groupAsc}',
'title,asc',
'title,desc',
'dateInstalled,desc, title,asc',
'dateInstalled,asc, title,asc',
'dateUpdated,desc, title,asc',
@ -64,6 +64,8 @@ const sortSelectOptions = [
'disabled,asc, title,asc',
'disabled,desc, title,asc',
'disabled,desc, usercss,asc, title,asc',
'{groupDesc}',
'title,desc',
'usercss,asc, title,desc',
'usercss,desc, title,desc',
'disabled,desc, title,desc',
@ -73,21 +75,32 @@ const sortSelectOptions = [
const sortByRegex = /\s*,\s*/;
function addSortOptions() {
let container;
const select = $('#sort-select');
const renderBin = document.createDocumentFragment();
const option = $create('option');
const optgroup = $create('optgroup');
const meta = {
enabled: t('genericEnabledLabel'),
disabled: t('genericDisabledLabel'),
asc: ` (${t('sortAscending')})`,
desc: ` (${t('sortDescending')})`,
dateNew: ` (${t('sortDateNewestFirst')})`,
dateOld: ` (${t('sortDateOldestFirst')})`,
labelFirst: ` (${t('sortLabelFirst')})`,
labelLast: ` (${t('sortLabelLast')})`
labelLast: ` (${t('sortLabelLast')})`,
groupAsc: t('sortLabelTitleAsc'),
groupDesc: t('sortLabelTitleDesc')
};
const optgroupRegex = /\{\w+\}/;
sortSelectOptions.forEach(sort => {
const opt = option.cloneNode();
if (optgroupRegex.test(sort)) {
if (container) {
renderBin.appendChild(container);
}
container = optgroup.cloneNode();
container.label = meta[sort.substring(1, sort.length - 1)];
return;
}
let lastTag = '';
opt.textContent = sort.split(sortByRegex).reduce((acc, val) => {
if (tagData[val]) {
@ -100,8 +113,9 @@ function addSortOptions() {
return acc + (meta[val] || '');
}, '');
opt.value = sort;
renderBin.appendChild(opt);
container.appendChild(opt);
});
renderBin.appendChild(container);
select.appendChild(renderBin);
select.value = prefs.get('manage.newUI.sort');
}