Optimized filter highlighting

hourglass/client/main/main.css

@@ -777,6 +777,10 @@ input, textarea {
 .workevent {
 	pointer-events: auto;
 
+	-webkit-transform: scale(1);
+	-ms-transform: scale(1);
+	transform: scale(1);
+
 	-webkit-transition: transform 0.4s ease;  
 	-moz-transition: transform 0.4s ease; 
 	-ms-transition: transform 0.4s ease;
@@ -1255,9 +1259,4 @@ input, textarea {
 	-webkit-transform: scale(1.12);
 	-ms-transform: scale(1.12);
 	transform: scale(1.12);
-
-	-webkit-transition: transform 0.4s ease;  
-	-moz-transition: transform 0.4s ease; 
-	-ms-transition: transform 0.4s ease;
-	transition: transform 0.4s ease; 
 }

hourglass/client/main/main.html

@@ -95,7 +95,7 @@
         </div>
     </div>
     <img id="bg" src={{bgSrc}}>
-    <div id="mainBody">
+    <div id="mainBody{{highlight}}">
         {{#if currMode 'classes'}}
             <div id="classesMode">
                 {{#each myClasses}}
@@ -105,7 +105,7 @@
         {{/if}}
 
         {{#if currMode 'calendar'}}
-            <div id="calendar" style="{{calColor}}{{highlight}}">
+            <div id="calendar" style="{{calColor}}">
                 {{> fullcalendar calendarOptions}}
             </div>
         {{/if}}
@@ -274,7 +274,7 @@
 </template>
 
 <template name="classModeWork">
-    <div class="workCard{{scale}}" workid="{{_id}}">
+    <div class="workCard" workid="{{_id}}" classid="{{classid}}">
         <div class="cWorkType" style="background-color:{{typeColor}}"></div>
         <div class="cWorkCont">
             <p class="cWorkName">{{name}}</p>

hourglass/client/main/main.js

@@ -140,6 +140,7 @@ Template.registerHelper('myClasses', () => { // Gets all classes and respective
             while (thisWork.indexOf("no") !== -1) thisWork.splice(thisWork.indexOf("no"), 1); // Splice all filtered works.
 
             for (j = 0; j < thisWork.length; j++) {
+                thisWork[j].classid = courses[i];
                 thisWork[j].realDate = thisWork[j].dueDate;
                 thisWork[j].dueDate = moment(thisWork[j].dueDate).calendar(null, {
                     sameDay: '[Today]',
@@ -159,14 +160,6 @@ Template.registerHelper('myClasses', () => { // Gets all classes and respective
 
                 thisWork[j].confirmationLength = thisWork[j].confirmations.length; // Counts the number of confirmations and reports for a particular work.
                 thisWork[j].reportLength = thisWork[j].reports.length;
-
-                var hoverHighlight = Session.get("classDispHover"); // Highlight/scale related class works on hover.
-                if (hoverHighlight !== null && hoverHighlight === found._id) {
-                    thisWork[j].scale = " scaled";
-                    refetch = false;
-                } else {
-                    thisWork[j].scale = "";
-                }
             }
             array[i].thisClassWork = thisWork;
         }
@@ -337,17 +330,16 @@ Template.main.helpers({
     },
     highlight() { // Calendar highlight/scale option.
         var hoverHighlight = Session.get("classDispHover");
-        var works = document.getElementsByClassName("workevent");
+        if(Session.equals("mode","classes")) {
-        if (hoverHighlight === null) {
+            $(".workCard").toggleClass("scaled",false);
+            try { 
+                console.log($(".workCard[classid=\'"+hoverHighlight+"\']").toggleClass("scaled",true));
+            } catch(err) {}
+        } else {   
             $(".workevent").toggleClass("scaled",false);
-            return;
+            try {
-        }
+                $("."+hoverHighlight).toggleClass("scaled",true);
-
+            } catch(err) {}
-        for (var i = 0; i < works.length; i++) {
-            var id = works[i].className;
-            var index = id.indexOf("workevent");
-            id = id.substring(index + 10, index + 27);
-            $("."+id).toggleClass("scaled",true);
         }
         return;
     },