Loading...
 

CartoGraf Sticky Login

 Note

Please note, the information below is outdated and obsolete now after Bootstrapification of Tiki.

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 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 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:

jQuery
$('.login_link').click(function(){
		$('.siteloginbar_poppedup').show();
	});


and CSS:
...

Pros and Cons 

Pros
Cons
  1. Can be simple and fast custom jQuery
  1. Reinventing the code when not using an existing lib
  2. One-purpose code only
  3. 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
  4. Would need to introduce more CSS to be supported by Tiki themes

Vote for it ! 

Vote for Method 1
Accept Undecided Reject
2 1 1
  • luci
  • daniam
  • jonnybradley
  • kstingel

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.

CSS code added for CartoGraf theme
#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:

Example
{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:

Example
<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:

Example
<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:

Example
{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
  1. 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.)
  2. 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
  3. Keeps the filled in values in the form fields when re-opened
  4. Allows to maintain the link href attribute pointing to tiki-login.php for non-JS browsers (Accessibility)
  1. The Tiki Login Box TPL Code needs to be copied and/or changed
  2.  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)

Vote for it ! 

Vote for Method 2
Accept Undecided Reject
2 0 1
  • jonnybradley
  • kstingel
  • luci

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.

Example of the wiki page content
{DIV(class="siteloginbar_poppedup")}{MODULE(module=login_box,nobox=y)}{MODULE}{DIV}


Then in a custom module or Custom JS insert this jQuery code:

Example
{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:

Example
<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
  1. Re-uses the ClueTip jQuery plugin
  2. No modifications to the current Tiki code base
  3. Allows to maintain the link href attribute for non-JS browsers
  1. The Module plugin in wiki page needs to be approved after CartoGraf Profile installation
  2. Does not keep the filled in form field values when closed and re-opened
  3. 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
  4. One more http request via Ajax

Vote for it ! 

Vote for Method 3
Accept Undecided Reject
0 0 3
  • luci
  • jonnybradley
  • kstingel

Keywords

The following is a list of keywords that should serve as hubs for navigation within the Tiki development and should correspond to documentation keywords.

Each feature in Tiki has a wiki page which regroups all the bugs, requests for enhancements, etc. It is somewhat a form of wiki-based project management. You can also express your interest in a feature by adding it to your profile. You can also try out the Dynamic filter.

Accessibility (WAI & 508)
Accounting
Administration
Ajax
Articles & Submissions
Backlinks
Banner
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Calendar
Category
Chat
Comment
Communication Center
Consistency
Contacts Address book
Contact us
Content template
Contribution
Cookie
Copyright
Credits
Custom Home (and Group Home Page)
Database MySQL - MyISAM
Database MySQL - InnoDB
Date and Time
Debugger Console
Directory (of hyperlinks)
Documentation link from Tiki to doc.tiki.org (Help System)
Docs
DogFood
Draw
Dynamic Content
Preferences
Dynamic Variable
External Authentication
FAQ
Featured links
Feeds (RSS)
File Gallery
Forum
Friendship Network (Community)
Group
Help
History
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
jQuery
Kaltura video management
Karma
Live Support
Logs (system & action)
Lost edit protection
Mail-in
Map
Menu
Meta Tag
Missing features
Visual Mapping
Mobile
Mods
Modules
MultiTiki
MyTiki
Newsletter
Notepad
OS independence (Non-Linux, Windows/IIS, Mac, BSD)
Organic Groups (Self-managed Teams)
Packages
Payment
PDF
Performance Speed / Load / Compression / Cache
Permission
Poll
Profiles
Quiz
Rating
Realname
Report
Revision Approval
Scheduler
Score
Search engine optimization (SEO)
Search
Security
Semantic links
Share
Shopping Cart
Shoutbox
Site Identity
Slideshow
Smarty Template
Social Networking
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Staging and Approval
Stats
Survey
Syntax Highlighter (Codemirror)
Tablesorter
Tags
Task
Tell a Friend, alert + Social Bookmarking
Terms and Conditions
Theme
TikiTests
Timesheet
Token Access
Toolbar (Quicktags)
Tours
Trackers
TRIM
User Administration
User Files
User Menu
Watch
Webmail and Groupmail
WebServices
Wiki History, page rename, etc
Wiki plugins extends basic syntax
Wiki syntax text area, parser, etc
Wiki structure (book and table of content)
Workspace and perspectives
WYSIWTSN
WYSIWYCA
WYSIWYG
XMLRPC
XMPP




Useful Tools