add RemoveAttribute for HTML Control.

nmyvision · July 9

I'm creating a custom component that I need to dynamically add/remove 'loading' attribute. There is a SetAttribute and GetAttribute how can I remove an attribute? For my use case setting an empty string is not enough I need to remove the attribute.

JeffMercado · July 9

Quick workaround should you need it:

control.HtmlElement.Run("targetElement.removeAttribute('loading');");

JoeAlbahari · July 11

Have you tried setting it to null?

JeffMercado · July 11

I guess it would depend on if you want to affect the last dump of the control? I don't remember if it always did this but using Get/SetAttribute() only affects future dumps of a control. Previous dumps are unaffected.

var x = new Control("div", "foobar");
x.HtmlElement.SetAttribute("loading", "");
x.Dump(); // <div loading>foobar</div>

x.HtmlElement.Run("targetElement.removeAttribute('loading');"); // removes the attribute on the currently dumped item

x.Dump(); // <div loading>foobar</div>

x.HtmlElement.SetAttribute("loading", null); // only removes the attribute on future dumps

x.Dump(); // <div>foobar</div>

nmyvision · July 13

Thanks Jeff I knew I could use JS, but I was not aware of the targetElement trick that will come in handy. Setting to null does in fact remove the attribute, before dump is called.

After some further investigating there's actually some unexpected behavior. SetAttribute works for Control but not Controls that inherit 'Control' (ie: Div, Button, Span, etc..)

here is a sample script

Util.HtmlHead.AddRawHtml("""
    <link 
    rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/themes/dark.css" 
    onload="document.documentElement.classList.add('sl-theme-dark'); document.documentElement.classList.add('sl-font-sans','line-height-normal');" />
    """);
Util.HtmlHead.AddScriptFromUri("module", "https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/shoelace.js");

Util.HtmlHead.AddStyles(@"

#my-test-div { 
    width: 10rem; 
    padding: .75rem;
    background-color: darkgreen;
}
*[loading=true] {   
    text-transform: uppercase;
}
");


var slButton = new Control("sl-button", new Literal("Custom Button"));
slButton.HtmlElement.SetAttribute("variant", "default");
slButton.HtmlElement.SetAttribute("loading", "true");

var button = new Button("LinqPad Button");
button.HtmlElement.SetAttribute("loading", "true");


var span = new Span(new Literal("a div"));
span.HtmlElement.SetAttribute("loading", "true");
span.HtmlElement.ID = "my-test-div";


// this works because the object has not been dumped
//div.HtmlElement.SetAttribute("loading", null);
//button.HtmlElement.SetAttribute("loading", null);

new StackPanel(false,
    new StackPanel(true,
        slButton,
        span,
        button
    ),
    new StackPanel(true,

        new Button("Remove Loading", (b) =>
        {
            // WORKING
            slButton.HtmlElement.SetAttribute("loading", null);
            span.Text = "Updated"; //works

            // NOT WORKING
            //span.HtmlElement.SetAttribute("loading", null);                       
            //button.HtmlElement.SetAttribute("loading", null);

            // NOT WORKING
            span.HtmlElement.SetAttribute("loading", "false");
            button.HtmlElement.SetAttribute("loading", "false");
        }),

        new Button("Use Script to Remove", (b) =>
        {
            span.Text = "Updated";
            // this works
            span.HtmlElement.Run("targetElement.removeAttribute('loading');");          
            button.HtmlElement.Run("targetElement.removeAttribute('loading');");
        }),

        new Literal("|"),

        new Button("Reset", (b) =>
        {
            // Not Working
            span.HtmlElement.SetAttribute("loading", "true");           
            button.HtmlElement.SetAttribute("loading", "true");


            // this does work
            slButton.HtmlElement.SetAttribute("loading", "true");
        }),

        new Button("Force Reset", (b) => {

            span.HtmlElement.Run("targetElement.setAttribute('loading', 'true');");
            button.HtmlElement.Run("targetElement.setAttribute('loading', 'true');");
        })
    )
).Dump();

add RemoveAttribute for HTML Control.

Comments

Categories