├── README.md
├── cl_chat.lua
├── config.lua
├── fxmanifest.lua
├── html
├── css
│ └── style.css
├── index.html
├── js
│ ├── App.js
│ ├── Message.js
│ ├── Suggestions.js
│ └── config.default.js
└── vendor
│ ├── animate.3.5.2.min.css
│ ├── flexboxgrid.6.3.1.min.css
│ └── vue.2.3.3.min.js
└── sv_chat.lua
/README.md:
--------------------------------------------------------------------------------
1 | # EF Chat
2 |
3 | 
4 |
5 |
6 |
7 |
8 | Drag & Drop to your Resource folder
9 |
10 |
11 |
12 |
13 | delete the chat folder from
14 | \resources\[cfx-default]\[gameplay]
15 |
16 |
17 |
18 | # Tebex
19 |
20 | [Tebex](https://ef-development.tebex.io/)
21 |
22 | # Discord
23 |
24 | [Discord](https://discord.gg/ef-development-tm-936207653145833503)
25 |
--------------------------------------------------------------------------------
/cl_chat.lua:
--------------------------------------------------------------------------------
1 | local chatInputActive = false
2 | local chatInputActivating = false
3 | local chatHidden = true
4 | local chatLoaded = false
5 |
6 | RegisterNetEvent('chatMessage')
7 | RegisterNetEvent('chat:addTemplate')
8 | RegisterNetEvent('chat:addMessage')
9 | RegisterNetEvent('chat:addSuggestion')
10 | RegisterNetEvent('chat:addSuggestions')
11 | RegisterNetEvent('chat:removeSuggestion')
12 | -- RegisterNetEvent('chat:clear')
13 | RegisterNetEvent('__cfx_internal:serverPrint')
14 | RegisterNetEvent('_chat:messageEntered')
15 |
16 | AddEventHandler('chatMessage', function(author, ctype, text)
17 | local args = {text}
18 | if author ~= "" then table.insert(args, 1, author) end
19 | local ctype = ctype ~= false and ctype or "normal"
20 | SendNUIMessage({
21 | type = 'ON_MESSAGE',
22 | message = {
23 | template = '',
25 | args = {author, text}
26 | }
27 | })
28 | end)
29 |
30 | AddEventHandler('__cfx_internal:serverPrint', function(msg)
31 | SendNUIMessage({
32 | type = 'ON_MESSAGE',
33 | message = {templateId = 'print', multiline = true, args = {msg}}
34 | })
35 | end)
36 |
37 | AddEventHandler('chat:addMessage', function(message)
38 | SendNUIMessage({type = 'ON_MESSAGE', message = message})
39 | end)
40 |
41 | print('EF-Chat Made By: [EF Development] BlasterSuraj')
42 |
43 | AddEventHandler('chat:addSuggestion', function(name, help, params)
44 | SendNUIMessage({
45 | type = 'ON_SUGGESTION_ADD',
46 | suggestion = {name = name, help = help, params = params or nil}
47 | })
48 | local hasSlash = string.find(name, '/')
49 | if hasSlash then
50 | local nameWithoutSlash = string.gsub(name, '/', '')
51 | SendNUIMessage({
52 | type = 'ON_SUGGESTION_ADD',
53 | suggestion = {
54 | name = nameWithoutSlash,
55 | help = help,
56 | params = params or nil
57 | }
58 | })
59 | end
60 | end)
61 |
62 | AddEventHandler('chat:addSuggestions', function(suggestions)
63 | for _, suggestion in ipairs(suggestions) do
64 | SendNUIMessage({type = 'ON_SUGGESTION_ADD', suggestion = suggestion})
65 |
66 | local hasSlash = string.find(suggestion.name, '/')
67 | if hasSlash then
68 | local nameWithoutSlash = string.gsub(suggestion.name, '/', '')
69 | SendNUIMessage({
70 | type = 'ON_SUGGESTION_ADD',
71 | suggestion = {
72 | name = nameWithoutSlash,
73 | help = suggestion.help,
74 | params = suggestion.params or nil
75 | }
76 | })
77 | end
78 | end
79 | end)
80 |
81 | AddEventHandler('chat:removeSuggestion', function(name)
82 | SendNUIMessage({type = 'ON_SUGGESTION_REMOVE', name = name})
83 |
84 | local hasSlash = string.find(name, '/')
85 | if hasSlash then
86 | local nameWithoutSlash = string.gsub(name, '/', '')
87 | SendNUIMessage({type = 'ON_SUGGESTION_REMOVE', name = nameWithoutSlash})
88 | end
89 | end)
90 |
91 | AddEventHandler('chat:addTemplate', function(id, html)
92 | SendNUIMessage({type = 'ON_TEMPLATE_ADD', template = {id = id, html = html}})
93 | end)
94 |
95 | -- AddEventHandler('chat:clear',
96 | -- function(name) SendNUIMessage({type = 'ON_CLEAR'}) end)
97 |
98 |
99 |
100 |
101 |
102 | RegisterNUICallback('chatResult', function(data, cb)
103 | chatInputActive = false
104 | SetNuiFocus(false, false)
105 |
106 | if not data.canceled then
107 |
108 | if data.message:sub(1, 1) == '/' then
109 | ExecuteCommand(data.message:sub(2))
110 | else
111 | ExecuteCommand(data.message:sub(1))
112 | end
113 | end
114 |
115 | cb('ok')
116 | end)
117 |
118 | RegisterNetEvent('chat:clear')
119 | AddEventHandler("chat:clear", function(data)
120 | SendNUIMessage({
121 | action = "clear"
122 | })
123 | end)
124 |
125 | local function refreshCommands()
126 | if GetRegisteredCommands then
127 | local registeredCommands = GetRegisteredCommands()
128 |
129 | local suggestions = {}
130 |
131 | for _, command in ipairs(registeredCommands) do
132 | if IsAceAllowed(('command.%s'):format(command.name)) then
133 | -- Check if the command name contains "/"
134 | local hasSlash = string.find(command.name, '/')
135 |
136 | -- Add command without '/' prefix
137 | table.insert(suggestions, {name = command.name, help = ''})
138 |
139 | -- Add command with '/' prefix if it doesn't already contain '/'
140 | if not hasSlash then
141 | table.insert(suggestions, {name = '/' .. command.name, help = ''})
142 | end
143 | end
144 | end
145 |
146 | TriggerEvent('chat:addSuggestions', suggestions)
147 | end
148 | end
149 |
150 | local function refreshThemes()
151 | local themes = {}
152 |
153 | for resIdx = 0, GetNumResources() - 1 do
154 | local resource = GetResourceByFindIndex(resIdx)
155 |
156 | if GetResourceState(resource) == 'started' then
157 | local numThemes = GetNumResourceMetadata(resource, 'chat_theme')
158 |
159 | if numThemes > 0 then
160 | local themeName = GetResourceMetadata(resource, 'chat_theme')
161 | local themeData = json.decode(
162 | GetResourceMetadata(resource,
163 | 'chat_theme_extra') or
164 | 'null')
165 |
166 | if themeName and themeData then
167 | themeData.baseUrl = 'nui://' .. resource .. '/'
168 | themes[themeName] = themeData
169 | end
170 | end
171 | end
172 | end
173 |
174 | SendNUIMessage({type = 'ON_UPDATE_THEMES', themes = themes})
175 | end
176 |
177 | AddEventHandler('onClientResourceStart', function(resName)
178 | Wait(500)
179 | refreshCommands()
180 | refreshThemes()
181 | end)
182 |
183 | AddEventHandler('onClientResourceStop', function(resName)
184 | Wait(500)
185 | refreshCommands()
186 | refreshThemes()
187 | end)
188 |
189 | RegisterNUICallback('loaded', function(data, cb)
190 | TriggerServerEvent('chat:init')
191 | refreshCommands()
192 | refreshThemes()
193 | chatLoaded = true
194 | cb('ok')
195 | end)
196 |
197 | RegisterKeyMapping('chatopen', 'Opens Chat Window', 'keyboard', 't')
198 | RegisterCommand('chatopen', function()
199 | SetTextChatEnabled(false)
200 | SetNuiFocus(false, false)
201 | if not chatInputActive then
202 | chatInputActive = true
203 | chatInputActivating = true
204 |
205 | SendNUIMessage({type = 'ON_OPEN'})
206 | end
207 |
208 | if chatInputActivating then
209 | SetNuiFocus(true)
210 | chatInputActivating = false
211 | end
212 |
213 | if chatLoaded then
214 | local shouldBeHidden = false
215 |
216 | if IsScreenFadedOut() or IsPauseMenuActive() then
217 | shouldBeHidden = true
218 | end
219 |
220 | if (shouldBeHidden and not chatHidden) or
221 | (not shouldBeHidden and chatHidden) then
222 | chatHidden = shouldBeHidden
223 |
224 | SendNUIMessage({
225 | type = 'ON_SCREEN_STATE_CHANGE',
226 | shouldHide = shouldBeHidden
227 | })
228 | end
229 | end
230 | end)
231 |
232 |
233 |
--------------------------------------------------------------------------------
/config.lua:
--------------------------------------------------------------------------------
1 | Config = {}
2 |
--------------------------------------------------------------------------------
/fxmanifest.lua:
--------------------------------------------------------------------------------
1 | fx_version 'bodacious'
2 | game 'gta5'
3 | lua54 'yes'
4 |
5 | author 'BlasterrSuraj'
6 | description 'Chat UI EF Development'
7 | discord 'https://discord.gg/ef-development-tm-936207653145833503'
8 | tebex 'http://ef-development.tebex.io/'
9 |
10 | ui_page 'html/index.html'
11 |
12 | -- client_script 'cl_chat.lua'
13 | shared_script 'config.lua'
14 |
15 | client_scripts {
16 | 'cl_chat.lua'
17 | }
18 |
19 | server_script 'sv_chat.lua'
20 |
21 | files {
22 | 'html/index.html',
23 | 'html/css/style.css',
24 | 'html/js/config.default.js',
25 | 'html/js/App.js',
26 | 'html/js/Message.js',
27 | 'html/js/Suggestions.js',
28 | 'html/vendor/vue.2.3.3.min.js',
29 | 'html/vendor/flexboxgrid.6.3.1.min.css',
30 | 'html/vendor/animate.3.5.2.min.css',
31 | }
32 |
33 | escrow_ignore {
34 | 'config.lua',
35 | 'sv_chat.lua',
36 | 'cl_chat.lua',
37 | }
38 |
--------------------------------------------------------------------------------
/html/css/style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;500;600;700&display=swap");
2 | @import url("https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&display=swap");
3 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap");
4 | @import url('https://fonts.googleapis.com/css2?family=Saira&display=swap');
5 | @import url('https://fonts.googleapis.com/css2?family=Saira&family=Salsa&display=swap');
6 |
7 | .color-0 {
8 | color: #ffffff;
9 | }
10 | .color-1 {
11 | color: #ff4444;
12 | }
13 | .color-2 {
14 | color: #99cc00;
15 | }
16 | .color-3 {
17 | color: #ffbb33;
18 | }
19 | .color-4 {
20 | color: #0099cc;
21 | }
22 | .color-5 {
23 | color: #33b5e5;
24 | }
25 | .color-6 {
26 | color: #aa66cc;
27 | }
28 | .color-8 {
29 | color: #cc0000;
30 | }
31 | .color-9 {
32 | color: #cc0068;
33 | }
34 |
35 | * {
36 | font-family: 'Saira', sans-serif;
37 | margin: 0;
38 | padding: 0;
39 | font-size: 1.4vh;
40 | }
41 |
42 | .no-grow {
43 | flex-grow: 0;
44 | }
45 |
46 | em {
47 | font-style: normal;
48 | }
49 |
50 | #app {
51 | font-family: 'Saira', sans-serif;
52 | -webkit-font-smoothing: antialiased;
53 | -moz-osx-font-smoothing: grayscale;
54 | color: white;
55 | background-color: transparent;
56 | }
57 |
58 | .chat-window {
59 | position: absolute;
60 | top: 2.5%;
61 | left: 40px;
62 | width: 26%;
63 | height: 530px;
64 | max-width: 550px;
65 | background-color: rgba(255, 255, 255, 0);
66 | animation-duration: 2s;
67 | }
68 |
69 | .chat-messages {
70 | padding-top: 5px;
71 | max-height: 140%;
72 | font-size: 1.4rem;
73 | overflow-x: hidden;
74 | overflow-y: hidden;
75 | display: flex;
76 | flex-flow: row;
77 | flex-wrap: wrap;
78 | }
79 |
80 | .chat-input {
81 | font-size: 1.65vh;
82 | position: absolute;
83 | top: 33.8%;
84 | left: 50px;
85 | width: 26%;
86 | max-width: 610px;
87 | box-sizing: border-box;
88 | }
89 |
90 | .prefix {
91 | font-size: 1.8vh;
92 | position: absolute;
93 | margin-top: 0.8%;
94 | margin-left: 1.5%;
95 | left: 0.208%;
96 | }
97 |
98 | textarea {
99 | font-family: 'Saira', sans-serif !important;
100 | border: none;
101 | font-size: 1.3vh;
102 | display: block;
103 | box-sizing: border-box;
104 | padding: 1.2vh 5vh 1.2vh 4.5vh;
105 | color: rgb(255, 255, 255);
106 | width: 90%;
107 | border-radius: 1vh;
108 | border: 1px solid white;
109 | height: 4.5vh;
110 | overflow: hidden;
111 | text-overflow: ellipsis;
112 | resize: none;
113 | box-shadow: 0 0 20px 0px black;
114 | background: radial-gradient(circle, rgba(19, 72, 85, 0.767) 0%, rgba(43, 44, 48, 0.692) 100%);
115 | }
116 |
117 | textarea:focus,
118 | input:focus {
119 | outline: none;
120 | }
121 |
122 | .msg {
123 | margin-bottom: 5px;
124 | }
125 |
126 | .suggestions {
127 | list-style-type: none;
128 | padding: 1vh;
129 | font-size: 0.9rem;
130 | box-sizing: border-box;
131 | color: white;
132 | border: 1px solid white;
133 | margin-top: 0.5vw;
134 | width: 90%;
135 | border-radius: 0.5vw;
136 | box-shadow: 0 0 20px 0px black;
137 | background: radial-gradient(circle, rgba(19, 72, 85, 0.767) 0%, rgba(43, 44, 48, 0.692) 100%);
138 | }
139 |
140 | .empty-suggestions {
141 | border-radius: 0.5vw;
142 | color: rgba(255, 255, 255, 0.50);
143 | font-weight: 400;
144 | }
145 |
146 | .suggestion-slash {
147 | position: absolute;
148 | top: 50%;
149 | right: 92%;
150 | transform: translateY(-50%);
151 | font-size: 1.6vh;
152 | font-weight: 400;
153 | color: #f4f4f4;
154 | padding: 0.8vh 0.6vh;
155 | width: fit-content;
156 | border-radius: 100%;
157 | color: #b3b3b3;
158 | transition: color 0.24s ease-in-out;
159 | font-family: 'Salsa', cursive;
160 | line-height: 0.5vh;
161 | }
162 |
163 | .help {
164 | margin-top: -10px;
165 | color: #b0bbbd;
166 | }
167 |
168 | .disabled {
169 | margin-top: -10px;
170 | color: #b0bbbd;
171 | }
172 |
173 | .suggestion {
174 | border-radius: 5px;
175 | padding: 0.2vh 2vh;
176 | margin: 0.5vh 0 0.3vh 0;
177 | }
178 |
179 | .suggestion.selected {
180 | box-shadow: 0 0 20px 0px black;
181 | background: rgba(255, 255, 255, 0);
182 | padding: 1vh 2vh;
183 | }
184 |
185 | .suggestion > * {
186 | font-family: 'Saira', sans-serif !important;
187 | }
188 |
189 | .chat-message {
190 | margin: 0.1vw;
191 | margin-left: 0.4vw;
192 | background: radial-gradient(circle, rgba(19, 72, 85, 0.767) 0%, rgba(43, 44, 48, 0.692) 100%);
193 | box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.753);
194 | width: 22vw;
195 | overflow: hidden;
196 | word-break: break-word;
197 | border-radius: 1vh;
198 | border-style: solid;
199 | border-width: 0.15rem;
200 | border-color: rgba(110, 110, 119, 0.925);
201 | padding: 1vh 1.2vh;
202 | font-family: 'Saira', sans-serif;
203 | }
204 |
205 | .chat-message .header {
206 | margin-bottom: 0.5vh;
207 | display: flex;
208 | align-items: center;
209 | }
210 |
211 | .chat-message2 {
212 | padding-top: 20px;
213 | position: relative;
214 | background-color: transparent;
215 | margin: -10px -8px;
216 | animation: unfold 300ms ease;
217 | }
218 |
219 | @keyframes unfold {
220 | 0% {
221 | opacity: 0;
222 | transform: translateX(100%);
223 | }
224 | 100% {
225 | opacity: 1;
226 | transform: translateX(0);
227 | }
228 | }
229 |
230 | .label-msg {
231 | background-color: rgba(37, 37, 37, 0.9);
232 | border-left: 3px solid #b93400;
233 | display: flex;
234 | border-radius: 10px;
235 | align-items: center;
236 | padding: 15px 10px 10px 10px;
237 | }
238 |
239 | .label-msg b {
240 | margin: 0 5px;
241 | }
242 |
243 | .label-msg-details {
244 | position: absolute;
245 | top: 10px;
246 | }
247 |
248 | .label-msg-type {
249 | margin-right: 0.5vh;
250 | padding: 0.3vh 0.9vh;
251 | background: radial-gradient(circle, rgba(19, 72, 85, 0.767) 0%, rgba(43, 44, 48, 0.692) 100%);
252 | font-size: 1.5vh;
253 | border-radius: 1vh;
254 | border-style: solid;
255 | border-width: 0.15rem;
256 | border-color: rgba(110, 110, 119, 0.925);
257 | font-weight: 500;
258 | white-space: nowrap;
259 | text-shadow: 0 0 5px black;
260 | box-shadow: 0 0 10px 0px #000000;
261 | }
262 |
263 | .chat-message .header span:nth-child(2) {
264 | font-weight: 500;
265 | }
266 |
267 | .label-msg-txt, .chat-message > span {
268 | font-size: 1.3vh;
269 | font-weight: 900;
270 | color: #dcdcdc;
271 | }
272 |
273 | .chat-message-body {
274 | margin-top: 10px;
275 | }
276 |
277 | .advert, .advert {
278 | background-color: rgba(47, 92, 115, 0.8);
279 | }
280 |
281 | .warning .label-msg, .warning .label-msg-type {
282 | background-color: rgba(251, 255, 0, 0.8);
283 | }
284 |
285 | .normal .label-msg, .normal .label-msg-type {
286 | background-color: rgba(47, 114, 181, 0.9);
287 | }
288 |
289 | .error .label-msg, .error .label-msg-type {
290 | background-color: rgba(191, 36, 36, 0.9);
291 | }
292 |
293 | .system .label-msg, .system .label-msg-type {
294 | background-color: rgb(67, 57, 111);
295 | }
296 |
297 | .emergency .label-msg, .emergency .label-msg-type {
298 | background-color: rgba(224, 50, 50, 0.8);
299 | }
300 |
301 | .nonemergency .label-msg, .nonemergency .label-msg-type {
302 | background-color: rgba(112, 25, 25, 0.8);
303 | }
304 |
305 | .report .label-msg, .report .label-msg-type {
306 | background-color: rgba(86, 173, 10, 0.8);
307 | }
308 |
309 | .chat-input > div {
310 | position: relative;
311 | }
312 |
313 | .chat-input i {
314 | font-size: 1.5vh;
315 | position: absolute;
316 | top: 50%;
317 | left: 88%;
318 | color: rgba(255, 255, 255, 0.50);
319 | transform: translate(-100%, -50%);
320 | font-size: 1.8vh;
321 | }
322 |
323 |
324 | .ooc {
325 | background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(125, 125, 125, 0.9) 100%);
326 | }
327 |
328 | .fa-door-open {
329 | color: rgba(42, 42, 42, 0.9);
330 | background-color: #7d7d7d;
331 | padding: 5px;
332 | border-radius: 5px;
333 | }
334 |
--------------------------------------------------------------------------------
/html/index.html:
--------------------------------------------------------------------------------
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 |
65 |
66 |
67 |
72 |
73 |
74 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
127 |
128 |
129 |
130 |
--------------------------------------------------------------------------------
/html/js/App.js:
--------------------------------------------------------------------------------
1 | window.APP = {
2 | template: '#app_template',
3 | name: 'app',
4 | data() {
5 | return {
6 | style: CONFIG.style,
7 | showInput: false,
8 | showWindow: false,
9 | shouldHide: true,
10 | backingSuggestions: [],
11 | removedSuggestions: [],
12 | templates: CONFIG.templates,
13 | message: '',
14 | messages: [],
15 | oldMessages: [],
16 | oldMessagesIndex: -1,
17 | tplBackups: [],
18 | msgTplBackups: [],
19 | pressedKeys: {},
20 | selectedSuggestionIdx: 0,
21 | };
22 | },
23 | destroyed() {
24 | clearInterval(this.focusTimer);
25 | window.removeEventListener('message', this.listener);
26 | },
27 | mounted() {
28 | post('http://ef-chat/loaded', JSON.stringify({}));
29 | this.listener = window.addEventListener('message', (event) => {
30 | const item = event.data || event.detail; //'detail' is for debuging via browsers
31 | if (this[item.type]) {
32 | this[item.type](item);
33 | }
34 | });
35 | },
36 | watch: {
37 | messages() {
38 | if (this.showWindowTimer) {
39 | clearTimeout(this.showWindowTimer);
40 | }
41 | this.showWindow = true;
42 | this.resetShowWindowTimer();
43 |
44 | const messagesObj = this.$refs.messages;
45 | this.$nextTick(() => {
46 | messagesObj.scrollTop = messagesObj.scrollHeight;
47 | });
48 | },
49 |
50 | message() {
51 | this.selectedSuggestionIdx = 0;
52 | },
53 | },
54 | computed: {
55 | emptySuggestions() {
56 | if (this.message === '') {
57 | return true;
58 | }
59 |
60 | // const slashMessage = '/' + this.message;
61 | const slashMessage = this.message;
62 |
63 | const suggestionList = this.backingSuggestions.filter((el) => this.removedSuggestions.indexOf(el.name) <= -1);
64 | const currentSuggestions = suggestionList.filter((s) => {
65 | if (!s.name.startsWith(slashMessage)) {
66 | const suggestionSplitted = s.name.split(' ');
67 | const messageSplitted = slashMessage.split(' ');
68 | for (let i = 0; i < messageSplitted.length; i += 1) {
69 | if (i >= suggestionSplitted.length) {
70 | return i < suggestionSplitted.length + s.params.length;
71 | }
72 | if (suggestionSplitted[i] !== messageSplitted[i]) {
73 | return false;
74 | }
75 | }
76 | }
77 | return true;
78 | }).slice(0, CONFIG.suggestionLimit);
79 |
80 | return currentSuggestions.length === 0;
81 | },
82 | suggestions() {
83 | return this.backingSuggestions.filter((el) => this.removedSuggestions.indexOf(el.name) <= -1);
84 | },
85 | },
86 | methods: {
87 | ON_SCREEN_STATE_CHANGE({ shouldHide }) {
88 | this.shouldHide = shouldHide;
89 | },
90 | ON_OPEN() {
91 | this.showInput = true;
92 | this.showWindow = true;
93 | if (this.showWindowTimer) {
94 | clearTimeout(this.showWindowTimer);
95 | }
96 | this.focusTimer = setInterval(() => {
97 | if (this.$refs.input) {
98 | this.$refs.input.focus();
99 | } else {
100 | clearInterval(this.focusTimer);
101 | }
102 | }, 100);
103 | },
104 | ON_MESSAGE({ message }) {
105 | this.messages.push(message);
106 | },
107 | ON_CLEAR() {
108 | this.messages = [];
109 | this.oldMessages = [];
110 | this.oldMessagesIndex = -1;
111 | },
112 | ON_SUGGESTION_ADD({ suggestion }) {
113 | const duplicateSuggestion = this.backingSuggestions.find(a => a.name == suggestion.name);
114 | if (duplicateSuggestion) {
115 | if(suggestion.help || suggestion.params) {
116 | duplicateSuggestion.help = suggestion.help || "";
117 | duplicateSuggestion.params = suggestion.params || [];
118 | }
119 | return;
120 | }
121 | if (!suggestion.params) {
122 | suggestion.params = []; //TODO Move somewhere else
123 | }
124 |
125 | if (this.removedSuggestions.find(a => a.name == suggestion.name)) {
126 | this.removedSuggestions.splice(this.removedSuggestions.indexOf(suggestion.name), 1)
127 | }
128 | this.backingSuggestions.push(suggestion);
129 | },
130 | ON_SUGGESTION_REMOVE({ name }) {
131 | if(this.removedSuggestions.indexOf(name) <= -1) {
132 | this.removedSuggestions.push(name);
133 | }
134 | },
135 | ON_COMMANDS_RESET() {
136 | console.log('Resetting Command Suggestions');
137 | this.removedSuggestions = [];
138 | this.backingSuggestions = [];
139 | },
140 | ON_TEMPLATE_ADD({ template }) {
141 | if (this.templates[template.id]) {
142 | this.warn(`Tried to add duplicate template '${template.id}'`)
143 | } else {
144 | this.templates[template.id] = template.html;
145 | }
146 | },
147 | ON_UPDATE_THEMES({ themes }) {
148 | this.removeThemes();
149 |
150 | this.setThemes(themes);
151 | },
152 | removeThemes() {
153 | for (let i = 0; i < document.styleSheets.length; i++) {
154 | const styleSheet = document.styleSheets[i];
155 | const node = styleSheet.ownerNode;
156 |
157 | if (node.getAttribute('data-theme')) {
158 | node.parentNode.removeChild(node);
159 | }
160 | }
161 |
162 | this.tplBackups.reverse();
163 |
164 | for (const [ elem, oldData ] of this.tplBackups) {
165 | elem.innerText = oldData;
166 | }
167 |
168 | this.tplBackups = [];
169 |
170 | this.msgTplBackups.reverse();
171 |
172 | for (const [ id, oldData ] of this.msgTplBackups) {
173 | this.templates[id] = oldData;
174 | }
175 |
176 | this.msgTplBackups = [];
177 | },
178 | setThemes(themes) {
179 | for (const [ id, data ] of Object.entries(themes)) {
180 | if (data.style) {
181 | const style = document.createElement('style');
182 | style.type = 'text/css';
183 | style.setAttribute('data-theme', id);
184 | style.appendChild(document.createTextNode(data.style));
185 |
186 | document.head.appendChild(style);
187 | }
188 |
189 | if (data.styleSheet) {
190 | const link = document.createElement('link');
191 | link.rel = 'stylesheet';
192 | link.type = 'text/css';
193 | link.href = data.baseUrl + data.styleSheet;
194 | link.setAttribute('data-theme', id);
195 |
196 | document.head.appendChild(link);
197 | }
198 |
199 | if (data.templates) {
200 | for (const [ tplId, tpl ] of Object.entries(data.templates)) {
201 | const elem = document.getElementById(tplId);
202 |
203 | if (elem) {
204 | this.tplBackups.push([ elem, elem.innerText ]);
205 | elem.innerText = tpl;
206 | }
207 | }
208 | }
209 |
210 | if (data.script) {
211 | const script = document.createElement('script');
212 | script.type = 'text/javascript';
213 | script.src = data.baseUrl + data.script;
214 |
215 | document.head.appendChild(script);
216 | }
217 |
218 | if (data.msgTemplates) {
219 | for (const [ tplId, tpl ] of Object.entries(data.msgTemplates)) {
220 | this.msgTplBackups.push([ tplId, this.templates[tplId] ]);
221 | this.templates[tplId] = tpl;
222 | }
223 | }
224 | }
225 | },
226 | warn(msg) {
227 | this.messages.push({
228 | args: [msg],
229 | template: '^3CHAT-WARN: ^0{0}',
230 | });
231 | },
232 | clearShowWindowTimer() {
233 | clearTimeout(this.showWindowTimer);
234 | },
235 | resetShowWindowTimer() {
236 | this.clearShowWindowTimer();
237 | this.showWindowTimer = setTimeout(() => {
238 | if (!this.showInput) {
239 | this.showWindow = false;
240 | }
241 | }, CONFIG.fadeTimeout);
242 | },
243 | keyUp(e) {
244 | this.resize();
245 | delete this.pressedKeys[e.which];
246 | },
247 | keyDown(e) {
248 | this.pressedKeys[e.which] = true;
249 |
250 | if (this.pressedKeys[17] === undefined && (e.which === 38 || e.which === 40)) {
251 | e.preventDefault();
252 | this.moveOldMessageIndex(e.which === 38);
253 | } else if (e.which == 33) {
254 | var buf = document.getElementsByClassName('chat-messages')[0];
255 | buf.scrollTop = buf.scrollTop - 100;
256 | } else if (e.which == 34) {
257 | var buf = document.getElementsByClassName('chat-messages')[0];
258 | buf.scrollTop = buf.scrollTop + 100;
259 | }
260 | },
261 | moveOldMessageIndex(up) {
262 | if (up && this.oldMessages.length > this.oldMessagesIndex + 1) {
263 | this.oldMessagesIndex += 1;
264 | this.message = this.oldMessages[this.oldMessagesIndex];
265 | } else if (!up && this.oldMessagesIndex - 1 >= 0) {
266 | this.oldMessagesIndex -= 1;
267 | this.message = this.oldMessages[this.oldMessagesIndex];
268 | } else if (!up && this.oldMessagesIndex - 1 === -1) {
269 | this.oldMessagesIndex = -1;
270 | this.message = '';
271 | }
272 | },
273 | resize() {
274 | // const input = this.$refs.input;
275 | // input.style.height = '5px';
276 | // input.style.height = `${input.scrollHeight + 2}px`;
277 | },
278 | send(e) {
279 | if(this.message !== '') {
280 | post('http://ef-chat/chatResult', JSON.stringify({
281 | message: this.message,
282 | }));
283 | this.oldMessages.unshift(this.message);
284 | this.oldMessagesIndex = -1;
285 | this.hideInput();
286 | } else {
287 | this.hideInput(true);
288 | }
289 | },
290 | hideInput(canceled = false) {
291 | if (canceled) {
292 | post('http://ef-chat/chatResult', JSON.stringify({ canceled }));
293 | }
294 | this.message = '';
295 | this.showInput = false;
296 | clearInterval(this.focusTimer);
297 | this.resetShowWindowTimer();
298 | },
299 | completeSuggestion() {
300 | if (this.message === '') {
301 | return;
302 | }
303 |
304 | // const slashMessage = '/' + this.message;
305 | const slashMessage = this.message;
306 |
307 | const suggestionList = this.backingSuggestions.filter((el) => this.removedSuggestions.indexOf(el.name) <= -1);
308 | const currentSuggestions = suggestionList.filter((s) => {
309 | if (!s.name.startsWith(slashMessage)) {
310 | const suggestionSplitted = s.name.split(' ');
311 | const messageSplitted = slashMessage.split(' ');
312 | for (let i = 0; i < messageSplitted.length; i += 1) {
313 | if (i >= suggestionSplitted.length) {
314 | return i < suggestionSplitted.length + s.params.length;
315 | }
316 | if (suggestionSplitted[i] !== messageSplitted[i]) {
317 | return false;
318 | }
319 | }
320 | }
321 | return true;
322 | }).slice(0, CONFIG.suggestionLimit);
323 |
324 | const topSuggestion = currentSuggestions[this.selectedSuggestionIdx];
325 |
326 | if(topSuggestion) {
327 | this.message = topSuggestion.name;
328 | }
329 | },
330 | switchSuggestionDown() {
331 | if (this.message === '') {
332 | return true;
333 | }
334 |
335 | // const slashMessage = '/' + this.message;
336 | const slashMessage = this.message;
337 |
338 | const suggestionList = this.backingSuggestions.filter((el) => this.removedSuggestions.indexOf(el.name) <= -1);
339 | const currentSuggestions = suggestionList.filter((s) => {
340 | if (!s.name.startsWith(slashMessage)) {
341 | const suggestionSplitted = s.name.split(' ');
342 | const messageSplitted = slashMessage.split(' ');
343 | for (let i = 0; i < messageSplitted.length; i += 1) {
344 | if (i >= suggestionSplitted.length) {
345 | return i < suggestionSplitted.length + s.params.length;
346 | }
347 | if (suggestionSplitted[i] !== messageSplitted[i]) {
348 | return false;
349 | }
350 | }
351 | }
352 | return true;
353 | }).slice(0, CONFIG.suggestionLimit);
354 |
355 | this.selectedSuggestionIdx = (this.selectedSuggestionIdx + 1)%(currentSuggestions.length);
356 | },
357 | switchSuggestionUp() {
358 | if (this.message === '') {
359 | return true;
360 | }
361 |
362 | // const slashMessage = '/' + this.message;
363 | const slashMessage = this.message;
364 |
365 | const suggestionList = this.backingSuggestions.filter((el) => this.removedSuggestions.indexOf(el.name) <= -1);
366 | const currentSuggestions = suggestionList.filter((s) => {
367 | if (!s.name.startsWith(slashMessage)) {
368 | const suggestionSplitted = s.name.split(' ');
369 | const messageSplitted = slashMessage.split(' ');
370 | for (let i = 0; i < messageSplitted.length; i += 1) {
371 | if (i >= suggestionSplitted.length) {
372 | return i < suggestionSplitted.length + s.params.length;
373 | }
374 | if (suggestionSplitted[i] !== messageSplitted[i]) {
375 | return false;
376 | }
377 | }
378 | }
379 | return true;
380 | }).slice(0, CONFIG.suggestionLimit);
381 |
382 | let prevSuggestion = this.selectedSuggestionIdx - 1;
383 | if(prevSuggestion < 0) prevSuggestion = currentSuggestions.length - 1;
384 | if(prevSuggestion < 0) prevSuggestion = 0;
385 |
386 | this.selectedSuggestionIdx = prevSuggestion;
387 | },
388 | },
389 | };
390 | // print("ef-chat loaded made by suraj by ef ddevelopment")
391 |
392 |
--------------------------------------------------------------------------------
/html/js/Message.js:
--------------------------------------------------------------------------------
1 | Vue.component('message', {
2 | template: '#message_template',
3 | data() {
4 | return {};
5 | },
6 | computed: {
7 | textEscaped() {
8 | let s = this.template ? this.template : this.templates[this.templateId];
9 |
10 | if (this.template) {
11 | //We disable templateId since we are using a direct raw template
12 | this.templateId = -1;
13 | }
14 |
15 | //this.$el.style.background = `rgba(${this.color[0]}, ${this.color[1]}, ${this.color[2]}, 0.9)`;
16 | //This hack is required to preserve backwards compatability
17 | if (this.templateId == CONFIG.defaultTemplateId
18 | && this.args.length == 1) {
19 | s = this.templates[CONFIG.defaultAltTemplateId] //Swap out default template :/
20 | }
21 |
22 | s = s.replace(/{(\d+)}/g, (match, number) => {
23 | const argEscaped = this.args[number] != undefined ? this.escape(this.args[number]) : match
24 | if (number == 0 && this.color) {
25 | //color is deprecated, use templates or ^1 etc.
26 | return argEscaped;
27 | }
28 | return argEscaped;
29 | });
30 | return this.colorize(s);
31 | },
32 | },
33 | methods: {
34 | colorizeOld(str) {
35 | return `${str}`
36 | },
37 | colorize(str) {
38 | let s = "" + (str.replace(/\^([0-9])/g, (str, color) => ``)) + "";
39 |
40 | const styleDict = {
41 | '*': 'font-weight: bold;',
42 | '_': 'text-decoration: underline;',
43 | '~': 'text-decoration: line-through;',
44 | '=': 'text-decoration: underline line-through;',
45 | 'r': 'text-decoration: none;font-weight: normal;',
46 | };
47 |
48 | const styleRegex = /\^(\_|\*|\=|\~|\/|r)(.*?)(?=$|\^r|<\/em>)/;
49 | while (s.match(styleRegex)) { //Any better solution would be appreciated :P
50 | s = s.replace(styleRegex, (str, style, inner) => `${inner}`)
51 | }
52 | return s.replace(/]*><\/span[^>]*>/g, '');
53 | },
54 | escape(unsafe) {
55 | return String(unsafe)
56 | .replace(/&/g, '&')
57 | .replace(//g, '>')
59 | .replace(/"/g, '"')
60 | .replace(/'/g, ''');
61 | },
62 | },
63 | props: {
64 | templates: {
65 | type: Object,
66 | },
67 | args: {
68 | type: Array,
69 | },
70 | template: {
71 | type: String,
72 | default: null,
73 | },
74 | templateId: {
75 | type: String,
76 | default: CONFIG.defaultTemplateId,
77 | },
78 | multiline: {
79 | type: Boolean,
80 | default: false,
81 | },
82 | color: { //deprecated
83 | type: Array,
84 | default: false,
85 | },
86 | },
87 | });
88 |
89 |
90 | //////////
91 |
92 |
93 |
--------------------------------------------------------------------------------
/html/js/Suggestions.js:
--------------------------------------------------------------------------------
1 | Vue.component('suggestions', {
2 | template: '#suggestions_template',
3 | props: ['message', 'suggestions', 'selectedSuggestionIdx'],
4 | data() {
5 | return {};
6 | },
7 | computed: {
8 | currentSuggestions() {
9 | if (this.message === '') {
10 | return [];
11 | }
12 | const slashMessage = this.message;
13 |
14 | const currentSuggestions = this.suggestions.filter((s) => {
15 | if (!s.name.startsWith(slashMessage)) {
16 | const suggestionSplitted = s.name.split(' ');
17 | const messageSplitted = slashMessage.split(' ');
18 | for (let i = 0; i < messageSplitted.length; i += 1) {
19 | if (i >= suggestionSplitted.length) {
20 | return i < suggestionSplitted.length + s.params.length;
21 | }
22 | if (suggestionSplitted[i] !== messageSplitted[i]) {
23 | return false;
24 | }
25 | }
26 | }
27 | return true;
28 | }).slice(0, CONFIG.suggestionLimit);
29 | currentSuggestions.forEach((s) => {
30 | s.disabled = !s.name.startsWith(slashMessage);
31 | if (Array.isArray(s.params)) {
32 | s.params.forEach((p, index) => {
33 | const wType = (index === s.params.length - 1) ? '.' : '\\S';
34 | const regex = new RegExp(`${s.name} (?:\\w+ ){${index}}(?:${wType}*)$`, 'g');
35 | p.disabled = slashMessage.match(regex) == null;
36 | });
37 | }else{
38 | for (let index in s.params){
39 | const wType = (index === s.params.length - 1) ? '.' : '\\S';
40 | const regex = new RegExp(`${s.name} (?:\\w+ ){${index}}(?:${wType}*)$`, 'g');
41 | s.params[index].disabled = slashMessage.match(regex) == null;
42 | }
43 | }
44 | });
45 | return currentSuggestions;
46 | },
47 | },
48 | methods: {},
49 | });
50 |
--------------------------------------------------------------------------------
/html/js/config.default.js:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT THIS FILE
2 | // Copy it to `config.js` and edit it
3 | window.CONFIG = {
4 | defaultTemplateId: 'default', //This is the default template for 2 args1
5 | defaultAltTemplateId: 'defaultAlt', //This one for 1 arg
6 | templates: { //You can add static templates here
7 | 'default': ' {1}
',
8 | 'defaultAlt': '{0}',
9 | 'print': '{0}',
10 | 'example:important': '^2{0}
',
11 |
12 | 'ooc': '{2}
',
13 | 'oocl': '{2}
',
14 | 'cnormal': '{1}
',
15 | 'normal': '{0}
',
16 | 'report': '{2}
',
17 | 'creport': '{1}
',
18 | 'success': '{1}
',
19 | 'error': '{1}
',
20 | // 'error': '',
21 | 'warning': '{1}
',
22 | 'system': '{0}
',
23 | // 'system': '',
24 | 'advert': '{0}
',
25 | 'emergency': '{0}
',
26 | '911': '{2}
',
27 | '311': '{2}
',
28 | '911r': '{2}
',
29 | '311r': '{2}
',
30 | 'ems-chat': '{1}
',
31 | 'police-chat': '{1}
',
32 |
33 | 'showid': 'ID Card
{0}:
BSN: {1}
First Name: {2}
Last name: {3}
Birthday: {4}
Sex: {5}
Height: {6}ID Card
{0}:
BSN: {1}
First Name: {2}
Last name: {3}
Birthday: {4}
Sex: {5}
Nationality: {6}ID Card
{0}:
First Name: {1}
Last name: {2}
Birthday: {3}
Driving licenses: {4}ID Card
{0}:
No-ID: {1}
First Name: {2}
Last name: {3}
BSN: {4}
Job: {5}