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

Merge pull request #608 from jimspillane/AddJavaScriptDependencyManager

Browse Source 
Add JavaScript dependency manager
This commit is contained in:
Shaun Walker 2020-06-14 11:00:27 -04:00 committed by GitHub
commit 88e3a9adc3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 56 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
Oqtane.Client/Modules/Controls/RichTextEditor.razor
View File

@ -117,6 +117,11 @@
{ {
if (firstRender) if (firstRender)
{ {
var oqtaneInterop = new Interop(JsRuntime);
await oqtaneInterop.LoadInteropScript("js/quill-interop.js");
var interop = new RichTextEditorInterop(JsRuntime); var interop = new RichTextEditorInterop(JsRuntime);
await interop.CreateEditor( await interop.CreateEditor(

11
Oqtane.Client/Modules/Controls/RichTextEditorInterop.cs
View File

@ -13,7 +13,7 @@ namespace Oqtane.Modules.Controls
_jsRuntime = jsRuntime; _jsRuntime = jsRuntime;
} }
public Task CreateEditor( public async Task CreateEditor(
ElementReference quillElement, ElementReference quillElement,
ElementReference toolbar, ElementReference toolbar,
bool readOnly, bool readOnly,
@ -23,15 +23,14 @@ namespace Oqtane.Modules.Controls
{ {
try try
{ {
_jsRuntime.InvokeAsync<object>( await _jsRuntime.InvokeAsync<object>(
"Oqtane.RichTextEditor.createQuill", "Oqtane.RichTextEditor.createQuill",
quillElement, toolbar, readOnly, quillElement, toolbar, readOnly, placeholder, theme, debugLevel);
placeholder, theme, debugLevel); return;
return Task.CompletedTask;
} }
catch catch
{ {
return Task.CompletedTask; // handle exception
} }
} }

5
Oqtane.Client/Modules/HtmlText/Edit.razor
View File

@ -29,10 +29,7 @@
new Resource { ResourceType = ResourceType.Stylesheet, Url = ModulePath() + "Module.css" }, 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 // 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.bubble.css" },
new Resource { ResourceType = ResourceType.Stylesheet, Url = "css/quill/quill1.3.6.snow.css" }, new Resource { ResourceType = ResourceType.Stylesheet, Url = "css/quill/quill1.3.6.snow.css" }
new Resource { ResourceType = ResourceType.Script, Url = "js/quill1.3.6.min.js" },
new Resource { ResourceType = ResourceType.Script, Url = "js/quill-blot-formatter.min.js" },
new Resource { ResourceType = ResourceType.Script, Url = "js/quill-interop.js" }
}; };
private RichTextEditor RichTextEditorHtml; private RichTextEditor RichTextEditorHtml;

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

@ -234,5 +234,18 @@ namespace Oqtane.UI
return Task.CompletedTask; return Task.CompletedTask;
} }
} }
public async Task LoadInteropScript(string filePath)
{
try
{
await _jsRuntime.InvokeAsync<bool>("Oqtane.Interop.loadInteropScript", filePath);
}
catch
{
// handle exception
}
}
} }
} }

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

@ -16,6 +16,7 @@
<link id="app-manifest" rel="manifest" /> <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="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" /> <link rel="stylesheet" href="css/app.css" />
<script src="js/loadjs.min.js"></script>
</head> </head>
<body> <body>
@(Html.AntiForgeryToken()) @(Html.AntiForgeryToken())

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

@ -321,5 +321,15 @@ Oqtane.Interop = {
setInterval(function () { setInterval(function () {
window.location.href = url; window.location.href = url;
}, wait * 1000); }, wait * 1000);
},
loadInteropScript: async function (filePath) {
const promise = new Promise((resolve, reject) => {
loadjs(filePath, { returnPromise: true })
.then(function () { resolve(true) })
.catch(function (pathsNotFound) { reject(false) });
});
const result = await promise;
return;
} }
}; };

1
Oqtane.Server/wwwroot/js/loadjs.min.js vendored Normal file
View File

@ -0,0 +1 @@
loadjs=function(){var h=function(){},c={},u={},f={};function o(e,n){if(e){var r=f[e];if(u[e]=n,r)for(;r.length;)r[0](e,n),r.splice(0,1)}}function l(e,n){e.call&&(e={success:e}),n.length?(e.error||h)(n):(e.success||h)(e)}function d(r,t,s,i){var c,o,e=document,n=s.async,u=(s.numRetries||0)+1,f=s.before||h,l=r.replace(/[\?|#].*$/,""),a=r.replace(/^(css|img)!/,"");i=i||0,/(^css!|\.css$)/.test(l)?((o=e.createElement("link")).rel="stylesheet",o.href=a,(c="hideFocus"in o)&&o.relList&&(c=0,o.rel="preload",o.as="style")):/(^img!|\.(png|gif|jpg|svg|webp)$)/.test(l)?(o=e.createElement("img")).src=a:((o=e.createElement("script")).src=r,o.async=void 0===n||n),!(o.onload=o.onerror=o.onbeforeload=function(e){var n=e.type[0];if(c)try{o.sheet.cssText.length||(n="e")}catch(e){18!=e.code&&(n="e")}if("e"==n){if((i+=1)<u)return d(r,t,s,i)}else if("preload"==o.rel&&"style"==o.as)return o.rel="stylesheet";t(r,n,e.defaultPrevented)})!==f(r,o)&&e.head.appendChild(o)}function r(e,n,r){var t,s;if(n&&n.trim&&(t=n),s=(t?r:n)||{},t){if(t in c)throw"LoadJS";c[t]=!0}function i(n,r){!function(e,t,n){var r,s,i=(e=e.push?e:[e]).length,c=i,o=[];for(r=function(e,n,r){if("e"==n&&o.push(e),"b"==n){if(!r)return;o.push(e)}--i||t(o)},s=0;s<c;s++)d(e[s],r,n)}(e,function(e){l(s,e),n&&l({success:n,error:r},e),o(t,e)},s)}if(s.returnPromise)return new Promise(i);i()}return r.ready=function(e,n){return function(e,r){e=e.push?e:[e];var n,t,s,i=[],c=e.length,o=c;for(n=function(e,n){n.length&&i.push(e),--o||r(i)};c--;)t=e[c],(s=u[t])?n(t,s):(f[t]=f[t]||[]).push(n)}(e,function(e){l(n,e)}),r},r.done=function(e){o(e,[])},r.reset=function(){c={},u={},f={}},r.isDefined=function(e){return e in c},r}();

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

@ -1,24 +1,31 @@
var Oqtane = Oqtane || {}; var Oqtane = Oqtane || {};
Oqtane.RichTextEditor = { Oqtane.RichTextEditor = {
createQuill: function ( createQuill: async function (
quillElement, toolBar, readOnly, quillElement, toolBar, readOnly,
placeholder, theme, debugLevel) { placeholder, theme, debugLevel) {
Quill.register('modules/blotFormatter', QuillBlotFormatter.default); const loadQuill = loadjs(['js/quill1.3.6.min.js', 'js/quill-blot-formatter.min.js'], 'Quill',
{ async: true, returnPromise: true })
.then(function () { /* foo.js & bar.js loaded */
Quill.register('modules/blotFormatter', QuillBlotFormatter.default);
var options = { var options = {
debug: debugLevel, debug: debugLevel,
modules: { modules: {
toolbar: toolBar, toolbar: toolBar,
blotFormatter: {} blotFormatter: {}
}, },
placeholder: placeholder, placeholder: placeholder,
readOnly: readOnly, readOnly: readOnly,
theme: theme theme: theme
}; };
new Quill(quillElement, options); new Quill(quillElement, options);
})
.catch(function (pathsNotFound) { /* at least one didn't load */ });
await loadQuill;
}, },
getQuillContent: function (editorElement) { getQuillContent: function (editorElement) {
return JSON.stringify(editorElement.__quill.getContents()); return JSON.stringify(editorElement.__quill.getContents());