/* eslint-disable func-names, consistent-return, no-return-assign */ import $ from 'jquery'; import fuzzaldrinPlus from 'fuzzaldrin-plus'; import sanitize from 'sanitize-html'; import axios from '~/lib/utils/axios_utils'; import { joinPaths, escapeFileUrl } from '~/lib/utils/url_utility'; import flash from '~/flash'; import { __ } from '~/locale'; // highlight text(awefwbwgtc -> awefwbwgtc ) const highlighter = function(element, text, matches) { let j = 0; let len = 0; let lastIndex = 0; let matchedChars = []; let matchIndex = matches[j]; let unmatched = text.substring(lastIndex, matchIndex); for (j = 0, len = matches.length; j < len; j += 1) { matchIndex = matches[j]; unmatched = text.substring(lastIndex, matchIndex); if (unmatched) { if (matchedChars.length) { element.append(matchedChars.join('').bold()); } matchedChars = []; element.append(document.createTextNode(unmatched)); } matchedChars.push(text[matchIndex]); lastIndex = matchIndex + 1; } if (matchedChars.length) { element.append(matchedChars.join('').bold()); } return element.append(document.createTextNode(text.substring(lastIndex))); }; export default class ProjectFindFile { constructor(element1, options) { this.element = element1; this.options = options; this.goToBlob = this.goToBlob.bind(this); this.goToTree = this.goToTree.bind(this); this.selectRowDown = this.selectRowDown.bind(this); this.selectRowUp = this.selectRowUp.bind(this); this.filePaths = {}; this.inputElement = this.element.find('.file-finder-input'); // init event this.initEvent(); // focus text input box this.inputElement.focus(); // load file list this.load(this.options.url); } initEvent() { this.inputElement.off('keyup'); this.inputElement.on( 'keyup', (function(_this) { return function(event) { const target = $(event.target); const value = target.val(); const ref = target.data('oldValue'); const oldValue = ref != null ? ref : ''; if (value !== oldValue) { target.data('oldValue', value); _this.findFile(); return _this.element .find('tr.tree-item') .eq(0) .addClass('selected') .focus(); } }; })(this), ); } findFile() { const searchText = sanitize(this.inputElement.val()); const result = searchText.length > 0 ? fuzzaldrinPlus.filter(this.filePaths, searchText) : this.filePaths; return this.renderList(result, searchText); // find file } // files paths load load(url) { axios .get(url) .then(({ data }) => { this.element.find('.loading').hide(); this.filePaths = data; this.findFile(); this.element .find('.files-slider tr.tree-item') .eq(0) .addClass('selected') .focus(); }) .catch(() => flash(__('An error occurred while loading filenames'))); } // render result renderList(filePaths, searchText) { let i = 0; let len = 0; let matches = []; const results = []; this.element.find('.tree-table > tbody').empty(); for (i = 0, len = filePaths.length; i < len; i += 1) { const filePath = filePaths[i]; if (i === 20) { break; } if (searchText) { matches = fuzzaldrinPlus.match(filePath, searchText); } const blobItemUrl = joinPaths(this.options.blobUrlTemplate, escapeFileUrl(filePath)); const html = ProjectFindFile.makeHtml(filePath, matches, blobItemUrl); results.push(this.element.find('.tree-table > tbody').append(html)); } this.element.find('.empty-state').toggleClass('hidden', Boolean(results.length)); return results; } // make tbody row html static makeHtml(filePath, matches, blobItemUrl) { const $tr = $( "