From 8e36762979db926b98c0a31f015e1a9abed45b88 Mon Sep 17 00:00:00 2001
From: Karthik Vasudevan <kaartz@ymail.com>
Date: Thu, 10 Oct 2019 11:07:06 -0700
Subject: [PATCH] change the color of the slider thumbnail to mark the image
 annotation

---
 css/slider.1.css            | 29 ++++++++++++++++++++++++++++-
 css/slider.1.min.css        |  2 +-
 tags/images-slider.tag.html | 18 +++++++++++-------
 3 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/css/slider.1.css b/css/slider.1.css
index aa02177..8891fae 100644
--- a/css/slider.1.css
+++ b/css/slider.1.css
@@ -36,16 +36,43 @@
     /* width: 3000px; */
     /* height: 90px; */
 }
+.taskdone {
+  position: relative;
+  margin: 1px;
+  background: #CCC;
+  float: left;
+  text-align: center;
+  padding: 0px;
+}
+.clickOut {
+    border: 1px solid #999999;
+}
+.clickIn {
+    border: 1px solid blue;
+    background: red;
+}
+.clickIn .after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+  color: #FFF;
+}
+
+.clickIn .after {
+  display: block;
+  background: rgba(0, 0, 0, .6);
+}
 .photolist-wrapper .photolist  img {
     padding: 2px;
     margin: 2px;
     cursor: pointer;
     vertical-align: top;
     background: #F6F6F6;
-    border: 1px solid #666;
     opacity: 0.3;
     transition: .5s ease;
 }
+
 .photolist-wrapper .photolist  img:hover {
     opacity: 1.0;
     transition: .5s ease;
diff --git a/css/slider.1.min.css b/css/slider.1.min.css
index 7c18395..3b96d71 100644
--- a/css/slider.1.min.css
+++ b/css/slider.1.min.css
@@ -1 +1 @@
-.input-bar{width:calc(100vw - 400px);height:100px;padding:8px 4px}.left-paddle,.right-paddle{float:left;width:35px;height:90px;cursor:pointer}.left-paddle{background:url(../img/left-paddle-white.png) no-repeat 5px center}.right-paddle{background:url(../img/right-paddle-white.png) no-repeat -5px;background-position:right}.photolist-wrapper{position:relative;float:left;margin:0 auto;overflow:hidden}.photolist-wrapper .photolist{position:relative}.photolist-wrapper .photolist img{padding:2px;margin:2px;cursor:pointer;vertical-align:top;background:#f6f6f6;border:1px solid #666;opacity:.3;transition:.5s ease}.photolist-wrapper .photolist img:hover{opacity:1;transition:.5s ease}.delete{background:url(../img/delete.svg) no-repeat;width:15px;height:15px;float:left;position:absolute;cursor:pointer}.imgbox{float:left;position:relative}
\ No newline at end of file
+.photolist-wrapper .photolist,.taskdone{position:relative}.input-bar{width:calc(100vw - 400px);height:100px;padding:8px 4px}.left-paddle,.right-paddle{float:left;width:35px;height:90px;cursor:pointer}.left-paddle{background:url(../img/left-paddle-white.png) 5px center no-repeat}.right-paddle{background:url(../img/right-paddle-white.png) right no-repeat}.photolist-wrapper{position:relative;float:left;margin:0 auto;overflow:hidden}.taskdone{margin:1px;background:#CCC;float:left;text-align:center;padding:0}.clickOut{border:1px solid #999}.clickIn{border:1px solid #00f;background:red}.clickIn .after{position:absolute;top:0;left:0;color:#FFF;display:block;background:rgba(0,0,0,.6)}.photolist-wrapper .photolist img{padding:2px;margin:2px;cursor:pointer;vertical-align:top;background:#F6F6F6;opacity:.3;transition:.5s ease}.photolist-wrapper .photolist img:hover{opacity:1;transition:.5s ease}.delete{background:url(../img/delete.svg) no-repeat;width:15px;height:15px;float:left;position:absolute;cursor:pointer}.imgbox{float:left;position:relative}
diff --git a/tags/images-slider.tag.html b/tags/images-slider.tag.html
index cdb57da..caa6f81 100644
--- a/tags/images-slider.tag.html
+++ b/tags/images-slider.tag.html
@@ -24,11 +24,12 @@
     </div>
     <div class="photolist-wrapper " style="width: calc(100% - 160px); height: 90px;">
         <div id="photolist" class="photolist">
-            <!-- <span each={ thumbnails } class="d-inline-block">
-                            <span class="delete" onclick={ deleteThumbnail }></span> -->
-            <img id="thumbnail_{index}" each={ thumbnail,index in thumbnails } src={ thumbnail.src } label={
+            <span each={ thumbnail,index in thumbnails } class="thum_{index} taskdone clickOut" height="90px" width={thumbnailWidth}>
+                            <!-- <span class="delete" onclick={ deleteThumbnail }></span> -->
+            <img id="thumbnail_{index}"  src={ thumbnail.src } label={
                 thumbnail.name } title={ thumbnail.name } width={thumbnailWidth} onclick={ loadIntoWorkArea}>
-            <!-- </span> -->
+                <span class="after" height="90px" width={thumbnailWidth}></span>
+              </span>
         </div>
     </div>
     <div id="rightpaddle" class="align-middle" style="height: 100%;">
@@ -143,7 +144,7 @@
             if (this.sliding === false) {
                 this.sliding = true;
                 photolist.css({ left: "-" + this.sliderMove })
-                    .prepend(photolist.children('img:last-child'))
+                    .prepend(photolist.children('span:last-child'))
                     .animate({ left: 0 }, 200, 'linear', () => {
                         this.sliding = false;
                     });
@@ -154,8 +155,9 @@
             if (this.sliding === false) {
                 this.sliding = true;
                 photolist.animate({ left: "-" + this.sliderMove }, 200, 'linear', () => {
+                  console.log(this.sliderMove)
                     photolist.css({ left: 0 })
-                        .append(photolist.children('img:first-child'));
+                        .append(photolist.children('span:first-child'));
                     this.sliding = false;
                 });
             }
@@ -173,6 +175,8 @@
         }
 
         function loadIntoWorkArea(e) {
+			console.log(e.item.index);
+            $(".thum_" + e.item.index).toggleClass('clickOut clickIn');
             imgSelected = tag.thumbnails[e.item.index];
 
             let preZoom = localStorage.getItem("zoom");
@@ -188,4 +192,4 @@
             riot.mount("workarea", { img: imgSelected });
         }
     </script>
-</images-slider>
\ No newline at end of file
+</images-slider>