resolve #566 by moving Bootstrap declaration into theme

oqtane · Jun 16, 2020 · 7c24bae · 7c24bae
1 parent 71b3b69
commit 7c24bae
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 39 deletions.
diff --git a/Oqtane.Client/Modules/Controls/Section.razor b/Oqtane.Client/Modules/Controls/Section.razor
@@ -4,12 +4,12 @@
 
 <div class="d-flex">
     <div>
-        <a data-toggle="collapse" class="app-link-unstyled" href="#@Name" aria-expanded="@_expanded" aria-controls="@Name">
+        <a data-toggle="collapse" class="app-link-unstyled" href="#@Name" aria-expanded="@_expanded" aria-controls="@Name" @onclick:preventDefault="true">
             <h5>@_heading</h5>
         </a>
     </div>
     <div class="ml-auto">
-        <a data-toggle="collapse" class="app-link-unstyled float-right" href="#@Name" aria-expanded="@_expanded" aria-controls="@Name">
+        <a data-toggle="collapse" class="app-link-unstyled float-right" href="#@Name" aria-expanded="@_expanded" aria-controls="@Name" @onclick:preventDefault="true">
             <i class="oi oi-chevron-bottom"></i>&nbsp;
         </a>
     </div>

diff --git a/Oqtane.Client/Modules/Controls/TabStrip.razor b/Oqtane.Client/Modules/Controls/TabStrip.razor
@@ -11,13 +11,13 @@
                     <li class="nav-item">
                         @if (tabPanel.Name == ActiveTab)
                         {
-                            <a class="nav-link active" data-toggle="tab" href="#@tabPanel.Name" role="tab">
+                            <a class="nav-link active" data-toggle="tab" href="#@tabPanel.Name" role="tab" @onclick:preventDefault="true">
                                 @DisplayHeading(tabPanel.Name, tabPanel.Heading)
                             </a>
                         }
                         else
                         {
-                            <a class="nav-link" data-toggle="tab" href="#@tabPanel.Name" role="tab">
+                            <a class="nav-link" data-toggle="tab" href="#@tabPanel.Name" role="tab" @onclick:preventDefault="true">
                                 @DisplayHeading(tabPanel.Name, tabPanel.Heading)
                             </a>
                         }

diff --git a/Oqtane.Client/Modules/ModuleBase.cs b/Oqtane.Client/Modules/ModuleBase.cs
@@ -55,7 +55,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
                     var interop = new Interop(JSRuntime);
                     foreach (var resource in Resources.Where(item => item.ResourceType == ResourceType.Script))
                     {
-                        await interop.LoadScript(resource.Url);
+                        await interop.LoadScript(resource.Url, resource.Integrity ?? "", resource.CrossOrigin ?? "");
                     }
                 }
             }

diff --git a/Oqtane.Client/Themes/BlazorTheme/Default.razor b/Oqtane.Client/Themes/BlazorTheme/Default.razor
@@ -1,5 +1,6 @@
 @namespace Oqtane.Themes.BlazorTheme
 @inherits ThemeBase
+@implements IThemeControl
 
 <div class="breadcrumbs">
     <Breadcrumbs />
@@ -30,6 +31,16 @@
 
     public override List<Resource> Resources => new List<Resource>()
     {
+        new Resource { ResourceType = ResourceType.Stylesheet, Url = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css", Integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T", CrossOrigin = "anonymous" },
         new Resource { ResourceType = ResourceType.Stylesheet, Url = ThemePath() + "Theme.css" }
     };
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            var interop = new Interop(JSRuntime);
+            await interop.LoadBootstrapJS();
+        }
+    }
 }
diff --git a/Oqtane.Client/Themes/OqtaneTheme/Default.razor b/Oqtane.Client/Themes/OqtaneTheme/Default.razor
@@ -1,5 +1,6 @@
 @namespace Oqtane.Themes.OqtaneTheme
 @inherits ThemeBase
+@implements IThemeControl
 
 <main role="main">
     <nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
@@ -23,10 +24,16 @@
 
     public override List<Resource> Resources => new List<Resource>()
     {
-        new Resource { ResourceType = ResourceType.Stylesheet, Url = ThemePath() + "BootswatchCyborg.css" },
-        // remote stylesheets can be linked using the format below, however we want the default theme to display properly in local development scenarios where an Internet connection is not available
-        //new Resource { ResourceType = ResourceType.Stylesheet, Url = "https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/cyborg/bootstrap.min.css", Integrity = "sha384-l7xaoY0cJM4h9xh1RfazbgJVUZvdtyLWPueWNtLAphf/UbBgOVzqbOTogxPwYLHM", CrossOrigin = "anonymous" },
+        new Resource { ResourceType = ResourceType.Stylesheet, Url = "https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/cyborg/bootstrap.min.css", Integrity = "sha384-l7xaoY0cJM4h9xh1RfazbgJVUZvdtyLWPueWNtLAphf/UbBgOVzqbOTogxPwYLHM", CrossOrigin = "anonymous" },
         new Resource { ResourceType = ResourceType.Stylesheet, Url = ThemePath() + "Theme.css" }
     };
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            var interop = new Interop(JSRuntime);
+            await interop.LoadBootstrapJS();
+        }
+    }
 }
diff --git a/Oqtane.Client/Themes/ThemeBase.cs b/Oqtane.Client/Themes/ThemeBase.cs
@@ -9,7 +9,7 @@
 
 namespace Oqtane.Themes
 {
-    public abstract class ThemeBase : ComponentBase, IThemeControl
+    public abstract class ThemeBase : ComponentBase
     {
         [Inject]
         protected IJSRuntime JSRuntime { get; set; }
@@ -34,7 +34,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
                     var interop = new Interop(JSRuntime);
                     foreach (var resource in Resources.Where(item => item.ResourceType == ResourceType.Script))
                     {
-                        await interop.LoadScript(resource.Url);
+                        await interop.LoadScript(resource.Url, resource.Integrity ?? "", resource.CrossOrigin ?? "");
                     }
                 }
             }

diff --git a/Oqtane.Client/UI/Interop.cs b/Oqtane.Client/UI/Interop.cs
@@ -117,11 +117,23 @@ public Task IncludeScript(string id, string src, string integrity, string crosso
             }
         }
 
-        public async Task LoadScript(string path)
+        public async Task LoadScript(string url, string integrity, string crossorigin)
         {
             try
             {
-                await _jsRuntime.InvokeVoidAsync("Oqtane.Interop.loadScript", path);
+                await _jsRuntime.InvokeVoidAsync("Oqtane.Interop.loadScript", url, integrity, crossorigin);
+            }
+            catch
+            {
+                // ignore exception
+            }
+        }
+
+        public async Task LoadBootstrapJS()
+        {
+            try
+            {
+                await _jsRuntime.InvokeVoidAsync("Oqtane.Interop.loadBootstrapJS");
             }
             catch
             {

diff --git a/Oqtane.Server/Pages/_Host.cshtml b/Oqtane.Server/Pages/_Host.cshtml
@@ -14,7 +14,6 @@
     <link id="app-favicon" rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
     <!-- stub the PWA manifest but defer the assignment of href -->
     <link id="app-manifest" rel="manifest" />
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <link rel="stylesheet" href="css/app.css" />
     <script src="js/loadjs.min.js"></script>
 </head>
@@ -36,9 +35,6 @@
     </div>
 
     <script src="js/interop.js"></script>
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 
     @if (Configuration.GetSection("Runtime").Value == "WebAssembly")
     {

diff --git a/Oqtane.Server/wwwroot/js/interop.js b/Oqtane.Server/wwwroot/js/interop.js
@@ -198,12 +198,30 @@ Oqtane.Interop = {
             script.onerror = rej();
         });
     },
-    loadScript: async function (path) {
+    loadScript: async function (url, integrity, crossorigin) {
         const promise = new Promise((resolve, reject) => {
-            loadjs(path, { returnPromise: true })
-                .then(function () { resolve(true) })
-                .catch(function (pathsNotFound) { reject(false) });
+
+            if (loadjs.isDefined(url)) {
+                resolve(true);
+                return;
+            }
+
+            loadjs(url, url, {
+                async: false,
+                returnPromise: true,
+                before: function (path, element) {
+                    if (path === url && integrity !== '') {
+                        element.integrity = integrity;
+                    }
+                    if (path === url && crossorigin !== '') {
+                        element.crossOrigin = crossorigin;
+                    }
+                }
+            })
+            .then(function () { resolve(true) })
+            .catch(function (pathsNotFound) { reject(false) });
         });
+
         const result = await promise;
         return;
     },
@@ -325,5 +343,31 @@ Oqtane.Interop = {
         setInterval(function () {
             window.location.href = url;
         }, wait * 1000);
+    },
+    loadBootstrapJS: async function () {
+        if (!loadjs.isDefined('Bootstrap')) {
+            const bootstrap = loadjs(['https://code.jquery.com/jquery-3.3.1.slim.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'], 'Bootstrap', {
+                async: false,
+                returnPromise: true,
+                before: function (path, element) {
+                    if (path === 'https://code.jquery.com/jquery-3.3.1.slim.min.js') {
+                        element.integrity = 'sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo';
+                        element.crossOrigin = 'anonymous';
+                    }
+                    if (path === 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js') {
+                        element.integrity = 'sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1';
+                        element.crossOrigin = 'anonymous';
+                    }
+                    if (path === 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js') {
+                        element.integrity = 'sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM';
+                        element.crossOrigin = 'anonymous';
+                    }
+                }
+            })
+            .then(function () { })
+            .catch(function (pathsNotFound) { });
+
+            await bootstrap;
+        }
     }
 };
diff --git a/Oqtane.Server/wwwroot/js/quill-interop.js b/Oqtane.Server/wwwroot/js/quill-interop.js
@@ -5,27 +5,28 @@ Oqtane.RichTextEditor = {
         quillElement, toolBar, readOnly,
         placeholder, theme, debugLevel) {
 
-        const loadQuill = loadjs(['js/quill1.3.6.min.js', 'js/quill-blot-formatter.min.js'], 'Quill',
-            { async: true, returnPromise: true })
-            .then(function () { 
-                Quill.register('modules/blotFormatter', QuillBlotFormatter.default);
-
-                var options = {
-                    debug: debugLevel,
-                    modules: {
-                        toolbar: toolBar,
-                        blotFormatter: {}
-                    },
-                    placeholder: placeholder,
-                    readOnly: readOnly,
-                    theme: theme
-                };
+        if (!loadjs.isDefined('Quill')) {
+            const loadQuill = loadjs(['js/quill1.3.6.min.js', 'js/quill-blot-formatter.min.js'], 'Quill',
+                { async: true, returnPromise: true })
+                .then(function () {
+                    Quill.register('modules/blotFormatter', QuillBlotFormatter.default);
+                })
+                .catch(function (pathsNotFound) { });
+            await loadQuill;
+        }
 
-                new Quill(quillElement, options);
-            })
-            .catch(function (pathsNotFound) { });
+        var options = {
+            debug: debugLevel,
+            modules: {
+                toolbar: toolBar,
+                blotFormatter: {}
+            },
+            placeholder: placeholder,
+            readOnly: readOnly,
+            theme: theme
+        };
 
-        await loadQuill;
+        new Quill(quillElement, options);
     },
     getQuillContent: function (editorElement) {
         return JSON.stringify(editorElement.__quill.getContents());