116 lines
3.0 KiB
TypeScript
Executable File
116 lines
3.0 KiB
TypeScript
Executable File
export default class TryItForm {
|
|
private $form: JQuery;
|
|
private $toggle: JQuery;
|
|
private $picker: JQuery;
|
|
|
|
constructor($form: JQuery, $toggle: JQuery) {
|
|
this.$form = $form;
|
|
this.$picker = $form.find('.languages');
|
|
this.$picker.find('.language').click(e => this.pick(e));
|
|
this.$form.find('[name="language"]').on('input', e => this.update(e));
|
|
this.$toggle = $toggle;
|
|
}
|
|
|
|
public toggle() {
|
|
if (this.$form.hasClass('visible')) {
|
|
this.hide();
|
|
} else {
|
|
this.show();
|
|
}
|
|
}
|
|
|
|
public show() {
|
|
this.$form.slideDown({
|
|
complete: () => this.$form.addClass('visible')
|
|
});
|
|
this.$toggle
|
|
.addClass('visible')
|
|
.addClass('active');
|
|
|
|
return this;
|
|
}
|
|
|
|
public hide() {
|
|
this.$form.slideUp({
|
|
complete: () => this.$form.removeClass('visible')
|
|
});
|
|
|
|
this.$toggle
|
|
.removeClass('visible')
|
|
.removeClass('active');
|
|
|
|
return this;
|
|
}
|
|
|
|
get source() {
|
|
return this.$form.find('[name="source"]').val();
|
|
}
|
|
|
|
set source(value: string) {
|
|
this.$form.find('[name="source"]').val(value);
|
|
}
|
|
|
|
get language() {
|
|
return this.$form.find('[name="language"]').val();
|
|
}
|
|
|
|
set language(value: string) {
|
|
this.$form.find('[name="language"]').val(value);
|
|
}
|
|
|
|
public set(source: string, language: string) {
|
|
this.source = source;
|
|
this.language = language;
|
|
}
|
|
|
|
public submit() {
|
|
this.$form.find('form').submit();
|
|
}
|
|
|
|
private update(e: JQueryKeyEventObject) {
|
|
let $this = $(e.currentTarget);
|
|
let tokens = $this.val()
|
|
.split(/\b/)
|
|
.map(x => x.trim())
|
|
.filter(x => !!x);
|
|
|
|
let last: string|boolean = false;
|
|
|
|
if (tokens.length) {
|
|
last = tokens[tokens.length - 1];
|
|
if (last == '>') {
|
|
last = false;
|
|
}
|
|
}
|
|
|
|
let standalone = tokens.indexOf('>') == -1;
|
|
this.$picker
|
|
.toggleClass('embeddable', !standalone)
|
|
.toggleClass('standalone', standalone);
|
|
|
|
this.$picker.find('.language').each((index, elem) => {
|
|
let $elem = $(elem);
|
|
let show = !last || (typeof last == 'string' && $elem.text().indexOf(last) !== -1);
|
|
|
|
$elem.toggleClass('hidden', !show);
|
|
})
|
|
}
|
|
|
|
private pick(e: JQueryEventObject) {
|
|
let $this = $(e.currentTarget);
|
|
let $selector = this.$form.find('[name="language"]');
|
|
let input = <HTMLInputElement>$selector[0];
|
|
let value = input.value;
|
|
|
|
let start = input.selectionStart;
|
|
let end = input.selectionEnd;
|
|
|
|
while(start > 0 && value[start-1] != ' ' && start--) {}
|
|
while(end < value.length && value[end] != ' ' && end++) {}
|
|
|
|
input.value = value.substring(0, start) + $this.text().trim() + value.substring(end);
|
|
|
|
return false;
|
|
}
|
|
}
|