Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(virtual-repeat): implement native scrolling
With this commit the virtual-repeat now leverages the browser's native scroll and scroll bar. This should make a more maintainable code base and out of the box give the users expected look and feel across browsers, platforms and devices. Closes #14 #23 #25
- Loading branch information
1 parent
e9a27a6
commit dc486a9
Showing
13 changed files
with
620 additions
and
735 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,74 @@ | ||
| <template> | ||
| <div class="contact-list"> | ||
| <div> | ||
| <div virtual-repeat.for="item of objectArray" class="contact-list-item"> | ||
| <div class="contact-item"> | ||
| <div class="avatar" style="background-color: ${item.color}">${item.firstLetter}</div> | ||
| <div class="name"> | ||
| ${$index} ${item.name} | ||
| </div> | ||
| <div class="content"> | ||
| <strong>Phone:</strong> ${item.phone} <br /> | ||
| <strong>Country:</strong> ${item.country} <br /> | ||
| </div> | ||
| </div> | ||
| <div class="contact-list" if.bind="viewStrategy === 'div'"> | ||
| <div if.bind="isVisible"> | ||
| <div virtual-repeat.for="item of objectArray" class="contact-list-item ${item.name}"> | ||
| <div class="contact-item"> | ||
| <div class="avatar" click.delegate="click()" css="background-color: ${item.color}">${item.firstLetter}</div> | ||
| <div class="name"> | ||
| ${item.name} | ||
| </div> | ||
| <div class="content"> | ||
| <strong>Phone:</strong> ${item.phone} <br /> | ||
| <strong>Country:</strong> ${item.country} <br /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="contact-list" if.bind="viewStrategy === 'table'"> | ||
| <table if.bind="isVisible"> | ||
| <tr virtual-repeat.for="item of objectArray" class="contact-list-item ${item.name}"> | ||
| <td width="85"> | ||
| <div class="avatar" click.delegate="click()" css="background-color: ${item.color}">${item.firstLetter}</div> | ||
| </td> | ||
| <td> | ||
| <div class="contact-item"> | ||
|
|
||
| <div class="name"> | ||
| ${item.name} | ||
| </div> | ||
| <div class="content"> | ||
| <strong>Phone:</strong> ${item.phone} <br /> | ||
| <strong>Country:</strong> ${item.country} <br /> | ||
| </div> | ||
| </div> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| </div> | ||
|
|
||
| <div class="contact-list" if.bind="viewStrategy === 'ul'"> | ||
| <ul if.bind="isVisible"> | ||
| <li virtual-repeat.for="item of objectArray" class="contact-list-item ${item.name}"> | ||
| <div class="contact-item"> | ||
| <div class="avatar" click.delegate="click()" css="background-color: ${item.color}">${item.firstLetter}</div> | ||
| <div class="name"> | ||
| ${item.name} | ||
| </div> | ||
| <div class="content"> | ||
| <strong>Phone:</strong> ${item.phone} <br /> | ||
| <strong>Country:</strong> ${item.country} <br /> | ||
| </div> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div class="array-actions"> | ||
| <button class="btn btn-primary" click.delegate="addItem()">Add 1</button> | ||
| <button class="btn btn-primary" click.delegate="addItems(1000)">Add 1000</button> | ||
| <button class="btn btn-primary" click.delegate="addItems(10000)">Add 10 000</button> | ||
| <button class="btn btn-primary" click.delegate="addItemFirst()">Add 1 at top</button> | ||
| <button class="btn btn-primary" click.delegate="addItemLast()">Add 1 at bottom</button> | ||
| <button class="btn btn-primary" click.delegate="removeItems(1)">Remove 1 at top</button> | ||
| <button class="btn btn-primary" click.delegate="removeLast()">Remove 1 at bottom</button> | ||
| <button class="btn btn-primary" click.delegate="toggle()">Toggle visibility</button> | ||
| <button class="btn btn-primary" click.delegate="swap()">Swap</button> | ||
|
|
||
| <br /><br /> | ||
|
|
||
| <button class="btn ${viewStrategy === 'div' ? 'btn-danger' : ''}" click.trigger="setViewStrategy('div')">Div</button> | ||
| <button class="btn ${viewStrategy === 'table' ? 'btn-danger' : ''}" click.trigger="setViewStrategy('table')">Table</button> | ||
| <button class="btn ${viewStrategy === 'ul' ? 'btn-danger' : ''}" click.trigger="setViewStrategy('ul')">UL</button> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.