public Card(IComponent content)
{
InnerElement = Div(_("tss-card"), content.Render());
_cardContainer = Div(_("tss-card-container"), InnerElement);
DomObserver.WhenMounted(InnerElement, () => InnerElement.classList.add("tss-ismounted"));
AttachClick();
}
private HTMLDivElement GetAnimatedItem(IComponent component, bool isTitle, bool grow = false, string customPadding = "")
{
if (!((component as dynamic).StackItem is HTMLDivElement item))
{
item = Div(_(isTitle ? "tss-sectionstack-title tss-stack-item tss-sectionstack-item" : "tss-sectionstack-card tss-stack-item tss-sectionstack-item", styles: s =>
{
s.alignSelf = "auto";
s.width = "auto";
s.height = "auto";
s.flexShrink = "1";
s.overflow = "hidden";
s.padding = customPadding;
}), component.Render());
(component as dynamic).StackItem = item;
}
if (grow)
{
item.style.flexGrow = "1";
item.style.height = "10px";
}
Count++;
item.style.transitionDelay = $"{0.05f * Count:n2}s";
DomObserver.WhenMounted(item, () => item.classList.add("tss-ismounted"));
return(item);
}
private void HookCheck()
{
document.addEventListener("scroll", OnScroll, true);
window.addEventListener("resize", OnScroll, true);
DomObserver.WhenRemoved(InnerElement, UnHookCheck);
//Trigger one time on first render, to force check if visible
OnScroll(null);
}
public void Reset()
{
DomObserver.WhenMounted(InnerElement, HookCheck);
if (_maxCalls < 1) //will only reach 0 if it was single call
{
_maxCalls = 1;
}
}
public static T InvisibleScroll <T>(this T component) where T : IComponent
{
var element = component.Render();
DomObserver.WhenMounted(element, () =>
{
var targetElement = Stack.GetItem(component);
EnableInvisibleScroll(targetElement);
});
return(component);
}
public static T Scroll <T>(this T component) where T : IComponent
{
var element = component.Render();
DomObserver.WhenMounted(element, () =>
{
var targetElement = Stack.GetItem(component);
targetElement.style.overflowY = "auto";
});
return(component);
}
public VisibilitySensor(Action <VisibilitySensor> onVisible, bool singleCall = true, IComponent message = null)
{
InnerElement = DIV();
if (message is object)
{
InnerElement.appendChild(message.Render());
}
_onVisible = onVisible;
_maxCalls = singleCall ? 1 : int.MaxValue;
DomObserver.WhenMounted(InnerElement, HookCheck);
}
public static T WhenMounted <T>(this T component, Action callback) where T : IComponent
{
//No need to double check if already mounted here, as teh DomObserver already do it
DomObserver.WhenMounted(component.Render(), callback);
return(component);
}
public static T WhenRemoved <T>(this T component, Action callback) where T : IComponent
{
DomObserver.WhenRemoved(component.Render(), callback);
return(component);
}
public dom.HTMLElement Render()
{
DomObserver.WhenMounted(_container, () => TriggerRefresh());
return(_container);
}
