Page MenuHomePhabricator

Wikipedia search box should allow drag-and-drop in Vector
Closed, ResolvedPublic

Description

All Wikipedias' search boxes should allow drag and boxes, that would improve their usability. I noted that other projects do allow it: they don't have the text 'search' in the box search, which makes that drag and drop doesn't work. I suppose having the text 'search' is desirable, but the drag and box functionality is useful, isn't there a way to make drag and drop possible even with the text ?


Version: unspecified
Severity: minor

Details

Reference
bz26135

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 21 2014, 11:22 PM
bzimport set Reference to bz26135.

This seems specific to Vector. I tested with the Modern and Monobook skins and had no issue. I did have an issue with Vector. If this is only a problem while using the Vector (which presumably makes the bug bigger than just Wikipedias), the summary and product/component should reflect this.

This is not a problem on Safari. Please specify which browsers are having trouble.

It's an issue on Wikipedia with default skin in firefox and IE. Chrome works ok.

Also, strangely the text 'search' appears on Wiktionary with IE, but it does not appear with firefox, and drag and drop works on wiktionary with firefox but it does not work with IE (all on default skin). Chrome works ok on Wiktionary.

Created attachment 7878
Trigger on drop events

I think for older Firefox, we need to hook the "ondragdrop" event of the textfield, and for "ondrop" events for IE. Suggested patch included.

For the latest firefox versions, this seems to be a bug in their input fields 'placeholder' implementation.
https://bugzilla.mozilla.org/show_bug.cgi?id=595310

Attached:

  • Bug 24498 has been marked as a duplicate of this bug. ***

The only reliable and robust way that I have found to accomplish a help text that disappears on dropping and editing is as follows:

Underlay the transparent input field with a div of the same size that holds the help text. Remove the help text for any editing activity. Without a separate div there is no way to untangle the existing help text from the dropped content. Would be nice if you could add this as this bug is slightly annoying in Firefox :-)

<div class="parent">

<div class="help"></div>
<input type="text" class="input" />

</div>

.parent {

position: relative;

}

.input, .help {

position: relative;
background: transparent;
/* more styling here */

}

.help {

position: absolute;
top: 0;
left: 0;
color: #888;
border-color: transparent;
background: white;

}

help.html(helpText);
input.bind('click mouseup mousedown paste drop focus keydown', function(event) {

help.val('');	
input.unbind('click mouseup mousedown paste drop focus keydown');

});

Oops, it must be:

input.unbind('click mouseup mousedown paste drop focus keydown', event);

(In reply to comment #4)

Created attachment 7878 [details]
Trigger on drop events

I think for older Firefox, we need to hook the "ondragdrop" event of the
textfield, and for "ondrop" events for IE. Suggested patch included.

Fixed in r83583, tested in Firefox 3.6 only. If older versions of Firefox require dragdrop, my fix won't work for them because I only hooked the drop event, but I don't have older versions of Firefox to test with anyway. Haven't tested on IE either, will do that now.

Attached:

(In reply to comment #8)

(In reply to comment #4)

Created attachment 7878 [details] [details]
Trigger on drop events

I think for older Firefox, we need to hook the "ondragdrop" event of the
textfield, and for "ondrop" events for IE. Suggested patch included.

Fixed in r83583

I meant r83586

Attached:

(In reply to comment #8)

(In reply to comment #4)

Created attachment 7878 [details] [details]
Trigger on drop events

I think for older Firefox, we need to hook the "ondragdrop" event of the
textfield, and for "ondrop" events for IE. Suggested patch included.

Fixed in r83583, tested in Firefox 3.6 only. If older versions of Firefox
require dragdrop, my fix won't work for them because I only hooked the drop
event, but I don't have older versions of Firefox to test with anyway. Haven't
tested on IE either, will do that now.

r83587 tweaks it to work on IE. Tested with IE8 and IE8-in-IE7-compat-mode.

Closing as FIXED; if there are other browsers that this doesn't work in, please tell me, and I'll see if it's possible to fix it for them.

Attached:

It seems not to be fixed. Tested in Firefox 3.6.15 and IE7.

(In reply to comment #11)

It seems not to be fixed. Tested in Firefox 3.6.15 and IE7.

This code isn't live on Wikipedia yet.