mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 15:07:13 +08:00
border btn icon/list thumbnail
This commit is contained in:
Adam Bradley
100
dist/css/ionic-ios7.css
vendored
100
dist/css/ionic-ios7.css
vendored
@ -772,10 +772,13 @@ address {
|
||||
box-shadow: none;
|
||||
font-size: 17px; }
|
||||
|
||||
.bar [class^="icon-"],
|
||||
.bar [class*=" icon-"] {
|
||||
font-size: 24px; }
|
||||
|
||||
.bar .button-icon {
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
font-size: 24px; }
|
||||
background-color: transparent; }
|
||||
|
||||
.bar-header {
|
||||
top: 0; }
|
||||
@ -805,6 +808,7 @@ address {
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 49px;
|
||||
z-index: 5;
|
||||
box-orient: horizontal;
|
||||
-webkit-box-orient: horizontal;
|
||||
-moz-box-orient: horizontal;
|
||||
@ -848,6 +852,9 @@ address {
|
||||
border-color: #c73927;
|
||||
color: white; }
|
||||
|
||||
.tabs-top {
|
||||
top: 44px; }
|
||||
|
||||
.tab-item {
|
||||
display: block;
|
||||
width: 0;
|
||||
@ -1182,7 +1189,7 @@ button.list-icon-right .list-item-content:after {
|
||||
.list-thumbnail .list-item-content {
|
||||
padding-left: 95px;
|
||||
min-height: 80px; }
|
||||
.list-thumbnail .list-item-content img {
|
||||
.list-thumbnail .list-item-content .thumbnail {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -2010,15 +2017,86 @@ a.button {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0); }
|
||||
|
||||
@keyframes fadein {
|
||||
.slide-in-slide-out.ng-enter, .slide-in-slide-out > .ng-enter {
|
||||
-webkit-transition: 0.5s ease-in-out all;
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
|
||||
.slide-in-slide-out.ng-enter-active, .slide-in-slide-out > .ng-enter-active {
|
||||
-webkit-transform: translate3d(0, 0, 0); }
|
||||
.slide-in-slide-out.ng-leave, .slide-in-slide-out > .ng-leave {
|
||||
-webkit-transition: 0.5s ease-in-out all;
|
||||
-webkit-transform: translate3d(0%, 0, 0); }
|
||||
.slide-in-slide-out.ng-leave-active, .slide-in-slide-out > .ng-leave-active {
|
||||
-webkit-transform: translate3d(-10%, 0, 0);
|
||||
opacity: 0.8; }
|
||||
|
||||
.slide-in-slide-out-reverse.ng-enter, .slide-in-slide-out-reverse > .ng-enter {
|
||||
z-index: 1;
|
||||
-webkit-transition: 0.5s ease-in-out all;
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
|
||||
.slide-in-slide-out-reverse.ng-enter-active, .slide-in-slide-out-reverse > .ng-enter-active {
|
||||
-webkit-transform: translate3d(0, 0, 0); }
|
||||
.slide-in-slide-out-reverse.ng-leave, .slide-in-slide-out-reverse > .ng-leave {
|
||||
z-index: 0;
|
||||
-webkit-transition: 0.5s ease-in-out all;
|
||||
-webkit-transform: translate3d(0%, 0, 0); }
|
||||
.slide-in-slide-out-reverse.ng-leave-active, .slide-in-slide-out-reverse > .ng-leave-active {
|
||||
-webkit-transform: translate3d(10%, 0, 0);
|
||||
opacity: 0.8; }
|
||||
|
||||
/**
|
||||
* An animation that fades out one content area and fades in another
|
||||
*/
|
||||
.fade-in-out.ng-enter, .fade-in-out > .ng-enter {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.3s ease-in-out; }
|
||||
.fade-in-out.ng-enter-active, .fade-in-out > .ng-enter-active {
|
||||
opacity: 1; }
|
||||
.fade-in-out.ng-leave, .fade-in-out > .ng-leave {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.3s ease-in-out; }
|
||||
.fade-in-out.ng-leave-active, .fade-in-out > .ng-leave-active {
|
||||
opacity: 0; }
|
||||
|
||||
.slide-left-fade-add {
|
||||
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
|
||||
|
||||
.slide-left-fade-add-active {
|
||||
-webkit-transform: translate3d(-120px, 0, 0);
|
||||
opacity: 0; }
|
||||
|
||||
.slide-left-fade-remove {
|
||||
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
|
||||
-webkit-transform: translate3d(120px, 0, 0);
|
||||
opacity: 0; }
|
||||
|
||||
.slide-left-fade-remove-active {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
opacity: 1; }
|
||||
|
||||
@-webkit-keyframes fadeOut {
|
||||
from {
|
||||
opacity: 0.7; }
|
||||
opacity: 1; }
|
||||
|
||||
to {
|
||||
opacity: 0; } }
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1; }
|
||||
|
||||
to {
|
||||
opacity: 0; } }
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0; }
|
||||
|
||||
to {
|
||||
opacity: 1; } }
|
||||
|
||||
@-webkit-keyframes fadein {
|
||||
/* Safari and Chrome */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0; }
|
||||
|
||||
@ -2026,9 +2104,11 @@ a.button {
|
||||
opacity: 1; } }
|
||||
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
animation: fadein 0.5s;
|
||||
-webkit-animation: fadein 0.5s; }
|
||||
-webkit-animation: fadeOut 0.3s;
|
||||
animation: fadeOut 0.3s; }
|
||||
.fade-in.active {
|
||||
-webkit-animation: fadeIn 0.3s;
|
||||
animation: fadeIn 0.3s; }
|
||||
|
||||
.fill-icon {
|
||||
color: white !important; }
|
||||
|
||||
91
dist/css/ionic-scoped.css
vendored
91
dist/css/ionic-scoped.css
vendored
@ -190,15 +190,31 @@
|
||||
/* the handle when the toggle is "on" */
|
||||
/* make sure list item content have enough padding on right to fit the toggle */
|
||||
/* position the toggle to the right within a list item */
|
||||
@keyframes fadein {
|
||||
/**
|
||||
* An animation that fades out one content area and fades in another
|
||||
*/
|
||||
@-webkit-keyframes fadeOut {
|
||||
from {
|
||||
opacity: 0.7; }
|
||||
opacity: 1; }
|
||||
|
||||
to {
|
||||
opacity: 0; } }
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1; }
|
||||
|
||||
to {
|
||||
opacity: 0; } }
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0; }
|
||||
|
||||
to {
|
||||
opacity: 1; } }
|
||||
|
||||
@-webkit-keyframes fadein {
|
||||
/* Safari and Chrome */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0; }
|
||||
|
||||
@ -1515,10 +1531,12 @@
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
font-size: 17px; }
|
||||
.ionic .bar [class^="icon-"],
|
||||
.ionic .bar [class*=" icon-"] {
|
||||
font-size: 24px; }
|
||||
.ionic .bar .button-icon {
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
font-size: 24px; }
|
||||
background-color: transparent; }
|
||||
.ionic .bar-header {
|
||||
top: 0; }
|
||||
.ionic .bar-footer {
|
||||
@ -1537,6 +1555,7 @@
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 49px;
|
||||
z-index: 5;
|
||||
box-orient: horizontal;
|
||||
-webkit-box-orient: horizontal;
|
||||
-moz-box-orient: horizontal;
|
||||
@ -1579,6 +1598,8 @@
|
||||
background-color: #ef4e3a;
|
||||
border-color: #c73927;
|
||||
color: white; }
|
||||
.ionic .tabs-top {
|
||||
top: 44px; }
|
||||
.ionic .tab-item {
|
||||
display: block;
|
||||
width: 0;
|
||||
@ -1872,7 +1893,7 @@
|
||||
.ionic .list-thumbnail .list-item-content {
|
||||
padding-left: 95px;
|
||||
min-height: 80px; }
|
||||
.ionic .list-thumbnail .list-item-content img {
|
||||
.ionic .list-thumbnail .list-item-content .thumbnail {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -2664,10 +2685,60 @@
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0); }
|
||||
.ionic .fade-in {
|
||||
.ionic .slide-in-slide-out.ng-enter, .ionic .slide-in-slide-out > .ng-enter {
|
||||
-webkit-transition: 0.5s ease-in-out all;
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
|
||||
.ionic .slide-in-slide-out.ng-enter-active, .ionic .slide-in-slide-out > .ng-enter-active {
|
||||
-webkit-transform: translate3d(0, 0, 0); }
|
||||
.ionic .slide-in-slide-out.ng-leave, .ionic .slide-in-slide-out > .ng-leave {
|
||||
-webkit-transition: 0.5s ease-in-out all;
|
||||
-webkit-transform: translate3d(0%, 0, 0); }
|
||||
.ionic .slide-in-slide-out.ng-leave-active, .ionic .slide-in-slide-out > .ng-leave-active {
|
||||
-webkit-transform: translate3d(-10%, 0, 0);
|
||||
opacity: 0.8; }
|
||||
.ionic .slide-in-slide-out-reverse.ng-enter, .ionic .slide-in-slide-out-reverse > .ng-enter {
|
||||
z-index: 1;
|
||||
-webkit-transition: 0.5s ease-in-out all;
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
|
||||
.ionic .slide-in-slide-out-reverse.ng-enter-active, .ionic .slide-in-slide-out-reverse > .ng-enter-active {
|
||||
-webkit-transform: translate3d(0, 0, 0); }
|
||||
.ionic .slide-in-slide-out-reverse.ng-leave, .ionic .slide-in-slide-out-reverse > .ng-leave {
|
||||
z-index: 0;
|
||||
-webkit-transition: 0.5s ease-in-out all;
|
||||
-webkit-transform: translate3d(0%, 0, 0); }
|
||||
.ionic .slide-in-slide-out-reverse.ng-leave-active, .ionic .slide-in-slide-out-reverse > .ng-leave-active {
|
||||
-webkit-transform: translate3d(10%, 0, 0);
|
||||
opacity: 0.8; }
|
||||
.ionic .fade-in-out.ng-enter, .ionic .fade-in-out > .ng-enter {
|
||||
opacity: 0;
|
||||
animation: fadein 0.5s;
|
||||
-webkit-animation: fadein 0.5s; }
|
||||
-webkit-transition: opacity 0.3s ease-in-out; }
|
||||
.ionic .fade-in-out.ng-enter-active, .ionic .fade-in-out > .ng-enter-active {
|
||||
opacity: 1; }
|
||||
.ionic .fade-in-out.ng-leave, .ionic .fade-in-out > .ng-leave {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.3s ease-in-out; }
|
||||
.ionic .fade-in-out.ng-leave-active, .ionic .fade-in-out > .ng-leave-active {
|
||||
opacity: 0; }
|
||||
.ionic .slide-left-fade-add {
|
||||
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
|
||||
.ionic .slide-left-fade-add-active {
|
||||
-webkit-transform: translate3d(-120px, 0, 0);
|
||||
opacity: 0; }
|
||||
.ionic .slide-left-fade-remove {
|
||||
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
|
||||
-webkit-transform: translate3d(120px, 0, 0);
|
||||
opacity: 0; }
|
||||
.ionic .slide-left-fade-remove-active {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
opacity: 1; }
|
||||
.ionic .fade-in {
|
||||
-webkit-animation: fadeOut 0.3s;
|
||||
animation: fadeOut 0.3s; }
|
||||
.ionic .fade-in.active {
|
||||
-webkit-animation: fadeIn 0.3s;
|
||||
animation: fadeIn 0.3s; }
|
||||
.ionic .fill-icon {
|
||||
color: white !important; }
|
||||
.ionic .fill-icon:before {
|
||||
|
||||
138
dist/css/ionic.css
vendored
138
dist/css/ionic.css
vendored
@ -1881,10 +1881,13 @@ address {
|
||||
box-shadow: none;
|
||||
font-size: 17px; }
|
||||
|
||||
.bar [class^="icon-"],
|
||||
.bar [class*=" icon-"] {
|
||||
font-size: 24px; }
|
||||
|
||||
.bar .button-icon {
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
font-size: 24px; }
|
||||
background-color: transparent; }
|
||||
|
||||
.bar-header {
|
||||
top: 0; }
|
||||
@ -1914,6 +1917,7 @@ address {
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 49px;
|
||||
z-index: 5;
|
||||
box-orient: horizontal;
|
||||
-webkit-box-orient: horizontal;
|
||||
-moz-box-orient: horizontal;
|
||||
@ -1957,6 +1961,9 @@ address {
|
||||
border-color: #c73927;
|
||||
color: white; }
|
||||
|
||||
.tabs-top {
|
||||
top: 44px; }
|
||||
|
||||
.tab-item {
|
||||
display: block;
|
||||
width: 0;
|
||||
@ -2046,6 +2053,38 @@ address {
|
||||
.modal.active {
|
||||
height: 100%; }
|
||||
|
||||
.popup {
|
||||
position: fixed; }
|
||||
|
||||
.popup-content {
|
||||
padding: 10px; }
|
||||
|
||||
.loading-backdrop {
|
||||
position: fixed;
|
||||
visibility: hidden;
|
||||
-webkit-transition: visibility 0s linear 0.3s;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
.loading-backdrop.enabled {
|
||||
background-color: rgba(0, 0, 0, 0.7); }
|
||||
.loading-backdrop.active {
|
||||
visibility: visible;
|
||||
-webkit-transition-delay: 0s; }
|
||||
|
||||
.loading {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
font-size: 20px; }
|
||||
.loading h1, .loading h2, .loading h3, .loading h4, .loading h5 {
|
||||
color: #fff; }
|
||||
|
||||
.list {
|
||||
margin-bottom: 20px;
|
||||
padding-left: 0;
|
||||
@ -2291,7 +2330,7 @@ button.list-icon-right .list-item-content:after {
|
||||
.list-thumbnail .list-item-content {
|
||||
padding-left: 95px;
|
||||
min-height: 80px; }
|
||||
.list-thumbnail .list-item-content img {
|
||||
.list-thumbnail .list-item-content .thumbnail {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -3216,6 +3255,12 @@ a.button {
|
||||
-webkit-transition: opacity 0.4s ease-in;
|
||||
opacity: 1; }
|
||||
|
||||
.nav-content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: white; }
|
||||
|
||||
.slide-in-up {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
@ -3231,15 +3276,86 @@ a.button {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0); }
|
||||
|
||||
@keyframes fadein {
|
||||
.slide-in-slide-out.ng-enter, .slide-in-slide-out > .ng-enter {
|
||||
-webkit-transition: 0.5s ease-in-out all;
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
|
||||
.slide-in-slide-out.ng-enter-active, .slide-in-slide-out > .ng-enter-active {
|
||||
-webkit-transform: translate3d(0, 0, 0); }
|
||||
.slide-in-slide-out.ng-leave, .slide-in-slide-out > .ng-leave {
|
||||
-webkit-transition: 0.5s ease-in-out all;
|
||||
-webkit-transform: translate3d(0%, 0, 0); }
|
||||
.slide-in-slide-out.ng-leave-active, .slide-in-slide-out > .ng-leave-active {
|
||||
-webkit-transform: translate3d(-10%, 0, 0);
|
||||
opacity: 0.8; }
|
||||
|
||||
.slide-in-slide-out-reverse.ng-enter, .slide-in-slide-out-reverse > .ng-enter {
|
||||
z-index: 1;
|
||||
-webkit-transition: 0.5s ease-in-out all;
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
|
||||
.slide-in-slide-out-reverse.ng-enter-active, .slide-in-slide-out-reverse > .ng-enter-active {
|
||||
-webkit-transform: translate3d(0, 0, 0); }
|
||||
.slide-in-slide-out-reverse.ng-leave, .slide-in-slide-out-reverse > .ng-leave {
|
||||
z-index: 0;
|
||||
-webkit-transition: 0.5s ease-in-out all;
|
||||
-webkit-transform: translate3d(0%, 0, 0); }
|
||||
.slide-in-slide-out-reverse.ng-leave-active, .slide-in-slide-out-reverse > .ng-leave-active {
|
||||
-webkit-transform: translate3d(10%, 0, 0);
|
||||
opacity: 0.8; }
|
||||
|
||||
/**
|
||||
* An animation that fades out one content area and fades in another
|
||||
*/
|
||||
.fade-in-out.ng-enter, .fade-in-out > .ng-enter {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.3s ease-in-out; }
|
||||
.fade-in-out.ng-enter-active, .fade-in-out > .ng-enter-active {
|
||||
opacity: 1; }
|
||||
.fade-in-out.ng-leave, .fade-in-out > .ng-leave {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.3s ease-in-out; }
|
||||
.fade-in-out.ng-leave-active, .fade-in-out > .ng-leave-active {
|
||||
opacity: 0; }
|
||||
|
||||
.slide-left-fade-add {
|
||||
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
|
||||
|
||||
.slide-left-fade-add-active {
|
||||
-webkit-transform: translate3d(-120px, 0, 0);
|
||||
opacity: 0; }
|
||||
|
||||
.slide-left-fade-remove {
|
||||
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
|
||||
-webkit-transform: translate3d(120px, 0, 0);
|
||||
opacity: 0; }
|
||||
|
||||
.slide-left-fade-remove-active {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
opacity: 1; }
|
||||
|
||||
@-webkit-keyframes fadeOut {
|
||||
from {
|
||||
opacity: 0.7; }
|
||||
opacity: 1; }
|
||||
|
||||
to {
|
||||
opacity: 0; } }
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1; }
|
||||
|
||||
to {
|
||||
opacity: 0; } }
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0; }
|
||||
|
||||
to {
|
||||
opacity: 1; } }
|
||||
|
||||
@-webkit-keyframes fadein {
|
||||
/* Safari and Chrome */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0; }
|
||||
|
||||
@ -3247,9 +3363,11 @@ a.button {
|
||||
opacity: 1; } }
|
||||
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
animation: fadein 0.5s;
|
||||
-webkit-animation: fadein 0.5s; }
|
||||
-webkit-animation: fadeOut 0.3s;
|
||||
animation: fadeOut 0.3s; }
|
||||
.fade-in.active {
|
||||
-webkit-animation: fadeIn 0.3s;
|
||||
animation: fadeIn 0.3s; }
|
||||
|
||||
.fill-icon {
|
||||
color: white !important; }
|
||||
|
||||
470
dist/js/ionic-angular.js
vendored
470
dist/js/ionic-angular.js
vendored
@ -12,7 +12,7 @@ angular.module('ionic.ui', ['ionic.ui.content',
|
||||
]);
|
||||
|
||||
;
|
||||
angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSheet'])
|
||||
angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet'])
|
||||
|
||||
.factory('ActionSheet', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {
|
||||
return {
|
||||
@ -70,7 +70,6 @@ angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSh
|
||||
};
|
||||
}]);
|
||||
;
|
||||
;
|
||||
angular.module('ionic.service.gesture', [])
|
||||
|
||||
.factory('Gesture', [function() {
|
||||
@ -81,7 +80,56 @@ angular.module('ionic.service.gesture', [])
|
||||
};
|
||||
}]);
|
||||
;
|
||||
angular.module('ionic.service.modal', ['ionic.service'])
|
||||
angular.module('ionic.service.loading', ['ionic.ui.loading'])
|
||||
|
||||
.factory('Loading', ['$rootScope', '$document', '$compile', function($rootScope, $document, $compile) {
|
||||
return {
|
||||
/**
|
||||
* Load an action sheet with the given template string.
|
||||
*
|
||||
* A new isolated scope will be created for the
|
||||
* action sheet and the new element will be appended into the body.
|
||||
*
|
||||
* @param {object} opts the options for this ActionSheet (see docs)
|
||||
*/
|
||||
show: function(opts) {
|
||||
var defaults = {
|
||||
content: '',
|
||||
animation: 'fade-in',
|
||||
showBackdrop: true
|
||||
};
|
||||
|
||||
opts = angular.extend(defaults, opts);
|
||||
|
||||
var scope = $rootScope.$new(true);
|
||||
angular.extend(scope, opts);
|
||||
|
||||
// Make sure there is only one loading element on the page at one point in time
|
||||
var existing = angular.element($document[0].querySelector('.loading-backdrop'));
|
||||
if(existing.length) {
|
||||
var scope = existing.scope();
|
||||
if(scope.loading) {
|
||||
scope.loading.show();
|
||||
return scope.loading;
|
||||
}
|
||||
}
|
||||
|
||||
// Compile the template
|
||||
var element = $compile('<loading>' + opts.content + '</loading>')(scope);
|
||||
|
||||
$document[0].body.appendChild(element[0]);
|
||||
|
||||
var loading = new ionic.views.Loading({el: element[0] });
|
||||
loading.show();
|
||||
|
||||
scope.loading = loading;
|
||||
|
||||
return loading;
|
||||
}
|
||||
};
|
||||
}]);
|
||||
;
|
||||
angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
|
||||
|
||||
|
||||
.factory('Modal', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {
|
||||
@ -122,7 +170,65 @@ angular.module('ionic.service.modal', ['ionic.service'])
|
||||
};
|
||||
}]);
|
||||
;
|
||||
angular.module('ionic.service', [])
|
||||
angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
|
||||
|
||||
|
||||
.factory('Popup', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {
|
||||
|
||||
var getPopup = function() {
|
||||
// Make sure there is only one loading element on the page at one point in time
|
||||
var existing = angular.element($document[0].querySelector('.popup'));
|
||||
if(existing.length) {
|
||||
var scope = existing.scope();
|
||||
if(scope.popup) {
|
||||
return scope;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
alert: function(message) {
|
||||
|
||||
// If there is an existing popup, just show that one
|
||||
var existing = getPopup();
|
||||
if(existing) {
|
||||
return existing.popup.alert(message);
|
||||
}
|
||||
|
||||
var defaults = {
|
||||
title: message,
|
||||
animation: 'fade-in',
|
||||
};
|
||||
|
||||
opts = angular.extend(defaults, opts);
|
||||
|
||||
var scope = $rootScope.$new(true);
|
||||
angular.extend(scope, opts);
|
||||
|
||||
// Compile the template
|
||||
var element = $compile('<popup>' + opts.content + '</popup>')(scope);
|
||||
$document[0].body.appendChild(element[0]);
|
||||
|
||||
var popup = new ionic.views.Popup({el: element[0] });
|
||||
popup.alert(message);
|
||||
|
||||
scope.popup = popup;
|
||||
|
||||
return popup;
|
||||
},
|
||||
confirm: function(cb) {
|
||||
},
|
||||
prompt: function(cb) {
|
||||
},
|
||||
show: function(data) {
|
||||
// data.title
|
||||
// data.template
|
||||
// data.buttons
|
||||
}
|
||||
};
|
||||
}]);
|
||||
;
|
||||
angular.module('ionic.service.templateLoad', [])
|
||||
|
||||
.factory('TemplateLoader', ['$q', '$http', '$templateCache', function($q, $http, $templateCache) {
|
||||
return {
|
||||
@ -343,26 +449,38 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
angular.module('ionic.ui.nav', ['ionic.service'])
|
||||
angular.module('ionic.ui.loading', [])
|
||||
|
||||
.controller('NavCtrl', ['$scope', '$element', '$compile', 'TemplateLoader', function($scope, $element, $compile, TemplateLoader) {
|
||||
.directive('loading', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
link: function($scope, $element){
|
||||
$scope.$on('$destroy', function() {
|
||||
$element.remove();
|
||||
});
|
||||
$element.addClass($scope.animation || '');
|
||||
},
|
||||
template: '<div class="loading-backdrop" ng-class="{enabled: showBackdrop}">' +
|
||||
'<div class="loading" ng-transclude>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
};
|
||||
});
|
||||
|
||||
})();
|
||||
;
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.gesture', 'ngAnimate'])
|
||||
|
||||
.controller('NavCtrl', ['$scope', '$element', '$animate', '$compile', 'TemplateLoader', function($scope, $element, $animate, $compile, TemplateLoader) {
|
||||
var _this = this;
|
||||
|
||||
angular.extend(this, ionic.controllers.NavController.prototype);
|
||||
|
||||
this.pushFromTemplate = function(tmpl) {
|
||||
data = TemplateLoader.load(tmpl).then(function(data) {
|
||||
console.log('Nav loaded template', data);
|
||||
|
||||
var childScope = $scope.$new();
|
||||
childScope.isVisible = true;
|
||||
|
||||
$compile(data)(childScope, function(cloned, scope) {
|
||||
$element.append(cloned);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
ionic.controllers.NavController.call(this, {
|
||||
content: {
|
||||
},
|
||||
@ -383,14 +501,39 @@ angular.module('ionic.ui.nav', ['ionic.service'])
|
||||
}
|
||||
});
|
||||
|
||||
$scope.pushController = function(scope) {
|
||||
this.handleDrag = function(e) {
|
||||
};
|
||||
|
||||
this.endDrag = function(e) {
|
||||
};
|
||||
|
||||
this.pushFromTemplate = function(templateUrl) {
|
||||
var childScope = $scope.$new();
|
||||
childScope.isVisible = true;
|
||||
|
||||
TemplateLoader.load(templateUrl).then(function(templateString) {
|
||||
var el = $compile(templateString)(childScope, function(cloned, scope) {
|
||||
angular.element($element[0].children[1].firstElementChild).append(cloned);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
$scope.pushController = function(scope, element) {
|
||||
_this.push(scope);
|
||||
|
||||
/*
|
||||
var old = angular.element($element[0].children[1]);
|
||||
$animate.enter(element, $element, $element[0].firstElementChild, function() {
|
||||
});
|
||||
$animate.leave(old, function() {
|
||||
});
|
||||
*/
|
||||
};
|
||||
|
||||
$scope.navController = this;
|
||||
}])
|
||||
|
||||
.directive('navCtrl', function() {
|
||||
.directive('navs', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
@ -404,7 +547,7 @@ angular.module('ionic.ui.nav', ['ionic.service'])
|
||||
.directive('navBar', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
require: '^navCtrl',
|
||||
require: '^navs',
|
||||
replace: true,
|
||||
scope: true,
|
||||
template: '<header class="bar bar-header bar-dark nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' +
|
||||
@ -413,6 +556,8 @@ angular.module('ionic.ui.nav', ['ionic.service'])
|
||||
'</header>',
|
||||
link: function(scope, element, attrs, navCtrl) {
|
||||
scope.navController = navCtrl;
|
||||
scope.$watch('navController.controllers.length', function(value) {
|
||||
});
|
||||
scope.goBack = function() {
|
||||
navCtrl.pop();
|
||||
};
|
||||
@ -420,37 +565,66 @@ angular.module('ionic.ui.nav', ['ionic.service'])
|
||||
};
|
||||
})
|
||||
|
||||
.directive('navContent', function() {
|
||||
.directive('navContent', ['Gesture', '$animate', function(Gesture, $animate) {
|
||||
return {
|
||||
restrict: 'ECA',
|
||||
require: '^navCtrl',
|
||||
require: '^navs',
|
||||
scope: true,
|
||||
link: function(scope, element, attrs, navCtrl) {
|
||||
scope.title = attrs.title;
|
||||
transclude: 'element',
|
||||
compile: function(element, attr, transclude) {
|
||||
return function($scope, $element, $attr, navCtrl) {
|
||||
var lastParent, lastIndex, childScope, childElement;
|
||||
|
||||
if(attrs.navBar === "false") {
|
||||
$scope.title = $attr.title;
|
||||
|
||||
if($attr.navBar === "false") {
|
||||
navCtrl.hideNavBar();
|
||||
} else {
|
||||
navCtrl.showNavBar();
|
||||
}
|
||||
|
||||
scope.isVisible = true;
|
||||
scope.pushController(scope);
|
||||
$scope.pushController($scope, $element);
|
||||
|
||||
scope.$watch('isVisible', function(value) {
|
||||
console.log('Visiblity changed', value);
|
||||
|
||||
$scope.$watch('isVisible', function(value) {
|
||||
if(childElement) {
|
||||
$animate.leave(childElement);
|
||||
childElement = undefined;
|
||||
}
|
||||
if(childScope) {
|
||||
childScope.$destroy();
|
||||
childScope = undefined;
|
||||
}
|
||||
if(value) {
|
||||
element[0].classList.remove('hidden');
|
||||
} else {
|
||||
element[0].classList.add('hidden');
|
||||
childScope = $scope.$new();
|
||||
transclude(childScope, function(clone) {
|
||||
childElement = clone;
|
||||
Gesture.on('drag', function(e) {
|
||||
//navCtrl.handleDrag(e);
|
||||
console.log('Content drag', e);
|
||||
}, childElement[0]);
|
||||
|
||||
Gesture.on('release', function(e) {
|
||||
//navCtrl._endDrag(e);
|
||||
}, childElement[0]);
|
||||
|
||||
var title = $element.parent().parent().parent()[0].querySelector('.title');
|
||||
$animate.enter(clone, $element.parent(), $element);
|
||||
$animate.addClass(angular.element(title), 'slide-left-fade', function() {
|
||||
$animate.removeClass(angular.element(title), 'slide-left-fade', function() {
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
}]);
|
||||
|
||||
})();
|
||||
;
|
||||
;
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
@ -572,9 +746,89 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
|
||||
});
|
||||
})();
|
||||
;
|
||||
angular.module('ionic.ui.tabs', [])
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
.controller('TabsCtrl', function($scope) {
|
||||
/**
|
||||
* @description
|
||||
* The sideMenuCtrl lets you quickly have a draggable side
|
||||
* left and/or right menu, which a center content area.
|
||||
*/
|
||||
|
||||
angular.module('ionic.ui.slideBox', [])
|
||||
|
||||
/**
|
||||
* The internal controller for the side menu controller. This
|
||||
* extends our core Ionic side menu controller and exposes
|
||||
* some side menu stuff on the current scope.
|
||||
*/
|
||||
.controller('SlideBoxCtrl', ['$scope', '$element', function($scope, $element) {
|
||||
$scope.slides = [];
|
||||
this.slideAdded = function() {
|
||||
$scope.slides.push({});
|
||||
};
|
||||
}])
|
||||
|
||||
.directive('slideBox', ['$compile', function($compile) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
controller: 'SlideBoxCtrl',
|
||||
scope: {},
|
||||
template: '<div class="slide-box">\
|
||||
<div class="slide-box-slides" ng-transclude>\
|
||||
</div>\
|
||||
</div>',
|
||||
|
||||
postLink: function() {
|
||||
console.log('POST LINK');
|
||||
},
|
||||
link: function($scope, $element, $attr, slideBoxCtrl) {
|
||||
// If the pager should show, append it to the slide box
|
||||
if($attr.showPager !== "false") {
|
||||
var childScope = $scope.$new();
|
||||
var pager = $compile('<pager></pager>')(childScope);
|
||||
$element.append(pager);
|
||||
|
||||
$scope.slideBox = new ionic.views.SlideBox({
|
||||
el: $element[0]
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}])
|
||||
|
||||
.directive('slide', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
require: '^slideBox',
|
||||
transclude: true,
|
||||
template: '<div class="slide-box-slide" ng-transclude></div>',
|
||||
compile: function(element, attr, transclude) {
|
||||
return function($scope, $element, $attr, slideBoxCtrl) {
|
||||
slideBoxCtrl.slideAdded();
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
.directive('pager', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
require: '^slideBox',
|
||||
template: '<div class="slide-box-pager"><span ng-repeat="slide in slides"><i class="icon-record"></i></span></div>'
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
;
|
||||
angular.module('ionic.ui.tabs', ['ngAnimate'])
|
||||
|
||||
.controller('TabsCtrl', ['$scope', '$element', '$animate', function($scope, $element, $animate) {
|
||||
var _this = this;
|
||||
|
||||
angular.extend(this, ionic.controllers.TabBarController.prototype);
|
||||
@ -582,83 +836,119 @@ angular.module('ionic.ui.tabs', [])
|
||||
ionic.controllers.TabBarController.call(this, {
|
||||
tabBar: {
|
||||
tryTabSelect: function() {},
|
||||
setSelectedItem: function(index) {
|
||||
console.log('TAB BAR SET SELECTED INDEX', index);
|
||||
},
|
||||
addItem: function(item) {
|
||||
console.log('TAB BAR ADD ITEM', item);
|
||||
}
|
||||
setSelectedItem: function(index) {},
|
||||
addItem: function(item) {}
|
||||
}
|
||||
});
|
||||
|
||||
this.add = function(controller) {
|
||||
this.addController(controller);
|
||||
this.select(0);
|
||||
};
|
||||
|
||||
this.select = function(controllerIndex) {
|
||||
var oldIndex = _this.getSelectedIndex();
|
||||
|
||||
$scope.activeAnimation = $scope.animation;
|
||||
/*
|
||||
if(controllerIndex > oldIndex) {
|
||||
} else if(controllerIndex < oldIndex) {
|
||||
$scope.activeAnimation = $scope.animation + '-reverse';
|
||||
}
|
||||
*/
|
||||
_this.selectController(controllerIndex);
|
||||
};
|
||||
|
||||
$scope.controllers = this.controllers;
|
||||
}])
|
||||
|
||||
$scope.$watch('controllers', function(newV, oldV) {
|
||||
console.log("CControlelrs changed", newV, oldV);
|
||||
//$scope.$apply();
|
||||
});
|
||||
})
|
||||
|
||||
.directive('tabController', function() {
|
||||
.directive('tabs', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
scope: {},
|
||||
scope: {
|
||||
animation: '@'
|
||||
},
|
||||
transclude: true,
|
||||
controller: 'TabsCtrl',
|
||||
//templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
|
||||
template: '<div class="view"><div ng-transclude></div><tab-bar></tab-bar></div>',
|
||||
template: '<div class="view"><tab-controller-bar></tab-controller-bar></div>',
|
||||
compile: function(element, attr, transclude, tabsCtrl) {
|
||||
return function($scope, $element, $attr) {
|
||||
$scope.$watch('activeAnimation', function(value) {
|
||||
//$element.removeClass($scope.animation + ' ' + $scope.animation + '-reverse');
|
||||
$element.addClass($scope.activeAnimation);
|
||||
});
|
||||
transclude($scope, function(cloned) {
|
||||
$element.prepend(cloned);
|
||||
});
|
||||
};
|
||||
}
|
||||
};
|
||||
})
|
||||
|
||||
// Generic controller directive
|
||||
.directive('tabContent', function() {
|
||||
.directive('tab', ['$animate', function($animate) {
|
||||
return {
|
||||
restrict: 'CA',
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
require: '^tabController',
|
||||
require: '^tabs',
|
||||
scope: true,
|
||||
link: function(scope, element, attrs, tabsCtrl) {
|
||||
scope.$watch('isVisible', function(value) {
|
||||
if(!value) {
|
||||
element[0].style.display = 'none';
|
||||
} else {
|
||||
element[0].style.display = 'block';
|
||||
transclude: 'element',
|
||||
compile: function(element, attr, transclude) {
|
||||
return function($scope, $element, $attr, tabsCtrl) {
|
||||
var childScope, childElement;
|
||||
|
||||
|
||||
$scope.$watch('isVisible', function(value) {
|
||||
if(childElement) {
|
||||
$animate.leave(childElement);
|
||||
childElement = undefined;
|
||||
}
|
||||
if(childScope) {
|
||||
childScope.$destroy();
|
||||
childScope = undefined;
|
||||
}
|
||||
if(value) {
|
||||
childScope = $scope.$new();
|
||||
transclude(childScope, function(clone) {
|
||||
childElement = clone;
|
||||
childElement.addClass('view-full');
|
||||
$animate.enter(clone, $element.parent(), $element);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
scope.title = attrs.title;
|
||||
scope.icon = attrs.icon;
|
||||
scope.iconOn = attrs.iconOn;
|
||||
scope.iconOff = attrs.iconOff;
|
||||
tabsCtrl.addController(scope);
|
||||
$scope.title = $attr.title;
|
||||
$scope.icon = $attr.icon;
|
||||
$scope.iconOn = $attr.iconOn;
|
||||
$scope.iconOff = $attr.iconOff;
|
||||
tabsCtrl.add($scope);
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
})
|
||||
}])
|
||||
|
||||
|
||||
.directive('tabBar', function() {
|
||||
.directive('tabControllerBar', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
require: '^tabController',
|
||||
require: '^tabs',
|
||||
transclude: true,
|
||||
replace: true,
|
||||
scope: true,
|
||||
template: '<div class="tabs tabs-primary">' +
|
||||
'<tab-item title="{{controller.title}}" icon="{{controller.icon}}" icon-on="{{controller.iconOn}}" icon-off="{{controller.iconOff}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-item>' +
|
||||
'<tab-controller-item title="{{controller.title}}" icon="{{controller.icon}}" icon-on="{{controller.iconOn}}" icon-off="{{controller.iconOff}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-controller-item>' +
|
||||
'</div>'
|
||||
};
|
||||
})
|
||||
|
||||
.directive('tabItem', function() {
|
||||
.directive('tabControllerItem', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
require: '^tabController',
|
||||
require: '^tabs',
|
||||
scope: {
|
||||
title: '@',
|
||||
iconOn: '@',
|
||||
@ -668,9 +958,8 @@ angular.module('ionic.ui.tabs', [])
|
||||
index: '='
|
||||
},
|
||||
link: function(scope, element, attrs, tabsCtrl) {
|
||||
console.log('Linked item', scope);
|
||||
scope.selectTab = function(index) {
|
||||
tabsCtrl.selectController(scope.index);
|
||||
tabsCtrl.select(scope.index);
|
||||
};
|
||||
},
|
||||
template:
|
||||
@ -680,6 +969,39 @@ angular.module('ionic.ui.tabs', [])
|
||||
'<i class="{{iconOff}}" ng-if="!active"></i> {{title}}' +
|
||||
'</a>'
|
||||
};
|
||||
})
|
||||
|
||||
.directive('tabBar', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
template: '<div class="tabs tabs-primary" ng-transclude>' +
|
||||
'</div>'
|
||||
}
|
||||
})
|
||||
|
||||
.directive('tabItem', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
scope: {
|
||||
title: '@',
|
||||
iconOn: '@',
|
||||
iconOff: '@',
|
||||
active: '=',
|
||||
tabSelected: '@',
|
||||
index: '='
|
||||
},
|
||||
link: function(scope, element, attrs) {
|
||||
},
|
||||
template:
|
||||
'<a href="#" ng-class="{active:active}" ng-click="tabSelected()" class="tab-item">' +
|
||||
'<i class="{{icon}}" ng-if="icon"></i>' +
|
||||
'<i class="{{iconOn}}" ng-if="active"></i>' +
|
||||
'<i class="{{iconOff}}" ng-if="!active"></i> {{title}}' +
|
||||
'</a>'
|
||||
};
|
||||
});
|
||||
;
|
||||
angular.module('ionic.ui.toggle', [])
|
||||
|
||||
181
dist/js/ionic.js
vendored
181
dist/js/ionic.js
vendored
@ -1842,6 +1842,8 @@ window.ionic = {
|
||||
;
|
||||
(function(ionic) {
|
||||
'use strict';
|
||||
|
||||
|
||||
var DragOp = function() {};
|
||||
DragOp.prototype = {
|
||||
start: function(e) {
|
||||
@ -1852,11 +1854,25 @@ window.ionic = {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* The Pull To Refresh drag operation handles the well-known
|
||||
* "pull to refresh" concept seen on various apps. This lets
|
||||
* the user indicate they want to refresh a given list by dragging
|
||||
* down.
|
||||
*
|
||||
* @param {object} opts the options for the pull to refresh drag.
|
||||
*/
|
||||
var PullToRefreshDrag = function(opts) {
|
||||
this.dragThresholdY = opts.dragThresholdY || 10;
|
||||
this.onRefreshOpening = opts.onRefreshOpening || function() {};
|
||||
this.onRefresh = opts.onRefresh || function() {};
|
||||
this.onRefreshHolding = opts.onRefreshHolding || function() {};
|
||||
this.el = opts.el;
|
||||
};
|
||||
|
||||
PullToRefreshDrag.prototype = new DragOp();
|
||||
|
||||
PullToRefreshDrag.prototype.start = function(e) {
|
||||
var content, refresher;
|
||||
|
||||
@ -1869,17 +1885,23 @@ window.ionic = {
|
||||
refresher = this._injectRefresher();
|
||||
}
|
||||
|
||||
// Disable animations while dragging
|
||||
refresher.classList.remove('list-refreshing');
|
||||
|
||||
this._currentDrag = {
|
||||
refresher: refresher,
|
||||
content: content
|
||||
content: content,
|
||||
isHolding: false
|
||||
};
|
||||
};
|
||||
|
||||
PullToRefreshDrag.prototype._injectRefresher = function() {
|
||||
var refresher = document.createElement('div');
|
||||
refresher.className = 'list-refresher';
|
||||
this.el.insertBefore(refresher, this.el.firstChild);
|
||||
return refresher;
|
||||
};
|
||||
|
||||
PullToRefreshDrag.prototype.drag = function(e) {
|
||||
var _this = this;
|
||||
|
||||
@ -1896,21 +1918,59 @@ window.ionic = {
|
||||
}
|
||||
|
||||
if(_this._isDragging) {
|
||||
var currentHeight = parseFloat(_this._currentDrag.refresher.style.height);
|
||||
_this._currentDrag.refresher.style.height = e.gesture.deltaY + 'px';
|
||||
var refresher = _this._currentDrag.refresher;
|
||||
|
||||
var newHeight = parseFloat(_this._currentDrag.refresher.style.height = e.gesture.deltaY);
|
||||
var firstChildHeight = parseFloat(_this._currentDrag.refresher.firstElementChild.style.height);
|
||||
console.log('New Height must pass', firstChildHeight);
|
||||
if(newHeight > firstChildHeight) {
|
||||
console.log('PASSED', firstChildHeight);
|
||||
var currentHeight = parseFloat(refresher.style.height);
|
||||
refresher.style.height = e.gesture.deltaY + 'px';
|
||||
|
||||
var newHeight = parseFloat(refresher.style.height);
|
||||
var firstChildHeight = parseFloat(refresher.firstElementChild.offsetHeight);
|
||||
|
||||
if(newHeight > firstChildHeight && !_this._currentDrag.isHolding) {
|
||||
// The user is holding the refresh but hasn't let go of it
|
||||
_this._currentDrag.isHolding = true;
|
||||
_this.onRefreshHolding && _this.onRefreshHolding();
|
||||
} else {
|
||||
// Indicate what ratio of opening the list refresh drag is
|
||||
var ratio = Math.min(1, newHeight / firstChildHeight);
|
||||
_this.onRefreshOpening && _this.onRefreshOpening(ratio);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
PullToRefreshDrag.prototype.end = function(e) {
|
||||
|
||||
PullToRefreshDrag.prototype.end = function(e, doneCallback) {
|
||||
var _this = this;
|
||||
|
||||
// There is no drag, just end immediately
|
||||
if(!this._currentDrag) {
|
||||
return;
|
||||
}
|
||||
|
||||
var refresher = this._currentDrag.refresher;
|
||||
|
||||
var currentHeight = parseFloat(refresher.style.height);
|
||||
refresher.style.height = e.gesture.deltaY + 'px';
|
||||
|
||||
var firstChildHeight = parseFloat(refresher.firstElementChild.offsetHeight);
|
||||
|
||||
if(currentHeight > firstChildHeight) {
|
||||
//this.refreshing();
|
||||
refresher.classList.add('list-refreshing');
|
||||
refresher.style.height = firstChildHeight + 'px';
|
||||
this.onRefresh && _this.onRefresh();
|
||||
} else {
|
||||
// Enable animations
|
||||
refresher.classList.add('list-refreshing');
|
||||
refresher.style.height = '0px';
|
||||
this.onRefresh && _this.onRefresh();
|
||||
}
|
||||
|
||||
this._currentDrag = null;
|
||||
doneCallback && doneCallback();
|
||||
};
|
||||
|
||||
|
||||
var SlideDrag = function(opts) {
|
||||
this.dragThresholdX = opts.dragThresholdX || 10;
|
||||
this.el = opts.el;
|
||||
@ -2151,6 +2211,10 @@ window.ionic = {
|
||||
// The amount of dragging required to start sliding the element over (in pixels)
|
||||
this.dragThresholdX = opts.dragThresholdX || 10;
|
||||
|
||||
this.onRefresh = opts.onRefresh || function() {};
|
||||
this.onRefreshOpening = opts.onRefreshOpening || function() {};
|
||||
this.onRefreshHolding = opts.onRefreshHolding || function() {};
|
||||
|
||||
// Start the drag states
|
||||
this._initDrag();
|
||||
|
||||
@ -2164,6 +2228,14 @@ window.ionic = {
|
||||
};
|
||||
|
||||
ionic.views.List.prototype = {
|
||||
/**
|
||||
* Called to tell the list to stop refreshing. This is useful
|
||||
* if you are refreshing the list and are done with refreshing.
|
||||
*/
|
||||
stopRefreshing: function() {
|
||||
var refresher = this.el.querySelector('.list-refresher');
|
||||
refresher.style.height = '0px';
|
||||
},
|
||||
|
||||
_initDrag: function() {
|
||||
this._isDragging = false;
|
||||
@ -2183,6 +2255,8 @@ window.ionic = {
|
||||
|
||||
|
||||
_startDrag: function(e) {
|
||||
var _this = this;
|
||||
|
||||
this._isDragging = false;
|
||||
|
||||
// Check if this is a reorder drag
|
||||
@ -2197,7 +2271,18 @@ window.ionic = {
|
||||
|
||||
// Check if this is a "pull down" drag for pull to refresh
|
||||
else if(e.gesture.direction == 'down') {
|
||||
this._dragOp = new PullToRefreshDrag({ el: this.el });
|
||||
this._dragOp = new PullToRefreshDrag({
|
||||
el: this.el,
|
||||
onRefresh: function() {
|
||||
_this.onRefresh && _this.onRefresh();
|
||||
},
|
||||
onRefreshHolding: function() {
|
||||
_this.onRefreshHolding && _this.onRefreshHolding();
|
||||
},
|
||||
onRefreshOpening: function(ratio) {
|
||||
_this.onRefreshOpening && _this.onRefreshOpening(ratio);
|
||||
}
|
||||
});
|
||||
this._dragOp.start(e);
|
||||
}
|
||||
|
||||
@ -2230,12 +2315,51 @@ window.ionic = {
|
||||
|
||||
if(!this._dragOp) {
|
||||
this._startDrag(e);
|
||||
if(!this._dragOp) { return; }
|
||||
}
|
||||
|
||||
this._dragOp.drag(e);
|
||||
}
|
||||
};
|
||||
|
||||
})(ionic);
|
||||
;
|
||||
(function(ionic) {
|
||||
'use strict';
|
||||
/**
|
||||
* An ActionSheet is the slide up menu popularized on iOS.
|
||||
*
|
||||
* You see it all over iOS apps, where it offers a set of options
|
||||
* triggered after an action.
|
||||
*/
|
||||
ionic.views.Loading = function(opts) {
|
||||
var _this = this;
|
||||
|
||||
this.el = opts.el;
|
||||
this._loadingBox = this.el.querySelector('.loading');
|
||||
};
|
||||
|
||||
ionic.views.Loading.prototype = {
|
||||
show: function() {
|
||||
var _this = this;
|
||||
|
||||
if(this._loadingBox) {
|
||||
window.requestAnimationFrame(function() {
|
||||
_this.el.classList.add('active');
|
||||
|
||||
_this._loadingBox.style.marginLeft = (-_this._loadingBox.offsetWidth) / 2 + 'px';
|
||||
_this._loadingBox.style.marginTop = (-_this._loadingBox.offsetHeight) / 2 + 'px';
|
||||
});
|
||||
}
|
||||
},
|
||||
hide: function() {
|
||||
// Force a reflow so the animation will actually run
|
||||
this.el.offsetWidth;
|
||||
|
||||
this.el.classList.remove('active');
|
||||
}
|
||||
};
|
||||
|
||||
})(ionic);
|
||||
;
|
||||
(function(ionic) {
|
||||
@ -2308,6 +2432,43 @@ window.ionic = {
|
||||
}
|
||||
};
|
||||
|
||||
})(ionic);
|
||||
;
|
||||
(function(ionic) {
|
||||
'use strict';
|
||||
/**
|
||||
* An ActionSheet is the slide up menu popularized on iOS.
|
||||
*
|
||||
* You see it all over iOS apps, where it offers a set of options
|
||||
* triggered after an action.
|
||||
*/
|
||||
ionic.views.Popup = function(opts) {
|
||||
var _this = this;
|
||||
|
||||
this.el = opts.el;
|
||||
};
|
||||
|
||||
ionic.views.Popup.prototype = {
|
||||
setTitle: function(title) {
|
||||
var title = el.querySelector('.popup-title');
|
||||
title && title.innerHTML = title;
|
||||
},
|
||||
alert: function(message) {
|
||||
var _this = this;
|
||||
|
||||
window.requestAnimationFrame(function() {
|
||||
_this.setTitle(message);
|
||||
_this.el.classList.add('active');
|
||||
});
|
||||
},
|
||||
hide: function() {
|
||||
// Force a reflow so the animation will actually run
|
||||
this.el.offsetWidth;
|
||||
|
||||
this.el.classList.remove('active');
|
||||
}
|
||||
};
|
||||
|
||||
})(ionic);
|
||||
;
|
||||
(function(ionic) {
|
||||
|
||||
@ -175,12 +175,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.bar .button-icon {
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
.bar [class^="icon-"],
|
||||
.bar [class*=" icon-"] {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.bar .button-icon {
|
||||
border: $button-border-width solid transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Header at top
|
||||
.bar-header {
|
||||
top: 0;
|
||||
|
||||
@ -190,7 +190,7 @@ button.list-icon-right {
|
||||
padding-left: $list-thumbnail-width + $list-item-padding;
|
||||
min-height: $list-thumbnail-width;
|
||||
|
||||
img {
|
||||
.thumbnail {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
@ -131,17 +131,6 @@
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// Webkit-style focus
|
||||
// ------------------
|
||||
@mixin tab-focus() {
|
||||
// Default
|
||||
outline: thin dotted #333;
|
||||
// Webkit
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
// Center-align a block level element
|
||||
// ----------------------------------
|
||||
@mixin center-block() {
|
||||
|
||||
@ -5,8 +5,7 @@
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="../dist/ionicons.css" rel="stylesheet">
|
||||
<link href="../dist/ionic.css" rel="stylesheet">
|
||||
<link href="../dist/css/ionic.css" rel="stylesheet">
|
||||
<style>
|
||||
.bar {
|
||||
position: relative;
|
||||
@ -22,7 +21,7 @@
|
||||
<header class="bar bar-header bar-dark">
|
||||
<a class="button">Back</a>
|
||||
<h1 class="title">Really really really really really really really really long title!</h1>
|
||||
<a class="button">This</a>
|
||||
<a class="button"><i class="icon-home"></i></a>
|
||||
</header>
|
||||
<div class="bar bar-header-secondary bar-success">
|
||||
<div class="button-bar">
|
||||
@ -32,7 +31,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<header class="bar bar-header bar-default">
|
||||
<a class="button">Back</a>
|
||||
<a class="button button-icon"><i class="icon-home"></i></a>
|
||||
<div class="button-bar">
|
||||
<a class="button">Success</a>
|
||||
<a class="button">Warning</a>
|
||||
@ -62,8 +61,5 @@
|
||||
|
||||
</section>
|
||||
|
||||
<script src="../dist/ionic.js"></script>
|
||||
<script src="../dist/ionic-simple.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -208,7 +208,7 @@
|
||||
|
||||
<a href="#" class="list-item list-thumbnail">
|
||||
<div class="list-item-content">
|
||||
<img src="//ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
|
||||
<img class="thumbnail" src="//ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
|
||||
<h2>Pretty Hate Machine</h2>
|
||||
<p>Nine Inch Nails</p>
|
||||
</div>
|
||||
@ -216,7 +216,7 @@
|
||||
|
||||
<a href="#" class="list-item list-thumbnail">
|
||||
<div class="list-item-content">
|
||||
<img src="//ecx.images-amazon.com/images/I/41H62046AHL.jpg">
|
||||
<img class="thumbnail" src="//ecx.images-amazon.com/images/I/41H62046AHL.jpg">
|
||||
<h2>Siamese Dream</h2>
|
||||
<p>Smashing Pumpkins</p>
|
||||
</div>
|
||||
@ -224,7 +224,7 @@
|
||||
|
||||
<a href="#" class="list-item list-thumbnail">
|
||||
<div class="list-item-content">
|
||||
<img src="//ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
|
||||
<img class="thumbnail" src="//ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
|
||||
<h2>Nevermind</h2>
|
||||
<p>Nirvana</p>
|
||||
</div>
|
||||
@ -232,7 +232,7 @@
|
||||
|
||||
<a href="#" class="list-item list-thumbnail">
|
||||
<div class="list-item-content">
|
||||
<img src="//ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
|
||||
<img class="thumbnail" src="//ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
|
||||
<h2>License To Ill</h2>
|
||||
<p>Bestie Boys</p>
|
||||
</div>
|
||||
@ -240,7 +240,7 @@
|
||||
|
||||
<a href="#" class="list-item list-thumbnail">
|
||||
<div class="list-item-content">
|
||||
<img src="//ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
|
||||
<img class="thumbnail" src="//ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
|
||||
<h2>Dookie</h2>
|
||||
<p>Green Day</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user