[Summary view] [Print] [Text view]

   1  /**
   2   * Page behaviours
   3   *
   4   * This class adds various behaviours to the rendered page
   5   */
   6  dw_page = {
   7      /**
   8       * initialize page behaviours
   9       */
  10      init: function(){
  11          dw_page.sectionHighlight();
  12          dw_page.currentIDHighlight();
  13          jQuery('a.fn_top').on('mouseover', dw_page.footnoteDisplay);
  14          dw_page.makeToggle('#dw__toc h3','#dw__toc > div');
  15      },
  16  
  17      /**
  18       * Highlight the section when hovering over the appropriate section edit button
  19       *
  20       * @author Andreas Gohr <andi@splitbrain.org>
  21       */
  22      sectionHighlight: function() {
  23          jQuery('form.btn_secedit')
  24              /*
  25               * wrap the editable section in a div
  26               */
  27              .each(function () {
  28                  let $tgt = jQuery(this).parent();
  29                  const match = $tgt.attr('class').match(/(\s+|^)editbutton_(\d+)(\s+|$)/);
  30                  if(!match) return;
  31                  const nr = match[2];
  32                  let $highlight = jQuery(); // holder for elements in the section to be highlighted
  33                  const $highlightWrap = jQuery('<div class="section_highlight_wrapper"></div>');
  34  
  35                  // the edit button should be part of the highlight
  36                  $highlight = $highlight.add($tgt);
  37  
  38                  // Walk the dom tree in reverse to find the sibling which is or contains the section edit marker
  39                  while ($tgt.length > 0 && !($tgt.hasClass('sectionedit' + nr) || $tgt.find('.sectionedit' + nr).length)) {
  40                      $tgt = $tgt.prev();
  41                      $highlight = $highlight.add($tgt);
  42                  }
  43                  // wrap the elements to be highlighted in the section highlight wrapper
  44                  $highlight.wrapAll($highlightWrap);
  45              })
  46              /*
  47               * highlight the section
  48               */
  49              .on('mouseover', function () {
  50                  jQuery(this).parents('.section_highlight_wrapper').addClass('section_highlight');
  51              })
  52              /*
  53               * remove highlight
  54               */
  55              .on('mouseout', function () {
  56                  jQuery(this).parents('.section_highlight_wrapper').removeClass('section_highlight');
  57              });
  58      },
  59  
  60  
  61      /**
  62       * Highlight internal link pointing to current page
  63       *
  64       * @author Henry Pan <dokuwiki@phy25.com>
  65       */
  66      currentIDHighlight: function(){
  67          jQuery('a.wikilink1, a.wikilink2').filter('[data-wiki-id="'+JSINFO.id+'"]').wrap('<span class="curid"></span>');
  68      },
  69  
  70      /**
  71       * Create/get a insitu popup used by the footnotes
  72       *
  73       * @param target - the DOM element at which the popup should be aligned at
  74       * @param popup_id - the ID of the (new) DOM popup
  75       * @return the Popup jQuery object
  76       */
  77      insituPopup: function(target, popup_id) {
  78          // get or create the popup div
  79          var $fndiv = jQuery('#' + popup_id);
  80  
  81          // popup doesn't exist, yet -> create it
  82          if($fndiv.length === 0){
  83              $fndiv = jQuery(document.createElement('div'))
  84                  .attr('id', popup_id)
  85                  .addClass('insitu-footnote JSpopup')
  86                  .attr('aria-hidden', 'true')
  87                  .on('mouseleave', function () {jQuery(this).hide().attr('aria-hidden', 'true');})
  88                  .attr('role', 'tooltip');
  89              jQuery('.dokuwiki:first').append($fndiv);
  90          }
  91  
  92          // position() does not support hidden elements
  93          $fndiv.show().position({
  94              my: 'left top',
  95              at: 'left center',
  96              of: target
  97          }).hide();
  98  
  99          return $fndiv;
 100      },
 101  
 102      /**
 103       * Display an insitu footnote popup
 104       *
 105       * @author Andreas Gohr <andi@splitbrain.org>
 106       * @author Chris Smith <chris@jalakai.co.uk>
 107       * @author Anika Henke <anika@selfthinker.org>
 108       */
 109      footnoteDisplay: function () {
 110          var $content = jQuery(jQuery(this).attr('href')) // Footnote text anchor
 111                        .parent().siblings('.content').clone();
 112  
 113          if (!$content.length) {
 114              return;
 115          }
 116  
 117          // prefix ids on any elements with "insitu__" to ensure they remain unique
 118          jQuery('[id]', $content).each(function(){
 119              var id = jQuery(this).attr('id');
 120              jQuery(this).attr('id', 'insitu__' + id);
 121          });
 122  
 123          var content = $content.html().trim();
 124          // now put the content into the wrapper
 125          dw_page.insituPopup(this, 'insitu__fn').html(content)
 126          .show().attr('aria-hidden', 'false');
 127      },
 128  
 129      /**
 130       * Makes an element foldable by clicking its handle
 131       *
 132       * This is used for the TOC toggling, but can be used for other elements
 133       * as well. A state indicator is inserted into the handle and can be styled
 134       * by CSS.
 135       *
 136       * To properly reserve space for the expanded element, the sliding animation is
 137       * done on the children of the content. To make that look good and to make sure aria
 138       * attributes are assigned correctly, it's recommended to make sure that the content
 139       * element contains a single child element only.
 140       *
 141       * @param {selector} handle What should be clicked to toggle
 142       * @param {selector} content This element will be toggled
 143       * @param {int} state initial state (-1 = open, 1 = closed)
 144       */
 145      makeToggle: function(handle, content, state){
 146          var $handle, $content, $clicky, $child, setClicky;
 147          $handle = jQuery(handle);
 148          if(!$handle.length) return;
 149          $content = jQuery(content);
 150          if(!$content.length) return;
 151  
 152          // we animate the children
 153          $child = $content.children();
 154  
 155          // class/display toggling
 156          setClicky = function(hiding){
 157              if(hiding){
 158                  $clicky.html('<span>+</span>');
 159                  $handle.addClass('closed');
 160                  $handle.removeClass('open');
 161              }else{
 162                  $clicky.html('<span>−</span>');
 163                  $handle.addClass('open');
 164                  $handle.removeClass('closed');
 165              }
 166          };
 167  
 168          $handle[0].setState = function(state){
 169              var hidden;
 170              if(!state) state = 1;
 171  
 172              // Assert that content instantly takes the whole space
 173              $content.css('min-height', $content.height()).show();
 174  
 175              // stop any running animation
 176              $child.stop(true, true);
 177  
 178              // was a state given or do we toggle?
 179              if(state === -1) {
 180                  hidden = false;
 181              } else if(state === 1) {
 182                  hidden = true;
 183              } else {
 184                  hidden = $child.is(':hidden');
 185              }
 186  
 187              // update the state
 188              setClicky(!hidden);
 189  
 190              // Start animation and assure that $toc is hidden/visible
 191              $child.dw_toggle(hidden, function () {
 192                  $content.toggle(hidden);
 193                  $content.attr('aria-expanded', hidden);
 194                  $content.css('min-height',''); // remove min-height again
 195              }, true);
 196          };
 197  
 198          // the state indicator
 199          $clicky = jQuery(document.createElement('strong'));
 200  
 201          // click function
 202          $handle.css('cursor','pointer')
 203                 .on('click', $handle[0].setState)
 204                 .prepend($clicky);
 205  
 206          // initial state
 207          $handle[0].setState(state);
 208      }
 209  };
 210  
 211  jQuery(dw_page.init);