CommonJs

src/Blogifier.Admin/Components/NavMenuComponent.razor

@@ -3,6 +3,7 @@
 @inject AuthenticationStateProvider _stateProvider
 @inject IJSRuntime _jsRuntime
 @inject IStringLocalizer<Resource> _localizer
+@inject CommonJsInterop _commonJsInterop
 
 @code {
 
@@ -20,7 +21,7 @@
   {
     if (firstRender)
     {
-      await _jsRuntime.InvokeAsync<string>("commonJsFunctions.setTooltip", "");
+      await _commonJsInterop.SetTooltipAsync();
     }
   }
 }

src/Blogifier.Admin/Components/PageTitleComponent.razor

@@ -1,10 +1,11 @@
 @inject IJSRuntime _jsRuntime;
+@inject CommonJsInterop _commonJsInterop
 
 @code {
   [Parameter] public string Title { get; set; } = default!;
 
   protected override async Task OnInitializedAsync()
   {
-    await _jsRuntime.InvokeVoidAsync("commonJsFunctions.setTitle", Title);
+    await _commonJsInterop.SetTitleAsync(Title);
   }
 }

src/Blogifier.Admin/Components/PostEditorComponent.razor

@@ -7,6 +7,7 @@
 @inject IToaster _toaster
 @inject HttpClient _httpClient
 @inject EditorJsInterop _editorJsInterop
+@inject CommonJsInterop _commonJsInterop
 
 <div class="bfeditor">
   <div class="bfeditor-header">
@@ -106,7 +107,7 @@
   public async Task SetPostInfoAsync(PostEditorDto post)
   {
     var headTitle = _localizer["edit"] + " - " + post.Title;
-    await _jsRuntime.InvokeVoidAsync("commonJsFunctions.setTitle", headTitle);
+    await _commonJsInterop.SetTitleAsync(headTitle);
     await _editorJsInterop.SetEditorValueAsync(post.Content);
   }
 
@@ -178,7 +179,7 @@
 
   protected async Task ChangeCoverAsync()
   {
-    await _jsRuntime.InvokeVoidAsync("commonJsFunctions.triggerClick", _inputCovereference?.Element);
+    await _commonJsInterop.TriggerClickAsync();
   }
 
   protected async Task LoadCovereFile(InputFileChangeEventArgs args)

src/Blogifier.Admin/Interop/CommonJsInterop.cs

@@ -13,6 +13,24 @@ public CommonJsInterop(IJSRuntime jsRuntime)
     moduleTask = new(() => jsRuntime.InvokeAsync<IJSObjectReference>("import", "./admin/js/common.js").AsTask());
   }
 
+  public async ValueTask SetTooltipAsync()
+  {
+    var module = await moduleTask.Value;
+    await module.InvokeVoidAsync("setTooltip");
+  }
+
+  public async ValueTask SetTitleAsync(string content)
+  {
+    var module = await moduleTask.Value;
+    await module.InvokeVoidAsync("setTitle", content);
+  }
+
+  public async ValueTask TriggerClickAsync()
+  {
+    var module = await moduleTask.Value;
+    await module.InvokeVoidAsync("triggerClick");
+  }
+
   public async ValueTask DisposeAsync()
   {
     if (moduleTask.IsValueCreated)

src/Blogifier.Admin/Program.cs

@@ -32,4 +32,5 @@
 });
 builder.Services.AddScoped<ToasterService>();
 builder.Services.AddScoped<EditorJsInterop>();
+builder.Services.AddScoped<CommonJsInterop>();
 await builder.Build().RunAsync();

src/Blogifier.Admin/assets/js/blogifier.js

@@ -1,95 +1,7 @@
 
-import { Tooltip } from 'bootstrap'
-
 // Chart.js v2.9.4
 import "chart.js"
 
-window.commonJsFunctions = {
-  triggerClick: function (element) {
-    element.click();
-  },
-  setTitle: function (title) {
-    document.title = title + " - Blogifier";
-  },
-  setPageTitle: function () {
-
-  },
-  showPrompt: function (message) {
-    return prompt(message, 'Type anything here');
-  },
-  hideLoader: function (id) {
-    var el = document.getElementById(id);
-    el.style.display = 'none';
-  },
-  getFieldValue: function (field) {
-    if (field.type === 'checkbox') {
-      return document.getElementById(field.id).checked;
-    }
-    else {
-      return document.getElementById(field.id).value;
-    }
-  },
-  getTxtValue: function (txt) {
-    return document.getElementById(txt).value;
-  },
-  getSrcValue: function (src) {
-    return document.getElementById(src).src;
-  },
-  focusElement: function (id) {
-    setTimeout(function () {
-      const element = document.getElementById(id);
-      element.focus();
-    }, 500);
-  },
-  writeCookie: function (name, value, days) {
-    var expires;
-    if (days) {
-      var date = new Date();
-      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
-      expires = "; expires=" + date.toGMTString();
-    }
-    else {
-      expires = "";
-    }
-    document.cookie = name + "=" + value + expires + "; path=/";
-  },
-  setTooltip: function (args) {
-    setTimeout(function () {
-      let options = { "trigger": "hover", fallbackPlacements: ['bottom'] };
-      let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
-      let tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
-        return new Tooltip(tooltipTriggerEl, options)
-      });
-    }, 1000);
-  },
-  showModal: function (id) {
-    document.getElementById(id).showModal();
-  },
-  startClock: function () {
-    var clock = document.getElementById('clock');
-    var clockDay = document.getElementById('clock-day');
-    var clockMonth = document.getElementById('clock-month');
-    function time() {
-      var date = new Date();
-      var hours = date.getHours();
-      var minutes = date.getMinutes();
-      hours = hours % 12;
-      hours = hours ? hours : 12;
-      minutes = minutes < 10 ? '0' + minutes : minutes;
-      clock.textContent = hours + ':' + minutes;
-
-      var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-      var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-
-      clockDay.textContent = days[date.getDay()];
-      clockMonth.textContent = months[date.getMonth()] + ' ' + date.getDate();
-    }
-    time();
-    setInterval(time, 60 * 1000);
-  }
-
-};
-
 window.DataService = function () {
   let upload = function (url, obj, success, fail) {
     fetch(url, {

src/Blogifier.Admin/assets/js/common.js

@@ -1,3 +1,4 @@
+import { Tooltip } from 'bootstrap';
 
 export function triggerClick(element) {
   element.click();