Skip to content

Commit a355577

Browse files
johnsonmonoharjohnsonmonohar
authored
Merge pull request #2805 from syncfusion-content/875662-hotfix
875662: Custom context menu, organise pdf, Open and close the bookmark pane and render event features documentation.
2 parents 8a9050c + 424ed45 commit a355577

12 files changed

+1499
-12
lines changed

‎ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/accessibility.md

Lines changed: 124 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: Accessibility with EJ2 ASP.NET MVC PDF Viewer | Syncfusion
44
description: Learn here all about accessibility in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more.
55
platform: ej2-asp-core-mvc
66
control: PDF Viewer
7-
publishingplatform: ej2-asp-core-mvc
7+
publishingplatform: ##Platform_Name##
88
documentation: ug
99
---
1010

@@ -65,10 +65,13 @@ The PDF Viewer component followed the [keyboard interaction](https://www.w3.org/
6565
| **Press (Windows)** |**Press (Macintosh)** | **To do this** |
6666
| --- | --- | --- |
6767
|||**Shortcuts for page navigation**|
68-
| <kbd>Home</kbd> | <kbd>Function + Left arrow</kbd> |Navigate to the first page |
69-
| <kbd>End</kbd> |<kbd>Function + Right arrow</kbd> |Navigate to the last page |
70-
|<kbd>Up Arrow</kbd> |<kbd>Up Arrow</kbd> |Navigate to the previous page|
71-
| <kbd>Down Arrow</kbd> | <kbd>Down Arrow</kbd> | Navigate to the next page |
68+
| <kbd>CONTROL + Left Arrow (or) CONTROL + Up Arrow</kbd> | <kbd>COMMAND + Left Arrow (or) COMMAND + Up Arrow </kbd> |Navigate to the first page |
69+
| <kbd>CONTROL + Right Arrow (or) CONTROL + Down Arrow</kbd> |<kbd>COMMAND + Right Arrow (or) COMMAND + Down Arrow</kbd> |Navigate to the last page |
70+
|<kbd>Left Arrow</kbd> |<kbd> Left Arrow (or) Shift + Space </kbd> |Navigate to the previous page|
71+
| <kbd>Right Arrow</kbd> | <kbd>Right Arrow (or) Space</kbd> | Navigate to the next page |
72+
| <kbd>CONTROL + G</kbd> | <kbd>COMMAND + G</kbd> | Go To The Page|
73+
|<kbd>Up Arrow</kbd> |<kbd>Up Arrow </kbd> |Scroll up|
74+
| <kbd>Down Arrow</kbd> | <kbd>Down Arrow</kbd> | Scroll down|
7275
|||**Shortcuts for Zooming**|
7376
|<kbd>CONTROL + =</kbd> |<kbd>COMMAND + =</kbd> | Perform zoom-in operation |
7477
| <kbd>CONTROL + -</kbd> | <kbd>COMMAND + -</kbd> | Perform zoom-out operation |
@@ -82,8 +85,123 @@ The PDF Viewer component followed the [keyboard interaction](https://www.w3.org/
8285
|||**Shortcuts for the general operation**|
8386
| <kbd>CONTROL + Z</kbd> | <kbd>CONTROL + Z</kbd> |Undo the action|
8487
|<kbd>CONTROL + Y</kbd> |<kbd>CONTROL + Y</kbd> |Redo the action|
85-
| <kbd>CONTROL + P</kbd> | <kbd>CONTROL + P</kbd> |Print the document|
88+
| <kbd>CONTROL + P</kbd> | <kbd>COMMAND + P</kbd> |Print the document|
8689
|<kbd>Delete</kbd> |<kbd>Delete</kbd> |Delete the annotations and form fields|
90+
|<kbd>CONTROL + Shift + A</kbd> |<kbd>COMMAND + Shift + A</kbd> |Toggle Annotation Toolbar|
91+
|<kbd>CONTROL + Alt + 0</kbd> |<kbd>COMMAND + Option + 0</kbd> |Show Command panel|
92+
|<kbd>CONTROL + Alt + 2</kbd> |<kbd>COMMAND + Option + 2</kbd> |Show Bookmarks|
93+
|<kbd>CONTROL + Alt + 1</kbd> |<kbd>COMMAND + Option + 1</kbd> |Show Thumbnails|
94+
|<kbd>CONTROL + S</kbd> |<kbd>COMMAND + S</kbd> |Download|
95+
|<kbd>Shift + H</kbd> |<kbd>Shift + H</kbd> |Enable pan mode|
96+
|<kbd>Shift + V</kbd> |<kbd>Shift + V</kbd> |Enable text selection mode|
97+
98+
The current implementation of our PDF Viewer includes keyboard shortcuts for various functions like scrolling, zooming, text search, printing, and annotation deletion.
99+
100+
To enhance user experience, we're adding additional keyboard shortcuts for actions such as navigating between pages, accessing specific pages, toggling annotation tools, and displaying PDF elements like outlines, annotations, bookmarks, and thumbnails.
101+
102+
To support this, we're introducing a new class called **commandManager**, which handles custom commands triggered by specific key gestures. These custom commands will be defined by users and executed accordingly.
103+
104+
The **commandManager** will have a parameter called Commands, which will hold the collection of custom keyboard commands specified by users. Each custom command will be represented by a KeyboardCommand class, containing the `command name` and associated `keyboard combination`.
105+
106+
Additionally, we're introducing the **keyboardCustomCommands** parameter for the CommandManager, which will utilize the EventCallback to handle keyboard events and trigger appropriate methods when specific key combinations are pressed.
107+
108+
{% tabs %}
109+
{% highlight html tabtitle="Standalone" %}
110+
111+
<div style="width:100%;height:600px">
112+
@Html.EJS().PdfViewer("pdfviewer").EnablePrint(true).DocumentLoad("print").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").CommandManager("commandManager").Render()
113+
</div>
114+
115+
<script>
116+
function commandManager() {
117+
keyboardCommand: [{
118+
name: 'customCopy',
119+
gesture: {
120+
pdfKeys: PdfKeys.G,
121+
modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt
122+
}
123+
},
124+
{
125+
name: 'customPaste',
126+
gesture: {
127+
pdfKeys: PdfKeys.H,
128+
modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt
129+
}
130+
},
131+
{
132+
name: 'customCut',
133+
gesture: {
134+
pdfKeys: PdfKeys.Z,
135+
modifierKeys: ModifierKeys.Control
136+
}
137+
},
138+
{
139+
name: 'customSelectAll',
140+
gesture: {
141+
pdfKeys: PdfKeys.E,
142+
modifierKeys: ModifierKeys.Control
143+
}
144+
},
145+
]
146+
}
147+
</script>
148+
149+
{% endhighlight %}
150+
{% highlight html tabtitle="Server-Backed" %}
151+
152+
<div style="width:100%;height:600px">
153+
@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnablePrint(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").CommandManager("commandManager").Render()
154+
</div>
155+
156+
<script>
157+
function commandManager() {
158+
keyboardCommand: [{
159+
name: 'customCopy',
160+
gesture: {
161+
pdfKeys: PdfKeys.G,
162+
modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt
163+
}
164+
},
165+
{
166+
name: 'customPaste',
167+
gesture: {
168+
pdfKeys: PdfKeys.H,
169+
modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt
170+
}
171+
},
172+
{
173+
name: 'customCut',
174+
gesture: {
175+
pdfKeys: PdfKeys.Z,
176+
modifierKeys: ModifierKeys.Control
177+
}
178+
},
179+
{
180+
name: 'customSelectAll',
181+
gesture: {
182+
pdfKeys: PdfKeys.E,
183+
modifierKeys: ModifierKeys.Control
184+
}
185+
},
186+
]
187+
}
188+
</script>
189+
190+
{% endhighlight %}
191+
{% endtabs %}
192+
193+
Each `keyboardCommand` object consists of a name property, specifying the `name` of the `custom command`, and a `gesture property`, defining the key gesture associated with the command.
194+
195+
For example, the first command named `customCopy` is associated with the **G** key and requires both the **Shift** and **Alt** modifier keys to be pressed simultaneously.
196+
197+
Additionally, there's an explanation of the key modifiers used in the gestures:
198+
199+
* Ctrl corresponds to the Control key, represented by the value `1`.
200+
* Alt corresponds to the Alt key, represented by the value `2`.
201+
* Shift corresponds to the Shift key, represented by the value `4`.
202+
* Meta corresponds to the Command key on macOS or the Windows key on Windows, represented by the value `8`.
203+
204+
This setup allows users to perform custom actions within the PDF viewer by pressing specific key combinations, enhancing the user experience and providing more efficient navigation and interaction options.
87205

88206
## Ensuring accessibility
89207

0 commit comments

Comments
 (0)