Revision 2313b522
Von Sven Schöling vor fast 10 Jahren hinzugefügt
| js/autocomplete_part.js | ||
|---|---|---|
| 13 | 13 |
PAGE_UP: 33, |
| 14 | 14 |
PAGE_DOWN: 34, |
| 15 | 15 |
}; |
| 16 |
var CLASSES = {
|
|
| 17 |
PICKED: 'partpicker-picked', |
|
| 18 |
UNDEFINED: 'partpicker-undefined', |
|
| 19 |
FAT_SET_ITEM: 'partpicker_fat_set_item', |
|
| 20 |
} |
|
| 16 | 21 |
var o = $.extend({
|
| 17 | 22 |
limit: 20, |
| 18 | 23 |
delay: 50, |
| 19 |
fat_set_item: $real.hasClass('partpicker_fat_set_item'),
|
|
| 24 |
fat_set_item: $real.hasClass(CLASSES.FAT_SET_ITEM),
|
|
| 20 | 25 |
}, options); |
| 21 | 26 |
var STATES = {
|
| 22 |
UNIQUE: 1,
|
|
| 23 |
UNDEFINED: 0,
|
|
| 27 |
PICKED: CLASSES.PICKED,
|
|
| 28 |
UNDEFINED: CLASSES.UNDEFINED
|
|
| 24 | 29 |
} |
| 25 | 30 |
var real_id = $real.attr('id');
|
| 26 | 31 |
var $dummy = $('#' + real_id + '_name');
|
| ... | ... | |
| 31 | 36 |
var state = STATES.PICKED; |
| 32 | 37 |
var last_real = $real.val(); |
| 33 | 38 |
var last_dummy = $dummy.val(); |
| 34 |
var last_unverified_dummy = $dummy.val(); |
|
| 35 | 39 |
var timer; |
| 36 | 40 |
|
| 37 | 41 |
function open_dialog () {
|
| ... | ... | |
| 39 | 43 |
url: 'controller.pl?action=Part/part_picker_search', |
| 40 | 44 |
data: $.extend({
|
| 41 | 45 |
real_id: real_id, |
| 42 |
}, ajax_data(last_unverified_dummy)),
|
|
| 46 |
}, ajax_data($dummy.val())),
|
|
| 43 | 47 |
id: 'part_selection', |
| 44 | 48 |
dialog: {
|
| 45 | 49 |
title: k.t8('Part picker'),
|
| ... | ... | |
| 82 | 86 |
state = STATES.PICKED; |
| 83 | 87 |
last_real = $real.val(); |
| 84 | 88 |
last_dummy = $dummy.val(); |
| 89 |
last_unverified_dummy = $dummy.val(); |
|
| 85 | 90 |
$real.trigger('change');
|
| 86 | 91 |
|
| 87 | 92 |
if (o.fat_set_item && item.id) {
|
| ... | ... | |
| 95 | 100 |
} else {
|
| 96 | 101 |
$real.trigger('set_item:PartPicker', item);
|
| 97 | 102 |
} |
| 103 |
annotate_state(); |
|
| 98 | 104 |
} |
| 99 | 105 |
|
| 100 | 106 |
function make_defined_state () {
|
| 101 |
if (state == STATES.PICKED) |
|
| 107 |
if (state == STATES.PICKED) {
|
|
| 108 |
annotate_state(); |
|
| 102 | 109 |
return true |
| 103 |
else if (state == STATES.UNDEFINED && $dummy.val() == '') |
|
| 110 |
} else if (state == STATES.UNDEFINED && $dummy.val() == '')
|
|
| 104 | 111 |
set_item({})
|
| 105 |
else |
|
| 112 |
else {
|
|
| 106 | 113 |
last_unverified_dummy = $dummy.val(); |
| 107 | 114 |
set_item({ id: last_real, name: last_dummy })
|
| 115 |
} |
|
| 116 |
annotate_state(); |
|
| 117 |
} |
|
| 118 |
|
|
| 119 |
function annotate_state () {
|
|
| 120 |
if (state == STATES.PICKED) |
|
| 121 |
$dummy.removeClass(STATES.UNDEFINED).addClass(STATES.PICKED); |
|
| 122 |
else if (state == STATES.UNDEFINED && $dummy.val() == '') |
|
| 123 |
$dummy.removeClass(STATES.UNDEFINED).addClass(STATES.PICKED); |
|
| 124 |
else {
|
|
| 125 |
last_unverified_dummy = $dummy.val(); |
|
| 126 |
$dummy.addClass(STATES.UNDEFINED).removeClass(STATES.PICKED); |
|
| 127 |
} |
|
| 108 | 128 |
} |
| 109 | 129 |
|
| 110 | 130 |
function update_results () {
|
| ... | ... | |
| 160 | 180 |
/* note: |
| 161 | 181 |
* event.which does not contain tab events in keypressed in firefox but will report 0 |
| 162 | 182 |
* chrome does not fire keypressed at all on tab or escape |
| 163 |
* TODO: users expect tab to work on keydown but enter to trigger on keyup, |
|
| 164 |
* should be handled seperately |
|
| 165 | 183 |
*/ |
| 166 | 184 |
$dummy.keydown(function(event){
|
| 167 |
if (event.which == KEY.ENTER || event.which == KEY.TAB) { // enter or tab or tab
|
|
| 185 |
if (event.which == KEY.ENTER || event.which == KEY.TAB) {
|
|
| 168 | 186 |
// if string is empty assume they want to delete |
| 169 | 187 |
if ($dummy.val() == '') {
|
| 170 | 188 |
set_item({});
|
| ... | ... | |
| 172 | 190 |
} else if (state == STATES.PICKED) {
|
| 173 | 191 |
return true; |
| 174 | 192 |
} |
| 193 |
if (event.which == KEY.TAB) event.preventDefault(); |
|
| 175 | 194 |
$.ajax({
|
| 176 | 195 |
url: 'controller.pl?action=Part/ajax_autocomplete', |
| 177 | 196 |
dataType: "json", |
| 178 | 197 |
data: $.extend( ajax_data($dummy.val()), { prefer_exact: 1 } ),
|
| 179 |
success: function (data){
|
|
| 198 |
success: function (data) {
|
|
| 180 | 199 |
if (data.length == 1) {
|
| 181 | 200 |
set_item(data[0]); |
| 182 | 201 |
if (event.which == KEY.ENTER) |
| ... | ... | |
| 184 | 203 |
} else if (data.length > 1) {
|
| 185 | 204 |
if (event.which == KEY.ENTER) |
| 186 | 205 |
open_dialog(); |
| 187 |
else |
|
| 188 |
make_defined_state(); |
|
| 189 | 206 |
} else {
|
| 190 |
if (event.which == KEY.TAB) |
|
| 191 |
make_defined_state(); |
|
| 192 | 207 |
} |
| 208 |
annotate_state(); |
|
| 193 | 209 |
} |
| 194 | 210 |
}); |
| 195 | 211 |
if (event.which == KEY.ENTER) |
| ... | ... | |
| 201 | 217 |
|
| 202 | 218 |
$dummy.blur(function(){
|
| 203 | 219 |
window.clearTimeout(timer); |
| 204 |
timer = window.setTimeout(make_defined_state, 100);
|
|
| 220 |
timer = window.setTimeout(annotate_state, 100);
|
|
| 205 | 221 |
}); |
| 206 | 222 |
|
| 207 | 223 |
// now add a picker div after the original input |
| ... | ... | |
| 222 | 238 |
result_timer: result_timer, |
| 223 | 239 |
set_item: set_item, |
| 224 | 240 |
reset: make_defined_state, |
| 241 |
is_defined_state: function() { return state == STATES.PICKED },
|
|
| 225 | 242 |
init_results: function () {
|
| 226 | 243 |
$('div.part_picker_part').each(function(){
|
| 227 | 244 |
$(this).click(function(){
|
Auch abrufbar als: Unified diff
PartPicker: Tab Event atomar, visuelles Feedback