Flex 4 TextArea: automatic character escaping in HTML/TextFlow links - actionscript-3

I'm using the Spark's TextArea that contains links like this:
#hashtag
As you can see, this is a link to the Twitter search page for the specific hashtag. The hash-sign must be escaped in the query string. But, I have a problem here: when I click the link, the '%' symbol gets escaped automatically and the URL becomes corrupted (...search?q=%2523hashtag). Can I turn off this automatic escaping?
The '#' sign, if used in the URL, does not become escaped, and therefore the Twitter page does not open correctly in this case. So I cannot use neither '#' nor '%23' in the URL.
I would appreciate any solution for this.
Thank you.

Ok... so far, I couldn't find a way to turn off the automatic escaping of the URL when it's clicked. But I've found the workaround instead.
Basically, I add a custom click handler to all the link elements inside the TextFlow and open the links manually when clicked (instead of a built-in TLF behavior). Like this:
public function addLinkHandler( textFlowOrGroupElement: FlowGroupElement ): void
{
// scan the flow elements
for ( var f1: int = 0; f1 < textFlowOrGroupElement.numChildren; f1 ++ ) {
// found element
var curFlowGroupElement: FlowElement = textFlowOrGroupElement.getChildAt( f1 );
// if this is the link element, add the click event listener
if ( curFlowGroupElement is LinkElement ) {
( curFlowGroupElement as LinkElement ).addEventListener( FlowElementMouseEvent.CLICK, onLinkClick );
}
// if this is another flow group
else if ( curFlowGroupElement is FlowGroupElement ) {
// scan this group in turn, recursively
addLinkHandler( curFlowGroupElement as FlowGroupElement );
}
}
}
and here is the click handler for the links:
public function onLinkClick( e: FlowElementMouseEvent ): void
{
e.stopImmediatePropagation();
e.preventDefault();
var linkElement: LinkElement = e.flowElement as LinkElement;
navigateToURL( new URLRequest( linkElement.href ), '_blank' );
}
So in the end to make the Twitter-hashtag links work correctly in the TextArea, I do this:
addLinkHandler( textArea.textFlow );
P.S. The algorithm of adding the click handlers is based on this post, but optimized.

Related

How Do I Dynamically Add onclick on a Razor page?

I am iterating through a LARGE list of objects all of which will open the same modal window that will be loaded with dynamic information. To make this work, I create a counter called MenuCounter that I know increments just fine.
That said, I am attempting to wrap a hyperlink around the icons I need to use and the injection of the method keeps pointing to the last value of the MenuCounter.
I first tried this:
...
When I ran into the issue, I tried reducing the code to the following but then the page somehow activates the hyperlink and the modal window appears and will not go away.
...
Can somebody please help me out?
Thank you!
You should apply a lambda expression to the Blazor #onclick directive instead of using the onclick Html attribute, in which case it should call a JS function, which you did not mean.
Note that I've introduced a new directive to prevent the default action of the anchor element: #onclick:preventDefault
Test this code:
#page "/"
<a href="#" #onclick:preventDefault #onclick="#(() => SetupChangeName(MenuCounter))" >Click me...</a>
<div>Counter is #output</div>
#code
{
private int MenuCounter = 10;
private int output;
private void SetupChangeName (int counter)
{
output = counter;
}
}
Note: If you use a for loop to render a list of anchor elements, you must define a variable local to the loop, and provide it as the input to your lambda expression, something like this:
#for(int MenuCounter = 0; MenuCounter < 10; MenuCounter++)
{
int local= MenuCounter;
<a href="#" #onclick:preventDefault #onclick="#(() =>
SetupChangeName(local))" >Click me...</a>
}
otherwise, all the lambda expressions will have the the same value for MenuCounter, which is the value incremented for the last iteration. See For loop not returning expected value - C# - Blazor explaining the issue.
I'm not a fan of onclick attributes, but if you're set on this method, I believe you just need to santize the C# and JS in the same line like this:
...
Adding the quotes will ensure at least an empty string is present for JS, and then you can process it.
Alternative method
Since mixing languages like that is quite frustrating, I find it easier to use data tags, for example
...
And then in your JS file:
var links = document.querySelectorAll('[data-menu-counter]');
links.forEach(x => x.addEventListener('click', /* your function code here */);

element.addEventListener not adding listener

So I have an array of strings that will turn into buttons,
//At start
function acceptSuggestion() {
console.log(`clicked`)
console.log(this.textContent);
}
//Else where
suggestions.couldBe.innerHTML = ``;
list.suggestions.forEach(function (item) {
let button = document.createElement(`button`);
button.textContent = item;
button.addEventListener(`click`, acceptSuggestion);//before append
button.style = `text-align:center; width:50%`;
suggestions.couldBe.appendChild(button);
button.addEventListener(`click`, acceptSuggestion);//after append
suggestions.couldBe.innerHTML+=`<br>`;
});
It creates the buttons fine
But clicking them does nothing.
Why is this? I know I have the event right cuz of this: https://www.w3schools.com/js/js_htmldom_eventlistener.asp
If it matters, I am using electron.js to create an webpage like application, and not a browser.
The reason this is happening is because of this line:
suggestions.couldBe.innerHTML+="<br>";
What is happening is your Browser element is generating all new fresh HTML each loop because of the += on the innerHTML.
Basically in pseudo code:
var temp = suggestions.couldBe.innerHTML + "<br>;
suggestions.couldBe.innerHTML = temp;
This causes your element that was added via the suggestions.couldBe.appendChild(button); to be converted to html, then re-parsed and all new elements created from HTML each iteration of the loop. Because your Button event handler was created in JS; it is lost when it recreated the button from the HTML version.
You want to do this either all via JS; not mixing it. So my suggestion would be to change this line:
suggestions.couldBe.innerHTML+="<br>";
to
suggestions.couldBe.appendChild(document.createElement('br'));

MvxTabsFragmentActivity - Remove tabs

Is there any way to remove tabs from an MvxTabsFragmentActivity-inherited class? I mean, currently there's only AddTab<T>() method for adding tabs. But, what if I want to remove tabs?
TIA,
Pap
No - MvxTabsFragmentActivity doesn't provide any RemoveTab functionality currently.
The source for this activity is https://github.com/MvvmCross/MvvmCross/blob/v3.1/Cirrious/Cirrious.MvvmCross.Droid.Fragging/MvxTabsFragmentActivity.cs - you should be able to use this as a starting point for your own needs.
UPDATE:
After following #Stuart's advice and-as I mentioned in my comment below-I added the source code for the MvxTabsFragmentActivity class to my project and added the following method-to remove all tabs-which was all I wanted:
public void RemoveAllTabs()
{
// First, detach the curent tab using SupportFragmentManager object.
if (_currentTab != null)
{
var tag = _currentTab.CachedFragment.Tag;
_currentTab.CachedFragment = SupportFragmentManager.FindFragmentByTag( tag );
if (_currentTab.CachedFragment != null && !_currentTab.CachedFragment.IsDetached)
{
var ft = SupportFragmentManager.BeginTransaction();
ft.Detach( _currentTab.CachedFragment );
ft.Commit();
SupportFragmentManager.ExecutePendingTransactions();
}
}
// Second remove all tabs from TabHost object
if (_tabHost != null)
_tabHost.ClearAllTabs();
// And lastly, empty our _lookup table(actually a Dictionary).
_lookup.Clear();
_currentTab = null; // Clear the current tab
}
I guess if someone wanted to have a specific tab removed he could use the SupportFragmentManager object and have something like this:
public void RemoveTab( string tag )
{
var fragment = SupportFragmentManager.FindFragmentByTag( tag );
if (fragment != null && ! fragment.IsDetached)
{
var ft = SupportFragmentManager.BeginTransaction();
ft.Detach( fragment );
ft.Commit();
SupportFragmentManager.ExecutePendingTransactions();
//_tabHost.TabWidget.RemoveView( fragment.View ); // Neither this..
//_tabHost.RemoveView( fragment.View ); // .. or this removed the tab from the Tabhost.
}
}
However, although the above code was successful at removing the fragment/view inside the tab, the tab itself remained-showing a blank/empty tab. I couldn't find a TabHost.RemoveTab() or TabHost.TabWidget.RemoveTab() methods and the TabHost.RemoveView()/TabHost.TabWidget.RemoveView() did not work.
Notes: I renamed the MvxTabsFragmentActivity to something else and included all copyright notices at the top of the class in my project. Thanks again to #Stuart.

Google-like jQuery UI autocomplete

Is it possible to send the server only the last 3 words in the textarea and to autofill the best result, letting the user keep typing in (similar to Google auto complete)?
I want the behavior to be:
N[ew]
New[er]
New(SPACE)[er]
New [York]
New c[ar]
New cat [food]
New cat (TAB) [food]
New cat food [makes]
...
New cat food is good for your cat's [health]
(clarification: the [square brackets] indicates the suggestion that is automatically being typed in, the bold text indicates the part being sent to the server, (TAB) and (SPACE) indicates tab and space key presses)
I already a have function on the server for predicting the next word (using Markov chains) and I have integrated jQuery UI autocomplete, but currently it just sends all the text to the server and creates a list with all the suggestions to choose from, once you choose it changes the whole text.
So it eventually comes to these issues:
How to send only the last part?
How to append + select the suggested word?
How to select on Tab key?
Okay - here is the solution (and here is the result):
1 + 2: Instead of managing a single input box, I use two identical size textarea's, the first (#text-area) is enables and with transparent background and the other (#suggestions) is disabled and with gray text color. I use the source callback to do all the work:
$('#text-area').autocomplete({ ...
source: function( request, response ) {
if (request.term.length < 3) {
return false;
}
$.getJSON( $SCRIPT_ROOT + '/_get_word', {
term: request.term
}, function(data) {
$('#suggestions').val(data.result) //suggestion is the disabled textarea
}
);
return false;
},
...
});
});
3: the tab key selection is done with triggering the autocomplete search event:
$('#text-area').live( "keydown",'textarea', function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB) {
event.preventDefault();
$('#text-area').val($('#suggestions').val());
$("#text-area").autocomplete('search', $('#text-area').val());
}
});

ckeditor remove specific attributes from a tab

In the the ckeditor init, to remove dialog tabs, it is possible to do something like:
CKEDITOR.on( 'dialogDefinition', function( ev )
{
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're interested in
if ( dialogName == 'link' )
{
dialogDefinition.removeContents( 'advanced' );
}
});
This will remove the "advanced" tab from the link dialog.
It also possible to remove specific attributes from a tab, doing something like:
var infoTab = dialogDefinition.getContents( 'info' );
// Remove unnecessary widgets from the 'Link Info' tab.
infoTab.remove( 'linkType');
infoTab.remove( 'protocol');
So this works fine, but my problem is I could not find a detailed list of the attributes names, like 'linkType' or 'protocol' in the example above.
Basically I would like to remove, from the image dialog for example, the width, height, the css class and id from the advanced tab etc, but I cannot find a the names of these attributes in the ckeditor documentation, does someone know where I can find this ?
Or give a list?
You can use the Developer tools plugin as explained in the HowTos: http://docs.cksource.com/CKEditor_3.x/Howto/Field_Names