Here you will find all the useful and needed functions for the Javascript API whether you're making a new app or adding more functions to the base of the phone.
Global variables
Here you'll find many variables that can be used for various things, you can find the functions below. There are of course more of them, and you can just console.log the HR.Phone object in your chrome developer tools. We picked out the ready for public use ones.
Make sure your <script> tag is below our Javascript GitHub CDN inside <body> tag, otherwise the variables will return undefined.
HR.Phone.resourceNameString
Whether you will find this useful or not (since the phone has it's own function to execute NUI events that doesn't require the resource name) it could help you in some situations.
The name of the resource folder.
HR.Phone.localDataObject
This variable includes some of the phone and player local data. Default object structure:
{
playerId: 0, // The player's ID on the server.
playerName: "", // The player's nickname on the server.
number: "", // The player's phone number.
identifier: "", // The player's identifier on the server.
fullname: "", // The character's name and surname.
job: {name: "", grade: 0} // The self.job object from high_phone/sh_config(_QB).lua
}
HR.Phone.lockedBoolean
Returns if the phone is locked.
true if the phone is locked and false if the phone is unlocked/is unlocking.
HR.Phone.openBoolean
Returns if the phone is opened.
true if the phone is open or is being opened and false if the phone is closed/is being closed.
HR.Phone.currentAppString
Returns the current opened app.
Opened app index from Config.Applications in the config.js file.
Phone's event system
Our phone has it's own event system! It can handle many actions of the phone, such as opening an app, changing a setting, unlocking/opening the phone and more!
List of events
{
"settingUpdated": function(setting, value, oldValue), // Triggers when you change a setting.
/* Has 3 arguments,
setting - the index name of the setting,
value - the new value of the setting,
oldValue - the old value of the setting.
*/
"closing": function(), // Triggers when you start closing the phone, e.g. click ESC/The keybind of the phone.
// Has no arguments
"fullyClosed": function(), // Triggers when the phone is fully closed and not visible anymore.
// Has no arguments
"unlocking": function(), // Triggers when the phone starts being unlocked (when clicked on the click to unlock)
// Has no arguments
"fullyUnlocked": function(), // Triggers when the phone is fully unlocked and the lockscreen is not visible anymore.
// Has no arguments
"appOpened": function(app), // Triggers when an app is successfully opened, doesn't trigger if the player doesn't have the required job for the app or it just fails.
/* Has 1 argument
app - the app index name from Config.Applications
*/
"appClosed": function(app), // Triggers when an app is closed.
/* Has 1 argument
app - the app index name from Config.Applications
*/
}
HR.Phone.events.on(eventName, callback)
HR.Phone.events.on("appOpened", function(app) {
console.log(app); // Returns the app index from Config.Applications
});
An event listener for our phone's own events system.
Argument number
Argument name
Example value
1
eventName
"appOpened"
2
callback
function(...args)
HR.Phone.events.once(eventName, callback)
HR.Phone.events.on("appOpened", function(app) {
console.log(app); // Returns the app index from Config.Applications
});
An event listener for our phone's own events system. This only executes once, after that the event listener gets deleted.
Argument number
Argument name
Example value
1
eventName
"appOpened"
2
callback
function(...args)
HR.Phone.events.add(eventName)
HR.Phone.events.add("customEvent");
Creates your own events on our phone's own event system.
Argument number
Argument name
Example value
1
eventName
"customEvent"
HR.Phone.events.call(eventName)
HR.Phone.events.call("customEvent");
Manipulates existing events or calls your own created event.
HR.Phone.functions.addDynamicButton("#myelement", function(element, event) {
console.log(element.id " was clicked on.");
});
Adds a click listener to an element.
How is this different from addButton?
This function adds a dynamic click event to the document, not to the element, what that means is you're able to create the element later and it will still handle the click event once you click on it.
Argument number
Argument name
Example value
1
query/element
"#myelement" OR HTMLElement
2
callback
function(element, event)
HR.Phone.functions.hasApp(app)
function raceCreated() {
let hasRacingApp = ESX.Phone.functions.hasApp("Races");
if(hasRacingApp) {
// Do something here
}
})
Returns if the app is opened.
Argument number
Argument name
Example value
1
app
"Bank"
Returns a boolean, true if you have the app downloaded and false if not.
HR.Phone.functions.hasPhone()Async
async function someFunction() {
let hasPhone = await ESX.Phone.functions.hasPhone();
if(hasPhone) {
// Do something here
}
})
Returns if you have the phone item.
Returns a boolean, true if you have the phone and false if not.
HR.Phone.functions.addImageSelector("#myelement", function(link) {
console.log(link); // 'link' is the uploaded image online link.
}, true, true);
// You can also use an input HTMLElement as the callback, it will automatically fill in the selected/taken photo link.
HR.Phone.functions.addImageSelector("#myelement", document.querySelector("#myinput"), true, true);abs
This function adds an image selector to an element, when you click on it, a context menu will apear.
Argument number
Argument name
Example value
Description
1
query
"#myelement"
An HTML element query selector.
2
callback
function(link)
Callback function that gets called after selecting the image/taking one. Returns an online link of uploaded image.
3
darkMode
true
The context menu theme, if set to true it'll be dark, if false or undefined - white.
4
removalButton
true
The 'Remove Photo' button visibility in the context menu, if true it'll be shown, if false - hidden.
function someFunction() {
HR.Phone.functions.smoothTextTransition("#myelement", "New Text!", true, 500, function() {
console.log("Transition is done!");
});
};
This function transitions the text in a very smooth way from old text to new text, just like iOS does it.
Argument number
Argument name
Example value
Description
1
query
"#myelement" OR HTMLElement
An HTML element query selector or an HTML element.
2
newText
"New Text!"
The new text of the element.
3
widthTransition
true
If set to true it transitions the width as well to the new text length.
4
length
500
Length of the transition in miliseconds.
5
callback
function()
Callback function that gets called when the transition finishes.
HR.Phone.functions.close()
function someFunction() {
HR.Phone.functions.close();
});
Closes the phone.
HR.Phone.functions.open()
function someFunction() {
let success = HR.Phone.functions.open();
});
