-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathapp.js
More file actions
239 lines (210 loc) · 8.61 KB
/
app.js
File metadata and controls
239 lines (210 loc) · 8.61 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers',
'starter.services', 'ionic.ion.headerShrink', 'jett.ionic.scroll.sista'
])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.overlaysWebView(false);
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
// $ionicConfigProvider.tabs.position('top');
$ionicConfigProvider.tabs.position('bottom');
//jsScroll voy a pooner tru para probar sista
$ionicConfigProvider.scrolling.jsScrolling(true)
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
})
//directiva
.directive('headerShrinkDos', function($document) {
return {
restrict: 'A',
link: function($scope, $element, $attr) {
var y = 0,
prevY = 0,
scrollDelay = 0.4,
scrollTop,
fadeAmt;
var header = $document[0].body.querySelector('.bar-header');
var tabs = $document[0].body.querySelector('div.tabs');
var ionTabs = angular.element($document[0].body.querySelector('ion-tabs'));
// var ionTabs = angular.element($document[0].body.querySelector('.bar-header'));
var toTop = ionTabs.hasClass('tabs-top');
console.log('toTop', toTop);
var headerHeight = header.offsetHeight;
setTimeout(function() {
$element.removeClass('has-tabs-top');
}, 500);
function onScroll(e) {
scrollTop = e.detail.scrollTop;
y = (scrollTop >= 0) ? Math.min(headerHeight / scrollDelay, Math.max(0, y + scrollTop - prevY)) : 0;
ionic.requestAnimationFrame(function() {
fadeAmt = 1 - (-y / headerHeight);
tabs.style[ionic.CSS.TRANSFORM] = 'translate3d(0, ' + -y + 'px, 0)';
for (var i = 0, j = header.children.length; i < j; i++) {
tabs.children[i].style.opacity = fadeAmt;
}
});
prevY = scrollTop;
}
$element.bind('scroll', onScroll);
}
}
})
.directive('headerShrinkTres', function($document) {
var fadeAmt;
var shrink = function(tabs, tabs_amt, subHeader, header, amt, dir) {
ionic.requestAnimationFrame(function() {
// Threshold is equal to bar-height
var threshold = 44;
// Scrolling down
if (dir === 1) {
var _amt = Math.min(threshold, amt - threshold);
}
// Scrolling up
else if (dir === -1) {
var _amt = Math.max(0, amt - threshold);
}
// The translation amounts should never be negative
_amt = _amt < 0 ? 0 : _amt;
amt = amt < 0 ? 0 : amt;
tabs_amt = tabs_amt < 0 ? 0 : tabs_amt;
// Re-position the header
header.style[ionic.CSS.TRANSFORM] = 'translate3d(0,-' + _amt + 'px, 0)';
fadeAmt = 1 - _amt / threshold;
for (var i = 0, j = header.children.length; i < j; i++) {
header.children[i].style.opacity = fadeAmt;
}
// Re-position the sub-header
if (subHeader)
subHeader.style[ionic.CSS.TRANSFORM] = 'translate3d(0,-' + amt + 'px, 0)';
// Re-position the tabs
tabs.style[ionic.CSS.TRANSFORM] = 'translate3d(0,' + tabs_amt + 'px, 0)';
});
};
return {
restrict: 'A',
link: function($scope, $element, $attr) {
var starty = 0;
var shrinkAmt;
var tabs_amt;
// Threshold is equal to bar-height + create-post height;
var threshold = 88;
// header
var header = $document[0].body.querySelector('.bar-header');
// sub-header
var subHeader = $document[0].body.querySelector('.bar-subheader');
var headerHeight = header.offsetHeight;
var subHeaderHeight = (subHeader) ? subHeaderHeight : 0;
// tabs
var tabs = $document[0].body.querySelector('.tabs');
var tabsHeight = tabs.offsetHeight;
var prev = 0
var delta = 0
var dir = 1
var prevDir = 1
var prevShrinkAmt = 0;
var prevTabsShrinkAmt = 0;
$element.bind('scroll', function(e) {
// if negative scrolling (eg: pull to refresh don't do anything)
if (e.detail.scrollTop < 0)
return false;
// Scroll delta
delta = e.detail.scrollTop - prev;
// Claculate direction of scrolling
dir = delta >= 0 ? 1 : -1;
// Capture change of direction
if (dir !== prevDir)
starty = e.detail.scrollTop;
// If scrolling up
if (dir === 1) {
// Calculate shrinking amount
shrinkAmt = headerHeight + subHeaderHeight - Math.max(0, (starty + headerHeight + subHeaderHeight) - e.detail.scrollTop);
// Calculate shrinking for tabs
tabs_amt = tabsHeight - Math.max(0, (starty + tabsHeight) - e.detail.scrollTop);
// Start shrink
console.log('tres');
shrink(tabs, tabs_amt, subHeader, header, Math.min(threshold, shrinkAmt), dir);
// Save prev shrink amount
prevShrinkAmt = Math.min(threshold, shrinkAmt);
prevTabsShrinkAmt = Math.min(tabsHeight, tabs_amt);
}
// If scrolling down
else {
// Calculate expansion amount
shrinkAmt = prevShrinkAmt - Math.min(threshold, (starty - e.detail.scrollTop));
// Calculate shrinking for tabs
tabs_amt = prevTabsShrinkAmt - Math.min(tabsHeight, (starty - e.detail.scrollTop));
// Start shrink
shrink(tabs, tabs_amt, subHeader, header, shrinkAmt, dir);
}
// Save prev states for comparison
prevDir = dir;
prev = e.detail.scrollTop;
});
}
}
});