我们可以在Gitkit Starter套件中添加我们的菜单项“Sign In暨用户信息” （#navbar）？ [英] Could we add our menu items in Gitkit Starter kit "Sign In cum User Info " ( #navbar )?

问题描述

我们可以在。

解决方案

现在，Google Identity Toolkit JavaScript小部件支持自定义菜单项。示例：

  window.google.identitytoolkit.signInButton（
'#navbar'，//接受任何CSS选择器
 {
 widgetUrl：...，
 dropDownMenu：[
 {
'label'：'检查配置'，
'url'：' / config'
}，
 {
'label'：'Sign out'，
'handler'：function（）{google.identitytoolkit.signOut（）;} 
 $，
 {
'label'：'管理帐户'，
'处理程序'：function（）{google.identitytoolkit.manageAccount（）;} 
}，
] 
}; 
  

Could we add our menu items in Starter kit Gitkit NavBar ?
There are two list items in the drop down : Manage Account and Sign Out.
Is it possible to add a third option with a URL link ( say like Update Profile ) ?

The html for the #navbar gets loaded through Javascript code of Gitkit.

I use GAE Python.

Possible solutions which I could think of are :
After my webpage loads completely, I could add my own <li> items to the list of dropdown menu provided by #navbar.
Or
Write a custom "Sign In cum User Info " ( #navbar ) widget.

Is there a better and simpler approach ?

MY REQUEST TO GITKIT TEAM FOR ENHANCEMENT
It would be great if we could provide our custom menu items along with their URL links as options to below JS code which loads #navbar :

<script type=text/javascript>
  window.google.identitytoolkit.signInButton(
    '#navbar', // accepts any CSS selector
    {
      widgetUrl: "http://www.mywebsite.com/oauth2callback",
      signOutUrl: "/", 

      // Example of possible solution ( my suggestion ): 
      custom_menu_item__1__name : "item_1", // My Custom Menu Item 1 
      custom_menu_item__1__link : "http://site/link_url_1", 
      :: 
      custom_menu_item__n__name : "item_1", // My Custom Menu Item n 
      custom_menu_item__n__link : "http://site/link_url_1", 
    }
  );
</script>

UPDATE
Temporary Fix = I have added the needed menu options using jquery temporarily. Code snippet provided below to help anyone with similar needs till official solution arrives :

On page load,

custom_menu_add_job_id = setInterval(function(){ 
        add_custom_menu(); 
    }, 5000); 

function add_custom_menu(){ 
    if ($("#navbar").find(".gitkit-user-card-menu").length){ 
        $(".gitkit-user-card-menu").append($("<li class='gitkit-user-card-menuitem' id='smh_user_profile' tabindex='0'> <img src='/images/person_32x32.png' class='user_profile_menu_icon' > Profile </li>")
            .click(function(){ 
                window.location.href = window.location.protocol + "//" + window.location.host + "/user/"; 
            }) 
        ); 
        clearInterval(custom_menu_add_job_id); 
    } 
}

If you want, you could check it live at ShowMyHall.

解决方案

Customized menu items are now supported in Google Identity Toolkit javascript widget. Examples:

window.google.identitytoolkit.signInButton(
  '#navbar', // accepts any CSS selector
  {
    widgetUrl: "...",
    dropDownMenu: [
        {
          'label': 'Check Configuration',
          'url': '/config'
        },
        {
          'label': 'Sign out',
          'handler': function() {google.identitytoolkit.signOut();}
        },
        {
          'label': 'Manage Account',
          'handler': function() {google.identitytoolkit.manageAccount();}
        },
      ]
  };

这篇关于我们可以在Gitkit Starter套件中添加我们的菜单项“Sign In暨用户信息” （#navbar）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！