This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new 8a8225b decorate labels in itemrenders when using filter beads to
show the substring found it bold and underlined
8a8225b is described below
commit 8a8225b6e394a25f97e48f5fa086274eddb8f935
Author: Carlos Rovira <[email protected]>
AuthorDate: Tue Feb 19 21:00:01 2019 +0100
decorate labels in itemrenders when using filter beads to show the
substring found it bold and underlined
---
.../projects/Jewel/src/main/resources/defaults.css | 3 ++
.../controls/textinput/SearchFilterForList.as | 43 +++++++++++++++++-----
.../royale/jewel/itemRenderers/ListItemRenderer.as | 7 +---
.../src/main/sass/components/_itemRenderer.sass | 4 ++
4 files changed, 43 insertions(+), 14 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 54a62e7..1ca1a34 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -865,6 +865,9 @@ j|ImageButton {
.jewel.item.selectable, .jewel.navigationlink.selectable,
.jewel.tabbarbutton.selectable {
cursor: pointer;
}
+.jewel.item.preserveWhiteSpaces, .jewel.navigationlink.preserveWhiteSpaces,
.jewel.tabbarbutton.preserveWhiteSpaces {
+ white-space: pre;
+}
.jewel.item .fonticon, .jewel.navigationlink .fonticon, .jewel.tabbarbutton
.fonticon {
cursor: inherit;
}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/textinput/SearchFilterForList.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/textinput/SearchFilterForList.as
index 62f0a98..68a38fa 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/textinput/SearchFilterForList.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/textinput/SearchFilterForList.as
@@ -26,6 +26,7 @@ package org.apache.royale.jewel.beads.controls.textinput
import org.apache.royale.jewel.List;
import org.apache.royale.jewel.itemRenderers.ListItemRenderer;
import org.apache.royale.jewel.supportClasses.textinput.TextInputBase;
+ import org.apache.royale.jewel.supportClasses.util.getLabelFromData;
/**
* The SearchFilterForList bead class is a specialty bead that can be
used with
@@ -81,7 +82,6 @@ package org.apache.royale.jewel.beads.controls.textinput
protected function keyUpHandler(event:KeyboardEvent):void
{
-
const inputBase:TextInputBase = event.target as
TextInputBase;
//keyup can include other things like tab navigation
@@ -101,28 +101,48 @@ package org.apache.royale.jewel.beads.controls.textinput
list.selectedItem = null;
}
- applyFilter(input.text.toUpperCase());
+ applyFilter(input.text);
}
- protected function onBeadsAdded(event:Event):void{
+ protected function onBeadsAdded(event:Event):void
+ {
var input:TextInputBase = TextInputBase(_strand);
- COMPILE::JS{
+ COMPILE::JS
+ {
input.element.addEventListener('focus', onInputFocus);
}
}
protected function onInputFocus(event:Event):void
{
- applyFilter(TextInputBase(_strand).text.toUpperCase());
+ applyFilter(TextInputBase(_strand).text);
}
/**
* default filter function just filters substrings
* you can use other advanced methods like levenshtein distance
+ *
+ * @param text, the text where perform the seach
+ * @param filterText, the text to use as Filter
+ * @return true if filterText was found in text, false otherwise
*/
protected function defaultFilterFunction(text:String,
filterText:String):Boolean
{
- return text.toUpperCase().indexOf(filterText) > -1;
+ return
text.toUpperCase().indexOf(filterText.toUpperCase()) > -1;
+ }
+
+ /**
+ * Used to decorated the filtered text
+ *
+ * @param originalString, the original String
+ * @param toReplace, the string to replace
+ * @param decoration, the decoration to use, defaults to
"strong"
+ * @return the originalString with the replacement performed
+ */
+ protected function decorateText(originalString:String,
location:int, len:int, decorationPrefix:String = "<strong><u>",
decorationSufix:String = "</u></strong>"):String
+ {
+ var str:String = originalString.substr(location, len);
+ return originalString.replace(str , decorationPrefix +
str + decorationSufix);
}
protected function applyFilter(filterText:String):void
@@ -133,21 +153,26 @@ package org.apache.royale.jewel.beads.controls.textinput
while (numElements--)
{
ir = list.getElementAt(numElements) as ListItemRenderer;
- if (filterFunction(ir.text, filterText))
+ ir.addClass("preserveWhiteSpaces");
+ var textData:String = getLabelFromData(ir,
ir.data);
+ if (filterFunction(textData, filterText))
{
ir.visible = true;
//stores the item if text is the same
- if(ir.text.toUpperCase() == filterText)
+ if(textData.toUpperCase() ==
filterText.toUpperCase())
{
item = ir.data;
}
+
+ //decorate text
+ ir.text = filterText != "" ?
decorateText(textData,
textData.toUpperCase().indexOf(filterText.toUpperCase()), filterText.length) :
textData;
} else {
ir.visible = false;
}
}
- //Select the item in the list if text is the same
+ // Select the item in the list if text is the same
// we do at the end to avoid multiple selection (if
there's more than one matches)
// in that case, select the first one in the list
if(item != null)
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as
index f5487d4..ed91789 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as
@@ -27,7 +27,7 @@ package org.apache.royale.jewel.itemRenderers
COMPILE::JS
{
import org.apache.royale.core.WrappedHTMLElement;
- import org.apache.royale.html.util.addElementToWrapper;
+ import org.apache.royale.html.util.addElementToWrapper;
}
/**
@@ -81,10 +81,7 @@ package org.apache.royale.jewel.itemRenderers
_text = value;
COMPILE::JS
{
- if(textNode != null)
- {
- textNode.nodeValue = _text;
- }
+ element.innerHTML = value;
}
dispatchEvent(new Event('textChange'));
}
diff --git
a/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
b/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
index 0189fa1..a2e648b 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
@@ -37,7 +37,11 @@ $item-min-height: 34px
cursor: pointer
// pointer-events: auto
+ &.preserveWhiteSpaces
+ white-space: pre
+
.fonticon
cursor: inherit
+
