fix bug: infinite scroll layout mess up
This commit is contained in:
listen1
parent
1fc7994a4d
commit
b9b530b488
@ -134,6 +134,10 @@ a {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.playlist-covers {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.playlist-covers li {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
|
||||
36
js/app.js
36
js/app.js
@ -10,7 +10,7 @@
|
||||
return value && JSON.parse(value);
|
||||
}
|
||||
|
||||
var app = angular.module('listenone', ['angularSoundManager', 'ui-notification', 'loWebManager','infinite-scroll'])
|
||||
var app = angular.module('listenone', ['angularSoundManager', 'ui-notification', 'loWebManager'])
|
||||
.config( [
|
||||
'$compileProvider',
|
||||
function( $compileProvider )
|
||||
@ -826,6 +826,40 @@
|
||||
};
|
||||
}]);
|
||||
|
||||
app.directive('infiniteScroll', ['$window',
|
||||
function ($window) {
|
||||
return {
|
||||
restrict: "EA",
|
||||
scope: {
|
||||
infiniteScroll: '&',
|
||||
contentSelector: '=contentSelector'
|
||||
},
|
||||
link: function (scope, elements, attrs) {
|
||||
elements.bind('scroll', function (event) {
|
||||
if (scope.loading) {
|
||||
return;
|
||||
}
|
||||
var containerElement = elements[0];
|
||||
var contentElement = document.querySelector(scope.contentSelector);
|
||||
|
||||
var baseTop = containerElement.getBoundingClientRect().top;
|
||||
var currentTop = contentElement.getBoundingClientRect().top;
|
||||
var baseHeight = containerElement.offsetHeight;
|
||||
var offset = baseTop - currentTop;
|
||||
|
||||
var bottom = offset + baseHeight;
|
||||
var height = contentElement.offsetHeight;
|
||||
|
||||
var remain = height - bottom;
|
||||
var offsetToload = 10;
|
||||
if (remain <= offsetToload) {
|
||||
scope.$apply(scope.infiniteScroll);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
}]);
|
||||
|
||||
app.directive('draggable', ['angularPlayer', '$document', '$rootScope',
|
||||
function(angularPlayer, $document, $rootScope) {
|
||||
return function(scope, element, attrs) {
|
||||
|
||||
188
js/vendor/ng-infinite-scroll.js
vendored
188
js/vendor/ng-infinite-scroll.js
vendored
@ -1,188 +0,0 @@
|
||||
/* ng-infinite-scroll - v1.2.1 - 2016-02-09 */
|
||||
var mod;
|
||||
|
||||
mod = angular.module('infinite-scroll', []);
|
||||
|
||||
mod.value('THROTTLE_MILLISECONDS', null);
|
||||
|
||||
mod.directive('infiniteScroll', [
|
||||
'$rootScope', '$window', '$interval', 'THROTTLE_MILLISECONDS', function($rootScope, $window, $interval, THROTTLE_MILLISECONDS) {
|
||||
return {
|
||||
scope: {
|
||||
infiniteScroll: '&',
|
||||
infiniteScrollContainer: '=',
|
||||
infiniteScrollDistance: '=',
|
||||
infiniteScrollDisabled: '=',
|
||||
infiniteScrollUseDocumentBottom: '=',
|
||||
infiniteScrollListenForEvent: '@'
|
||||
},
|
||||
link: function(scope, elem, attrs) {
|
||||
var changeContainer, checkInterval, checkWhenEnabled, container, handleInfiniteScrollContainer, handleInfiniteScrollDisabled, handleInfiniteScrollDistance, handleInfiniteScrollUseDocumentBottom, handler, height, immediateCheck, offsetTop, pageYOffset, scrollDistance, scrollEnabled, throttle, unregisterEventListener, useDocumentBottom, windowElement;
|
||||
windowElement = angular.element($window);
|
||||
scrollDistance = null;
|
||||
scrollEnabled = null;
|
||||
checkWhenEnabled = null;
|
||||
container = null;
|
||||
immediateCheck = true;
|
||||
useDocumentBottom = false;
|
||||
unregisterEventListener = null;
|
||||
checkInterval = false;
|
||||
height = function(elem) {
|
||||
elem = elem[0] || elem;
|
||||
if (isNaN(elem.offsetHeight)) {
|
||||
return elem.document.documentElement.clientHeight;
|
||||
} else {
|
||||
return elem.offsetHeight;
|
||||
}
|
||||
};
|
||||
offsetTop = function(elem) {
|
||||
if (!elem[0].getBoundingClientRect || elem.css('none')) {
|
||||
return;
|
||||
}
|
||||
return elem[0].getBoundingClientRect().top + pageYOffset(elem);
|
||||
};
|
||||
pageYOffset = function(elem) {
|
||||
elem = elem[0] || elem;
|
||||
if (isNaN(window.pageYOffset)) {
|
||||
return elem.document.documentElement.scrollTop;
|
||||
} else {
|
||||
return elem.ownerDocument.defaultView.pageYOffset;
|
||||
}
|
||||
};
|
||||
handler = function() {
|
||||
var containerBottom, containerTopOffset, elementBottom, remaining, shouldScroll;
|
||||
if (container === windowElement) {
|
||||
containerBottom = height(container) + pageYOffset(container[0].document.documentElement);
|
||||
elementBottom = offsetTop(elem) + height(elem);
|
||||
} else {
|
||||
containerBottom = height(container);
|
||||
containerTopOffset = 0;
|
||||
if (offsetTop(container) !== void 0) {
|
||||
containerTopOffset = offsetTop(container);
|
||||
}
|
||||
elementBottom = offsetTop(elem) - containerTopOffset + height(elem);
|
||||
}
|
||||
if (useDocumentBottom) {
|
||||
elementBottom = height((elem[0].ownerDocument || elem[0].document).documentElement);
|
||||
}
|
||||
remaining = elementBottom - containerBottom;
|
||||
shouldScroll = remaining <= height(container) * scrollDistance + 1;
|
||||
if (shouldScroll) {
|
||||
checkWhenEnabled = true;
|
||||
if (scrollEnabled) {
|
||||
if (scope.$$phase || $rootScope.$$phase) {
|
||||
return scope.infiniteScroll();
|
||||
} else {
|
||||
return scope.$apply(scope.infiniteScroll);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (checkInterval) {
|
||||
$interval.cancel(checkInterval);
|
||||
}
|
||||
return checkWhenEnabled = false;
|
||||
}
|
||||
};
|
||||
throttle = function(func, wait) {
|
||||
var later, previous, timeout;
|
||||
timeout = null;
|
||||
previous = 0;
|
||||
later = function() {
|
||||
previous = new Date().getTime();
|
||||
$interval.cancel(timeout);
|
||||
timeout = null;
|
||||
return func.call();
|
||||
};
|
||||
return function() {
|
||||
var now, remaining;
|
||||
now = new Date().getTime();
|
||||
remaining = wait - (now - previous);
|
||||
if (remaining <= 0) {
|
||||
$interval.cancel(timeout);
|
||||
timeout = null;
|
||||
previous = now;
|
||||
return func.call();
|
||||
} else {
|
||||
if (!timeout) {
|
||||
return timeout = $interval(later, remaining, 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
if (THROTTLE_MILLISECONDS != null) {
|
||||
handler = throttle(handler, THROTTLE_MILLISECONDS);
|
||||
}
|
||||
scope.$on('$destroy', function() {
|
||||
container.unbind('scroll', handler);
|
||||
if (unregisterEventListener != null) {
|
||||
unregisterEventListener();
|
||||
return unregisterEventListener = null;
|
||||
}
|
||||
});
|
||||
handleInfiniteScrollDistance = function(v) {
|
||||
return scrollDistance = parseFloat(v) || 0;
|
||||
};
|
||||
scope.$watch('infiniteScrollDistance', handleInfiniteScrollDistance);
|
||||
handleInfiniteScrollDistance(scope.infiniteScrollDistance);
|
||||
handleInfiniteScrollDisabled = function(v) {
|
||||
scrollEnabled = !v;
|
||||
if (scrollEnabled && checkWhenEnabled) {
|
||||
checkWhenEnabled = false;
|
||||
return handler();
|
||||
}
|
||||
};
|
||||
scope.$watch('infiniteScrollDisabled', handleInfiniteScrollDisabled);
|
||||
handleInfiniteScrollDisabled(scope.infiniteScrollDisabled);
|
||||
handleInfiniteScrollUseDocumentBottom = function(v) {
|
||||
return useDocumentBottom = v;
|
||||
};
|
||||
scope.$watch('infiniteScrollUseDocumentBottom', handleInfiniteScrollUseDocumentBottom);
|
||||
handleInfiniteScrollUseDocumentBottom(scope.infiniteScrollUseDocumentBottom);
|
||||
changeContainer = function(newContainer) {
|
||||
if (container != null) {
|
||||
container.unbind('scroll', handler);
|
||||
}
|
||||
container = newContainer;
|
||||
if (newContainer != null) {
|
||||
return container.bind('scroll', handler);
|
||||
}
|
||||
};
|
||||
changeContainer(windowElement);
|
||||
if (scope.infiniteScrollListenForEvent) {
|
||||
unregisterEventListener = $rootScope.$on(scope.infiniteScrollListenForEvent, handler);
|
||||
}
|
||||
handleInfiniteScrollContainer = function(newContainer) {
|
||||
if ((newContainer == null) || newContainer.length === 0) {
|
||||
return;
|
||||
}
|
||||
if (newContainer.nodeType && newContainer.nodeType === 1) {
|
||||
newContainer = angular.element(newContainer);
|
||||
} else if (typeof newContainer.append === 'function') {
|
||||
newContainer = angular.element(newContainer[newContainer.length - 1]);
|
||||
} else if (typeof newContainer === 'string') {
|
||||
newContainer = angular.element(document.querySelector(newContainer));
|
||||
}
|
||||
if (newContainer != null) {
|
||||
return changeContainer(newContainer);
|
||||
} else {
|
||||
throw new Error("invalid infinite-scroll-container attribute.");
|
||||
}
|
||||
};
|
||||
scope.$watch('infiniteScrollContainer', handleInfiniteScrollContainer);
|
||||
handleInfiniteScrollContainer(scope.infiniteScrollContainer || []);
|
||||
if (attrs.infiniteScrollParent != null) {
|
||||
changeContainer(angular.element(elem.parent()));
|
||||
}
|
||||
if (attrs.infiniteScrollImmediateCheck != null) {
|
||||
immediateCheck = scope.$eval(attrs.infiniteScrollImmediateCheck);
|
||||
}
|
||||
return checkInterval = $interval((function() {
|
||||
if (immediateCheck) {
|
||||
handler();
|
||||
}
|
||||
return $interval.cancel(checkInterval);
|
||||
}));
|
||||
}
|
||||
};
|
||||
}
|
||||
]);
|
||||
41
listen1.html
41
listen1.html
@ -20,7 +20,7 @@
|
||||
<script type="text/javascript" src="js/vendor/angular.min.js"></script>
|
||||
<script type="text/javascript" src="js/vendor/angular-soundmanager2.js"></script>
|
||||
<script type="text/javascript" src="js/vendor/angular-ui-notification.js"></script>
|
||||
<script type="text/javascript" src="js/vendor/ng-infinite-scroll.js"></script> <!-- require jQuery as dependency -->
|
||||
<!-- require jQuery as dependency -->
|
||||
|
||||
<script type="text/javascript" src="js/aes.js"></script>
|
||||
<script type="text/javascript" src="js/bigint.js"></script>
|
||||
@ -155,30 +155,25 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="site-wrapper-innerd" id="hotplaylist" resize>
|
||||
|
||||
<div class="cover-container">
|
||||
<div class="playlist">
|
||||
<div infinite-scroll='scrolling()' infinite-scroll-disabled='loading==true' infinite-scroll-container="'#hotplaylist'">
|
||||
<ul class="playlist-covers">
|
||||
<li ng-repeat="i in result ">
|
||||
<div class="u-cover">
|
||||
<img ng-src="{{i.cover_img_url}}">
|
||||
<a title="" class="mask" ng-click="showPlaylist(i.id)"></a>
|
||||
<div class="bottom">
|
||||
<a class="icon-play" title="播放" ng-click="directplaylist(i.id)"></a>
|
||||
</div>
|
||||
</div>
|
||||
<p class="desc">
|
||||
<a title="{{i.title}}" ng-click="showPlaylist(i.id)">{{i.title}}</a>
|
||||
</p>
|
||||
</li>
|
||||
<div class="loading_bottom">
|
||||
<div class="loading" ng-show="loading">加载中...</div>
|
||||
<div class="site-wrapper-innerd" id="hotplaylist" resize infinite-scroll="scrolling()" content-selector="'#playlist-content'">
|
||||
<div class="cover-container" id="playlist-content">
|
||||
<ul class="playlist-covers">
|
||||
<li ng-repeat="i in result ">
|
||||
<div class="u-cover">
|
||||
<img ng-src="{{i.cover_img_url}}">
|
||||
<a title="" class="mask" ng-click="showPlaylist(i.id)"></a>
|
||||
<div class="bottom">
|
||||
<a class="icon-play" title="播放" ng-click="directplaylist(i.id)"></a>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="desc">
|
||||
<a title="{{i.title}}" ng-click="showPlaylist(i.id)">{{i.title}}</a>
|
||||
</div>
|
||||
</li>
|
||||
<div class="loading_bottom">
|
||||
<div class="loading" ng-show="loading">加载中...</div>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user