github.com/bosssauce/ponzu@v0.11.1-0.20200102001432-9bc41b703131/system/admin/static/editor/js/ckMaterializeOverrides.js (about)

     1  (function ($) {
     2      $.fn.ckTooltip = function (options) {
     3          var timeout = null,
     4              counter = null,
     5              started = false,
     6              counterInterval = null,
     7              margin = 5;
     8  
     9          // Defaults
    10          var defaults = {
    11              delay: 350
    12          };
    13          options = $.extend(defaults, options);
    14  
    15          return this.each(function(){
    16              var origin = $(this);
    17  
    18              // Create Text span
    19              var tooltip_text = $('<span></span>').text(origin.attr('data-tooltip'));
    20  
    21              // Create tooltip
    22              var newTooltip = $('<div></div>');
    23              newTooltip.addClass('material-tooltip').append(tooltip_text);
    24              newTooltip.appendTo($('body'));
    25  
    26              var backdrop = $('<div></div>').addClass('backdrop');
    27              backdrop.appendTo(newTooltip);
    28              backdrop.css({ top: 0, left:0 });
    29  
    30          //Destroy previously binded events
    31          //$(this).off('mouseenter mouseleave');
    32  
    33          $.event.special.destroyed = {
    34              remove: function(o) {
    35                  if (o.handler) {
    36                      o.handler();
    37                  }
    38              }
    39          };
    40          $(this).bind('destroyed', function() {
    41              newTooltip.remove();
    42          });
    43  
    44          // Mouse In
    45          $(this).on({
    46              mouseenter: function(e) {
    47                  var tooltip_delay = origin.data("delay");
    48  
    49                  tooltip_delay = (tooltip_delay === undefined || tooltip_delay === '') ? options.delay : tooltip_delay;
    50                  counter = 0;
    51                  counterInterval = setInterval(function(){
    52                      counter += 10;
    53  
    54                      if (counter >= tooltip_delay && started === false) {
    55                          started = true;
    56                          newTooltip.css({ display: 'block', left: '0px', top: '0px' });
    57  
    58                          // Set Tooltip text
    59                          newTooltip.children('span').text(origin.attr('data-tooltip'));
    60  
    61                          // Tooltip positioning
    62                          var originWidth = origin.outerWidth();
    63                          var originHeight = origin.outerHeight();
    64                          var tooltipPosition =  origin.attr('data-position');
    65                          var tooltipHeight = newTooltip.outerHeight();
    66                          var tooltipWidth = newTooltip.outerWidth();
    67                          var tooltipVerticalMovement = '0px';
    68                          var tooltipHorizontalMovement = '0px';
    69                          var scale_factor = 8;
    70  
    71                          if (tooltipPosition === "top") {
    72                          // Top Position
    73                          newTooltip.css({
    74                              top: origin.offset().top - tooltipHeight - margin,
    75                              left: origin.offset().left + originWidth/2 - tooltipWidth/2
    76                          });
    77                          tooltipVerticalMovement = '-10px';
    78                          backdrop.css({
    79                              borderRadius: '14px 14px 0 0',
    80                              transformOrigin: '50% 90%',
    81                              marginTop: tooltipHeight,
    82                              marginLeft: (tooltipWidth/2) - (backdrop.width()/2)
    83  
    84                          });
    85                          }
    86                          // Left Position
    87                          else if (tooltipPosition === "left") {
    88                              newTooltip.css({
    89                                  top: origin.offset().top + originHeight/2 - tooltipHeight/2,
    90                                  left: origin.offset().left - tooltipWidth - margin
    91                              });
    92                              tooltipHorizontalMovement = '-10px';
    93                              backdrop.css({
    94                                  width: '14px',
    95                                  height: '14px',
    96                                  borderRadius: '14px 0 0 14px',
    97                                  transformOrigin: '95% 50%',
    98                                  marginTop: tooltipHeight/2,
    99                                  marginLeft: tooltipWidth
   100                              });
   101                          }
   102                          // Right Position
   103                          else if (tooltipPosition === "right") {
   104                              newTooltip.css({
   105                                  top: origin.offset().top + originHeight/2 - tooltipHeight/2,
   106                                  left: origin.offset().left + originWidth + margin
   107                              });
   108                              tooltipHorizontalMovement = '+10px';
   109                              backdrop.css({
   110                                  width: '14px',
   111                                  height: '14px',
   112                                  borderRadius: '0 14px 14px 0',
   113                                  transformOrigin: '5% 50%',
   114                                  marginTop: tooltipHeight/2,
   115                                  marginLeft: '0px'
   116                              });
   117                          }
   118                          else {
   119                              // Bottom Position
   120                              newTooltip.css({
   121                                  top: origin.offset().top + origin.outerHeight() + margin,
   122                                  left: origin.offset().left + originWidth/2 - tooltipWidth/2
   123                              });
   124                              tooltipVerticalMovement = '+10px';
   125                              backdrop.css({
   126                                  marginLeft: (tooltipWidth/2) - (backdrop.width()/2)
   127                              });
   128                          }
   129  
   130                          // Calculate Scale to fill
   131                          scale_factor = tooltipWidth / 8;
   132                          if (scale_factor < 8) {
   133                              scale_factor = 8;
   134                          }
   135                          if (tooltipPosition === "right" || tooltipPosition === "left") {
   136                              scale_factor = tooltipWidth / 10;
   137                              if (scale_factor < 6)
   138                                  scale_factor = 6;
   139                          }
   140  
   141                          newTooltip.velocity({ opacity: 1, marginTop: tooltipVerticalMovement, marginLeft: tooltipHorizontalMovement}, { duration: 150, queue: false });
   142                          backdrop.css({ display: 'block' })
   143                          .velocity({opacity:1},{duration: 50, delay: 0, queue: false})
   144                          .velocity({scale: scale_factor}, {duration: 150, delay: 0, queue: false, easing: 'easeInOutQuad'});
   145                      }
   146                  }, 10); // End Interval
   147  
   148              // Mouse Out
   149              },
   150              mouseleave: function(){
   151                  // Reset State
   152                  clearInterval(counterInterval);
   153                  counter = 0;
   154  
   155                  // Animate back
   156                  newTooltip.velocity({
   157                      opacity: 0, marginTop: 0, marginLeft: 0}, { duration: 150, queue: false, delay: 50 }
   158                  );
   159                  backdrop.velocity({opacity: 0, scale: 1}, {
   160                      duration:150,
   161                      delay: 50, queue: false,
   162                      complete: function(){
   163                          backdrop.css('display', 'none');
   164                          newTooltip.css('display', 'none');
   165                          started = false;}
   166                  });
   167              }
   168              });
   169          });
   170      };
   171  
   172  }(jQuery));