[Summary view] [Print] [Text view]

   1  /*
   2  javascript for Bubble Tooltips by Alessandro Fulciniti
   3  - http://pro.html.it - http://web-graphics.com
   4  obtained from: http://web-graphics.com/mtarchive/001717.php
   5  
   6  phpBB Development Team:
   7      - modified to adhere to our coding guidelines
   8      - integration into our design
   9      - added ability to perform tooltips on select elements
  10      - further adjustements
  11  */
  12  
  13  (function($) { // Avoid conflicts with other libraries
  14  
  15  'use strict';
  16  
  17  var tooltips = [];
  18  
  19  /**
  20   * Enable tooltip replacements for selects
  21   * @param {string} id ID tag of select
  22   * @param {string} headline Text that should appear on top of tooltip
  23   * @param {string} [subId] Sub ID that should only be using tooltips (optional)
  24  */
  25  phpbb.enableTooltipsSelect = function (id, headline, subId) {
  26      var $links, hold;
  27  
  28      hold = $('<span />', {
  29          id:        '_tooltip_container',
  30          css: {
  31              position: 'absolute'
  32          }
  33      });
  34  
  35      $('body').append(hold);
  36  
  37      if (!id) {
  38          $links = $('.roles-options li');
  39      } else {
  40          $links = $('.roles-options li', '#' + id);
  41      }
  42  
  43      $links.each(function () {
  44          var $this = $(this);
  45  
  46          if (subId) {
  47              if ($this.parent().attr('id').substr(0, subId.length) === subId) {
  48                  phpbb.prepareTooltips($this, headline);
  49              }
  50          } else {
  51              phpbb.prepareTooltips($this, headline);
  52          }
  53      });
  54  };
  55  
  56  /**
  57   * Prepare elements to replace
  58   *
  59   * @param {jQuery} $element Element to prepare for tooltips
  60   * @param {string} headText Text heading to display
  61  */
  62  phpbb.prepareTooltips = function ($element, headText) {
  63      var $tooltip, text, $desc, $title;
  64  
  65      text = $element.attr('data-title');
  66  
  67      if (text === null || text.length === 0) {
  68          return;
  69      }
  70  
  71      $title = $('<span />', {
  72          class: 'top',
  73          css: {
  74              display:    'block'
  75          }
  76      })
  77          .append(document.createTextNode(headText));
  78  
  79      $desc = $('<span />', {
  80          class: 'bottom',
  81          html: text,
  82          css: {
  83              display: 'block'
  84          }
  85      });
  86  
  87      $tooltip = $('<span />', {
  88          class: 'tooltip',
  89          css: {
  90              display: 'block'
  91          }
  92      })
  93          .append($title)
  94          .append($desc);
  95  
  96      tooltips[$element.attr('data-id')] = $tooltip;
  97      $element.on('mouseover', phpbb.showTooltip);
  98      $element.on('mouseout', phpbb.hideTooltip);
  99  };
 100  
 101  /**
 102   * Show tooltip
 103   *
 104   * @param {object} $element Element passed by .on()
 105  */
 106  phpbb.showTooltip = function ($element) {
 107      var $this = $($element.target);
 108      $('#_tooltip_container').append(tooltips[$this.attr('data-id')]);
 109      phpbb.positionTooltip($this);
 110  };
 111  
 112  /**
 113   * Hide tooltip
 114  */
 115  phpbb.hideTooltip = function () {
 116      var d = document.getElementById('_tooltip_container');
 117      if (d.childNodes.length > 0) {
 118          d.removeChild(d.firstChild);
 119      }
 120  };
 121  
 122  /**
 123   * Correct positioning of tooltip container
 124   *
 125   * @param {jQuery} $element Tooltip element that should be positioned
 126  */
 127  phpbb.positionTooltip = function ($element) {
 128      var offset;
 129  
 130      $element = $element.parent();
 131      offset = $element.offset();
 132  
 133      if ($('body').hasClass('rtl')) {
 134          $('#_tooltip_container').css({
 135              top: offset.top + 30,
 136              left: offset.left + 255
 137          });
 138      } else {
 139          $('#_tooltip_container').css({
 140              top: offset.top + 30,
 141              left: offset.left - 205
 142          });
 143      }
 144  };
 145  
 146  /**
 147   * Prepare roles drop down select
 148   */
 149  phpbb.prepareRolesDropdown = function () {
 150      var $options = $('.roles-options li');
 151  
 152      // Display span and hide select
 153      $('.roles-options > span').css('display', 'block');
 154      $('.roles-options > select').hide();
 155      $('.roles-options > input[type=hidden]').each(function () {
 156          var $this = $(this);
 157  
 158          if ($this.attr('data-name') && !$this.attr('name')) {
 159              $this.attr('name', $this.attr('data-name'));
 160          }
 161      });
 162  
 163      // Prepare highlighting of select options and settings update
 164      $options.each(function () {
 165          var $this = $(this);
 166          var $rolesOptions = $this.closest('.roles-options');
 167          var $span = $rolesOptions.children('span');
 168  
 169          // Correctly show selected option
 170          if (typeof $this.attr('data-selected') !== 'undefined') {
 171              $rolesOptions
 172                  .children('span')
 173                  .text($this.text())
 174                  .attr('data-default', $this.text())
 175                  .attr('data-default-val', $this.attr('data-id'));
 176  
 177              // Save default text of drop down if there is no default set yet
 178              if (typeof $span.attr('data-default') === 'undefined') {
 179                  $span.attr('data-default', $span.text());
 180              }
 181  
 182              // Prepare resetting drop down on form reset
 183              $this.closest('form').on('reset', function () {
 184                  $span.text($span.attr('data-default'));
 185                  $rolesOptions.children('input[type=hidden]')
 186                      .val($span.attr('data-default-val'));
 187              });
 188          }
 189  
 190          $this.on('mouseover', function () {
 191              var $this = $(this);
 192              $options.removeClass('roles-highlight');
 193              $this.addClass('roles-highlight');
 194          }).on('click', function () {
 195              var $this = $(this);
 196              var $rolesOptions = $this.closest('.roles-options');
 197  
 198              // Update settings
 199              set_role_settings($this.attr('data-id'), $this.attr('data-target-id'));
 200              init_colours($this.attr('data-target-id').replace('advanced', ''));
 201  
 202              // Set selected setting
 203              $rolesOptions.children('span')
 204                  .text($this.text());
 205              $rolesOptions.children('input[type=hidden]')
 206                  .val($this.attr('data-id'));
 207  
 208              // Trigger hiding of selection options
 209              $('body').trigger('click');
 210          });
 211      });
 212  };
 213  
 214  // Run onload functions for RolesDropdown and tooltips
 215  $(function() {
 216      // Enable tooltips
 217      phpbb.enableTooltipsSelect('set-permissions', $('#set-permissions').attr('data-role-description'), 'role');
 218  
 219      // Prepare dropdown
 220      phpbb.prepareRolesDropdown();
 221  });
 222  
 223  })(jQuery); // Avoid conflicts with other libraries