internal void OnMaxLengthChanged(int maxLength)
{
if (INTERNAL_VisualTreeManager.IsElementInVisualTree(this))
{
INTERNAL_HtmlDomManager.SetDomElementProperty(INTERNAL_InnerDomElement, "maxLength", maxLength);
}
}
static void MaxLength_MethodToUpdateDom(DependencyObject d, object newValue)
{
var passwordBox = (PasswordBox)d;
int newValueInt = (int)newValue;
if (INTERNAL_VisualTreeManager.IsElementInVisualTree(passwordBox))
{
INTERNAL_HtmlDomManager.SetDomElementProperty(passwordBox.INTERNAL_InnerDomElement, "maxLength", newValueInt);
}
}
private void SetSelectedIndexInNativeHtmlDom(int value)
{
if (this._nativeComboBoxDomElement != null)
{
// Compensate for the fact that the ComboBox contains an empty
// element at the beginning (see note in 'AddEmptyOption' method)
INTERNAL_HtmlDomManager.SetDomElementProperty(
_nativeComboBoxDomElement,
"selectedIndex",
value >= 0 ? value + 1 : value,
true);
}
}
void ManageVolume_Changed()
{
if (INTERNAL_VisualTreeManager.IsElementInVisualTree(this))
{
if (_mediaElement != null)
{
INTERNAL_HtmlDomManager.SetDomElementProperty(_mediaElement, "volume", Volume);
}
else if (_mediaElement_ForAudioOnly_ForSimulatorOnly != null)
{
_mediaElement_ForAudioOnly_ForSimulatorOnly.Pause();
}
}
}
public void SetSelectedIndexInNativeHtmlDom(int value)
{
if (INTERNAL_VisualTreeManager.IsElementInVisualTree(this) && _nativeComboBoxDomElement != null)
{
int selectedIndexInHtmlDom = value;
// Compensate for the fact that the ComboBox contains an empty element at the beginning (see note in the CreateDomElement method):
if (selectedIndexInHtmlDom >= 0)
{
selectedIndexInHtmlDom += 1;
}
INTERNAL_HtmlDomManager.SetDomElementProperty(_nativeComboBoxDomElement, "selectedIndex", selectedIndexInHtmlDom, forceSimulatorExecuteImmediately: true);
}
}
internal static void UpdateDomBasedOnCheckedState(ToggleButton checkBoxOrRadioButton, bool?isChecked)
{
if (isChecked == null)
{
INTERNAL_HtmlDomManager.SetDomElementProperty(checkBoxOrRadioButton.INTERNAL_OptionalSpecifyDomElementConcernedByFocus, "indeterminate", true, forceSimulatorExecuteImmediately: true);
}
else if (isChecked == false)
{
//we make sure the checkbox is not stuck on indeterminate
INTERNAL_HtmlDomManager.SetDomElementProperty(checkBoxOrRadioButton.INTERNAL_OptionalSpecifyDomElementConcernedByFocus, "indeterminate", false, forceSimulatorExecuteImmediately: true);
//INTERNAL_HtmlDomManager.RemoveDomElementAttribute(checkBoxOrRadioButton.INTERNAL_OptionalSpecifyDomElementConcernedByFocus, "checked", forceSimulatorExecuteImmediately: true);
//Note: I think the checked property of the checkbox is not considered as an attribute in js.
INTERNAL_HtmlDomManager.SetDomElementProperty(checkBoxOrRadioButton.INTERNAL_OptionalSpecifyDomElementConcernedByFocus, "checked", false, forceSimulatorExecuteImmediately: true);
}
else
{
INTERNAL_HtmlDomManager.SetDomElementProperty(checkBoxOrRadioButton.INTERNAL_OptionalSpecifyDomElementConcernedByFocus, "indeterminate", false, forceSimulatorExecuteImmediately: true);
INTERNAL_HtmlDomManager.SetDomElementProperty(checkBoxOrRadioButton.INTERNAL_OptionalSpecifyDomElementConcernedByFocus, "checked", true, forceSimulatorExecuteImmediately: true);
}
}
public override object CreateDomElement(object parentRef, out object domElementWhereToPlaceChildren)
{
if (_useNativeComboBox)
{
var select = INTERNAL_HtmlDomManager.CreateDomElementAndAppendIt("select", parentRef, this);
domElementWhereToPlaceChildren = select;
_nativeComboBoxDomElement = select;
INTERNAL_EventsHelper.AttachToDomEvents("change", select, (Action <object>)(e =>
{
DomSelectionChanged(select);
}));
INTERNAL_HtmlDomManager.SetDomElementStyleProperty(select, new List <string>()
{
"fontSize"
}, "inherit");
// Add an empty element that will make it easier to have nothing selected when items are added to the ComboBox: // See: http://stackoverflow.com/questions/8605516/default-select-option-as-blank
var emptyOption = INTERNAL_HtmlDomManager.AddOptionToNativeComboBox(_nativeComboBoxDomElement, "");
CSHTML5.Interop.ExecuteJavaScriptAsync("$0.disabled = true", emptyOption);
CSHTML5.Interop.ExecuteJavaScriptAsync("$0.selected = true", emptyOption);
CSHTML5.Interop.ExecuteJavaScriptAsync("$0.style.display = 'hidden'", emptyOption);
// Set the mark saying that the pointer events must be "absorbed" by the ComboBox:
INTERNAL_HtmlDomManager.SetDomElementProperty(select, "data-absorb-events", true);
return(select);
}
else
{
#if !BRIDGE
return(base.CreateDomElement(parentRef, out domElementWhereToPlaceChildren));
#else
return(CreateDomElement_WorkaroundBridgeInheritanceBug(parentRef, out domElementWhereToPlaceChildren));
#endif
}
}
public override object CreateDomElement(object parentRef, out object domElementWhereToPlaceChildren)
{
var select = INTERNAL_HtmlDomManager.CreateDomElementAndAppendIt("select", parentRef, this);
domElementWhereToPlaceChildren = select;
this._nativeComboBoxDomElement = select;
INTERNAL_HtmlDomManager.SetDomElementStyleProperty(select, new List <string>()
{
"fontSize"
}, "inherit");
// Set the mark saying that the pointer events must be "absorbed" by the ComboBox:
INTERNAL_HtmlDomManager.SetDomElementProperty(select, "data-absorb-events", true);
// Fill the ComboBox and synchronize selection properties
this.Refresh();
// Listen to native selection change event
this.SubscribeToHtmlChangeEvent();
return(select);
}
private object AddContentEditableDomElement(object parentRef, out object domElementWhereToPlaceChildren)
{
bool isReadOnly = this.Host.IsReadOnly;
object outerDiv;
var outerDivStyle = INTERNAL_HtmlDomManager.CreateDomElementAppendItAndGetStyle("div", parentRef, this, out outerDiv);
string backgroundColor = "transparent"; //value when it is templated
outerDivStyle.backgroundColor = backgroundColor;
outerDivStyle.height = "100%";
object middleDiv;
var middleDivStyle = INTERNAL_HtmlDomManager.CreateDomElementAppendItAndGetStyle("div", outerDiv, this, out middleDiv);
middleDivStyle.width = "100%";
middleDivStyle.height = "100%";
object contentEditableDiv;
var contentEditableDivStyle = INTERNAL_HtmlDomManager.CreateDomElementAppendItAndGetStyle("div", middleDiv, this, out contentEditableDiv);
_contentEditableDiv = contentEditableDiv;
Host.UpdateFocusContentEditable(_contentEditableDiv);
if (INTERNAL_HtmlDomManager.IsInternetExplorer())
{
//set the class to remove margins on <p> inside the contentEditableDiv
OpenSilver.Interop.ExecuteJavaScript(@"$0.classList.add(""ie_set_p_margins_to_zero"")", contentEditableDiv);
}
contentEditableDivStyle.width = "100%";
contentEditableDivStyle.height = "100%";
// Apply Host.TextWrapping
contentEditableDivStyle.whiteSpace = Host.TextWrapping == TextWrapping.NoWrap ? "nowrap" : "pre-wrap";
// Apply Host.HorizontalScrollBarVisibility
contentEditableDivStyle.overflowX = ScrollBarVisibilityToHtmlString(Host.HorizontalScrollBarVisibility) ?? "hidden";
// Apply Host.VerticalScrollBarVisibility
contentEditableDivStyle.overflowY = ScrollBarVisibilityToHtmlString(Host.VerticalScrollBarVisibility) ?? "hidden";
contentEditableDivStyle.outline = "solid transparent"; // Note: this is to avoind having the weird border when it has the focus. I could have used outlineWidth = "0px" but or some reason, this causes the caret to not work when there is no text.
contentEditableDivStyle.background = "solid transparent";
contentEditableDivStyle.cursor = "text";
// Apply TextAlignment
UpdateTextAlignment(contentEditableDivStyle, Host.TextAlignment);
string isContentEditable = (!isReadOnly).ToString().ToLower();
INTERNAL_HtmlDomManager.SetDomElementAttribute(contentEditableDiv, "contentEditable", isContentEditable);
this.INTERNAL_OptionalSpecifyDomElementConcernedByFocus = contentEditableDiv;
this.INTERNAL_OptionalSpecifyDomElementConcernedByMinMaxHeightAndWidth = contentEditableDiv;
contentEditableDivStyle.minWidth = "14px";
contentEditableDivStyle.minHeight = (Math.Floor(this.Host.FontSize * 1.5 * 1000) / 1000).ToInvariantString() + "px"; // Note: We multiply by 1000 and then divide by 1000 so as to only keep 3 decimals at the most. //Note: setting "minHeight" is for FireFox only, because other browsers don't seem to need it. The "1.5" factor is here to ensure that the resulting Height is the same as that of the PasswordBox.
// Fix for Internet Explorer: when pressing Enter in the ContentEditable div, IE will create a new paragraph, which results in graphical issues to the distance between paragraphs. To fix this issue, we put an empty DIV inside by default. When IE detects that there are DIVs inside, it adds a new DIV instead of creating a new paragraph when the user presses Enter.
if (INTERNAL_HtmlDomManager.IsInternetExplorer())
{
object divToImproveIELineBreaks;
var divToImproveIELineBreaksStyle = INTERNAL_HtmlDomManager.CreateDomElementAppendItAndGetStyle("div", contentEditableDiv, this, out divToImproveIELineBreaks);
}
domElementWhereToPlaceChildren = contentEditableDiv;
// Set the mark saying that the pointer events must be "absorbed" by the TextBox:
INTERNAL_HtmlDomManager.SetDomElementProperty(outerDiv, "data-absorb-events", true);
//-----------------------
// Prepare to raise the "TextChanged" event and to update the value of the "Text" property when the DOM text changes:
//-----------------------
//todo: why did we put this here instead of in INTERNAL_AttachToDomEvents?
if (IsRunningOnInternetExplorer())
{
//-----------------------
// Fix "input" event not working under IE:
//-----------------------
this.GotFocus += InternetExplorer_GotFocus;
this.LostFocus += InternetExplorer_LostFocus;
INTERNAL_EventsHelper.AttachToDomEvents("textinput", contentEditableDiv, (Action <object>)(e =>
{
InternetExplorer_RaiseTextChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("paste", contentEditableDiv, (Action <object>)(e =>
{
InternetExplorer_RaiseTextChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("cut", contentEditableDiv, (Action <object>)(e =>
{
InternetExplorer_RaiseTextChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("keyup", contentEditableDiv, (Action <object>)(e =>
{
InternetExplorer_RaiseTextChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("delete", contentEditableDiv, (Action <object>)(e =>
{
InternetExplorer_RaiseTextChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("mouseup", contentEditableDiv, (Action <object>)(e =>
{
InternetExplorer_RaiseTextChangedIfNecessary();
}));
}
else
{
//-----------------------
// Modern browsers
//-----------------------
INTERNAL_EventsHelper.AttachToDomEvents("input", contentEditableDiv, (Action <object>)(e =>
{
TextAreaValueChanged();
}));
}
//-----------------------
// Prevent pressing Enter for line break when "AcceptsReturn" is false and prevent pressing any other key than backspace when "MaxLength" is reached:
// Also prevent the default event when pressing tab and add "\t" when "AcceptsTab" is set to true:
//-----------------------
if (IsRunningInJavaScript())
{
#if OPENSILVER
throw new InvalidOperationException();
#elif BRIDGE
//BRIDGETODO : here the code below works weird
// instance = this
// makes instance working properly, where it shouldn't
//Note: I think the reason why instance = this works is because it is set with the correct context of "this",
// so instance = this TextBox. If it was inside the function defined as callback of addEventListener,
// "this" would be in the context of the event triggered, so it would be the contentEditable div.
Bridge.Script.Write(@"
var instance = $1;
$0.addEventListener('keydown', function(e) {
if (e.keyCode == 13 && instance.AcceptsReturn !== true)
{
e.preventDefault();
return false;
}
var isAddingTabulation = e.keyCode == 9 && instance.AcceptsTab == true;
var isRemovingTabulation = isAddingTabulation && e.shiftKey;
if(isRemovingTabulation)
{
isAddingTabulation = false
}
if((isAddingTabulation || e.keyCode == 13 || e.keyCode == 32 || e.keyCode > 47) && instance.MaxLength != 0)
{
var textLength = instance.GetTextLengthIncludingNewLineCompensation();
if (e.keyCode == 13)
{
textLength += 1; //because adding a new line takes 2 characters instead of 1.
}
if(textLength >= instance.MaxLength)
{
e.preventDefault();
return false;
}
}
if(isAddingTabulation)
{
//we need to add '\t' where the cursor is, prevent the event (which would change the focus) and dispatch the event for the text changed:
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
range.insertNode(document.createTextNode('\t'));
sel.collapseToEnd();
range.collapse(false); //for IE
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
range.text = '\t';
document.selection.collapseToEnd();
}
if (window.IS_EDGE)
{
sel.removeAllRanges();
sel.addRange(range);
}
instance.TextAreaValueChanged(); //todo: test this.
e.preventDefault();
return false;
}
if (isRemovingTabulation)
{
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
if(range.collapsed)
{
//if the previous character is a '\t', we want to remove it:
var rangeStartContainer = range.startContainer;
var rangeStartOffset = range.startOffset;
//we get the node that contains the text that needs changing and the index of the character to remove:
var textNodeToModify = undefined;
var indexToRemove = -1;
if(rangeStartContainer.nodeType == Node.TEXT_NODE && rangeStartOffset > 0)
{
textNodeToModify = rangeStartContainer;
indexToRemove = rangeStartOffset - 1;
}
else //The potential tab to remove is in the node that is right before the selection(caret) so we look at the last character of the 'previous sibling':
{
var previousSibling = undefined;
// we get the previous node:
if(rangeStartContainer.nodeType == Node.TEXT_NODE) //the caret was right before the first element of a textNode. I am not sure if we can arrive here since this case seems to be considered as 'the caret is between the nodes' instead of 'the caret is in the node but before the first character'
{
previousSibling = rangeStartContainer.previousSibling;
}
else //the caret is considered between nodes so the range container is the element that contains the text nodes.
{
if(rangeStartOffset > 0) //otherwise, we are at the first character inside a new div (or p), which means at the start of a new line so nothing to remove.
{
previousSibling = rangeStartContainer.childNodes[rangeStartOffset -1];
}
}
//We update the node and index to modify:
if(previousSibling != undefined && previousSibling.nodeType == Node.TEXT_NODE)
{
textNodeToModify = previousSibling;
indexToRemove = previousSibling.textContent.length - 1;
} //else, the previous node was not a text node so there has to be a new line between the caret and the previous text so nothing to remove here.
}
if(textNodeToModify != undefined && indexToRemove != -1)
{
//range.startContainer.textContent = range.startContainer.textContent.substring(rangeStartOffset)
var textContent = textNodeToModify.textContent;
if(textContent[indexToRemove] == '\t')
{
var resultingString = textContent.substring(0, indexToRemove); //note: text.substring(0,-1) returns ""
resultingString += textContent.substring(indexToRemove + 1); //note: 'aaa'.substring(25) returns ""
textNodeToModify.textContent = resultingString;
}
}
}
}
}
//todo: else.
instance.TextAreaValueChanged(); //todo: test this.
e.preventDefault();
return false;
}
}, false);", contentEditableDiv, this);//AcceptsReturn, MaxLength
#endif
}
#if OPENSILVER
else
{
// ---- SIMULATOR ----
string uid = ((INTERNAL_HtmlDomElementReference)contentEditableDiv).UniqueIdentifier;
// Set the "data-accepts-return" property (that we have invented) so that the "KeyDown" and "Paste" JavaScript events can retrieve this value:
// also set the "data-maxlength" and the "data-isreadonly"
INTERNAL_HtmlDomManager.ExecuteJavaScript($@"
var element = document.getElementByIdSafe(""{uid}"");
element.setAttribute(""data-acceptsreturn"", ""{this.Host.AcceptsReturn.ToString().ToLower()}"");
element.setAttribute(""data-maxlength"", ""{this.Host.MaxLength}"");
element.setAttribute(""data-isreadonly"",""{isReadOnly.ToString().ToLower()}"");
element.setAttribute(""data-acceptstab"", ""{this.Host.AcceptsTab.ToString().ToLower()}"");");
// Register the "keydown" javascript event:
INTERNAL_HtmlDomManager.ExecuteJavaScript($@"
var element_OutsideEventHandler = document.getElementByIdSafe(""{uid}"");
element_OutsideEventHandler.addEventListener('keydown', function(e) {{
var element_InsideEventHandler = document.getElementByIdSafe(""{uid}""); // For some reason we need to get again the reference to the element.
var acceptsReturn = element_InsideEventHandler.getAttribute(""data-acceptsreturn"");
var maxLength = element_InsideEventHandler.getAttribute(""data-maxlength"");
var acceptsTab = element_InsideEventHandler.getAttribute(""data-acceptstab"");
if (e.keyCode == 13)
{{
if(acceptsReturn != ""true"")
{{
e.preventDefault();
return false;
}}
}}
var isAddingTabulation = e.keyCode == 9 && acceptsTab == ""true"";
if((isAddingTabulation || e.keyCode == 13 || e.keyCode == 32 || e.keyCode > 47) && maxLength != 0)
{{
var text = getTextAreaInnerText(element_InsideEventHandler);
if (!acceptsReturn) {{
text = text.replace(""\n"", """").replace(""\r"", """");
}}
var correctionDueToNewLines = 0;
if (e.keyCode == 13)
{{
++correctionDueToNewLines; //because adding a new line takes 2 characters instead of 1.
}}
if(text.length + correctionDueToNewLines >= maxLength)
{{
if (!window.getSelection().toString()) {{
e.preventDefault();
return false;
}}
}}
}}
if(isAddingTabulation)
{{
//we need to add '\t' where the cursor is, prevent the event (which would change the focus) and dispatch the event for the text changed:
var sel, range;
if (window.getSelection) {{
sel = window.getSelection();
if (sel.rangeCount) {{
range = sel.getRangeAt(0);
range.deleteContents();
range.insertNode(document.createTextNode('\t'));
sel.collapseToEnd();
range.collapse(false); //for IE
}}
}} else if (document.selection && document.selection.createRange) {{
range = document.selection.createRange();
range.text = '\t';
document.selection.collapseToEnd();
}}
if (window.IS_EDGE)
{{
sel.removeAllRanges();
sel.addRange(range);
}}
instance.TextAreaValueChanged(); //todo: test this.
e.preventDefault();
return false;
}}
}}, false);");//comma added on purpose because we need to get maxLength somehow (see how we did for acceptsReturn).
}
#endif
//-----------------------
// Enforce only Plain Text + prevent line breaks if "AcceptsReturn" is false. This is required because in a ContentEditable div, the user can paste rich text. Furthermore, on IE, pressing Enter will insert a new paragraph.
//-----------------------
if (IsRunningInJavaScript())
{
#if OPENSILVER
throw new InvalidOperationException();
#elif BRIDGE
var acceptsReturn = this.Host.AcceptsReturn;
//todo: shouldn't we add a check for maxlength in the script below like in the other versions of this addEventListenter (in the simulator version below and in the #if !BRIDGE part above)?
Bridge.Script.Write(@"
{0}.addEventListener('paste', function(e) {
var isReadOnly= {1};
if(!isReadOnly)
{
var isSingleLine = ({2} !== true); // This is the current value at the time when the event is raised.
// Chrome supports setting ContentEditable to PlainText-Only, so we try this first:
{0}.setAttribute('contenteditable', 'PLAINTEXT-ONLY');
if ({0}.contentEditable === 'plaintext-only') // If setting the attribute worked, we can read it back (in lowercase)
{
// --- CHROME: ---
// Nothing else to do about rich text conversion to plain text.
// However we still need to remove line breaks if AcceptsReturn is false:
if (isSingleLine){
e.preventDefault();
var content = (e.originalEvent || e).clipboardData.getData('text/plain');
content = content.replace(/\n/g, '').replace(/\r/g, '');
document.execCommand('insertText', false, content);
}
}
else
{
{0}.setAttribute('contenteditable', 'true');
if (e.clipboardData){
// --- FIREFOX: ---
e.preventDefault();
var content = (e.originalEvent || e).clipboardData.getData('text/plain');
if (isSingleLine){
content = content.replace(/\n/g, '').replace(/\r/g, '');
}
document.execCommand('insertText', false, content);
}
else if (window.clipboardData){
// --- INTERNET EXPLORER: ---
e.preventDefault();
var content = window.clipboardData.getData('Text');
if (window.getSelection)
{
var newDiv = document.createElement('div');
if (isSingleLine){
content = content.replace(/\n/g, '').replace(/\r/g, '');
}
content = content.replace(/\r\n/g, '<br />');
newDiv.innerHTML = content.replace(/\n/g, '<br />');
var range = window.getSelection().getRangeAt(0);
range.deleteContents()
range.insertNode( newDiv );
//window.getSelection().getRangeAt(0).insertNode( document.createTextNode(content) );
}
}
}
}
}, false);", contentEditableDiv, isReadOnly, acceptsReturn);
//BRIDGETODO : check the code up
#endif
}
#if OPENSILVER
else
{
// ---- SIMULATOR ----
string uid = ((INTERNAL_HtmlDomElementReference)contentEditableDiv).UniqueIdentifier;
// The simulator uses Chrome, so we can set "ContentEditable" to plain-text only:
// We still need to prevent prevent line breaks in the pasted text if "AcceptsReturn" is false:
INTERNAL_HtmlDomManager.ExecuteJavaScript($@"
var element_OutsideEventHandler = document.getElementByIdSafe(""{uid}"");
element_OutsideEventHandler.addEventListener('paste', function(e) {{
var element_InsideEventHandler = document.getElementByIdSafe(""{uid}""); // For some reason we need to get again the reference to the element.
var isReadOnly= element_InsideEventHandler.getAttribute(""data-isreadonly"");
if(isReadOnly !=""true"")
{{
var acceptsReturn = element_InsideEventHandler.getAttribute(""data-acceptsreturn"");
var maxLength = element_InsideEventHandler.getAttribute(""data-maxlength"");
element_InsideEventHandler.setAttribute(""contentEditable"", ""PLAINTEXT-ONLY"");
if (acceptsReturn != ""true""){{
e.preventDefault();
var content = (e.originalEvent || e).clipboardData.getData('text/plain');
if(content !== undefined){{
content = content.replace(/\n/g, '').replace(/\r/g, '');
}}
if(maxLength != 0) {{
var text = getTextAreaInnerText(element_InsideEventHandler);
//var text = element_InsideEventHandler.innerText;
if (!acceptsReturn) {{
text = text.replace(""\n"", """").replace(""\r"", """");
}}
var correctionDueToNewLines = 0;
var textBoxTextLength = text.length + correctionDueToNewLines;
var lengthComparison = maxLength - (content.length + textBoxTextLength);
if(lengthComparison < 0) {{
content = content.substr(0, content.length+lengthComparison);
}}
}}
document.execCommand('insertText', false, content);
}}
}}
}}, false);");
}
#endif
return(outerDiv);
}
