materialize-sass 0.100.2.1 → 1.0.0.alpha1

data/app/assets/javascripts/materialize/slider.js

@@ -1,295 +0,0 @@
-(function ($) {
-
-  var methods = {
-
-    init: function (options) {
-      var defaults = {
-        indicators: true,
-        height: 400,
-        transition: 500,
-        interval: 6000
-      };
-      options = $.extend(defaults, options);
-
-      return this.each(function () {
-
-        // For each slider, we want to keep track of
-        // which slide is active and its associated content
-        var $this = $(this);
-        var $slider = $this.find('ul.slides').first();
-        var $slides = $slider.find('> li');
-        var $active_index = $slider.find('.active').index();
-        var $active, $indicators, $interval;
-        if ($active_index != -1) {
-          $active = $slides.eq($active_index);
-        }
-
-        // Transitions the caption depending on alignment
-        function captionTransition(caption, duration) {
-          if (caption.hasClass("center-align")) {
-            caption.velocity({ opacity: 0, translateY: -100 }, { duration: duration, queue: false });
-          } else if (caption.hasClass("right-align")) {
-            caption.velocity({ opacity: 0, translateX: 100 }, { duration: duration, queue: false });
-          } else if (caption.hasClass("left-align")) {
-            caption.velocity({ opacity: 0, translateX: -100 }, { duration: duration, queue: false });
-          }
-        }
-
-        // This function will transition the slide to any index of the next slide
-        function moveToSlide(index) {
-          // Wrap around indices.
-          if (index >= $slides.length) index = 0;else if (index < 0) index = $slides.length - 1;
-
-          $active_index = $slider.find('.active').index();
-
-          // Only do if index changes
-          if ($active_index != index) {
-            $active = $slides.eq($active_index);
-            $caption = $active.find('.caption');
-
-            $active.removeClass('active');
-            $active.velocity({ opacity: 0 }, { duration: options.transition, queue: false, easing: 'easeOutQuad',
-              complete: function () {
-                $slides.not('.active').velocity({ opacity: 0, translateX: 0, translateY: 0 }, { duration: 0, queue: false });
-              } });
-            captionTransition($caption, options.transition);
-
-            // Update indicators
-            if (options.indicators) {
-              $indicators.eq($active_index).removeClass('active');
-            }
-
-            $slides.eq(index).velocity({ opacity: 1 }, { duration: options.transition, queue: false, easing: 'easeOutQuad' });
-            $slides.eq(index).find('.caption').velocity({ opacity: 1, translateX: 0, translateY: 0 }, { duration: options.transition, delay: options.transition, queue: false, easing: 'easeOutQuad' });
-            $slides.eq(index).addClass('active');
-
-            // Update indicators
-            if (options.indicators) {
-              $indicators.eq(index).addClass('active');
-            }
-          }
-        }
-
-        // Set height of slider
-        // If fullscreen, do nothing
-        if (!$this.hasClass('fullscreen')) {
-          if (options.indicators) {
-            // Add height if indicators are present
-            $this.height(options.height + 40);
-          } else {
-            $this.height(options.height);
-          }
-          $slider.height(options.height);
-        }
-
-        // Set initial positions of captions
-        $slides.find('.caption').each(function () {
-          captionTransition($(this), 0);
-        });
-
-        // Move img src into background-image
-        $slides.find('img').each(function () {
-          var placeholderBase64 = 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
-          if ($(this).attr('src') !== placeholderBase64) {
-            $(this).css('background-image', 'url("' + $(this).attr('src') + '")');
-            $(this).attr('src', placeholderBase64);
-          }
-        });
-
-        // dynamically add indicators
-        if (options.indicators) {
-          $indicators = $('<ul class="indicators"></ul>');
-          $slides.each(function (index) {
-            var $indicator = $('<li class="indicator-item"></li>');
-
-            // Handle clicks on indicators
-            $indicator.click(function () {
-              var $parent = $slider.parent();
-              var curr_index = $parent.find($(this)).index();
-              moveToSlide(curr_index);
-
-              // reset interval
-              clearInterval($interval);
-              $interval = setInterval(function () {
-                $active_index = $slider.find('.active').index();
-                if ($slides.length == $active_index + 1) $active_index = 0; // loop to start
-                else $active_index += 1;
-
-                moveToSlide($active_index);
-              }, options.transition + options.interval);
-            });
-            $indicators.append($indicator);
-          });
-          $this.append($indicators);
-          $indicators = $this.find('ul.indicators').find('li.indicator-item');
-        }
-
-        if ($active) {
-          $active.show();
-        } else {
-          $slides.first().addClass('active').velocity({ opacity: 1 }, { duration: options.transition, queue: false, easing: 'easeOutQuad' });
-
-          $active_index = 0;
-          $active = $slides.eq($active_index);
-
-          // Update indicators
-          if (options.indicators) {
-            $indicators.eq($active_index).addClass('active');
-          }
-        }
-
-        // Adjust height to current slide
-        $active.find('img').each(function () {
-          $active.find('.caption').velocity({ opacity: 1, translateX: 0, translateY: 0 }, { duration: options.transition, queue: false, easing: 'easeOutQuad' });
-        });
-
-        // auto scroll
-        $interval = setInterval(function () {
-          $active_index = $slider.find('.active').index();
-          moveToSlide($active_index + 1);
-        }, options.transition + options.interval);
-
-        // HammerJS, Swipe navigation
-
-        // Touch Event
-        var panning = false;
-        var swipeLeft = false;
-        var swipeRight = false;
-
-        $this.hammer({
-          prevent_default: false
-        }).on('pan', function (e) {
-          if (e.gesture.pointerType === "touch") {
-
-            // reset interval
-            clearInterval($interval);
-
-            var direction = e.gesture.direction;
-            var x = e.gesture.deltaX;
-            var velocityX = e.gesture.velocityX;
-            var velocityY = e.gesture.velocityY;
-
-            $curr_slide = $slider.find('.active');
-            if (Math.abs(velocityX) > Math.abs(velocityY)) {
-              $curr_slide.velocity({ translateX: x
-              }, { duration: 50, queue: false, easing: 'easeOutQuad' });
-            }
-
-            // Swipe Left
-            if (direction === 4 && (x > $this.innerWidth() / 2 || velocityX < -0.65)) {
-              swipeRight = true;
-            }
-            // Swipe Right
-            else if (direction === 2 && (x < -1 * $this.innerWidth() / 2 || velocityX > 0.65)) {
-                swipeLeft = true;
-              }
-
-            // Make Slide Behind active slide visible
-            var next_slide;
-            if (swipeLeft) {
-              next_slide = $curr_slide.next();
-              if (next_slide.length === 0) {
-                next_slide = $slides.first();
-              }
-              next_slide.velocity({ opacity: 1
-              }, { duration: 300, queue: false, easing: 'easeOutQuad' });
-            }
-            if (swipeRight) {
-              next_slide = $curr_slide.prev();
-              if (next_slide.length === 0) {
-                next_slide = $slides.last();
-              }
-              next_slide.velocity({ opacity: 1
-              }, { duration: 300, queue: false, easing: 'easeOutQuad' });
-            }
-          }
-        }).on('panend', function (e) {
-          if (e.gesture.pointerType === "touch") {
-
-            $curr_slide = $slider.find('.active');
-            panning = false;
-            curr_index = $slider.find('.active').index();
-
-            if (!swipeRight && !swipeLeft || $slides.length <= 1) {
-              // Return to original spot
-              $curr_slide.velocity({ translateX: 0
-              }, { duration: 300, queue: false, easing: 'easeOutQuad' });
-            } else if (swipeLeft) {
-              moveToSlide(curr_index + 1);
-              $curr_slide.velocity({ translateX: -1 * $this.innerWidth() }, { duration: 300, queue: false, easing: 'easeOutQuad',
-                complete: function () {
-                  $curr_slide.velocity({ opacity: 0, translateX: 0 }, { duration: 0, queue: false });
-                } });
-            } else if (swipeRight) {
-              moveToSlide(curr_index - 1);
-              $curr_slide.velocity({ translateX: $this.innerWidth() }, { duration: 300, queue: false, easing: 'easeOutQuad',
-                complete: function () {
-                  $curr_slide.velocity({ opacity: 0, translateX: 0 }, { duration: 0, queue: false });
-                } });
-            }
-            swipeLeft = false;
-            swipeRight = false;
-
-            // Restart interval
-            clearInterval($interval);
-            $interval = setInterval(function () {
-              $active_index = $slider.find('.active').index();
-              if ($slides.length == $active_index + 1) $active_index = 0; // loop to start
-              else $active_index += 1;
-
-              moveToSlide($active_index);
-            }, options.transition + options.interval);
-          }
-        });
-
-        $this.on('sliderPause', function () {
-          clearInterval($interval);
-        });
-
-        $this.on('sliderStart', function () {
-          clearInterval($interval);
-          $interval = setInterval(function () {
-            $active_index = $slider.find('.active').index();
-            if ($slides.length == $active_index + 1) $active_index = 0; // loop to start
-            else $active_index += 1;
-
-            moveToSlide($active_index);
-          }, options.transition + options.interval);
-        });
-
-        $this.on('sliderNext', function () {
-          $active_index = $slider.find('.active').index();
-          moveToSlide($active_index + 1);
-        });
-
-        $this.on('sliderPrev', function () {
-          $active_index = $slider.find('.active').index();
-          moveToSlide($active_index - 1);
-        });
-      });
-    },
-    pause: function () {
-      $(this).trigger('sliderPause');
-    },
-    start: function () {
-      $(this).trigger('sliderStart');
-    },
-    next: function () {
-      $(this).trigger('sliderNext');
-    },
-    prev: function () {
-      $(this).trigger('sliderPrev');
-    }
-  };
-
-  $.fn.slider = 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.tooltip');
-    }
-  }; // Plugin end
-})(jQuery);

data/app/assets/javascripts/materialize/tabs.js

@@ -1,244 +0,0 @@
-(function ($) {
-
-  var methods = {
-    init: function (options) {
-      var defaults = {
-        onShow: null,
-        swipeable: false,
-        responsiveThreshold: Infinity // breakpoint for swipeable
-      };
-      options = $.extend(defaults, options);
-      var namespace = Materialize.objectSelectorString($(this));
-
-      return this.each(function (i) {
-
-        var uniqueNamespace = namespace + i;
-
-        // 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(),
-            $tabs_content = $(),
-            $tabs_wrapper,
-            $tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length,
-            $indicator,
-            index = 0,
-            prev_index = 0,
-            clicked = false,
-            clickedTimeout,
-            transition = 300;
-
-        // Finds right attribute for indicator based on active tab.
-        // el: jQuery Object
-        var calcRightPos = function (el) {
-          return Math.ceil($tabs_width - el.position().left - el[0].getBoundingClientRect().width - $this.scrollLeft());
-        };
-
-        // Finds left attribute for indicator based on active tab.
-        // el: jQuery Object
-        var calcLeftPos = function (el) {
-          return Math.floor(el.position().left + $this.scrollLeft());
-        };
-
-        // Animates Indicator to active tab.
-        // prev_index: Number
-        var animateIndicator = function (prev_index) {
-          if (index - prev_index >= 0) {
-            $indicator.velocity({ "right": calcRightPos($active) }, { duration: transition, queue: false, easing: 'easeOutQuad' });
-            $indicator.velocity({ "left": calcLeftPos($active) }, { duration: transition, queue: false, easing: 'easeOutQuad', delay: 90 });
-          } else {
-            $indicator.velocity({ "left": calcLeftPos($active) }, { duration: transition, queue: false, easing: 'easeOutQuad' });
-            $indicator.velocity({ "right": calcRightPos($active) }, { duration: transition, queue: false, easing: 'easeOutQuad', delay: 90 });
-          }
-        };
-
-        // Change swipeable according to responsive threshold
-        if (options.swipeable) {
-          if (window_width > options.responsiveThreshold) {
-            options.swipeable = false;
-          }
-        }
-
-        // 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);
-          $content.addClass('active');
-        }
-
-        // append indicator then set indicator width to tab width
-        if (!$this.find('.indicator').length) {
-          $this.append('<li class="indicator"></li>');
-        }
-        $indicator = $this.find('.indicator');
-
-        // we make sure that the indicator is at the end of the tabs
-        $this.append($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).off('resize.tabs-' + uniqueNamespace).on('resize.tabs-' + uniqueNamespace, 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) });
-          }
-        });
-
-        // Initialize Tabs Content.
-        if (options.swipeable) {
-          // TODO: Duplicate calls with swipeable? handle multiple div wrapping.
-          $links.each(function () {
-            var $curr_content = $(Materialize.escapeHash(this.hash));
-            $curr_content.addClass('carousel-item');
-            $tabs_content = $tabs_content.add($curr_content);
-          });
-          $tabs_wrapper = $tabs_content.wrapAll('<div class="tabs-content carousel"></div>');
-          $tabs_content.css('display', '');
-          $('.tabs-content.carousel').carousel({
-            fullWidth: true,
-            noWrap: true,
-            onCycleTo: function (item) {
-              if (!clicked) {
-                var prev_index = index;
-                index = $tabs_wrapper.index(item);
-                $active.removeClass('active');
-                $active = $links.eq(index);
-                $active.addClass('active');
-                animateIndicator(prev_index);
-                if (typeof options.onShow === "function") {
-                  options.onShow.call($this[0], $content);
-                }
-              }
-            }
-          });
-        } else {
-          // Hide the remaining content
-          $links.not($active).each(function () {
-            $(Materialize.escapeHash(this.hash)).hide();
-          });
-        }
-
-        // Bind the click event handler
-        $this.off('click.tabs').on('click.tabs', '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;
-          }
-
-          clicked = true;
-          $tabs_width = $this.width();
-          $tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length;
-
-          // Make the old tab inactive.
-          $active.removeClass('active');
-          var $oldContent = $content;
-
-          // 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');
-          prev_index = index;
-          index = $links.index($(this));
-          if (index < 0) {
-            index = 0;
-          }
-          // Change url to current tab
-          // window.location.hash = $active.attr('href');
-
-          // Swap content
-          if (options.swipeable) {
-            if ($tabs_content.length) {
-              $tabs_content.carousel('set', index, function () {
-                if (typeof options.onShow === "function") {
-                  options.onShow.call($this[0], $content);
-                }
-              });
-            }
-          } else {
-            if ($content !== undefined) {
-              $content.show();
-              $content.addClass('active');
-              if (typeof options.onShow === "function") {
-                options.onShow.call(this, $content);
-              }
-            }
-
-            if ($oldContent !== undefined && !$oldContent.is($content)) {
-              $oldContent.hide();
-              $oldContent.removeClass('active');
-            }
-          }
-
-          // Reset clicked state
-          clickedTimeout = setTimeout(function () {
-            clicked = false;
-          }, transition);
-
-          // Update indicator
-          animateIndicator(prev_index);
-
-          // 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).on('ready turbolinks:load', function () {
-    $('ul.tabs').tabs();
-  });
-})(jQuery);