Added the SCSS Materialize files

2026-07-13 02:53:44 +00:00 · 2015-11-07 09:58:43 +00:00
parent 667b46af65
commit 491ccaf422
82 changed files with 22554 additions and 0 deletions
@@ -0,0 +1,177 @@
+(function ($) {
+    $.fn.tooltip = function (options) {
+        var timeout = null,
+        counter = null,
+        started = false,
+        counterInterval = null,
+        margin = 5;
+
+      // Defaults
+      var defaults = {
+        delay: 350
+      };
+
+      // Remove tooltip from the activator
+      if (options === "remove") {
+        this.each(function(){
+          $('#' + $(this).attr('data-tooltip-id')).remove();
+        });
+        return false;
+      }
+
+      options = $.extend(defaults, options);
+
+
+      return this.each(function(){
+        var tooltipId = Materialize.guid();
+        var origin = $(this);
+        origin.attr('data-tooltip-id', tooltipId);
+
+        // Create Text span
+        var tooltip_text = $('<span></span>').text(origin.attr('data-tooltip'));
+
+        // Create tooltip
+        var newTooltip = $('<div></div>');
+        newTooltip.addClass('material-tooltip').append(tooltip_text)
+          .appendTo($('body'))
+          .attr('id', tooltipId);
+
+        var backdrop = $('<div></div>').addClass('backdrop');
+        backdrop.appendTo(newTooltip);
+        backdrop.css({ top: 0, left:0 });
+
+
+       //Destroy previously binded events
+      origin.off('mouseenter.tooltip mouseleave.tooltip');
+        // Mouse In
+      origin.on({
+        'mouseenter.tooltip': function(e) {
+          var tooltip_delay = origin.data("delay");
+          tooltip_delay = (tooltip_delay === undefined || tooltip_delay === '') ? options.delay : tooltip_delay;
+          counter = 0;
+          counterInterval = setInterval(function(){
+            counter += 10;
+            if (counter >= tooltip_delay && started === false) {
+              started = true;
+              newTooltip.css({ display: 'block', left: '0px', top: '0px' });
+
+              // Set Tooltip text
+              newTooltip.children('span').text(origin.attr('data-tooltip'));
+
+              // Tooltip positioning
+              var originWidth = origin.outerWidth();
+              var originHeight = origin.outerHeight();
+              var tooltipPosition =  origin.attr('data-position');
+              var tooltipHeight = newTooltip.outerHeight();
+              var tooltipWidth = newTooltip.outerWidth();
+              var tooltipVerticalMovement = '0px';
+              var tooltipHorizontalMovement = '0px';
+              var scale_factor = 8;
+
+              if (tooltipPosition === "top") {
+              // Top Position
+              newTooltip.css({
+                top: origin.offset().top - tooltipHeight - margin,
+                left: origin.offset().left + originWidth/2 - tooltipWidth/2
+              });
+              tooltipVerticalMovement = '-10px';
+              backdrop.css({
+                borderRadius: '14px 14px 0 0',
+                transformOrigin: '50% 90%',
+                marginTop: tooltipHeight,
+                marginLeft: (tooltipWidth/2) - (backdrop.width()/2)
+
+              });
+              }
+              // Left Position
+              else if (tooltipPosition === "left") {
+                newTooltip.css({
+                  top: origin.offset().top + originHeight/2 - tooltipHeight/2,
+                  left: origin.offset().left - tooltipWidth - margin
+                });
+                tooltipHorizontalMovement = '-10px';
+                backdrop.css({
+                  width: '14px',
+                  height: '14px',
+                  borderRadius: '14px 0 0 14px',
+                  transformOrigin: '95% 50%',
+                  marginTop: tooltipHeight/2,
+                  marginLeft: tooltipWidth
+                });
+              }
+              // Right Position
+              else if (tooltipPosition === "right") {
+                newTooltip.css({
+                  top: origin.offset().top + originHeight/2 - tooltipHeight/2,
+                  left: origin.offset().left + originWidth + margin
+                });
+                tooltipHorizontalMovement = '+10px';
+                backdrop.css({
+                  width: '14px',
+                  height: '14px',
+                  borderRadius: '0 14px 14px 0',
+                  transformOrigin: '5% 50%',
+                  marginTop: tooltipHeight/2,
+                  marginLeft: '0px'
+                });
+              }
+              else {
+                // Bottom Position
+                newTooltip.css({
+                  top: origin.offset().top + origin.outerHeight() + margin,
+                  left: origin.offset().left + originWidth/2 - tooltipWidth/2
+                });
+                tooltipVerticalMovement = '+10px';
+                backdrop.css({
+                  marginLeft: (tooltipWidth/2) - (backdrop.width()/2)
+                });
+              }
+
+              // Calculate Scale to fill
+              scale_factor = tooltipWidth / 8;
+              if (scale_factor < 8) {
+                scale_factor = 8;
+              }
+              if (tooltipPosition === "right" || tooltipPosition === "left") {
+                scale_factor = tooltipWidth / 10;
+                if (scale_factor < 6)
+                  scale_factor = 6;
+              }
+
+              newTooltip.velocity({ marginTop: tooltipVerticalMovement, marginLeft: tooltipHorizontalMovement}, { duration: 350, queue: false })
+                .velocity({opacity: 1}, {duration: 300, delay: 50, queue: false});
+              backdrop.css({ display: 'block' })
+              .velocity({opacity:1},{duration: 55, delay: 0, queue: false})
+              .velocity({scale: scale_factor}, {duration: 300, delay: 0, queue: false, easing: 'easeInOutQuad'});
+
+            }
+          }, 10); // End Interval
+
+        // Mouse Out
+        },
+        'mouseleave.tooltip': function(){
+          // Reset State
+          clearInterval(counterInterval);
+          counter = 0;
+
+          // Animate back
+          newTooltip.velocity({
+            opacity: 0, marginTop: 0, marginLeft: 0}, { duration: 225, queue: false, delay: 225 }
+          );
+          backdrop.velocity({opacity: 0, scale: 1}, {
+            duration:225,
+            delay: 275, queue: false,
+            complete: function(){
+              backdrop.css('display', 'none');
+              newTooltip.css('display', 'none');
+              started = false;}
+          });
+        }
+        });
+    });
+  };
+
+  $(document).ready(function(){
+     $('.tooltipped').tooltip();
+   });
+}( jQuery ));