Skip to content

Commit cbfa067

Browse files
author
marker dao ®
committed
revert(pg)
1 parent e83890f commit cbfa067

1 file changed

Lines changed: 4 additions & 172 deletions

File tree

‎packages/devextreme/playground/jquery.html‎

Lines changed: 4 additions & 172 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
43
<head>
54
<title>DevExtreme jQuery Example</title>
65

@@ -42,189 +41,22 @@
4241
<script type="text/javascript" src="../artifacts/js/dx.all.debug.js" charset="utf-8"></script>
4342
<script type="text/javascript" src="./themeSelector.js"></script>
4443
<script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>
45-
<style>
46-
.demo-container {
47-
min-width: 720px;
48-
display: flex;
49-
gap: 20px;
50-
}
51-
52-
.chat-container {
53-
display: flex;
54-
flex-grow: 1;
55-
align-items: center;
56-
justify-content: center;
57-
}
58-
59-
.options {
60-
padding: 20px;
61-
display: flex;
62-
flex-direction: column;
63-
min-width: 280px;
64-
background-color: rgba(191, 191, 191, 0.15);
65-
gap: 16px;
66-
}
67-
68-
.dx-chat {
69-
max-width: 480px;
70-
}
71-
72-
.caption {
73-
font-size: var(--dx-font-size-sm);
74-
font-weight: 500;
75-
}
76-
77-
.dx-avatar {
78-
border: 1px solid var(--dx-color-border);
79-
}
80-
</style>
8144
</head>
82-
8345
<body class="dx-surface">
8446
<div role="main">
8547
<h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Test header</h1>
8648

8749
<select id="theme-selector" style="display: block;">
8850
</select>
8951
<br />
90-
91-
<div class="dx-viewport demo-container">
92-
<div class="chat-container">
93-
<div id="chat"></div>
94-
</div>
95-
</div>
96-
52+
<div id="button"></div>
9753
<script>
9854
$(() => {
99-
const customStore = new DevExpress.data.CustomStore({
100-
key: 'id',
101-
load: async () => messages,
102-
insert: async (message) => {
103-
messages.push(message);
104-
return message;
105-
},
106-
});
107-
108-
const dataSource = new DevExpress.data.DataSource({
109-
store: customStore,
110-
paginate: false,
55+
$("#button").dxButton({
56+
text: 'Click me!',
57+
onClick: () => { alert("clicked"); }
11158
});
112-
113-
const chat = $('#chat').dxChat({
114-
// fileUploaderOptions: {},
115-
height: 600,
116-
dataSource,
117-
editing: {
118-
allowUpdating: true,
119-
allowDeleting: true,
120-
},
121-
reloadOnChange: false,
122-
user: currentUser,
123-
onMessageEntered(e) {
124-
const { message } = e;
125-
126-
dataSource.store().push([{
127-
type: 'insert',
128-
data: {
129-
id: new DevExpress.data.Guid(),
130-
...message,
131-
},
132-
}]);
133-
},
134-
onMessageDeleted(e) {
135-
const { message } = e;
136-
137-
dataSource.store().push([{
138-
type: 'update',
139-
key: message.id,
140-
data: { isDeleted: true },
141-
}]);
142-
},
143-
onMessageUpdated(e) {
144-
const { message, text } = e;
145-
146-
dataSource.store().push([{
147-
type: 'update',
148-
key: message.id,
149-
data: { text, isEdited: true },
150-
}]);
151-
},
152-
}).dxChat('instance');
153-
154-
const editingStrategy = {
155-
enabled: true,
156-
disabled: false,
157-
custom: ({ component, message }) => {
158-
const { items, user } = component.option();
159-
const userId = user.id;
160-
161-
const lastNotDeletedMessage = items.findLast(
162-
(item) => item.author?.id === userId && !item.isDeleted
163-
);
164-
165-
return message.id === lastNotDeletedMessage?.id;
166-
},
167-
};
16859
});
169-
170-
171-
const getTimestamp = function (date, offsetMinutes = 0) {
172-
return date.getTime() + offsetMinutes * 60000;
173-
};
174-
175-
const date = new Date();
176-
date.setHours(0, 0, 0, 0);
177-
178-
const currentUser = {
179-
id: 'c94c0e76-fb49-4b9b-8f07-9f93ed93b4f3',
180-
name: 'John Doe',
181-
};
182-
183-
const supportAgent = {
184-
id: 'd16d1a4c-5c67-4e20-b70e-2991c22747c3',
185-
name: 'Support Agent',
186-
avatarUrl: 'https://js.devexpress.com/jQuery/Demos/WidgetsGallery/JSDemos/images/petersmith.png',
187-
};
188-
189-
const messages = [
190-
{
191-
id: new DevExpress.data.Guid(),
192-
timestamp: getTimestamp(date, -9),
193-
author: supportAgent,
194-
text: 'Hello, John!\nHow can I assist you today?',
195-
},
196-
{
197-
id: new DevExpress.data.Guid(),
198-
timestamp: getTimestamp(date, -7),
199-
author: currentUser,
200-
text: "Hi, I'm having trouble accessing my account.",
201-
},
202-
{
203-
id: new DevExpress.data.Guid(),
204-
timestamp: getTimestamp(date, -7),
205-
author: currentUser,
206-
text: 'It says my password is incorrect.',
207-
},
208-
{
209-
id: new DevExpress.data.Guid(),
210-
timestamp: getTimestamp(date, -7),
211-
author: currentUser,
212-
isDeleted: true,
213-
},
214-
{
215-
id: new DevExpress.data.Guid(),
216-
timestamp: getTimestamp(date, -7),
217-
author: supportAgent,
218-
text: 'I can help you with that. Can you please confirm your UserID for security purposes?',
219-
isEdited: true,
220-
},
221-
];
222-
223-
const editingOptions = [
224-
{ text: 'Enabled', key: 'enabled' },
225-
{ text: 'Disabled', key: 'disabled' },
226-
{ text: 'Only the last message (custom)', key: 'custom' },
227-
];
22860
</script>
22961
</div>
23062
</body>

0 commit comments

Comments
 (0)