js/index-button.js

   1 /* Make button to make fixed toc */
   2 $( function () {
   3         'use strict';
   4         var width, contentHeaderOffset, indexButton, navHeight, id;
   5         width = $( window ).width();
   6         if ( $( '#toc' ).html() && width > 1649 ) {
   7                 contentHeaderOffset = $( '.liberty-content-header' ).offset();
   8                 indexButton = document.createElement( 'button' );
   9                 indexButton.id = 'fixed-toc-button';
  10                 indexButton.type = 'button';
  11                 indexButton.className = 'btn btn-primary';
  12                 indexButton.innerHTML = '<span class="fa fa-list" aria-hidden="true"></span>';
  13                 indexButton.style.position = 'fixed';
  14                 indexButton.style.top = contentHeaderOffset.top + 'px';
  15                 indexButton.style.left = ( contentHeaderOffset.left - 47 - 15 ) + 'px';
  16                 window.damezuma = { doc: null };
  17                 $( indexButton ).click( function () {
  18                         $( indexButton ).fadeOut( 200 );
  19                         if ( !window.damezuma.doc ) {
  20                                 window.damezuma.doc = $( '#toc' ).clone();
  21                                 $( document.body ).append( window.damezuma.doc );
  22                                 $( window.damezuma.doc ).css( {
  23                                         position: 'fixed',
  24                                         top: 44,
  25                                         left: 0,
  26                                         'background-color': '#f5f8fa',
  27                                         'border-right': '1px solid #e1e8ed',
  28                                         color: '#373a3c',
  29                                         padding: '16px',
  30                                         bottom: 0,
  31                                         'overflow-y': 'auto',
  32                                         display: 'none',
  33                                         'max-width': '200px',
  34                                         'z-index': 3000
  35                                 } );
  36                                 window.damezuma.doc[ 0 ].id = 'fixed-toc';
  37                                 window.damezuma.doc.fadeIn( 200 );
  38                                 $( '#fixed-toc > .togglelink' ).click( function () {
  39                                         $( '#fixed-toc-button' ).fadeIn( 200 );
  40                                         $( window.damezuma.doc ).remove();
  41                                         window.damezuma.doc = null;
  42                                         return false;
  43                                 } );
  44
  45                                 /* Left toc click process */
  46                                 navHeight = $( '.nav-wrapper' ).height();
  47                                 $( '#fixed-toc ul li > a' ).click( function () {
  48                                         if ( $( this ).attr( 'href' )[ 0 ] === '#' ) {
  49                                                 id = String( $( this ).attr( 'href' ) );
  50                                                 if ( id.indexOf( '.' ) !== -1 ) {
  51                                                         id = document.getElementById( id.replace( '#', '' ) );
  52                                                 }
  53                                                 $( 'html,body' ).animate( {
  54                                                         scrollTop: ( $( id ).offset().top - navHeight - 10 )
  55                                                 }, 350 );
  56                                                 return false;
  57                                         }
  58                                 } );
  59                                 /* Left toc click process End */
  60                         }
  61                 } );
  62                 $( document.body ).append( indexButton );
  63         }
  64 } );