UI hooks to easily customize UI elements without patching phone.js

[vieridipaola]

Hi,

Would it be possible to change the InitUi function in phone.js like this?

function InitUi(){

    if(typeof ui_hook_on_init !== 'undefined') ui_hook_on_init();

[...]

    if(typeof ui_hook_on_ready !== 'undefined') ui_hook_on_ready();
}

This would help me to avoid patching phone.js with custom UI and events.

In my custom js file I could do things like:

var ui_hook_on_init = function() {
            welcomeScreen = "<div class=\"UiWindowField scroller\"><p>";
            welcomeScreen += "================<br/>\n";
            welcomeScreen += "MY CUSTOM NOTICE<br/>\n";
            welcomeScreen += "================\n</p>";
            welcomeScreen += "</div>";
}

var ui_hook_on_ready = function() {
    var insertAfter = document.getElementById('BtnAddSomeone');
    insertAfter.insertAdjacentHTML('afterend', '<button id=BtnCustomFlushBuddies><i class="fa fa-eraser"></i></button>');

    $("#txtFindBuddy").on('keydown', function(event){
        event = event || window.event;
        var key = event.keyCode;
        if (key === 13) {
            event.preventDefault();
            customSearchOrCall($("#txtFindBuddy").val());
        }
    });
    $("#BtnCustomFlushBuddies").attr("title", "Handle Contacts")
    $("#BtnCustomFlushBuddies").on('click', function(event){
        handleBuddies();
    });
}

Well, in the latest phone.js I downloaded there seems to be a new phoneOptions variable one could set in a JS "pre-script". That might solve the welcomeScreen example I showed above. Could a usage example of phoneOptions be given? Anyway, I think the ui_hooks are more flexible especially in the on_ready example above.

Thanks

[InnovateAsterisk]

What does BtnCustomFlushBuddies do? There are some new trimming tools.

Also, the welcome screen can easily be over-written with the phoneOptions of a pre-script

var phoneOptions = {
    welcomeScreen: "Enter text here" // or null to remove.
}

[vieridipaola]

customSearchOrCall searches (on Enter key event) contacts in a corporate directory via webservice calls. It allows to call and/or add the contacts to the webphone.

handleBuddies can do two things: flush them all or load a set of corporate contacts depending on the user who logged in.

So, both functions are highly customized.

[vieridipaola]

I see that ui_hook_on_init and ui_hook_on_ready have not been added to the latest release. Is there any inconvenience to adding them? It's perfectly backward-compatible and shouldn't interfere in anything else.

[InnovateAsterisk]

https://github.com/InnovateAsterisk/Browser-Phone/commit/36751ca929ba884ce57c19077d6ac6680adf14d4