diff --git a/README.md b/README.md index 8fc8c8b..d3ba89c 100644 --- a/README.md +++ b/README.md @@ -23,10 +23,13 @@ Or point to the ZIP file of a [specific release](https://github.com/Insality/dr For **Druid** to work requires next input bindings: - Mouse trigger - `Button 1` -> `touch` _For basic input components_ -- Key trigger - `Backspace` -> `back` _For back_handler component_ -- Key trigger - `Back` -> `back` _For back_handler component, Android back button_ +- Key trigger - `Backspace` -> `key_backspace` _For back_handler component, input component_ +- Key trigger - `Back` -> `key_back` _For back_handler component, Android back button, input component_ +- Key trigger - `Enter` -> `key_enter` _For input component, optional_ +- Key trigger - `Esc` -> `key_esc` _For input component, optional_ -![](media/input_binding.png) +![](media/input_binding_2.png) +![](media/input_binding_1.png) ### Input capturing [optional] @@ -55,6 +58,18 @@ druid.set_text_function(callback) -- Used for change default druid style druid.set_default_style(your_style) + +-- Call this function on language changing in the game, +-- to retranslate all lang_text components: +druid.on_languge_change() + +-- Call this function on layout changing in the game, +-- to reapply layouts +druid.on_layout_change() + +-- Call this function inside window.set_listener +-- to catch game focus lost/gained callbacks: +druid.on_window_callback(event) ``` @@ -112,11 +127,15 @@ local function button_callback(self) print("Button was clicked!") end -local function init(self) +function init(self) self.druid = druid.new(self) self.druid:new_button("button_node_name", button_callback) end +function final(self) + self.druid:final() +end + function on_input(self, action_id, action) return self.druid:on_input(action_id, action) end diff --git a/docs_md/01-components.md b/docs_md/01-components.md index e4c79b5..fd94779 100644 --- a/docs_md/01-components.md +++ b/docs_md/01-components.md @@ -164,8 +164,17 @@ Pin node (node_name in params) should be placed in zero position (initial). It w Basic Druid text input component (unimplemented) ### Setup +Create input component with druid: `input = druid:new_input(button_node_name, text_node_name, keyboard_type)` ### Notes +- Input component handle user text input. Input contains from button and text components. Button needed for selecting/unselecting input field +- Long click on input field for clear and select input field (clearing can be disable via styles) +- Click outside of button to unselect input field +- On focus lost (game minimized) input field will be unselected +- You can setup max length of the text +- You can setup allowed characters. On add not allowed characters `on_input_wrong` will be called. By default it cause simple shake animation +- The keyboard for input will not show on mobile HTML5. So input field in mobile HTML5 is not working now +- To make work different keyboard type, make sure value in game.project Android:InputMethod set to HidderInputField (https://defold.com/manuals/project-settings/#input-method) ## Checkbox diff --git a/docs_md/02-creating_custom_components.md b/docs_md/02-creating_custom_components.md index f163c5c..38534e3 100644 --- a/docs_md/02-creating_custom_components.md +++ b/docs_md/02-creating_custom_components.md @@ -32,8 +32,8 @@ end function M.on_message(self, message_id, message, sender) end --- Call only if component with ON_CHANGE_LANGUAGE interest -function M.on_change_language(self) +-- Call only if component with ON_LANGUAGE_CHANGE interest +function M.on_language_change(self) end -- Call only if component with ON_LAYOUT_CHANGE interest @@ -45,6 +45,14 @@ end function M.on_input_interrupt(self) end +-- Call, if game lost focus. Need ON_FOCUS_LOST intereset +function M.on_focus_lost(self) +end + +-- Call, if game gained focus. Need ON_FOCUS_GAINED intereset +function M.on_focus_gained(self) +end + -- Call on component remove or on druid:final function M.on_remove(self) end @@ -92,10 +100,13 @@ There is next interests in druid: - **ON_INPUT** - component will receive input from on_input, after other components with ON_INPUT_HIGH -- **ON_CHANGE_LANGUAGE** - will call _on_change_language_ function on language change trigger +- **ON_LANGUAGE_CHANGE** - will call _on_language_change_ function on language change trigger -- **ON_LAYOUT_CHANGED** will call _on_layout_change_ function on layout change trigger +- **ON_LAYOUT_CHANGE** will call _on_layout_change_ function on layout change trigger +- **ON_FOCUS_LOST** will call _on_focust_lost_ function in on focus lost event. You need to pass window_callback to global `druid:on_window_callback` + +- **ON_FOCUS_GAINED** will call _on_focust_gained_ function in on focus gained event. You need to pass window_callback to global `druid:on_window_callback` ## Best practice on custom components On each component recommended describe component scheme in next way: diff --git a/docs_md/03-styles.md b/docs_md/03-styles.md index a018c43..d651333 100644 --- a/docs_md/03-styles.md +++ b/docs_md/03-styles.md @@ -41,7 +41,3 @@ local function init(self) self.button:set_style(my_style) end ``` - -## Create custom components -Styles is just lua table, so it can be described in just one single file -__TODO__ diff --git a/druid/base/input.lua b/druid/base/input.lua index f0c5e66..b4299bf 100644 --- a/druid/base/input.lua +++ b/druid/base/input.lua @@ -3,6 +3,35 @@ -- @author Part of code from Britzl gooey input component -- @module druid.input +--- Component events +-- @table Events +-- @tfield druid_event on_input_select (self, button_node) On input field select callback +-- @tfield druid_event on_input_unselect (self, button_node) On input field unselect callback +-- @tfield druid_event on_input_text (self, input_text) On input field text change callback +-- @tfield druid_event on_input_empty (self, input_text) On input field text change to empty string callback +-- @tfield druid_event on_input_full (self, input_text) On input field text change to max length string callback +-- @tfield druid_event on_input_wrong (self, params, button_instance) On trying user input with not allowed character callback + +--- Component fields +-- @table Fields +-- @tfield druid.text text Text component +-- @tfield druid.button button Button component +-- @tfield bool is_selected Is current input selected now +-- @tfield bool is_empty Is current input is empty now +-- @tfield[opt] number max_length Max length for input text +-- @tfield[opt] string allowerd_characters Pattern matching for user input +-- @tfield number keyboard_type Gui keyboard type for input field + +--- Component style params +-- @table Style +-- @tfield bool IS_LONGTAP_ERASE Is long tap will erase current input data +-- @tfield number BUTTON_SELECT_INCREASE Button scale multiplier on selecting input field +-- @tfield string MASK_DEFAULT_CHAR Default character mask for password input +-- @tfield function on_select (self, button_node) Callback on input field selecting +-- @tfield function on_unselect (self, button_node) Callback on input field unselecting +-- @tfield function on_input_wrong (self, button_node) Callback on wrong user input +-- @tfield table button Custom button style for input node + local Event = require("druid.event") local const = require("druid.const") local component = require("druid.component") diff --git a/druid/druid.lua b/druid/druid.lua index 8fe67ee..eb10f44 100644 --- a/druid/druid.lua +++ b/druid/druid.lua @@ -139,4 +139,5 @@ function M.on_language_change() end end + return M diff --git a/media/input_binding.png b/media/input_binding.png deleted file mode 100644 index f5b68d6..0000000 Binary files a/media/input_binding.png and /dev/null differ diff --git a/media/input_binding_1.png b/media/input_binding_1.png new file mode 100644 index 0000000..aac429b Binary files /dev/null and b/media/input_binding_1.png differ diff --git a/media/input_binding_2.png b/media/input_binding_2.png new file mode 100644 index 0000000..26b6f15 Binary files /dev/null and b/media/input_binding_2.png differ