I'm migrating an existing website to Blazor WASM on .NET Core 5 and i've had some challenges initializing/calling this plugin from blazor. See HTML and JS code below:
On my current website I initialize this plugin as follow:
<script src="./hs-unfold.min.js"></script>
<script>
$(document).on('ready', function () {
// INITIALIZATION OF UNFOLD
// =======================================================
var unfold = new HSUnfold('.js-hs-unfold-invoker').init();
});
</script>
Then on the HTML Page
<div class="hs-unfold">
<a class="js-hs-unfold-invoker btn btn-primary dropdown-toggle" href="javascript:;"
data-hs-unfold-options='{
"target": "#dropdownHover",
"type": "css-animation",
"event": "hover"
}'>Dropdow on hover</a>
<div id="dropdownHover" class="hs-unfold-content dropdown-unfold dropdown-menu">
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
As showing above the properties for this JQuery plugin are passed through HTML tags:
<a class="js-hs-unfold-invoker btn btn-primary dropdown-toggle" href="javascript:;"
data-hs-unfold-options='{
"target": "#dropdownHover",
"type": "css-animation",
"event": "hover"
}'>
@Neil-W thanks for your help with the code above. I was able to remediate the issue by providing the js function options/parameters on the .js initializer file. Below the code for reference:
Create .Js file on wwwroot/ serving as middleware to initialize JS code
**hs-unfold-initializer.js**
(function () {
// INITIALIZATION OF HS-Unfold
// ======================================================
window.HSUnfoldFuntions = {
AddHSUnfold: function (unfoldElement) {
//unfold options
var options = {
target: '#editDropdownElement',
type: "css-animation"
};
//set a new intance of HSUnfold
new HSUnfold(unfoldElement, options).init();
},
};
})();
Initialization script in the header of your Blazor Index.html page:
<head>
<script src="./hs-unfold.min.js"></script>
<script src="./hs-unfold-initializer.js"></script>
</head>
In your Component
@inject IJSRuntime JS
@inject ElementReference hsUnfoldEditElement
<div class="hs-unfold">
<a @ref="@hsUnfoldEditElement" class="js-hs-unfold-invoker btn btn-primary dropdown-toggle">
Dropdow on hover</a>
<div id="editDropdownElement" class="hs-unfold-content dropdown-unfold dropdown-menu">
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
@code{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
//hsUnfold
await JS.InvokeAsync<string>("HSUnfoldFuntions.AddHSUnfold", hsUnfoldEditElement);
}
}
}