From b9b530b488c7ce4b2dad38c41cfc71539ac44adc Mon Sep 17 00:00:00 2001 From: listen1 Date: Mon, 23 May 2016 15:11:34 +0800 Subject: [PATCH] fix bug: infinite scroll layout mess up --- css/player.css | 4 + js/app.js | 36 +++++- js/vendor/ng-infinite-scroll.js | 188 -------------------------------- listen1.html | 41 +++---- 4 files changed, 57 insertions(+), 212 deletions(-) delete mode 100644 js/vendor/ng-infinite-scroll.js diff --git a/css/player.css b/css/player.css index 9d1f5c1..1c11ec9 100644 --- a/css/player.css +++ b/css/player.css @@ -134,6 +134,10 @@ a { width: 400px; } +.playlist-covers { + margin-bottom: 0px; +} + .playlist-covers li { float: left; display: inline-block; diff --git a/js/app.js b/js/app.js index 2ffe4b6..d9dd17d 100644 --- a/js/app.js +++ b/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) { diff --git a/js/vendor/ng-infinite-scroll.js b/js/vendor/ng-infinite-scroll.js deleted file mode 100644 index 9908524..0000000 --- a/js/vendor/ng-infinite-scroll.js +++ /dev/null @@ -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); - })); - } - }; - } -]); \ No newline at end of file diff --git a/listen1.html b/listen1.html index a9d8af8..3f6d0be 100644 --- a/listen1.html +++ b/listen1.html @@ -20,7 +20,7 @@ - + @@ -155,30 +155,25 @@ -
- -
-
-
-
    -
  • -
    - - -
    - -
    -
    -

    - {{i.title}} -

    -
    • -
    -
    加载中...
    +
    +
    +
      +
    • +
      + + +
      +
      -
    +
    +
    + {{i.title}} +
    + +
    +
    加载中...
    -
    +