q3aql/webui-aria2
q3aql/webui-aria2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use ng-switch instead of ng-show for some stuff (perf)

Browse Source 
ng-switch does not actually generate and insert DOM nodes when
unswitched while ng-show=false does. This improves performance quite a
bit, but sacrifices collapsed animations (although this would be
fixable).
This commit is contained in:
Nils Maier 2014-03-03 21:30:24 +01:00
parent 1ee0a95d76
commit 00799bc6f6
1 changed files with 11 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
index.html
View File

@ -371,9 +371,9 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="download-overview download-item" ng-click="download.collapsed = !download.collapsed"> <td class="download-overview download-item" ng-click="download.collapsed = !download.collapsed" ng-switch="download.status">
<!-- {{{ statistics --> <!-- {{{ statistics -->
<ul class="stats pull-left" ng-show="hasStatus(download, 'active')"> <ul class="stats pull-left" ng-switch-when="active">
<!-- {{{ active download statistics --> <!-- {{{ active download statistics -->
<li class="label label-active hidden-phone hidden-tablet"> <li class="label label-active hidden-phone hidden-tablet">
<span title="Download status"><i class="icon-play">&nbsp;</i> {{download.status}}</span> <span title="Download status"><i class="icon-play">&nbsp;</i> {{download.status}}</span>
@ -406,7 +406,7 @@
<!-- }}} --> <!-- }}} -->
</ul> </ul>
<ul class="stats pull-left" ng-show="hasStatus(download, 'paused')"> <ul class="stats pull-left" ng-switch-when="paused">
<!-- {{{ paused download statistics --> <!-- {{{ paused download statistics -->
<li class="label label-info"> <li class="label label-info">
<span title="Download Status"><i class="icon-pause">&nbsp;</i> {{download.status}}</span> <span title="Download Status"><i class="icon-pause">&nbsp;</i> {{download.status}}</span>
@ -427,7 +427,7 @@
<!-- }}} --> <!-- }}} -->
</ul> </ul>
<ul class="stats pull-left" ng-show="hasStatus(download, 'waiting')"> <ul class="stats pull-left" ng-switch-when="waiting">
<!-- {{{ paused download statistics --> <!-- {{{ paused download statistics -->
<li class="label"> <li class="label">
<span title="Download Status"><i class="icon-caret-right">&nbsp;</i> {{download.status}}</span> <span title="Download Status"><i class="icon-caret-right">&nbsp;</i> {{download.status}}</span>
@ -448,7 +448,7 @@
<!-- }}} --> <!-- }}} -->
</ul> </ul>
<ul class="stats pull-left" ng-show="hasStatus(download, 'complete')"> <ul class="stats pull-left" ng-switch-when="complete">
<!-- {{{ complete download statistics --> <!-- {{{ complete download statistics -->
<li class="label label-success"> <li class="label label-success">
@ -466,26 +466,24 @@
<!-- }}} --> <!-- }}} -->
</ul> </ul>
<ul class="stats pull-left" ng-show="hasStatus(download, 'removed')"> <ul class="stats pull-left" ng-switch-when="removed">
<!-- {{{ removed download statistics --> <!-- {{{ removed download statistics -->
<li class="label label-warning"> <li class="label label-warning">
<span title="Download Status"><i class="icon-remove">&nbsp;</i> {{download.status}}</span> <span title="Download Status"><i class="icon-remove">&nbsp;</i> {{download.status}}</span>
</li> </li>
<li ng-show="hasStatus(download, 'removed')" <li class="label label-warning">
class="label label-warning">
<span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.fmtTotalLength}}</span> <span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.fmtTotalLength}}</span>
</li> </li>
<li ng-show="hasStatus(download, 'removed')" <li class="label label-warning hidden-phone">
class="label label-warning hidden-phone">
<span title="Download Path"><i class="icon-folder-open">&nbsp;</i> {{download.dir}}</span> <span title="Download Path"><i class="icon-folder-open">&nbsp;</i> {{download.dir}}</span>
</li> </li>
<!-- }}} --> <!-- }}} -->
</ul> </ul>
<ul class="stats pull-left" ng-show="hasStatus(download, 'error')"> <ul class="stats pull-left" ng-switch-when="error">
<!-- {{{ error download statistics --> <!-- {{{ error download statistics -->
<li class="label label-important"> <li class="label label-important">
<span title="Download Status"><i class="icon-remove-sign">&nbsp;</i> {{download.status}}</span> <span title="Download Status"><i class="icon-remove-sign">&nbsp;</i> {{download.status}}</span>
@ -513,8 +511,8 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td colspan="2" ng-click="download.collapsed = !download.collapsed"> <td colspan="2" ng-click="download.collapsed = !download.collapsed" ng-switch="download.collapsed">
<div collapse="download.collapsed"> <div ng-switch-when="false">
<div class="download-item" ng-show="download.numPieces > 1"> <div class="download-item" ng-show="download.numPieces > 1">
<canvas bitfield="download.bitfield" draw="!download.collapsed" pieces="download.numPieces" class="progress chunk-canvas" width="1400" chunkbar></canvas> <canvas bitfield="download.bitfield" draw="!download.collapsed" pieces="download.numPieces" class="progress chunk-canvas" width="1400" chunkbar></canvas>
</div> </div>