Bike!Bike! Website!
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

95 lines
3.4 KiB

(function() {
var searchControl = document.getElementById('search');
function filterTable() {
forEach(document.getElementById('search-table').getElementsByTagName('TBODY')[0].getElementsByTagName('TR'), function(tr) {
tr.classList.remove('hidden');
var value = searchControl.value;
if (value) {
var words = value.split(/\s+/);
for (var i = 0; i < words.length; i++) {
var word = new RegExp(words[i].replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"), "i");
if (tr.innerHTML.search(word) == -1) {
tr.classList.add('hidden');
}
}
}
});
}
// ref = https://davidwalsh.name/element-matches-selector
function selectorMatches(el, selector) {
var p = Element.prototype;
var f = p.matches || p.webkitMatchesSelector || p.mozMatchesSelector || p.msMatchesSelector || function(s) {
return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
};
return f.call(el, selector);
}
function saveRow(row) {
if (row) {
row.classList.remove('editing');
/*row.removeAttribute('data-editing');
forEach(row.getElementsByTagName('TD'), function(cell) {
var input = cell.getElementsByClassName('cell-editor')[0];
if (input) {
cell.removeChild(input);
}
});*/
}
}
function editTableCell(cell) {
if (selectorMatches(cell, 'tr[data-key].editable td')) {
editTableRow(cell.parentElement, cell);
}
/*var currentRow = document.querySelector('[data-key][data-editing="1"]');
if (currentRow && !currentRow.contains(cell)) {
saveRow(currentRow);
}
if (selectorMatches(cell, 'tr[data-key] td[name]')) {
if (!cell.getElementsByClassName('cell-editor').length) {
//var tr = cell.parentElement;
//saveRow(document.querySelector('[data-key][data-editing="1"]'), tr);
cell.parentElement.setAttribute('data-editing', "1");
var value = cell.innerHTML;
cell.innerHTML += '<textarea type="text" name="' + cell.getAttribute('name') + '" class="cell-editor">' + value + '</textarea>';
cell.parentElement.classList.add();
setTimeout(function() { cell.getElementsByClassName('cell-editor')[0].focus(); }, 100);
}
}*/
}
function editTableRow(row, cell) {
if (selectorMatches(row, 'tr[data-key].editable')) {
var key = row.getAttribute('data-key');
var currentRow = document.querySelector('tr[data-key].editable.editing');
if (currentRow && currentRow.getAttribute('data-key') !== key) {
saveRow(currentRow);
}
var editor = row.nextSibling;
if (!row.classList.contains('editing')) {
row.classList.add('editing');
var focusElement = null;
if (cell) {
focusElement = editor.querySelector('td[data-column-id="' + cell.getAttribute('data-column-id') + '"] .cell-editor');
}
(focusElement || editor.getElementsByClassName('cell-editor')[0]).focus();
}
}
}
document.addEventListener('click', function (event) { editTableCell(event.target); });
if (document.observe) {
document.observe("focusin", function (event) { editTableCell(event.target); });
} else {
document.addEventListener("focus", function (event) { editTableCell(event.target); }, true);
// document.addEventListener("focus", function (event) { editTableCell(event.target); }, true);
}
searchControl.addEventListener('keyup', filterTable);
searchControl.addEventListener('search', filterTable);
})();