Skip to content

Commit

Permalink
modernize structure
Browse files Browse the repository at this point in the history
  • Loading branch information
@lenadax
lenadax committed Dec 16, 2024
1 parent 1982cb4 commit a162aa3
Show file tree
Hide file tree
Showing 10 changed files with 114 additions and 206 deletions.
2 changes: 1 addition & 1 deletion js/src/bootstrap5/widget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export class AutocompleteWidget extends BaseAutocomplete {
* Compiles the necessary HTML structure.
*/
compile() {
this.input_elem = $('input.autocomplete', this.elem)
this.input_elem
.attr('spellcheck', false)
.attr('autocomplete', 'off');
this.dd_elem = $('<div />')
Expand Down
57 changes: 17 additions & 40 deletions js/src/default/widget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,18 +75,18 @@ export class AutocompleteWidget {
constructor(elem) {
elem.data('yafowil-autocomplete', this);
this.elem = elem;
this.result_key_elem = $('input.autocomplete-result-key', elem);
this.result_input = $('input.autocomplete-result', elem);
this.input_elem = $('input.autocomplete', elem);
this.delay = this.input_elem.data('delay');
this.sourcetype = this.input_elem.data('type');
this.min_length = this.input_elem.data('minLength');

this.Suggestion = AutocompleteSuggestion;
this.compile();

this.suggestions = [];
this.current_focus = 0;

let options = this.parse_options();
this.sourcetype = options.type;
this.delay = options.delay;
this.min_length = options.minLength;

this.parse_source();

this.on_input = this.on_input.bind(this);
Expand All @@ -102,7 +102,7 @@ export class AutocompleteWidget {
}

compile() {
this.input_elem = $('input.autocomplete', this.elem)
this.input_elem
.attr('spellcheck', false)
.attr('autocomplete', 'off');
this.dd_elem = $(`<div />`)
Expand All @@ -118,30 +118,8 @@ export class AutocompleteWidget {
.off('keydown', this.on_keydown);
}

parse_options() {
let rawparams = $('.autocomplete-params', this.elem).text().split('|'),
options = [];

for (let i = 0; i < rawparams.length; i++) {
let pair = rawparams[i].split(',');
let value = pair[1].replace(/^\s+|\s+$/g, "");
if (!isNaN(value)) {
value = parseInt(value);
} else
if (value === 'True') {
value = true;
} else
if (value === 'False') {
value = false;
}
let key = pair[0].replace(/^\s+|\s+$/g, "");
options[key] = value;
}
return options;
}

parse_source() {
let source = $('.autocomplete-source', this.elem).text();
const source = this.input_elem.data('source');

if (source.indexOf('javascript:') === 0) {
let src = source.substring(11, source.length).split('.');
Expand Down Expand Up @@ -257,9 +235,7 @@ export class AutocompleteWidget {
if (this.current_focus > -1) {
let selected_elem = this.suggestions[this.current_focus];
selected_elem.select();
this.input_elem.val(selected_elem.value);
this.hide_dropdown();
this.input_elem.trigger('blur');
this.select_suggestion(selected_elem.id, selected_elem.value);
}
break;

Expand All @@ -272,9 +248,8 @@ export class AutocompleteWidget {
this.hide_dropdown();
if (this.current_focus > -1) {
let selected_elem = this.suggestions[this.current_focus];
this.input_elem.val(selected_elem.value);
this.hide_dropdown();
this.input_elem.trigger('blur');
selected_elem.select();
this.select_suggestion(selected_elem.id, selected_elem.value);
}
break;

Expand Down Expand Up @@ -317,20 +292,22 @@ export class AutocompleteWidget {
break;
default:
// remove result key when user is typing
this.result_key_elem.val('');
this.result_input.val('');
}
}

select_suggestion(key, val) {
this.input_elem.val(val).trigger('blur');
this.hide_dropdown();
this.input_elem.val(val);
if (key) {
this.result_key_elem.val(key);
this.result_input.val(key);
} else {
this.result_input.val(val);
}
}

unselect_all() {
this.result_key_elem.val('');
this.result_input.val('');
for (let suggestion of this.suggestions) {
suggestion.selected = false;
}
Expand Down
66 changes: 20 additions & 46 deletions js/tests/test_widget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ let css_link;
QUnit.module('AutocompleteWidget', hooks => {
let elem;
let widget;
let arr = "|one|two|three|four|";
let params = "delay,0|minLength,0|type,local";
let _array_subscribers = {
on_add: []
};
Expand All @@ -23,7 +21,7 @@ QUnit.module('AutocompleteWidget', hooks => {
});
hooks.beforeEach(() => {
$('body').append(container);
elem = create_elem(arr, params);
elem = create_elem(0, 0, "|one|two|three|four|", 'local');
container.append(elem);
});
hooks.afterEach(() => {
Expand All @@ -44,8 +42,6 @@ QUnit.module('AutocompleteWidget', hooks => {
assert.deepEqual(widget.elem, elem);
assert.ok(widget.input_elem.is('input.autocomplete'));
assert.ok(widget.dd_elem.is('div.autocomplete-dropdown'));

assert.ok(widget.parse_options);
assert.ok(widget.parse_source);

assert.ok(widget.on_input);
Expand Down Expand Up @@ -81,7 +77,7 @@ QUnit.module('AutocompleteWidget', hooks => {
.append($('<td />'))
.appendTo('body');
$('td', table).addClass('arraytemplate');
let el = create_elem(arr, params);
let el = create_elem(0, 0, "|one|two|three|four|", 'local');
el.appendTo($('td', table));

// invoke array on_add - returns
Expand All @@ -100,33 +96,15 @@ QUnit.module('AutocompleteWidget', hooks => {
delete window.yafowil;
});

QUnit.test('parse_options', assert => {
AutocompleteWidget.initialize();
widget = elem.data('yafowil-autocomplete');
assert.strictEqual(widget.sourcetype, 'local');
assert.strictEqual(widget.delay, 0);
assert.strictEqual(widget.min_length, 0);
});

QUnit.test('parse_options() true/false', assert =>{
$('.autocomplete-params').text('delay,False|minLength,True|type,local');
AutocompleteWidget.initialize();
widget = elem.data('yafowil-autocomplete');

assert.strictEqual(widget.delay, false);
assert.strictEqual(widget.min_length, true);
});

QUnit.module('parse_source()', () => {
QUnit.test('function 1', assert => {
let arr = ['one', 'two', 'three']
$('div.autocomplete-params').text('delay,0|minLength,0');
$('.autocomplete', elem).data('source', 'javascript:foo.bar');
window.foo = {
bar: function(request, response) {
response(arr);
}
}
$('div.autocomplete-source').text('javascript:foo.bar');
AutocompleteWidget.initialize();
widget = elem.data('yafowil-autocomplete');
widget.autocomplete();
Expand All @@ -145,15 +123,14 @@ QUnit.module('AutocompleteWidget', hooks => {

QUnit.test('function 2', assert => {
let arr = ['one', 'two', 'three']
$('div.autocomplete-params').text('delay,0|minLength,0');
$('.autocomplete', elem).data('source', 'javascript:foo.bar.baz');
window.foo = {
bar: {
baz: function(request, response) {
response(arr);
}
}
}
$('div.autocomplete-source').text('javascript:foo.bar.baz');
AutocompleteWidget.initialize();
widget = elem.data('yafowil-autocomplete');
widget.autocomplete();
Expand All @@ -171,8 +148,7 @@ QUnit.module('AutocompleteWidget', hooks => {
});

QUnit.test('function error', assert => {
$('div.autocomplete-params').text('delay,0|minLength,0');
$('div.autocomplete-source').text('javascript:foo.bar');
$('.autocomplete', elem).data('source', 'javascript:foo.bar');
window.foo = {};
assert.throws(
function () {
Expand All @@ -189,8 +165,8 @@ QUnit.module('AutocompleteWidget', hooks => {
});

QUnit.test('local error', assert => {
$('div.autocomplete-params').text('delay,0|minLength,0|type,local');
$('div.autocomplete-source').text('');
$('.autocomplete', elem).data('type', 'local');
$('.autocomplete', elem).data('source', '');
assert.throws(
function () {
AutocompleteWidget.initialize();
Expand All @@ -214,7 +190,7 @@ QUnit.module('AutocompleteWidget', hooks => {
opts.success(['one', 'two']);
}

$('div.autocomplete-params').text('delay,0|minLength,0|type,remote');
$('.autocomplete', elem).data('type', 'remote');
AutocompleteWidget.initialize();
widget = elem.data('yafowil-autocomplete');
assert.strictEqual(widget.sourcetype, 'remote');
Expand All @@ -239,8 +215,8 @@ QUnit.module('AutocompleteWidget', hooks => {
opts.error();
}

$('div.autocomplete-params').text('delay,0|minLength,0|type,remote');
$('div.autocomplete-source').text('test.json');
$('.autocomplete', elem).data('type', 'remote');
$('.autocomplete', elem).data('source', 'test.json');

AutocompleteWidget.initialize();
widget = elem.data('yafowil-autocomplete');
Expand Down Expand Up @@ -444,7 +420,7 @@ QUnit.module('AutocompleteWidget', hooks => {
'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen', 'twenty'];

hooks.beforeEach(() => {
$('div.autocomplete-source').text(array.join('|'));
$('.autocomplete', elem).data('source', array.join('|'));
// initialize widget
AutocompleteWidget.initialize();
widget = elem.data('yafowil-autocomplete');
Expand Down Expand Up @@ -653,13 +629,11 @@ QUnit.module('AutocompleteWidget', hooks => {
QUnit.module('AutocompleteSuggestion', hooks => {
let elem;
let widget;
let arr = "";
let params = "delay,0|minLength,0|type,local";
let sug;

hooks.beforeEach(() => {
$('body').append(container);
elem = create_elem(arr, params);
elem = create_elem(0, 0, " ", 'local');
container.append(elem);
});
hooks.afterEach(() => {
Expand Down Expand Up @@ -704,16 +678,16 @@ QUnit.module('AutocompleteSuggestion', hooks => {
});
});

function create_elem(arr, params) {
function create_elem(delay, minLength, source, type) {
let widget_html = $(`
<div class="yafowil-widget-autocomplete">
<input class="autocomplete" type="text" />
<div class="autocomplete-source">
${arr}
</div>
<div class="autocomplete-params">
${params}
</div>
<input class="autocomplete"
type="text"
data-delay="${delay}"
data-min-length="${minLength}"
data-source="${source}"
data-type="${type}" />
<input class="autocomplete-result" type="hidden" />
</div>
`);
return widget_html;
Expand Down
1 change: 0 additions & 1 deletion src/yafowil/widget/autocomplete/example.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,6 @@ def json_response(environ, start_response):
def get_example():
static_ac = factory('#field:autocomplete', name='static', props={
'label': 'Enter some text (local, lorem ipsum)',
'value': '',
'source': lipsum,
})
json_ac = factory('#field:autocomplete', name='json', props={
Expand Down
Loading

0 comments on commit a162aa3

Please sign in to comment.