| @@ -0,0 +1,40 @@ | ||
| .withripple { | ||
| position: relative; | ||
| } | ||
| .ripple-wrapper { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| z-index: 1; | ||
| width: 100%; | ||
| height: 100%; | ||
| overflow: hidden; | ||
| border-radius: 2px; | ||
| } | ||
| .ripple { | ||
| position: absolute; | ||
| width: 20px; | ||
| height: 20px; | ||
| margin-left: -10px; | ||
| margin-top: -10px; | ||
| border-radius: 100%; | ||
| background-color: rgba(0, 0, 0, 0.05); | ||
| -webkit-transform: scale(1); | ||
| -ms-transform: scale(1); | ||
| transform: scale(1); | ||
| -webkit-transform-origin: 50%; | ||
| -ms-transform-origin: 50%; | ||
| transform-origin: 50%; | ||
| opacity: 0; | ||
| pointer-events: none; | ||
| } | ||
| .ripple.ripple-on { | ||
| -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; | ||
| transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; | ||
| opacity: 1; | ||
| } | ||
| .ripple.ripple-out { | ||
| -webkit-transition: opacity 0.1s linear 0s !important; | ||
| transition: opacity 0.1s linear 0s !important; | ||
| opacity: 0; | ||
| } |
| @@ -0,0 +1,27 @@ | ||
| // Copyright (c) 2014 The Polymer Authors. 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 Google Inc. nor the names of its | ||
| // 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. |
| @@ -0,0 +1,84 @@ | ||
| /* globals ripples */ | ||
|
|
||
| $(function (){ | ||
|
|
||
| if (typeof ripples == "object") { | ||
| ripples.init(".btn:not(.btn-link), .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"); | ||
| } | ||
|
|
||
| var initInputs = function() { | ||
| // Add fake-checkbox to material checkboxes | ||
| $(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>"); | ||
|
|
||
| // Add fake-radio to material radios | ||
| $(".radio > label > input").not(".bs-material").addClass("bs-material").after("<span class=circle></span><span class=check></span>"); | ||
|
|
||
| // Add elements for material inputs | ||
| $("input.form-control, textarea.form-control, select.form-control").not(".bs-material").each( function() { | ||
| if ($(this).is(".bs-material")) { return; } | ||
| $(this).wrap("<div class=form-control-wrapper></div>"); | ||
| $(this).after("<span class=material-input></span>"); | ||
| if ($(this).hasClass("floating-label")) { | ||
| var placeholder = $(this).attr("placeholder"); | ||
| $(this).attr("placeholder", null).removeClass("floating-label"); | ||
| $(this).after("<div class=floating-label>" + placeholder + "</div>"); | ||
| } | ||
| if ($(this).is(":empty") || $(this).val() === null || $(this).val() == "undefined" || $(this).val() === "") { | ||
| $(this).addClass("empty"); | ||
| } | ||
|
|
||
| if ($(this).parent().next().is("[type=file]")) { | ||
| $(this).parent().addClass("fileinput"); | ||
| var $input = $(this).parent().next().detach(); | ||
| $(this).after($input); | ||
| } | ||
| }); | ||
|
|
||
| }; | ||
| initInputs(); | ||
|
|
||
| // Support for "arrive.js" to dynamically detect creation of elements | ||
| // include it before this script to take advantage of this feature | ||
| // https://github.com/uzairfarooq/arrive/ | ||
| if (document.arrive) { | ||
| document.arrive("input, textarea, select", function() { | ||
| initInputs(); | ||
| }); | ||
| } | ||
|
|
||
| $(document).on("change", ".checkbox input", function() { | ||
| $(this).blur(); | ||
| }); | ||
|
|
||
| $(document).on("keyup change", ".form-control", function() { | ||
| var self = $(this); | ||
| setTimeout(function() { | ||
| if (self.val() === "") { | ||
| self.addClass("empty"); | ||
| } else { | ||
| self.removeClass("empty"); | ||
| } | ||
| }, 1); | ||
| }); | ||
| $(document) | ||
| .on("focus", ".form-control-wrapper.fileinput", function() { | ||
| $(this).find("input").addClass("focus"); | ||
| }) | ||
| .on("blur", ".form-control-wrapper.fileinput", function() { | ||
| $(this).find("input").removeClass("focus"); | ||
| }) | ||
| .on("change", ".form-control-wrapper.fileinput [type=file]", function() { | ||
| var value = ""; | ||
| $.each($(this)[0].files, function(i, file) { | ||
| console.log(file); | ||
| value += file.name + ", "; | ||
| }); | ||
| value = value.substring(0, value.length - 2); | ||
| if (value) { | ||
| $(this).prev().removeClass("empty"); | ||
| } else { | ||
| $(this).prev().addClass("empty"); | ||
| } | ||
| $(this).prev().val(value); | ||
| }); | ||
| }); |
| @@ -0,0 +1,37 @@ | ||
| /* | ||
| * Copyright 2015 erik. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| $(document).ready(function () { | ||
| // cache the window object | ||
| $window = $(window); | ||
|
|
||
| $('section[data-type="background"]').each(function () { | ||
| // declare the variable to affect the defined data-type | ||
| var $scroll = $(this); | ||
|
|
||
| $(window).scroll(function () { | ||
| // HTML5 proves useful for helping with creating JS functions! | ||
| // also, negative value because we're scrolling upwards | ||
| var yPos = -($window.scrollTop() / $scroll.data('speed')); | ||
|
|
||
| // background position | ||
| var coords = '50% ' + yPos + 'px'; | ||
|
|
||
| // move the background | ||
| $scroll.css({backgroundPosition: coords}); | ||
| }); // end window scroll | ||
| }); // end section function | ||
| }); // close out script |
| @@ -0,0 +1,138 @@ | ||
| /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */ | ||
| /* globals CustomEvent */ | ||
|
|
||
| window.ripples = { | ||
| init : function(withRipple) { | ||
| "use strict"; | ||
|
|
||
| // Cross browser matches function | ||
| function matchesSelector(domElement, selector) { | ||
| var matches = domElement.matches || domElement.matchesSelector || domElement.webkitMatchesSelector || | ||
| domElement.mozMatchesSelector || | ||
| domElement.msMatchesSelector || domElement.oMatchesSelector; | ||
| return matches.call(domElement, selector); | ||
| } | ||
|
|
||
| // animations time | ||
| var rippleOutTime = 100, | ||
| rippleStartTime = 500; | ||
|
|
||
| // Helper to bind events on dynamically created elements | ||
| var bind = function(event, selector, callback) { | ||
| document.addEventListener(event, function(e) { | ||
| var target = (typeof e.detail !== "number") ? e.detail : e.target; | ||
|
|
||
| if (matchesSelector(target, selector)) { | ||
| callback(e, target); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| var rippleStart = function(e, target) { | ||
|
|
||
| // Init variables | ||
| var $rippleWrapper = target, | ||
| $el = $rippleWrapper.parentNode, | ||
| $ripple = document.createElement("div"), | ||
| elPos = $el.getBoundingClientRect(), | ||
| mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top}, | ||
| scale = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")", | ||
| rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}), | ||
| refreshElementStyle; | ||
|
|
||
| $ripplecache = $ripple; | ||
|
|
||
| // Set ripple class | ||
| $ripple.className = "ripple"; | ||
|
|
||
| // Move ripple to the mouse position | ||
| $ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;"); | ||
|
|
||
| // Insert new ripple into ripple wrapper | ||
| $rippleWrapper.appendChild($ripple); | ||
|
|
||
| // Make sure the ripple has the class applied (ugly hack but it works) | ||
| refreshElementStyle = window.getComputedStyle($ripple).opacity; | ||
|
|
||
| // Let other funtions know that this element is animating | ||
| $ripple.dataset.animating = 1; | ||
|
|
||
| // Set scale value to ripple and animate it | ||
| $ripple.className = "ripple ripple-on"; | ||
| $ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";")); | ||
|
|
||
| // This function is called when the animation is finished | ||
| setTimeout(function() { | ||
|
|
||
| // Let know to other functions that this element has finished the animation | ||
| $ripple.dataset.animating = 0; | ||
| document.dispatchEvent(rippleEnd); | ||
|
|
||
| }, rippleStartTime); | ||
|
|
||
| }; | ||
|
|
||
| var rippleOut = function($ripple) { | ||
| // Clear previous animation | ||
| $ripple.className = "ripple ripple-on ripple-out"; | ||
|
|
||
| // Let ripple fade out (with CSS) | ||
| setTimeout(function() { | ||
| $ripple.remove(); | ||
| }, rippleOutTime); | ||
| }; | ||
|
|
||
| // Helper, need to know if mouse is up or down | ||
| var mouseDown = false; | ||
| document.body.onmousedown = function() { | ||
| mouseDown = true; | ||
| }; | ||
| document.body.onmouseup = function() { | ||
| mouseDown = false; | ||
| }; | ||
|
|
||
| // Append ripple wrapper if not exists already | ||
| var rippleInit = function(e, target) { | ||
|
|
||
| if (target.getElementsByClassName("ripple-wrapper").length === 0) { | ||
| target.className += " withripple"; | ||
| var $rippleWrapper = document.createElement("div"); | ||
| $rippleWrapper.className = "ripple-wrapper"; | ||
| target.appendChild($rippleWrapper); | ||
| } | ||
|
|
||
| }; | ||
|
|
||
|
|
||
| var $ripplecache; | ||
|
|
||
| // Events handler | ||
| // init RippleJS and start ripple effect on mousedown | ||
| bind("mouseover", withRipple, rippleInit); | ||
|
|
||
| // start ripple effect on mousedown | ||
| bind("mousedown", ".ripple-wrapper", function(e, $ripple) { | ||
| // Start ripple only on left or middle mouse click | ||
| if (e.which === 1 || e.which === 2) { | ||
| rippleStart(e, $ripple); | ||
| } | ||
| }); | ||
| // if animation ends and user is not holding mouse then destroy the ripple | ||
| bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) { | ||
|
|
||
| var $ripples = $ripple.parentNode.getElementsByClassName("ripple"); | ||
|
|
||
| if (!mouseDown || ( $ripples[0] == $ripple && $ripples.length > 1)) { | ||
| rippleOut($ripple); | ||
| } | ||
| }); | ||
| // Destroy ripple when mouse is not holded anymore if the ripple still exists | ||
| bind("mouseup", ".ripple-wrapper", function() { | ||
| var $ripple = $ripplecache; | ||
| if ($ripple.dataset.animating != 1) { | ||
| rippleOut($ripple); | ||
| } | ||
| }); | ||
|
|
||
| } | ||
| }; |
