From b707910a37568a5d9a4af9c15b40f737d1fe8d07 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Wed, 20 Dec 2023 13:41:03 +0330 Subject: [PATCH] feat(butil): add missing members of Document class in Butil #6350 (#6353) --- .../Bit.Butil.Demo/Pages/DocumentPage.razor | 29 ++++- .../Internals/JsInterops/DocumentJsInterop.cs | 67 ++++++++++ .../Internals/JsInterops/ElementJsInterop.cs | 18 +-- src/Butil/Bit.Butil/Publics/Document.cs | 117 +++++++++++++++++- .../Bit.Butil/Publics/Document/CompatMode.cs | 14 +++ .../Bit.Butil/Publics/Document/DesignMode.cs | 14 +++ .../Bit.Butil/Publics/Document/DocumentDir.cs | 14 +++ src/Butil/Bit.Butil/Publics/Element.cs | 4 +- .../Publics/Element/{Dir.cs => ElementDir.cs} | 2 +- src/Butil/Bit.Butil/Scripts/document.ts | 23 ++++ 10 files changed, 282 insertions(+), 20 deletions(-) create mode 100644 src/Butil/Bit.Butil/Internals/JsInterops/DocumentJsInterop.cs create mode 100644 src/Butil/Bit.Butil/Publics/Document/CompatMode.cs create mode 100644 src/Butil/Bit.Butil/Publics/Document/DesignMode.cs create mode 100644 src/Butil/Bit.Butil/Publics/Document/DocumentDir.cs rename src/Butil/Bit.Butil/Publics/Element/{Dir.cs => ElementDir.cs} (94%) create mode 100644 src/Butil/Bit.Butil/Scripts/document.ts diff --git a/src/Butil/Bit.Butil.Demo/Pages/DocumentPage.razor b/src/Butil/Bit.Butil.Demo/Pages/DocumentPage.razor index fea04ea981..da68802089 100644 --- a/src/Butil/Bit.Butil.Demo/Pages/DocumentPage.razor +++ b/src/Butil/Bit.Butil.Demo/Pages/DocumentPage.razor @@ -14,18 +14,33 @@ ... await document.AddEventListener(ButilEvents.Click, args => { ... }); ... + await document.SetTitle("New shinny title"); + ... } -

Open the DevTools and start clicking on page

+
+
+ +

Open the DevTools and start clicking

+ +
+
  +
+
Is Registered: @isRegistered
+
+
-
Is Registered: @isRegistered
+ +
+
+ @code { private bool isRegistered = false; @@ -51,6 +66,16 @@ isRegistered = false; } + private async Task GetTitle() + { + await console.Log("document.title =", await document.GetTitle()); + } + + private async Task GetUrl() + { + await console.Log("document.URL =", await document.GetUrl()); + } + public void Dispose() { if (isRegistered) diff --git a/src/Butil/Bit.Butil/Internals/JsInterops/DocumentJsInterop.cs b/src/Butil/Bit.Butil/Internals/JsInterops/DocumentJsInterop.cs new file mode 100644 index 0000000000..64c2ff85c5 --- /dev/null +++ b/src/Butil/Bit.Butil/Internals/JsInterops/DocumentJsInterop.cs @@ -0,0 +1,67 @@ +using System.Threading.Tasks; +using Microsoft.JSInterop; + +namespace Bit.Butil; + +internal static class DocumentJsInterop +{ + internal static async Task DocumentGetCharacterSet(this IJSRuntime js) + => await js.InvokeAsync("BitButil.document.characterSet"); + + internal static async Task DocumentGetCompatMode(this IJSRuntime js) + { + var mode = await js.InvokeAsync("BitButil.document.compatMode"); + return mode switch + { + "BackCompat" => CompatMode.BackCompat, + _ => CompatMode.CSS1Compat + }; + } + + internal static async Task DocumentGetContentType(this IJSRuntime js) + => await js.InvokeAsync("BitButil.document.contentType"); + + internal static async Task DocumentGetDocumentURI(this IJSRuntime js) + => await js.InvokeAsync("BitButil.document.documentURI"); + + internal static async Task DocumentGetDesignMode(this IJSRuntime js) + { + var mode = await js.InvokeAsync("BitButil.document.getDesignMode"); + return mode switch + { + "on" => DesignMode.On, + _ => DesignMode.Off + }; + } + internal static async Task DocumentSetDesignMode(this IJSRuntime js, DesignMode mode) + => await js.InvokeVoidAsync("BitButil.document.setDesignMode", mode); + + internal static async Task DocumentGetDir(this IJSRuntime js) + { + var mode = await js.InvokeAsync("BitButil.document.getDir"); + return mode switch + { + "rtl" => DocumentDir.Rtl, + _ => DocumentDir.Ltr + }; + } + internal static async Task DocumentSetDir(this IJSRuntime js, DocumentDir dir) + => await js.InvokeVoidAsync("BitButil.document.setDir", dir); + + internal static async Task DocumentGetReferrer(this IJSRuntime js) + => await js.InvokeAsync("BitButil.document.referrer"); + + internal static async Task DocumentGetTitle(this IJSRuntime js) + => await js.InvokeAsync("BitButil.document.getTitle"); + internal static async Task DocumentSetTitle(this IJSRuntime js, string title) + => await js.InvokeVoidAsync("BitButil.document.setTitle", title); + + internal static async Task DocumentGetUrl(this IJSRuntime js) + => await js.InvokeAsync("BitButil.document.URL"); + + internal static async Task DocumentExitFullscreen(this IJSRuntime js) + => await js.InvokeVoidAsync("BitButil.document.exitFullscreen"); + + internal static async Task DocumentExitPointerLock(this IJSRuntime js) + => await js.InvokeVoidAsync("BitButil.document.exitPointerLock"); +} diff --git a/src/Butil/Bit.Butil/Internals/JsInterops/ElementJsInterop.cs b/src/Butil/Bit.Butil/Internals/JsInterops/ElementJsInterop.cs index 4c27bd1dd6..d4a3088226 100644 --- a/src/Butil/Bit.Butil/Internals/JsInterops/ElementJsInterop.cs +++ b/src/Butil/Bit.Butil/Internals/JsInterops/ElementJsInterop.cs @@ -141,24 +141,24 @@ internal static async Task ElementSetContentEditable(this IJSRuntime js, Element internal static async Task ElementIsContentEditable(this IJSRuntime js, ElementReference element) => await js.InvokeAsync("BitButil.element.isContentEditable", element); - internal static async Task ElementGetDir(this IJSRuntime js, ElementReference element) + internal static async Task ElementGetDir(this IJSRuntime js, ElementReference element) { var value = await js.InvokeAsync("BitButil.element.getDir", element); return value switch { - "ltr" => Dir.Ltr, - "rtl" => Dir.Rtl, - "auto" => Dir.Auto, - _ => Dir.NotSet, + "ltr" => ElementDir.Ltr, + "rtl" => ElementDir.Rtl, + "auto" => ElementDir.Auto, + _ => ElementDir.NotSet, }; } - internal static async Task ElementSetDir(this IJSRuntime js, ElementReference element, Dir value) + internal static async Task ElementSetDir(this IJSRuntime js, ElementReference element, ElementDir value) { var v = value switch { - Dir.Ltr => "ltr", - Dir.Rtl => "rtl", - Dir.Auto => "auto", + ElementDir.Ltr => "ltr", + ElementDir.Rtl => "rtl", + ElementDir.Auto => "auto", _ => "", }; await js.InvokeVoidAsync("BitButil.element.setDir", element, v); diff --git a/src/Butil/Bit.Butil/Publics/Document.cs b/src/Butil/Bit.Butil/Publics/Document.cs index d2838034f6..eb369096b6 100644 --- a/src/Butil/Bit.Butil/Publics/Document.cs +++ b/src/Butil/Bit.Butil/Publics/Document.cs @@ -14,12 +14,117 @@ public async Task AddEventListener( bool useCapture = false, bool preventDefault = false, bool stopPropagation = false) - { - await DomEventDispatcher.AddEventListener(js, ElementName, domEvent, listener, useCapture, preventDefault, stopPropagation); - } + => await DomEventDispatcher.AddEventListener(js, ElementName, domEvent, listener, useCapture, preventDefault, stopPropagation); public async Task RemoveEventListener(string domEvent, Action listener, bool useCapture = false) - { - await DomEventDispatcher.RemoveEventListener(js, ElementName, domEvent, listener, useCapture); - } + => await DomEventDispatcher.RemoveEventListener(js, ElementName, domEvent, listener, useCapture); + + /// + /// Returns the character set being used by the document. + ///
+ /// https://developer.mozilla.org/en-US/docs/Web/API/Document/characterSet + /// + public async Task GetCharacterSet() + => await js.DocumentGetCharacterSet(); + + /// + /// Indicates whether the document is rendered in quirks or strict mode. + ///
+ /// https://developer.mozilla.org/en-US/docs/Web/API/Document/compatMode + /// + public async Task GetCompatMode() + => await js.DocumentGetCompatMode(); + + /// + /// Returns the Content-Type from the MIME Header of the current document. + ///
+ /// https://developer.mozilla.org/en-US/docs/Web/API/Document/contentType + /// + public async Task GetContentType() + => await js.DocumentGetContentType(); + + /// + /// Returns the document location as a string. + ///
+ /// https://developer.mozilla.org/en-US/docs/Web/API/Document/documentURI + /// + public async Task GetDocumentURI() + => await js.DocumentGetDocumentURI(); + + /// + /// Gets ability to edit the whole document. + ///
+ /// https://developer.mozilla.org/en-US/docs/Web/API/Document/designMode + /// + public async Task GetDesignMode() + => await js.DocumentGetDesignMode(); + /// + /// Sets ability to edit the whole document. + ///
+ /// https://developer.mozilla.org/en-US/docs/Web/API/Document/designMode + /// + public async Task SetDesignMode(DesignMode mode) + => await js.DocumentSetDesignMode(mode); + + /// + /// Gets directionality (rtl/ltr) of the document. + ///
+ /// https://developer.mozilla.org/en-US/docs/Web/API/Document/dir + /// + public async Task GetDir() + => await js.DocumentGetDir(); + /// + /// Sets directionality (rtl/ltr) of the document. + ///
+ /// https://developer.mozilla.org/en-US/docs/Web/API/Document/dir + /// + public async Task SetDir(DocumentDir dir) + => await js.DocumentSetDir(dir); + + /// + /// Returns the URI of the page that linked to this page. + ///
+ /// https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer + /// + public async Task GetReferrer() + => await js.DocumentGetReferrer(); + + /// + /// Gets the title of the current document. + ///
+ /// https://developer.mozilla.org/en-US/docs/Web/API/Document/title + /// + public async Task GetTitle() + => await js.DocumentGetTitle(); + /// + /// Sets the title of the current document. + ///
+ /// https://developer.mozilla.org/en-US/docs/Web/API/Document/title + /// + public async Task SetTitle(string title) + => await js.DocumentSetTitle(title); + + /// + /// Returns the document location as a string. + ///
+ /// https://developer.mozilla.org/en-US/docs/Web/API/Document/URL + /// + public async Task GetUrl() + => await js.DocumentGetUrl(); + + /// + /// Stops document's fullscreen element from being displayed fullscreen. + ///
+ /// https://developer.mozilla.org/en-US/docs/Web/API/Document/exitFullscreen + /// + public async Task ExitFullscreen() + => await js.DocumentExitFullscreen(); + + /// + /// Release the pointer lock. + ///
+ /// https://developer.mozilla.org/en-US/docs/Web/API/Document/exitPointerLock + /// + public async Task ExitPointerLock() + => await js.DocumentExitPointerLock(); } diff --git a/src/Butil/Bit.Butil/Publics/Document/CompatMode.cs b/src/Butil/Bit.Butil/Publics/Document/CompatMode.cs new file mode 100644 index 0000000000..8bfd31a0ab --- /dev/null +++ b/src/Butil/Bit.Butil/Publics/Document/CompatMode.cs @@ -0,0 +1,14 @@ +namespace Bit.Butil; + +public enum CompatMode +{ + /// + /// The document is in quirks mode. + /// + BackCompat, + + /// + /// The document is in no-quirks (also known as "standards") mode or limited-quirks (also known as "almost standards") mode. + /// + CSS1Compat +} diff --git a/src/Butil/Bit.Butil/Publics/Document/DesignMode.cs b/src/Butil/Bit.Butil/Publics/Document/DesignMode.cs new file mode 100644 index 0000000000..9e17ed7928 --- /dev/null +++ b/src/Butil/Bit.Butil/Publics/Document/DesignMode.cs @@ -0,0 +1,14 @@ +namespace Bit.Butil; + +public enum DesignMode +{ + /// + /// The document's design mode is off (default). + /// + Off, + + /// + /// The document is in design mode and the entire document is editable. + /// + On +} diff --git a/src/Butil/Bit.Butil/Publics/Document/DocumentDir.cs b/src/Butil/Bit.Butil/Publics/Document/DocumentDir.cs new file mode 100644 index 0000000000..aa2cdfa13b --- /dev/null +++ b/src/Butil/Bit.Butil/Publics/Document/DocumentDir.cs @@ -0,0 +1,14 @@ +namespace Bit.Butil; + +public enum DocumentDir +{ + /// + /// Left to right (default). + /// + Ltr, + + /// + /// Right to left. + /// + Rtl +} diff --git a/src/Butil/Bit.Butil/Publics/Element.cs b/src/Butil/Bit.Butil/Publics/Element.cs index 0a3cf2b4aa..1a65379bdb 100644 --- a/src/Butil/Bit.Butil/Publics/Element.cs +++ b/src/Butil/Bit.Butil/Publics/Element.cs @@ -293,12 +293,12 @@ public async Task IsContentEditable(ElementReference element) /// /// The HTMLElement.dir property gets or sets the text writing directionality of the content of the current element. /// - public async Task GetDir(ElementReference element) + public async Task GetDir(ElementReference element) => await js.ElementGetDir(element); /// /// The HTMLElement.dir property gets or sets the text writing directionality of the content of the current element. /// - public async Task SetDir(ElementReference element, Dir value) + public async Task SetDir(ElementReference element, ElementDir value) => await js.ElementSetDir(element, value); /// diff --git a/src/Butil/Bit.Butil/Publics/Element/Dir.cs b/src/Butil/Bit.Butil/Publics/Element/ElementDir.cs similarity index 94% rename from src/Butil/Bit.Butil/Publics/Element/Dir.cs rename to src/Butil/Bit.Butil/Publics/Element/ElementDir.cs index 3c2363cc9b..2971a1c26c 100644 --- a/src/Butil/Bit.Butil/Publics/Element/Dir.cs +++ b/src/Butil/Bit.Butil/Publics/Element/ElementDir.cs @@ -1,6 +1,6 @@ namespace Bit.Butil; -public enum Dir +public enum ElementDir { /// /// The dir value is not set. diff --git a/src/Butil/Bit.Butil/Scripts/document.ts b/src/Butil/Bit.Butil/Scripts/document.ts new file mode 100644 index 0000000000..2e57efb794 --- /dev/null +++ b/src/Butil/Bit.Butil/Scripts/document.ts @@ -0,0 +1,23 @@ +var BitButil = BitButil || {}; + +(function (butil: any) { + const _handlers = {}; + + butil.document = { + characterSet() { return document.characterSet }, + compatMode() { return document.compatMode }, + contentType() { return document.contentType }, + documentURI() { return document.documentURI }, + getDesignMode() { return document.designMode }, + setDesignMode(value: string) { document.designMode = value }, + getDir() { return document.dir }, + setDir(value: string) { document.dir = value }, + referrer() { return document.referrer }, + getTitle() { return document.title }, + URL() { return document.URL }, + setTitle(value: string) { document.title = value }, + exitFullscreen() { return document.exitFullscreen() }, + exitPointerLock() { return document.exitPointerLock() }, + + }; +}(BitButil)); \ No newline at end of file