123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917 |
- var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
- /* Tabulator v4.6.3 (c) Oliver Folkerd */
-
- var Edit = function Edit(table) {
- this.table = table; //hold Tabulator object
- this.currentCell = false; //hold currently editing cell
- this.mouseClick = false; //hold mousedown state to prevent click binding being overriden by editor opening
- this.recursionBlock = false; //prevent focus recursion
- this.invalidEdit = false;
- };
-
- //initialize column editor
- Edit.prototype.initializeColumn = function (column) {
- var self = this,
- config = {
- editor: false,
- blocked: false,
- check: column.definition.editable,
- params: column.definition.editorParams || {}
- };
-
- //set column editor
- switch (_typeof(column.definition.editor)) {
- case "string":
-
- if (column.definition.editor === "tick") {
- column.definition.editor = "tickCross";
- console.warn("DEPRECATION WARNING - the tick editor has been deprecated, please use the tickCross editor");
- }
-
- if (self.editors[column.definition.editor]) {
- config.editor = self.editors[column.definition.editor];
- } else {
- console.warn("Editor Error - No such editor found: ", column.definition.editor);
- }
- break;
-
- case "function":
- config.editor = column.definition.editor;
- break;
-
- case "boolean":
-
- if (column.definition.editor === true) {
-
- if (typeof column.definition.formatter !== "function") {
-
- if (column.definition.formatter === "tick") {
- column.definition.formatter = "tickCross";
- console.warn("DEPRECATION WARNING - the tick editor has been deprecated, please use the tickCross editor");
- }
-
- if (self.editors[column.definition.formatter]) {
- config.editor = self.editors[column.definition.formatter];
- } else {
- config.editor = self.editors["input"];
- }
- } else {
- console.warn("Editor Error - Cannot auto lookup editor for a custom formatter: ", column.definition.formatter);
- }
- }
- break;
- }
-
- if (config.editor) {
- column.modules.edit = config;
- }
- };
-
- Edit.prototype.getCurrentCell = function () {
- return this.currentCell ? this.currentCell.getComponent() : false;
- };
-
- Edit.prototype.clearEditor = function () {
- var cell = this.currentCell,
- cellEl;
-
- this.invalidEdit = false;
-
- if (cell) {
- this.currentCell = false;
-
- cellEl = cell.getElement();
- cellEl.classList.remove("tabulator-validation-fail");
- cellEl.classList.remove("tabulator-editing");
- while (cellEl.firstChild) {
- cellEl.removeChild(cellEl.firstChild);
- }cell.row.getElement().classList.remove("tabulator-row-editing");
- }
- };
-
- Edit.prototype.cancelEdit = function () {
-
- if (this.currentCell) {
- var cell = this.currentCell;
- var component = this.currentCell.getComponent();
-
- this.clearEditor();
- cell.setValueActual(cell.getValue());
- cell.cellRendered();
-
- if (cell.column.cellEvents.cellEditCancelled) {
- cell.column.cellEvents.cellEditCancelled.call(this.table, component);
- }
-
- this.table.options.cellEditCancelled.call(this.table, component);
- }
- };
-
- //return a formatted value for a cell
- Edit.prototype.bindEditor = function (cell) {
- var self = this,
- element = cell.getElement();
-
- element.setAttribute("tabindex", 0);
-
- element.addEventListener("click", function (e) {
- if (!element.classList.contains("tabulator-editing")) {
- element.focus({ preventScroll: true });
- }
- });
-
- element.addEventListener("mousedown", function (e) {
- self.mouseClick = true;
- });
-
- element.addEventListener("focus", function (e) {
- if (!self.recursionBlock) {
- self.edit(cell, e, false);
- }
- });
- };
-
- Edit.prototype.focusCellNoEvent = function (cell, block) {
- this.recursionBlock = true;
- if (!(block && this.table.browser === "ie")) {
- cell.getElement().focus({ preventScroll: true });
- }
- this.recursionBlock = false;
- };
-
- Edit.prototype.editCell = function (cell, forceEdit) {
- this.focusCellNoEvent(cell);
- this.edit(cell, false, forceEdit);
- };
-
- Edit.prototype.focusScrollAdjust = function (cell) {
- if (this.table.rowManager.getRenderMode() == "virtual") {
- var topEdge = this.table.rowManager.element.scrollTop,
- bottomEdge = this.table.rowManager.element.clientHeight + this.table.rowManager.element.scrollTop,
- rowEl = cell.row.getElement(),
- offset = rowEl.offsetTop;
-
- if (rowEl.offsetTop < topEdge) {
- this.table.rowManager.element.scrollTop -= topEdge - rowEl.offsetTop;
- } else {
- if (rowEl.offsetTop + rowEl.offsetHeight > bottomEdge) {
- this.table.rowManager.element.scrollTop += rowEl.offsetTop + rowEl.offsetHeight - bottomEdge;
- }
- }
- }
- };
-
- Edit.prototype.edit = function (cell, e, forceEdit) {
- var self = this,
- allowEdit = true,
- rendered = function rendered() {},
- element = cell.getElement(),
- cellEditor,
- component,
- params;
-
- //prevent editing if another cell is refusing to leave focus (eg. validation fail)
- if (this.currentCell) {
- if (!this.invalidEdit) {
- this.cancelEdit();
- }
- return;
- }
-
- //handle successfull value change
- function success(value) {
- if (self.currentCell === cell) {
- var valid = true;
-
- if (cell.column.modules.validate && self.table.modExists("validate")) {
- valid = self.table.modules.validate.validate(cell.column.modules.validate, cell.getComponent(), value);
- }
-
- if (valid === true) {
- self.clearEditor();
- cell.setValue(value, true);
-
- if (self.table.options.dataTree && self.table.modExists("dataTree")) {
- self.table.modules.dataTree.checkForRestyle(cell);
- }
-
- return true;
- } else {
- self.invalidEdit = true;
- element.classList.add("tabulator-validation-fail");
- self.focusCellNoEvent(cell, true);
- rendered();
- self.table.options.validationFailed.call(self.table, cell.getComponent(), value, valid);
-
- return false;
- }
- } else {
- // console.warn("Edit Success Error - cannot call success on a cell that is no longer being edited");
- }
- }
-
- //handle aborted edit
- function cancel() {
- if (self.currentCell === cell) {
- self.cancelEdit();
-
- if (self.table.options.dataTree && self.table.modExists("dataTree")) {
- self.table.modules.dataTree.checkForRestyle(cell);
- }
- } else {
- // console.warn("Edit Success Error - cannot call cancel on a cell that is no longer being edited");
- }
- }
-
- function onRendered(callback) {
- rendered = callback;
- }
-
- if (!cell.column.modules.edit.blocked) {
- if (e) {
- e.stopPropagation();
- }
-
- switch (_typeof(cell.column.modules.edit.check)) {
- case "function":
- allowEdit = cell.column.modules.edit.check(cell.getComponent());
- break;
-
- case "boolean":
- allowEdit = cell.column.modules.edit.check;
- break;
- }
-
- if (allowEdit || forceEdit) {
-
- self.cancelEdit();
-
- self.currentCell = cell;
-
- this.focusScrollAdjust(cell);
-
- component = cell.getComponent();
-
- if (this.mouseClick) {
- this.mouseClick = false;
-
- if (cell.column.cellEvents.cellClick) {
- cell.column.cellEvents.cellClick.call(this.table, e, component);
- }
- }
-
- if (cell.column.cellEvents.cellEditing) {
- cell.column.cellEvents.cellEditing.call(this.table, component);
- }
-
- self.table.options.cellEditing.call(this.table, component);
-
- params = typeof cell.column.modules.edit.params === "function" ? cell.column.modules.edit.params(component) : cell.column.modules.edit.params;
-
- cellEditor = cell.column.modules.edit.editor.call(self, component, onRendered, success, cancel, params);
-
- //if editor returned, add to DOM, if false, abort edit
- if (cellEditor !== false) {
-
- if (cellEditor instanceof Node) {
- element.classList.add("tabulator-editing");
- cell.row.getElement().classList.add("tabulator-row-editing");
- while (element.firstChild) {
- element.removeChild(element.firstChild);
- }element.appendChild(cellEditor);
-
- //trigger onRendered Callback
- rendered();
-
- //prevent editing from triggering rowClick event
- var children = element.children;
-
- for (var i = 0; i < children.length; i++) {
- children[i].addEventListener("click", function (e) {
- e.stopPropagation();
- });
- }
- } else {
- console.warn("Edit Error - Editor should return an instance of Node, the editor returned:", cellEditor);
- element.blur();
- return false;
- }
- } else {
- element.blur();
- return false;
- }
-
- return true;
- } else {
- this.mouseClick = false;
- element.blur();
- return false;
- }
- } else {
- this.mouseClick = false;
- element.blur();
- return false;
- }
- };
-
- Edit.prototype.maskInput = function (el, options) {
- var mask = options.mask,
- maskLetter = typeof options.maskLetterChar !== "undefined" ? options.maskLetterChar : "A",
- maskNumber = typeof options.maskNumberChar !== "undefined" ? options.maskNumberChar : "9",
- maskWildcard = typeof options.maskWildcardChar !== "undefined" ? options.maskWildcardChar : "*",
- success = false;
-
- function fillSymbols(index) {
- var symbol = mask[index];
- if (typeof symbol !== "undefined" && symbol !== maskWildcard && symbol !== maskLetter && symbol !== maskNumber) {
- el.value = el.value + "" + symbol;
- fillSymbols(index + 1);
- }
- }
-
- el.addEventListener("keydown", function (e) {
- var index = el.value.length,
- char = e.key;
-
- if (e.keyCode > 46) {
- if (index >= mask.length) {
- e.preventDefault();
- e.stopPropagation();
- success = false;
- return false;
- } else {
- switch (mask[index]) {
- case maskLetter:
- if (char.toUpperCase() == char.toLowerCase()) {
- e.preventDefault();
- e.stopPropagation();
- success = false;
- return false;
- }
- break;
-
- case maskNumber:
- if (isNaN(char)) {
- e.preventDefault();
- e.stopPropagation();
- success = false;
- return false;
- }
- break;
-
- case maskWildcard:
- break;
-
- default:
- if (char !== mask[index]) {
- e.preventDefault();
- e.stopPropagation();
- success = false;
- return false;
- }
- }
- }
-
- success = true;
- }
-
- return;
- });
-
- el.addEventListener("keyup", function (e) {
- if (e.keyCode > 46) {
- if (options.maskAutoFill) {
- fillSymbols(el.value.length);
- }
- }
- });
-
- if (!el.placeholder) {
- el.placeholder = mask;
- }
-
- if (options.maskAutoFill) {
- fillSymbols(el.value.length);
- }
- };
-
- //default data editors
- Edit.prototype.editors = {
-
- //input element
- input: function input(cell, onRendered, success, cancel, editorParams) {
-
- //create and style input
- var cellValue = cell.getValue(),
- input = document.createElement("input");
-
- input.setAttribute("type", editorParams.search ? "search" : "text");
-
- input.style.padding = "4px";
- input.style.width = "100%";
- input.style.boxSizing = "border-box";
-
- if (editorParams.elementAttributes && _typeof(editorParams.elementAttributes) == "object") {
- for (var key in editorParams.elementAttributes) {
- if (key.charAt(0) == "+") {
- key = key.slice(1);
- input.setAttribute(key, input.getAttribute(key) + editorParams.elementAttributes["+" + key]);
- } else {
- input.setAttribute(key, editorParams.elementAttributes[key]);
- }
- }
- }
-
- input.value = typeof cellValue !== "undefined" ? cellValue : "";
-
- onRendered(function () {
- input.focus({ preventScroll: true });
- input.style.height = "100%";
- });
-
- function onChange(e) {
- if ((cellValue === null || typeof cellValue === "undefined") && input.value !== "" || input.value !== cellValue) {
- if (success(input.value)) {
- cellValue = input.value; //persist value if successfully validated incase editor is used as header filter
- }
- } else {
- cancel();
- }
- }
-
- //submit new value on blur or change
- input.addEventListener("change", onChange);
- input.addEventListener("blur", onChange);
-
- //submit new value on enter
- input.addEventListener("keydown", function (e) {
- switch (e.keyCode) {
- // case 9:
- case 13:
- onChange(e);
- break;
-
- case 27:
- cancel();
- break;
- }
- });
-
- if (editorParams.mask) {
- this.table.modules.edit.maskInput(input, editorParams);
- }
-
- return input;
- },
-
- //resizable text area element
- textarea: function textarea(cell, onRendered, success, cancel, editorParams) {
- var self = this,
- cellValue = cell.getValue(),
- vertNav = editorParams.verticalNavigation || "hybrid",
- value = String(cellValue !== null && typeof cellValue !== "undefined" ? cellValue : ""),
- count = (value.match(/(?:\r\n|\r|\n)/g) || []).length + 1,
- input = document.createElement("textarea"),
- scrollHeight = 0;
-
- //create and style input
- input.style.display = "block";
- input.style.padding = "2px";
- input.style.height = "100%";
- input.style.width = "100%";
- input.style.boxSizing = "border-box";
- input.style.whiteSpace = "pre-wrap";
- input.style.resize = "none";
-
- if (editorParams.elementAttributes && _typeof(editorParams.elementAttributes) == "object") {
- for (var key in editorParams.elementAttributes) {
- if (key.charAt(0) == "+") {
- key = key.slice(1);
- input.setAttribute(key, input.getAttribute(key) + editorParams.elementAttributes["+" + key]);
- } else {
- input.setAttribute(key, editorParams.elementAttributes[key]);
- }
- }
- }
-
- input.value = value;
-
- onRendered(function () {
- input.focus({ preventScroll: true });
- input.style.height = "100%";
- });
-
- function onChange(e) {
-
- if ((cellValue === null || typeof cellValue === "undefined") && input.value !== "" || input.value !== cellValue) {
-
- if (success(input.value)) {
- cellValue = input.value; //persist value if successfully validated incase editor is used as header filter
- }
-
- setTimeout(function () {
- cell.getRow().normalizeHeight();
- }, 300);
- } else {
- cancel();
- }
- }
-
- //submit new value on blur or change
- input.addEventListener("change", onChange);
- input.addEventListener("blur", onChange);
-
- input.addEventListener("keyup", function () {
-
- input.style.height = "";
-
- var heightNow = input.scrollHeight;
-
- input.style.height = heightNow + "px";
-
- if (heightNow != scrollHeight) {
- scrollHeight = heightNow;
- cell.getRow().normalizeHeight();
- }
- });
-
- input.addEventListener("keydown", function (e) {
-
- switch (e.keyCode) {
- case 27:
- cancel();
- break;
-
- case 38:
- //up arrow
- if (vertNav == "editor" || vertNav == "hybrid" && input.selectionStart) {
- e.stopImmediatePropagation();
- e.stopPropagation();
- }
-
- break;
-
- case 40:
- //down arrow
- if (vertNav == "editor" || vertNav == "hybrid" && input.selectionStart !== input.value.length) {
- e.stopImmediatePropagation();
- e.stopPropagation();
- }
- break;
- }
- });
-
- if (editorParams.mask) {
- this.table.modules.edit.maskInput(input, editorParams);
- }
-
- return input;
- },
-
- //input element with type of number
- number: function number(cell, onRendered, success, cancel, editorParams) {
-
- var cellValue = cell.getValue(),
- vertNav = editorParams.verticalNavigation || "editor",
- input = document.createElement("input");
-
- input.setAttribute("type", "number");
-
- if (typeof editorParams.max != "undefined") {
- input.setAttribute("max", editorParams.max);
- }
-
- if (typeof editorParams.min != "undefined") {
- input.setAttribute("min", editorParams.min);
- }
-
- if (typeof editorParams.step != "undefined") {
- input.setAttribute("step", editorParams.step);
- }
-
- //create and style input
- input.style.padding = "4px";
- input.style.width = "100%";
- input.style.boxSizing = "border-box";
-
- if (editorParams.elementAttributes && _typeof(editorParams.elementAttributes) == "object") {
- for (var key in editorParams.elementAttributes) {
- if (key.charAt(0) == "+") {
- key = key.slice(1);
- input.setAttribute(key, input.getAttribute(key) + editorParams.elementAttributes["+" + key]);
- } else {
- input.setAttribute(key, editorParams.elementAttributes[key]);
- }
- }
- }
-
- input.value = cellValue;
-
- var blurFunc = function blurFunc(e) {
- onChange();
- };
-
- onRendered(function () {
- //submit new value on blur
- input.removeEventListener("blur", blurFunc);
-
- input.focus({ preventScroll: true });
- input.style.height = "100%";
-
- //submit new value on blur
- input.addEventListener("blur", blurFunc);
- });
-
- function onChange() {
- var value = input.value;
-
- if (!isNaN(value) && value !== "") {
- value = Number(value);
- }
-
- if (value !== cellValue) {
- if (success(value)) {
- cellValue = value; //persist value if successfully validated incase editor is used as header filter
- }
- } else {
- cancel();
- }
- }
-
- //submit new value on enter
- input.addEventListener("keydown", function (e) {
- switch (e.keyCode) {
- case 13:
- // case 9:
- onChange();
- break;
-
- case 27:
- cancel();
- break;
-
- case 38: //up arrow
- case 40:
- //down arrow
- if (vertNav == "editor") {
- e.stopImmediatePropagation();
- e.stopPropagation();
- }
- break;
- }
- });
-
- if (editorParams.mask) {
- this.table.modules.edit.maskInput(input, editorParams);
- }
-
- return input;
- },
-
- //input element with type of number
- range: function range(cell, onRendered, success, cancel, editorParams) {
-
- var cellValue = cell.getValue(),
- input = document.createElement("input");
-
- input.setAttribute("type", "range");
-
- if (typeof editorParams.max != "undefined") {
- input.setAttribute("max", editorParams.max);
- }
-
- if (typeof editorParams.min != "undefined") {
- input.setAttribute("min", editorParams.min);
- }
-
- if (typeof editorParams.step != "undefined") {
- input.setAttribute("step", editorParams.step);
- }
-
- //create and style input
- input.style.padding = "4px";
- input.style.width = "100%";
- input.style.boxSizing = "border-box";
-
- if (editorParams.elementAttributes && _typeof(editorParams.elementAttributes) == "object") {
- for (var key in editorParams.elementAttributes) {
- if (key.charAt(0) == "+") {
- key = key.slice(1);
- input.setAttribute(key, input.getAttribute(key) + editorParams.elementAttributes["+" + key]);
- } else {
- input.setAttribute(key, editorParams.elementAttributes[key]);
- }
- }
- }
-
- input.value = cellValue;
-
- onRendered(function () {
- input.focus({ preventScroll: true });
- input.style.height = "100%";
- });
-
- function onChange() {
- var value = input.value;
-
- if (!isNaN(value) && value !== "") {
- value = Number(value);
- }
-
- if (value != cellValue) {
- if (success(value)) {
- cellValue = value; //persist value if successfully validated incase editor is used as header filter
- }
- } else {
- cancel();
- }
- }
-
- //submit new value on blur
- input.addEventListener("blur", function (e) {
- onChange();
- });
-
- //submit new value on enter
- input.addEventListener("keydown", function (e) {
- switch (e.keyCode) {
- case 13:
- case 9:
- onChange();
- break;
-
- case 27:
- cancel();
- break;
- }
- });
-
- return input;
- },
-
- //select
- select: function select(cell, onRendered, success, cancel, editorParams) {
- var self = this,
- cellEl = cell.getElement(),
- initialValue = cell.getValue(),
- vertNav = editorParams.verticalNavigation || "editor",
- initialDisplayValue = typeof initialValue !== "undefined" || initialValue === null ? initialValue : typeof editorParams.defaultValue !== "undefined" ? editorParams.defaultValue : "",
- input = document.createElement("input"),
- listEl = document.createElement("div"),
- dataItems = [],
- displayItems = [],
- currentItem = {},
- blurable = true;
-
- this.table.rowManager.element.addEventListener("scroll", cancelItem);
-
- if (Array.isArray(editorParams) || !Array.isArray(editorParams) && (typeof editorParams === "undefined" ? "undefined" : _typeof(editorParams)) === "object" && !editorParams.values) {
- console.warn("DEPRECATION WARNING - values for the select editor must now be passed into the values property of the editorParams object, not as the editorParams object");
- editorParams = { values: editorParams };
- }
-
- function getUniqueColumnValues(field) {
- var output = {},
- data = self.table.getData(),
- column;
-
- if (field) {
- column = self.table.columnManager.getColumnByField(field);
- } else {
- column = cell.getColumn()._getSelf();
- }
-
- if (column) {
- data.forEach(function (row) {
- var val = column.getFieldValue(row);
-
- if (val !== null && typeof val !== "undefined" && val !== "") {
- output[val] = true;
- }
- });
-
- if (editorParams.sortValuesList) {
- if (editorParams.sortValuesList == "asc") {
- output = Object.keys(output).sort();
- } else {
- output = Object.keys(output).sort().reverse();
- }
- } else {
- output = Object.keys(output);
- }
- } else {
- console.warn("unable to find matching column to create select lookup list:", field);
- }
-
- return output;
- }
-
- function parseItems(inputValues, curentValue) {
- var dataList = [];
- var displayList = [];
-
- function processComplexListItem(item) {
- var item = {
- label: editorParams.listItemFormatter ? editorParams.listItemFormatter(item.value, item.label) : item.label,
- value: item.value,
- element: false
- };
-
- if (item.value === curentValue || !isNaN(parseFloat(item.value)) && !isNaN(parseFloat(item.value)) && parseFloat(item.value) === parseFloat(curentValue)) {
- setCurrentItem(item);
- }
-
- dataList.push(item);
- displayList.push(item);
-
- return item;
- }
-
- if (typeof inputValues == "function") {
- inputValues = inputValues(cell);
- }
-
- if (Array.isArray(inputValues)) {
- inputValues.forEach(function (value) {
- var item;
-
- if ((typeof value === "undefined" ? "undefined" : _typeof(value)) === "object") {
-
- if (value.options) {
- item = {
- label: value.label,
- group: true,
- element: false
- };
-
- displayList.push(item);
-
- value.options.forEach(function (item) {
- processComplexListItem(item);
- });
- } else {
- processComplexListItem(value);
- }
- } else {
-
- item = {
- label: editorParams.listItemFormatter ? editorParams.listItemFormatter(value, value) : value,
- value: value,
- element: false
- };
-
- if (item.value === curentValue || !isNaN(parseFloat(item.value)) && !isNaN(parseFloat(item.value)) && parseFloat(item.value) === parseFloat(curentValue)) {
- setCurrentItem(item);
- }
-
- dataList.push(item);
- displayList.push(item);
- }
- });
- } else {
- for (var key in inputValues) {
- var item = {
- label: editorParams.listItemFormatter ? editorParams.listItemFormatter(key, inputValues[key]) : inputValues[key],
- value: key,
- element: false
- };
-
- if (item.value === curentValue || !isNaN(parseFloat(item.value)) && !isNaN(parseFloat(item.value)) && parseFloat(item.value) === parseFloat(curentValue)) {
- setCurrentItem(item);
- }
-
- dataList.push(item);
- displayList.push(item);
- }
- }
-
- dataItems = dataList;
- displayItems = displayList;
-
- fillList();
- }
-
- function fillList() {
- while (listEl.firstChild) {
- listEl.removeChild(listEl.firstChild);
- }displayItems.forEach(function (item) {
- var el = item.element;
-
- if (!el) {
-
- if (item.group) {
- el = document.createElement("div");
- el.classList.add("tabulator-edit-select-list-group");
- el.tabIndex = 0;
- el.innerHTML = item.label === "" ? " " : item.label;
- } else {
- el = document.createElement("div");
- el.classList.add("tabulator-edit-select-list-item");
- el.tabIndex = 0;
- el.innerHTML = item.label === "" ? " " : item.label;
-
- el.addEventListener("click", function () {
- setCurrentItem(item);
- chooseItem();
- });
-
- if (item === currentItem) {
- el.classList.add("active");
- }
- }
-
- el.addEventListener("mousedown", function () {
- blurable = false;
-
- setTimeout(function () {
- blurable = true;
- }, 10);
- });
-
- item.element = el;
- }
-
- listEl.appendChild(el);
- });
- }
-
- function setCurrentItem(item) {
-
- if (currentItem && currentItem.element) {
- currentItem.element.classList.remove("active");
- }
-
- currentItem = item;
- input.value = item.label === " " ? "" : item.label;
-
- if (item.element) {
- item.element.classList.add("active");
- }
- }
-
- function chooseItem() {
- hideList();
-
- if (initialValue !== currentItem.value) {
- initialValue = currentItem.value;
- success(currentItem.value);
- } else {
- cancel();
- }
- }
-
- function cancelItem() {
- hideList();
- cancel();
- }
-
- function showList() {
- if (!listEl.parentNode) {
-
- if (editorParams.values === true) {
- parseItems(getUniqueColumnValues(), initialDisplayValue);
- } else if (typeof editorParams.values === "string") {
- parseItems(getUniqueColumnValues(editorParams.values), initialDisplayValue);
- } else {
- parseItems(editorParams.values || [], initialDisplayValue);
- }
-
- var offset = Tabulator.prototype.helpers.elOffset(cellEl);
-
- listEl.style.minWidth = cellEl.offsetWidth + "px";
-
- listEl.style.top = offset.top + cellEl.offsetHeight + "px";
- listEl.style.left = offset.left + "px";
-
- listEl.addEventListener("mousedown", function (e) {
- blurable = false;
-
- setTimeout(function () {
- blurable = true;
- }, 10);
- });
-
- document.body.appendChild(listEl);
- }
- }
-
- function hideList() {
- if (listEl.parentNode) {
- listEl.parentNode.removeChild(listEl);
- }
-
- removeScrollListener();
- }
-
- function removeScrollListener() {
- self.table.rowManager.element.removeEventListener("scroll", cancelItem);
- }
-
- //style input
- input.setAttribute("type", "text");
-
- input.style.padding = "4px";
- input.style.width = "100%";
- input.style.boxSizing = "border-box";
- input.style.cursor = "default";
- input.readOnly = this.currentCell != false;
-
- if (editorParams.elementAttributes && _typeof(editorParams.elementAttributes) == "object") {
- for (var key in editorParams.elementAttributes) {
- if (key.charAt(0) == "+") {
- key = key.slice(1);
- input.setAttribute(key, input.getAttribute(key) + editorParams.elementAttributes["+" + key]);
- } else {
- input.setAttribute(key, editorParams.elementAttributes[key]);
- }
- }
- }
-
- input.value = typeof initialValue !== "undefined" || initialValue === null ? initialValue : "";
-
- // if(editorParams.values === true){
- // parseItems(getUniqueColumnValues(), initialValue);
- // }else if(typeof editorParams.values === "string"){
- // parseItems(getUniqueColumnValues(editorParams.values), initialValue);
- // }else{
- // parseItems(editorParams.values || [], initialValue);
- // }
-
- //allow key based navigation
- input.addEventListener("keydown", function (e) {
- var index;
-
- switch (e.keyCode) {
- case 38:
- //up arrow
- index = dataItems.indexOf(currentItem);
-
- if (vertNav == "editor" || vertNav == "hybrid" && index) {
- e.stopImmediatePropagation();
- e.stopPropagation();
- e.preventDefault();
-
- if (index > 0) {
- setCurrentItem(dataItems[index - 1]);
- }
- }
- break;
-
- case 40:
- //down arrow
- index = dataItems.indexOf(currentItem);
-
- if (vertNav == "editor" || vertNav == "hybrid" && index < dataItems.length - 1) {
- e.stopImmediatePropagation();
- e.stopPropagation();
- e.preventDefault();
-
- if (index < dataItems.length - 1) {
- if (index == -1) {
- setCurrentItem(dataItems[0]);
- } else {
- setCurrentItem(dataItems[index + 1]);
- }
- }
- }
- break;
-
- case 37: //left arrow
- case 39:
- //right arrow
- e.stopImmediatePropagation();
- e.stopPropagation();
- e.preventDefault();
- break;
-
- case 13:
- //enter
- chooseItem();
- break;
-
- case 27:
- //escape
- cancelItem();
- break;
- }
- });
-
- input.addEventListener("blur", function (e) {
- if (blurable) {
- cancelItem();
- }
- });
-
- input.addEventListener("focus", function (e) {
- showList();
- });
-
- //style list element
- listEl = document.createElement("div");
- listEl.classList.add("tabulator-edit-select-list");
-
- onRendered(function () {
- input.style.height = "100%";
- input.focus({ preventScroll: true });
- });
-
- return input;
- },
-
- //autocomplete
- autocomplete: function autocomplete(cell, onRendered, success, cancel, editorParams) {
- var self = this,
- cellEl = cell.getElement(),
- initialValue = cell.getValue(),
- vertNav = editorParams.verticalNavigation || "editor",
- initialDisplayValue = typeof initialValue !== "undefined" || initialValue === null ? initialValue : typeof editorParams.defaultValue !== "undefined" ? editorParams.defaultValue : "",
- input = document.createElement("input"),
- listEl = document.createElement("div"),
- allItems = [],
- displayItems = [],
- values = [],
- currentItem = false,
- blurable = true;
-
- this.table.rowManager.element.addEventListener("scroll", cancelItem);
-
- //style input
- input.setAttribute("type", "search");
-
- input.style.padding = "4px";
- input.style.width = "100%";
- input.style.boxSizing = "border-box";
-
- if (editorParams.elementAttributes && _typeof(editorParams.elementAttributes) == "object") {
- for (var key in editorParams.elementAttributes) {
- if (key.charAt(0) == "+") {
- key = key.slice(1);
- input.setAttribute(key, input.getAttribute(key) + editorParams.elementAttributes["+" + key]);
- } else {
- input.setAttribute(key, editorParams.elementAttributes[key]);
- }
- }
- }
-
- //style list element
- listEl.classList.add("tabulator-edit-select-list");
-
- listEl.addEventListener("mousedown", function (e) {
- blurable = false;
-
- setTimeout(function () {
- blurable = true;
- }, 10);
- });
-
- function getUniqueColumnValues(field) {
- var output = {},
- data = self.table.getData(),
- column;
-
- if (field) {
- column = self.table.columnManager.getColumnByField(field);
- } else {
- column = cell.getColumn()._getSelf();
- }
-
- if (column) {
- data.forEach(function (row) {
- var val = column.getFieldValue(row);
-
- if (val !== null && typeof val !== "undefined" && val !== "") {
- output[val] = true;
- }
- });
-
- if (editorParams.sortValuesList) {
- if (editorParams.sortValuesList == "asc") {
- output = Object.keys(output).sort();
- } else {
- output = Object.keys(output).sort().reverse();
- }
- } else {
- output = Object.keys(output);
- }
- } else {
- console.warn("unable to find matching column to create autocomplete lookup list:", field);
- }
-
- return output;
- }
-
- function filterList(term, intialLoad) {
- var matches = [],
- values,
- items,
- searchEl;
-
- //lookup base values list
- if (editorParams.values === true) {
- values = getUniqueColumnValues();
- } else if (typeof editorParams.values === "string") {
- values = getUniqueColumnValues(editorParams.values);
- } else {
- values = editorParams.values || [];
- }
-
- if (editorParams.searchFunc) {
- matches = editorParams.searchFunc(term, values);
-
- if (matches instanceof Promise) {
-
- addNotice(typeof editorParams.searchingPlaceholder !== "undefined" ? editorParams.searchingPlaceholder : "Searching...");
-
- matches.then(function (result) {
- fillListIfNotEmpty(parseItems(result), intialLoad);
- }).catch(function (err) {
- console.err("error in autocomplete search promise:", err);
- });
- } else {
- fillListIfNotEmpty(parseItems(matches), intialLoad);
- }
- } else {
- items = parseItems(values);
-
- if (term === "") {
- if (editorParams.showListOnEmpty) {
- matches = items;
- }
- } else {
- items.forEach(function (item) {
- if (item.value !== null || typeof item.value !== "undefined") {
- if (String(item.value).toLowerCase().indexOf(String(term).toLowerCase()) > -1 || String(item.title).toLowerCase().indexOf(String(term).toLowerCase()) > -1) {
- matches.push(item);
- }
- }
- });
- }
-
- fillListIfNotEmpty(matches, intialLoad);
- }
- }
-
- function addNotice(notice) {
- var searchEl = document.createElement("div");
-
- clearList();
-
- if (notice !== false) {
- searchEl.classList.add("tabulator-edit-select-list-notice");
- searchEl.tabIndex = 0;
-
- if (notice instanceof Node) {
- searchEl.appendChild(notice);
- } else {
- searchEl.innerHTML = notice;
- }
-
- listEl.appendChild(searchEl);
- }
- }
-
- function parseItems(inputValues) {
- var itemList = [];
-
- if (Array.isArray(inputValues)) {
- inputValues.forEach(function (value) {
- var item = {
- title: editorParams.listItemFormatter ? editorParams.listItemFormatter(value, value) : value,
- value: value
- };
-
- itemList.push(item);
- });
- } else {
- for (var key in inputValues) {
- var item = {
- title: editorParams.listItemFormatter ? editorParams.listItemFormatter(key, inputValues[key]) : inputValues[key],
- value: key
- };
-
- itemList.push(item);
- }
- }
-
- return itemList;
- }
-
- function clearList() {
- while (listEl.firstChild) {
- listEl.removeChild(listEl.firstChild);
- }
- }
-
- function fillListIfNotEmpty(items, intialLoad) {
- if (items.length) {
- fillList(items, intialLoad);
- } else {
- if (editorParams.emptyPlaceholder) {
- addNotice(editorParams.emptyPlaceholder);
- }
- }
- }
-
- function fillList(items, intialLoad) {
- var current = false;
-
- clearList();
-
- displayItems = items;
-
- displayItems.forEach(function (item) {
- var el = item.element;
-
- if (!el) {
- el = document.createElement("div");
- el.classList.add("tabulator-edit-select-list-item");
- el.tabIndex = 0;
- el.innerHTML = item.title;
-
- el.addEventListener("click", function (e) {
- setCurrentItem(item);
- chooseItem();
- });
-
- el.addEventListener("mousedown", function (e) {
- blurable = false;
-
- setTimeout(function () {
- blurable = true;
- }, 10);
- });
-
- item.element = el;
-
- if (intialLoad && item.value == initialValue) {
- input.value = item.title;
- item.element.classList.add("active");
- current = true;
- }
-
- if (item === currentItem) {
- item.element.classList.add("active");
- current = true;
- }
- }
-
- listEl.appendChild(el);
- });
-
- if (!current) {
- setCurrentItem(false);
- }
- }
-
- function chooseItem() {
- hideList();
-
- if (currentItem) {
- if (initialValue !== currentItem.value) {
- initialValue = currentItem.value;
- input.value = currentItem.title;
- success(currentItem.value);
- } else {
- cancel();
- }
- } else {
- if (editorParams.freetext) {
- initialValue = input.value;
- success(input.value);
- } else {
- if (editorParams.allowEmpty && input.value === "") {
- initialValue = input.value;
- success(input.value);
- } else {
- cancel();
- }
- }
- }
- }
-
- function showList() {
- if (!listEl.parentNode) {
- while (listEl.firstChild) {
- listEl.removeChild(listEl.firstChild);
- }var offset = Tabulator.prototype.helpers.elOffset(cellEl);
-
- listEl.style.minWidth = cellEl.offsetWidth + "px";
-
- listEl.style.top = offset.top + cellEl.offsetHeight + "px";
- listEl.style.left = offset.left + "px";
- document.body.appendChild(listEl);
- }
- }
-
- function setCurrentItem(item, showInputValue) {
- if (currentItem && currentItem.element) {
- currentItem.element.classList.remove("active");
- }
-
- currentItem = item;
-
- if (item && item.element) {
- item.element.classList.add("active");
- }
- }
-
- function hideList() {
- if (listEl.parentNode) {
- listEl.parentNode.removeChild(listEl);
- }
-
- removeScrollListener();
- }
-
- function cancelItem() {
- hideList();
- cancel();
- }
-
- function removeScrollListener() {
- self.table.rowManager.element.removeEventListener("scroll", cancelItem);
- }
-
- //allow key based navigation
- input.addEventListener("keydown", function (e) {
- var index;
-
- switch (e.keyCode) {
- case 38:
- //up arrow
- index = displayItems.indexOf(currentItem);
-
- if (vertNav == "editor" || vertNav == "hybrid" && index) {
- e.stopImmediatePropagation();
- e.stopPropagation();
- e.preventDefault();
-
- if (index > 0) {
- setCurrentItem(displayItems[index - 1]);
- } else {
- setCurrentItem(false);
- }
- }
- break;
-
- case 40:
- //down arrow
-
- index = displayItems.indexOf(currentItem);
-
- if (vertNav == "editor" || vertNav == "hybrid" && index < displayItems.length - 1) {
-
- e.stopImmediatePropagation();
- e.stopPropagation();
- e.preventDefault();
-
- if (index < displayItems.length - 1) {
- if (index == -1) {
- setCurrentItem(displayItems[0]);
- } else {
- setCurrentItem(displayItems[index + 1]);
- }
- }
- }
- break;
-
- case 37: //left arrow
- case 39:
- //right arrow
- e.stopImmediatePropagation();
- e.stopPropagation();
- e.preventDefault();
- break;
-
- case 13:
- //enter
- chooseItem();
- break;
-
- case 27:
- //escape
- cancelItem();
- break;
-
- case 36: //home
- case 35:
- //end
- //prevent table navigation while using input element
- e.stopImmediatePropagation();
- break;
- }
- });
-
- input.addEventListener("keyup", function (e) {
-
- switch (e.keyCode) {
- case 38: //up arrow
- case 37: //left arrow
- case 39: //up arrow
- case 40: //right arrow
- case 13: //enter
- case 27:
- //escape
- break;
-
- default:
- filterList(input.value);
- }
- });
-
- input.addEventListener("search", function (e) {
- filterList(input.value);
- });
-
- input.addEventListener("blur", function (e) {
- if (blurable) {
- chooseItem();
- }
- });
-
- input.addEventListener("focus", function (e) {
- var value = initialDisplayValue;
- showList();
- input.value = value;
- filterList(value, true);
- });
-
- onRendered(function () {
- input.style.height = "100%";
- input.focus({ preventScroll: true });
- });
-
- if (editorParams.mask) {
- this.table.modules.edit.maskInput(input, editorParams);
- }
-
- return input;
- },
-
- //start rating
- star: function star(cell, onRendered, success, cancel, editorParams) {
- var self = this,
- element = cell.getElement(),
- value = cell.getValue(),
- maxStars = element.getElementsByTagName("svg").length || 5,
- size = element.getElementsByTagName("svg")[0] ? element.getElementsByTagName("svg")[0].getAttribute("width") : 14,
- stars = [],
- starsHolder = document.createElement("div"),
- star = document.createElementNS('http://www.w3.org/2000/svg', "svg");
-
- //change star type
- function starChange(val) {
- stars.forEach(function (star, i) {
- if (i < val) {
- if (self.table.browser == "ie") {
- star.setAttribute("class", "tabulator-star-active");
- } else {
- star.classList.replace("tabulator-star-inactive", "tabulator-star-active");
- }
-
- star.innerHTML = '<polygon fill="#488CE9" stroke="#014AAE" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/>';
- } else {
- if (self.table.browser == "ie") {
- star.setAttribute("class", "tabulator-star-inactive");
- } else {
- star.classList.replace("tabulator-star-active", "tabulator-star-inactive");
- }
-
- star.innerHTML = '<polygon fill="#010155" stroke="#686868" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/>';
- }
- });
- }
-
- //build stars
- function buildStar(i) {
-
- var starHolder = document.createElement("span");
- var nextStar = star.cloneNode(true);
-
- stars.push(nextStar);
-
- starHolder.addEventListener("mouseenter", function (e) {
- e.stopPropagation();
- e.stopImmediatePropagation();
- starChange(i);
- });
-
- starHolder.addEventListener("mousemove", function (e) {
- e.stopPropagation();
- e.stopImmediatePropagation();
- });
-
- starHolder.addEventListener("click", function (e) {
- e.stopPropagation();
- e.stopImmediatePropagation();
- success(i);
- });
-
- starHolder.appendChild(nextStar);
- starsHolder.appendChild(starHolder);
- }
-
- //handle keyboard navigation value change
- function changeValue(val) {
- value = val;
- starChange(val);
- }
-
- //style cell
- element.style.whiteSpace = "nowrap";
- element.style.overflow = "hidden";
- element.style.textOverflow = "ellipsis";
-
- //style holding element
- starsHolder.style.verticalAlign = "middle";
- starsHolder.style.display = "inline-block";
- starsHolder.style.padding = "4px";
-
- //style star
- star.setAttribute("width", size);
- star.setAttribute("height", size);
- star.setAttribute("viewBox", "0 0 512 512");
- star.setAttribute("xml:space", "preserve");
- star.style.padding = "0 1px";
-
- if (editorParams.elementAttributes && _typeof(editorParams.elementAttributes) == "object") {
- for (var key in editorParams.elementAttributes) {
- if (key.charAt(0) == "+") {
- key = key.slice(1);
- starsHolder.setAttribute(key, starsHolder.getAttribute(key) + editorParams.elementAttributes["+" + key]);
- } else {
- starsHolder.setAttribute(key, editorParams.elementAttributes[key]);
- }
- }
- }
-
- //create correct number of stars
- for (var i = 1; i <= maxStars; i++) {
- buildStar(i);
- }
-
- //ensure value does not exceed number of stars
- value = Math.min(parseInt(value), maxStars);
-
- // set initial styling of stars
- starChange(value);
-
- starsHolder.addEventListener("mousemove", function (e) {
- starChange(0);
- });
-
- starsHolder.addEventListener("click", function (e) {
- success(0);
- });
-
- element.addEventListener("blur", function (e) {
- cancel();
- });
-
- //allow key based navigation
- element.addEventListener("keydown", function (e) {
- switch (e.keyCode) {
- case 39:
- //right arrow
- changeValue(value + 1);
- break;
-
- case 37:
- //left arrow
- changeValue(value - 1);
- break;
-
- case 13:
- //enter
- success(value);
- break;
-
- case 27:
- //escape
- cancel();
- break;
- }
- });
-
- return starsHolder;
- },
-
- //draggable progress bar
- progress: function progress(cell, onRendered, success, cancel, editorParams) {
- var element = cell.getElement(),
- max = typeof editorParams.max === "undefined" ? element.getElementsByTagName("div")[0].getAttribute("max") || 100 : editorParams.max,
- min = typeof editorParams.min === "undefined" ? element.getElementsByTagName("div")[0].getAttribute("min") || 0 : editorParams.min,
- percent = (max - min) / 100,
- value = cell.getValue() || 0,
- handle = document.createElement("div"),
- bar = document.createElement("div"),
- mouseDrag,
- mouseDragWidth;
-
- //set new value
- function updateValue() {
- var calcVal = percent * Math.round(bar.offsetWidth / (element.clientWidth / 100)) + min;
- success(calcVal);
- element.setAttribute("aria-valuenow", calcVal);
- element.setAttribute("aria-label", value);
- }
-
- //style handle
- handle.style.position = "absolute";
- handle.style.right = "0";
- handle.style.top = "0";
- handle.style.bottom = "0";
- handle.style.width = "5px";
- handle.classList.add("tabulator-progress-handle");
-
- //style bar
- bar.style.display = "inline-block";
- bar.style.position = "relative";
- // bar.style.top = "8px";
- // bar.style.bottom = "8px";
- // bar.style.left = "4px";
- // bar.style.marginRight = "4px";
- bar.style.height = "100%";
- bar.style.backgroundColor = "#488CE9";
- bar.style.maxWidth = "100%";
- bar.style.minWidth = "0%";
-
- if (editorParams.elementAttributes && _typeof(editorParams.elementAttributes) == "object") {
- for (var key in editorParams.elementAttributes) {
- if (key.charAt(0) == "+") {
- key = key.slice(1);
- bar.setAttribute(key, bar.getAttribute(key) + editorParams.elementAttributes["+" + key]);
- } else {
- bar.setAttribute(key, editorParams.elementAttributes[key]);
- }
- }
- }
-
- //style cell
- element.style.padding = "4px 4px";
-
- //make sure value is in range
- value = Math.min(parseFloat(value), max);
- value = Math.max(parseFloat(value), min);
-
- //workout percentage
- value = Math.round((value - min) / percent);
- // bar.style.right = value + "%";
- bar.style.width = value + "%";
-
- element.setAttribute("aria-valuemin", min);
- element.setAttribute("aria-valuemax", max);
-
- bar.appendChild(handle);
-
- handle.addEventListener("mousedown", function (e) {
- mouseDrag = e.screenX;
- mouseDragWidth = bar.offsetWidth;
- });
-
- handle.addEventListener("mouseover", function () {
- handle.style.cursor = "ew-resize";
- });
-
- element.addEventListener("mousemove", function (e) {
- if (mouseDrag) {
- bar.style.width = mouseDragWidth + e.screenX - mouseDrag + "px";
- }
- });
-
- element.addEventListener("mouseup", function (e) {
- if (mouseDrag) {
- e.stopPropagation();
- e.stopImmediatePropagation();
-
- mouseDrag = false;
- mouseDragWidth = false;
-
- updateValue();
- }
- });
-
- //allow key based navigation
- element.addEventListener("keydown", function (e) {
- switch (e.keyCode) {
- case 39:
- //right arrow
- e.preventDefault();
- bar.style.width = bar.clientWidth + element.clientWidth / 100 + "px";
- break;
-
- case 37:
- //left arrow
- e.preventDefault();
- bar.style.width = bar.clientWidth - element.clientWidth / 100 + "px";
- break;
-
- case 9: //tab
- case 13:
- //enter
- updateValue();
- break;
-
- case 27:
- //escape
- cancel();
- break;
-
- }
- });
-
- element.addEventListener("blur", function () {
- cancel();
- });
-
- return bar;
- },
-
- //checkbox
- tickCross: function tickCross(cell, onRendered, success, cancel, editorParams) {
- var value = cell.getValue(),
- input = document.createElement("input"),
- tristate = editorParams.tristate,
- indetermValue = typeof editorParams.indeterminateValue === "undefined" ? null : editorParams.indeterminateValue,
- indetermState = false;
-
- input.setAttribute("type", "checkbox");
- input.style.marginTop = "5px";
- input.style.boxSizing = "border-box";
-
- if (editorParams.elementAttributes && _typeof(editorParams.elementAttributes) == "object") {
- for (var key in editorParams.elementAttributes) {
- if (key.charAt(0) == "+") {
- key = key.slice(1);
- input.setAttribute(key, input.getAttribute(key) + editorParams.elementAttributes["+" + key]);
- } else {
- input.setAttribute(key, editorParams.elementAttributes[key]);
- }
- }
- }
-
- input.value = value;
-
- if (tristate && (typeof value === "undefined" || value === indetermValue || value === "")) {
- indetermState = true;
- input.indeterminate = true;
- }
-
- if (this.table.browser != "firefox") {
- //prevent blur issue on mac firefox
- onRendered(function () {
- input.focus({ preventScroll: true });
- });
- }
-
- input.checked = value === true || value === "true" || value === "True" || value === 1;
-
- function setValue(blur) {
- if (tristate) {
- if (!blur) {
- if (input.checked && !indetermState) {
- input.checked = false;
- input.indeterminate = true;
- indetermState = true;
- return indetermValue;
- } else {
- indetermState = false;
- return input.checked;
- }
- } else {
- if (indetermState) {
- return indetermValue;
- } else {
- return input.checked;
- }
- }
- } else {
- return input.checked;
- }
- }
-
- //submit new value on blur
- input.addEventListener("change", function (e) {
- success(setValue());
- });
-
- input.addEventListener("blur", function (e) {
- success(setValue(true));
- });
-
- //submit new value on enter
- input.addEventListener("keydown", function (e) {
- if (e.keyCode == 13) {
- success(setValue());
- }
- if (e.keyCode == 27) {
- cancel();
- }
- });
-
- return input;
- }
- };
-
- Tabulator.prototype.registerModule("edit", Edit);
|