Fix crappedness with post popup panel hiding on blur
Reported by Ed Finkler | July 9th, 2010 @ 01:06 PM | in Version 0.10
So right now, the post popup panel, which has the shortening buttons and other controls in it, appears when the textarea gets focus, and disappears when it blurs. This is problematic because it means when we click on the post panel to do something, the panel is dismissed. This gets even weirder when we use the new shortening menu, because it is giving the textarea focus again, but it doesn't make the post panel reappear, which means you have to blur and re-focus manually to get it back.
Ick.
So we need to do a better job. I made a little test doc that might give us a better way. Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Ed Finkler">
<!-- Date: 2010-07-09 -->
<script src="spazcore/examples/js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="spazcore/examples/spazcore-standard.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
.focused {
background-color:#CCCCFF;
}
#panel {
padding:5px;
background:#CCC;
border:2px solid [#333](/projects/32566/tickets/333 "Ticket #333");
color:#333;
}
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var panelClicked = false;
$('#panel').hide();
$('#textbox')
.focus(function(e){
$(this).addClass('focused');
$('#panel').fadeIn(200);
})
.blur(function(e){
if (panelClicked === false) {// && $(this).val().length < 1) {
$('#panel').fadeOut(200);
panelClicked = false;
}
$(this).removeClass('focused');
});
$('#pushbutton')
.focus(function(e){
return false;
})
.click(function(e){
$('#textbox').get(0).focus();
$('#textbox').val('clicked!');
return false;
});
$('#panel')
.mousedown(function(e) {
panelClicked = true;
})
.mouseup(function(e) {
panelClicked = false;
$('#textbox').get(0).focus();
});
});
</script>
</head>
<body>
<div id="container">
<textarea name="" id="textbox" cols="30" rows="10"></textarea>
<div id="panel">
This is the panel!
<button id="pushbutton">Foobar</button>
</div>
</div>
</body>
</html>
Comments and changes to this ticket
-
Ed Finkler July 9th, 2010 @ 01:45 PM
- State changed from “new” to “resolved”
Basically implemented as above, and seems like an improvement. Shorten menu clicks still flash the panel, but that could be worked around if necessary.
Please Sign in or create a free account to add a new ticket.
With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.
Create new ticket
Create your profile
Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป
The Spaz Desktop project
Ed Finkler