@@ -402,63 +402,77 @@ $(function () {
402402 // -------------
403403 // Tooltip generation and handling
404404 // -------------
405- const toolTipArrowSize = 10 ;
405+ /* _variables.scss & _navigation.scss - .tooltip:before */
406+ const toolTipArrowHalfSize = 10 ; /* $tooltip-arrow-half-size */
406407 var tooltip = null ;
408+ var tooltipRenderer = null ;
407409 var tooltipTarget = null ;
408410 var elementUnderCursor = null ;
409411 var shouldShowTooltip = false ;
410412 var showTimeoutFuncID ;
411413 var hideTimeoutFuncID ;
412414
413- function getTooltipPos ( event , tooltipTarget ) {
414- const mouseX = event . clientX ;
415+ function setTooltipPos ( event , tooltipTarget , alignment ) {
415416 const rect = tooltipTarget . getBoundingClientRect ( ) ;
416- var computedStyle = window . getComputedStyle ( tooltipTarget ) ;
417- var lineHeight = parseFloat ( computedStyle . getPropertyValue ( 'line-height' ) ) ;
418-
417+ var computedTargetStyle = window . getComputedStyle ( tooltipTarget ) ;
418+ var lineHeight = parseFloat ( computedTargetStyle . getPropertyValue ( 'line-height' ) ) ;
419+ // NOTE: The content of the targeted tooltip is still not yet calculated correctly here, as it is invisible, and getting visible is animated multiple ways
420+ // use, the always visible, not animated at all, but offscreen pair of it (tooltipRenderer) for rendered size calculations.
421+ // To get this work all the animation styles must be removed in the css (_navigations.scss) for #tooltipRenderer
422+ // TODO: Now we have the correct tooltip content via teh tooltipRenderer trick.
423+ // Prevent tooltip overflow on window edges in all directions.
424+ var tooltipRect = tooltipRenderer . getBoundingClientRect ( ) ;
425+ var tooltipWidth = tooltipRect . width ;
419426 var pos = new DOMPoint ( ) ;
427+
428+ const mouseX = event . clientX ;
429+ var xShift = ( alignment == 'tooltip-align-left' ? tooltipWidth : ( alignment == 'tooltip-align-center' ? tooltipWidth / 2 : 0 ) ) ;
420430 pos . x = mouseX ; // Use now mouse X instead - Math.max(0, pos.x + document.documentElement.scrollLeft + rect.left);
431+ pos . x -= xShift ;
432+
421433 // If the occupied space of the tooltip target is bigger than its line height, it means it spanws to multiple lines
422434 // align to the upper line part in that case if the mouse is on the right side of the middle of its rect, otherwise align to the bottom row part
423435 var multilineUpperPart = ( rect . height > lineHeight && mouseX > rect . x + rect . width / 2 ) ;
424436 pos . y = pos . y + document . documentElement . scrollTop + rect . top + rect . height / ( multilineUpperPart ? 2 : 1 ) ;
425437
426- return pos ;
438+ var tooltipArrowHorizontalPadding = ( 4 * toolTipArrowHalfSize ) * ( alignment == 'tooltip-align-left' ? 1 : ( alignment == 'tooltip-align-right' ? - 1 : 0 ) ) ;
439+ setArrowPosition ( '--tooltip-arrow-left' , xShift - tooltipArrowHorizontalPadding - toolTipArrowHalfSize ) ;
440+ setArrowPosition ( '--tooltip-arrow-top' , - 1 * toolTipArrowHalfSize ) ;
441+
442+ tooltip . style . left = pos . x + tooltipArrowHorizontalPadding + 'px' ;
443+ tooltip . style . top = pos . y + toolTipArrowHalfSize + 'px' ;
427444 }
428445
429446 function setArrowPosition ( posName , position ) {
430447 var newPosition = position + 'px' ;
431448 tooltip . style . setProperty ( posName , newPosition ) ;
432449 }
433450
434- function showTooltip ( event , tooltipText , isFullPageContent ) {
451+ function showTooltip ( event , tooltipText , alignment , isFullPageContent ) {
452+
435453 tooltip . innerHTML = tooltipText . innerHTML ;
454+ tooltipRenderer . innerHTML = tooltipText . innerHTML ;
436455
437- if ( isFullPageContent )
456+ if ( isFullPageContent ) {
438457 tooltip . classList . add ( "full-content-tooltip" ) ;
439- else
458+ tooltipRenderer . classList . add ( "full-content-tooltip" ) ;
459+ }
460+ else {
440461 tooltip . classList . remove ( "full-content-tooltip" ) ;
441-
442- var tooltipPos = getTooltipPos ( event , tooltipTarget )
443- var tooltipArrowLeftShift = 2 * toolTipArrowSize ;
444-
445- setArrowPosition ( '--tooltip-arrow-top' , - 1 * toolTipArrowSize ) ;
446- setArrowPosition ( '--tooltip-arrow-left' , tooltipArrowLeftShift + toolTipArrowSize / 2 ) ;
447-
448- tooltip . style . left = tooltipPos . x - 2 * tooltipArrowLeftShift + 'px' ;
449- tooltip . style . top = tooltipPos . y + toolTipArrowSize + 'px' ;
450-
462+ tooltipRenderer . classList . remove ( "full-content-tooltip" ) ;
463+ }
464+ tooltip . classList . remove ( 'tooltip-align-left' , 'tooltip-align-center' , 'tooltip-align-right' ) ;
465+ tooltipRenderer . classList . remove ( 'tooltip-align-left' , 'tooltip-align-center' , 'tooltip-align-right' ) ;
466+ tooltip . classList . add ( alignment ) ;
467+ tooltipRenderer . classList . add ( alignment ) ;
468+
451469 shouldShowTooltip = true ;
452470
453471 clearTimeout ( hideTimeoutFuncID ) ;
454472 clearTimeout ( showTimeoutFuncID ) ;
455473 showTimeoutFuncID = setTimeout ( function ( ) {
456474 if ( shouldShowTooltip ) {
457- // Size is still not yet calculated correctly here
458- // var rect = tooltip.getBoundingClientRect();
459- // tooltip.style.top = (tooltipPos.y + rect.height) + 'px';
460- // tooltip.style.left = (tooltipPos.x + rect.width / 2) + 'px';
461-
475+ setTooltipPos ( event , tooltipTarget , alignment ) ;
462476 tooltip . classList . add ( 'visible' ) ;
463477 }
464478 } , 100 ) ;
@@ -490,6 +504,7 @@ $(function () {
490504 function addContentTooltips ( ) {
491505 var tooltipElements = document . querySelectorAll ( '.content-tooltip' ) ;
492506 tooltip = document . getElementById ( 'tooltip' ) ;
507+ tooltipRenderer = document . getElementById ( 'tooltipRenderer' ) ;
493508 hideTooltip ( ) ;
494509
495510 tooltipElements . forEach ( function ( element ) {
@@ -500,6 +515,7 @@ $(function () {
500515
501516 element . addEventListener ( 'mouseover' , function ( event ) {
502517 var isFullPageContent = element . classList . contains ( 'full-content-tooltip' ) ;
518+ var alignment = ( element . classList . contains ( 'tooltip-align-left' ) ? 'tooltip-align-left' : ( element . classList . contains ( 'tooltip-align-center' ) ? 'tooltip-align-center' : 'tooltip-align-right' ) ) ;
503519
504520 tooltipTarget = element ;
505521
@@ -512,10 +528,9 @@ $(function () {
512528 newContent = newContent . innerHTML ;
513529 newContent = alterContentForTooltip ( newContent , url . isFullPageContent ) ;
514530
515- if ( newContent . length > 0 ) {
516- // cache for reuse
517- tooltipText . innerHTML = newContent ;
518- showTooltip ( event , tooltipText , isFullPageContent ) ;
531+ if ( newContent . length > 0 ) {
532+ tooltipText . innerHTML = newContent ; // cache for reuse
533+ showTooltip ( event , tooltipText , alignment , isFullPageContent ) ;
519534 }
520535 else {
521536 // Quick navigation from another link with tooltip to this link would keep alive the previous tooltip
@@ -539,7 +554,7 @@ $(function () {
539554 }
540555 }
541556 else
542- showTooltip ( event , tooltipText , isFullPageContent ) ;
557+ showTooltip ( event , tooltipText , alignment , isFullPageContent ) ;
543558 } ) ;
544559 } ) ;
545560
@@ -598,47 +613,50 @@ $(function () {
598613 // Search
599614 // -------------
600615
601- // Close search screen with Esc key or toggle with predefined hotKey
602- $ ( document ) . on ( 'keyup' , function ( event ) {
603- // Define the desired hotkey (in this case, Ctrl + Shift + F)
604- var searchHotkey = { ctrlKey : true , shiftKey : true , key : 'F' } ;
616+ if ( searchEnabled ) {
617+ // Close search screen with Esc key or toggle with predefined hotKey
618+ $ ( document ) . on ( 'keyup' , function ( event ) {
619+ // Define the desired hotkey (in this case, Ctrl + Shift + F)
620+ var searchHotkey = { ctrlKey : true , shiftKey : true , key : 'F' } ;
605621
606- if ( event . keyCode === 27 ) {
607- if ( $ ( ".initial-content" ) . hasClass ( "is--hidden" ) )
622+ if ( event . keyCode === 27 ) {
623+ if ( $ ( ".initial-content" ) . hasClass ( "is--hidden" ) )
624+ toggleSearch ( event ) ;
625+ }
626+ else if ( event . ctrlKey === searchHotkey . ctrlKey &&
627+ event . shiftKey === searchHotkey . shiftKey &&
628+ event . key === searchHotkey . key ) {
608629 toggleSearch ( event ) ;
609- }
610- else if ( event . ctrlKey === searchHotkey . ctrlKey &&
611- event . shiftKey === searchHotkey . shiftKey &&
612- event . key === searchHotkey . key ) {
613- toggleSearch ( event ) ;
614- }
615- } ) ;
630+ }
631+ } ) ;
616632
617- function toggleSearch ( event ) {
618- $ ( ".search-content" ) . toggleClass ( "is--visible" ) ;
619- $ ( ".initial-content" ) . toggleClass ( "is--hidden" ) ;
620-
621- if ( $ ( ".initial-content" ) . hasClass ( "is--hidden" ) ) {
622- // set focus on input
623- setTimeout ( function ( ) {
624- var input = $ ( ".search-content" ) . find ( "input" ) ;
625- input . trigger ( "focus" ) ;
626- input . trigger ( "select" ) ;
627- } , 250 ) ;
628- }
629- else {
630- // set focus back to the initial content otherwise the focus will not get back to the search input once again
631- $ ( ".initial-content" ) . find ( "input" ) . focus ( ) ;
633+ function toggleSearch ( event ) {
634+ $ ( ".search-content" ) . toggleClass ( "is--visible" ) ;
635+ $ ( ".search-content__form" ) . toggleClass ( "is--visible" ) ;
636+ $ ( ".initial-content" ) . toggleClass ( "is--hidden" ) ;
637+
638+ if ( $ ( ".initial-content" ) . hasClass ( "is--hidden" ) ) {
639+ // set focus on input
640+ setTimeout ( function ( ) {
641+ var input = $ ( ".search-content__form" ) . find ( "input" ) ;
642+ input . trigger ( "focus" ) ;
643+ input . trigger ( "select" ) ;
644+ } , 100 ) ;
645+ }
646+ else {
647+ // set focus back via the initial content otherwise the focus will not get back to the search input once again
648+ $ ( ".initial-content" ) . find ( "input" ) . focus ( ) ;
649+ }
650+
651+ if ( tooltipTarget )
652+ hideTooltip ( true ) ;
653+ // NOTE: event.target is not always the toggle here, use it directly instead of the event
654+ $ ( "#search-button" ) . trigger ( 'blur' ) ;
632655 }
633656
634- if ( tooltipTarget )
635- hideTooltip ( true ) ;
636- // NOTE: event.target is not always the toggle here, use it directly instead of the event
637- $ ( "#search-button" ) . trigger ( 'blur' ) ;
657+ $ ( "#search-button" ) . on ( 'click' , toggleSearch ) ;
638658 }
639659
640- $ ( "#search-button" ) . on ( 'click' , toggleSearch ) ;
641-
642660 // -------------
643661 // Startup
644662 // -------------
0 commit comments