History: CartoGraf Sticky Login
Source of version: 82 (current)
Copy to clipboard
{REMARKSBOX(type="note" title="Note")}Please note, the information below is outdated and obsolete now after ((Bootstrap|Bootstrapification)) of Tiki. {REMARKSBOX}
-=About=-
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 ((doc:CSS_Superfish_Menus|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 [http://twitter.com|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
::{HTML()}<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.11NXC/bT*xJmx*PTEzNTczMDE2ODAyMzYmcHQ9MTM1NzMwMTY4ODk*NiZwPSZkPSZnPTImbz*5NzhkMTZjMjUxZmI*MTk3OGE1MzA4ZDdi/OWVmYjZhYiZvZj*w.gif" /><object name="kaltura_player_1357301679" id="kaltura_player_1357301679" type="application/x-shockwave-flash" allowScriptAccess="always" allowNetworking="all" allowFullScreen="true" height="330" width="400" data="http://www.kaltura.com/index.php/kwidget/wid/0_pfadocde/uiconf_id/7693591"><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="allowFullScreen" value="true" /><param name="bgcolor" value="#000000" /><param name="movie" value="http://www.kaltura.com/index.php/kwidget/wid/0_pfadocde/uiconf_id/7693591"/><param name="flashVars" value=""/><a href="http://corp.kaltura.com">video platform</a><a href="http://corp.kaltura.com/video_platform/video_management">video management</a><a href="http://corp.kaltura.com/solutions/video_solution">video solutions</a><a href="http://corp.kaltura.com/video_platform/video_publishing">video player</a></object>{HTML}::
!! 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:
{CODE(caption="jQuery" wrap="1" colors="javascript")}
$('.login_link').click(function(){
$('.siteloginbar_poppedup').show();
});
{CODE}
and CSS:
...
!!!! Pros and Cons
{SPLIT(fixedsize="y" first="line" edit="y")}::__~~#090:Pros~~__::---::__~~#900:Cons~~__::@@@# Can be simple and fast custom jQuery
---# Reinventing the code when not using an existing lib
# One-purpose code only
# --Can be complicated to contribute to Tiki - lot of code rewrite if implemented to the current login box code logic--
** realized: not more complicated than Method 2 -- luci
# Would need to introduce more CSS to be supported by Tiki themes
{SPLIT}
!!!! Vote for it !
{PROPOSAL(caption="Vote for Method 1")}
-1~1 luci
0~1 jonnybradley
+1~1 daniam
-1~1 kstingel
+1~1 luci{PROPOSAL}
!!! 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.
{CODE(caption="CSS code added for CartoGraf theme" wrap="1" colors="css")}#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;
}{CODE}
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:
{CODE(caption="Example" wrap="1" colors="smarty")} {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}"
{CODE}
Then we need to introduce rel attribute with selector pointing to the element we want to display in a ClueTip so the following line:
{CODE(caption="Example" wrap="1" colors="htmlmixed")}<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>{CODE}
Has to be changed to:
{CODE(caption="Example" wrap="1" colors="htmlmixed")}<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>{CODE}
Last thing: on top of the tpl file or in a custom module or Custom JS insert this Smarty block of jQuery code:
{CODE(caption="Example" wrap="1" colors="smarty")}{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}{CODE}
!!!! Partial Solution Preview with the login form issue
::{youtube movie="http://www.youtube.com/watch?v=65YNXlhoUFM"}::
!!!! Working Solution Preview
::{youtube movie="http://www.youtube.com/watch?v=YyHRHBKfLLE"}::
!!!! Pros and Cons
{SPLIT(fixedsize="y" first="line" edit="y")}::__~~#090:Pros~~__::---::__~~#900:Cons~~__::@@@# Re-uses the ClueTip jQuery plugin so it can use all its benefits (auto-reposition of popup when window small, click or mouseover, close link, etc.)
# Because it is only one more custom tpl file (or none if we implement this to Tiki in general) it will not need to have any plugins approved after profile is applied
# Keeps the filled in values in the form fields when re-opened
# Allows to maintain the link href attribute pointing to tiki-login.php for non-JS browsers (Accessibility)
---# The Tiki Login Box TPL Code needs to be copied and/or changed
# It needs some tpl code logic modification (move some code above the form tag) as seen in the examples above otherwise the login form does not get submitted (see Issues)
{SPLIT}
!!!! Vote for it !
{PROPOSAL(caption="Vote for Method 2")}
0~1 luci
0~1 jonnybradley
+1~1 luci
+1~1 jonnybradley
+1~1 kstingel
-1~1 luci{PROPOSAL}
!!!! 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.
{CODE(caption="Example of the wiki page content" wrap="1" colors="tiki")}{DIV(class="siteloginbar_poppedup")}{MODULE(module=login_box,nobox=y)}{MODULE}{DIV}{CODE}
Then in a custom module or Custom JS insert this jQuery code:
{CODE(caption="Example" wrap="1" colors="smarty")}{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}
{CODE}
It is triggered by clicking on a link with class .login_link via the rel attribute:
{CODE(caption="Example" wrap="1" colors="smarty")}
<a href="tiki-login.php" class="login_link" rel="tiki-index_raw.php?page=Log+In">{tr}Log in{/tr}</a>
{CODE}
!!!! Working Solution Preview
::{youtube movie="http://www.youtube.com/watch?v=_cCCd5YyIHo"}::
!!!! Pros and Cons
{SPLIT(fixedsize="y" first="line" edit="y")}::__~~#090:Pros~~__::---::__~~#900:Cons~~__::@@@# Re-uses the ClueTip jQuery plugin
# No modifications to the current Tiki code base
# Allows to maintain the link href attribute for non-JS browsers
---# The Module plugin in wiki page needs to be approved after CartoGraf Profile installation
# Does not keep the filled in form field values when closed and re-opened
# Implementation via Profile Pages and/or Modules - needs one extra Wiki page and instead of the Login module one Custom/User Module with the "Log In" link
# One more http request via Ajax
{SPLIT}
!!!! Vote for it !
{PROPOSAL(caption="Vote for Method 3")}
0~1 luci
-1~1 jonnybradley
-1~1 luci
-1~1 kstingel{PROPOSAL}