This repository was archived by the owner on Jul 30, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathkeyboard-interaction.js
More file actions
160 lines (160 loc) · 10.7 KB
/
keyboard-interaction.js
File metadata and controls
160 lines (160 loc) · 10.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ej2_react_schedule_1 = require("@syncfusion/ej2-react-schedule");
var datasource_1 = require("./datasource");
require("./schedule-component.css");
var ej2_base_1 = require("@syncfusion/ej2-base");
var sample_base_1 = require("../common/sample-base");
/**
* Schedule keyboard interaction sample
*/
var KeyboardInteraction = (function (_super) {
__extends(KeyboardInteraction, _super);
function KeyboardInteraction() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.data = ej2_base_1.extend([], datasource_1.zooEventsData, null, true);
return _this;
}
KeyboardInteraction.prototype.onEventRendered = function (args) {
datasource_1.applyCategoryColor(args, this.scheduleObj.currentView);
};
KeyboardInteraction.prototype.rendereComplete = function () {
document.body.addEventListener('keydown', function (e) {
var scheduleElement = document.getElementById('schedule');
if (e.altKey && e.keyCode === 74 && scheduleElement) {
scheduleElement.focus();
}
});
};
KeyboardInteraction.prototype.render = function () {
var _this = this;
return (React.createElement("div", { className: 'schedule-control-section' },
React.createElement("div", { className: 'col-lg-12 control-section' },
React.createElement("div", { className: 'control-wrapper' },
React.createElement(ej2_react_schedule_1.ScheduleComponent, { id: 'schedule', width: '100%', height: '650px', selectedDate: new Date(2018, 1, 15), ref: function (t) { return _this.scheduleObj = t; }, eventSettings: { dataSource: this.data }, eventRendered: this.onEventRendered.bind(this) },
React.createElement(ej2_react_schedule_1.Inject, { services: [ej2_react_schedule_1.Day, ej2_react_schedule_1.Week, ej2_react_schedule_1.WorkWeek, ej2_react_schedule_1.Month, ej2_react_schedule_1.Agenda, ej2_react_schedule_1.Resize, ej2_react_schedule_1.DragAndDrop] })))),
React.createElement("div", { id: 'action-description' },
React.createElement("p", null, "This demo showcases the keyboard shortcuts applicable on Schedule and also lists out in below description, how those applicable shortcuts interacts with Schedule actions.")),
React.createElement("div", { id: 'description' },
React.createElement("p", null,
"All the Schedule actions can be controlled via keyboard keys and is availed by using",
React.createElement("code", null, "allowKeyboardInteraction"),
" property which is set to true by default. The applicable key combinations and its relative functionalities are listed below."),
React.createElement("table", { style: { width: '100%' } },
React.createElement("tr", null,
React.createElement("th", { style: { width: '200px' } },
React.createElement("strong", null, "Keys")),
React.createElement("th", null,
React.createElement("strong", null, "Description"))),
React.createElement("tr", null,
React.createElement("td", { style: { padding: '4px 0' } },
React.createElement("kbd", null, "Alt"),
" +",
React.createElement("kbd", null, "j")),
React.createElement("td", null, "Focuses the Schedule [Provided from application end].")),
React.createElement("tr", null,
React.createElement("td", { style: { padding: '4px 0' } },
React.createElement("kbd", null, "Tab")),
React.createElement("td", null, "Focuses the first or active item on the schedule header bar and then move the focus to the next available event elements. If no events present, then focus moves out of the component.")),
React.createElement("tr", null,
React.createElement("td", { style: { padding: '4px 0' } },
React.createElement("kbd", null, "Shift"),
" +",
React.createElement("kbd", null, "Tab")),
React.createElement("td", null, "Reverse focusing of the Tab functionality. Inverse focusing of event elements from the last one and then move onto the first or active item on Schedule header bar and then moves out of the component.")),
React.createElement("tr", null,
React.createElement("td", { style: { padding: '4px 0' } },
React.createElement("kbd", null, "Enter"),
" key"),
React.createElement("td", null, "Opens the quick popup on the selected cells or events.")),
React.createElement("tr", null,
React.createElement("td", { style: { padding: '4px 0' } },
React.createElement("kbd", null, "Escape"),
" key"),
React.createElement("td", null, "Closes any of the popup that are in open state.")),
React.createElement("tr", null,
React.createElement("td", { style: { padding: '4px 0' } },
React.createElement("kbd", null, "Arrow"),
" keys"),
React.createElement("td", null, "To move onto the next available cells in either of the needed directions (left, right, top and right)")),
React.createElement("tr", null,
React.createElement("td", { style: { padding: '4px 0' } },
React.createElement("kbd", null, "Shift"),
" +",
React.createElement("kbd", null, " Arrow"),
" keys"),
React.createElement("td", null, "For multiple cell selection on either direction.")),
React.createElement("tr", null,
React.createElement("td", { style: { padding: '4px 0' } },
React.createElement("kbd", null, "Delete"),
" key"),
React.createElement("td", null, "Deletes one or more selected events.")),
React.createElement("tr", null,
React.createElement("td", { style: { padding: '4px 0' } },
React.createElement("kbd", null, "Ctrl"),
" +",
React.createElement("kbd", null, "Click"),
" on events"),
React.createElement("td", null, "To select multiple events.")),
React.createElement("tr", null,
React.createElement("td", { style: { padding: '4px 0' } },
React.createElement("kbd", null, "Alt"),
" +",
React.createElement("kbd", null, "Number"),
" keys (from 1 to 6)"),
React.createElement("td", null, "To switch between the views on Schedule.")),
React.createElement("tr", null,
React.createElement("td", { style: { padding: '4px 0' } },
React.createElement("kbd", null, "Ctrl"),
" +",
React.createElement("kbd", null, "Left Arrow"),
" keys"),
React.createElement("td", null, "To navigate to the previous date period.")),
React.createElement("tr", null,
React.createElement("td", { style: { padding: '4px 0' } },
React.createElement("kbd", null, "Ctrl"),
" +",
React.createElement("kbd", null, "Right Arrow"),
" keys"),
React.createElement("td", null, "To navigate to the next date period.")),
React.createElement("tr", null,
React.createElement("td", { style: { padding: '4px 0' } },
React.createElement("kbd", null, "Left"),
" or",
React.createElement("kbd", null, "Right Arrow"),
" keys"),
React.createElement("td", null, "On pressing any of these keys when focus is currently on the Schedule header bar, moves the focus to the previous or next items in the header bar.")),
React.createElement("tr", null,
React.createElement("td", { style: { padding: '4px 0' } },
React.createElement("kbd", null, "Space"),
" or",
React.createElement("kbd", null, "Enter"),
" keys"),
React.createElement("td", null, "It activates any of the focused items.")),
React.createElement("tr", null,
React.createElement("td", { style: { padding: '4px 0' } },
React.createElement("kbd", null, "Page Up"),
" &",
React.createElement("kbd", null, "Page Down"),
" keys"),
React.createElement("td", null, "To scroll through the work cells area.")),
React.createElement("tr", null,
React.createElement("td", { style: { padding: '4px 0' } },
React.createElement("kbd", null, "Home"),
" key"),
React.createElement("td", null, "To move the selection to the first cell of Schedule."))))));
};
return KeyboardInteraction;
}(sample_base_1.SampleBase));
exports.KeyboardInteraction = KeyboardInteraction;