From ef149bf1cc0c9471f4e11100bb95355c82a7ae1a Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Mon, 17 Jun 2019 00:46:46 +0200
Subject: [PATCH] chore: Memory optimization when delete is not activated

---
 src/tags/remove-image.tag | 17 +++++++++--------
 src/tags/taglist.tag      |  4 ++--
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/tags/remove-image.tag b/src/tags/remove-image.tag
index 15f4a9f..d3ed8c5 100644
--- a/src/tags/remove-image.tag
+++ b/src/tags/remove-image.tag
@@ -15,16 +15,21 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <remove-image>
-  <material-button waves-center="true" rounded="true" waves-color="#ddd" title="This will delete the image." hide="{ opts.multiDelete }">
+  <material-button waves-center="true" rounded="true" waves-color="#ddd" title="This will delete the image." if="{ !opts.multiDelete }">
     <i class="material-icons">delete</i>
   </material-button>
-  <material-checkbox show="{ opts.multiDelete }" title="Select this tag to delete it."></material-checkbox>
+  <material-checkbox if="{ opts.multiDelete }" title="Select this tag to delete it."></material-checkbox>
   <script type="text/javascript">
     const self = this;
 
     this.on('update', function() {
-      if (!this.opts.multiDelete && this.tags['material-checkbox'].checked) {
-        this.tags['material-checkbox'].toggle();
+      if (this.tags['material-checkbox']) {
+        if (!this.opts.multiDelete && this.tags['material-checkbox'].checked) {
+          this.tags['material-checkbox'].toggle();
+        }
+        this.tags['material-checkbox'].on('toggle', function() {
+          registryUI.taglist.instance.trigger('toggle-remove-image', this.checked);
+        });
       }
     });
 
@@ -68,10 +73,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         oReq.setRequestHeader('Accept', 'application/vnd.docker.distribution.manifest.v2+json');
         oReq.send();
       };
-
-      this.tags['material-checkbox'].on('toggle', function() {
-        registryUI.taglist.instance.trigger('toggle-remove-image', this.checked);
-      });
     });
   </script>
 </remove-image>
diff --git a/src/tags/taglist.tag b/src/tags/taglist.tag
index 0370e24..c207d11 100644
--- a/src/tags/taglist.tag
+++ b/src/tags/taglist.tag
@@ -48,7 +48,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         onclick="registryUI.taglist.reverse();">Tag
         </th>
         <th class="show-tag-history">History</th>
-        <th class={ 'remove-tag': true, delete: this.parent.toDelete > 0 } show="{ registryUI.isImageRemoveActivated }">
+        <th class={ 'remove-tag': true, delete: this.parent.toDelete > 0 } if="{ registryUI.isImageRemoveActivated }">
           <material-checkbox ref="remove-tag-checkbox" class="indeterminate" show={ this.toDelete === 0} title="Toggle multi-delete. Alt+Click to select all tags."></material-checkbox>
           <material-button waves-center="true" rounded="true" waves-color="#ddd" title="This will delete selected images." onclick={ registryUI.taglist.bulkDelete } show={ this.toDelete > 0 }>
             <i class="material-icons">delete</i>
@@ -73,7 +73,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         <td class="show-tag-history">
           <tag-history-button image={ image }/>
         </td>
-        <td show="{ registryUI.isImageRemoveActivated }">
+        <td if="{ registryUI.isImageRemoveActivated }">
           <remove-image multi-delete={ this.opts.multiDelete } image={ image }/>
         </td>
       </tr>