ng2-json-editor
Version:
Angular2 component for editing large json documents
158 lines • 6.69 kB
JavaScript
/*
* This file is part of ng2-json-editor.
* Copyright (C) 2016 CERN.
*
* ng2-json-editor is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License as
* published by the Free Software Foundation; either version 2 of the
* License, or (at your option) any later version.
*
* ng2-json-editor is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with ng2-json-editor; if not, write to the Free Software Foundation, Inc.,
* 59 Temple Place, Suite 330, Boston, MA 02111-1307, USA.
* In applying this license, CERN does not
* waive the privileges and immunities granted to it by virtue of its status
* as an Intergovernmental Organization or submit itself to any jurisdiction.
*/
import { Injectable } from '@angular/core';
import { TabsUtilService } from './tabs-util.service';
import { ListPageChangerService } from './list-page-changer.service';
var DomUtilService = (function () {
function DomUtilService(tabsUtilService, listPageChangerService) {
this.tabsUtilService = tabsUtilService;
this.listPageChangerService = listPageChangerService;
this.editableSelector = '.value-container input, span[contenteditable=true], .switch-input, searchable-dropdown span.value';
// highlight class is defined in json-editor.component.scss
this.highlightClass = 'highlight';
}
DomUtilService.prototype.focusAndSelectFirstEditableChildById = function (id, highlight) {
var _this = this;
if (highlight === void 0) { highlight = false; }
this.tabsUtilService.selectTabIfNeeded(id);
this.listPageChangerService.changePage(id);
setTimeout(function () {
var el = document.getElementById(id);
if (el) {
var firstEditable_1 = el.querySelector(_this.editableSelector);
if (firstEditable_1) {
if (firstEditable_1.classList.contains('hidden')) {
// has latex preview, click to disable to preview
firstEditable_1.nextElementSibling.click();
setTimeout(function () {
_this.focusAndSelectContent(firstEditable_1, highlight);
});
}
else {
_this.focusAndSelectContent(firstEditable_1, highlight);
}
}
else {
// if element doesn't have any input, open add-field-dropdown if it exists.
_this.openDropdown(el);
}
}
});
};
DomUtilService.prototype.focusAndSelectContent = function (el, highlight) {
el.focus();
this.selectAllContent(el);
if (highlight) {
el.classList.add(this.highlightClass);
this.highlightedElement = el;
}
};
DomUtilService.prototype.focusFirstInputChildByElement = function (el) {
var firstInput = el.querySelector('input');
if (firstInput) {
firstInput.focus();
}
};
DomUtilService.prototype.focusRightOrLeftParentCell = function (id, direction) {
var el = document.getElementById(id);
if (el && el.tabIndex) {
var elementParentCell = el.parentElement;
while (elementParentCell.nodeName !== 'TD') {
elementParentCell = elementParentCell.parentElement;
}
var nextSibling = direction > 0 ? elementParentCell.nextElementSibling : elementParentCell.previousElementSibling;
while (nextSibling && nextSibling.nodeName === 'TD') {
var inputElement = nextSibling.querySelector("input[tabindex='1'], span[contenteditable=true][tabindex='1']");
if (inputElement) {
inputElement.focus();
this.selectAllContent(inputElement);
break;
}
nextSibling = direction > 0 ? nextSibling.nextElementSibling : nextSibling.previousElementSibling;
}
}
};
DomUtilService.prototype.blurFirstEditableChildById = function (id) {
var el = document.getElementById(id);
var firstEditable = el.querySelector(this.editableSelector);
if (firstEditable) {
firstEditable.blur();
}
};
DomUtilService.prototype.clearHighlight = function () {
if (this.highlightedElement) {
this.highlightedElement.classList.remove(this.highlightClass);
this.highlightedElement = undefined;
}
};
DomUtilService.prototype.focusPatch = function (patch) {
this.tabsUtilService.selectTabIfNeeded(patch.path);
this.listPageChangerService.changePage(patch.path);
setTimeout(function () {
var el = document.getElementById(patch.path);
var mergeButton = el.querySelector('.btn-merge');
if (mergeButton) {
mergeButton.focus();
mergeButton.click();
}
else {
var patchActionsContainer = el.querySelector("." + patch.op + ".patch-actions-container");
if (patchActionsContainer) {
patchActionsContainer.focus();
}
}
});
};
DomUtilService.prototype.selectAllContent = function (el) {
if (el instanceof HTMLInputElement) {
el.select();
}
else {
// select all content for contenteditable element.
var range = document.createRange();
range.selectNodeContents(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
};
DomUtilService.prototype.openDropdown = function (el) {
var dropdown = el.querySelector('div.btn-group');
if (dropdown) {
var dropDownButton = dropdown.querySelector('button');
if (dropDownButton) {
dropDownButton.click();
}
}
};
return DomUtilService;
}());
export { DomUtilService };
DomUtilService.decorators = [
{ type: Injectable },
];
/** @nocollapse */
DomUtilService.ctorParameters = function () { return [
{ type: TabsUtilService, },
{ type: ListPageChangerService, },
]; };
//# sourceMappingURL=dom-util.service.js.map