mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-10 19:57:13 +03:00
Added the template folder.
The index.html file works. Copying the template folder, or using the structure of this folder, a new project can be started. This file includes the compiled CSS and the material JS file, alongwith the ripples CSS and JS files.
This commit is contained in:
icyflame
parent
8767b5425a
commit
fd93d74711
48
template/index.html
Normal file
48
template/index.html
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<link href="http://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="https://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