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);
}
}