Raataar/Ionic-Material
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

ionic-Material Design , Codecanyon

Browse Source
This commit is contained in:
Carsten Hilmer
2016-08-22 12:59:56 +02:00
parent 7cd84fe179
commit 92601ec169
1440 changed files with 482763 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
IonicMaterialDesign/www/lib/angular-material/modules/js/tooltip/bower.json Normal file
View File

@@ -0,0 +1,7 @@
{
"name": "angular-material-tooltip",
"version": "0.10.0",
"dependencies": {
"angular-material-core": "0.10.0"
}
}

11
IonicMaterialDesign/www/lib/angular-material/modules/js/tooltip/tooltip-default-theme.css Normal file
View File

@@ -0,0 +1,11 @@
/*!
* 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-tooltip.md-THEME_NAME-theme {
color: '{{background-A100}}'; }
md-tooltip.md-THEME_NAME-theme .md-background {
background-color: '{{foreground-2}}'; }

6
IonicMaterialDesign/www/lib/angular-material/modules/js/tooltip/tooltip-default-theme.min.css vendored Normal file
View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.10.0
*/md-tooltip.md-THEME_NAME-theme{color:'{{background-A100}}'}md-tooltip.md-THEME_NAME-theme .md-background{background-color:'{{foreground-2}}'}

72
IonicMaterialDesign/www/lib/angular-material/modules/js/tooltip/tooltip.css Normal file
View File

@@ -0,0 +1,72 @@
/*!
* 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-tooltip {
position: absolute;
z-index: 100;
overflow: hidden;
pointer-events: none;
border-radius: 4px;
font-weight: 500;
font-size: 14px; }
@media screen and (min-width: 600px) {
md-tooltip {
font-size: 10px; } }
md-tooltip .md-background {
position: absolute;
border-radius: 50%;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
opacity: 1; }
md-tooltip .md-background.md-show-add {
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
opacity: 0; }
md-tooltip .md-background.md-show, md-tooltip .md-background.md-show-add-active {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
opacity: 1; }
md-tooltip .md-background.md-show-remove {
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
md-tooltip .md-background.md-show-remove.md-show-remove-active {
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
opacity: 0; }
md-tooltip .md-content {
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: transparent;
opacity: 0;
height: 32px;
line-height: 32px;
padding-left: 16px;
padding-right: 16px; }
@media screen and (min-width: 600px) {
md-tooltip .md-content {
height: 22px;
line-height: 22px;
padding-left: 8px;
padding-right: 8px; } }
md-tooltip .md-content.md-show-add {
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
opacity: 0; }
md-tooltip .md-content.md-show, md-tooltip .md-content.md-show-add-active {
opacity: 1; }
md-tooltip .md-content.md-show-remove {
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
md-tooltip .md-content.md-show-remove.md-show-remove-active {
opacity: 0; }
md-tooltip.md-hide {
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
md-tooltip.md-show {
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
pointer-events: auto;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }

268
IonicMaterialDesign/www/lib/angular-material/modules/js/tooltip/tooltip.js vendored Normal file
View File

@@ -0,0 +1,268 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.10.0
*/
(function( window, angular, undefined ){
"use strict";
/**
* @ngdoc module
* @name material.components.tooltip
*/
angular
.module('material.components.tooltip', [ 'material.core' ])
.directive('mdTooltip', MdTooltipDirective);
/**
* @ngdoc directive
* @name mdTooltip
* @module material.components.tooltip
* @description
* Tooltips are used to describe elements that are interactive and primarily graphical (not textual).
*
* Place a `<md-tooltip>` as a child of the element it describes.
*
* A tooltip will activate when the user focuses, hovers over, or touches the parent.
*
* @usage
* <hljs lang="html">
* <md-button class="md-fab md-accent" aria-label="Play">
* <md-tooltip>
* Play Music
* </md-tooltip>
* <md-icon icon="img/icons/ic_play_arrow_24px.svg"></md-icon>
* </md-button>
* </hljs>
*
* @param {expression=} md-visible Boolean bound to whether the tooltip is
* currently visible.
* @param {number=} md-delay How many milliseconds to wait to show the tooltip after the user focuses, hovers, or touches the parent. Defaults to 400ms.
* @param {string=} md-direction Which direction would you like the tooltip to go? Supports left, right, top, and bottom. Defaults to bottom.
* @param {boolean=} md-autohide If present or provided with a boolean value, the tooltip will hide on mouse leave, regardless of focus
*/
function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdTheming, $rootElement,
$animate, $q) {
var TOOLTIP_SHOW_DELAY = 300;
var TOOLTIP_WINDOW_EDGE_SPACE = 8;
return {
restrict: 'E',
transclude: true,
priority:210, // Before ngAria
template: '\
<div class="md-background"></div>\
<div class="md-content" ng-transclude></div>',
scope: {
visible: '=?mdVisible',
delay: '=?mdDelay',
autohide: '=?mdAutohide'
},
link: postLink
};
function postLink(scope, element, attr) {
$mdTheming(element);
var parent = getParentWithPointerEvents(),
background = angular.element(element[0].getElementsByClassName('md-background')[0]),
content = angular.element(element[0].getElementsByClassName('md-content')[0]),
direction = attr.mdDirection,
current = getNearestContentElement(),
tooltipParent = angular.element(current || document.body),
debouncedOnResize = $$rAF.throttle(function () { if (scope.visible) positionTooltip(); });
return init();
function init () {
setDefaults();
manipulateElement();
bindEvents();
configureWatchers();
addAriaLabel();
}
function setDefaults () {
if (!angular.isDefined(attr.mdDelay)) scope.delay = TOOLTIP_SHOW_DELAY;
}
function configureWatchers () {
scope.$on('$destroy', function() {
scope.visible = false;
element.remove();
angular.element($window).off('resize', debouncedOnResize);
});
scope.$watch('visible', function (isVisible) {
if (isVisible) showTooltip();
else hideTooltip();
});
}
function addAriaLabel () {
if (!parent.attr('aria-label') && !parent.text().trim()) {
parent.attr('aria-label', element.text().trim());
}
}
function manipulateElement () {
element.detach();
element.attr('role', 'tooltip');
}
function getParentWithPointerEvents () {
var parent = element.parent();
while (parent && $window.getComputedStyle(parent[0])['pointer-events'] == 'none') {
parent = parent.parent();
}
return parent;
}
function getNearestContentElement () {
var current = element.parent()[0];
// Look for the nearest parent md-content, stopping at the rootElement.
while (current && current !== $rootElement[0] && current !== document.body) {
current = current.parentNode;
}
return current;
}
function hasComputedStyleValue(key, value) {
// Check if we should show it or not...
var computedStyles = $window.getComputedStyle(element[0]);
return angular.isDefined(computedStyles[key]) && (computedStyles[key] == value);
}
function bindEvents () {
var mouseActive = false;
var enterHandler = function() {
if (!hasComputedStyleValue('pointer-events','none')) {
setVisible(true);
}
};
var leaveHandler = function () {
var autohide = scope.hasOwnProperty('autohide') ? scope.autohide : attr.hasOwnProperty('mdAutohide');
if (autohide || mouseActive || ($document[0].activeElement !== parent[0]) ) {
setVisible(false);
}
mouseActive = false;
};
// to avoid `synthetic clicks` we listen to mousedown instead of `click`
parent.on('mousedown', function() { mouseActive = true; });
parent.on('focus mouseenter touchstart', enterHandler );
parent.on('blur mouseleave touchend touchcancel', leaveHandler );
angular.element($window).on('resize', debouncedOnResize);
}
function setVisible (value) {
setVisible.value = !!value;
if (!setVisible.queued) {
if (value) {
setVisible.queued = true;
$timeout(function() {
scope.visible = setVisible.value;
setVisible.queued = false;
}, scope.delay);
} else {
$timeout(function() { scope.visible = false; });
}
}
}
function showTooltip() {
// Insert the element before positioning it, so we can get the position
// and check if we should display it
tooltipParent.append(element);
// Check if we should display it or not.
// This handles hide-* and show-* along with any user defined css
if ( hasComputedStyleValue('display','none') ) {
scope.visible = false;
element.detach();
return;
}
positionTooltip();
angular.forEach([element, background, content], function (element) {
$animate.addClass(element, 'md-show');
});
}
function hideTooltip() {
$q.all([
$animate.removeClass(content, 'md-show'),
$animate.removeClass(background, 'md-show'),
$animate.removeClass(element, 'md-show')
]).then(function () {
if (!scope.visible) element.detach();
});
}
function positionTooltip() {
var tipRect = $mdUtil.offsetRect(element, tooltipParent);
var parentRect = $mdUtil.offsetRect(parent, tooltipParent);
var newPosition = getPosition(direction);
// If the user provided a direction, just nudge the tooltip onto the screen
// Otherwise, recalculate based on 'top' since default is 'bottom'
if (direction) {
newPosition = fitInParent(newPosition);
} else if (newPosition.top > element.prop('offsetParent').scrollHeight - tipRect.height - TOOLTIP_WINDOW_EDGE_SPACE) {
newPosition = fitInParent(getPosition('top'));
}
element.css({top: newPosition.top + 'px', left: newPosition.left + 'px'});
positionBackground();
function positionBackground () {
var size = direction === 'left' || direction === 'right'
? Math.sqrt(Math.pow(tipRect.width, 2) + Math.pow(tipRect.height / 2, 2)) * 2
: Math.sqrt(Math.pow(tipRect.width / 2, 2) + Math.pow(tipRect.height, 2)) * 2,
position = direction === 'left' ? { left: 100, top: 50 }
: direction === 'right' ? { left: 0, top: 50 }
: direction === 'top' ? { left: 50, top: 100 }
: { left: 50, top: 0 };
background.css({
width: size + 'px',
height: size + 'px',
left: position.left + '%',
top: position.top + '%'
});
}
function fitInParent (pos) {
var newPosition = { left: pos.left, top: pos.top };
newPosition.left = Math.min( newPosition.left, tooltipParent.prop('scrollWidth') - tipRect.width - TOOLTIP_WINDOW_EDGE_SPACE );
newPosition.left = Math.max( newPosition.left, TOOLTIP_WINDOW_EDGE_SPACE );
newPosition.top = Math.min( newPosition.top, tooltipParent.prop('scrollHeight') - tipRect.height - TOOLTIP_WINDOW_EDGE_SPACE );
newPosition.top = Math.max( newPosition.top, TOOLTIP_WINDOW_EDGE_SPACE );
return newPosition;
}
function getPosition (dir) {
return dir === 'left'
? { left: parentRect.left - tipRect.width - TOOLTIP_WINDOW_EDGE_SPACE,
top: parentRect.top + parentRect.height / 2 - tipRect.height / 2 }
: dir === 'right'
? { left: parentRect.left + parentRect.width + TOOLTIP_WINDOW_EDGE_SPACE,
top: parentRect.top + parentRect.height / 2 - tipRect.height / 2 }
: dir === 'top'
? { left: parentRect.left + parentRect.width / 2 - tipRect.width / 2,
top: parentRect.top - tipRect.height - TOOLTIP_WINDOW_EDGE_SPACE }
: { left: parentRect.left + parentRect.width / 2 - tipRect.width / 2,
top: parentRect.top + parentRect.height + TOOLTIP_WINDOW_EDGE_SPACE };
}
}
}
}
MdTooltipDirective.$inject = ["$timeout", "$window", "$$rAF", "$document", "$mdUtil", "$mdTheming", "$rootElement", "$animate", "$q"];
})(window, window.angular);

6
IonicMaterialDesign/www/lib/angular-material/modules/js/tooltip/tooltip.min.css vendored Normal file
View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.10.0
*/md-tooltip{position:absolute;z-index:100;overflow:hidden;pointer-events:none;border-radius:4px;font-weight:500;font-size:14px}@media screen and (min-width:600px){md-tooltip{font-size:10px}}md-tooltip .md-background{position:absolute;border-radius:50%;-webkit-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0);opacity:1}md-tooltip .md-background.md-show-add{transition:all .4s cubic-bezier(.25,.8,.25,1);-webkit-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0);opacity:0}md-tooltip .md-background.md-show,md-tooltip .md-background.md-show-add-active{-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity:1}md-tooltip .md-background.md-show-remove{transition:all .3s cubic-bezier(.55,0,.55,.2)}md-tooltip .md-background.md-show-remove.md-show-remove-active{-webkit-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0);opacity:0}md-tooltip .md-content{position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:0 0;opacity:0;height:32px;line-height:32px;padding-left:16px;padding-right:16px}@media screen and (min-width:600px){md-tooltip .md-content{height:22px;line-height:22px;padding-left:8px;padding-right:8px}}md-tooltip .md-content.md-show-add{transition:all .4s cubic-bezier(.25,.8,.25,1);opacity:0}md-tooltip .md-content.md-show,md-tooltip .md-content.md-show-add-active{opacity:1}md-tooltip .md-content.md-show-remove{transition:all .3s cubic-bezier(.55,0,.55,.2)}md-tooltip .md-content.md-show-remove.md-show-remove-active{opacity:0}md-tooltip.md-hide{transition:all .3s cubic-bezier(.55,0,.55,.2)}md-tooltip.md-show{transition:all .4s cubic-bezier(.25,.8,.25,1);pointer-events:auto;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}

7
IonicMaterialDesign/www/lib/angular-material/modules/js/tooltip/tooltip.min.js vendored Normal file
View File

@@ -0,0 +1,7 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.10.0
*/
!function(t,e,o){"use strict";function n(t,o,n,i,l,r,a,d,u){function h(h,s,p){function m(){v(),b(),x(),w(),g()}function v(){e.isDefined(p.mdDelay)||(h.delay=f)}function w(){h.$on("$destroy",function(){h.visible=!1,s.remove(),e.element(o).off("resize",H)}),h.$watch("visible",function(t){t?q():E()})}function g(){k.attr("aria-label")||k.text().trim()||k.attr("aria-label",s.text().trim())}function b(){s.detach(),s.attr("role","tooltip")}function y(){for(var t=s.parent();t&&"none"==o.getComputedStyle(t[0])["pointer-events"];)t=t.parent();return t}function $(){for(var t=s.parent()[0];t&&t!==a[0]&&t!==document.body;)t=t.parentNode;return t}function M(t,n){var i=o.getComputedStyle(s[0]);return e.isDefined(i[t])&&i[t]==n}function x(){var t=!1,n=function(){M("pointer-events","none")||C(!0)},l=function(){var e=h.hasOwnProperty("autohide")?h.autohide:p.hasOwnProperty("mdAutohide");(e||t||i[0].activeElement!==k[0])&&C(!1),t=!1};k.on("mousedown",function(){t=!0}),k.on("focus mouseenter touchstart",n),k.on("blur mouseleave touchend touchcancel",l),e.element(o).on("resize",H)}function C(e){C.value=!!e,C.queued||(e?(C.queued=!0,t(function(){h.visible=C.value,C.queued=!1},h.delay)):t(function(){h.visible=!1}))}function q(){return B.append(s),M("display","none")?(h.visible=!1,void s.detach()):(D(),void e.forEach([s,A,N],function(t){d.addClass(t,"md-show")}))}function E(){u.all([d.removeClass(N,"md-show"),d.removeClass(A,"md-show"),d.removeClass(s,"md-show")]).then(function(){h.visible||s.detach()})}function D(){function t(){var t="left"===P||"right"===P?2*Math.sqrt(Math.pow(n.width,2)+Math.pow(n.height/2,2)):2*Math.sqrt(Math.pow(n.width/2,2)+Math.pow(n.height,2)),e="left"===P?{left:100,top:50}:"right"===P?{left:0,top:50}:"top"===P?{left:50,top:100}:{left:50,top:0};A.css({width:t+"px",height:t+"px",left:e.left+"%",top:e.top+"%"})}function e(t){var e={left:t.left,top:t.top};return e.left=Math.min(e.left,B.prop("scrollWidth")-n.width-c),e.left=Math.max(e.left,c),e.top=Math.min(e.top,B.prop("scrollHeight")-n.height-c),e.top=Math.max(e.top,c),e}function o(t){return"left"===t?{left:i.left-n.width-c,top:i.top+i.height/2-n.height/2}:"right"===t?{left:i.left+i.width+c,top:i.top+i.height/2-n.height/2}:"top"===t?{left:i.left+i.width/2-n.width/2,top:i.top-n.height-c}:{left:i.left+i.width/2-n.width/2,top:i.top+i.height+c}}var n=l.offsetRect(s,B),i=l.offsetRect(k,B),r=o(P);P?r=e(r):r.top>s.prop("offsetParent").scrollHeight-n.height-c&&(r=e(o("top"))),s.css({top:r.top+"px",left:r.left+"px"}),t()}r(s);var k=y(),A=e.element(s[0].getElementsByClassName("md-background")[0]),N=e.element(s[0].getElementsByClassName("md-content")[0]),P=p.mdDirection,z=$(),B=e.element(z||document.body),H=n.throttle(function(){h.visible&&D()});return m()}var f=300,c=8;return{restrict:"E",transclude:!0,priority:210,template:' <div class="md-background"></div> <div class="md-content" ng-transclude></div>',scope:{visible:"=?mdVisible",delay:"=?mdDelay",autohide:"=?mdAutohide"},link:h}}e.module("material.components.tooltip",["material.core"]).directive("mdTooltip",n),n.$inject=["$timeout","$window","$$rAF","$document","$mdUtil","$mdTheming","$rootElement","$animate","$q"]}(window,window.angular);