material-sass 0.0.4 → 1.0.0

data/app/assets/javascripts/material/modal.js

@@ -1,10 +1,12 @@
-// modal iframe
-	$(document).on('click', '.modal-close-iframe', function(e) {
-		e.preventDefault();
+// modale dialog vertical alignment
+	$(function () {
+		'use strict';
 
-		window.parent.closeModal(getTargetFromTrigger($(this)));
-	});
+		$(document).on('hidden.bs.modal', '.modal-va-middle', function () {
+			$(this).removeClass('modal-va-middle-show');
+		});
 
-	window.closeModal = function(iframe) {
-		$(iframe).modal('hide');
-	};
+		$(document).on('show.bs.modal', '.modal-va-middle', function () {
+			$(this).addClass('modal-va-middle-show');
+		});
+	});

data/app/assets/javascripts/material/snackbar.js

@@ -0,0 +1,116 @@
+// snackbar
+	(function ($) {
+		'use strict';
+
+		var Snackbar = function (options) {
+			this.options  = options;
+			this.$element = $('<div class="snackbar-inner">' + this.options.content + '</div>');
+		};
+
+		Snackbar.DEFAULTS = {
+			alive: 6000,
+			content: '&nbsp;',
+			hide: function () {},
+			show: function () {}
+		};
+
+		Snackbar.prototype.fbtn = function (margin) {
+			if ($(window).width() < 768 && $('.fbtn-container').length) {
+				var str = 'translateY(-' + margin + 'px)';
+				$('.fbtn-container').css({
+					'-webkit-transform': str,
+					'transform': str
+				});
+			};
+		};
+
+		Snackbar.prototype.hide = function () {
+			var that = this;
+
+			this.$element.removeClass('in');
+
+			clearTimeout(this.$element.data('timer'));
+
+			if ($.support.transition) {
+				this.$element.one('bsTransitionEnd', function () {
+					that.options.hide(that.options);
+					that.$element.remove();
+				});
+			} else {
+				that.options.hide(that.options);
+				that.$element.remove();
+			}
+
+			this.fbtn('0');
+		};
+
+		Snackbar.prototype.show = function () {
+			var that = this;
+
+			if (!$('.snackbar').length) {
+				$(document.body).append('<div class="snackbar"></div>');
+			};
+
+			this.$element.appendTo('.snackbar').show().addClass(function () {
+				that.$element.on('click', '[data-dismiss="snackbar"]', function () {
+					that.hide();
+				});
+
+				that.$element.data('timer', setTimeout(function () {
+					that.hide();
+				}, that.options.alive));
+
+				that.$element.on('mouseenter', function () {
+					clearTimeout(that.$element.data('timer'));
+				}).on('mouseleave', function () {
+					that.$element.data('timer', setTimeout(function () {
+						that.hide();
+					}, that.options.alive));
+				});
+
+				that.options.show(that.options);
+
+				return 'in';
+			});
+
+			this.fbtn(this.$element.outerHeight());
+		};
+
+		function Plugin (option) {
+			return this.each(function () {
+				var $this    = $(document.body);
+				var data     = $this.data('bs.snackbar');
+				var options  = $.extend({}, Snackbar.DEFAULTS, option);
+
+				if (!data) {
+					$this.data('bs.snackbar', (data = new Snackbar(options)));
+					data.show();
+				} else if ($('.snackbar-inner').length && !$('.snackbar-inner.old').length) {
+					$('.snackbar-inner.in').addClass('old')
+					data.hide();
+					if ($.support.transition) {
+						$(document).one('bsTransitionEnd', '.snackbar-inner.old', function () {
+							$this.data('bs.snackbar', (data = new Snackbar(options)));
+							data.show();
+						});
+					} else {
+						$this.data('bs.snackbar', (data = new Snackbar(options)));
+						data.show();
+					};
+				} else if (!$('.snackbar-inner').length) {
+					$this.data('bs.snackbar', (data = new Snackbar(options)));
+					data.show();
+				};
+			});
+		};
+
+		var old = $.fn.snackbar;
+
+		$.fn.snackbar             = Plugin;
+		$.fn.snackbar.Constructor = Snackbar;
+
+		$.fn.snackbar.noConflict = function () {
+			$.fn.snackbar = old;
+			return this;
+		};
+	}(jQuery));

data/app/assets/javascripts/material/tab.js

@@ -1,31 +1,51 @@
 // tab switch
-	tabSwitch = function(newTab, oldTab) {
-		var $nav = newTab.closest('.tab-nav'),
-		    $navIndicator = $('.tab-nav-indicator', $nav),
-		    navOffset = $nav.offset().left,
-		    navWidth = $nav.width(),
-		    newTabOffset = newTab.offset().left,
-		    newTabWidth = newTab.outerWidth();
-
-		if (oldTab != null && oldTab.offset().left > newTabOffset) {
-			$navIndicator.addClass('reverse');
-			setTimeout(function() {
-				$navIndicator.removeClass('reverse');
-			}, 450);
-		};
-
-		$navIndicator.css({
-			left: (newTabOffset - navOffset),
-			right: navOffset + navWidth - newTabOffset - newTabWidth
+	(function ($) {
+		'use strict';
+
+		$.fn.tabSwitch = function (oldTab) {
+			var $this = $(this),
+			    $thisNav = $this.closest('.tab-nav'),
+			    $thisNavIndicator = $('.tab-nav-indicator', $thisNav),
+			    thisLeft = $this.offset().left,
+			    thisNavLeft = $thisNav.offset().left,
+			    thisNavWidth = $thisNav.outerWidth();
+
+			if (oldTab !== undefined && oldTab[0] !== undefined) {
+				var oldTabLeft = oldTab.offset().left;
+
+				$thisNavIndicator.css({
+					left: (oldTabLeft - thisNavLeft),
+					right: (thisNavLeft + thisNavWidth - oldTabLeft - oldTab.outerWidth())
+				});
+
+				if (oldTab.offset().left > thisLeft) {
+					$thisNavIndicator.addClass('reverse');
+
+					$thisNavIndicator.one('webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend', function () {
+						$thisNavIndicator.removeClass('reverse');
+					});
+				};
+			};
+
+			$thisNavIndicator.addClass('animate').css({
+				left: (thisLeft - thisNavLeft),
+				right: (thisNavLeft + thisNavWidth - thisLeft - $this.outerWidth())
+			}).one('webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend', function () {
+				$thisNavIndicator.removeClass('animate');
+			});
+
+			return this;
+		}
+	})(jQuery);
+
+	$(function () {
+		'use strict';
+
+		$('.tab-nav').each(function () {
+			$(this).append('<div class="tab-nav-indicator"></div>');
 		});
-	}
 
-	$(document).on('show.bs.tab', '.tab-nav a[data-toggle="tab"]', function(e) {
-	 	tabSwitch($(e.target), $(e.relatedTarget));
+		$(document).on('show.bs.tab', '.tab-nav a[data-toggle="tab"]', function (e) {
+			$(e.target).tabSwitch($(e.relatedTarget));
+		});
 	});
-
-// tab switch indicator
-	$('.tab-nav').each(function() {
-		$(this).append('<div class="tab-nav-indicator"></div>');
-		tabSwitch($('.nav > li.active', $(this)), null);
-	});

data/app/assets/javascripts/material/tile.js

@@ -1,86 +1,181 @@
 // tile
-	$(document).on('click', function(e) {
-		var $target = $(e.target);
+	(function ($) {
+		'use strict';
 
-		if ($target.is('[data-toggle="tile"], [data-toggle="tile"] *') && !$target.is('[data-ignore="tile"], [data-ignore="tile"] *')) {
-			var $trigger = $target.closest('[data-toggle="tile"]');
-			if ($trigger.attr('data-parent') != null) {
-				$($trigger.attr('data-parent')).find('.tile-active-show').collapse('hide');
+		var Tile = function (element, options) {
+			this.options       = $.extend({}, Tile.DEFAULTS, options);
+			this.transitioning = null;
+			this.$element      = $(element);
+
+			if (this.options.parent) {
+				this.$parent = this.getParent();
+			};
+
+			if (this.options.toggle) {
+				this.toggle();
 			};
-			$(getTargetFromTrigger($trigger)).collapse('toggle');
-		} else if ($target.is('[data-dismiss="tile"]')) {
-			$target.closest('.tile-collapse').find('.tile-active-show').collapse('hide');
-		} else if (!$target.is('.tile-collapse, .tile-collapse *')) {
-			tReset();
 		};
-	});
 
-	tReset = function () {
-		$('.tile-collapse.active').each(function(index) {
-			var $collapse = $('.tile-active-show', $(this));
-			if (!$collapse.hasClass('tile-active-show-still')) {
-				$collapse.collapse('hide');
+		if (!$.fn.collapse) {
+			throw new Error('Menu requires Bootstrap collapse.js');
+		};
+
+		Tile.DEFAULTS = {
+			keyboard: true,
+			toggle: true
+		};
+		Tile.TRANSITION_DURATION = 150;
+
+		Tile.prototype = $.extend({}, $.fn.collapse.Constructor.prototype);
+
+		Tile.prototype.escape = function () {
+			if (this.$element.hasClass('in') && this.options.keyboard) {
+				$(document).on('keydown.dismiss.bs.tile', $.proxy(function (e) {
+					e.which == 27 && this.hide();
+				}, this));
+			} else if (!this.$element.hasClass('in')) {
+				this.$element.off('keydown.dismiss.bs.tile');
 			};
-		});
-	}
-
-// tile hide
-	$(document).on('hide.bs.collapse', '.tile-active-show', function() {
-		$(this).closest('.tile-collapse').css({
-			'-webkit-transition-delay': '',
-			'transition-delay': ''
-		}).removeClass('active');
-	});
-
-// tile show
-	$(document).on('show.bs.collapse', '.tile-active-show', function() {
-		$(this).closest('.tile-collapse').css({
-			'-webkit-transition-delay': '',
-			'transition-delay': ''
-		}).addClass('active');
-	});
-
-// tile wrap animation
-	$('.tile-wrap-animation').each(function(index) {
-		var tileAnimationDelay = 0,
-		    tileAnimationTransform = 100;
-
-		$('> .tile', $(this)).each(function(index) {
-			$(this).css({
-				'-webkit-transform': 'translate(0, ' + tileAnimationTransform + '%)',
-				'-ms-transform': 'translate(0, ' + tileAnimationTransform + '%)',
-				'transform': 'translate(0, ' + tileAnimationTransform + '%)',
-				'-webkit-transition-delay': tileAnimationDelay + 's',
-				'transition-delay': tileAnimationDelay + 's'
-			});
-
-			tileAnimationDelay = tileAnimationDelay + 0.1;
-			tileAnimationTransform = tileAnimationTransform + 10;
-		});
-	});
+		};
 
-	$(window).on('DOMContentLoaded scroll', function() {
-		tileInView();
-	});
+		Tile.prototype.hide = function () {
+			if (this.transitioning || !this.$element.hasClass('in')) {
+				return;
+			};
 
-	tileInView = function () {
-		$('.tile-wrap-animation:not(.isinview)').each(function() {
-			var $this = $(this);
-			if (tileInViewCheck($this) && (!$this.hasClass('avoid-fout') || ($this.hasClass('avoid-fout') && $this.hasClass('avoid-fout-done'))) && (!$this.hasClass('el-loading') || ($this.hasClass('el-loading') && $this.hasClass('el-loading-done'))) && !$this.parents('.avoid-fout:not(.avoid-fout-done)').length && !$this.parents('.el-loading:not(.el-loading-done)').length) {
-				$this.addClass('isinview');
+			var startEvent = $.Event('hide.bs.tile');
+
+			this.$element.trigger(startEvent);
+
+			if (startEvent.isDefaultPrevented()) {
+				return;
 			};
-		});
-	}
 
-	tileInViewCheck = function (tile) {
-		tile = tile[0];
+			var dimension = this.dimension();
+
+			this.$element[dimension](this.$element[dimension]())[0].offsetHeight;
 
-		var rect = tile.getBoundingClientRect();
+			this.$element.addClass('collapsing').removeClass('collapse in');
 
-		return (
-			rect.top <= window.innerHeight &&
-			rect.right >= 0 &&
-			rect.bottom >= 0 &&
-			rect.left <= window.innerWidth
-		);
-	}
+			this.$element.closest('.tile-collapse').removeClass('active');
+
+			this.transitioning = 1
+
+			var complete = function () {
+				this.transitioning = 0;
+				this.$element.removeClass('collapsing').addClass('collapse').trigger('hidden.bs.tile');
+				this.escape();
+			};
+
+			if (!$.support.transition) {
+				return complete.call(this);
+			};
+
+			this.$element[dimension](0).one('bsTransitionEnd', $.proxy(complete, this)).emulateTransitionEnd(Tile.TRANSITION_DURATION);
+		};
+
+		Tile.prototype.show = function () {
+			if (this.transitioning || this.$element.hasClass('in')) {
+				return;
+			};
+
+			var actives = this.$parent && this.$parent.find('.tile-collapse').children('.in, .collapsing');
+			var activesData;
+
+			if (actives && actives.length) {
+				activesData = actives.data('bs.tile');
+				if (activesData && activesData.transitioning) {
+					return;
+				};
+			};
+
+			var startEvent = $.Event('show.bs.tile');
+
+			this.$element.trigger(startEvent);
+
+			if (startEvent.isDefaultPrevented()) {
+				return;
+			};
+
+			if (actives && actives.length) {
+				Plugin.call(actives, 'hide');
+				activesData || actives.data('bs.tile', null);
+			};
+
+			var dimension = this.dimension();
+
+			this.$element.removeClass('collapse').addClass('collapsing')[dimension](0);
+
+			this.$element.closest('.tile-collapse').addClass('active');
+
+			this.transitioning = 1;
+
+			var complete = function () {
+				this.$element.removeClass('collapsing').addClass('collapse in')[dimension]('');
+				this.transitioning = 0;
+				this.$element.trigger('shown.bs.tile');
+				this.escape();
+			};
+
+			if (!$.support.transition) {
+				return complete.call(this);
+			};
+
+			var scrollSize = $.camelCase(['scroll', dimension].join('-'));
+
+			this.$element.one('bsTransitionEnd', $.proxy(complete, this)).emulateTransitionEnd(Tile.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize]);
+		};
+
+		function getTargetFromTrigger($trigger) {
+			var href;
+			var target = $trigger.attr('data-target') || (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '');
+
+			return $(target);
+		};
+
+		function Plugin(option) {
+			return this.each(function () {
+				var $this   = $(this);
+				var data    = $this.data('bs.tile');
+				var options = $.extend({}, Tile.DEFAULTS, $this.data(), typeof option == 'object' && option);
+
+				if (!data && options.toggle && /show|hide/.test(option)) {
+					options.toggle = false;
+				};
+
+				if (!data) {
+					$this.data('bs.tile', (data = new Tile(this, options)));
+				};
+
+				if (typeof option == 'string') {
+					data[option]();
+				};
+			})
+		};
+
+		var old = $.fn.tile;
+
+		$.fn.tile             = Plugin;
+		$.fn.tile.Constructor = Tile;
+
+		$.fn.tile.noConflict = function () {
+			$.fn.tile = old;
+			return this;
+		};
+
+		$(document).on('click.bs.tile.data-api', '[data-toggle="tile"]', function (e) {
+			var $this = $(this);
+
+			if (!$(e.target).is('[data-ignore="tile"], [data-ignore="tile"] *')) {
+				if (!$this.attr('data-target')) {
+					e.preventDefault();
+				};
+
+				var $target = getTargetFromTrigger($this);
+				var data    = $target.data('bs.tile');
+				var option  = data ? 'toggle' : $this.data();
+
+				Plugin.call($target, option);
+			};
+		});
+	}(jQuery));