kocoded/oqtane.framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #621 from sbwalker/master

Browse Source 
resolve #566 by moving Bootstrap declaration into theme
This commit is contained in:
Shaun Walker 2020-06-16 17:39:15 -04:00 committed by GitHub
commit d4d12b6f41
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 110 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Oqtane.Client/Modules/Controls/Section.razor
View File

@ -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>

4
Oqtane.Client/Modules/Controls/TabStrip.razor
View File

@ -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>
}

2
Oqtane.Client/Modules/ModuleBase.cs
View File

@ -55,7 +55,7 @@ namespace Oqtane.Modules
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 ?? "");
}
}
}

11
Oqtane.Client/Themes/BlazorTheme/Default.razor
View File

@ -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();
}
}
}

13
Oqtane.Client/Themes/OqtaneTheme/Default.razor
View File

@ -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();
}
}
}

4
Oqtane.Client/Themes/ThemeBase.cs
View File

@ -9,7 +9,7 @@ using System.Threading.Tasks;
namespace Oqtane.Themes
{
public abstract class ThemeBase : ComponentBase, IThemeControl
public abstract class ThemeBase : ComponentBase
{
[Inject]
protected IJSRuntime JSRuntime { get; set; }
@ -34,7 +34,7 @@ namespace Oqtane.Themes
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 ?? "");
}
}
}

16
Oqtane.Client/UI/Interop.cs
View File

@ -117,11 +117,23 @@ namespace Oqtane.UI
}
}
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
{

4
Oqtane.Server/Pages/_Host.cshtml
View File

@ -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")
{

48
Oqtane.Server/wwwroot/js/interop.js
View File

@ -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 })
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;
}
}
};

9
Oqtane.Server/wwwroot/js/quill-interop.js
View File

@ -5,10 +5,15 @@ Oqtane.RichTextEditor = {
quillElement, toolBar, readOnly,
placeholder, theme, debugLevel) {
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;
}
var options = {
debug: debugLevel,
@ -22,10 +27,6 @@ Oqtane.RichTextEditor = {
};
new Quill(quillElement, options);
})
.catch(function (pathsNotFound) { });
await loadQuill;
},
getQuillContent: function (editorElement) {
return JSON.stringify(editorElement.__quill.getContents());