Neues Initialrelease mit IonicMaterial
This commit is contained in:
Carsten Hilmer
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "angular-material-fabSpeedDial",
|
||||
"version": "0.10.0",
|
||||
"dependencies": {
|
||||
"angular-material-core": "0.10.0",
|
||||
"angular-material-fabTrigger": "0.10.0",
|
||||
"angular-material-fabActions": "0.10.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
/*!
|
||||
* Angular Material Design
|
||||
* https://github.com/angular/material
|
||||
* @license MIT
|
||||
* v0.10.0
|
||||
*/
|
||||
/* mixin definition ; sets LTR and RTL within the same style call */
|
||||
md-fab-speed-dial {
|
||||
position: relative;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
/*
|
||||
* Handle the animations
|
||||
*/ }
|
||||
md-fab-speed-dial .md-css-variables {
|
||||
z-index: 20; }
|
||||
md-fab-speed-dial.md-is-open .md-fab-action-item {
|
||||
visibility: visible; }
|
||||
md-fab-speed-dial md-fab-actions {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
height: 100%; }
|
||||
md-fab-speed-dial md-fab-actions .md-fab-action-item {
|
||||
visibility: hidden;
|
||||
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
|
||||
md-fab-speed-dial.md-down {
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column; }
|
||||
md-fab-speed-dial.md-down md-fab-trigger {
|
||||
-webkit-order: 1;
|
||||
-ms-flex-order: 1;
|
||||
order: 1; }
|
||||
md-fab-speed-dial.md-down md-fab-actions {
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-order: 2;
|
||||
-ms-flex-order: 2;
|
||||
order: 2; }
|
||||
md-fab-speed-dial.md-up {
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column; }
|
||||
md-fab-speed-dial.md-up md-fab-trigger {
|
||||
-webkit-order: 2;
|
||||
-ms-flex-order: 2;
|
||||
order: 2; }
|
||||
md-fab-speed-dial.md-up md-fab-actions {
|
||||
-webkit-flex-direction: column-reverse;
|
||||
-ms-flex-direction: column-reverse;
|
||||
flex-direction: column-reverse;
|
||||
-webkit-order: 1;
|
||||
-ms-flex-order: 1;
|
||||
order: 1; }
|
||||
md-fab-speed-dial.md-left {
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row; }
|
||||
md-fab-speed-dial.md-left md-fab-trigger {
|
||||
-webkit-order: 2;
|
||||
-ms-flex-order: 2;
|
||||
order: 2; }
|
||||
md-fab-speed-dial.md-left md-fab-actions {
|
||||
-webkit-flex-direction: row-reverse;
|
||||
-ms-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
-webkit-order: 1;
|
||||
-ms-flex-order: 1;
|
||||
order: 1; }
|
||||
md-fab-speed-dial.md-left md-fab-actions .md-fab-action-item {
|
||||
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
|
||||
md-fab-speed-dial.md-right {
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row; }
|
||||
md-fab-speed-dial.md-right md-fab-trigger {
|
||||
-webkit-order: 1;
|
||||
-ms-flex-order: 1;
|
||||
order: 1; }
|
||||
md-fab-speed-dial.md-right md-fab-actions {
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-order: 2;
|
||||
-ms-flex-order: 2;
|
||||
order: 2; }
|
||||
md-fab-speed-dial.md-right md-fab-actions .md-fab-action-item {
|
||||
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
|
||||
md-fab-speed-dial.md-scale .md-fab-action-item {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
|
||||
transition-duration: 0.14286s; }
|
||||
235
www/lib/angular-material/modules/js/fabSpeedDial/fabSpeedDial.js
vendored
Normal file
235
www/lib/angular-material/modules/js/fabSpeedDial/fabSpeedDial.js
vendored
Normal file
@@ -0,0 +1,235 @@
|
||||
/*!
|
||||
* Angular Material Design
|
||||
* https://github.com/angular/material
|
||||
* @license MIT
|
||||
* v0.10.0
|
||||
*/
|
||||
(function( window, angular, undefined ){
|
||||
"use strict";
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('material.components.fabSpeedDial', [
|
||||
'material.core',
|
||||
'material.components.fabTrigger',
|
||||
'material.components.fabActions'
|
||||
])
|
||||
.directive('mdFabSpeedDial', MdFabSpeedDialDirective)
|
||||
.animation('.md-fling', MdFabSpeedDialFlingAnimation)
|
||||
.animation('.md-scale', MdFabSpeedDialScaleAnimation);
|
||||
|
||||
/**
|
||||
* @ngdoc directive
|
||||
* @name mdFabSpeedDial
|
||||
* @module material.components.fabSpeedDial
|
||||
*
|
||||
* @restrict E
|
||||
*
|
||||
* @description
|
||||
* The `<md-fab-speed-dial>` directive is used to present a series of popup elements (usually
|
||||
* `<md-button>`s) for quick access to common actions.
|
||||
*
|
||||
* There are currently two animations available by applying one of the following classes to
|
||||
* the component:
|
||||
*
|
||||
* - `md-fling` - The speed dial items appear from underneath the trigger and move into their
|
||||
* appropriate positions.
|
||||
* - `md-scale` - The speed dial items appear in their proper places by scaling from 0% to 100%.
|
||||
*
|
||||
* @usage
|
||||
* <hljs lang="html">
|
||||
* <md-fab-speed-dial direction="up" class="md-fling">
|
||||
* <md-fab-trigger>
|
||||
* <md-button aria-label="Add..."><md-icon icon="/img/icons/plus.svg"></md-icon></md-button>
|
||||
* </md-fab-trigger>
|
||||
*
|
||||
* <md-fab-actions>
|
||||
* <md-button aria-label="Add User">
|
||||
* <md-icon icon="/img/icons/user.svg"></md-icon>
|
||||
* </md-button>
|
||||
*
|
||||
* <md-button aria-label="Add Group">
|
||||
* <md-icon icon="/img/icons/group.svg"></md-icon>
|
||||
* </md-button>
|
||||
* </md-fab-actions>
|
||||
* </md-fab-speed-dial>
|
||||
* </hljs>
|
||||
*
|
||||
* @param {string=} md-direction From which direction you would like the speed dial to appear
|
||||
* relative to the trigger element.
|
||||
* @param {expression=} md-open Programmatically control whether or not the speed-dial is visible.
|
||||
*/
|
||||
function MdFabSpeedDialDirective() {
|
||||
FabSpeedDialController.$inject = ["$scope", "$element", "$animate"];
|
||||
return {
|
||||
restrict: 'E',
|
||||
|
||||
scope: {
|
||||
direction: '@?mdDirection',
|
||||
isOpen: '=?mdOpen'
|
||||
},
|
||||
|
||||
bindToController: true,
|
||||
controller: FabSpeedDialController,
|
||||
controllerAs: 'vm',
|
||||
|
||||
link: FabSpeedDialLink
|
||||
};
|
||||
|
||||
function FabSpeedDialLink(scope, element) {
|
||||
// Prepend an element to hold our CSS variables so we can use them in the animations below
|
||||
element.prepend('<div class="md-css-variables"></div>');
|
||||
}
|
||||
|
||||
function FabSpeedDialController($scope, $element, $animate) {
|
||||
var vm = this;
|
||||
|
||||
// Define our open/close functions
|
||||
// Note: Used by fabTrigger and fabActions directives
|
||||
vm.open = function() {
|
||||
$scope.$apply('vm.isOpen = true');
|
||||
};
|
||||
|
||||
vm.close = function() {
|
||||
$scope.$apply('vm.isOpen = false');
|
||||
};
|
||||
|
||||
setupDefaults();
|
||||
setupListeners();
|
||||
setupWatchers();
|
||||
|
||||
// Set our default variables
|
||||
function setupDefaults() {
|
||||
// Set the default direction to 'down' if none is specified
|
||||
vm.direction = vm.direction || 'down';
|
||||
|
||||
// Set the default to be closed
|
||||
vm.isOpen = vm.isOpen || false;
|
||||
}
|
||||
|
||||
// Setup our event listeners
|
||||
function setupListeners() {
|
||||
$element.on('mouseenter', vm.open);
|
||||
$element.on('mouseleave', vm.close);
|
||||
}
|
||||
|
||||
// Setup our watchers
|
||||
function setupWatchers() {
|
||||
// Watch for changes to the direction and update classes/attributes
|
||||
$scope.$watch('vm.direction', function(newDir, oldDir) {
|
||||
// Add the appropriate classes so we can target the direction in the CSS
|
||||
$animate.removeClass($element, 'md-' + oldDir);
|
||||
$animate.addClass($element, 'md-' + newDir);
|
||||
});
|
||||
|
||||
|
||||
// Watch for changes to md-open
|
||||
$scope.$watch('vm.isOpen', function(isOpen) {
|
||||
var toAdd = isOpen ? 'md-is-open' : '';
|
||||
var toRemove = isOpen ? '' : 'md-is-open';
|
||||
|
||||
$animate.setClass($element, toAdd, toRemove);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function MdFabSpeedDialFlingAnimation() {
|
||||
function runAnimation(element) {
|
||||
var el = element[0];
|
||||
var ctrl = element.controller('mdFabSpeedDial');
|
||||
var items = el.querySelectorAll('.md-fab-action-item');
|
||||
|
||||
// Grab our element which stores CSS variables
|
||||
var variablesElement = el.querySelector('.md-css-variables');
|
||||
|
||||
// Setup JS variables based on our CSS variables
|
||||
var startZIndex = variablesElement.style.zIndex;
|
||||
|
||||
// Always reset the items to their natural position/state
|
||||
angular.forEach(items, function(item, index) {
|
||||
var styles = item.style;
|
||||
|
||||
styles.transform = '';
|
||||
styles.transitionDelay = '';
|
||||
styles.opacity = 1;
|
||||
|
||||
// Make the items closest to the trigger have the highest z-index
|
||||
item.style.zIndex = (items.length - index) + startZIndex;
|
||||
});
|
||||
|
||||
// If the control is closed, hide the items behind the trigger
|
||||
if (!ctrl.isOpen) {
|
||||
angular.forEach(items, function(item, index) {
|
||||
var newPosition, axis;
|
||||
|
||||
switch (ctrl.direction) {
|
||||
case 'up':
|
||||
newPosition = item.scrollHeight * (index + 1);
|
||||
axis = 'Y';
|
||||
break;
|
||||
case 'down':
|
||||
newPosition = -item.scrollHeight * (index + 1);
|
||||
axis = 'Y';
|
||||
break;
|
||||
case 'left':
|
||||
newPosition = item.scrollWidth * (index + 1);
|
||||
axis = 'X';
|
||||
break;
|
||||
case 'right':
|
||||
newPosition = -item.scrollWidth * (index + 1);
|
||||
axis = 'X';
|
||||
break;
|
||||
}
|
||||
|
||||
item.style.transform = 'translate' + axis + '(' + newPosition + 'px)';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
addClass: function(element, className, done) {
|
||||
if (element.hasClass('md-fling')) {
|
||||
runAnimation(element);
|
||||
}
|
||||
},
|
||||
removeClass: function(element, className, done) {
|
||||
runAnimation(element);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function MdFabSpeedDialScaleAnimation() {
|
||||
var delay = 65;
|
||||
|
||||
function runAnimation(element) {
|
||||
var el = element[0];
|
||||
var ctrl = element.controller('mdFabSpeedDial');
|
||||
var items = el.querySelectorAll('.md-fab-action-item');
|
||||
|
||||
// Always reset the items to their natural position/state
|
||||
angular.forEach(items, function(item, index) {
|
||||
var styles = item.style,
|
||||
offsetDelay = index * delay;
|
||||
|
||||
styles.opacity = ctrl.isOpen ? 1 : 0;
|
||||
styles.transform = ctrl.isOpen ? 'scale(1)' : 'scale(0)';
|
||||
styles.transitionDelay = (ctrl.isOpen ? offsetDelay : (items.length - offsetDelay)) + 'ms';
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
addClass: function(element, className, done) {
|
||||
runAnimation(element);
|
||||
},
|
||||
|
||||
removeClass: function(element, className, done) {
|
||||
runAnimation(element);
|
||||
}
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
})(window, window.angular);
|
||||
6
www/lib/angular-material/modules/js/fabSpeedDial/fabSpeedDial.min.css
vendored
Normal file
6
www/lib/angular-material/modules/js/fabSpeedDial/fabSpeedDial.min.css
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
/*!
|
||||
* Angular Material Design
|
||||
* https://github.com/angular/material
|
||||
* @license MIT
|
||||
* v0.10.0
|
||||
*/md-fab-speed-dial{position:relative;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}md-fab-speed-dial .md-css-variables{z-index:20}md-fab-speed-dial.md-is-open .md-fab-action-item{visibility:visible}md-fab-speed-dial md-fab-actions{display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%}md-fab-speed-dial md-fab-actions .md-fab-action-item{visibility:hidden;transition:all .3s cubic-bezier(.55,0,.55,.2)}md-fab-speed-dial.md-down{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}md-fab-speed-dial.md-down md-fab-trigger{-webkit-order:1;-ms-flex-order:1;order:1}md-fab-speed-dial.md-down md-fab-actions{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-order:2;-ms-flex-order:2;order:2}md-fab-speed-dial.md-up{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}md-fab-speed-dial.md-up md-fab-trigger{-webkit-order:2;-ms-flex-order:2;order:2}md-fab-speed-dial.md-up md-fab-actions{-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;-webkit-order:1;-ms-flex-order:1;order:1}md-fab-speed-dial.md-left{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}md-fab-speed-dial.md-left md-fab-trigger{-webkit-order:2;-ms-flex-order:2;order:2}md-fab-speed-dial.md-left md-fab-actions{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-order:1;-ms-flex-order:1;order:1}md-fab-speed-dial.md-left md-fab-actions .md-fab-action-item{transition:all .3s cubic-bezier(.55,0,.55,.2)}md-fab-speed-dial.md-right{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}md-fab-speed-dial.md-right md-fab-trigger{-webkit-order:1;-ms-flex-order:1;order:1}md-fab-speed-dial.md-right md-fab-actions{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-order:2;-ms-flex-order:2;order:2}md-fab-speed-dial.md-right md-fab-actions .md-fab-action-item{transition:all .3s cubic-bezier(.55,0,.55,.2)}md-fab-speed-dial.md-scale .md-fab-action-item{opacity:0;-webkit-transform:scale(0);transform:scale(0);transition:all .3s cubic-bezier(.55,0,.55,.2);transition-duration:.14286s}
|
||||
7
www/lib/angular-material/modules/js/fabSpeedDial/fabSpeedDial.min.js
vendored
Normal file
7
www/lib/angular-material/modules/js/fabSpeedDial/fabSpeedDial.min.js
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* Angular Material Design
|
||||
* https://github.com/angular/material
|
||||
* @license MIT
|
||||
* v0.10.0
|
||||
*/
|
||||
!function(n,e,i){"use strict";!function(){function n(){function n(n,e){e.prepend('<div class="md-css-variables"></div>')}function e(n,e,i){function t(){s.direction=s.direction||"down",s.isOpen=s.isOpen||!1}function o(){e.on("mouseenter",s.open),e.on("mouseleave",s.close)}function a(){n.$watch("vm.direction",function(n,t){i.removeClass(e,"md-"+t),i.addClass(e,"md-"+n)}),n.$watch("vm.isOpen",function(n){var t=n?"md-is-open":"",o=n?"":"md-is-open";i.setClass(e,t,o)})}var s=this;s.open=function(){n.$apply("vm.isOpen = true")},s.close=function(){n.$apply("vm.isOpen = false")},t(),o(),a()}return e.$inject=["$scope","$element","$animate"],{restrict:"E",scope:{direction:"@?mdDirection",isOpen:"=?mdOpen"},bindToController:!0,controller:e,controllerAs:"vm",link:n}}function i(){function n(n){var i=n[0],t=n.controller("mdFabSpeedDial"),o=i.querySelectorAll(".md-fab-action-item"),a=i.querySelector(".md-css-variables"),s=a.style.zIndex;e.forEach(o,function(n,e){var i=n.style;i.transform="",i.transitionDelay="",i.opacity=1,n.style.zIndex=o.length-e+s}),t.isOpen||e.forEach(o,function(n,e){var i,o;switch(t.direction){case"up":i=n.scrollHeight*(e+1),o="Y";break;case"down":i=-n.scrollHeight*(e+1),o="Y";break;case"left":i=n.scrollWidth*(e+1),o="X";break;case"right":i=-n.scrollWidth*(e+1),o="X"}n.style.transform="translate"+o+"("+i+"px)"})}return{addClass:function(e,i,t){e.hasClass("md-fling")&&n(e)},removeClass:function(e,i,t){n(e)}}}function t(){function n(n){var t=n[0],o=n.controller("mdFabSpeedDial"),a=t.querySelectorAll(".md-fab-action-item");e.forEach(a,function(n,e){var t=n.style,s=e*i;t.opacity=o.isOpen?1:0,t.transform=o.isOpen?"scale(1)":"scale(0)",t.transitionDelay=(o.isOpen?s:a.length-s)+"ms"})}var i=65;return{addClass:function(e,i,t){n(e)},removeClass:function(e,i,t){n(e)}}}e.module("material.components.fabSpeedDial",["material.core","material.components.fabTrigger","material.components.fabActions"]).directive("mdFabSpeedDial",n).animation(".md-fling",i).animation(".md-scale",t)}()}(window,window.angular);
|
||||
Reference in New Issue
Block a user