Recycling Elements

[00:00:00]
>> Evgenii Ray: So we're going to loop through the whole pool starting from the first element. And the first element is item free because remember we swapped the places. Now the item free has the first position in the bowl, and we're also going to set up the previous pointer. The previous pointer will point to the previous element in the pool.

[00:00:21]
And in case of the item 3, where the index is 0, we are going to use the last element of the array, treated as a circular q in this case. So when the minus 1 will give us the of the last element, okay? So how do we calculate the position of item 3, because the item 3 is the current one?

[00:00:48]
So we need to know the y attribute of the item 2, but we don't have any y attribute yet, we don't know the y position. So we are going to move all our cards to the separate staking context using the position absolute so every card will become absolutely positioned.

[00:01:06]
And now we're going to maintain their position on the screen by applying this CSS transformation. And to calculate the position of the of the card, we take the previous item, y position, then we sum the height of this item, then we sum the margin of this item, and then apply to item 3.

[00:01:36]
But the thing is, when we just initialize our first cycle of virtualization, we don't have the data y set yet. So for this exact case, we initialize it to 0 on the first one, so our item 3 will be set as 0. So when we move to the next element and we move our pointers by 1, so now the current element is item 4, and the previous element is item 3.

[00:02:06]
So what's going to happen now, we're going to access the y3 position, and remember, we set it to 0. So now we know how to calculate the next y, so we're going to use the y0, then we're going to access the height of the item 3 element, sum it, and plus the margin between these two elements.

[00:02:29]
And then we're going to apply the CSS transformation to the element, so we move it to the right place. And the same applies to, as we cycle for the pool, we're gonna move our elements the same way until all elements are moved and the y position is initialized, okay?

[00:02:50]
Once the elements are moved, our next task will be to move the observer code here. So right now the top observer as you can see in not in the right position, so the observers should take the following positions that the top observer should be right before the item 3.

[00:03:10]
So we're gonna use the for the y of the first element in the pool which is the item 3. And the bottom observer will use the position of item 6 plus the height of item 6 plus the margin. So there moving down. So this is the most complex part of exercise.

[00:03:29]
So if you guys have any questions, please ask, and I'm going to be very slow as we proceed with the code. Let's get back to the code now.
>> Evgenii Ray: So let's update our handle bottom observer code. Now we need to move our elements. So we're going to call another method called updateElementPosition.

[00:04:02]
And it accepts the direction, which is the top or down, so we're gonna handle the down first.
>> Evgenii Ray: So when we're handling the element position, let's do exactly what we're described. So first of all, we need to get the references for the previous element and for the current element.

[00:04:24]
So we're going to look for the pool, starting from the index 0. Then we are going to,
>> Evgenii Ray: Access our pool,
>> Evgenii Ray: Increase the index in each cycle. And now we want to access the previous element and the current. So for the previous element because we can't access position minus 1, we're gonna use the at function on the pool.

[00:04:59]
So use pool at, and when the negative index is provided, then we kind of look backwards. So we can provide i -1, so we use -1 because we need two previous elements to the current cycle. So let's change it to let, okay. Now the current position is just basically indexing using the current index, okay?

[00:05:24]
Now we have our previous and the current and remember the next step, now we need to check that the previous element has the y position set. So that now we need to utilize the y function that we already have in the code, so we check the y of the previous element, and it checks the data attribute that is set.

[00:05:44]
If it's not set, then we know that we need to initialize the current element with a 0. So now we set the 0 value to the to the first element. If it's not the case, now we can recalculate the position of the current element. So let's create a new variable called called newY.

[00:06:08]
And for that, we're gonna use the y position of the previous element plus the margin, we already have the constant for that. And we use a double margin because the margin comes from the previous element and from the current element. And then we're gonna use the previous element height, so we need to access the getBoundingClientRect, and we're gonna use the height property on that.

[00:06:36]
>> Evgenii Ray: Okay, now we have the newY position, we can set it to the element. So we're gonna use the y function and we're gonna set the current element with the newY position. But this is just a data at tribute, so nothing is moved yet. Now we need to move our element on the page, and we can do that by setting the transform style.

[00:07:00]
So we're gonna utilize the GPU now, to move the elements around because the CSS transformation utilized GPU. And we're gonna move our elements to the new separate stacking context. So we use the transform,
>> Evgenii Ray: And then we're gonna use our function that we already created and pass the newY, okay?

[00:07:24]
Now our element will be moved to the new position, but there is one thing missing still. We still need to move our observers. So let's do that now because this code will be same for the top and the bottom observer. Remember, we need to know the first element and the last element because the top observer will take the position right before the first element.

[00:07:51]
And the last element will take the position right after the last element. So let's access the reference of the first element and the last, and we can just use the pool for that. So for the first element in the pool, we access the index 0. For the last element in the pool,
>> Evgenii Ray: We can use at( -1).

[00:08:18]
So let's calculate the position of the top observer. So the topY will be equals to the Y(first) element. This is pretty simple, but the position of bottom observer will be equals to the y of the last element. Plus margin and plus the height of the of the last element.

[00:08:50]
So now we need to move our observers. So we need to access the top and bottom observer and we can use what we already have this line here, the top observer and the bottom one. So let's apply the same transformation for the observer code, so we can copy this line, so now we have that we need to update the top transform attribute.

[00:09:10]
Okay, so now we use the translateY and use the topY and for the bottom observer we apply the same transform and translateY(bottomY). Okay, now we can test our code, I think. So if we go to index html and then run our code, and you will see that it's actually doesn't work as we expected.

[00:09:39]
This is because the element at the moment are rendered in the normal flow, we haven't moved them to absolute position yet. So the Browser tries to render them as a normal flow, and then we also apply the transformation. So let's fix that by moving all our elements to the absolute position, so we can set the style, card, position, absolute.

[00:10:10]
And we can set the container,
>> Evgenii Ray: To be position relative, to be the reference point for the card. And we can also set the width to 100% just to make sure that the the current takes 100%. So if we scroll down, now we see that everything seems to be rendered fine.

[00:10:33]
Now we're moving all our top elements from top to bottom and if we scroll down, we see that everything is rendered, and we can verify that by going,
>> Evgenii Ray: To the developer tools and see the dorm tree. Now we have our elements inside and they positioned according to the data y attribute, and if we scroll down, you'll see that we're just changing the attributes.

[00:11:02]
The DOM is not modified at all. So we're basically, moving the pixels around. So that's how we implemented the bottom virtualization. But one thing is still not implemented is the top observer. So top observer is moved to the right position, which is the entry 40, but we still need to handle the callback here.

[00:11:28]
And this will be the next part of our exercise.