Feature #19640
closedSensible Focus/Blur behaviour for toolbar-item menus like OS-menus
0%
Description
Makes toolbar-item menu close on blur (like our beloved OS-level applications).
Actually makes the file "toolbarmanager.js" reduntant, if nobody sees any necessity for "hideOthers".
I provide "clearcachemnu.js" with explatory comments here, to explain, why and how this works - it serves also as a guide for extension I may not create patches for (like "dev-links" and "t3dev"):
/***************************************************************- Copyright notice *
- (c) 2007 Ingo Renner <ingo@typo3.org>
- All rights reserved *
- This script is part of the TYPO3 project. The TYPO3 project is
- free software; you can redistribute it and/or modify
- it under the terms of the GNU General Public License as published by
- the Free Software Foundation; either version 2 of the License, or
- (at your option) any later version. *
- The GNU General Public License can be found at
- http://www.gnu.org/copyleft/gpl.html.
- A copy is found in the textfile GPL.txt and important notices to the license
- from the author is found in LICENSE.txt distributed with these scripts. * *
- This script is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU General Public License for more details. *
- This copyright notice MUST APPEAR in all copies of the script!
*******************************************************/
/**
* class to handle the clear cache menu
*
* $Id$
*/
var ClearCacheMenu = Class.create({
/**
* registers for resize event listener and executes on DOM ready
*/
initialize: function() {
Event.observe(window, 'resize', this.positionMenu);
Event.observe(window, 'load', function(){
this.positionMenu();
this.toolbarItemIcon = $$('#clear-cache-actions-menu .toolbar-item img')[0].src;
// -- don't observe the group, it's not nessessary
// Event.observe('clear-cache-actions-menu', 'click', this.toggleMenu);
// + oberserve the toggle on click (which implies :focus)
// + oberserve the toggle on blur
var toolbarGroup = $$('#clear-cache-actions-menu')[0];
var toolbarItem = $$('#clear-cache-actions-menu > .toolbar-item')[0];
// ++ oberserve the trigger-element, not the group
Event.observe(toolbarItem, 'click', this.toggleMenu);
Event.observe(toolbarItem, 'blur' , this.toggleMenu);
// observe all clicks on clear cache actions in the menu
$$('#clear-cache-actions-menu li a').each(function(element) {
Event.observe(element, 'click', this.clearCache.bind(this));
}.bindAsEventListener(this));
}.bindAsEventListener(this));
},
/**
* positions the menu below the toolbar icon, let's do some math!
*/
positionMenu: function() {
var calculatedOffset = 0;
var parentWidth = $('clear-cache-actions-menu').getWidth();
var ownWidth = $$('#clear-cache-actions-menu ul')[0].getWidth();
var parentSiblings = $('clear-cache-actions-menu').previousSiblings();
parentSiblings.each(function(toolbarItem) {
calculatedOffset += toolbarItem.getWidth() - 1;
// -1 to compensate for the margin-right -1px of the list items,
// which itself is necessary for overlaying the separator with the active state background
if(toolbarItem.down().hasClassName('no-separator')) {
calculatedOffset -= 1;
}
});
calculatedOffset = calculatedOffset - ownWidth + parentWidth;
$$('#clear-cache-actions-menu ul')[0].setStyle({
left: calculatedOffset + 'px'
});
},
/**
* toggles the visibility of the menu and places it under the toolbar icon
*/
toggleMenu: function(event) {
// +- don't restrict the element to be an anchor, if you change it later you have to fix more
// var toolbarItem = $$('#clear-cache-actions-menu > a')[0];
var toolbarItem = $$('#clear-cache-actions-menu > .toolbar-item' )[0];
var menu = $$('#clear-cache-actions-menu > .toolbar-item-menu')[0];
// - don't manually blur! you can use the :focus{outline: none;} [FF0, Safari, Opera]
// - or for IE, set the attribute .hideFocus instead! [IE5.5]
// +- some IE apply the :active, so :active{outline: none;} [IE5.5, IE6]
// toolbarItem.blur();
toolbarItem.hideFocus = true;
// ++ on blur we just hide it, no need to create additional functions
if(!toolbarItem.hasClassName('toolbar-item-active') && !event.type.match(/blur/)) {
toolbarItem.addClassName('toolbar-item-active');
Effect.Appear(menu, {duration: 0.2});
// -- principly this is not nessessary anymore, other toolbars loosing focus will close automatically
// TYPO3BackendToolbarManager.hideOthers(toolbarItem);
} else {
toolbarItem.removeClassName('toolbar-item-active');
Effect.Fade(menu, {duration: 0.1});
}
if (event) {
Event.stop(event);
}
},
/**
* calls the actual clear cache URL using an asynchronious HTTP request
*
* @param Event prototype event object
*/
clearCache: function(event) {
var toolbarItemIcon = $$('#clear-cache-actions-menu .toolbar-item img')[0];
toolbarItemIcon.src = 'gfx/spinner.gif';
if (event) {
var url = Event.element(event).href;
if (url) {
new Ajax.Request(url, {
'method': 'get',
'onComplete': function() {
toolbarItemIcon.src = this.toolbarItemIcon;
}.bind(this)
});
}
Event.stop(event);
}
// -- before you had to do this because you stopped the event because you
// -- listened to the group-click, now the click does listen to the trigger-element
// -- which we (toolbar-item) are now no child of anymore
// this.toggleMenu();
}
});
var TYPO3BackendClearCacheMenu = new ClearCacheMenu();
(issue imported from #M9833)
Files
Updated by Niels Fröhling almost 16 years ago
Ah, well, a not:
I tested on IE6, IE7, Opera, Safari, FF3, works.
Updated by Ingo Renner almost 16 years ago
Niels, please follow these instructions:
http://typo3.org/development/bug-fixing/diff-and-patch/
we want only one diff file!
Updated by Dmitry Dulepov almost 16 years ago
Niels, you actually can create patches :) Checkout extension from the SVN, modify it as you want and diff to SVN. You do not need svn write permissions for it! You can also use SVN "add" functionality to insert your new files in diff. This also does not require write permissions to svn but gives you proper patch as one file. Just tell SVN to add files and make a diff.
Updated by Ingo Renner almost 16 years ago
posting a review here as the list server is not reachable right now, will post it in the NG later:
- remove all the IE-proprietary toolbarItem.hideFocus = true; commands
- remove all the spaces before the closing parantheses: $$('#clear-cache-actions-menu > .toolbar-item' )[0];
- use String.include() or other prototype String methods instead of event.type.match(/blur/)
- remove all var toolbarGroup = $$('...')[0]; which you don't use
- do not make the css selectors more restrictive than they need to be, remove the > you added in $$('#backend-search-menu > .toolbar-item-menu')[0]; and similar places again. These things may change and it's not even certain that the menu needs to be a direct decendent of the anchor
- put variable declarations such as var toolbarGroup and var toolbarItem at the beginning of functions (workspacemenu.js)
- also make the changes for the open docs (EXT:opendocs) and actions (EXT:sys_actions) menus
Updated by Niels Fröhling almost 16 years ago
I didn't "add" any descendent-selector, look above. I even relaxed from tag to class.
I'm going to do the corrections ASAP.
Updated by Niels Fröhling almost 16 years ago
I hope this is it, changes uploaded. :)
Updated by Benni Mack over 14 years ago
Niels, could you please respond to the comments in the core list? thanks.
Updated by Dmitry Dulepov about 13 years ago
- Status changed from Needs Feedback to Closed
- Target version deleted (
0)
No feedback provided within 90 days. Closing the issue.