From 2050326ec66a7b293d970b01cb2bc882c876f55a Mon Sep 17 00:00:00 2001 From: SkyratBot <59378654+SkyratBot@users.noreply.github.com> Date: Sun, 10 Jan 2021 23:22:17 +0100 Subject: [PATCH] [MIRROR] Tgui input list (#2621) * Tgui input list * aaa Co-authored-by: Watermelon914 <37270891+Watermelon914@users.noreply.github.com> Co-authored-by: Azarak --- code/game/machinery/hologram.dm | 2 +- code/modules/admin/admin_verbs.dm | 2 +- code/modules/tgui/tgui_input_list.dm | 184 +++++++++++++++ tgstation.dme | 1 + tgui/packages/tgui/interfaces/ListInput.js | 212 ++++++++++++++++++ .../tgui/styles/interfaces/ListInput.scss | 29 +++ tgui/packages/tgui/styles/main.scss | 1 + tgui/public/tgui-common.chunk.js | 2 +- tgui/public/tgui-panel.bundle.js | 2 +- tgui/public/tgui.bundle.css | 2 +- tgui/public/tgui.bundle.js | 2 +- 11 files changed, 433 insertions(+), 6 deletions(-) create mode 100644 code/modules/tgui/tgui_input_list.dm create mode 100644 tgui/packages/tgui/interfaces/ListInput.js create mode 100644 tgui/packages/tgui/styles/interfaces/ListInput.scss diff --git a/code/game/machinery/hologram.dm b/code/game/machinery/hologram.dm index 1efcbb02cbc..3525b2240ba 100644 --- a/code/game/machinery/hologram.dm +++ b/code/game/machinery/hologram.dm @@ -263,7 +263,7 @@ Possible to do for anyone motivated enough: if(A) LAZYADD(callnames[A], I) callnames -= get_area(src) - var/result = input(usr, "Choose an area to call", "Holocall") as null|anything in sortNames(callnames) + var/result = tgui_input_list(usr, "Choose an area to call", "Holocall", sortNames(callnames)) if(QDELETED(usr) || !result || outgoing_call) return if(usr.loc == loc) diff --git a/code/modules/admin/admin_verbs.dm b/code/modules/admin/admin_verbs.dm index ed4c4744642..7e5cafbb99d 100644 --- a/code/modules/admin/admin_verbs.dm +++ b/code/modules/admin/admin_verbs.dm @@ -488,7 +488,7 @@ GLOBAL_PROTECT(admin_verbs_hideable) set desc = "Cause an explosion of varying strength at your location." var/list/choices = list("Small Bomb (1, 2, 3, 3)", "Medium Bomb (2, 3, 4, 4)", "Big Bomb (3, 5, 7, 5)", "Maxcap", "Custom Bomb") - var/choice = input("What size explosion would you like to produce? NOTE: You can do all this rapidly and in an IC manner (using cruise missiles!) with the Config/Launch Supplypod verb. WARNING: These ignore the maxcap") as null|anything in choices + var/choice = tgui_input_list(usr, "What size explosion would you like to produce? NOTE: You can do all this rapidly and in an IC manner (using cruise missiles!) with the Config/Launch Supplypod verb. WARNING: These ignore the maxcap", "Drop Bomb", choices) var/turf/epicenter = mob.loc switch(choice) diff --git a/code/modules/tgui/tgui_input_list.dm b/code/modules/tgui/tgui_input_list.dm new file mode 100644 index 00000000000..242b69a9347 --- /dev/null +++ b/code/modules/tgui/tgui_input_list.dm @@ -0,0 +1,184 @@ +/** + * Creates a TGUI input list window and returns the user's response. + * + * This proc should be used to create alerts that the caller will wait for a response from. + * Arguments: + * * user - The user to show the input box to. + * * message - The content of the input box, shown in the body of the TGUI window. + * * title - The title of the input box, shown on the top of the TGUI window. + * * buttons - The options that can be chosen by the user, each string is assigned a button on the UI. + * * timeout - The timeout of the input box, after which the input box will close and qdel itself. Set to zero for no timeout. + */ +/proc/tgui_input_list(mob/user, message, title, list/buttons, timeout = 0) + if (!user) + user = usr + if(!length(buttons)) + return + if (!istype(user)) + if (istype(user, /client)) + var/client/client = user + user = client.mob + else + return + var/datum/tgui_list_input/input = new(user, message, title, buttons, timeout) + input.ui_interact(user) + input.wait() + if (input) + . = input.choice + qdel(input) + +/** + * Creates an asynchronous TGUI input list window with an associated callback. + * + * This proc should be used to create inputs that invoke a callback with the user's chosen option. + * Arguments: + * * user - The user to show the input box to. + * * message - The content of the input box, shown in the body of the TGUI window. + * * title - The title of the input box, shown on the top of the TGUI window. + * * buttons - The options that can be chosen by the user, each string is assigned a button on the UI. + * * callback - The callback to be invoked when a choice is made. + * * timeout - The timeout of the input box, after which the menu will close and qdel itself. Set to zero for no timeout. + */ +/proc/tgui_input_list_async(mob/user, message, title, list/buttons, datum/callback/callback, timeout = 60 SECONDS) + if (!user) + user = usr + if(!length(buttons)) + return + if (!istype(user)) + if (istype(user, /client)) + var/client/client = user + user = client.mob + else + return + var/datum/tgui_list_input/async/input = new(user, message, title, buttons, callback, timeout) + input.ui_interact(user) + +/** + * # tgui_list_input + * + * Datum used for instantiating and using a TGUI-controlled list input that prompts the user with + * a message and shows a list of selectable options + */ +/datum/tgui_list_input + /// The title of the TGUI window + var/title + /// The textual body of the TGUI window + var/message + /// The list of buttons (responses) provided on the TGUI window + var/list/buttons + /// Buttons (strings specifically) mapped to the actual value (e.g. a mob or a verb) + var/list/buttons_map + /// The button that the user has pressed, null if no selection has been made + var/choice + /// The time at which the tgui_list_input was created, for displaying timeout progress. + var/start_time + /// The lifespan of the tgui_list_input, after which the window will close and delete itself. + var/timeout + /// Boolean field describing if the tgui_list_input was closed by the user. + var/closed + +/datum/tgui_list_input/New(mob/user, message, title, list/buttons, timeout) + src.title = title + src.message = message + src.buttons = list() + src.buttons_map = list() + + // Gets rid of illegal characters + var/static/regex/whitelistedWords = regex(@{"([^\u0020-\u8000]+)"}) + + for(var/i in buttons) + var/string_key = whitelistedWords.Replace("[i]", "") + + src.buttons += string_key + src.buttons_map[string_key] = i + + + if (timeout) + src.timeout = timeout + start_time = world.time + QDEL_IN(src, timeout) + +/datum/tgui_list_input/Destroy(force, ...) + SStgui.close_uis(src) + QDEL_NULL(buttons) + . = ..() + +/** + * Waits for a user's response to the tgui_list_input's prompt before returning. Returns early if + * the window was closed by the user. + */ +/datum/tgui_list_input/proc/wait() + while (!choice && !closed) + stoplag(1) + +/datum/tgui_list_input/ui_interact(mob/user, datum/tgui/ui) + ui = SStgui.try_update_ui(user, src, ui) + if(!ui) + ui = new(user, src, "ListInput") + ui.open() + +/datum/tgui_list_input/ui_close(mob/user) + . = ..() + closed = TRUE + +/datum/tgui_list_input/ui_state(mob/user) + return GLOB.always_state + +/datum/tgui_list_input/ui_static_data(mob/user) + . = list( + "title" = title, + "message" = message, + "buttons" = buttons + ) + +/datum/tgui_list_input/ui_data(mob/user) + . = list() + if(timeout) + .["timeout"] = clamp((timeout - (world.time - start_time) - 1 SECONDS) / (timeout - 1 SECONDS), 0, 1) + +/datum/tgui_list_input/ui_act(action, list/params) + . = ..() + if (.) + return + switch(action) + if("choose") + if (!(params["choice"] in buttons)) + return + choice = buttons_map[params["choice"]] + SStgui.close_uis(src) + return TRUE + if("cancel") + SStgui.close_uis(src) + closed = TRUE + return TRUE + +/** + * # async tgui_list_input + * + * An asynchronous version of tgui_list_input to be used with callbacks instead of waiting on user responses. + */ +/datum/tgui_list_input/async + /// The callback to be invoked by the tgui_list_input upon having a choice made. + var/datum/callback/callback + +/datum/tgui_list_input/async/New(mob/user, message, title, list/buttons, callback, timeout) + ..(user, title, message, buttons, timeout) + src.callback = callback + +/datum/tgui_list_input/async/Destroy(force, ...) + QDEL_NULL(callback) + . = ..() + +/datum/tgui_list_input/async/ui_close(mob/user) + . = ..() + qdel(src) + +/datum/tgui_list_input/async/ui_act(action, list/params) + . = ..() + if (!. || choice == null) + return + callback.InvokeAsync(choice) + qdel(src) + +/datum/tgui_list_input/async/wait() + return diff --git a/tgstation.dme b/tgstation.dme index 030602b4f39..a160b3cb393 100644 --- a/tgstation.dme +++ b/tgstation.dme @@ -3220,6 +3220,7 @@ #include "code\modules\tgui\states.dm" #include "code\modules\tgui\tgui.dm" #include "code\modules\tgui\tgui_alert.dm" +#include "code\modules\tgui\tgui_input_list.dm" #include "code\modules\tgui\tgui_window.dm" #include "code\modules\tgui\states\admin.dm" #include "code\modules\tgui\states\always.dm" diff --git a/tgui/packages/tgui/interfaces/ListInput.js b/tgui/packages/tgui/interfaces/ListInput.js new file mode 100644 index 00000000000..571cc4d2232 --- /dev/null +++ b/tgui/packages/tgui/interfaces/ListInput.js @@ -0,0 +1,212 @@ +/** + * @file + * @copyright 2020 watermelon914 (https://github.com/watermelon914) + * @license MIT + */ + +import { clamp01 } from 'common/math'; +import { useBackend, useLocalState } from '../backend'; +import { Box, Button, Flex, Section, Input } from '../components'; +import { Window } from '../layouts'; + +const ARROW_KEY_UP = 38; +const ARROW_KEY_DOWN = 40; + +let lastScrollTime = 0; + +export const ListInput = (props, context) => { + const { act, data } = useBackend(context); + const { + title, + message, + buttons, + timeout, + } = data; + + // Search + const [showSearchBar, setShowSearchBar] = useLocalState( + context, 'search_bar', false); + const [displayedArray, setDisplayedArray] = useLocalState( + context, 'displayed_array', buttons); + + // KeyPress + const [searchArray, setSearchArray] = useLocalState( + context, 'search_array', []); + const [searchIndex, setSearchIndex] = useLocalState( + context, 'search_index', 0); + const [lastCharCode, setLastCharCode] = useLocalState( + context, 'last_char_code', null); + + // Selected Button + const [selectedButton, setSelectedButton] = useLocalState( + context, 'selected_button', buttons[0]); + return ( + + {timeout !== undefined && } + + + +
{ + e.preventDefault(); + if (lastScrollTime > performance.now()) { + return; + } + lastScrollTime = performance.now() + 125; + + if (e.keyCode === ARROW_KEY_UP || e.keyCode === ARROW_KEY_DOWN) + { + let direction = 1; + if (e.keyCode === ARROW_KEY_UP) direction = -1; + + let index = 0; + for (index; index < buttons.length; index++) { + if (buttons[index] === selectedButton) break; + } + index += direction; + if (index < 0) index = buttons.length-1; + else if (index >= buttons.length) index = 0; + setSelectedButton(buttons[index]); + setLastCharCode(null); + document.getElementById(buttons[index]).focus(); + return; + } + + const charCode = String.fromCharCode(e.keyCode).toLowerCase(); + if (!charCode) return; + + let foundValue; + if (charCode === lastCharCode && searchArray.length > 0) { + const nextIndex = searchIndex + 1; + + if (nextIndex < searchArray.length) { + foundValue = searchArray[nextIndex]; + setSearchIndex(nextIndex); + } + else { + foundValue = searchArray[0]; + setSearchIndex(0); + } + } + else { + const resultArray = displayedArray.filter(value => + value.substring(0, 1).toLowerCase() === charCode + ); + + if (resultArray.length > 0) { + setSearchArray(resultArray); + setSearchIndex(0); + foundValue = resultArray[0]; + } + } + + if (foundValue) { + setLastCharCode(charCode); + setSelectedButton(foundValue); + document.getElementById(foundValue).focus(); + } + }} + buttons={( +
+ + {showSearchBar && ( + + setDisplayedArray( + buttons.filter(val => + val.toLowerCase().search(value.toLowerCase()) !== -1 + ) + )} + /> + + )} + + + +