public EditableLabel(string text = string.Empty) { _labelText = Span(_("tss-editablelabel-textspan", text: text, title: "Click to edit")); _editIcon = I(_("tss-editablelabel-edit-icon las la-edit")); _labelView = Div(_("tss-editablelabel-displaybox"), _labelText, _editIcon); InnerElement = TextBox(_("tss-editablelabel-textbox", type: "text")); _cancelEditIcon = Div(_("tss-editablelabel-cancel-icon", title: "Cancel edit"), I(_("las la-times"))); _editView = Div(_("tss-editablelabel-editbox"), InnerElement, _cancelEditIcon); _container = Div(_("tss-editablelabel"), _labelView, _editView); AttachChange(); AttachInput(); AttachFocus(); AttachBlur(); AttachKeys(); _labelView.addEventListener("click", BeginEditing); _cancelEditIcon.addEventListener("click", CancelEditing); OnKeyUp((_, e) => { if (e.key == "Enter") { BeginSaveEditing(); } else if (e.key == "Escape") { CancelEditing(); } }); OnBlur((_, __) => BeginSaveEditing()); }
public EditableArea(string text = string.Empty) { _labelText = Span(_("tss-editablelabel-textspan", text: text, title: "Click to edit")); _editIcon = I(_("tss-editablelabel-edit-icon las la-edit")); _labelView = Div(_("tss-editablelabel-displaybox"), _labelText, _editIcon); InnerElement = TextArea(_("tss-editablelabel-textbox", type: "text")); _cancelEditIcon = Div(_("tss-editablelabel-cancel-icon", title: "Cancel edit"), I(_("las la-times"))); _editView = Div(_("tss-editablelabel-editbox"), InnerElement, _cancelEditIcon); _container = Div(_("tss-editablelabel"), _labelView, _editView); AttachChange(); AttachInput(); AttachFocus(); AttachBlur(); AttachKeys(); _labelView.addEventListener("click", BeginEditing); _cancelEditIcon.addEventListener("click", CancelEditing); OnKeyUp((_, e) => { if (e.key == "Escape") { CancelEditing(); } }); OnBlur((_, __) => window.setTimeout(SaveEditing, 150)); // We need to do this on a timeout, because clicking on the Cancel would trigger this method first, with no opportunity to cancel }
public void ShowAt(int x, int y, int minWidth) { if (_contentHtml == null) { _modalOverlay = Div(_("tss-contextmenu-overlay")); _modalOverlay.addEventListener("click", (_) => Hide()); _popup = Div(_("tss-contextmenu-popup"), _childContainer); _contentHtml = Div(_(), _modalOverlay, _popup); } _popup.style.height = "unset"; _popup.style.left = "-1000px"; _popup.style.top = "-1000px"; base.Show(); if (!_popup.classList.contains("tss-no-focus")) { _popup.classList.add("tss-no-focus"); } var popupRect = (ClientRect)_popup.getBoundingClientRect(); _popup.style.left = x + "px"; _popup.style.top = y + "px"; _popup.style.minWidth = minWidth + "px"; //TODO: CHECK THIS LOGIC if (window.innerHeight - y - 1 < popupRect.height) { var top = y - popupRect.height; if (top < 0) { if (y > window.innerHeight - y - 1) { _popup.style.top = "1px"; _popup.style.height = y - 1 + "px"; } else { _popup.style.height = window.innerHeight - y - 1 + "px"; } } else { _popup.style.top = top + "px"; } } if (window.innerWidth - y - 1 < popupRect.width) { var left = x - popupRect.width; if (left < 0) { if (x > window.innerWidth - x - 1) { _popup.style.left = "1px"; _popup.style.width = x - 1 + "px"; } else { _popup.style.width = window.innerWidth - x - 1 + "px"; } } else { _popup.style.left = left + "px"; } } window.setTimeout((e) => { //document.addEventListener("click", OnWindowClick); //document.addEventListener("dblclick", OnWindowClick); //document.addEventListener("contextmenu", OnWindowClick); //document.addEventListener("wheel", OnWindowClick); document.addEventListener("keydown", OnPopupKeyDown); }, 100); }
private void ShowFor(HTMLElement element, int distanceX, int distanceY, bool asSubMenu) { if (asSubMenu) { _popup = Div(_("tss-contextmenu-popup"), _childContainer); _contentHtml = Div(_(), _modalOverlay, _popup); } else { if (_contentHtml == null) { _modalOverlay = Div(_("tss-contextmenu-overlay")); _modalOverlay.addEventListener("click", _ => Hide()); _popup = Div(_("tss-contextmenu-popup"), _childContainer); _contentHtml = Div(_(), _modalOverlay, _popup); } } _popup.style.height = "unset"; _popup.style.left = "-1000px"; _popup.style.top = "-1000px"; base.Show(); if (!_popup.classList.contains("tss-no-focus")) { _popup.classList.add("tss-no-focus"); } ClientRect parentRect = (ClientRect)element.getBoundingClientRect(); var popupRect = (ClientRect)_popup.getBoundingClientRect(); var x = parentRect.left + distanceX; var y = parentRect.bottom + distanceY; _popup.style.left = x + "px"; _popup.style.top = y + "px"; _popup.style.minWidth = parentRect.width + "px"; //TODO: CHECK THIS LOGIC if (window.innerHeight - parentRect.bottom - distanceY < popupRect.height) { var top = parentRect.top - popupRect.height; if (top < 0) { if (parentRect.top > window.innerHeight - parentRect.bottom - distanceY) { _popup.style.top = "1px"; _popup.style.height = parentRect.top - distanceY + "px"; } else { _popup.style.height = window.innerHeight - parentRect.bottom - distanceY + "px"; } } else { _popup.style.top = top + "px"; } } if (window.innerWidth - parentRect.right - distanceX < popupRect.width) { var left = parentRect.right - popupRect.width; if (left < 0) { if (parentRect.left > window.innerWidth - parentRect.right - distanceX) { _popup.style.left = "1px"; _popup.style.width = parentRect.left - distanceX + "px"; } else { _popup.style.width = window.innerWidth - parentRect.right - distanceX + "px"; } } else { _popup.style.left = left + "px"; } } window.setTimeout((e) => { document.addEventListener("keydown", OnPopupKeyDown); }, 100); _extremeCoordsTopLeft.x = x; _extremeCoordsTopLeft.y = y; _extremeCoordsBottomRight.x = y + popupRect.width; _extremeCoordsBottomRight.y = y + popupRect.height; PossiblySetupSubMenuHooks(); }
/// <summary> /// Render elements and setup the listeners for each sprite click area. /// </summary> /// <param name="rootEl"></param> private void Render(HTMLDivElement rootEl) { var instructDiv = new HTMLDivElement { className = "instructions" }; var titleSpan = new HTMLSpanElement { className = "spriteTitle", innerHTML = "Audio Sprite Visual" }; var descSpan = new HTMLSpanElement { className = "description", innerHTML = "Click a section of the waveform to play the sprite." }; var waveDiv = new HTMLDivElement { id = "waveform" }; var spritesDiv = new HTMLDivElement { className = "sprites" }; instructDiv.appendChild(titleSpan); instructDiv.appendChild(new HTMLBRElement()); instructDiv.appendChild(descSpan); rootEl.appendChild(instructDiv); rootEl.appendChild(waveDiv); rootEl.appendChild(spritesDiv); var count = 0; foreach (var spriteName in _options.SpriteNames) { var spriteDiv = new HTMLDivElement { id = $"sprite{count++}", className = "sprite" }; spriteDiv.addEventListener("click", e => { Play(spriteName); }, false); var spriteLabelDiv = new HTMLDivElement { className = "sprite-label", innerHTML = spriteName }; spriteDiv.appendChild(spriteLabelDiv); spritesDiv.appendChild(spriteDiv); _spriteElms.Add(spriteName, spriteDiv); } }