mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-09-21 19:39:10 +03:00
Merge remote-tracking branch 'origin/master'
This commit is contained in:
FezVrasta
commit
04de0f6023
|
|
@ -12,6 +12,11 @@ Check out [the demo at this link](http://fezvrasta.github.io/bootstrap-material-
|
|||
|
||||
bower install bootstrap-material-design --save
|
||||
|
||||
## Getting started
|
||||
|
||||
Navigate to the `template/` folder in this repository, and you will see the `index.html` file, which has the CSS include statements, in the `head` section and the JS includes just before `body` section closes.
|
||||
|
||||
You need to copy the `material/` folder to the root of your project, ensuring that all the files in your project can access the files through the relative URL, supplied in the CSS and the JS includes.
|
||||
|
||||
## Features
|
||||
|
||||
|
|
|
|||
48
template/index.html
Normal file
48
template/index.html
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="material/ripples.css" rel="stylesheet">
|
||||
<link href="material/material.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Your site -->
|
||||
|
||||
<h1>
|
||||
You can add your site here.
|
||||
</h1>
|
||||
|
||||
<h2>
|
||||
To ensure that material-design theme is working, check out the buttons below.
|
||||
</h2>
|
||||
|
||||
<h3 class="text-muted">
|
||||
If you can see the ripple effect on clicking them, then you are good to go!
|
||||
</h3>
|
||||
|
||||
|
||||
<p class="bs-component">
|
||||
<a href="javascript:void(0)" class="btn btn-default">Default</a>
|
||||
<a href="javascript:void(0)" class="btn btn-primary">Primary</a>
|
||||
<a href="javascript:void(0)" class="btn btn-success">Success</a>
|
||||
<a href="javascript:void(0)" class="btn btn-info">Info</a>
|
||||
<a href="javascript:void(0)" class="btn btn-warning">Warning</a>
|
||||
<a href="javascript:void(0)" class="btn btn-danger">Danger</a>
|
||||
<a href="javascript:void(0)" class="btn btn-link">Link</a>
|
||||
</p>
|
||||
|
||||
<!-- Your site ends -->
|
||||
|
||||
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
|
||||
|
||||
<script src="material/ripples.js"></script>
|
||||
<script src="material/material.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
3247
template/material/material.css
Normal file
3247
template/material/material.css
Normal file
File diff suppressed because it is too large
Load Diff
84
template/material/material.js
Normal file
84
template/material/material.js
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
/* globals ripples */
|
||||
|
||||
$(function (){
|
||||
|
||||
if (ripples) {
|
||||
ripples.init(".btn:not(.btn-link), .navbar a, .nav-tabs a, .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);
|
||||
});
|
||||
});
|
||||
41
template/material/ripples.css
Normal file
41
template/material/ripples.css
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
/* Generated by less 1.7.5 */
|
||||
.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;
|
||||
}
|
||||
130
template/material/ripples.js
Normal file
130
template/material/ripples.js
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
|
||||
/* globals CustomEvent */
|
||||
|
||||
var ripples = {
|
||||
init : function(withRipple) {
|
||||
"use strict";
|
||||
|
||||
// Cross browser matches function
|
||||
function matchesSelector(dom_element, selector) {
|
||||
var matches = dom_element.matches || dom_element.matchesSelector || dom_element.webkitMatchesSelector || dom_element.mozMatchesSelector || dom_element.msMatchesSelector || dom_element.oMatchesSelector;
|
||||
return matches.call(dom_element, 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) {
|
||||
console.log($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);
|
||||
|
||||
console.log(withRipple);
|
||||
// start ripple effect on mousedown
|
||||
bind("mousedown", ".ripple-wrapper", rippleStart);
|
||||
// if animation ends and user is not holding mouse then destroy the ripple
|
||||
bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) {
|
||||
if (!mouseDown) {
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user