CartoGraf Sticky Login

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 onmouseover to onclick, like for example Twitter Login Box does. AFAIK (As Far As I Know) it is not possible to change the event trigger from onmouseover to onclick easily via CSSMenus options and all CSS theming changes affect that login pop-up too, so it is not ideal choice for Login pop-up imho — luci.

Problem Demonstration

Proposed Solutions

Here are some proposed solutions for the onclick sticky login box. That link click confusion issue was already partly fixed in Tiki 10.x branch. But the onclick login box popup needs to be implemented yet. For Tiki in general - do we need a preference for onmouse over vs onclick ?

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

Vote for it !

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

Vote for it !

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

Vote for it !