dr-jekylls-materials 0.1.4 → 0.1.5

data/assets/js/tabs.js

@@ -0,0 +1,164 @@
+(function ($) {
+
+  var methods = {
+    init : function(options) {
+      var defaults = {
+        onShow: null
+      };
+      options = $.extend(defaults, options);
+
+      return this.each(function() {
+
+      // For each set of tabs, we want to keep track of
+      // which tab is active and its associated content
+      var $this = $(this),
+          window_width = $(window).width();
+
+      var $active, $content, $links = $this.find('li.tab a'),
+          $tabs_width = $this.width(),
+          $tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length,
+          $index = 0;
+
+      // Finds right attribute for indicator based on active tab.
+      // el: jQuery Object
+      var calcRightPos = function(el) {
+        return $tabs_width - el.position().left - el.outerWidth() - $this.scrollLeft();
+      };
+
+      // Finds left attribute for indicator based on active tab.
+      // el: jQuery Object
+      var calcLeftPos = function(el) {
+        return el.position().left + $this.scrollLeft();
+      };
+
+      // If the location.hash matches one of the links, use that as the active tab.
+      $active = $($links.filter('[href="'+location.hash+'"]'));
+
+      // If no match is found, use the first link or any with class 'active' as the initial active tab.
+      if ($active.length === 0) {
+        $active = $(this).find('li.tab a.active').first();
+      }
+      if ($active.length === 0) {
+        $active = $(this).find('li.tab a').first();
+      }
+
+      $active.addClass('active');
+      $index = $links.index($active);
+      if ($index < 0) {
+        $index = 0;
+      }
+
+      if ($active[0] !== undefined) {
+        $content = $($active[0].hash);
+      }
+
+      // append indicator then set indicator width to tab width
+      $this.append('<div class="indicator"></div>');
+      var $indicator = $this.find('.indicator');
+      if ($this.is(":visible")) {
+        // $indicator.css({"right": $tabs_width - (($index + 1) * $tab_width)});
+        // $indicator.css({"left": $index * $tab_width});
+        setTimeout(function() {
+          $indicator.css({"right": calcRightPos($active) });
+          $indicator.css({"left": calcLeftPos($active) });
+        }, 0);
+      }
+      $(window).resize(function () {
+        $tabs_width = $this.width();
+        $tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length;
+        if ($index < 0) {
+          $index = 0;
+        }
+        if ($tab_width !== 0 && $tabs_width !== 0) {
+          $indicator.css({"right": calcRightPos($active) });
+          $indicator.css({"left": calcLeftPos($active) });
+        }
+      });
+
+      // Hide the remaining content
+      $links.not($active).each(function () {
+        $(Materialize.escapeHash(this.hash)).hide();
+      });
+
+
+      // Bind the click event handler
+      $this.on('click', 'a', function(e) {
+        if ($(this).parent().hasClass('disabled')) {
+          e.preventDefault();
+          return;
+        }
+
+        // Act as regular link if target attribute is specified.
+        if (!!$(this).attr("target")) {
+          return;
+        }
+
+        $tabs_width = $this.width();
+        $tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length;
+
+        // Make the old tab inactive.
+        $active.removeClass('active');
+        if ($content !== undefined) {
+          $content.hide();
+        }
+
+        // Update the variables with the new link and content
+        $active = $(this);
+        $content = $(Materialize.escapeHash(this.hash));
+        $links = $this.find('li.tab a');
+        var activeRect = $active.position();
+
+        // Make the tab active.
+        $active.addClass('active');
+        var $prev_index = $index;
+        $index = $links.index($(this));
+        if ($index < 0) {
+          $index = 0;
+        }
+        // Change url to current tab
+        // window.location.hash = $active.attr('href');
+
+        if ($content !== undefined) {
+          $content.show();
+          if (typeof(options.onShow) === "function") {
+            options.onShow.call(this, $content);
+          }
+        }
+
+        // Update indicator
+
+        if (($index - $prev_index) >= 0) {
+          $indicator.velocity({"right": calcRightPos($active) }, { duration: 300, queue: false, easing: 'easeOutQuad'});
+          $indicator.velocity({"left": calcLeftPos($active) }, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
+
+        } else {
+          $indicator.velocity({"left": calcLeftPos($active) }, { duration: 300, queue: false, easing: 'easeOutQuad'});
+          $indicator.velocity({"right": calcRightPos($active) }, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
+        }
+
+        // Prevent the anchor's default click action
+        e.preventDefault();
+      });
+    });
+
+    },
+    select_tab : function( id ) {
+      this.find('a[href="#' + id + '"]').trigger('click');
+    }
+  };
+
+  $.fn.tabs = function(methodOrOptions) {
+    if ( methods[methodOrOptions] ) {
+      return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
+    } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
+      // Default to "init"
+      return methods.init.apply( this, arguments );
+    } else {
+      $.error( 'Method ' +  methodOrOptions + ' does not exist on jQuery.tabs' );
+    }
+  };
+
+  $(document).ready(function(){
+    $('ul.tabs').tabs();
+  });
+}( jQuery ));

data/assets/js/toasts.js

@@ -0,0 +1,137 @@
+Materialize.toast = function (message, displayLength, className, completeCallback) {
+    className = className || "";
+
+    var container = document.getElementById('toast-container');
+
+    // Create toast container if it does not exist
+    if (container === null) {
+        // create notification container
+        container = document.createElement('div');
+        container.id = 'toast-container';
+        document.body.appendChild(container);
+    }
+
+    // Select and append toast
+    var newToast = createToast(message);
+
+    // only append toast if message is not undefined
+    if(message){
+        container.appendChild(newToast);
+    }
+
+    newToast.style.top = '35px';
+    newToast.style.opacity = 0;
+
+    // Animate toast in
+    Vel(newToast, { "top" : "0px", opacity: 1 }, {duration: 300,
+      easing: 'easeOutCubic',
+      queue: false});
+
+    // Allows timer to be pause while being panned
+    var timeLeft = displayLength;
+    var counterInterval;
+    if (timeLeft != null)  {
+      counterInterval = setInterval (function(){
+        if (newToast.parentNode === null)
+          window.clearInterval(counterInterval);
+
+        // If toast is not being dragged, decrease its time remaining
+        if (!newToast.classList.contains('panning')) {
+          timeLeft -= 20;
+        }
+
+        if (timeLeft <= 0) {
+          // Animate toast out
+          Vel(newToast, {"opacity": 0, marginTop: '-40px'}, { duration: 375,
+              easing: 'easeOutExpo',
+              queue: false,
+              complete: function(){
+                // Call the optional callback
+                if(typeof(completeCallback) === "function")
+                  completeCallback();
+                // Remove toast after it times out
+                this[0].parentNode.removeChild(this[0]);
+              }
+            });
+          window.clearInterval(counterInterval);
+        }
+      }, 20);
+    }
+
+
+
+    function createToast(html) {
+
+        // Create toast
+        var toast = document.createElement('div');
+        toast.classList.add('toast');
+        if (className) {
+            var classes = className.split(' ');
+
+            for (var i = 0, count = classes.length; i < count; i++) {
+                toast.classList.add(classes[i]);
+            }
+        }
+        // If type of parameter is HTML Element
+        if ( typeof HTMLElement === "object" ? html instanceof HTMLElement : html && typeof html === "object" && html !== null && html.nodeType === 1 && typeof html.nodeName==="string"
+) {
+          toast.appendChild(html);
+        }
+        else if (html instanceof jQuery) {
+          // Check if it is jQuery object
+          toast.appendChild(html[0]);
+        }
+        else {
+          // Insert as text;
+          toast.innerHTML = html;
+        }
+        // Bind hammer
+        var hammerHandler = new Hammer(toast, {prevent_default: false});
+        hammerHandler.on('pan', function(e) {
+          var deltaX = e.deltaX;
+          var activationDistance = 80;
+
+          // Change toast state
+          if (!toast.classList.contains('panning')){
+            toast.classList.add('panning');
+          }
+
+          var opacityPercent = 1-Math.abs(deltaX / activationDistance);
+          if (opacityPercent < 0)
+            opacityPercent = 0;
+
+          Vel(toast, {left: deltaX, opacity: opacityPercent }, {duration: 50, queue: false, easing: 'easeOutQuad'});
+
+        });
+
+        hammerHandler.on('panend', function(e) {
+          var deltaX = e.deltaX;
+          var activationDistance = 80;
+
+          // If toast dragged past activation point
+          if (Math.abs(deltaX) > activationDistance) {
+            Vel(toast, {marginTop: '-40px'}, { duration: 375,
+                easing: 'easeOutExpo',
+                queue: false,
+                complete: function(){
+                  if(typeof(completeCallback) === "function") {
+                    completeCallback();
+                  }
+                  toast.parentNode.removeChild(toast);
+                }
+            });
+
+          } else {
+            toast.classList.remove('panning');
+            // Put toast back into original position
+            Vel(toast, { left: 0, opacity: 1 }, { duration: 300,
+              easing: 'easeOutExpo',
+              queue: false
+            });
+
+          }
+        });
+
+        return toast;
+    }
+};

data/assets/js/tooltip.js

@@ -0,0 +1,236 @@
+(function ($) {
+    $.fn.tooltip = function (options) {
+      var timeout = null,
+      margin = 5;
+
+      // Defaults
+      var defaults = {
+        delay: 350,
+        tooltip: '',
+        position: 'bottom',
+        html: false
+      };
+
+      // Remove tooltip from the activator
+      if (options === "remove") {
+        this.each(function() {
+          $('#' + $(this).attr('data-tooltip-id')).remove();
+          $(this).off('mouseenter.tooltip mouseleave.tooltip');
+        });
+        return false;
+      }
+
+      options = $.extend(defaults, options);
+
+      return this.each(function() {
+        var tooltipId = Materialize.guid();
+        var origin = $(this);
+
+        // Destroy old tooltip
+        if (origin.attr('data-tooltip-id')) {
+          $('#' + origin.attr('data-tooltip-id')).remove();
+        }
+
+        origin.attr('data-tooltip-id', tooltipId);
+
+        // Get attributes.
+        var allowHtml,
+            tooltipDelay,
+            tooltipPosition,
+            tooltipText,
+            tooltipEl,
+            backdrop;
+        var setAttributes = function() {
+          allowHtml = origin.attr('data-html') ? origin.attr('data-html') === 'true' : options.html;
+          tooltipDelay = origin.attr('data-delay');
+          tooltipDelay = (tooltipDelay === undefined || tooltipDelay === '') ?
+              options.delay : tooltipDelay;
+          tooltipPosition = origin.attr('data-position');
+          tooltipPosition = (tooltipPosition === undefined || tooltipPosition === '') ?
+              options.position : tooltipPosition;
+          tooltipText = origin.attr('data-tooltip');
+          tooltipText = (tooltipText === undefined || tooltipText === '') ?
+              options.tooltip : tooltipText;
+        };
+        setAttributes();
+
+        var renderTooltipEl = function() {
+          var tooltip = $('<div class="material-tooltip"></div>');
+
+          // Create Text span
+          if (allowHtml) {
+            tooltipText = $('<span></span>').html(tooltipText);
+          } else{
+            tooltipText = $('<span></span>').text(tooltipText);
+          }
+
+          // Create tooltip
+          tooltip.append(tooltipText)
+            .appendTo($('body'))
+            .attr('id', tooltipId);
+
+          // Create backdrop
+          backdrop = $('<div class="backdrop"></div>');
+          backdrop.appendTo(tooltip);
+          return tooltip;
+        };
+        tooltipEl = renderTooltipEl();
+
+        // Destroy previously binded events
+        origin.off('mouseenter.tooltip mouseleave.tooltip');
+        // Mouse In
+        var started = false, timeoutRef;
+        origin.on({'mouseenter.tooltip': function(e) {
+          var showTooltip = function() {
+            setAttributes();
+            started = true;
+            tooltipEl.velocity('stop');
+            backdrop.velocity('stop');
+            tooltipEl.css({ display: 'block', left: '0px', top: '0px' });
+
+            // Tooltip positioning
+            var originWidth = origin.outerWidth();
+            var originHeight = origin.outerHeight();
+
+            var tooltipHeight = tooltipEl.outerHeight();
+            var tooltipWidth = tooltipEl.outerWidth();
+            var tooltipVerticalMovement = '0px';
+            var tooltipHorizontalMovement = '0px';
+            var scaleXFactor = 8;
+            var scaleYFactor = 8;
+            var targetTop, targetLeft, newCoordinates;
+
+            if (tooltipPosition === "top") {
+              // Top Position
+              targetTop = origin.offset().top - tooltipHeight - margin;
+              targetLeft = origin.offset().left + originWidth/2 - tooltipWidth/2;
+              newCoordinates = repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight);
+
+              tooltipVerticalMovement = '-10px';
+              backdrop.css({
+                bottom: 0,
+                left: 0,
+                borderRadius: '14px 14px 0 0',
+                transformOrigin: '50% 100%',
+                marginTop: tooltipHeight,
+                marginLeft: (tooltipWidth/2) - (backdrop.width()/2)
+              });
+            }
+            // Left Position
+            else if (tooltipPosition === "left") {
+              targetTop = origin.offset().top + originHeight/2 - tooltipHeight/2;
+              targetLeft =  origin.offset().left - tooltipWidth - margin;
+              newCoordinates = repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight);
+
+              tooltipHorizontalMovement = '-10px';
+              backdrop.css({
+                top: '-7px',
+                right: 0,
+                width: '14px',
+                height: '14px',
+                borderRadius: '14px 0 0 14px',
+                transformOrigin: '95% 50%',
+                marginTop: tooltipHeight/2,
+                marginLeft: tooltipWidth
+              });
+            }
+            // Right Position
+            else if (tooltipPosition === "right") {
+              targetTop = origin.offset().top + originHeight/2 - tooltipHeight/2;
+              targetLeft = origin.offset().left + originWidth + margin;
+              newCoordinates = repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight);
+
+              tooltipHorizontalMovement = '+10px';
+              backdrop.css({
+                top: '-7px',
+                left: 0,
+                width: '14px',
+                height: '14px',
+                borderRadius: '0 14px 14px 0',
+                transformOrigin: '5% 50%',
+                marginTop: tooltipHeight/2,
+                marginLeft: '0px'
+              });
+            }
+            else {
+              // Bottom Position
+              targetTop = origin.offset().top + origin.outerHeight() + margin;
+              targetLeft = origin.offset().left + originWidth/2 - tooltipWidth/2;
+              newCoordinates = repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight);
+              tooltipVerticalMovement = '+10px';
+              backdrop.css({
+                top: 0,
+                left: 0,
+                marginLeft: (tooltipWidth/2) - (backdrop.width()/2)
+              });
+            }
+
+            // Set tooptip css placement
+            tooltipEl.css({
+              top: newCoordinates.y,
+              left: newCoordinates.x
+            });
+
+            // Calculate Scale to fill
+            scaleXFactor = Math.SQRT2 * tooltipWidth / parseInt(backdrop.css('width'));
+            scaleYFactor = Math.SQRT2 * tooltipHeight / parseInt(backdrop.css('height'));
+
+            tooltipEl.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({scaleX: scaleXFactor, scaleY: scaleYFactor}, {duration: 300, delay: 0, queue: false, easing: 'easeInOutQuad'});
+          };
+
+          timeoutRef = setTimeout(showTooltip, tooltipDelay); // End Interval
+
+        // Mouse Out
+        },
+        'mouseleave.tooltip': function(){
+          // Reset State
+          started = false;
+          clearTimeout(timeoutRef);
+
+          // Animate back
+          setTimeout(function() {
+            if (started !== true) {
+              tooltipEl.velocity({
+                opacity: 0, marginTop: 0, marginLeft: 0}, { duration: 225, queue: false});
+              backdrop.velocity({opacity: 0, scaleX: 1, scaleY: 1}, {
+                duration:225,
+                queue: false,
+                complete: function(){
+                  backdrop.css('display', 'none');
+                  tooltipEl.css('display', 'none');
+                  started = false;}
+              });
+            }
+          },225);
+        }
+        });
+    });
+  };
+
+  var repositionWithinScreen = function(x, y, width, height) {
+    var newX = x;
+    var newY = y;
+
+    if (newX < 0) {
+      newX = 4;
+    } else if (newX + width > window.innerWidth) {
+      newX -= newX + width - window.innerWidth;
+    }
+
+    if (newY < 0) {
+      newY = 4;
+    } else if (newY + height > window.innerHeight + $(window).scrollTop) {
+      newY -= newY + height - window.innerHeight;
+    }
+
+    return {x: newX, y: newY};
+  };
+
+  $(document).ready(function(){
+     $('.tooltipped').tooltip();
+   });
+}( jQuery ));