ferngully-aurelia-tools
Version:
Ferngully Tools for Aurelia
222 lines • 9.29 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";
var DropdownCheckbox = (function () {
function DropdownCheckbox(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;
}
DropdownCheckbox_1 = DropdownCheckbox;
DropdownCheckbox.prototype.bind = function () {
var _this = this;
this.disposableCollection.push(this.aureliaHelperService.createArrayWatch(this.selectedItems, function (splices) { return _this.selectedItemsChanged(splices); }));
this.disposableCollection.push(this.aureliaHelperService.createPropertyWatch(this, "items", function () { return _this.updateSelectionStates(); }));
$(this.theDropdown)
.on("shown.bs.dropdown", function () {
_this.isShowing = true;
_this.updateSelectionStates();
$(_this.theDropdown).find("li:first").focus();
if (_this.onShow) {
_this.onShow(_this);
}
})
.on("hidden.bs.dropdown", function () {
_this.isShowing = false;
if (_this.onHide) {
_this.onHide(_this);
}
});
this.updateSelectionStates();
};
DropdownCheckbox.prototype.unbind = function () {
this.disposableCollection.dispose();
$(this.theDropdown)
.off("shown.bs.dropdown")
.off("hidden.bs.dropdown");
};
DropdownCheckbox.prototype.onItemCick = function (event, item) {
var $currentTarget = $(event.currentTarget);
this.$currentItem = $currentTarget;
var $target = $(event.target);
if (!$target.is(':checkbox')) {
event.stopPropagation();
this.clickItem($currentTarget, item);
return false;
}
else {
this.clickItem($currentTarget, item, true);
return true;
}
};
DropdownCheckbox.prototype.keydown = function (event, item) {
var retval = true;
var $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;
};
DropdownCheckbox.prototype.clickItem = function ($liElement, item, suppressClick) {
if (suppressClick === void 0) { suppressClick = false; }
var $input = $liElement.find("input[type=\"checkbox\"]");
var checked = $input.prop('checked');
if (!suppressClick) {
$input.click();
item.selected = !checked;
}
else {
item.selected = checked;
}
};
DropdownCheckbox.prototype.focusOnNextItem = function (prev) {
if (prev === void 0) { prev = false; }
var 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();
};
DropdownCheckbox.prototype.closeDropdown = function () {
if (!this.isShowing)
return;
$(this.theButton).dropdown('toggle');
};
DropdownCheckbox.prototype.showDropdown = function () {
if (this.isShowing)
return;
$(this.theButton).dropdown('toggle');
};
DropdownCheckbox.prototype.updateSelectionStates = function () {
if (this.items) {
for (var _i = 0, _a = this.items; _i < _a.length; _i++) {
var item = _a[_i];
var ndx = void 0;
var 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);
}
}
}
};
DropdownCheckbox.computeSelectedItemsString = function (items, selectedItems, separator) {
if (separator === void 0) { separator = DropdownCheckbox_1.defaultSelectedItemsStringSeparator; }
var str = "";
if (items) {
for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
var item = items_1[_i];
var isSelected = selectedItems.indexOf(item.value) !== -1;
if (isSelected) {
if (str.length > 0) {
str += separator;
}
str += item.text;
}
}
}
return str;
};
DropdownCheckbox.prototype.selectedItemsChanged = function (splices) {
this.updateSelecteItemsString();
};
DropdownCheckbox.prototype.updateSelecteItemsString = function () {
this.selectedItemsString = DropdownCheckbox_1.computeSelectedItemsString(this.items, this.selectedItems.map(function (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);
return DropdownCheckbox;
var DropdownCheckbox_1;
}());
export { DropdownCheckbox };
//# sourceMappingURL=dropdown-checkbox.js.map