@syncfusion/ej2-filemanager
Version:
Essential JS 2 FileManager Component
424 lines (406 loc) • 19.6 kB
text/typescript
import { EventHandler, closest, isNullOrUndefined, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';
import { getValue, addClass, removeClass, remove, createElement, DragEventArgs } from '@syncfusion/ej2-base';
import { TextBox, ChangedEventArgs } from '@syncfusion/ej2-inputs';
import { IFileManager, NotifyArgs, ReadArgs, FileOpenEventArgs } from '../base/interface';
import { DropDownButton, MenuEventArgs } from '@syncfusion/ej2-splitbuttons';
import { read } from '../common/operations';
import { getLocaleText, searchWordHandler } from '../common/utility';
import * as events from '../base/constant';
import * as CLS from '../base/classes';
import { SearchSettingsModel } from '../models';
/**
* BreadCrumbBar module
*/
export class BreadCrumbBar {
/* Internal variables */
private parent: IFileManager;
public addressPath: string = '';
public addressBarLink: string = '';
public searchObj: TextBox;
private subMenuObj: DropDownButton;
private keyboardModule: KeyboardEvents;
private searchTimer: number = null;
private keyConfigs: { [key: string]: string };
private searchWrapWidth: number = null;
/**
* constructor for addressbar module
*
* @hidden
* @param {IFileManager} parent - specifies parent element.
* @private
*
*/
constructor(parent?: IFileManager) {
this.parent = parent;
this.keyConfigs = {
enter: 'enter'
};
this.render();
}
private onPropertyChanged(e: NotifyArgs): void {
if (e.module !== this.getModuleName() && e.module !== 'common') {
return;
}
for (const prop of Object.keys(e.newProp)) {
const value: SearchSettingsModel = e.newProp.searchSettings;
switch (prop) {
case 'searchSettings':
if (!isNullOrUndefined(value.allowSearchOnTyping)) {
this.searchEventBind(value.allowSearchOnTyping);
}
if (this.parent.breadcrumbbarModule.searchObj.value && this.parent.breadcrumbbarModule.searchObj.value !== '' &&
!(!isNullOrUndefined(value.allowSearchOnTyping) && isNullOrUndefined(value.filterType) &&
isNullOrUndefined(value.ignoreCase))) {
searchWordHandler(this.parent, this.parent.breadcrumbbarModule.searchObj.value, false);
}
break;
}
}
}
private render(): void {
this.addEventListener();
}
public onPathChange(): void {
const pathNames: string[] = this.parent.pathNames;
const paths: string[] = this.parent.path.split('/');
const addressbarUL: HTMLElement = this.parent.createElement('ul', { className: 'e-addressbar-ul' });
let addressbarLI: HTMLElement = null;
const pathNamesLen: number = pathNames.length;
if (pathNames.length > 0) {
let id: string = '';
for (let i: number = 0; i < pathNamesLen; i++) {
let addressATag: HTMLElement = null;
addressbarLI = this.parent.createElement('li', { className: 'e-address-list-item' });
for (let j: number = 0; j <= i; j++) {
id = id + paths[j as number] + '/';
}
addressbarLI.setAttribute('data-utext', id);
if (i !== 0) {
const icon: HTMLElement = createElement('span', { className: CLS.ICONS });
addressbarLI.appendChild(icon);
}
if (pathNamesLen - i !== 1) {
addressATag = createElement('a', { className: CLS.LIST_TEXT });
addressbarLI.setAttribute('tabindex', '0');
} else {
addressATag = createElement('span', { className: CLS.LIST_TEXT });
}
id = '';
addressATag.innerText = pathNames[i as number];
addressbarLI.appendChild(addressATag);
addressbarUL.appendChild(addressbarLI);
}
const ulElement: Element = this.parent.breadCrumbBarNavigation.querySelector('.e-addressbar-ul');
if (!isNullOrUndefined(ulElement)) {
if (!isNullOrUndefined(this.subMenuObj)) {
this.subMenuObj.destroy();
}
remove(ulElement);
}
const searchWrap: Element = this.parent.breadCrumbBarNavigation.querySelector('.e-search-wrap');
if (!searchWrap) {
this.parent.breadCrumbBarNavigation.insertBefore(addressbarUL, searchWrap);
} else {
this.parent.breadCrumbBarNavigation.appendChild(addressbarUL);
}
this.updateBreadCrumbBar(addressbarUL);
}
}
/* istanbul ignore next */
private updateBreadCrumbBar(addresBarUL: HTMLElement): void {
const liElements: NodeListOf<Element> = addresBarUL.querySelectorAll('li');
const ulElement: Element = this.parent.breadCrumbBarNavigation.querySelector('.e-addressbar-ul');
const style: CSSStyleDeclaration = window.getComputedStyle(ulElement, null);
const pRight: number = parseFloat(style.getPropertyValue('padding-right'));
const pLeft: number = parseFloat(style.getPropertyValue('padding-left'));
let breadCrumbBarWidth: number = (<HTMLElement>ulElement).offsetWidth - pRight - pLeft;
const addressbarUL: HTMLElement = this.parent.createElement('ul', { className: 'e-addressbar-ul' });
let liElementsWidth: number = 0;
const liElementsWidths: number[] = [];
for (let i: number = 0; i < liElements.length; i++) {
const width: number = liElements[i as number].clientWidth;
liElementsWidths.push(width);
liElementsWidth = liElementsWidth + width;
}
if (!isNullOrUndefined(ulElement)) {
remove(ulElement);
}
const searchContainer: HTMLElement = this.parent.createElement('div');
searchContainer.setAttribute('class', 'e-search-wrap');
const id: string = this.parent.element.id + CLS.SEARCH_ID;
const searchInput: HTMLElement = createElement('input', { id: id,
attrs: { autocomplete: 'off', 'aria-label': getLocaleText(this.parent, 'Search') } });
searchContainer.appendChild(searchInput);
const searchEle: Element = this.parent.breadCrumbBarNavigation.querySelector('.e-search-wrap .e-input');
if (isNullOrUndefined(searchEle)) {
this.parent.breadCrumbBarNavigation.appendChild(searchContainer);
const span: Element = createElement('span', { className: 'e-icons e-fe-search' });
EventHandler.add(span, 'click', this.onShowInput, this);
searchInput.parentElement.insertBefore(span, searchInput);
this.searchObj = new TextBox({
value: '',
showClearButton: true,
placeholder: getLocaleText(this.parent, 'Search'),
focus: this.onFocus.bind(this),
blur: this.onBlur.bind(this)
});
this.searchObj.appendTo('#' + this.parent.element.id + CLS.SEARCH_ID);
this.searchEventBind(this.parent.searchSettings.allowSearchOnTyping);
const search: Element = this.searchObj.element.nextElementSibling;
EventHandler.add(search, 'mousedown', this.searchChangeHandler.bind(this), this);
EventHandler.add(this.searchObj.element, 'keyup', this.onKeyUp.bind(this), this);
}
const searchWrap: HTMLElement = this.parent.breadCrumbBarNavigation.querySelector('.e-search-wrap');
breadCrumbBarWidth = breadCrumbBarWidth - (this.searchWrapWidth ? this.searchWrapWidth : searchWrap.offsetWidth);
if (liElementsWidth > breadCrumbBarWidth) {
let i: number = liElements.length;
while (i--) {
const diff: number = breadCrumbBarWidth - liElementsWidths[i as number];
if (diff > 40) {
addressbarUL.insertBefore(liElements[i as number], addressbarUL.querySelector('li'));
breadCrumbBarWidth = diff;
} else {
const items: Object[] = [];
for (let j: number = 0; j <= i; j++) {
const liElement: Element = liElements[j as number];
items.push({
text: (<HTMLElement>liElement).innerText,
utext: liElement.getAttribute('data-utext')
});
}
const subMenuLi: HTMLElement = this.parent.createElement('li', { className: 'e-breadcrumb-menu' });
const attributes: Object = { className: 'e-breadcrumb-submenu' };
const subMenuSpan: HTMLElement = this.parent.createElement('button', attributes);
subMenuLi.appendChild(subMenuSpan);
addressbarUL.insertBefore(subMenuLi, addressbarUL.querySelector('li'));
this.subMenuObj = new DropDownButton({
items: items,
cssClass: 'e-caret-hide e-submenu',
iconCss: CLS.ICON_BREADCRUMB,
iconPosition: 'Top',
enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
beforeItemRender: this.addSubMenuAttributes.bind(this),
select: this.subMenuSelectOperations.bind(this)
});
this.subMenuObj.isStringTemplate = true;
this.subMenuObj.appendTo(subMenuSpan);
break;
}
}
this.parent.breadCrumbBarNavigation.insertBefore(addressbarUL, searchWrap);
} else {
this.parent.breadCrumbBarNavigation.insertBefore(addresBarUL, searchWrap);
}
}
/* istanbul ignore next */
private onFocus(): void {
const wrap: Element = closest(this.searchObj.element, '.e-search-wrap');
wrap.classList.add('e-focus');
}
/* istanbul ignore next */
private onKeyUp(): void {
this.parent.notify(events.pathColumn, { args: this.parent });
}
/* istanbul ignore next */
private onBlur(): void {
const wrap: Element = closest(this.searchObj.element, '.e-search-wrap');
wrap.classList.remove('e-focus');
}
/* istanbul ignore next */
private subMenuSelectOperations(event: MenuEventArgs): void {
const args: Object = { target: event.element };
this.addressPathClickHandler(<Event>args);
}
/* istanbul ignore next */
private addSubMenuAttributes(args: MenuEventArgs): void {
args.element.setAttribute('data-utext', getValue('utext', args.item));
const anchor: HTMLElement = this.parent.createElement('a', { className: 'e-list-text' });
args.element.appendChild(anchor);
}
private searchEventBind(allow: boolean): void {
if (allow) {
this.searchObj.input = this.searchChangeHandler.bind(this);
this.searchObj.change = null;
} else {
this.searchObj.change = this.searchChangeHandler.bind(this);
this.searchObj.input = null;
}
}
private searchChangeHandler(args?: ChangedEventArgs): void {
if (!isNullOrUndefined(args.value)) {
this.parent.isFiltered = false;
if (this.parent.searchSettings.allowSearchOnTyping) {
window.clearTimeout(this.searchTimer);
this.searchTimer = window.setTimeout(() => { searchWordHandler(this.parent, args.value, false); }, 300);
} else {
searchWordHandler(this.parent, args.value, false);
}
}
}
private addressPathClickHandler(e: Event): void {
const li: HTMLElement = (<HTMLElement>e.target);
if (li.nodeName === 'LI' || li.nodeName === 'A') {
const node: Element = li.nodeName === 'LI' ? li.children[0] : li;
if (!isNullOrUndefined(node)) {
this.parent.isFiltered = false;
const currentPath: string = this.updatePath((<HTMLElement>node));
this.parent.itemData = [getValue(this.parent.pathId[this.parent.pathId.length - 1], this.parent.feParent)];
this.triggerFileOpen(this.parent.itemData[0]);
read(this.parent, events.pathChanged, currentPath);
const treeNodeId: string = this.parent.pathId[this.parent.pathId.length - 1];
this.parent.notify(events.updateTreeSelection, { module: 'treeview', selectedNode: treeNodeId });
}
}
}
private triggerFileOpen(data: Object): void {
const eventArgs: FileOpenEventArgs = { cancel: false, fileDetails: data, module: 'BreadCrumbBar' };
delete eventArgs.cancel;
this.parent.trigger('fileOpen', eventArgs);
}
/* istanbul ignore next */
private onShowInput(): void {
if (this.parent.isMobile) {
if (this.parent.element.classList.contains(CLS.FILTER)) {
removeClass([this.parent.element], CLS.FILTER);
this.searchWrapWidth = null;
} else {
const searchWrap: HTMLElement = this.parent.breadCrumbBarNavigation.querySelector('.e-search-wrap');
this.searchWrapWidth = searchWrap.offsetWidth;
addClass([this.parent.element], CLS.FILTER);
this.searchObj.element.focus();
}
}
}
private updatePath(list: HTMLElement): string {
const li: Element = closest(list, 'li');
const liElementId: string = li.getAttribute('data-utext');
this.addressBarLink = liElementId;
const link: string[] = this.addressBarLink.split('/');
const ids: string[] = this.parent.pathId;
const names: string[] = this.parent.pathNames;
this.parent.pathId = [];
this.parent.pathNames = [];
let newpath: string = '';
for (let i: number = 0, len: number = link.length - 1; i < len; i++) {
this.parent.pathId.push(ids[i as number]);
this.parent.pathNames.push(names[i as number]);
newpath += link[i as number] + '/';
}
this.parent.setProperties({ path: newpath }, true);
return newpath;
}
private onUpdatePath(): void {
this.onPathChange();
this.removeSearchValue();
}
private onCreateEnd(): void {
this.onPathChange();
}
private onRenameEnd(): void {
this.onPathChange();
}
/* istanbul ignore next */
private onDeleteEnd(): void {
this.onUpdatePath();
}
/* istanbul ignore next */
private removeSearchValue(): void {
this.parent.isFiltered = false;
if (this.searchObj && (this.searchObj.value !== '' || this.searchObj.element.value !== '')) {
this.searchObj.value = '';
this.searchObj.element.value = '';
this.searchObj.dataBind();
}
}
private onResize(): void {
this.onPathChange();
}
private onPasteEnd(): void {
this.onPathChange();
}
private addEventListener(): void {
this.keyboardModule = new KeyboardEvents(
this.parent.breadCrumbBarNavigation,
{
keyAction: this.keyActionHandler.bind(this),
keyConfigs: this.keyConfigs,
eventName: 'keydown'
}
);
this.parent.on(events.modelChanged, this.onPropertyChanged, this);
EventHandler.add(this.parent.breadCrumbBarNavigation, 'click', this.addressPathClickHandler, this);
this.parent.on(events.destroy, this.destroy, this);
this.parent.on(events.pathChanged, this.onUpdatePath, this);
this.parent.on(events.finalizeEnd, this.onUpdatePath, this);
this.parent.on(events.refreshEnd, this.onUpdatePath, this);
this.parent.on(events.openEnd, this.onUpdatePath, this);
this.parent.on(events.createEnd, this.onCreateEnd, this);
this.parent.on(events.renameEnd, this.onRenameEnd, this);
this.parent.on(events.deleteEnd, this.onDeleteEnd, this);
this.parent.on(events.splitterResize, this.onResize, this);
this.parent.on(events.pasteEnd, this.onPasteEnd, this);
this.parent.on(events.resizeEnd, this.onResize, this);
this.parent.on(events.searchTextChange, this.onSearchTextChange, this);
this.parent.on(events.dropInit, this.onDropInit, this);
this.parent.on(events.layoutRefresh, this.onResize, this);
this.parent.on(events.dropPath, this.onPathChange, this);
}
private keyActionHandler(e: KeyboardEventArgs): void {
switch (e.action) {
case 'enter':
this.addressPathClickHandler(e);
break;
}
}
private removeEventListener(): void {
this.keyboardModule.destroy();
this.parent.off(events.pathChanged, this.onUpdatePath);
this.parent.off(events.finalizeEnd, this.onUpdatePath);
this.parent.off(events.refreshEnd, this.onUpdatePath);
this.parent.off(events.openEnd, this.onUpdatePath);
this.parent.off(events.pasteEnd, this.onPasteEnd);
this.parent.off(events.createEnd, this.onCreateEnd);
this.parent.off(events.renameEnd, this.onRenameEnd);
this.parent.off(events.deleteEnd, this.onDeleteEnd);
this.parent.off(events.splitterResize, this.onResize);
this.parent.off(events.resizeEnd, this.onResize);
this.parent.off(events.searchTextChange, this.onSearchTextChange);
this.parent.off(events.dropInit, this.onDropInit);
this.parent.off(events.layoutRefresh, this.onResize);
this.parent.off(events.dropPath, this.onPathChange);
}
/* istanbul ignore next */
private onDropInit(args: DragEventArgs): void {
if (this.parent.targetModule === this.getModuleName()) {
const liEle: Element = args.target.closest('li');
this.parent.dropPath = this.updatePath(<HTMLElement>(liEle.children[0]));
this.parent.dropData = getValue(this.parent.pathId[this.parent.pathId.length - 1], this.parent.feParent);
this.triggerFileOpen(this.parent.dropData);
const treeNodeId: string = this.parent.pathId[this.parent.pathId.length - 1];
this.parent.notify(events.updateTreeSelection, { module: 'treeview', selectedNode: treeNodeId });
}
}
/**
* For internal use only - Get the module name.
*
* @returns {string} - returns the module name
* @private
*/
private getModuleName(): string {
return 'breadcrumbbar';
}
public destroy(): void {
if (this.parent.isDestroyed) { return; }
this.removeEventListener();
/* istanbul ignore next */
if (!isNullOrUndefined(this.subMenuObj)) {
this.subMenuObj.destroy();
}
if (!isNullOrUndefined(this.searchObj)) {
this.searchObj.destroy();
}
}
private onSearchTextChange(args: ReadArgs): void {
this.searchObj.element.placeholder = (this.parent.searchSettings.placeholder != null) ? this.parent.searchSettings.placeholder : getLocaleText(this.parent, 'Search') + ' ' + getLocaleText(this.parent, args.cwd.name.toString());
}
}