Different uiScrollViewport schemes when using as a component #239

Activity

1. dhilt commented on Apr 15, 2020

   

   dhilt

   on Apr 15, 2020

   Last edited by dhilt

   Member

   More actions

   @ornic If you are going to augment Viewport module, an easier approach might be as follows.

   Template:

   <ul class="list-group" ui-scroll-viewport="$ctrl.checkRestrictHeight()">

   Directive:

   .directive('uiScrollViewport', function () {
     return {
       restrict: 'A',
       scope: { window: '=uiScrollViewport' },   // new line, assign directive attr value to scope.window
       controller: [
       // ...

   Viewport:

   const ctrl = viewportController;
   const isViewport = ctrl && ctrl.scope && ctrl.scope.window !== false;
   const scope = isViewport ? ctrl.scope : $rootScope;
   const viewport = isViewport && ctrl.viewport ? ctrl.viewport : angular.element(window);
   const container = isViewport && ctrl.container ? ctrl.container : undefined;

   Note, the explicit check is used: !== false -- it is necessary for the case when a user doesn't pass any value to the "ui-scroll-viewport" attribute but expects the Viewport to be present.

   👍React with 👍1Reacted by Roman Orlov
2. ornic commented on Apr 17, 2020

   

   ornic

   on Apr 17, 2020

   Last edited by ornic

   Author

   More actions

   This way code looks more readable than in my crude variant. But I found that after defining scope in .directive it is unable to make an adaptor in viewportController.scope, but constantly setting viewport.scope to $rootScope fixed the problem (for me, with using ui-scroll via component). But I assume that in future (more usecases inside one app) this approach may backfire.

   UPD: I looked further and it seems that this approach should be Ok, since the only result AFAIK is always using scope of uiScroll directive.
3. dhilt commented on Apr 18, 2020

   

   dhilt

   on Apr 18, 2020

   Member

   More actions

   I didn't meet any issues with the Adapter when using the suggested approach.
4. ornic commented on Apr 23, 2020

   

   ornic

   on Apr 23, 2020

   Last edited by ornic

   Author

   More actions

   I also found the very handy method of using full-window scroll: with some block of text before the list. But there is a problem on the way.

   This is the easy correction of your example. This div goes before the list

   <div style="
       height: 300px;
       text-align: center;
       border: 1px solid lightgreen;
       vertical-align: middle;
       padding: 100px;
   ">Hello! I'm 300px of height.</div>

   and we limit the list with index -100.

   And then we lose ability to correctly identify first and last element:
   

   I'm trying to find the way to overcome this. :)

   ....

   That was... interesting :))) As a result I adjusted *Pos functions with an idea to use container top offset and scrollHeight to compensate:

   bottomDataPos: function bottomDataPos() {
       var scrollHeight = viewport[0].scrollHeight;
       scrollHeight = scrollHeight != null ? scrollHeight : viewport[0].document.documentElement.scrollHeight;
       let btmPadding = bottomPadding.height();
       if (container && container[0] != viewport[0]) { // the only possible case: viewport = window && container != window
           if (btmPadding > 0) { // consider space under the container
               return container[0].scrollHeight - btmPadding;
           }
           scrollHeight -= container.offset().top;
       }
       return scrollHeight - btmPadding;
   },
   topDataPos: function topDataPos() {
       let topDataPos = topPadding.height();
       return topDataPos;
   },
   bottomVisiblePos: function bottomVisiblePos() {
       let viewPortHeight = viewport.outerHeight();
       if (container && container[0] != viewport[0]) {
           let offset = container.offset().top - viewport.scrollTop();
           if (offset > 0) viewPortHeight -= offset;
       }
       return viewport.topVisiblePos() + viewPortHeight;
   },
   topVisiblePos: function topVisiblePos() {
       let topVisiblePos = viewport.scrollTop();
       if (container && container[0] != viewport[0]) {
           topVisiblePos -= container.offset().top;
           if (topVisiblePos < 0) topVisiblePos = 0; // no negative positions :)
       }
       return topVisiblePos;
   }