IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

Introduces select-kit

Browse Source 
* renames `select-box-kit` into `select-kit`
* introduces `single-select` and `multi-select` as base components
* introduces {{search-advanced-category-chooser}} as a better component for selecting category in advanced search
* improves events handling in select-kit
* recreates color selection inputs using {{multi-select}} and a custom {{selected-color}} component
* replaces category-selector by a component using select-kit and based on multi-select
* improves positioning of wrapper
* removes the need for offscreen, and instead use `select-kit-header` as a base focus point for all select-kit based components
* introduces a formal plugin api for select-kit based components
* introduces a formal pattern for loading and updating select-kit based components:

```
computeValue()
computeContent()
mutateValue()
```
This commit is contained in:
Joffrey JAFFEUX
2017-11-21 11:53:09 +01:00
committed by GitHub
parent edc4b30f82
commit 39f3dbd945
191 changed files with 3160 additions and 2788 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/assets/javascripts/discourse-common/lib/icon-library.js.es6
View File

@@ -42,7 +42,8 @@ export function renderIcon(renderType, id, params) {
let rendererForType = renderer[renderType];
if (rendererForType) {
let result = rendererForType(REPLACEMENTS[id] || id, params || {});
const icon = { id, replacementId: REPLACEMENTS[id] };
let result = rendererForType(icon, params || {});
if (result) {
return result;
}
@@ -68,8 +69,14 @@ export function registerIconRenderer(renderer) {
}
// Support for font awesome icons
function faClasses(id, params) {
let classNames = `fa fa-${id} d-icon d-icon-${id}`;
function faClasses(icon, params) {
let classNames;
if (typeof icon.replacementId !== "undefined") {
classNames = `fa fa-${icon.replacementId} d-icon ${icon.id}`;
} else {
classNames = `fa fa-${icon.id} d-icon d-${icon.id}`;
}
if (params) {
if (params.modifier) { classNames += " fa-" + params.modifier; }
if (params['class']) { classNames += ' ' + params['class']; }
@@ -81,9 +88,9 @@ function faClasses(id, params) {
registerIconRenderer({
name: 'font-awesome',
string(id, params) {
string(icon, params) {
let tagName = params.tagName || 'i';
let html = `<${tagName} class='${faClasses(id, params)}'`;
let html = `<${tagName} class='${faClasses(icon, params)}'`;
if (params.title) { html += ` title='${I18n.t(params.title)}'`; }
if (params.label) { html += " aria-hidden='true'"; }
html += `></${tagName}>`;
@@ -93,11 +100,11 @@ registerIconRenderer({
return html;
},
node(id, params) {
node(icon, params) {
let tagName = params.tagName || 'i';
const properties = {
className: faClasses(id, params),
className: faClasses(icon, params),
attributes: { "aria-hidden": true }
};