ferngully-aurelia-tools
Version:
Ferngully Tools for Aurelia
214 lines • 8.21 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { bindable, autoinject } from "aurelia-framework";
import { bindingMode } from "aurelia-binding";
import "jquery";
import "./dropdown-checkbox.css";
import { AureliaHelperService } from "../../../services/aurelia-helper-service";
import { DisposableCollection } from "../../../services/disposable-collection";
let DropdownCheckbox = DropdownCheckbox_1 = class DropdownCheckbox {
constructor(aureliaHelperService, disposableCollection) {
this.aureliaHelperService = aureliaHelperService;
this.disposableCollection = disposableCollection;
this.items = [];
this.buttonClass = "btn btn-default btn-sm";
this.selectedItemsStringSeparator = DropdownCheckbox_1.defaultSelectedItemsStringSeparator;
this.noItemsText = "Select";
this.selectedItems = new Array();
this.isShowing = false;
}
bind() {
this.disposableCollection.push(this.aureliaHelperService.createArrayWatch(this.selectedItems, (splices) => this.selectedItemsChanged(splices)));
this.disposableCollection.push(this.aureliaHelperService.createPropertyWatch(this, "items", () => this.updateSelectionStates()));
$(this.theDropdown)
.on("shown.bs.dropdown", () => {
this.isShowing = true;
this.updateSelectionStates();
$(this.theDropdown).find("li:first").focus();
if (this.onShow) {
this.onShow(this);
}
})
.on("hidden.bs.dropdown", () => {
this.isShowing = false;
if (this.onHide) {
this.onHide(this);
}
});
this.updateSelectionStates();
}
unbind() {
this.disposableCollection.dispose();
$(this.theDropdown)
.off("shown.bs.dropdown")
.off("hidden.bs.dropdown");
}
onItemCick(event, item) {
let $currentTarget = $(event.currentTarget);
this.$currentItem = $currentTarget;
let $target = $(event.target);
if (!$target.is(':checkbox')) {
event.stopPropagation();
this.clickItem($currentTarget, item);
return false;
}
else {
this.clickItem($currentTarget, item, true);
return true;
}
}
keydown(event, item) {
let retval = true;
let $target = $(event.target);
if (this.onKeydown) {
retval = this.onKeydown(event, this);
}
if (retval) {
switch (event.key) {
case "Enter":
case "Tab":
case "Escape":
this.closeDropdown();
break;
case "ArrowUp":
this.focusOnNextItem(true);
break;
case "ArrowDown":
this.focusOnNextItem();
break;
case " ":
this.clickItem($target, item);
break;
}
}
return retval;
}
clickItem($liElement, item, suppressClick = false) {
let $input = $liElement.find(`input[type="checkbox"]`);
let checked = $input.prop('checked');
if (!suppressClick) {
$input.click();
item.selected = !checked;
}
else {
item.selected = checked;
}
}
focusOnNextItem(prev = false) {
let next;
if (!this.$currentItem) {
this.$currentItem = $(this.theDropdown).find("ul li").first();
}
if (prev) {
next = this.$currentItem.prev("li");
if (next.length === 0) {
next = $(this.theDropdown).find("ul li").last();
}
}
else {
next = this.$currentItem.next("li");
if (next.length === 0) {
next = $(this.theDropdown).find("ul li").first();
}
}
this.$currentItem = next;
next.focus();
}
closeDropdown() {
if (!this.isShowing)
return;
$(this.theButton).dropdown('toggle');
}
showDropdown() {
if (this.isShowing)
return;
$(this.theButton).dropdown('toggle');
}
updateSelectionStates() {
if (this.items) {
for (let item of this.items) {
let ndx;
let isInArray = (ndx = this.selectedItems.indexOf(item)) !== -1;
if (!item.selected && isInArray) {
this.selectedItems.splice(ndx, 1);
}
else if (item.selected && !isInArray) {
this.selectedItems.push(item);
}
}
}
}
static computeSelectedItemsString(items, selectedItems, separator = DropdownCheckbox_1.defaultSelectedItemsStringSeparator) {
let str = "";
if (items) {
for (let item of items) {
let isSelected = selectedItems.indexOf(item.value) !== -1;
if (isSelected) {
if (str.length > 0) {
str += separator;
}
str += item.text;
}
}
}
return str;
}
selectedItemsChanged(splices) {
this.updateSelecteItemsString();
}
updateSelecteItemsString() {
this.selectedItemsString = DropdownCheckbox_1.computeSelectedItemsString(this.items, this.selectedItems.map((i) => { return i.value; }), this.selectedItemsStringSeparator);
}
};
DropdownCheckbox.defaultSelectedItemsStringSeparator = ",";
__decorate([
bindable,
__metadata("design:type", Array)
], DropdownCheckbox.prototype, "items", void 0);
__decorate([
bindable({ defaultBindingMode: bindingMode.oneTime }),
__metadata("design:type", String)
], DropdownCheckbox.prototype, "buttonTooltip", void 0);
__decorate([
bindable({ defaultBindingMode: bindingMode.oneTime }),
__metadata("design:type", String)
], DropdownCheckbox.prototype, "buttonClass", void 0);
__decorate([
bindable({ defaultBindingMode: bindingMode.twoWay }),
__metadata("design:type", String)
], DropdownCheckbox.prototype, "selectedItemsString", void 0);
__decorate([
bindable({ defaultBindingMode: bindingMode.oneTime }),
__metadata("design:type", String)
], DropdownCheckbox.prototype, "selectedItemsStringSeparator", void 0);
__decorate([
bindable({ defaultBindingMode: bindingMode.oneTime }),
__metadata("design:type", String)
], DropdownCheckbox.prototype, "noItemsText", void 0);
__decorate([
bindable,
__metadata("design:type", Function)
], DropdownCheckbox.prototype, "onShow", void 0);
__decorate([
bindable,
__metadata("design:type", Function)
], DropdownCheckbox.prototype, "onHide", void 0);
__decorate([
bindable,
__metadata("design:type", Function)
], DropdownCheckbox.prototype, "onKeydown", void 0);
DropdownCheckbox = DropdownCheckbox_1 = __decorate([
autoinject,
__metadata("design:paramtypes", [AureliaHelperService,
DisposableCollection])
], DropdownCheckbox);
export { DropdownCheckbox };
var DropdownCheckbox_1;
//# sourceMappingURL=dropdown-checkbox.js.map