From e4fd7c58ee06dc84c003fc193968b3ed36ba35ac Mon Sep 17 00:00:00 2001
From: Alex Ling <hkalexling@gmail.com>
Date: Thu, 30 Jul 2020 08:32:00 +0000
Subject: [PATCH] Add multi-select for cards in web interface

---
 public/js/title.js                 |  8 ++++++++
 src/views/components/card.html.ecr | 14 +++++++++++---
 src/views/title.html.ecr           |  4 ++++
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/public/js/title.js b/public/js/title.js
index 5608a3a..46fc25d 100644
--- a/public/js/title.js
+++ b/public/js/title.js
@@ -182,3 +182,11 @@ const setupUpload = (eid) => {
 		}
 	});
 };
+
+const deselectAll = () => {
+	$('.item .uk-card').each((i, e) => {
+		const data = e.__x.$data;
+		if (!data['disabled'])
+			data['selected'] = false;
+	});
+};
diff --git a/src/views/components/card.html.ecr b/src/views/components/card.html.ecr
index 3eaf3bf..0e060a2 100644
--- a/src/views/components/card.html.ecr
+++ b/src/views/components/card.html.ecr
@@ -35,12 +35,20 @@
       onclick="location='<%= base_url %>book/<%= item.id %>'" 
     <% end %>>
 
-    <div class="uk-card uk-card-default">
-      <div class="uk-card-media-top">
-        <img data-src="<%= item.cover_url %>" data-width data-height alt="" uk-img
+    <div class="uk-card uk-card-default" x-data="{selected: false, hover: false, disabled: true}" :class="{selected: selected}"
+      <% if page == "title" && item.is_a?(Entry) && item.err_msg.nil? %>
+        x-init="disabled = false"
+      <% end %>>
+      <div class="uk-card-media-top uk-inline" @mouseenter="hover = true" @mouseleave="hover = false">
+        <img data-src="<%= item.cover_url %>" width="100%" height="100%" alt="" uk-img
         <% if item.is_a? Entry && item.err_msg %>
           class="grayscale"
         <% end %>>
+        <div class="uk-overlay-primary uk-position-cover" x-show="!disabled && (selected || hover)">
+          <div class="uk-position-center">
+            <span class="fas fa-check-circle" @click.stop="selected = !selected; $dispatch(selected ? 'add' : 'remove')" :style="`color:${selected && 'orange'};transform:scale(3,3)`"></span>
+          </div>
+        </div>
       </div>
 
       <div class="uk-card-body">
diff --git a/src/views/title.html.ecr b/src/views/title.html.ecr
index 942b62f..300164c 100644
--- a/src/views/title.html.ecr
+++ b/src/views/title.html.ecr
@@ -1,4 +1,8 @@
 <div>
+  <div class="uk-card uk-card-body uk-card-default uk-margin-bottom" uk-sticky x-data="{count: 0}" @add.window="count++" @remove.window="count--" x-show="count > 0" style="border:orange;border-style:solid;" x-cloak>
+    <p class="uk-display-inline" x-text="count + ' items selected'" style="color:orange"></p>
+    <a uk-icon="icon:close;" class="uk-align-right" @click="deselectAll(); count = 0"></a>
+  </div>
   <h2 class=uk-title><span><%= title.display_name %></span>
     &nbsp;
     <% if is_admin %>