refactoring of #518 to simplify registration of scripts in modules and themes

Oqtane.Client/Modules/Admin/Login/Index.razor

@@ -1,7 +1,6 @@
 @namespace Oqtane.Modules.Admin.Login
 @inherits ModuleBase
 @inject NavigationManager NavigationManager
-@inject IJSRuntime JsRuntime
 @inject IUserService UserService
 @inject IServiceProvider ServiceProvider
 
@@ -96,7 +95,7 @@
             {
                 await logger.LogInformation("Login Successful For Username {Username}", _username);
                 // complete the login on the server so that the cookies are set correctly on SignalR
-                var interop = new Interop(JsRuntime);
+                var interop = new Interop(JSRuntime);
                 string antiforgerytoken = await interop.GetElementByName("__RequestVerificationToken");
                 var fields = new { __RequestVerificationToken = antiforgerytoken, username = _username, password = _password, remember = _remember, returnurl = _returnUrl };
                 await interop.SubmitForm($"/{PageState.Alias.AliasId}/pages/login/", fields);

Oqtane.Client/Modules/Admin/ModuleDefinitions/Add.razor

@@ -4,7 +4,6 @@
 @inject IFileService FileService
 @inject IModuleDefinitionService ModuleDefinitionService
 @inject IPackageService PackageService
-@inject IJSRuntime JsRuntime
 
 @if (_packages != null)
 {
@@ -79,7 +78,7 @@
         try
         {
             ShowProgressIndicator();
-            var interop = new Interop(JsRuntime);
+            var interop = new Interop(JSRuntime);
             await interop.RedirectBrowser(NavigateUrl(), 3);
             await ModuleDefinitionService.InstallModuleDefinitionsAsync();
         }

Oqtane.Client/Modules/Admin/ModuleDefinitions/Index.razor

@@ -3,7 +3,6 @@
 @inject NavigationManager NavigationManager
 @inject IModuleDefinitionService ModuleDefinitionService
 @inject IPackageService PackageService
-@inject IJSRuntime JsRuntime
 
 @if (_moduleDefinitions == null)
 {
@@ -86,7 +85,7 @@ else
             await PackageService.DownloadPackageAsync(moduledefinitionname, version, "Modules");
             await logger.LogInformation("Module Downloaded {ModuleDefinitionName} {Version}", moduledefinitionname, version);
             ShowProgressIndicator();
-            var interop = new Interop(JsRuntime);
+            var interop = new Interop(JSRuntime);
             await interop.RedirectBrowser(NavigateUrl(), 3);
             await ModuleDefinitionService.InstallModuleDefinitionsAsync();
         }
@@ -102,7 +101,7 @@ else
         try
         {
             ShowProgressIndicator();
-            var interop = new Interop(JsRuntime);
+            var interop = new Interop(JSRuntime);
             await interop.RedirectBrowser(NavigateUrl(), 3);
             await ModuleDefinitionService.DeleteModuleDefinitionAsync(moduleDefinition.ModuleDefinitionId, moduleDefinition.SiteId);
         }

Oqtane.Client/Modules/Admin/Themes/Add.razor

@@ -4,7 +4,6 @@
 @inject IFileService FileService
 @inject IThemeService ThemeService
 @inject IPackageService PackageService
-@inject IJSRuntime JsRuntime
 
 @if (_packages != null)
 {
@@ -79,7 +78,7 @@
         try
         {
             ShowProgressIndicator();
-            var interop = new Interop(JsRuntime);
+            var interop = new Interop(JSRuntime);
             await interop.RedirectBrowser(NavigateUrl(), 3);
             await ThemeService.InstallThemesAsync();
         }

Oqtane.Client/Modules/Admin/Themes/Index.razor

@@ -4,7 +4,6 @@
 @inject NavigationManager NavigationManager
 @inject IThemeService ThemeService
 @inject IPackageService PackageService
-@inject IJSRuntime JsRuntime
 
 @if (_themes == null)
 {
@@ -86,7 +85,7 @@ else
             await PackageService.DownloadPackageAsync(themename, version, "Themes");
             await logger.LogInformation("Theme Downloaded {ThemeName} {Version}", themename, version);
             ShowProgressIndicator();
-            var interop = new Interop(JsRuntime);
+            var interop = new Interop(JSRuntime);
             await interop.RedirectBrowser(NavigateUrl(), 3);
             await ThemeService.InstallThemesAsync();
         }
@@ -102,7 +101,7 @@ else
         try
         {
             ShowProgressIndicator();
-            var interop = new Interop(JsRuntime);
+            var interop = new Interop(JSRuntime);
             await interop.RedirectBrowser(NavigateUrl(), 3);
             await ThemeService.DeleteThemeAsync(Theme.ThemeName);
         }

Oqtane.Client/Modules/Admin/Upgrade/Index.razor

@@ -4,7 +4,6 @@
 @inject IFileService FileService
 @inject IPackageService PackageService
 @inject IInstallationService InstallationService
-@inject IJSRuntime JsRuntime
 
 @if (_package != null)
 {
@@ -71,7 +70,7 @@
         try
         {
             ShowProgressIndicator();
-            var interop = new Interop(JsRuntime);
+            var interop = new Interop(JSRuntime);
             await interop.RedirectBrowser(NavigateUrl(), 3);
             await InstallationService.Upgrade();
         }
@@ -88,7 +87,7 @@
         {
             await PackageService.DownloadPackageAsync(packageid, version, "Framework");
             ShowProgressIndicator();
-            var interop = new Interop(JsRuntime);
+            var interop = new Interop(JSRuntime);
             await interop.RedirectBrowser(NavigateUrl(), 3);
             await InstallationService.Upgrade();
         }

Oqtane.Client/Modules/Controls/FileManager.razor

@@ -4,7 +4,6 @@
 @attribute [OqtaneIgnore]
 @inject IFolderService FolderService
 @inject IFileService FileService
-@inject IJSRuntime JsRuntime
 
 @if (_folders != null)
 {
@@ -258,7 +257,7 @@
 
     private async Task UploadFile()
     {
-        var interop = new Interop(JsRuntime);
+        var interop = new Interop(JSRuntime);
         var upload = await interop.GetFiles(_fileinputid);
         if (upload.Length > 0)
         {

Oqtane.Client/Modules/Controls/RichTextEditor.razor

@@ -1,7 +1,6 @@
 @namespace Oqtane.Modules.Controls
 @inherits ModuleBase
 @attribute [OqtaneIgnore]
-@inject IJSRuntime JsRuntime
 
 <div class="row" style="margin-bottom: 50px;">
     <div class="col">
@@ -108,6 +107,11 @@
     [Parameter]
     public string DebugLevel { get; set; } = "info";
 
+    public override List<Resource> Resources => new List<Resource>()
+    {
+        new Resource { ResourceType = ResourceType.Script, Url = "js/quill-interop.js" }
+    };
+
     protected override void OnInitialized()
     {
         _content = Content; // raw HTML
@@ -117,12 +121,9 @@
     {
         if (firstRender)
         {
-            var oqtaneInterop = new Interop(JsRuntime);
-
-            await oqtaneInterop.LoadInteropScript("js/quill-interop.js");
-
+            await base.OnAfterRenderAsync(firstRender);
 
-            var interop = new RichTextEditorInterop(JsRuntime);
+            var interop = new RichTextEditorInterop(JSRuntime);
 
             await interop.CreateEditor(
                 _editorElement,
@@ -148,21 +149,21 @@
 
     public async Task RefreshRichText()
     {
-        var interop = new RichTextEditorInterop(JsRuntime);
+        var interop = new RichTextEditorInterop(JSRuntime);
         await interop.LoadEditorContent(_editorElement, _content);
     }
 
     public async Task RefreshRawHtml()
     {
-        var interop = new RichTextEditorInterop(JsRuntime);
+        var interop = new RichTextEditorInterop(JSRuntime);
         _content = await interop.GetHtml(_editorElement);
         StateHasChanged();
     }
 
     public async Task<string> GetHtml()
     {
         // get rich text content
-        var interop = new RichTextEditorInterop(JsRuntime);
+        var interop = new RichTextEditorInterop(JSRuntime);
         string content = await interop.GetHtml(_editorElement);
 
         if (_original != content)
@@ -184,7 +185,7 @@
             var fileid = _fileManager.GetFileId();
             if (fileid != -1)
             {
-                var interop = new RichTextEditorInterop(JsRuntime);
+                var interop = new RichTextEditorInterop(JSRuntime);
                 await interop.InsertImage(_editorElement, ContentUrl(fileid));
                 _filemanagervisible = false;
                 _message = string.Empty;
@@ -205,19 +206,19 @@
     // other rich text editor methods which can be used by developers
     public async Task<string> GetText()
     {
-        var interop = new RichTextEditorInterop(JsRuntime);
+        var interop = new RichTextEditorInterop(JSRuntime);
         return await interop.GetText(_editorElement);
     }
 
     public async Task<string> GetContent()
     {
-        var interop = new RichTextEditorInterop(JsRuntime);
+        var interop = new RichTextEditorInterop(JSRuntime);
         return await interop.GetContent(_editorElement);
     }
 
     public async Task EnableEditor(bool mode)
     {
-        var interop = new RichTextEditorInterop(JsRuntime);
+        var interop = new RichTextEditorInterop(JSRuntime);
         await interop.EnableEditor(_editorElement, mode);
     }
 }

Oqtane.Client/Modules/HtmlText/Edit.razor

@@ -27,7 +27,6 @@
     public override List<Resource> Resources => new List<Resource>()
     {
         new Resource { ResourceType = ResourceType.Stylesheet, Url = ModulePath() + "Module.css" },
-        // the following resources should be declared in the RichTextEditor component however the framework currently only supports resource management for modules and themes
         new Resource { ResourceType = ResourceType.Stylesheet, Url = "css/quill/quill1.3.6.bubble.css" },
         new Resource { ResourceType = ResourceType.Stylesheet, Url = "css/quill/quill1.3.6.snow.css" }
     };

Oqtane.Client/Modules/ModuleBase.cs

@@ -7,6 +7,8 @@
 using Oqtane.Enums;
 using Oqtane.UI;
 using System.Collections.Generic;
+using Microsoft.JSInterop;
+using System.Linq;
 
 namespace Oqtane.Modules
 {
@@ -19,6 +21,9 @@ public abstract class ModuleBase : ComponentBase, IModuleControl
         [Inject]
         protected ILogService LoggingService { get; set; }
 
+        [Inject]
+        protected IJSRuntime JSRuntime { get; set; }
+
         [CascadingParameter]
         protected PageState PageState { get; set; }
 
@@ -28,7 +33,6 @@ public abstract class ModuleBase : ComponentBase, IModuleControl
         [CascadingParameter] 
         protected ModuleInstance ModuleInstance { get; set; }
 
-
         // optional interface properties
         public virtual SecurityAccessLevel SecurityAccessLevel { get { return SecurityAccessLevel.View; } set { } } // default security
 
@@ -40,7 +44,23 @@ public abstract class ModuleBase : ComponentBase, IModuleControl
 
         public virtual List<Resource> Resources { get; set; }
 
+        // base lifecycle method for handling JSInterop script registration
 
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            if (firstRender)
+            {
+                if (Resources != null && Resources.Exists(item => item.ResourceType == ResourceType.Script))
+                {
+                    var interop = new Interop(JSRuntime);
+                    foreach (var resource in Resources.Where(item => item.ResourceType == ResourceType.Script))
+                    {
+                        await interop.LoadScript(resource.Url);
+                    }
+                }
+            }
+        }
+
         // path method
 
         public string ModulePath()

Oqtane.Client/Themes/ContainerBase.cs

@@ -1,64 +1,11 @@
 using Microsoft.AspNetCore.Components;
-using Microsoft.JSInterop;
-using Oqtane.Shared;
 using Oqtane.Models;
-using Oqtane.UI;
 
 namespace Oqtane.Themes
 {
-    public abstract class ContainerBase : ComponentBase, IContainerControl
+    public abstract class ContainerBase : ThemeBase, IContainerControl
     {
-        [Inject]
-        protected IJSRuntime JSRuntime { get; set; }
-
-        [CascadingParameter]
-        protected PageState PageState { get; set; }
-
         [CascadingParameter]
         protected Module ModuleState { get; set; }
-
-        public virtual string Name { get; set; }
-        public virtual string Thumbnail { get; set; }
-
-        public string ThemePath()
-        {
-            return "Themes/" + GetType().Namespace + "/";
-        }
-
-        public string NavigateUrl()
-        {
-            return NavigateUrl(PageState.Page.Path);
-        }
-
-        public string NavigateUrl(string path)
-        {
-            return NavigateUrl(path, "");
-        }
-
-        public string NavigateUrl(string path, string parameters)
-        {
-            return Utilities.NavigateUrl(PageState.Alias.Path, path, parameters);
-        }
-
-        public string EditUrl(string action, string parameters)
-        {
-            return EditUrl(ModuleState.ModuleId, action, parameters);
-        }
-
-        public string EditUrl(int moduleid, string action)
-        {
-            return EditUrl(moduleid, action, "");
-        }
-
-        public string EditUrl(int moduleid, string action, string parameters)
-        {
-            return EditUrl(PageState.Page.Path, moduleid, action, parameters);
-        }
-
-        public string EditUrl(string path, int moduleid, string action, string parameters)
-        {
-            return Utilities.EditUrl(PageState.Alias.Path, path, moduleid, action, parameters);
-        }
-
     }
 }

Oqtane.Client/Themes/LayoutBase.cs

@@ -1,21 +1,7 @@
-using Microsoft.AspNetCore.Components;
-using Oqtane.Shared;
-using Oqtane.UI;
-
-namespace Oqtane.Themes
+namespace Oqtane.Themes
 {
-    public abstract class LayoutBase : ComponentBase, ILayoutControl
+    public abstract class LayoutBase : ThemeBase, ILayoutControl
     {
-        [CascadingParameter]
-        protected PageState PageState { get; set; }
-        public virtual string Name { get; set; }
-        public virtual string Thumbnail { get; set; }
-        public virtual string Panes { get; set; }
-
-        public string LayoutPath()
-        {
-            return "Themes/" + GetType().Namespace + "/";
-        }
 
     }
 }