feat(riot-v5): upgrade catalog-element

src/components/catalog/catalog-element.riot

@@ -0,0 +1,67 @@
+<!--
+Copyright (C) 2016-2019 Jones Magloire @Joxit
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+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/>.
+-->
+<catalog-element>
+  <!-- Begin of tag -->
+  <div class="content">
+    <material-card class="list highlight" item="{props.item}" expanded="{state.expanded}">
+      <material-waves onmousedown="{this.triggerLaunch}" center="true" color="#ddd" setLaunchListener="{ setLaunchListener }" />
+      <span>
+        <i class="material-icons">send</i>
+        { typeof props.item === "string" ? props.item : props.item.repo }
+        <div if="{typeof props.item !== 'string'}" class="item-count right">
+          { props.item.images && props.item.images.length } images
+          <i class="material-icons animated {state.expanded ? 'expanded' : ''}">expand_more</i>
+        </div>
+      </span>
+    </material-card>
+    <catalog-element if="{typeof props.item !== 'string'}"
+      class="animated {!state.expanded ? 'hide' : ''} {state.expanding ? 'expanding' : ''}"
+      each="{item in props.item.images}" item="{ item }" />
+  </div>
+  <script>
+    export default {
+      onMounted(props) {
+        const card = this.$('material-card');
+        if (!card) {
+          return;
+        }
+        if (props.item.images && props.item.images.length === 1) {
+          props.item = props.item.images[0];
+        }
+        card.onclick = (e) => {
+          if (!props.item.repo) {
+            // registryUI.taglist.go(props.item);
+          } else {
+            this.update({
+              expanded: !this.state.expanded,
+              expanding: true
+            });
+            setTimeout(() => {
+              this.update({
+                expanding: false
+              });
+            }, 50)
+          }
+        }
+      },
+      setLaunchListener(cb) {
+        this.triggerLaunch = cb;
+      }
+    }
+  </script>
+  <!-- End of tag -->
+</catalog-element>

src/components/catalog/catalog.riot

@@ -30,7 +30,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <script>
     import MaterialCard from 'riot-mui/src/material-elements/material-card/material-card.riot';
     import MaterialSpinner from 'riot-mui/src/material-elements/material-spinner/material-spinner.riot';
-
+    import CatalogElement from './catalog-element.riot'
     import {
       Http
     } from '../../scripts/http';
@@ -38,7 +38,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     export default {
       components: {
         MaterialCard,
-        MaterialSpinner
+        MaterialSpinner,
+        CatalogElement
       },
       state: {
         name: '',

src/tags/catalog-element.riot

@@ -1,61 +0,0 @@
-<!--
-Copyright (C) 2016-2019 Jones Magloire @Joxit
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
-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/>.
--->
-<catalog-element>
-  <!-- Begin of tag -->
-  <div class="content">
-    <material-card class="list highlight" item="{item}" expanded="{expanded}">
-      <material-waves onmousedown="{launch}" center="true" color="#ddd" />
-      <span>
-        <i class="material-icons">send</i>
-        { typeof opts.item === "string" ? opts.item : opts.item.repo }
-        <div if="{typeof opts.item !== "string"}" class="item-count right">
-          { opts.item.images && opts.item.images.length } images
-          <i class="material-icons animated {expanded: opts.expanded}">expand_more</i>
-        </div>
-      </span>
-    </material-card>
-    <catalog-element if="{typeof opts.item !== "string"}" class="animated {hide: !expanded, expanding: expanding}" each="{item in item.images}" />
-  </div>
-  <script type="text/javascript">
-    this.on('mount', function() {
-      const self = this;
-      const card = this.tags['material-card'];
-      if (!card) {
-        return;
-      }
-      // Launch waves
-      card.launch = function(e) {
-        card.tags['material-waves'].trigger('launch',e);
-      }
-      if (this.item.images && this.item.images.length === 1) {
-        this.item = this.item.images[0];
-      }
-      card.root.onclick = function(e) {
-        if (!self.item.repo) {
-          registryUI.taglist.go(self.item);
-        } else {
-          self.expanded = !self.expanded;
-          self.update({expanded: self.expanded, expanding: true});
-          setTimeout(function() {
-            self.update({expanded: self.expanded, expanding: false});
-          }, 50)
-        }
-      }
-    })
-  </script>
-  <!-- End of tag -->
-</catalog-element>