mirror of
https://github.com/jcreek/phldnhack.git
synced 2026-07-12 18:43:43 +00:00
Starter template added
This commit is contained in:
jcreek
Vendored
+8198
File diff suppressed because it is too large
Load Diff
Vendored
+16
File diff suppressed because one or more lines are too long
@@ -0,0 +1,14 @@
|
||||
/* Custom Stylesheet */
|
||||
/**
|
||||
* Use this file to override Materialize files so you can update
|
||||
* the core Materialize files in the future
|
||||
*
|
||||
* Made By MaterializeCSS.com
|
||||
*/
|
||||
|
||||
.icon-block {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.icon-block .material-icons {
|
||||
font-size: inherit;
|
||||
}
|
||||
+126
@@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
|
||||
<title>Starter Template - Materialize</title>
|
||||
|
||||
<!-- CSS -->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
|
||||
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="light-blue lighten-1" role="navigation">
|
||||
<div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a>
|
||||
<ul class="right hide-on-med-and-down">
|
||||
<li><a href="#">Navbar Link</a></li>
|
||||
</ul>
|
||||
|
||||
<ul id="nav-mobile" class="side-nav">
|
||||
<li><a href="#">Navbar Link</a></li>
|
||||
</ul>
|
||||
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="section no-pad-bot" id="index-banner">
|
||||
<div class="container">
|
||||
<br><br>
|
||||
<h1 class="header center orange-text">Starter Template</h1>
|
||||
<div class="row center">
|
||||
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
|
||||
</div>
|
||||
<div class="row center">
|
||||
<a href="http://materializecss.com/getting-started.html" id="download-button" class="btn-large waves-effect waves-light orange">Get Started</a>
|
||||
</div>
|
||||
<br><br>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="section">
|
||||
|
||||
<!-- Icon Section -->
|
||||
<div class="row">
|
||||
<div class="col s12 m4">
|
||||
<div class="icon-block">
|
||||
<h2 class="center light-blue-text"><i class="material-icons">flash_on</i></h2>
|
||||
<h5 class="center">Speeds up development</h5>
|
||||
|
||||
<p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m4">
|
||||
<div class="icon-block">
|
||||
<h2 class="center light-blue-text"><i class="material-icons">group</i></h2>
|
||||
<h5 class="center">User Experience Focused</h5>
|
||||
|
||||
<p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m4">
|
||||
<div class="icon-block">
|
||||
<h2 class="center light-blue-text"><i class="material-icons">settings</i></h2>
|
||||
<h5 class="center">Easy to work with</h5>
|
||||
|
||||
<p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<br><br>
|
||||
|
||||
<div class="section">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="page-footer orange">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col l6 s12">
|
||||
<h5 class="white-text">Company Bio</h5>
|
||||
<p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="col l3 s12">
|
||||
<h5 class="white-text">Settings</h5>
|
||||
<ul>
|
||||
<li><a class="white-text" href="#!">Link 1</a></li>
|
||||
<li><a class="white-text" href="#!">Link 2</a></li>
|
||||
<li><a class="white-text" href="#!">Link 3</a></li>
|
||||
<li><a class="white-text" href="#!">Link 4</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col l3 s12">
|
||||
<h5 class="white-text">Connect</h5>
|
||||
<ul>
|
||||
<li><a class="white-text" href="#!">Link 1</a></li>
|
||||
<li><a class="white-text" href="#!">Link 2</a></li>
|
||||
<li><a class="white-text" href="#!">Link 3</a></li>
|
||||
<li><a class="white-text" href="#!">Link 4</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-copyright">
|
||||
<div class="container">
|
||||
Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- Scripts-->
|
||||
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
|
||||
<script src="../../bin/materialize.js"></script>
|
||||
<script src="js/init.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,9 +0,0 @@
|
||||
// Custom Easing
|
||||
jQuery.extend( jQuery.easing,
|
||||
{
|
||||
easeInOutMaterial: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t + b;
|
||||
return c/4*((t-=2)*t*t + 2) + b;
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
(function ($) {
|
||||
$(document).ready(function() {
|
||||
|
||||
// jQuery reverse
|
||||
$.fn.reverse = [].reverse;
|
||||
|
||||
$(document).on('mouseenter.fixedActionBtn', '.fixed-action-btn', function(e) {
|
||||
var $this = $(this);
|
||||
openFABMenu($this);
|
||||
|
||||
});
|
||||
|
||||
$(document).on('mouseleave.fixedActionBtn', '.fixed-action-btn', function(e) {
|
||||
var $this = $(this);
|
||||
closeFABMenu($this);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
$.fn.extend({
|
||||
openFAB: function() {
|
||||
var $this = $(this);
|
||||
openFABMenu($this);
|
||||
},
|
||||
closeFAB: function() {
|
||||
closeFABMenu($this);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var openFABMenu = function (btn) {
|
||||
$this = btn;
|
||||
if ($this.hasClass('active') === false) {
|
||||
$this.addClass('active');
|
||||
$this.find('ul .btn-floating').velocity(
|
||||
{ scaleY: ".4", scaleX: ".4", translateY: "40px"},
|
||||
{ duration: 0 });
|
||||
|
||||
var time = 0;
|
||||
$this.find('ul .btn-floating').reverse().each(function () {
|
||||
$(this).velocity(
|
||||
{ opacity: "1", scaleX: "1", scaleY: "1", translateY: "0"},
|
||||
{ duration: 80, delay: time });
|
||||
time += 40;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var closeFABMenu = function (btn) {
|
||||
$this = btn;
|
||||
$this.removeClass('active');
|
||||
var time = 0;
|
||||
$this.find('ul .btn-floating').velocity("stop", true);
|
||||
$this.find('ul .btn-floating').velocity(
|
||||
{ opacity: "0", scaleX: ".4", scaleY: ".4", translateY: "40px"},
|
||||
{ duration: 80 }
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
}( jQuery ));
|
||||
-27
@@ -1,27 +0,0 @@
|
||||
(function ($) {
|
||||
$(document).ready(function() {
|
||||
|
||||
$(document).on('click.card', '.card', function (e) {
|
||||
if ($(this).find('> .card-reveal').length) {
|
||||
if ($(e.target).is($('.card-reveal .card-title')) || $(e.target).is($('.card-reveal .card-title i'))) {
|
||||
// Make Reveal animate down and display none
|
||||
$(this).find('.card-reveal').velocity(
|
||||
{translateY: 0}, {
|
||||
duration: 225,
|
||||
queue: false,
|
||||
easing: 'easeInOutQuad',
|
||||
complete: function() { $(this).css({ display: 'none'}); }
|
||||
}
|
||||
);
|
||||
}
|
||||
else if ($(e.target).is($('.card .activator')) ||
|
||||
$(e.target).is($('.card .activator i')) ) {
|
||||
$(this).find('.card-reveal').css({ display: 'block'}).velocity("stop", false).velocity({translateY: '-100%'}, {duration: 300, queue: false, easing: 'easeInOutQuad'});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
}( jQuery ));
|
||||
@@ -1,59 +0,0 @@
|
||||
(function ($) {
|
||||
|
||||
$.fn.characterCounter = function(){
|
||||
return this.each(function(){
|
||||
|
||||
var itHasLengthAttribute = $(this).attr('length') !== undefined;
|
||||
|
||||
if(itHasLengthAttribute){
|
||||
$(this).on('input', updateCounter);
|
||||
$(this).on('focus', updateCounter);
|
||||
$(this).on('blur', removeCounterElement);
|
||||
|
||||
addCounterElement($(this));
|
||||
}
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
function updateCounter(){
|
||||
var maxLength = +$(this).attr('length'),
|
||||
actualLength = +$(this).val().length,
|
||||
isValidLength = actualLength <= maxLength;
|
||||
|
||||
$(this).parent().find('span[class="character-counter"]')
|
||||
.html( actualLength + '/' + maxLength);
|
||||
|
||||
addInputStyle(isValidLength, $(this));
|
||||
}
|
||||
|
||||
function addCounterElement($input){
|
||||
var $counterElement = $('<span/>')
|
||||
.addClass('character-counter')
|
||||
.css('float','right')
|
||||
.css('font-size','12px')
|
||||
.css('height', 1);
|
||||
|
||||
$input.parent().append($counterElement);
|
||||
}
|
||||
|
||||
function removeCounterElement(){
|
||||
$(this).parent().find('span[class="character-counter"]').html('');
|
||||
}
|
||||
|
||||
function addInputStyle(isValidLength, $input){
|
||||
var inputHasInvalidClass = $input.hasClass('invalid');
|
||||
if (isValidLength && inputHasInvalidClass) {
|
||||
$input.removeClass('invalid');
|
||||
}
|
||||
else if(!isValidLength && !inputHasInvalidClass){
|
||||
$input.removeClass('valid');
|
||||
$input.addClass('invalid');
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function(){
|
||||
$('input, textarea').characterCounter();
|
||||
});
|
||||
|
||||
}( jQuery ));
|
||||
@@ -1,9 +0,0 @@
|
||||
(function ($) {
|
||||
$(document).ready(function() {
|
||||
|
||||
$(document).on('click.chip', '.chip .material-icons', function (e) {
|
||||
$(this).parent().remove();
|
||||
});
|
||||
|
||||
});
|
||||
}( jQuery ));
|
||||
@@ -1,139 +0,0 @@
|
||||
(function ($) {
|
||||
$.fn.collapsible = function(options) {
|
||||
var defaults = {
|
||||
accordion: undefined
|
||||
};
|
||||
|
||||
options = $.extend(defaults, options);
|
||||
|
||||
|
||||
return this.each(function() {
|
||||
|
||||
var $this = $(this);
|
||||
|
||||
var $panel_headers = $(this).find('> li > .collapsible-header');
|
||||
|
||||
var collapsible_type = $this.data("collapsible");
|
||||
|
||||
// Turn off any existing event handlers
|
||||
$this.off('click.collapse', '.collapsible-header');
|
||||
$panel_headers.off('click.collapse');
|
||||
|
||||
|
||||
/****************
|
||||
Helper Functions
|
||||
****************/
|
||||
|
||||
// Accordion Open
|
||||
function accordionOpen(object) {
|
||||
$panel_headers = $this.find('> li > .collapsible-header');
|
||||
if (object.hasClass('active')) {
|
||||
object.parent().addClass('active');
|
||||
}
|
||||
else {
|
||||
object.parent().removeClass('active');
|
||||
}
|
||||
if (object.parent().hasClass('active')){
|
||||
object.siblings('.collapsible-body').stop(true,false).slideDown({ duration: 350, easing: "easeOutQuart", queue: false, complete: function() {$(this).css('height', '');}});
|
||||
}
|
||||
else{
|
||||
object.siblings('.collapsible-body').stop(true,false).slideUp({ duration: 350, easing: "easeOutQuart", queue: false, complete: function() {$(this).css('height', '');}});
|
||||
}
|
||||
|
||||
$panel_headers.not(object).removeClass('active').parent().removeClass('active');
|
||||
$panel_headers.not(object).parent().children('.collapsible-body').stop(true,false).slideUp(
|
||||
{
|
||||
duration: 350,
|
||||
easing: "easeOutQuart",
|
||||
queue: false,
|
||||
complete:
|
||||
function() {
|
||||
$(this).css('height', '');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Expandable Open
|
||||
function expandableOpen(object) {
|
||||
if (object.hasClass('active')) {
|
||||
object.parent().addClass('active');
|
||||
}
|
||||
else {
|
||||
object.parent().removeClass('active');
|
||||
}
|
||||
if (object.parent().hasClass('active')){
|
||||
object.siblings('.collapsible-body').stop(true,false).slideDown({ duration: 350, easing: "easeOutQuart", queue: false, complete: function() {$(this).css('height', '');}});
|
||||
}
|
||||
else{
|
||||
object.siblings('.collapsible-body').stop(true,false).slideUp({ duration: 350, easing: "easeOutQuart", queue: false, complete: function() {$(this).css('height', '');}});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if object is children of panel header
|
||||
* @param {Object} object Jquery object
|
||||
* @return {Boolean} true if it is children
|
||||
*/
|
||||
function isChildrenOfPanelHeader(object) {
|
||||
|
||||
var panelHeader = getPanelHeader(object);
|
||||
|
||||
return panelHeader.length > 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get panel header from a children element
|
||||
* @param {Object} object Jquery object
|
||||
* @return {Object} panel header object
|
||||
*/
|
||||
function getPanelHeader(object) {
|
||||
|
||||
return object.closest('li > .collapsible-header');
|
||||
}
|
||||
|
||||
/***** End Helper Functions *****/
|
||||
|
||||
|
||||
|
||||
if (options.accordion || collapsible_type === "accordion" || collapsible_type === undefined) { // Handle Accordion
|
||||
// Add click handler to only direct collapsible header children
|
||||
$panel_headers = $this.find('> li > .collapsible-header');
|
||||
$panel_headers.on('click.collapse', function (e) {
|
||||
var element = $(e.target);
|
||||
|
||||
if (isChildrenOfPanelHeader(element)) {
|
||||
element = getPanelHeader(element);
|
||||
}
|
||||
|
||||
element.toggleClass('active');
|
||||
accordionOpen(element);
|
||||
});
|
||||
// Open first active
|
||||
accordionOpen($panel_headers.filter('.active').first());
|
||||
}
|
||||
else { // Handle Expandables
|
||||
$panel_headers.each(function () {
|
||||
// Add click handler to only direct collapsible header children
|
||||
$(this).on('click.collapse', function (e) {
|
||||
var element = $(e.target);
|
||||
if (isChildrenOfPanelHeader(element)) {
|
||||
element = getPanelHeader(element);
|
||||
}
|
||||
element.toggleClass('active');
|
||||
expandableOpen(element);
|
||||
});
|
||||
// Open any bodies that have the active class
|
||||
if ($(this).hasClass('active')) {
|
||||
expandableOpen($(this));
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
$(document).ready(function(){
|
||||
$('.collapsible').collapsible();
|
||||
});
|
||||
}( jQuery ));
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
-200
@@ -1,200 +0,0 @@
|
||||
(function ($) {
|
||||
|
||||
// Add posibility to scroll to selected option
|
||||
// usefull for select for example
|
||||
$.fn.scrollTo = function(elem) {
|
||||
$(this).scrollTop($(this).scrollTop() - $(this).offset().top + $(elem).offset().top);
|
||||
return this;
|
||||
};
|
||||
|
||||
$.fn.dropdown = function (option) {
|
||||
var defaults = {
|
||||
inDuration: 300,
|
||||
outDuration: 225,
|
||||
constrain_width: true, // Constrains width of dropdown to the activator
|
||||
hover: false,
|
||||
gutter: 0, // Spacing from edge
|
||||
belowOrigin: false,
|
||||
alignment: 'left'
|
||||
};
|
||||
|
||||
this.each(function(){
|
||||
var origin = $(this);
|
||||
var options = $.extend({}, defaults, option);
|
||||
|
||||
// Dropdown menu
|
||||
var activates = $("#"+ origin.attr('data-activates'));
|
||||
|
||||
function updateOptions() {
|
||||
if (origin.data('induration') !== undefined)
|
||||
options.inDuration = origin.data('inDuration');
|
||||
if (origin.data('outduration') !== undefined)
|
||||
options.outDuration = origin.data('outDuration');
|
||||
if (origin.data('constrainwidth') !== undefined)
|
||||
options.constrain_width = origin.data('constrainwidth');
|
||||
if (origin.data('hover') !== undefined)
|
||||
options.hover = origin.data('hover');
|
||||
if (origin.data('gutter') !== undefined)
|
||||
options.gutter = origin.data('gutter');
|
||||
if (origin.data('beloworigin') !== undefined)
|
||||
options.belowOrigin = origin.data('beloworigin');
|
||||
if (origin.data('alignment') !== undefined)
|
||||
options.alignment = origin.data('alignment');
|
||||
}
|
||||
|
||||
updateOptions();
|
||||
|
||||
// Attach dropdown to its activator
|
||||
origin.after(activates);
|
||||
|
||||
/*
|
||||
Helper function to position and resize dropdown.
|
||||
Used in hover and click handler.
|
||||
*/
|
||||
function placeDropdown() {
|
||||
// Check html data attributes
|
||||
updateOptions();
|
||||
|
||||
// Set Dropdown state
|
||||
activates.addClass('active');
|
||||
|
||||
// Constrain width
|
||||
if (options.constrain_width === true) {
|
||||
activates.css('width', origin.outerWidth());
|
||||
}
|
||||
else {
|
||||
activates.css('white-space', 'nowrap');
|
||||
}
|
||||
var offset = 0;
|
||||
if (options.belowOrigin === true) {
|
||||
offset = origin.height();
|
||||
}
|
||||
|
||||
// Offscreen detection
|
||||
var offsetLeft = origin.offset().left;
|
||||
var activatesLeft, width_difference, gutter_spacing;
|
||||
if (offsetLeft + activates.innerWidth() > $(window).width()) {
|
||||
options.alignment = 'right';
|
||||
}
|
||||
else if (offsetLeft - activates.innerWidth() + origin.innerWidth() < 0) {
|
||||
options.alignment = 'left';
|
||||
}
|
||||
|
||||
// Handle edge alignment
|
||||
if (options.alignment === 'left') {
|
||||
width_difference = 0;
|
||||
gutter_spacing = options.gutter;
|
||||
activatesLeft = origin.position().left + width_difference + gutter_spacing;
|
||||
|
||||
// Position dropdown
|
||||
activates.css({ left: activatesLeft });
|
||||
}
|
||||
else if (options.alignment === 'right') {
|
||||
var offsetRight = $(window).width() - offsetLeft - origin.innerWidth();
|
||||
width_difference = 0;
|
||||
gutter_spacing = options.gutter;
|
||||
activatesLeft = ( $(window).width() - origin.position().left - origin.innerWidth() ) + gutter_spacing;
|
||||
|
||||
// Position dropdown
|
||||
activates.css({ right: activatesLeft });
|
||||
}
|
||||
// Position dropdown
|
||||
activates.css({
|
||||
position: 'absolute',
|
||||
top: origin.position().top + offset,
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Show dropdown
|
||||
activates.stop(true, true).css('opacity', 0)
|
||||
.slideDown({
|
||||
queue: false,
|
||||
duration: options.inDuration,
|
||||
easing: 'easeOutCubic',
|
||||
complete: function() {
|
||||
$(this).css('height', '');
|
||||
}
|
||||
})
|
||||
.animate( {opacity: 1}, {queue: false, duration: options.inDuration, easing: 'easeOutSine'});
|
||||
}
|
||||
|
||||
function hideDropdown() {
|
||||
activates.fadeOut(options.outDuration);
|
||||
activates.removeClass('active');
|
||||
}
|
||||
|
||||
// Hover
|
||||
if (options.hover) {
|
||||
var open = false;
|
||||
origin.unbind('click.' + origin.attr('id'));
|
||||
// Hover handler to show dropdown
|
||||
origin.on('mouseenter', function(e){ // Mouse over
|
||||
if (open === false) {
|
||||
placeDropdown();
|
||||
open = true;
|
||||
}
|
||||
});
|
||||
origin.on('mouseleave', function(e){
|
||||
// If hover on origin then to something other than dropdown content, then close
|
||||
var toEl = e.toElement || e.relatedTarget; // added browser compatibility for target element
|
||||
if(!$(toEl).closest('.dropdown-content').is(activates)) {
|
||||
activates.stop(true, true);
|
||||
hideDropdown();
|
||||
open = false;
|
||||
}
|
||||
});
|
||||
|
||||
activates.on('mouseleave', function(e){ // Mouse out
|
||||
var toEl = e.toElement || e.relatedTarget;
|
||||
if(!$(toEl).closest('.dropdown-button').is(origin)) {
|
||||
activates.stop(true, true);
|
||||
hideDropdown();
|
||||
open = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Click
|
||||
} else {
|
||||
|
||||
// Click handler to show dropdown
|
||||
origin.unbind('click.' + origin.attr('id'));
|
||||
origin.bind('click.'+origin.attr('id'), function(e){
|
||||
|
||||
if ( origin[0] == e.currentTarget && ($(e.target).closest('.dropdown-content').length === 0) ) {
|
||||
e.preventDefault(); // Prevents button click from moving window
|
||||
placeDropdown();
|
||||
|
||||
}
|
||||
// If origin is clicked and menu is open, close menu
|
||||
else {
|
||||
if (origin.hasClass('active')) {
|
||||
hideDropdown();
|
||||
$(document).unbind('click.' + activates.attr('id'));
|
||||
}
|
||||
}
|
||||
// If menu open, add click close handler to document
|
||||
if (activates.hasClass('active')) {
|
||||
$(document).bind('click.'+ activates.attr('id'), function (e) {
|
||||
if (!activates.is(e.target) && !origin.is(e.target) && (!origin.find(e.target).length > 0) ) {
|
||||
hideDropdown();
|
||||
$(document).unbind('click.' + activates.attr('id'));
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
} // End else
|
||||
|
||||
// Listen to open and close event - useful for select component
|
||||
origin.on('open', placeDropdown);
|
||||
origin.on('close', hideDropdown);
|
||||
|
||||
|
||||
});
|
||||
}; // End dropdown plugin
|
||||
|
||||
$(document).ready(function(){
|
||||
$('.dropdown-button').dropdown();
|
||||
});
|
||||
}( jQuery ));
|
||||
-464
@@ -1,464 +0,0 @@
|
||||
(function ($) {
|
||||
$(document).ready(function() {
|
||||
|
||||
// Function to update labels of text fields
|
||||
Materialize.updateTextFields = function() {
|
||||
var input_selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], textarea';
|
||||
$(input_selector).each(function(index, element) {
|
||||
if ($(element).val().length > 0 || $(this).attr('placeholder') !== undefined || $(element)[0].validity.badInput === true) {
|
||||
$(this).siblings('label').addClass('active');
|
||||
}
|
||||
else {
|
||||
$(this).siblings('label, i').removeClass('active');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Text based inputs
|
||||
var input_selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], textarea';
|
||||
|
||||
// Handle HTML5 autofocus
|
||||
$('input[autofocus]').siblings('label, i').addClass('active');
|
||||
|
||||
// Add active if form auto complete
|
||||
$(document).on('change', input_selector, function () {
|
||||
if($(this).val().length !== 0 || $(this).attr('placeholder') !== undefined) {
|
||||
$(this).siblings('label').addClass('active');
|
||||
}
|
||||
validate_field($(this));
|
||||
});
|
||||
|
||||
// Add active if input element has been pre-populated on document ready
|
||||
$(document).ready(function() {
|
||||
Materialize.updateTextFields();
|
||||
});
|
||||
|
||||
// HTML DOM FORM RESET handling
|
||||
$(document).on('reset', function(e) {
|
||||
var formReset = $(e.target);
|
||||
if (formReset.is('form')) {
|
||||
formReset.find(input_selector).removeClass('valid').removeClass('invalid');
|
||||
formReset.find(input_selector).each(function () {
|
||||
if ($(this).attr('value') === '') {
|
||||
$(this).siblings('label, i').removeClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Reset select
|
||||
formReset.find('select.initialized').each(function () {
|
||||
var reset_text = formReset.find('option[selected]').text();
|
||||
formReset.siblings('input.select-dropdown').val(reset_text);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Add active when element has focus
|
||||
$(document).on('focus', input_selector, function () {
|
||||
$(this).siblings('label, i').addClass('active');
|
||||
});
|
||||
|
||||
$(document).on('blur', input_selector, function () {
|
||||
var $inputElement = $(this);
|
||||
if ($inputElement.val().length === 0 && $inputElement[0].validity.badInput !== true && $inputElement.attr('placeholder') === undefined) {
|
||||
$inputElement.siblings('label, i').removeClass('active');
|
||||
}
|
||||
|
||||
if ($inputElement.val().length === 0 && $inputElement[0].validity.badInput !== true && $inputElement.attr('placeholder') !== undefined) {
|
||||
$inputElement.siblings('i').removeClass('active');
|
||||
}
|
||||
validate_field($inputElement);
|
||||
});
|
||||
|
||||
window.validate_field = function(object) {
|
||||
var hasLength = object.attr('length') !== undefined;
|
||||
var lenAttr = parseInt(object.attr('length'));
|
||||
var len = object.val().length;
|
||||
|
||||
if (object.val().length === 0 && object[0].validity.badInput === false) {
|
||||
if (object.hasClass('validate')) {
|
||||
object.removeClass('valid');
|
||||
object.removeClass('invalid');
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (object.hasClass('validate')) {
|
||||
// Check for character counter attributes
|
||||
if ((object.is(':valid') && hasLength && (len <= lenAttr)) || (object.is(':valid') && !hasLength)) {
|
||||
object.removeClass('invalid');
|
||||
object.addClass('valid');
|
||||
}
|
||||
else {
|
||||
object.removeClass('valid');
|
||||
object.addClass('invalid');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Textarea Auto Resize
|
||||
var hiddenDiv = $('.hiddendiv').first();
|
||||
if (!hiddenDiv.length) {
|
||||
hiddenDiv = $('<div class="hiddendiv common"></div>');
|
||||
$('body').append(hiddenDiv);
|
||||
}
|
||||
var text_area_selector = '.materialize-textarea';
|
||||
|
||||
function textareaAutoResize($textarea) {
|
||||
// Set font properties of hiddenDiv
|
||||
|
||||
var fontFamily = $textarea.css('font-family');
|
||||
var fontSize = $textarea.css('font-size');
|
||||
|
||||
if (fontSize) { hiddenDiv.css('font-size', fontSize); }
|
||||
if (fontFamily) { hiddenDiv.css('font-family', fontFamily); }
|
||||
|
||||
if ($textarea.attr('wrap') === "off") {
|
||||
hiddenDiv.css('overflow-wrap', "normal")
|
||||
.css('white-space', "pre");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
hiddenDiv.text($textarea.val() + '\n');
|
||||
var content = hiddenDiv.html().replace(/\n/g, '<br>');
|
||||
hiddenDiv.html(content);
|
||||
|
||||
|
||||
// When textarea is hidden, width goes crazy.
|
||||
// Approximate with half of window size
|
||||
|
||||
if ($textarea.is(':visible')) {
|
||||
hiddenDiv.css('width', $textarea.width());
|
||||
}
|
||||
else {
|
||||
hiddenDiv.css('width', $(window).width()/2);
|
||||
}
|
||||
|
||||
$textarea.css('height', hiddenDiv.height());
|
||||
}
|
||||
|
||||
$(text_area_selector).each(function () {
|
||||
var $textarea = $(this);
|
||||
if ($textarea.val().length) {
|
||||
textareaAutoResize($textarea);
|
||||
}
|
||||
});
|
||||
|
||||
$('body').on('keyup keydown autoresize', text_area_selector, function () {
|
||||
textareaAutoResize($(this));
|
||||
});
|
||||
|
||||
|
||||
// File Input Path
|
||||
|
||||
$(document).on('change', '.file-field input[type="file"]', function () {
|
||||
var file_field = $(this).closest('.file-field');
|
||||
var path_input = file_field.find('input.file-path');
|
||||
var files = $(this)[0].files;
|
||||
var file_names = [];
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
file_names.push(files[i].name);
|
||||
}
|
||||
path_input.val(file_names.join(", "));
|
||||
path_input.trigger('change');
|
||||
});
|
||||
|
||||
|
||||
/****************
|
||||
* Range Input *
|
||||
****************/
|
||||
|
||||
var range_type = 'input[type=range]';
|
||||
var range_mousedown = false;
|
||||
var left;
|
||||
|
||||
$(range_type).each(function () {
|
||||
var thumb = $('<span class="thumb"><span class="value"></span></span>');
|
||||
$(this).after(thumb);
|
||||
});
|
||||
|
||||
var range_wrapper = '.range-field';
|
||||
$(document).on('change', range_type, function(e) {
|
||||
var thumb = $(this).siblings('.thumb');
|
||||
thumb.find('.value').html($(this).val());
|
||||
});
|
||||
|
||||
$(document).on('input mousedown touchstart', range_type, function(e) {
|
||||
var thumb = $(this).siblings('.thumb');
|
||||
|
||||
// If thumb indicator does not exist yet, create it
|
||||
if (thumb.length <= 0) {
|
||||
thumb = $('<span class="thumb"><span class="value"></span></span>');
|
||||
$(this).append(thumb);
|
||||
}
|
||||
|
||||
// Set indicator value
|
||||
thumb.find('.value').html($(this).val());
|
||||
|
||||
range_mousedown = true;
|
||||
$(this).addClass('active');
|
||||
|
||||
if (!thumb.hasClass('active')) {
|
||||
thumb.velocity({ height: "30px", width: "30px", top: "-20px", marginLeft: "-15px"}, { duration: 300, easing: 'easeOutExpo' });
|
||||
}
|
||||
|
||||
if(e.pageX === undefined || e.pageX === null){//mobile
|
||||
left = e.originalEvent.touches[0].pageX - $(this).offset().left;
|
||||
}
|
||||
else{ // desktop
|
||||
left = e.pageX - $(this).offset().left;
|
||||
}
|
||||
var width = $(this).outerWidth();
|
||||
|
||||
if (left < 0) {
|
||||
left = 0;
|
||||
}
|
||||
else if (left > width) {
|
||||
left = width;
|
||||
}
|
||||
thumb.addClass('active').css('left', left);
|
||||
thumb.find('.value').html($(this).val());
|
||||
|
||||
|
||||
});
|
||||
|
||||
$(document).on('mouseup touchend', range_wrapper, function() {
|
||||
range_mousedown = false;
|
||||
$(this).removeClass('active');
|
||||
});
|
||||
|
||||
$(document).on('mousemove touchmove', range_wrapper, function(e) {
|
||||
var thumb = $(this).children('.thumb');
|
||||
var left;
|
||||
if (range_mousedown) {
|
||||
if (!thumb.hasClass('active')) {
|
||||
thumb.velocity({ height: '30px', width: '30px', top: '-20px', marginLeft: '-15px'}, { duration: 300, easing: 'easeOutExpo' });
|
||||
}
|
||||
if (e.pageX === undefined || e.pageX === null) { //mobile
|
||||
left = e.originalEvent.touches[0].pageX - $(this).offset().left;
|
||||
}
|
||||
else{ // desktop
|
||||
left = e.pageX - $(this).offset().left;
|
||||
}
|
||||
var width = $(this).outerWidth();
|
||||
|
||||
if (left < 0) {
|
||||
left = 0;
|
||||
}
|
||||
else if (left > width) {
|
||||
left = width;
|
||||
}
|
||||
thumb.addClass('active').css('left', left);
|
||||
thumb.find('.value').html(thumb.siblings(range_type).val());
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('mouseout touchleave', range_wrapper, function() {
|
||||
if (!range_mousedown) {
|
||||
|
||||
var thumb = $(this).children('.thumb');
|
||||
|
||||
if (thumb.hasClass('active')) {
|
||||
thumb.velocity({ height: '0', width: '0', top: '10px', marginLeft: '-6px'}, { duration: 100 });
|
||||
}
|
||||
thumb.removeClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
}); // End of $(document).ready
|
||||
|
||||
|
||||
|
||||
|
||||
// Select Plugin
|
||||
$.fn.material_select = function (callback) {
|
||||
$(this).each(function(){
|
||||
$select = $(this);
|
||||
|
||||
if ( $select.hasClass('browser-default')) {
|
||||
return; // Continue to next (return false breaks out of entire loop)
|
||||
}
|
||||
|
||||
// Tear down structure if Select needs to be rebuilt
|
||||
var lastID = $select.data('select-id');
|
||||
if (lastID) {
|
||||
$select.parent().find('span.caret').remove();
|
||||
$select.parent().find('input').remove();
|
||||
|
||||
$select.unwrap();
|
||||
$('ul#select-options-'+lastID).remove();
|
||||
}
|
||||
|
||||
// If destroying the select, remove the selelct-id and reset it to it's uninitialized state.
|
||||
if(callback === 'destroy') {
|
||||
$select.data('select-id', null).removeClass('initialized');
|
||||
return;
|
||||
}
|
||||
|
||||
var uniqueID = Materialize.guid();
|
||||
$select.data('select-id', uniqueID);
|
||||
var wrapper = $('<div class="select-wrapper"></div>');
|
||||
wrapper.addClass($select.attr('class'));
|
||||
var options = $('<ul id="select-options-' + uniqueID+'" class="dropdown-content select-dropdown"></ul>');
|
||||
var selectOptions = $select.children('option');
|
||||
|
||||
var label;
|
||||
if ($select.find('option:selected') !== undefined) {
|
||||
label = $select.find('option:selected');
|
||||
}
|
||||
else {
|
||||
label = options.first();
|
||||
}
|
||||
|
||||
|
||||
// Create Dropdown structure
|
||||
selectOptions.each(function () {
|
||||
// Add disabled attr if disabled
|
||||
options.append($('<li class="' + (($(this).is(':disabled')) ? 'disabled' : '') + '"><span>' + $(this).html() + '</span></li>'));
|
||||
});
|
||||
|
||||
|
||||
options.find('li').each(function (i) {
|
||||
var $curr_select = $select;
|
||||
$(this).click(function () {
|
||||
// Check if option element is disabled
|
||||
if (!$(this).hasClass('disabled')) {
|
||||
$curr_select.find('option').eq(i).prop('selected', true);
|
||||
// Trigger onchange() event
|
||||
$curr_select.trigger('change');
|
||||
$curr_select.siblings('input.select-dropdown').val($(this).text());
|
||||
if (typeof callback !== 'undefined') callback();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// Wrap Elements
|
||||
$select.wrap(wrapper);
|
||||
// Add Select Display Element
|
||||
var dropdownIcon = $('<span class="caret">▼</span>');
|
||||
if ( $select.is(':disabled') )
|
||||
dropdownIcon.addClass('disabled');
|
||||
|
||||
// escape double quotes
|
||||
var sanitizedLabelHtml = label.html().replace(/"/g, '"');
|
||||
|
||||
var $newSelect = $('<input type="text" class="select-dropdown" readonly="true" ' + (($select.is(':disabled')) ? 'disabled' : '') + ' data-activates="select-options-' + uniqueID +'" value="'+ sanitizedLabelHtml +'"/>');
|
||||
$select.before($newSelect);
|
||||
$newSelect.before(dropdownIcon);
|
||||
|
||||
$('body').append(options);
|
||||
// Check if section element is disabled
|
||||
if (!$select.is(':disabled')) {
|
||||
$newSelect.dropdown({"hover": false});
|
||||
}
|
||||
|
||||
// Copy tabindex
|
||||
if ($select.attr('tabindex')) {
|
||||
$($newSelect[0]).attr('tabindex', $select.attr('tabindex'));
|
||||
}
|
||||
|
||||
$select.addClass('initialized');
|
||||
|
||||
$newSelect.on('focus', function(){
|
||||
$(this).trigger('open');
|
||||
label = $(this).val();
|
||||
selectedOption = options.find('li').filter(function() {
|
||||
return $(this).text().toLowerCase() === label.toLowerCase();
|
||||
})[0];
|
||||
activateOption(options, selectedOption);
|
||||
});
|
||||
|
||||
$newSelect.on('blur', function(){
|
||||
$(this).trigger('close');
|
||||
});
|
||||
|
||||
// Make option as selected and scroll to selected position
|
||||
activateOption = function(collection, newOption) {
|
||||
collection.find('li.active').removeClass('active');
|
||||
$(newOption).addClass('active');
|
||||
collection.scrollTo(newOption);
|
||||
};
|
||||
|
||||
// Allow user to search by typing
|
||||
// this array is cleared after 1 second
|
||||
filterQuery = [];
|
||||
|
||||
onKeyDown = function(event){
|
||||
// TAB - switch to another input
|
||||
if(event.which == 9){
|
||||
$newSelect.trigger('close');
|
||||
return;
|
||||
}
|
||||
|
||||
// ARROW DOWN WHEN SELECT IS CLOSED - open select options
|
||||
if(event.which == 40 && !options.is(":visible")){
|
||||
$newSelect.trigger('open');
|
||||
return;
|
||||
}
|
||||
|
||||
// ENTER WHEN SELECT IS CLOSED - submit form
|
||||
if(event.which == 13 && !options.is(":visible")){
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
// CASE WHEN USER TYPE LETTERS
|
||||
letter = String.fromCharCode(event.which).toLowerCase();
|
||||
var nonLetters = [9,13,27,38,40];
|
||||
if (letter && (nonLetters.indexOf(event.which) === -1)){
|
||||
filterQuery.push(letter);
|
||||
|
||||
string = filterQuery.join("");
|
||||
|
||||
newOption = options.find('li').filter(function() {
|
||||
return $(this).text().toLowerCase().indexOf(string) === 0;
|
||||
})[0];
|
||||
|
||||
if(newOption){
|
||||
activateOption(options, newOption);
|
||||
}
|
||||
}
|
||||
|
||||
// ENTER - select option and close when select options are opened
|
||||
if(event.which == 13){
|
||||
activeOption = options.find('li.active:not(.disabled)')[0];
|
||||
if(activeOption){
|
||||
$(activeOption).trigger('click');
|
||||
$newSelect.trigger('close');
|
||||
}
|
||||
}
|
||||
|
||||
// ARROW DOWN - move to next not disabled option
|
||||
if(event.which == 40){
|
||||
newOption = options.find('li.active').next('li:not(.disabled)')[0];
|
||||
if(newOption){
|
||||
activateOption(options, newOption);
|
||||
}
|
||||
}
|
||||
|
||||
// ESC - close options
|
||||
if(event.which == 27){
|
||||
$newSelect.trigger('close');
|
||||
}
|
||||
|
||||
// ARROW UP - move to previous not disabled option
|
||||
if(event.which == 38){
|
||||
newOption = options.find('li.active').prev('li:not(.disabled)')[0];
|
||||
if(newOption){
|
||||
activateOption(options, newOption);
|
||||
}
|
||||
}
|
||||
|
||||
// Automaticaly clean filter query so user can search again by starting letters
|
||||
setTimeout(function(){ filterQuery = []; }, 1000);
|
||||
};
|
||||
|
||||
$newSelect.on('keydown', onKeyDown);
|
||||
});
|
||||
};
|
||||
|
||||
}( jQuery ));
|
||||
@@ -1,36 +0,0 @@
|
||||
window.Materialize = {};
|
||||
|
||||
// Unique ID
|
||||
Materialize.guid = (function() {
|
||||
function s4() {
|
||||
return Math.floor((1 + Math.random()) * 0x10000)
|
||||
.toString(16)
|
||||
.substring(1);
|
||||
}
|
||||
return function() {
|
||||
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
|
||||
s4() + '-' + s4() + s4() + s4();
|
||||
};
|
||||
})();
|
||||
|
||||
Materialize.elementOrParentIsFixed = function(element) {
|
||||
var $element = $(element);
|
||||
var $checkElements = $element.add($element.parents());
|
||||
var isFixed = false;
|
||||
$checkElements.each(function(){
|
||||
if ($(this).css("position") === "fixed") {
|
||||
isFixed = true;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
return isFixed;
|
||||
};
|
||||
|
||||
// Velocity has conflicts when loaded with jQuery, this will check for it
|
||||
var Vel;
|
||||
if ($) {
|
||||
Vel = $.Velocity;
|
||||
}
|
||||
else {
|
||||
Vel = Velocity;
|
||||
}
|
||||
Vendored
-1
File diff suppressed because one or more lines are too long
@@ -0,0 +1,7 @@
|
||||
(function($){
|
||||
$(function(){
|
||||
|
||||
$('.button-collapse').sideNav();
|
||||
|
||||
}); // end of document ready
|
||||
})(jQuery); // end of jQuery name space
|
||||
@@ -1,205 +0,0 @@
|
||||
/*
|
||||
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
|
||||
*
|
||||
* Uses the built in easing capabilities added In jQuery 1.1
|
||||
* to offer multiple easing options
|
||||
*
|
||||
* TERMS OF USE - jQuery Easing
|
||||
*
|
||||
* Open source under the BSD License.
|
||||
*
|
||||
* Copyright © 2008 George McGinley Smith
|
||||
* All rights reserved.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without modification,
|
||||
* are permitted provided that the following conditions are met:
|
||||
*
|
||||
* Redistributions of source code must retain the above copyright notice, this list of
|
||||
* conditions and the following disclaimer.
|
||||
* Redistributions in binary form must reproduce the above copyright notice, this list
|
||||
* of conditions and the following disclaimer in the documentation and/or other materials
|
||||
* provided with the distribution.
|
||||
*
|
||||
* Neither the name of the author nor the names of contributors may be used to endorse
|
||||
* or promote products derived from this software without specific prior written permission.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
|
||||
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
|
||||
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
||||
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
|
||||
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
|
||||
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
|
||||
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
|
||||
* OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*
|
||||
*/
|
||||
|
||||
// t: current time, b: begInnIng value, c: change In value, d: duration
|
||||
jQuery.easing['jswing'] = jQuery.easing['swing'];
|
||||
|
||||
jQuery.extend( jQuery.easing,
|
||||
{
|
||||
def: 'easeOutQuad',
|
||||
swing: function (x, t, b, c, d) {
|
||||
//alert(jQuery.easing.default);
|
||||
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
|
||||
},
|
||||
easeInQuad: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t + b;
|
||||
},
|
||||
easeOutQuad: function (x, t, b, c, d) {
|
||||
return -c *(t/=d)*(t-2) + b;
|
||||
},
|
||||
easeInOutQuad: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t + b;
|
||||
return -c/2 * ((--t)*(t-2) - 1) + b;
|
||||
},
|
||||
easeInCubic: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t + b;
|
||||
},
|
||||
easeOutCubic: function (x, t, b, c, d) {
|
||||
return c*((t=t/d-1)*t*t + 1) + b;
|
||||
},
|
||||
easeInOutCubic: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t + b;
|
||||
return c/2*((t-=2)*t*t + 2) + b;
|
||||
},
|
||||
easeInQuart: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t*t + b;
|
||||
},
|
||||
easeOutQuart: function (x, t, b, c, d) {
|
||||
return -c * ((t=t/d-1)*t*t*t - 1) + b;
|
||||
},
|
||||
easeInOutQuart: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
|
||||
return -c/2 * ((t-=2)*t*t*t - 2) + b;
|
||||
},
|
||||
easeInQuint: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t*t*t + b;
|
||||
},
|
||||
easeOutQuint: function (x, t, b, c, d) {
|
||||
return c*((t=t/d-1)*t*t*t*t + 1) + b;
|
||||
},
|
||||
easeInOutQuint: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
|
||||
return c/2*((t-=2)*t*t*t*t + 2) + b;
|
||||
},
|
||||
easeInSine: function (x, t, b, c, d) {
|
||||
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
|
||||
},
|
||||
easeOutSine: function (x, t, b, c, d) {
|
||||
return c * Math.sin(t/d * (Math.PI/2)) + b;
|
||||
},
|
||||
easeInOutSine: function (x, t, b, c, d) {
|
||||
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
|
||||
},
|
||||
easeInExpo: function (x, t, b, c, d) {
|
||||
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
|
||||
},
|
||||
easeOutExpo: function (x, t, b, c, d) {
|
||||
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
|
||||
},
|
||||
easeInOutExpo: function (x, t, b, c, d) {
|
||||
if (t==0) return b;
|
||||
if (t==d) return b+c;
|
||||
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
|
||||
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
|
||||
},
|
||||
easeInCirc: function (x, t, b, c, d) {
|
||||
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
|
||||
},
|
||||
easeOutCirc: function (x, t, b, c, d) {
|
||||
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
|
||||
},
|
||||
easeInOutCirc: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
|
||||
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
|
||||
},
|
||||
easeInElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
|
||||
},
|
||||
easeOutElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
|
||||
},
|
||||
easeInOutElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
|
||||
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
|
||||
},
|
||||
easeInBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
return c*(t/=d)*t*((s+1)*t - s) + b;
|
||||
},
|
||||
easeOutBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
|
||||
},
|
||||
easeInOutBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
|
||||
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
|
||||
},
|
||||
easeInBounce: function (x, t, b, c, d) {
|
||||
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
|
||||
},
|
||||
easeOutBounce: function (x, t, b, c, d) {
|
||||
if ((t/=d) < (1/2.75)) {
|
||||
return c*(7.5625*t*t) + b;
|
||||
} else if (t < (2/2.75)) {
|
||||
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
|
||||
} else if (t < (2.5/2.75)) {
|
||||
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
|
||||
} else {
|
||||
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
|
||||
}
|
||||
},
|
||||
easeInOutBounce: function (x, t, b, c, d) {
|
||||
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
|
||||
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
*
|
||||
* TERMS OF USE - EASING EQUATIONS
|
||||
*
|
||||
* Open source under the BSD License.
|
||||
*
|
||||
* Copyright © 2001 Robert Penner
|
||||
* All rights reserved.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without modification,
|
||||
* are permitted provided that the following conditions are met:
|
||||
*
|
||||
* Redistributions of source code must retain the above copyright notice, this list of
|
||||
* conditions and the following disclaimer.
|
||||
* Redistributions in binary form must reproduce the above copyright notice, this list
|
||||
* of conditions and the following disclaimer in the documentation and/or other materials
|
||||
* provided with the distribution.
|
||||
*
|
||||
* Neither the name of the author nor the names of contributors may be used to endorse
|
||||
* or promote products derived from this software without specific prior written permission.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
|
||||
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
|
||||
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
||||
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
|
||||
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
|
||||
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
|
||||
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
|
||||
* OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*
|
||||
*/
|
||||
@@ -1,33 +0,0 @@
|
||||
(function(factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['jquery', 'hammerjs'], factory);
|
||||
} else if (typeof exports === 'object') {
|
||||
factory(require('jquery'), require('hammerjs'));
|
||||
} else {
|
||||
factory(jQuery, Hammer);
|
||||
}
|
||||
}(function($, Hammer) {
|
||||
function hammerify(el, options) {
|
||||
var $el = $(el);
|
||||
if(!$el.data("hammer")) {
|
||||
$el.data("hammer", new Hammer($el[0], options));
|
||||
}
|
||||
}
|
||||
|
||||
$.fn.hammer = function(options) {
|
||||
return this.each(function() {
|
||||
hammerify(this, options);
|
||||
});
|
||||
};
|
||||
|
||||
// extend the emit method to also trigger jQuery events
|
||||
Hammer.Manager.prototype.emit = (function(originalEmit) {
|
||||
return function(type, data) {
|
||||
originalEmit.call(this, type, data);
|
||||
$(this.element).trigger({
|
||||
type: type,
|
||||
gesture: data
|
||||
});
|
||||
};
|
||||
})(Hammer.Manager.prototype.emit);
|
||||
}));
|
||||
-178
@@ -1,178 +0,0 @@
|
||||
(function($) {
|
||||
var _stack = 0,
|
||||
_lastID = 0,
|
||||
_generateID = function() {
|
||||
_lastID++;
|
||||
return 'materialize-lean-overlay-' + _lastID;
|
||||
};
|
||||
|
||||
$.fn.extend({
|
||||
openModal: function(options) {
|
||||
|
||||
$('body').css('overflow', 'hidden');
|
||||
|
||||
var defaults = {
|
||||
opacity: 0.5,
|
||||
in_duration: 350,
|
||||
out_duration: 250,
|
||||
ready: undefined,
|
||||
complete: undefined,
|
||||
dismissible: true,
|
||||
starting_top: '4%'
|
||||
},
|
||||
overlayID = _generateID(),
|
||||
$modal = $(this),
|
||||
$overlay = $('<div class="lean-overlay"></div>'),
|
||||
lStack = (++_stack);
|
||||
|
||||
// Store a reference of the overlay
|
||||
$overlay.attr('id', overlayID).css('z-index', 1000 + lStack * 2);
|
||||
$modal.data('overlay-id', overlayID).css('z-index', 1000 + lStack * 2 + 1);
|
||||
|
||||
$("body").append($overlay);
|
||||
|
||||
// Override defaults
|
||||
options = $.extend(defaults, options);
|
||||
|
||||
if (options.dismissible) {
|
||||
$overlay.click(function() {
|
||||
$modal.closeModal(options);
|
||||
});
|
||||
// Return on ESC
|
||||
$(document).on('keyup.leanModal' + overlayID, function(e) {
|
||||
if (e.keyCode === 27) { // ESC key
|
||||
$modal.closeModal(options);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$modal.find(".modal-close").on('click.close', function(e) {
|
||||
$modal.closeModal(options);
|
||||
});
|
||||
|
||||
$overlay.css({ display : "block", opacity : 0 });
|
||||
|
||||
$modal.css({
|
||||
display : "block",
|
||||
opacity: 0
|
||||
});
|
||||
|
||||
$overlay.velocity({opacity: options.opacity}, {duration: options.in_duration, queue: false, ease: "easeOutCubic"});
|
||||
$modal.data('associated-overlay', $overlay[0]);
|
||||
|
||||
// Define Bottom Sheet animation
|
||||
if ($modal.hasClass('bottom-sheet')) {
|
||||
$modal.velocity({bottom: "0", opacity: 1}, {
|
||||
duration: options.in_duration,
|
||||
queue: false,
|
||||
ease: "easeOutCubic",
|
||||
// Handle modal ready callback
|
||||
complete: function() {
|
||||
if (typeof(options.ready) === "function") {
|
||||
options.ready();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
$.Velocity.hook($modal, "scaleX", 0.7);
|
||||
$modal.css({ top: options.starting_top });
|
||||
$modal.velocity({top: "10%", opacity: 1, scaleX: '1'}, {
|
||||
duration: options.in_duration,
|
||||
queue: false,
|
||||
ease: "easeOutCubic",
|
||||
// Handle modal ready callback
|
||||
complete: function() {
|
||||
if (typeof(options.ready) === "function") {
|
||||
options.ready();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
$.fn.extend({
|
||||
closeModal: function(options) {
|
||||
var defaults = {
|
||||
out_duration: 250,
|
||||
complete: undefined
|
||||
},
|
||||
$modal = $(this),
|
||||
overlayID = $modal.data('overlay-id'),
|
||||
$overlay = $('#' + overlayID);
|
||||
|
||||
options = $.extend(defaults, options);
|
||||
|
||||
// Disable scrolling
|
||||
$('body').css('overflow', '');
|
||||
|
||||
$modal.find('.modal-close').off('click.close');
|
||||
$(document).off('keyup.leanModal' + overlayID);
|
||||
|
||||
$overlay.velocity( { opacity: 0}, {duration: options.out_duration, queue: false, ease: "easeOutQuart"});
|
||||
|
||||
|
||||
// Define Bottom Sheet animation
|
||||
if ($modal.hasClass('bottom-sheet')) {
|
||||
$modal.velocity({bottom: "-100%", opacity: 0}, {
|
||||
duration: options.out_duration,
|
||||
queue: false,
|
||||
ease: "easeOutCubic",
|
||||
// Handle modal ready callback
|
||||
complete: function() {
|
||||
$overlay.css({display:"none"});
|
||||
|
||||
// Call complete callback
|
||||
if (typeof(options.complete) === "function") {
|
||||
options.complete();
|
||||
}
|
||||
$overlay.remove();
|
||||
_stack--;
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
$modal.velocity(
|
||||
{ top: options.starting_top, opacity: 0, scaleX: 0.7}, {
|
||||
duration: options.out_duration,
|
||||
complete:
|
||||
function() {
|
||||
|
||||
$(this).css('display', 'none');
|
||||
// Call complete callback
|
||||
if (typeof(options.complete) === "function") {
|
||||
options.complete();
|
||||
}
|
||||
$overlay.remove();
|
||||
_stack--;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$.fn.extend({
|
||||
leanModal: function(option) {
|
||||
return this.each(function() {
|
||||
|
||||
var defaults = {
|
||||
starting_top: '4%'
|
||||
},
|
||||
// Override defaults
|
||||
options = $.extend(defaults, option);
|
||||
|
||||
// Close Handlers
|
||||
$(this).click(function(e) {
|
||||
options.starting_top = ($(this).offset().top - $(window).scrollTop()) /1.15;
|
||||
var modal_id = $(this).attr("href") || '#' + $(this).data('target');
|
||||
$(modal_id).openModal(options);
|
||||
e.preventDefault();
|
||||
}); // done set on click
|
||||
}); // done return
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
@@ -1,249 +0,0 @@
|
||||
(function ($) {
|
||||
|
||||
$.fn.materialbox = function () {
|
||||
|
||||
return this.each(function() {
|
||||
|
||||
if ($(this).hasClass('initialized')) {
|
||||
return;
|
||||
}
|
||||
|
||||
$(this).addClass('initialized');
|
||||
|
||||
var overlayActive = false;
|
||||
var doneAnimating = true;
|
||||
var inDuration = 275;
|
||||
var outDuration = 200;
|
||||
var origin = $(this);
|
||||
var placeholder = $('<div></div>').addClass('material-placeholder');
|
||||
var originalWidth = 0;
|
||||
var originalHeight = 0;
|
||||
origin.wrap(placeholder);
|
||||
|
||||
|
||||
origin.on('click', function(){
|
||||
var placeholder = origin.parent('.material-placeholder');
|
||||
var windowWidth = window.innerWidth;
|
||||
var windowHeight = window.innerHeight;
|
||||
var originalWidth = origin.width();
|
||||
var originalHeight = origin.height();
|
||||
|
||||
|
||||
// If already modal, return to original
|
||||
if (doneAnimating === false) {
|
||||
returnToOriginal();
|
||||
return false;
|
||||
}
|
||||
else if (overlayActive && doneAnimating===true) {
|
||||
returnToOriginal();
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
// Set states
|
||||
doneAnimating = false;
|
||||
origin.addClass('active');
|
||||
overlayActive = true;
|
||||
|
||||
// Set positioning for placeholder
|
||||
|
||||
placeholder.css({
|
||||
width: placeholder[0].getBoundingClientRect().width,
|
||||
height: placeholder[0].getBoundingClientRect().height,
|
||||
position: 'relative',
|
||||
top: 0,
|
||||
left: 0
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Set css on origin
|
||||
origin.css({position: 'absolute', 'z-index': 1000})
|
||||
.data('width', originalWidth)
|
||||
.data('height', originalHeight);
|
||||
|
||||
// Add overlay
|
||||
var overlay = $('<div id="materialbox-overlay"></div>')
|
||||
.css({
|
||||
opacity: 0
|
||||
})
|
||||
.click(function(){
|
||||
if (doneAnimating === true)
|
||||
returnToOriginal();
|
||||
});
|
||||
// Animate Overlay
|
||||
$('body').append(overlay);
|
||||
overlay.velocity({opacity: 1}, {duration: inDuration, queue: false, easing: 'easeOutQuad'}
|
||||
);
|
||||
|
||||
|
||||
// Add and animate caption if it exists
|
||||
if (origin.data('caption') !== "") {
|
||||
var $photo_caption = $('<div class="materialbox-caption"></div>');
|
||||
$photo_caption.text(origin.data('caption'));
|
||||
$('body').append($photo_caption);
|
||||
$photo_caption.css({ "display": "inline" });
|
||||
$photo_caption.velocity({opacity: 1}, {duration: inDuration, queue: false, easing: 'easeOutQuad'});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Resize Image
|
||||
var ratio = 0;
|
||||
var widthPercent = originalWidth / windowWidth;
|
||||
var heightPercent = originalHeight / windowHeight;
|
||||
var newWidth = 0;
|
||||
var newHeight = 0;
|
||||
|
||||
if (widthPercent > heightPercent) {
|
||||
ratio = originalHeight / originalWidth;
|
||||
newWidth = windowWidth * 0.9;
|
||||
newHeight = windowWidth * 0.9 * ratio;
|
||||
}
|
||||
else {
|
||||
ratio = originalWidth / originalHeight;
|
||||
newWidth = (windowHeight * 0.9) * ratio;
|
||||
newHeight = windowHeight * 0.9;
|
||||
}
|
||||
|
||||
// Animate image + set z-index
|
||||
if(origin.hasClass('responsive-img')) {
|
||||
origin.velocity({'max-width': newWidth, 'width': originalWidth}, {duration: 0, queue: false,
|
||||
complete: function(){
|
||||
origin.css({left: 0, top: 0})
|
||||
.velocity(
|
||||
{
|
||||
height: newHeight,
|
||||
width: newWidth,
|
||||
left: $(document).scrollLeft() + windowWidth/2 - origin.parent('.material-placeholder').offset().left - newWidth/2,
|
||||
top: $(document).scrollTop() + windowHeight/2 - origin.parent('.material-placeholder').offset().top - newHeight/ 2
|
||||
},
|
||||
{
|
||||
duration: inDuration,
|
||||
queue: false,
|
||||
easing: 'easeOutQuad',
|
||||
complete: function(){doneAnimating = true;}
|
||||
}
|
||||
);
|
||||
} // End Complete
|
||||
}); // End Velocity
|
||||
}
|
||||
else {
|
||||
origin.css('left', 0)
|
||||
.css('top', 0)
|
||||
.velocity(
|
||||
{
|
||||
height: newHeight,
|
||||
width: newWidth,
|
||||
left: $(document).scrollLeft() + windowWidth/2 - origin.parent('.material-placeholder').offset().left - newWidth/2,
|
||||
top: $(document).scrollTop() + windowHeight/2 - origin.parent('.material-placeholder').offset().top - newHeight/ 2
|
||||
},
|
||||
{
|
||||
duration: inDuration,
|
||||
queue: false,
|
||||
easing: 'easeOutQuad',
|
||||
complete: function(){doneAnimating = true;}
|
||||
}
|
||||
); // End Velocity
|
||||
}
|
||||
|
||||
}); // End origin on click
|
||||
|
||||
|
||||
// Return on scroll
|
||||
$(window).scroll(function() {
|
||||
if (overlayActive ) {
|
||||
returnToOriginal();
|
||||
}
|
||||
});
|
||||
|
||||
// Return on ESC
|
||||
$(document).keyup(function(e) {
|
||||
|
||||
if (e.keyCode === 27 && doneAnimating === true) { // ESC key
|
||||
if (overlayActive) {
|
||||
returnToOriginal();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// This function returns the modaled image to the original spot
|
||||
function returnToOriginal() {
|
||||
|
||||
doneAnimating = false;
|
||||
|
||||
var placeholder = origin.parent('.material-placeholder');
|
||||
var windowWidth = window.innerWidth;
|
||||
var windowHeight = window.innerHeight;
|
||||
var originalWidth = origin.data('width');
|
||||
var originalHeight = origin.data('height');
|
||||
|
||||
origin.velocity("stop", true);
|
||||
$('#materialbox-overlay').velocity("stop", true);
|
||||
$('.materialbox-caption').velocity("stop", true);
|
||||
|
||||
|
||||
$('#materialbox-overlay').velocity({opacity: 0}, {
|
||||
duration: outDuration, // Delay prevents animation overlapping
|
||||
queue: false, easing: 'easeOutQuad',
|
||||
complete: function(){
|
||||
// Remove Overlay
|
||||
overlayActive = false;
|
||||
$(this).remove();
|
||||
}
|
||||
});
|
||||
|
||||
// Resize Image
|
||||
origin.velocity(
|
||||
{
|
||||
width: originalWidth,
|
||||
height: originalHeight,
|
||||
left: 0,
|
||||
top: 0
|
||||
},
|
||||
{
|
||||
duration: outDuration,
|
||||
queue: false, easing: 'easeOutQuad'
|
||||
}
|
||||
);
|
||||
|
||||
// Remove Caption + reset css settings on image
|
||||
$('.materialbox-caption').velocity({opacity: 0}, {
|
||||
duration: outDuration, // Delay prevents animation overlapping
|
||||
queue: false, easing: 'easeOutQuad',
|
||||
complete: function(){
|
||||
placeholder.css({
|
||||
height: '',
|
||||
width: '',
|
||||
position: '',
|
||||
top: '',
|
||||
left: ''
|
||||
});
|
||||
|
||||
origin.css({
|
||||
height: '',
|
||||
top: '',
|
||||
left: '',
|
||||
width: '',
|
||||
'max-width': '',
|
||||
position: '',
|
||||
'z-index': ''
|
||||
});
|
||||
|
||||
// Remove class
|
||||
origin.removeClass('active');
|
||||
doneAnimating = true;
|
||||
$(this).remove();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$(document).ready(function(){
|
||||
$('.materialboxed').materialbox();
|
||||
});
|
||||
|
||||
}( jQuery ));
|
||||
@@ -1,58 +0,0 @@
|
||||
(function ($) {
|
||||
|
||||
$.fn.parallax = function () {
|
||||
var window_width = $(window).width();
|
||||
// Parallax Scripts
|
||||
return this.each(function(i) {
|
||||
var $this = $(this);
|
||||
$this.addClass('parallax');
|
||||
|
||||
function updateParallax(initial) {
|
||||
var container_height;
|
||||
if (window_width < 601) {
|
||||
container_height = ($this.height() > 0) ? $this.height() : $this.children("img").height();
|
||||
}
|
||||
else {
|
||||
container_height = ($this.height() > 0) ? $this.height() : 500;
|
||||
}
|
||||
var $img = $this.children("img").first();
|
||||
var img_height = $img.height();
|
||||
var parallax_dist = img_height - container_height;
|
||||
var bottom = $this.offset().top + container_height;
|
||||
var top = $this.offset().top;
|
||||
var scrollTop = $(window).scrollTop();
|
||||
var windowHeight = window.innerHeight;
|
||||
var windowBottom = scrollTop + windowHeight;
|
||||
var percentScrolled = (windowBottom - top) / (container_height + windowHeight);
|
||||
var parallax = Math.round((parallax_dist * percentScrolled));
|
||||
|
||||
if (initial) {
|
||||
$img.css('display', 'block');
|
||||
}
|
||||
if ((bottom > scrollTop) && (top < (scrollTop + windowHeight))) {
|
||||
$img.css('transform', "translate3D(-50%," + parallax + "px, 0)");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Wait for image load
|
||||
$this.children("img").one("load", function() {
|
||||
updateParallax(true);
|
||||
}).each(function() {
|
||||
if(this.complete) $(this).load();
|
||||
});
|
||||
|
||||
$(window).scroll(function() {
|
||||
window_width = $(window).width();
|
||||
updateParallax(false);
|
||||
});
|
||||
|
||||
$(window).resize(function() {
|
||||
window_width = $(window).width();
|
||||
updateParallax(false);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
}( jQuery ));
|
||||
@@ -1,62 +0,0 @@
|
||||
(function ($) {
|
||||
$(document).ready(function() {
|
||||
|
||||
$.fn.pushpin = function (options) {
|
||||
|
||||
var defaults = {
|
||||
top: 0,
|
||||
bottom: Infinity,
|
||||
offset: 0
|
||||
}
|
||||
options = $.extend(defaults, options);
|
||||
|
||||
$index = 0;
|
||||
return this.each(function() {
|
||||
var $uniqueId = Materialize.guid(),
|
||||
$this = $(this),
|
||||
$original_offset = $(this).offset().top;
|
||||
|
||||
function removePinClasses(object) {
|
||||
object.removeClass('pin-top');
|
||||
object.removeClass('pinned');
|
||||
object.removeClass('pin-bottom');
|
||||
}
|
||||
|
||||
function updateElements(objects, scrolled) {
|
||||
objects.each(function () {
|
||||
// Add position fixed (because its between top and bottom)
|
||||
if (options.top <= scrolled && options.bottom >= scrolled && !$(this).hasClass('pinned')) {
|
||||
removePinClasses($(this));
|
||||
$(this).css('top', options.offset);
|
||||
$(this).addClass('pinned');
|
||||
}
|
||||
|
||||
// Add pin-top (when scrolled position is above top)
|
||||
if (scrolled < options.top && !$(this).hasClass('pin-top')) {
|
||||
removePinClasses($(this));
|
||||
$(this).css('top', 0);
|
||||
$(this).addClass('pin-top');
|
||||
}
|
||||
|
||||
// Add pin-bottom (when scrolled position is below bottom)
|
||||
if (scrolled > options.bottom && !$(this).hasClass('pin-bottom')) {
|
||||
removePinClasses($(this));
|
||||
$(this).addClass('pin-bottom');
|
||||
$(this).css('top', options.bottom - $original_offset);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateElements($this, $(window).scrollTop());
|
||||
$(window).on('scroll.' + $uniqueId, function () {
|
||||
var $scrolled = $(window).scrollTop() + options.offset;
|
||||
updateElements($this, $scrolled);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
});
|
||||
}( jQuery ));
|
||||
@@ -1,44 +0,0 @@
|
||||
(function($) {
|
||||
|
||||
// Input: Array of JSON objects {selector, offset, callback}
|
||||
|
||||
Materialize.scrollFire = function(options) {
|
||||
|
||||
var didScroll = false;
|
||||
|
||||
window.addEventListener("scroll", function() {
|
||||
didScroll = true;
|
||||
});
|
||||
|
||||
// Rate limit to 100ms
|
||||
setInterval(function() {
|
||||
if(didScroll) {
|
||||
didScroll = false;
|
||||
|
||||
var windowScroll = window.pageYOffset + window.innerHeight;
|
||||
|
||||
for (var i = 0 ; i < options.length; i++) {
|
||||
// Get options from each line
|
||||
var value = options[i];
|
||||
var selector = value.selector,
|
||||
offset = value.offset,
|
||||
callback = value.callback;
|
||||
|
||||
var currentElement = document.querySelector(selector);
|
||||
if ( currentElement !== null) {
|
||||
var elementOffset = currentElement.getBoundingClientRect().top + window.pageYOffset;
|
||||
|
||||
if (windowScroll > (elementOffset + offset)) {
|
||||
if (value.done !== true) {
|
||||
var callbackFunc = new Function(callback);
|
||||
callbackFunc();
|
||||
value.done = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
-284
@@ -1,284 +0,0 @@
|
||||
/**
|
||||
* Extend jquery with a scrollspy plugin.
|
||||
* This watches the window scroll and fires events when elements are scrolled into viewport.
|
||||
*
|
||||
* throttle() and getTime() taken from Underscore.js
|
||||
* https://github.com/jashkenas/underscore
|
||||
*
|
||||
* @author Copyright 2013 John Smart
|
||||
* @license https://raw.github.com/thesmart/jquery-scrollspy/master/LICENSE
|
||||
* @see https://github.com/thesmart
|
||||
* @version 0.1.2
|
||||
*/
|
||||
(function($) {
|
||||
|
||||
var jWindow = $(window);
|
||||
var elements = [];
|
||||
var elementsInView = [];
|
||||
var isSpying = false;
|
||||
var ticks = 0;
|
||||
var unique_id = 1;
|
||||
var offset = {
|
||||
top : 0,
|
||||
right : 0,
|
||||
bottom : 0,
|
||||
left : 0,
|
||||
}
|
||||
|
||||
/**
|
||||
* Find elements that are within the boundary
|
||||
* @param {number} top
|
||||
* @param {number} right
|
||||
* @param {number} bottom
|
||||
* @param {number} left
|
||||
* @return {jQuery} A collection of elements
|
||||
*/
|
||||
function findElements(top, right, bottom, left) {
|
||||
var hits = $();
|
||||
$.each(elements, function(i, element) {
|
||||
if (element.height() > 0) {
|
||||
var elTop = element.offset().top,
|
||||
elLeft = element.offset().left,
|
||||
elRight = elLeft + element.width(),
|
||||
elBottom = elTop + element.height();
|
||||
|
||||
var isIntersect = !(elLeft > right ||
|
||||
elRight < left ||
|
||||
elTop > bottom ||
|
||||
elBottom < top);
|
||||
|
||||
if (isIntersect) {
|
||||
hits.push(element);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return hits;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Called when the user scrolls the window
|
||||
*/
|
||||
function onScroll() {
|
||||
// unique tick id
|
||||
++ticks;
|
||||
|
||||
// viewport rectangle
|
||||
var top = jWindow.scrollTop(),
|
||||
left = jWindow.scrollLeft(),
|
||||
right = left + jWindow.width(),
|
||||
bottom = top + jWindow.height();
|
||||
|
||||
// determine which elements are in view
|
||||
// + 60 accounts for fixed nav
|
||||
var intersections = findElements(top+offset.top + 200, right+offset.right, bottom+offset.bottom, left+offset.left);
|
||||
$.each(intersections, function(i, element) {
|
||||
|
||||
var lastTick = element.data('scrollSpy:ticks');
|
||||
if (typeof lastTick != 'number') {
|
||||
// entered into view
|
||||
element.triggerHandler('scrollSpy:enter');
|
||||
}
|
||||
|
||||
// update tick id
|
||||
element.data('scrollSpy:ticks', ticks);
|
||||
});
|
||||
|
||||
// determine which elements are no longer in view
|
||||
$.each(elementsInView, function(i, element) {
|
||||
var lastTick = element.data('scrollSpy:ticks');
|
||||
if (typeof lastTick == 'number' && lastTick !== ticks) {
|
||||
// exited from view
|
||||
element.triggerHandler('scrollSpy:exit');
|
||||
element.data('scrollSpy:ticks', null);
|
||||
}
|
||||
});
|
||||
|
||||
// remember elements in view for next tick
|
||||
elementsInView = intersections;
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when window is resized
|
||||
*/
|
||||
function onWinSize() {
|
||||
jWindow.trigger('scrollSpy:winSize');
|
||||
}
|
||||
|
||||
/**
|
||||
* Get time in ms
|
||||
* @license https://raw.github.com/jashkenas/underscore/master/LICENSE
|
||||
* @type {function}
|
||||
* @return {number}
|
||||
*/
|
||||
var getTime = (Date.now || function () {
|
||||
return new Date().getTime();
|
||||
});
|
||||
|
||||
/**
|
||||
* Returns a function, that, when invoked, will only be triggered at most once
|
||||
* during a given window of time. Normally, the throttled function will run
|
||||
* as much as it can, without ever going more than once per `wait` duration;
|
||||
* but if you'd like to disable the execution on the leading edge, pass
|
||||
* `{leading: false}`. To disable execution on the trailing edge, ditto.
|
||||
* @license https://raw.github.com/jashkenas/underscore/master/LICENSE
|
||||
* @param {function} func
|
||||
* @param {number} wait
|
||||
* @param {Object=} options
|
||||
* @returns {Function}
|
||||
*/
|
||||
function throttle(func, wait, options) {
|
||||
var context, args, result;
|
||||
var timeout = null;
|
||||
var previous = 0;
|
||||
options || (options = {});
|
||||
var later = function () {
|
||||
previous = options.leading === false ? 0 : getTime();
|
||||
timeout = null;
|
||||
result = func.apply(context, args);
|
||||
context = args = null;
|
||||
};
|
||||
return function () {
|
||||
var now = getTime();
|
||||
if (!previous && options.leading === false) previous = now;
|
||||
var remaining = wait - (now - previous);
|
||||
context = this;
|
||||
args = arguments;
|
||||
if (remaining <= 0) {
|
||||
clearTimeout(timeout);
|
||||
timeout = null;
|
||||
previous = now;
|
||||
result = func.apply(context, args);
|
||||
context = args = null;
|
||||
} else if (!timeout && options.trailing !== false) {
|
||||
timeout = setTimeout(later, remaining);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Enables ScrollSpy using a selector
|
||||
* @param {jQuery|string} selector The elements collection, or a selector
|
||||
* @param {Object=} options Optional.
|
||||
throttle : number -> scrollspy throttling. Default: 100 ms
|
||||
offsetTop : number -> offset from top. Default: 0
|
||||
offsetRight : number -> offset from right. Default: 0
|
||||
offsetBottom : number -> offset from bottom. Default: 0
|
||||
offsetLeft : number -> offset from left. Default: 0
|
||||
* @returns {jQuery}
|
||||
*/
|
||||
$.scrollSpy = function(selector, options) {
|
||||
var visible = [];
|
||||
selector = $(selector);
|
||||
selector.each(function(i, element) {
|
||||
elements.push($(element));
|
||||
$(element).data("scrollSpy:id", i);
|
||||
// Smooth scroll to section
|
||||
$('a[href=#' + $(element).attr('id') + ']').click(function(e) {
|
||||
e.preventDefault();
|
||||
var offset = $(this.hash).offset().top + 1;
|
||||
|
||||
// offset - 200 allows elements near bottom of page to scroll
|
||||
|
||||
$('html, body').animate({ scrollTop: offset - 200 }, {duration: 400, queue: false, easing: 'easeOutCubic'});
|
||||
|
||||
});
|
||||
});
|
||||
options = options || {
|
||||
throttle: 100
|
||||
};
|
||||
|
||||
offset.top = options.offsetTop || 0;
|
||||
offset.right = options.offsetRight || 0;
|
||||
offset.bottom = options.offsetBottom || 0;
|
||||
offset.left = options.offsetLeft || 0;
|
||||
|
||||
var throttledScroll = throttle(onScroll, options.throttle || 100);
|
||||
var readyScroll = function(){
|
||||
$(document).ready(throttledScroll);
|
||||
};
|
||||
|
||||
if (!isSpying) {
|
||||
jWindow.on('scroll', readyScroll);
|
||||
jWindow.on('resize', readyScroll);
|
||||
isSpying = true;
|
||||
}
|
||||
|
||||
// perform a scan once, after current execution context, and after dom is ready
|
||||
setTimeout(readyScroll, 0);
|
||||
|
||||
|
||||
selector.on('scrollSpy:enter', function() {
|
||||
visible = $.grep(visible, function(value) {
|
||||
return value.height() != 0;
|
||||
});
|
||||
|
||||
var $this = $(this);
|
||||
|
||||
if (visible[0]) {
|
||||
$('a[href=#' + visible[0].attr('id') + ']').removeClass('active');
|
||||
if ($this.data('scrollSpy:id') < visible[0].data('scrollSpy:id')) {
|
||||
visible.unshift($(this));
|
||||
}
|
||||
else {
|
||||
visible.push($(this));
|
||||
}
|
||||
}
|
||||
else {
|
||||
visible.push($(this));
|
||||
}
|
||||
|
||||
|
||||
$('a[href=#' + visible[0].attr('id') + ']').addClass('active');
|
||||
});
|
||||
selector.on('scrollSpy:exit', function() {
|
||||
visible = $.grep(visible, function(value) {
|
||||
return value.height() != 0;
|
||||
});
|
||||
|
||||
if (visible[0]) {
|
||||
$('a[href=#' + visible[0].attr('id') + ']').removeClass('active');
|
||||
var $this = $(this);
|
||||
visible = $.grep(visible, function(value) {
|
||||
return value.attr('id') != $this.attr('id');
|
||||
});
|
||||
if (visible[0]) { // Check if empty
|
||||
$('a[href=#' + visible[0].attr('id') + ']').addClass('active');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return selector;
|
||||
};
|
||||
|
||||
/**
|
||||
* Listen for window resize events
|
||||
* @param {Object=} options Optional. Set { throttle: number } to change throttling. Default: 100 ms
|
||||
* @returns {jQuery} $(window)
|
||||
*/
|
||||
$.winSizeSpy = function(options) {
|
||||
$.winSizeSpy = function() { return jWindow; }; // lock from multiple calls
|
||||
options = options || {
|
||||
throttle: 100
|
||||
};
|
||||
return jWindow.on('resize', throttle(onWinSize, options.throttle || 100));
|
||||
};
|
||||
|
||||
/**
|
||||
* Enables ScrollSpy on a collection of elements
|
||||
* e.g. $('.scrollSpy').scrollSpy()
|
||||
* @param {Object=} options Optional.
|
||||
throttle : number -> scrollspy throttling. Default: 100 ms
|
||||
offsetTop : number -> offset from top. Default: 0
|
||||
offsetRight : number -> offset from right. Default: 0
|
||||
offsetBottom : number -> offset from bottom. Default: 0
|
||||
offsetLeft : number -> offset from left. Default: 0
|
||||
* @returns {jQuery}
|
||||
*/
|
||||
$.fn.scrollSpy = function(options) {
|
||||
return $.scrollSpy($(this), options);
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
-315
@@ -1,315 +0,0 @@
|
||||
(function ($) {
|
||||
|
||||
var methods = {
|
||||
init : function(options) {
|
||||
var defaults = {
|
||||
menuWidth: 240,
|
||||
edge: 'left',
|
||||
closeOnClick: false
|
||||
};
|
||||
options = $.extend(defaults, options);
|
||||
|
||||
$(this).each(function(){
|
||||
var $this = $(this);
|
||||
var menu_id = $("#"+ $this.attr('data-activates'));
|
||||
|
||||
// Set to width
|
||||
if (options.menuWidth != 240) {
|
||||
menu_id.css('width', options.menuWidth);
|
||||
}
|
||||
|
||||
// Add Touch Area
|
||||
var dragTarget = $('<div class="drag-target"></div>');
|
||||
$('body').append(dragTarget);
|
||||
|
||||
if (options.edge == 'left') {
|
||||
menu_id.css('left', -1 * (options.menuWidth + 10));
|
||||
dragTarget.css({'left': 0}); // Add Touch Area
|
||||
}
|
||||
else {
|
||||
menu_id.addClass('right-aligned') // Change text-alignment to right
|
||||
.css('right', -1 * (options.menuWidth + 10))
|
||||
.css('left', '');
|
||||
dragTarget.css({'right': 0}); // Add Touch Area
|
||||
}
|
||||
|
||||
// If fixed sidenav, bring menu out
|
||||
if (menu_id.hasClass('fixed')) {
|
||||
if (window.innerWidth > 992) {
|
||||
menu_id.css('left', 0);
|
||||
}
|
||||
}
|
||||
|
||||
// Window resize to reset on large screens fixed
|
||||
if (menu_id.hasClass('fixed')) {
|
||||
$(window).resize( function() {
|
||||
if (window.innerWidth > 992) {
|
||||
// Close menu if window is resized bigger than 992 and user has fixed sidenav
|
||||
if ($('#sidenav-overlay').css('opacity') !== 0 && menuOut) {
|
||||
removeMenu(true);
|
||||
}
|
||||
else {
|
||||
menu_id.removeAttr('style');
|
||||
menu_id.css('width', options.menuWidth);
|
||||
}
|
||||
}
|
||||
else if (menuOut === false){
|
||||
if (options.edge === 'left')
|
||||
menu_id.css('left', -1 * (options.menuWidth + 10));
|
||||
else
|
||||
menu_id.css('right', -1 * (options.menuWidth + 10));
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
// if closeOnClick, then add close event for all a tags in side sideNav
|
||||
if (options.closeOnClick === true) {
|
||||
menu_id.on("click.itemclick", "a:not(.collapsible-header)", function(){
|
||||
removeMenu();
|
||||
});
|
||||
}
|
||||
|
||||
function removeMenu(restoreNav) {
|
||||
panning = false;
|
||||
menuOut = false;
|
||||
|
||||
// Reenable scrolling
|
||||
$('body').css('overflow', '');
|
||||
|
||||
$('#sidenav-overlay').velocity({opacity: 0}, {duration: 200, queue: false, easing: 'easeOutQuad',
|
||||
complete: function() {
|
||||
$(this).remove();
|
||||
} });
|
||||
if (options.edge === 'left') {
|
||||
// Reset phantom div
|
||||
dragTarget.css({width: '', right: '', left: '0'});
|
||||
menu_id.velocity(
|
||||
{left: -1 * (options.menuWidth + 10)},
|
||||
{ duration: 200,
|
||||
queue: false,
|
||||
easing: 'easeOutCubic',
|
||||
complete: function() {
|
||||
if (restoreNav === true) {
|
||||
// Restore Fixed sidenav
|
||||
menu_id.removeAttr('style');
|
||||
menu_id.css('width', options.menuWidth);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
else {
|
||||
// Reset phantom div
|
||||
dragTarget.css({width: '', right: '0', left: ''});
|
||||
menu_id.velocity(
|
||||
{right: -1 * (options.menuWidth + 10)},
|
||||
{ duration: 200,
|
||||
queue: false,
|
||||
easing: 'easeOutCubic',
|
||||
complete: function() {
|
||||
if (restoreNav === true) {
|
||||
// Restore Fixed sidenav
|
||||
menu_id.removeAttr('style');
|
||||
menu_id.css('width', options.menuWidth);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Touch Event
|
||||
var panning = false;
|
||||
var menuOut = false;
|
||||
|
||||
dragTarget.on('click', function(){
|
||||
removeMenu();
|
||||
});
|
||||
|
||||
dragTarget.hammer({
|
||||
prevent_default: false
|
||||
}).bind('pan', function(e) {
|
||||
|
||||
if (e.gesture.pointerType == "touch") {
|
||||
|
||||
var direction = e.gesture.direction;
|
||||
var x = e.gesture.center.x;
|
||||
var y = e.gesture.center.y;
|
||||
var velocityX = e.gesture.velocityX;
|
||||
|
||||
// Disable Scrolling
|
||||
$('body').css('overflow', 'hidden');
|
||||
|
||||
// If overlay does not exist, create one and if it is clicked, close menu
|
||||
if ($('#sidenav-overlay').length === 0) {
|
||||
var overlay = $('<div id="sidenav-overlay"></div>');
|
||||
overlay.css('opacity', 0).click( function(){
|
||||
removeMenu();
|
||||
});
|
||||
$('body').append(overlay);
|
||||
}
|
||||
|
||||
// Keep within boundaries
|
||||
if (options.edge === 'left') {
|
||||
if (x > options.menuWidth) { x = options.menuWidth; }
|
||||
else if (x < 0) { x = 0; }
|
||||
}
|
||||
|
||||
if (options.edge === 'left') {
|
||||
// Left Direction
|
||||
if (x < (options.menuWidth / 2)) { menuOut = false; }
|
||||
// Right Direction
|
||||
else if (x >= (options.menuWidth / 2)) { menuOut = true; }
|
||||
|
||||
menu_id.css('left', (x - options.menuWidth));
|
||||
}
|
||||
else {
|
||||
// Left Direction
|
||||
if (x < (window.innerWidth - options.menuWidth / 2)) {
|
||||
menuOut = true;
|
||||
}
|
||||
// Right Direction
|
||||
else if (x >= (window.innerWidth - options.menuWidth / 2)) {
|
||||
menuOut = false;
|
||||
}
|
||||
var rightPos = -1 *(x - options.menuWidth / 2);
|
||||
if (rightPos > 0) {
|
||||
rightPos = 0;
|
||||
}
|
||||
|
||||
menu_id.css('right', rightPos);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Percentage overlay
|
||||
var overlayPerc;
|
||||
if (options.edge === 'left') {
|
||||
overlayPerc = x / options.menuWidth;
|
||||
$('#sidenav-overlay').velocity({opacity: overlayPerc }, {duration: 50, queue: false, easing: 'easeOutQuad'});
|
||||
}
|
||||
else {
|
||||
overlayPerc = Math.abs((x - window.innerWidth) / options.menuWidth);
|
||||
$('#sidenav-overlay').velocity({opacity: overlayPerc }, {duration: 50, queue: false, easing: 'easeOutQuad'});
|
||||
}
|
||||
}
|
||||
|
||||
}).bind('panend', function(e) {
|
||||
|
||||
if (e.gesture.pointerType == "touch") {
|
||||
var velocityX = e.gesture.velocityX;
|
||||
panning = false;
|
||||
if (options.edge === 'left') {
|
||||
// If velocityX <= 0.3 then the user is flinging the menu closed so ignore menuOut
|
||||
if ((menuOut && velocityX <= 0.3) || velocityX < -0.5) {
|
||||
menu_id.velocity({left: 0}, {duration: 300, queue: false, easing: 'easeOutQuad'});
|
||||
$('#sidenav-overlay').velocity({opacity: 1 }, {duration: 50, queue: false, easing: 'easeOutQuad'});
|
||||
dragTarget.css({width: '50%', right: 0, left: ''});
|
||||
}
|
||||
else if (!menuOut || velocityX > 0.3) {
|
||||
// Enable Scrolling
|
||||
$('body').css('overflow', '');
|
||||
// Slide menu closed
|
||||
menu_id.velocity({left: -1 * (options.menuWidth + 10)}, {duration: 200, queue: false, easing: 'easeOutQuad'});
|
||||
$('#sidenav-overlay').velocity({opacity: 0 }, {duration: 200, queue: false, easing: 'easeOutQuad',
|
||||
complete: function () {
|
||||
$(this).remove();
|
||||
}});
|
||||
dragTarget.css({width: '10px', right: '', left: 0});
|
||||
}
|
||||
}
|
||||
else {
|
||||
if ((menuOut && velocityX >= -0.3) || velocityX > 0.5) {
|
||||
menu_id.velocity({right: 0}, {duration: 300, queue: false, easing: 'easeOutQuad'});
|
||||
$('#sidenav-overlay').velocity({opacity: 1 }, {duration: 50, queue: false, easing: 'easeOutQuad'});
|
||||
dragTarget.css({width: '50%', right: '', left: 0});
|
||||
}
|
||||
else if (!menuOut || velocityX < -0.3) {
|
||||
// Enable Scrolling
|
||||
$('body').css('overflow', '');
|
||||
// Slide menu closed
|
||||
menu_id.velocity({right: -1 * (options.menuWidth + 10)}, {duration: 200, queue: false, easing: 'easeOutQuad'});
|
||||
$('#sidenav-overlay').velocity({opacity: 0 }, {duration: 200, queue: false, easing: 'easeOutQuad',
|
||||
complete: function () {
|
||||
$(this).remove();
|
||||
}});
|
||||
dragTarget.css({width: '10px', right: 0, left: ''});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
$this.click(function() {
|
||||
if (menuOut === true) {
|
||||
menuOut = false;
|
||||
panning = false;
|
||||
removeMenu();
|
||||
}
|
||||
else {
|
||||
|
||||
// Disable Scrolling
|
||||
$('body').css('overflow', 'hidden');
|
||||
// Push current drag target on top of DOM tree
|
||||
$('body').append(dragTarget);
|
||||
|
||||
if (options.edge === 'left') {
|
||||
dragTarget.css({width: '50%', right: 0, left: ''});
|
||||
menu_id.velocity({left: 0}, {duration: 300, queue: false, easing: 'easeOutQuad'});
|
||||
}
|
||||
else {
|
||||
dragTarget.css({width: '50%', right: '', left: 0});
|
||||
menu_id.velocity({right: 0}, {duration: 300, queue: false, easing: 'easeOutQuad'});
|
||||
menu_id.css('left','');
|
||||
}
|
||||
|
||||
var overlay = $('<div id="sidenav-overlay"></div>');
|
||||
overlay.css('opacity', 0)
|
||||
.click(function(){
|
||||
menuOut = false;
|
||||
panning = false;
|
||||
removeMenu();
|
||||
overlay.velocity({opacity: 0}, {duration: 300, queue: false, easing: 'easeOutQuad',
|
||||
complete: function() {
|
||||
$(this).remove();
|
||||
} });
|
||||
|
||||
});
|
||||
$('body').append(overlay);
|
||||
overlay.velocity({opacity: 1}, {duration: 300, queue: false, easing: 'easeOutQuad',
|
||||
complete: function () {
|
||||
menuOut = true;
|
||||
panning = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
show : function() {
|
||||
this.trigger('click');
|
||||
},
|
||||
hide : function() {
|
||||
$('#sidenav-overlay').trigger('click');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
$.fn.sideNav = 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.sideNav' );
|
||||
}
|
||||
}; // Plugin end
|
||||
}( jQuery ));
|
||||
-301
@@ -1,301 +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;
|
||||
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) {
|
||||
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 () {
|
||||
$(this).css('background-image', 'url(' + $(this).attr('src') + ')' );
|
||||
$(this).attr('src', 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==');
|
||||
});
|
||||
|
||||
// dynamically add indicators
|
||||
if (options.indicators) {
|
||||
var $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
|
||||
}).bind('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;
|
||||
|
||||
$curr_slide = $slider.find('.active');
|
||||
$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'});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}).bind('panend', function(e) {
|
||||
if (e.gesture.pointerType === "touch") {
|
||||
|
||||
$curr_slide = $slider.find('.active');
|
||||
panning = false;
|
||||
curr_index = $slider.find('.active').index();
|
||||
|
||||
if (!swipeRight && !swipeLeft) {
|
||||
// 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
|
||||
);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
},
|
||||
pause : function() {
|
||||
$(this).trigger('sliderPause');
|
||||
},
|
||||
start : function() {
|
||||
$(this).trigger('sliderStart');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
$.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 ));
|
||||
-129
@@ -1,129 +0,0 @@
|
||||
(function ($) {
|
||||
|
||||
var methods = {
|
||||
init : function() {
|
||||
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();
|
||||
|
||||
$this.width('100%');
|
||||
var $active, $content, $links = $this.find('li.tab a'),
|
||||
$tabs_width = $this.width(),
|
||||
$tab_width = $this.find('li').first().outerWidth(),
|
||||
$index = 0;
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
$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});
|
||||
}
|
||||
$(window).resize(function () {
|
||||
$tabs_width = $this.width();
|
||||
$tab_width = $this.find('li').first().outerWidth();
|
||||
if ($index < 0) {
|
||||
$index = 0;
|
||||
}
|
||||
if ($tab_width !== 0 && $tabs_width !== 0) {
|
||||
$indicator.css({"right": $tabs_width - (($index + 1) * $tab_width)});
|
||||
$indicator.css({"left": $index * $tab_width});
|
||||
}
|
||||
});
|
||||
|
||||
// Hide the remaining content
|
||||
$links.not($active).each(function () {
|
||||
$(this.hash).hide();
|
||||
});
|
||||
|
||||
|
||||
// Bind the click event handler
|
||||
$this.on('click', 'a', function(e){
|
||||
if ($(this).parent().hasClass('disabled')) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
$tabs_width = $this.width();
|
||||
$tab_width = $this.find('li').first().outerWidth();
|
||||
|
||||
// Make the old tab inactive.
|
||||
$active.removeClass('active');
|
||||
$content.hide();
|
||||
|
||||
// Update the variables with the new link and content
|
||||
$active = $(this);
|
||||
$content = $(this.hash);
|
||||
$links = $this.find('li.tab a');
|
||||
|
||||
// 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');
|
||||
|
||||
$content.show();
|
||||
|
||||
// Update indicator
|
||||
if (($index - $prev_index) >= 0) {
|
||||
$indicator.velocity({"right": $tabs_width - (($index + 1) * $tab_width)}, { duration: 300, queue: false, easing: 'easeOutQuad'});
|
||||
$indicator.velocity({"left": $index * $tab_width}, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
|
||||
|
||||
}
|
||||
else {
|
||||
$indicator.velocity({"left": $index * $tab_width}, { duration: 300, queue: false, easing: 'easeOutQuad'});
|
||||
$indicator.velocity({"right": $tabs_width - (($index + 1) * $tab_width)}, {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.tooltip' );
|
||||
}
|
||||
};
|
||||
|
||||
$(document).ready(function(){
|
||||
$('ul.tabs').tabs();
|
||||
});
|
||||
}( jQuery ));
|
||||
-136
@@ -1,136 +0,0 @@
|
||||
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 = 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;
|
||||
}
|
||||
};
|
||||
-177
@@ -1,177 +0,0 @@
|
||||
(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 ));
|
||||
@@ -1,154 +0,0 @@
|
||||
(function ($) {
|
||||
// Image transition function
|
||||
Materialize.fadeInImage = function(selector){
|
||||
var element = $(selector);
|
||||
element.css({opacity: 0});
|
||||
$(element).velocity({opacity: 1}, {
|
||||
duration: 650,
|
||||
queue: false,
|
||||
easing: 'easeOutSine'
|
||||
});
|
||||
$(element).velocity({opacity: 1}, {
|
||||
duration: 1300,
|
||||
queue: false,
|
||||
easing: 'swing',
|
||||
step: function(now, fx) {
|
||||
fx.start = 100;
|
||||
var grayscale_setting = now/100;
|
||||
var brightness_setting = 150 - (100 - now)/1.75;
|
||||
|
||||
if (brightness_setting < 100) {
|
||||
brightness_setting = 100;
|
||||
}
|
||||
if (now >= 0) {
|
||||
$(this).css({
|
||||
"-webkit-filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)",
|
||||
"filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)"
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Horizontal staggered list
|
||||
Materialize.showStaggeredList = function(selector) {
|
||||
var time = 0;
|
||||
$(selector).find('li').velocity(
|
||||
{ translateX: "-100px"},
|
||||
{ duration: 0 });
|
||||
|
||||
$(selector).find('li').each(function() {
|
||||
$(this).velocity(
|
||||
{ opacity: "1", translateX: "0"},
|
||||
{ duration: 800, delay: time, easing: [60, 10] });
|
||||
time += 120;
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
// Hardcoded .staggered-list scrollFire
|
||||
// var staggeredListOptions = [];
|
||||
// $('ul.staggered-list').each(function (i) {
|
||||
|
||||
// var label = 'scrollFire-' + i;
|
||||
// $(this).addClass(label);
|
||||
// staggeredListOptions.push(
|
||||
// {selector: 'ul.staggered-list.' + label,
|
||||
// offset: 200,
|
||||
// callback: 'showStaggeredList("ul.staggered-list.' + label + '")'});
|
||||
// });
|
||||
// scrollFire(staggeredListOptions);
|
||||
|
||||
// HammerJS, Swipe navigation
|
||||
|
||||
// Touch Event
|
||||
var swipeLeft = false;
|
||||
var swipeRight = false;
|
||||
|
||||
|
||||
// Dismissible Collections
|
||||
$('.dismissable').each(function() {
|
||||
$(this).hammer({
|
||||
prevent_default: false
|
||||
}).bind('pan', function(e) {
|
||||
if (e.gesture.pointerType === "touch") {
|
||||
var $this = $(this);
|
||||
var direction = e.gesture.direction;
|
||||
var x = e.gesture.deltaX;
|
||||
var velocityX = e.gesture.velocityX;
|
||||
|
||||
$this.velocity({ translateX: x
|
||||
}, {duration: 50, queue: false, easing: 'easeOutQuad'});
|
||||
|
||||
// Swipe Left
|
||||
if (direction === 4 && (x > ($this.innerWidth() / 2) || velocityX < -0.75)) {
|
||||
swipeLeft = true;
|
||||
}
|
||||
|
||||
// Swipe Right
|
||||
if (direction === 2 && (x < (-1 * $this.innerWidth() / 2) || velocityX > 0.75)) {
|
||||
swipeRight = true;
|
||||
}
|
||||
}
|
||||
}).bind('panend', function(e) {
|
||||
// Reset if collection is moved back into original position
|
||||
if (Math.abs(e.gesture.deltaX) < ($(this).innerWidth() / 2)) {
|
||||
swipeRight = false;
|
||||
swipeLeft = false;
|
||||
}
|
||||
|
||||
if (e.gesture.pointerType === "touch") {
|
||||
var $this = $(this);
|
||||
if (swipeLeft || swipeRight) {
|
||||
var fullWidth;
|
||||
if (swipeLeft) { fullWidth = $this.innerWidth(); }
|
||||
else { fullWidth = -1 * $this.innerWidth(); }
|
||||
|
||||
$this.velocity({ translateX: fullWidth,
|
||||
}, {duration: 100, queue: false, easing: 'easeOutQuad', complete:
|
||||
function() {
|
||||
$this.css('border', 'none');
|
||||
$this.velocity({ height: 0, padding: 0,
|
||||
}, {duration: 200, queue: false, easing: 'easeOutQuad', complete:
|
||||
function() { $this.remove(); }
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
$this.velocity({ translateX: 0,
|
||||
}, {duration: 100, queue: false, easing: 'easeOutQuad'});
|
||||
}
|
||||
swipeLeft = false;
|
||||
swipeRight = false;
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
// time = 0
|
||||
// // Vertical Staggered list
|
||||
// $('ul.staggered-list.vertical li').velocity(
|
||||
// { translateY: "100px"},
|
||||
// { duration: 0 });
|
||||
|
||||
// $('ul.staggered-list.vertical li').each(function() {
|
||||
// $(this).velocity(
|
||||
// { opacity: "1", translateY: "0"},
|
||||
// { duration: 800, delay: time, easing: [60, 25] });
|
||||
// time += 120;
|
||||
// });
|
||||
|
||||
// // Fade in and Scale
|
||||
// $('.fade-in.scale').velocity(
|
||||
// { scaleX: .4, scaleY: .4, translateX: -600},
|
||||
// { duration: 0});
|
||||
// $('.fade-in').each(function() {
|
||||
// $(this).velocity(
|
||||
// { opacity: "1", scaleX: 1, scaleY: 1, translateX: 0},
|
||||
// { duration: 800, easing: [60, 10] });
|
||||
// });
|
||||
});
|
||||
}( jQuery ));
|
||||
Vendored
-4
File diff suppressed because one or more lines are too long
-338
@@ -1,338 +0,0 @@
|
||||
/*!
|
||||
* Waves v0.6.4
|
||||
* http://fian.my.id/Waves
|
||||
*
|
||||
* Copyright 2014 Alfiana E. Sibuea and other contributors
|
||||
* Released under the MIT license
|
||||
* https://github.com/fians/Waves/blob/master/LICENSE
|
||||
*/
|
||||
|
||||
;(function(window) {
|
||||
'use strict';
|
||||
|
||||
var Waves = Waves || {};
|
||||
var $$ = document.querySelectorAll.bind(document);
|
||||
|
||||
// Find exact position of element
|
||||
function isWindow(obj) {
|
||||
return obj !== null && obj === obj.window;
|
||||
}
|
||||
|
||||
function getWindow(elem) {
|
||||
return isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView;
|
||||
}
|
||||
|
||||
function offset(elem) {
|
||||
var docElem, win,
|
||||
box = {top: 0, left: 0},
|
||||
doc = elem && elem.ownerDocument;
|
||||
|
||||
docElem = doc.documentElement;
|
||||
|
||||
if (typeof elem.getBoundingClientRect !== typeof undefined) {
|
||||
box = elem.getBoundingClientRect();
|
||||
}
|
||||
win = getWindow(doc);
|
||||
return {
|
||||
top: box.top + win.pageYOffset - docElem.clientTop,
|
||||
left: box.left + win.pageXOffset - docElem.clientLeft
|
||||
};
|
||||
}
|
||||
|
||||
function convertStyle(obj) {
|
||||
var style = '';
|
||||
|
||||
for (var a in obj) {
|
||||
if (obj.hasOwnProperty(a)) {
|
||||
style += (a + ':' + obj[a] + ';');
|
||||
}
|
||||
}
|
||||
|
||||
return style;
|
||||
}
|
||||
|
||||
var Effect = {
|
||||
|
||||
// Effect delay
|
||||
duration: 750,
|
||||
|
||||
show: function(e, element) {
|
||||
|
||||
// Disable right click
|
||||
if (e.button === 2) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var el = element || this;
|
||||
|
||||
// Create ripple
|
||||
var ripple = document.createElement('div');
|
||||
ripple.className = 'waves-ripple';
|
||||
el.appendChild(ripple);
|
||||
|
||||
// Get click coordinate and element witdh
|
||||
var pos = offset(el);
|
||||
var relativeY = (e.pageY - pos.top);
|
||||
var relativeX = (e.pageX - pos.left);
|
||||
var scale = 'scale('+((el.clientWidth / 100) * 10)+')';
|
||||
|
||||
// Support for touch devices
|
||||
if ('touches' in e) {
|
||||
relativeY = (e.touches[0].pageY - pos.top);
|
||||
relativeX = (e.touches[0].pageX - pos.left);
|
||||
}
|
||||
|
||||
// Attach data to element
|
||||
ripple.setAttribute('data-hold', Date.now());
|
||||
ripple.setAttribute('data-scale', scale);
|
||||
ripple.setAttribute('data-x', relativeX);
|
||||
ripple.setAttribute('data-y', relativeY);
|
||||
|
||||
// Set ripple position
|
||||
var rippleStyle = {
|
||||
'top': relativeY+'px',
|
||||
'left': relativeX+'px'
|
||||
};
|
||||
|
||||
ripple.className = ripple.className + ' waves-notransition';
|
||||
ripple.setAttribute('style', convertStyle(rippleStyle));
|
||||
ripple.className = ripple.className.replace('waves-notransition', '');
|
||||
|
||||
// Scale the ripple
|
||||
rippleStyle['-webkit-transform'] = scale;
|
||||
rippleStyle['-moz-transform'] = scale;
|
||||
rippleStyle['-ms-transform'] = scale;
|
||||
rippleStyle['-o-transform'] = scale;
|
||||
rippleStyle.transform = scale;
|
||||
rippleStyle.opacity = '1';
|
||||
|
||||
rippleStyle['-webkit-transition-duration'] = Effect.duration + 'ms';
|
||||
rippleStyle['-moz-transition-duration'] = Effect.duration + 'ms';
|
||||
rippleStyle['-o-transition-duration'] = Effect.duration + 'ms';
|
||||
rippleStyle['transition-duration'] = Effect.duration + 'ms';
|
||||
|
||||
rippleStyle['-webkit-transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
|
||||
rippleStyle['-moz-transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
|
||||
rippleStyle['-o-transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
|
||||
rippleStyle['transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
|
||||
|
||||
ripple.setAttribute('style', convertStyle(rippleStyle));
|
||||
},
|
||||
|
||||
hide: function(e) {
|
||||
TouchHandler.touchup(e);
|
||||
|
||||
var el = this;
|
||||
var width = el.clientWidth * 1.4;
|
||||
|
||||
// Get first ripple
|
||||
var ripple = null;
|
||||
var ripples = el.getElementsByClassName('waves-ripple');
|
||||
if (ripples.length > 0) {
|
||||
ripple = ripples[ripples.length - 1];
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
|
||||
var relativeX = ripple.getAttribute('data-x');
|
||||
var relativeY = ripple.getAttribute('data-y');
|
||||
var scale = ripple.getAttribute('data-scale');
|
||||
|
||||
// Get delay beetween mousedown and mouse leave
|
||||
var diff = Date.now() - Number(ripple.getAttribute('data-hold'));
|
||||
var delay = 350 - diff;
|
||||
|
||||
if (delay < 0) {
|
||||
delay = 0;
|
||||
}
|
||||
|
||||
// Fade out ripple after delay
|
||||
setTimeout(function() {
|
||||
var style = {
|
||||
'top': relativeY+'px',
|
||||
'left': relativeX+'px',
|
||||
'opacity': '0',
|
||||
|
||||
// Duration
|
||||
'-webkit-transition-duration': Effect.duration + 'ms',
|
||||
'-moz-transition-duration': Effect.duration + 'ms',
|
||||
'-o-transition-duration': Effect.duration + 'ms',
|
||||
'transition-duration': Effect.duration + 'ms',
|
||||
'-webkit-transform': scale,
|
||||
'-moz-transform': scale,
|
||||
'-ms-transform': scale,
|
||||
'-o-transform': scale,
|
||||
'transform': scale,
|
||||
};
|
||||
|
||||
ripple.setAttribute('style', convertStyle(style));
|
||||
|
||||
setTimeout(function() {
|
||||
try {
|
||||
el.removeChild(ripple);
|
||||
} catch(e) {
|
||||
return false;
|
||||
}
|
||||
}, Effect.duration);
|
||||
}, delay);
|
||||
},
|
||||
|
||||
// Little hack to make <input> can perform waves effect
|
||||
wrapInput: function(elements) {
|
||||
for (var a = 0; a < elements.length; a++) {
|
||||
var el = elements[a];
|
||||
|
||||
if (el.tagName.toLowerCase() === 'input') {
|
||||
var parent = el.parentNode;
|
||||
|
||||
// If input already have parent just pass through
|
||||
if (parent.tagName.toLowerCase() === 'i' && parent.className.indexOf('waves-effect') !== -1) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Put element class and style to the specified parent
|
||||
var wrapper = document.createElement('i');
|
||||
wrapper.className = el.className + ' waves-input-wrapper';
|
||||
|
||||
var elementStyle = el.getAttribute('style');
|
||||
|
||||
if (!elementStyle) {
|
||||
elementStyle = '';
|
||||
}
|
||||
|
||||
wrapper.setAttribute('style', elementStyle);
|
||||
|
||||
el.className = 'waves-button-input';
|
||||
el.removeAttribute('style');
|
||||
|
||||
// Put element as child
|
||||
parent.replaceChild(wrapper, el);
|
||||
wrapper.appendChild(el);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Disable mousedown event for 500ms during and after touch
|
||||
*/
|
||||
var TouchHandler = {
|
||||
/* uses an integer rather than bool so there's no issues with
|
||||
* needing to clear timeouts if another touch event occurred
|
||||
* within the 500ms. Cannot mouseup between touchstart and
|
||||
* touchend, nor in the 500ms after touchend. */
|
||||
touches: 0,
|
||||
allowEvent: function(e) {
|
||||
var allow = true;
|
||||
|
||||
if (e.type === 'touchstart') {
|
||||
TouchHandler.touches += 1; //push
|
||||
} else if (e.type === 'touchend' || e.type === 'touchcancel') {
|
||||
setTimeout(function() {
|
||||
if (TouchHandler.touches > 0) {
|
||||
TouchHandler.touches -= 1; //pop after 500ms
|
||||
}
|
||||
}, 500);
|
||||
} else if (e.type === 'mousedown' && TouchHandler.touches > 0) {
|
||||
allow = false;
|
||||
}
|
||||
|
||||
return allow;
|
||||
},
|
||||
touchup: function(e) {
|
||||
TouchHandler.allowEvent(e);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Delegated click handler for .waves-effect element.
|
||||
* returns null when .waves-effect element not in "click tree"
|
||||
*/
|
||||
function getWavesEffectElement(e) {
|
||||
if (TouchHandler.allowEvent(e) === false) {
|
||||
return null;
|
||||
}
|
||||
|
||||
var element = null;
|
||||
var target = e.target || e.srcElement;
|
||||
|
||||
while (target.parentElement !== null) {
|
||||
if (!(target instanceof SVGElement) && target.className.indexOf('waves-effect') !== -1) {
|
||||
element = target;
|
||||
break;
|
||||
} else if (target.classList.contains('waves-effect')) {
|
||||
element = target;
|
||||
break;
|
||||
}
|
||||
target = target.parentElement;
|
||||
}
|
||||
|
||||
return element;
|
||||
}
|
||||
|
||||
/**
|
||||
* Bubble the click and show effect if .waves-effect elem was found
|
||||
*/
|
||||
function showEffect(e) {
|
||||
var element = getWavesEffectElement(e);
|
||||
|
||||
if (element !== null) {
|
||||
Effect.show(e, element);
|
||||
|
||||
if ('ontouchstart' in window) {
|
||||
element.addEventListener('touchend', Effect.hide, false);
|
||||
element.addEventListener('touchcancel', Effect.hide, false);
|
||||
}
|
||||
|
||||
element.addEventListener('mouseup', Effect.hide, false);
|
||||
element.addEventListener('mouseleave', Effect.hide, false);
|
||||
}
|
||||
}
|
||||
|
||||
Waves.displayEffect = function(options) {
|
||||
options = options || {};
|
||||
|
||||
if ('duration' in options) {
|
||||
Effect.duration = options.duration;
|
||||
}
|
||||
|
||||
//Wrap input inside <i> tag
|
||||
Effect.wrapInput($$('.waves-effect'));
|
||||
|
||||
if ('ontouchstart' in window) {
|
||||
document.body.addEventListener('touchstart', showEffect, false);
|
||||
}
|
||||
|
||||
document.body.addEventListener('mousedown', showEffect, false);
|
||||
};
|
||||
|
||||
/**
|
||||
* Attach Waves to an input element (or any element which doesn't
|
||||
* bubble mouseup/mousedown events).
|
||||
* Intended to be used with dynamically loaded forms/inputs, or
|
||||
* where the user doesn't want a delegated click handler.
|
||||
*/
|
||||
Waves.attach = function(element) {
|
||||
//FUTURE: automatically add waves classes and allow users
|
||||
// to specify them with an options param? Eg. light/classic/button
|
||||
if (element.tagName.toLowerCase() === 'input') {
|
||||
Effect.wrapInput([element]);
|
||||
element = element.parentElement;
|
||||
}
|
||||
|
||||
if ('ontouchstart' in window) {
|
||||
element.addEventListener('touchstart', showEffect, false);
|
||||
}
|
||||
|
||||
element.addEventListener('mousedown', showEffect, false);
|
||||
};
|
||||
|
||||
window.Waves = Waves;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
Waves.displayEffect();
|
||||
}, false);
|
||||
|
||||
})(window);
|
||||
Reference in New Issue
Block a user