Better user friendly login pop-up box for CartoGraf and possibly for Tiki in general too.
Current Tiki Login Box
Current Tiki Login Box re-uses the CSSMenus (Superfish menus) code. Code re-use is good but the problem is cssmenus are meant for menus and open on mouseover so when user hovers over the Log In link, the login box appears and unless the user clicks in the login form fields and starts entering the login credentials the popped-up box can disappear when mouse cursor moves out of the box, which is annoying. Marc proposed to change the behavior from on
Problem Demonstration
Proposed Solutions
Here are some proposed solutions for the on
Method 1 - Custom jQuery Code
Custom jQuery code. For CartoGraf done probably as one more tpl file: templates/styles/CartoGraf/modules/mod-login_box.tpl which overrides the general tpl or modify the current tpl file or completely new Tiki module ?
Code would be something like:
$('.login_link').click(function(){ $('.siteloginbar_poppedup').show(); });
and CSS:
...
Pros and Cons
Pros |
Cons |
|
|
Vote for it !
Accept | Undecided | Reject |
---|---|---|
2 | 1 | 1 |
|
|
|
Method 2 - ClueTip on Current Tiki Pop-up Login Box
Use ClueTip + current Tiki Login Box module. It looks a bit complicated but in fact it isn't. It is just few lines of CSS and a little modification of mod-login_box.tpl.
#top_modules .cssmenu_horiz a, #top_modules .box-login_box a { color: #333; line-height: 38px; outline: 0 none; padding: 0 15px; } .box-login_box ul, .siteloginbar_poppedup { list-style: none; margin: 0; padding: 0; } .cluetip-transparent { top: 0 !important; } .cluetip-transparent .ui-cluetip-content { padding: 0; } .cluetip-transparent.ui-widget-content, .cluetip-transparent .ui-widget-content { background: none; border: none; } .ui-cluetip a { color: #fff !important; }
File mod-login_box.tpl has to be copied to templates/styles/CartoGraf/modules/ and/or modified. This is only partial solution for now, because it It needs reshuffling the code logic a bit so we get the local cloned pop-up code to include the form tag, otherwise the form does not get submitted.
It means the part of the code needs to be moved one line above the form tag so it looks like:
{if $mode eq "popup"} <div class="siteloginbar_popup"> <ul class="clearfix"> <li id="logout_link_{$module_logo_instance}"><div class="tabmark"><a class="login_link" rel=".siteloginbar_poppedup">{tr}Log in{/tr}<span class="sf-sub-indicator"> »</span></a></div> <ul id="cluelogin_{$module_logo_instance}" class="siteloginbar_poppedup"> <li class="tabcontent"> {capture assign="close_tags"}</li></ul></li></ul></div>{$close_tags}{/capture} {/if} <form name="loginbox" id="loginbox-{$module_logo_instance}" action="{if $prefs.https_login eq 'encouraged' || $prefs.https_login eq 'required' || $prefs.https_login eq 'force_nocheck'}{$base_url_https}{/if}{$prefs.login_url}"
Then we need to introduce rel attribute with selector pointing to the element we want to display in a ClueTip so the following line:
<li id="logout_link_{$module_logo_instance}"><div class="tabmark"><a class="login_link">{tr}Log in{/tr}<span class="sf-sub-indicator"> »</span></a></div>
Has to be changed to:
<li id="logout_link_{$module_logo_instance}"><div class="tabmark"><a class="login_link" rel=".siteloginbar_poppedup">{tr}Log in{/tr}<span class="sf-sub-indicator"> »</span></a></div>
Last thing: on top of the tpl file or in a custom module or Custom JS insert this Smarty block of jQuery code:
{jq} $('.login_link').cluetip({ activation: 'click', arrows: false, showTitle: false, cluetipClass: 'transparent', dropShadow: false, escapeTitle: false, local: true, positionBy: 'auto', sticky: false, topOffset: 0, fx: { open: 'fadeIn', // can be 'show' or 'slideDown' or 'fadeIn' openSpeed: '200' }, width: 'auto', onShow: function() { $('#main').one('mousedown',function() { $(document).trigger('hideCluetip'); }) } }); {/jq}
Partial Solution Preview with the login form issue
Working Solution Preview
Pros and Cons
Pros |
Cons |
|
|
Vote for it !
Accept | Undecided | Reject |
---|---|---|
2 | 0 | 1 |
|
|
Issues
-
Login does not work because the ClueTip cloned piece of code does not include the form tag- fixed by moving code logic in tpl file — luci - Current (Jan 2013) thoughts seem to be to replace the current "popup" login module mode with something like this - will do in trunk soon (jb)
-
Working on it— luci- Implemented in trunk (r44480 to r44482) — luci
-
- Found new issue which I do not know solution for: the browser autocomplete/remember user and password feature does not work at that ClueTip cloned form — luci
- Seems to be a real deal breaker resolvable only by tricky jQuery DOM hacks - going for Method 1 now — luci
- Some Tiki themes need to be updated to introduce background color on the login popup
- As the position where the ClueTip appears is computed/based on coordinates of mouse cursor click, it does not pop-up always at the exact same pixel perfect position - workaround is to override with CSS: .cluetip-transparent {top: XXpx !important;} but that is not all-in-one solution, because themes have different headers and if site logo is replaced or module is introduced the height of site header changes...
Method 3 - ClueTip with Ajax Load of a Wiki Page with Login Box
Use custom ClueTip code and a wiki page with Login Box module loaded via Ajax call of tiki-index_raw.php?page=Log+In. When using tiki-index_raw.php instead of tiki-index.php it loads only the wiki page content part, which is ideal for this purpose.
{DIV(class="siteloginbar_poppedup")}{MODULE(module=login_box,nobox=y)}{MODULE}{DIV}
Then in a custom module or Custom JS insert this jQuery code:
{jq} $('.login_link').cluetip({ activation: 'click', arrows: false, closePosition: 'bottom', closeText: 'Close', cursor: 'hand', showTitle: false, cluetipClass: 'transparent', dropShadow: false, local: false, hideLocal: true, multiple: true, positionBy: 'auto', sticky: true, topOffset: 0, fx: { open: 'fadeIn', // can be 'show' or 'slideDown' or 'fadeIn' openSpeed: '200' }, width: 'auto', ajaxSettings: { dataType: 'html' }, onshow: function() { $('#main').one('mousedown',function() { $(document).trigger('hideCluetip'); }) } }); {/jq}
It is triggered by clicking on a link with class .login_link via the rel attribute:
<a href="tiki-login.php" class="login_link" rel="tiki-index_raw.php?page=Log+In">{tr}Log in{/tr}</a>
Working Solution Preview
Pros and Cons
Pros |
Cons |
|
|
Vote for it !
Accept | Undecided | Reject |
---|---|---|
0 | 0 | 3 |
|