make a card selectable

Ravlen · May 16, 2018 · ff1992e · ff1992e
1 parent 7ab7ee5
commit ff1992e
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -198,10 +198,11 @@ <h2>Review</h2>
                 } // End if
             });
 
-
-            //set default
-
-
+            $(document).click((e) =>{
+                if(!$(e.target).hasClass("selected")){
+                    $(".selected").removeClass("selected");
+                }
+            })
             $("#simpleLevel").click(function(){
                 var symbolsCount = $( "#symbolscount" ).val();
                 riot.mount("galleries", { count : 1, symbols : symbolsCount})

diff --git a/static/css/style.css b/static/css/style.css
@@ -49,6 +49,10 @@
     -moz-animation-delay: 2s;
     /* -vendor-animation-iteration-count: infinite; */
 }
+
+.selected{
+    outline: 4px solid yellow;
+}
 @media print {
 
     @page :left, :right {

diff --git a/tags/review.tag b/tags/review.tag
@@ -37,7 +37,7 @@
     <decktemplate></decktemplate>
     <div id="review-panel" class="input-bar clearfix" style="width:100%">
         <div class="photolist-wrapper" style="width:100%">
-            <div each={card in cards} class="cardframe" style="background-color: { frame.bgColor }">
+            <div each={card in cards} class="cardframe" onclick={select} style="background-color: { frame.bgColor }">
                 <div class="align-center" style="    writing-mode: tb-rl; height: 100%; text-align:center; font-size: small; color: gray;">funcards.github.io/match-it</div>
                 <div each={ symbol in card} class="symbol trans" style="{this.transformSize( readSymbol(symbol).size)} transform: rotate({ this.transformRotate() }deg);" 
                     weight={ calculateWeight( readSymbol(symbol).size ) }>
@@ -73,7 +73,14 @@
             });
         })
 
-
+        select(e){
+            if($(e.target).hasClass("selected")){
+                $(e.target).removeClass("selected");
+            }else{
+                $(e.target).addClass("selected");
+            }
+            e.stopPropagation();
+        }
         this.frame = {
             width : $( "#demo-card" ).width(),
             height : $( "#demo-card" ).height(),

diff --git a/tags/tags.js b/tags/tags.js
@@ -262,7 +262,7 @@ riot.tag2('gallery', '<label class="btn-bs-file btn btn-outline-info">Browse Ima
             this.update();
         }.bind(this)
 });
-riot.tag2('review', '<decktemplate></decktemplate> <div id="review-panel" class="input-bar clearfix" style="width:100%"> <div class="photolist-wrapper" style="width:100%"> <div each="{card in cards}" class="cardframe" riot-style="background-color: {frame.bgColor}"> <div class="align-center" style=" writing-mode: tb-rl; height: 100%; text-align:center; font-size: small; color: gray;">funcards.github.io/match-it</div> <div each="{symbol in card}" class="symbol trans" riot-style="{this.transformSize( readSymbol(symbol).size)} transform: rotate({this.transformRotate()}deg);" weight="{calculateWeight( readSymbol(symbol).size )}"> <img riot-src="{readSymbol(symbol,true).src}" height="100%" width="100%"> <div class="ui-resizable-handle resizeHandle"></div> </div> </div> </div> </div>', 'review .cardframe,[data-is="review"] .cardframe{ display: block; background-color: white; float: left; margin: 3px; border-radius: 5px; padding: 5px; position: relative; } review .symbol,[data-is="review"] .symbol{ position: absolute; cursor: move; } review .resizeHandle,[data-is="review"] .resizeHandle{ width: 10px; height: 10px; background-color: #ffffff; border: 1px solid #000000; bottom: 1px; right:1px; display: none; } review .ui-rotatable-handle,[data-is="review"] .ui-rotatable-handle{ width: 10px; height: 10px; background-color: green; bottom: 1px; right:1px; border-radius: 5px; cursor: crosshair; display: none; }', '', function(opts) {
+riot.tag2('review', '<decktemplate></decktemplate> <div id="review-panel" class="input-bar clearfix" style="width:100%"> <div class="photolist-wrapper" style="width:100%"> <div each="{card in cards}" class="cardframe" onclick="{select}" riot-style="background-color: {frame.bgColor}"> <div class="align-center" style=" writing-mode: tb-rl; height: 100%; text-align:center; font-size: small; color: gray;">funcards.github.io/match-it</div> <div each="{symbol in card}" class="symbol trans" riot-style="{this.transformSize( readSymbol(symbol).size)} transform: rotate({this.transformRotate()}deg);" weight="{calculateWeight( readSymbol(symbol).size )}"> <img riot-src="{readSymbol(symbol,true).src}" height="100%" width="100%"> <div class="ui-resizable-handle resizeHandle"></div> </div> </div> </div> </div>', 'review .cardframe,[data-is="review"] .cardframe{ display: block; background-color: white; float: left; margin: 3px; border-radius: 5px; padding: 5px; position: relative; } review .symbol,[data-is="review"] .symbol{ position: absolute; cursor: move; } review .resizeHandle,[data-is="review"] .resizeHandle{ width: 10px; height: 10px; background-color: #ffffff; border: 1px solid #000000; bottom: 1px; right:1px; display: none; } review .ui-rotatable-handle,[data-is="review"] .ui-rotatable-handle{ width: 10px; height: 10px; background-color: green; bottom: 1px; right:1px; border-radius: 5px; cursor: crosshair; display: none; }', '', function(opts) {
         this.templates = [];
         this.on("mount",() => {
             $(".cardframe").width(this.frame.width);
@@ -286,6 +286,14 @@ riot.tag2('review', '<decktemplate></decktemplate> <div id="review-panel" class=
             });
         })
 
+        this.select = function(e){
+            if($(e.target).hasClass("selected")){
+                $(e.target).removeClass("selected");
+            }else{
+                $(e.target).addClass("selected");
+            }
+            e.stopPropagation();
+        }.bind(this)
         this.frame = {
             width : $( "#demo-card" ).width(),
             height : $( "#demo-card" ).height(),