@rxap/form-system
Version:
This package provides a set of directives, decorators, mixins, and validators to simplify the creation of dynamic forms in Angular applications. It offers features such as automatic control creation, data source integration, component customization, and h
284 lines (250 loc) • 9.41 kB
JavaScript
(function (compodoc) {
var usePushState = typeof history.pushState !== 'undefined',
// DOM Elements
$body = $('body'),
$searchResults,
$searchInput,
$searchList,
$searchTitle,
$searchResultsCount,
$searchQuery,
$mainContainer,
$xsMenu;
// Throttle search
function throttle(fn, wait) {
var timeout;
return function () {
var ctx = this,
args = arguments;
if (!timeout) {
timeout = setTimeout(function () {
timeout = undefined;
fn.apply(ctx, args);
}, wait);
}
};
}
function displayResults(res) {
var noResults = res.count == 0;
var groups = {};
$searchResults.toggleClass('no-results', noResults);
// Clear old results
$searchList.empty();
// Display title for research
$searchResultsCount.text(res.count);
$searchQuery.text(res.query);
// Group result by context
res.results.forEach(function (res) {
var context = res.title.split(' - ')[0];
if (typeof groups[context] === 'undefined') {
groups[context] = {
results: [res]
};
} else {
groups[context].results.push(res);
}
});
var sortedGroups = Object.keys(groups).sort();
for (var i = 0; i < sortedGroups.length; i++) {
var property = sortedGroups[i];
var $li = $('<li>', {
class: 'search-results-group'
});
var finalPropertyLabel = '';
var propertyLabels = property.split('-');
if (
propertyLabels.length === 2 &&
propertyLabels[0] !== 'miscellaneous' &&
propertyLabels[0] !== 'additional'
) {
finalPropertyLabel =
propertyLabels[0].charAt(0).toUpperCase() +
propertyLabels[0].substring(1) +
' - ' +
propertyLabels[1].charAt(0).toUpperCase() +
propertyLabels[1].substring(1) +
' (' +
groups[property].results.length +
')';
} else if (propertyLabels[0] === 'additional') {
finalPropertyLabel =
'Additional pages' + ' (' + groups[property].results.length + ')';
} else {
finalPropertyLabel =
propertyLabels[0].charAt(0).toUpperCase() +
propertyLabels[0].substring(1) +
' (' +
groups[property].results.length +
')';
}
var $groupTitle = $('<h3>', {
text: finalPropertyLabel
});
$groupTitle.appendTo($li);
var $ulResults = $('<ul>', {
class: 'search-results-list'
});
groups[property].results.forEach(function (res) {
var link = '';
var $liResult = $('<li>', {
class: 'search-results-item'
});
switch (COMPODOC_CURRENT_PAGE_DEPTH) {
case 0:
link = './';
break;
case 1:
case 2:
case 3:
case 4:
case 5:
link = '../'.repeat(COMPODOC_CURRENT_PAGE_DEPTH);
break;
}
var finalResLabel =
res.title.split(' - ')[1].charAt(0).toUpperCase() +
res.title.split(' - ')[1].substring(1);
var $link = $('<a>', {
href: link + res.url,
text: finalResLabel
});
$link.appendTo($liResult);
$liResult.appendTo($ulResults);
});
$ulResults.appendTo($li);
$li.appendTo($searchList);
}
}
function launchSearch(q) {
$body.addClass('with-search');
if ($xsMenu.css('display') === 'block') {
$mainContainer.css('height', 'calc(100% - 100px)');
$mainContainer.css('margin-top', '100px');
}
throttle(
compodoc.search.query(q, 0, MAX_SEARCH_RESULTS).then(function (results) {
displayResults(results);
}),
1000
);
}
function closeSearch() {
$body.removeClass('with-search');
if ($xsMenu.css('display') === 'block') {
$mainContainer.css('height', 'calc(100% - 50px)');
}
}
function bindMenuButton() {
document.getElementById('btn-menu').addEventListener('click', function () {
if ($xsMenu.css('display') === 'none') {
$body.removeClass('with-search');
$mainContainer.css('height', 'calc(100% - 50px)');
}
$.each($searchInputs, function (index, item) {
var item = $(item);
item.val('');
});
});
}
function bindSearch() {
// Bind DOM
$searchInputs = $('#book-search-input input');
$searchResults = $('.search-results');
$searchList = $searchResults.find('.search-results-list');
$searchTitle = $searchResults.find('.search-results-title');
$searchResultsCount = $searchTitle.find('.search-results-count');
$searchQuery = $searchTitle.find('.search-query');
$mainContainer = $('.container-fluid');
$xsMenu = $('.xs-menu');
// Launch query based on input content
function handleUpdate(item) {
var q = item.val();
if (q.length == 0) {
closeSearch();
window.location.href = window.location.href.replace(window.location.search, '');
} else {
launchSearch(q);
}
}
// Detect true content change in search input
var propertyChangeUnbound = false;
$.each($searchInputs, function (index, item) {
var item = $(item);
// HTML5 (IE9 & others)
item.on('input', function (e) {
// Unbind propertychange event for IE9+
if (!propertyChangeUnbound) {
$(this).unbind('propertychange');
propertyChangeUnbound = true;
}
handleUpdate($(this));
});
// Workaround for IE < 9
item.on('propertychange', function (e) {
if (e.originalEvent.propertyName == 'value') {
handleUpdate($(this));
}
});
// Push to history on blur
item.on('blur', function (e) {
// Update history state
if (usePushState) {
var uri = updateQueryString('q', $(this).val());
if ($(this).val() !== '') {
history.pushState({ path: uri }, null, uri);
}
}
});
});
}
function launchSearchFromQueryString() {
var q = getParameterByName('q');
if (q && q.length > 0) {
// Update search inputs
$.each($searchInputs, function (index, item) {
var item = $(item);
item.val(q);
});
// Launch search
launchSearch(q);
}
}
compodoc.addEventListener(compodoc.EVENTS.SEARCH_READY, function (event) {
bindSearch();
bindMenuButton();
launchSearchFromQueryString();
});
function getParameterByName(name) {
var url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)', 'i'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
function updateQueryString(key, value) {
value = encodeURIComponent(value);
var url = window.location.href;
var re = new RegExp('([?&])' + key + '=.*?(&|#|$)(.*)', 'gi'),
hash;
if (re.test(url)) {
if (typeof value !== 'undefined' && value !== null)
return url.replace(re, '$1' + key + '=' + value + '$2$3');
else {
hash = url.split('#');
url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
if (typeof hash[1] !== 'undefined' && hash[1] !== null) url += '#' + hash[1];
return url;
}
} else {
if (typeof value !== 'undefined' && value !== null) {
var separator = url.indexOf('?') !== -1 ? '&' : '?';
hash = url.split('#');
url = hash[0] + separator + key + '=' + value;
if (typeof hash[1] !== 'undefined' && hash[1] !== null) url += '#' + hash[1];
return url;
} else return url;
}
}
})(compodoc);