[Libreoffice-commits] .: bug/bug bug/bug.xhtml
Loic Dachary
loic at kemper.freedesktop.org
Wed Oct 26 04:42:37 PDT 2011
bug/bug.xhtml | 2 +-
bug/bug/bug.css | 4 ++--
bug/bug/bug.js | 21 +++++++++++----------
bug/bug/skin.js | 1 +
bug/bug/test.html | 10 +++++++---
bug/bug/test.js | 36 ++++++++++++++++++++++++++++++++----
6 files changed, 54 insertions(+), 20 deletions(-)
New commits:
commit c93dc2d174889d671664f2cce00b6259cfd51522
Author: Loic Dachary <loic at dachary.org>
Date: Wed Oct 26 13:42:26 2011 +0200
Implement a cross browser method to ensure that the file select will always show when the user clicks on a styled <input type='file'> element. This is done by moving the input element so that its rightmost part (which contains the browser button) is always under the mouse. The user won't be able to reach the area when the filename is displayed and this will solve the issues that arise when a browser accepts user input or sets focus in it.
diff --git a/bug/bug.xhtml b/bug/bug.xhtml
index ff75ae1..5df6ec3 100644
--- a/bug/bug.xhtml
+++ b/bug/bug.xhtml
@@ -185,7 +185,7 @@ Platform (if different from the browser):
<div class="input-label">Optionally attach a document or a screenshot. </div>
<div class="attach-file">
- <input type="file" name="data" size="150" />
+ <input type="file" name="data" />
<div class="attach-file-style">
<div><input type="text" name="ignored"></input></div>
<div class="attach-browse">Browse</div>
diff --git a/bug/bug/bug.css b/bug/bug/bug.css
index a2aa76d..34e4377 100644
--- a/bug/bug/bug.css
+++ b/bug/bug/bug.css
@@ -486,6 +486,7 @@ body {
.state_attach .attach-file {
position: relative;
+ overflow: hidden;
height: 38px;
margin-left: 5px;
}
@@ -517,9 +518,8 @@ body {
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
- width: 400px;
+ width: 350px;
height: 39px;
- size: 150;
}
.state_attach .attach-file input[type='text'] {
diff --git a/bug/bug/bug.js b/bug/bug/bug.js
index 555cb07..388f04f 100644
--- a/bug/bug/bug.js
+++ b/bug/bug/bug.js
@@ -189,15 +189,15 @@
state_attach: function() {
var element = $('.state_attach');
if(!element.hasClass('initialized')) {
- if($.browser.msie) {
- // ie allow the input field to get focus, presumably to
- // type the filename. launch the browser instead.
- $("input[type='file']", element).focus(function() {
- $(this).click();
- $(this).blur(); // loose focus so that no caret is shown even when in caret browsing
- });
- }
- $("input[type='file']", element).change(function() {
+ var file_input = $("input[type='file']", element);
+ var container = $('.attach-file', element);
+ container.mousemove(function(e) {
+ file_input.css({
+ 'left': e.pageX - container.offset().left - file_input.outerWidth() + 10,
+ 'top': e.pageY - container.offset().top - 10
+ });
+ });
+ file_input.change(function() {
// http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-March/018981.html
// in a nutshell : deal with it, it won't go away
var path = $(this).val().replace("C:\\fakepath\\","");
@@ -209,7 +209,8 @@
}
},
- state_submit_error_regexps: [/CLASS="THROW_ERROR">([^<]*)/i, /FONT SIZE=\"\+2\">([^<]*)/i],
+ state_submit_error_regexps: [/CLASS="THROW_ERROR">([^<]*)/i, /FONT SIZE=\"\+2\">([^<]*)/i, // bugzilla < 4
+ /<DIV CLASS=\"BOX\">\s+<P>([^<]+)/i], // bugzilla >= 4
state_submit_success_regexp: /TITLE>Bug ([0-9]+)/i,
state_submit_element: 'html',
diff --git a/bug/bug/skin.js b/bug/bug/skin.js
index 8a51ea1..1399fac 100644
--- a/bug/bug/skin.js
+++ b/bug/bug/skin.js
@@ -19,6 +19,7 @@
$.skin = function() {
$('.skin').show();
+ $.bug.frame();
$.bug.compatibility();
function component() {
$.bug.state_component();
diff --git a/bug/bug/test.html b/bug/bug/test.html
index 8014e52..54f2665 100644
--- a/bug/bug/test.html
+++ b/bug/bug/test.html
@@ -152,9 +152,13 @@
<input type="hidden" name="comment" value=""></input>
<div class="state_attach">
<input type="hidden" name="contenttypemethod" value="autodetect"></input>
- <input type="text" name="ignored" value=""></input>
- <input type="text" name="description" value=""></input>
- <input type="file" name="data"></input>
+ <div class="attach-file">
+ <input type="file" name="data" />
+ <div class="attach-file-style">
+ <div><input type="text" name="ignored"></input></div>
+ <div class="attach-browse">Browse</div>
+ </div>
+ </div>
</div>
<div class="state state_submit">
<input type="submit" value="Submit"></input>
diff --git a/bug/bug/test.js b/bug/bug/test.js
index 5ea1f8a..0f3ef00 100644
--- a/bug/bug/test.js
+++ b/bug/bug/test.js
@@ -232,7 +232,7 @@ test("state_description", function() {
});
test("state_submit", function() {
- expect(27);
+ expect(30);
var state_success = $.bug.state_success;
$.bug.state_success = function() { ok(true, 'state_success'); };
@@ -282,14 +282,18 @@ test("state_submit", function() {
var error = ' ERROR ';
equal($('.error').text(), '', 'error is not set');
- $(['<div><div><table cellpadding="20"> <tr> <td bgcolor="#ff0000"> <font size="+2">' + error + '</font> </td> </tr> </table></div></div>', '<div><div><div class="throw_error">' + error + '</div></div></div>']).each(function(index, str) {
+ // make sure you enclose the useful elements with <div><div> ... </div></div>
+ $(['<div><div><table cellpadding="20"> <tr> <td bgcolor="#ff0000"> <font size="+2">' + error + '</font> </td> </tr> </table></div></div>',
+ '<div><div><div class="throw_error">' + error + '</div></div></div>',
+ '<div><div><div class="box">\n <p>' + error + '</p></div></div></div>'
+ ]).each(function(index, str) {
$('#submissionoutput').html(str);
var caught = false;
try {
$('#submissionoutput').load();
} catch(e) {
equal($('.error').text(), error, 'text ' + str);
- equal(e[1], error, 'catch ' + str);
+ equal(e[1], error, 'catch ' + str + e);
caught = true;
}
ok(caught, 'caught', str);
@@ -313,13 +317,37 @@ test("state_success", function() {
});
test("state_attach", function() {
- expect(2);
+ expect(4);
var element = $('.state_attach');
equal(element.css('display'), 'none');
$.bug.state_attach();
equal(element.css('display'), 'block');
+ var container = $('.attach-file', element);
+ var container_offset = container.offset();
+ var file_input = $("input[type='file']", element);
+ var file_input_width = file_input.outerWidth();
+
+
+ equal(file_input.css('left'), 'auto');
+
+ //
+ // place the mouse to the left of the container
+ // at a position where it is certain that the input type='file'
+ // width will not fit.
+ //
+ var event = jQuery.Event("mousemove");
+ event.pageX = container_offset.left + file_input_width / 2;
+ event.pageY = container_offset.top;
+ container.trigger(event);
+ //
+ // The input type='file' left position is to the left of the container,
+ // hence a negative number starting with a -
+ // This is proof that the input type='file' has been moved so that its
+ // rightmost part is under the mouse at all times.
+ //
+ equal(file_input.css('left').substr(0, 1), '-', 'left = ' + file_input.css('left'));
});
test("logged_in", function() {
More information about the Libreoffice-commits
mailing list