ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Allow toggel on whole title, add toggle transition

Browse Source
This commit is contained in:
Maximilian Krög
2020-02-15 11:01:07 +01:00
parent ee8ec6f03a
commit bf2a7bd21a
3 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/jsdoc/api/template/static/scripts/main.js
+7 -5
View File
@@ -53,8 +53,7 @@ $(function () {
} }
const search = (function () { const search = (function () {
const $nav = $('.navigation'); const $navList = $('.navigation-list');
const $navList = $nav.find('.navigation-list');
const navListNode = $navList.get(0); const navListNode = $navList.get(0);
let $classItems; let $classItems;
let $members; let $members;
@@ -74,7 +73,6 @@ $(function () {
const $currentItem = $navList.find('.item[data-longname="' + longname + '"]:eq(0)'); const $currentItem = $navList.find('.item[data-longname="' + longname + '"]:eq(0)');
$currentItem.prependTo($navList); $currentItem.prependTo($navList);
return { return {
$nav: $nav,
$navList: $navList, $navList: $navList,
$currentItem: $currentItem, $currentItem: $currentItem,
lastSearchTerm: undefined, lastSearchTerm: undefined,
@@ -93,13 +91,14 @@ $(function () {
} }
}, },
manualToggle: function ($node, show) { manualToggle: function ($node, show) {
$node.addClass('toggle-manual');
$node.toggleClass('toggle-manual-hide', !show); $node.toggleClass('toggle-manual-hide', !show);
$node.toggleClass('toggle-manual-show', show); $node.toggleClass('toggle-manual-show', show);
manualToggles[$node.data('longname')] = $node; manualToggles[$node.data('longname')] = $node;
}, },
clearManualToggles: function() { clearManualToggles: function() {
for (let clsName in manualToggles) { for (let clsName in manualToggles) {
manualToggles[clsName].removeClass('toggle-manual-show toggle-manual-hide'); manualToggles[clsName].removeClass('toggle-manual toggle-manual-show toggle-manual-hide');
} }
manualToggles = {}; manualToggles = {};
}, },
@@ -240,7 +239,10 @@ $(function () {
doSearch(searchInput.value); doSearch(searchInput.value);
// Toggle when click an item element // Toggle when click an item element
search.$nav.on('click', '.toggle', function (e) { search.$navList.on('click', '.toggle', function (e) {
if (event.target.tagName.toLowerCase() === 'a') {
return;
}
const clsItem = $(this).closest('.item'); const clsItem = $(this).closest('.item');
let show; let show;
if (clsItem.hasClass('toggle-manual-show')) { if (clsItem.hasClass('toggle-manual-show')) {
config/jsdoc/api/template/static/styles/jaguar.css
+13
View File
@@ -140,6 +140,19 @@ li {
margin-right: 3px; margin-right: 3px;
flex-shrink: 0; flex-shrink: 0;
} }
.navigation .item .glyphicon:before {
display: inline-block;
}
.navigation .item.toggle-manual .glyphicon:before {
transition: transform .1s;
}
.navigation .item-class.toggle-manual-show .glyphicon:before {
/* With 90deg the icon slightly slides left at transition end */
transform: rotate(89.9deg);
}
.navigation .item-module.toggle-manual-show .glyphicon:before {
transform: rotate(45deg);
}
.navigation li.perfect-match { .navigation li.perfect-match {
border: 5px solid orange; border: 5px solid orange;
config/jsdoc/api/template/tmpl/navigation.tmpl
+3 -3
View File
@@ -42,9 +42,9 @@ function listContent(item, title, listItemPrinter) {
</div> </div>
<ul class="navigation-list search-empty"><?js <ul class="navigation-list search-empty"><?js
this.nav.forEach(function (item) { ?> this.nav.forEach(function (item) { ?>
<li class="item" data-longname="<?js= item.longname ?>" data-name="<?js= item.prettyname.toLowerCase() ?>"> <li class="item item-<?js= item.type ?>" data-longname="<?js= item.longname ?>" data-name="<?js= item.prettyname.toLowerCase() ?>">
<span class="title"> <span class="title toggle">
<span class="glyphicon <?js= getItemCssClass(item.type) ?> toggle"></span> <span class="glyphicon <?js= getItemCssClass(item.type) ?>"></span>
<span><?js= self.linkto(item.longname, item.prettyname.replace(/[.~]/g, '\u200b$&')) ?></span> <span><?js= self.linkto(item.longname, item.prettyname.replace(/[.~]/g, '\u200b$&')) ?></span>
</span><?js </span><?js
listContent(item, 'Members', printList); listContent(item, 'Members', printList);