Merge pull request #46 from goldst/perf

Perf

Author: goldst

blocks/card/CardAbstract.js

@@ -106,6 +106,16 @@ export default class cardAbstract {
         this._cm.mousemoveEventShadow();
     }
 
+    /**
+     * runs doEvent on both CardTransformable and CardMouseShadowed
+     * @todo that's a bad description. change
+     * @param {event} event
+     */
+    doEvent(event) {
+        this._ct.doEvent(event);
+        this._cm.doEvent(event);
+    }
+
     /**
      * helper function that throws if class name ends with 'Abstract'
      * @private

blocks/card/card--projects.css

@@ -21,10 +21,6 @@
     right: calc(var(--project-card--padding) + 0.5 * var(--_w));
 }
 
-.card--projects .card__inner {
-    transition: clip-path 0.5s;
-}
-
 .card--projects:hover .card__inner {
     --_by: calc(var(--h) - 2 * var(--project-card--padding) - 25px);
 }

blocks/card/card.css

@@ -18,7 +18,6 @@
     --_hover-scale: var(--card--hover-scale, 1.025);
 
     height: var(--_h);
-    transition: transform 0.5s;
     width: var(--_w);
 }
 
@@ -38,6 +37,7 @@
 
 .card:hover {
     transform: scale(var(--_hover-scale));
+    transition: transform 0.5s;
     z-index: 100;
 }
 

blocks/card/card.js

@@ -4,7 +4,18 @@ import CardProjects from './Card--projects.js';
 
 
 window.addEventListener('load', () => {
-    new CardProjects().mousemoveEvent();
-    new CardMain().mousemoveEvent();
-    new Card().mousemoveEvent();
+    const
+        CP = new CardProjects(),
+        CM = new CardMain(),
+        C = new Card();
+
+    CP.mousemoveEvent();
+    CM.mousemoveEvent();
+    C.mousemoveEvent();
+
+    window.addEventListener('mousemove', (e) => {
+        CP.doEvent(e);
+        CM.doEvent(e);
+        C.doEvent(e);
+    });
 });

index.html

@@ -37,7 +37,7 @@ <h1 class="card__title card--main__title">
                                 <a href="https://github.com/goldst" class="card--main__social-link card--main__social-link--github main-card__button main-card__button--github button button--s">
                                     GitHub
                                 </a>
-                                <a href="mailto:leonard-goldstein@outlook.de" class="card--main__social-link card--main__social-link--mail main-card__button button button--s">
+                                <a href="javascript:toMail('𝕝𝕖𝕠𝕟𝕒𝕣𝕕-𝕘𝕠𝕝𝕕𝕤𝕥𝕖𝕚𝕟@𝕠𝕦𝕥𝕝𝕠𝕠𝕜.𝕕𝕖')" class="card--main__social-link card--main__social-link--mail main-card__button button button--s">
                                     E-Mail
                                 </a>
                                 <a href="tel:0157-78218294" class="card--main__social-link card--main__social-link--tel main-card__button button button--s">
@@ -204,5 +204,6 @@ <h3 class="card__title project-card__title">
         </ul>
     </footer>
     <script src="blocks/index.js" type="module"></script>
+    <script src="js/safety/safety.js"></script>
 </body>
 </html>

js/eventControl/EventController.js

@@ -188,23 +188,24 @@ export default class EventController {
     /**
      * Adds an eventListener for each DOM element that matches the
      * criteria.
-     * @param {string} [eventType=mousemove] type of the event that
-     *   should be listened for
+     * @param {string} eventType type of the event that
+     *   should be listened for. If null, you have to react to events
+     *   manually, running doEvent(event).
      * @param {function} [modificationFunction=args=>\[]] - returns
      *   an array of css changes. args contain absolute transformation
      *   origin and mouse position, both in arrays, and others.
      *   See {TransformationFunctions} for examples and predefined
      *   functions
      * @param {string} [additionalFilter='*'] - css query that has to
-     *   apply additionaly to the one passed in the constructor
+     *   apply additionally to the one passed in the constructor
      * @param {function} [postFunction = (event, element)=>{}] - optional
      *   function that runs after the css change is successfully
-     *   handeled internally. See {PostTransformFunctions} for examples
+     *   handled internally. See {PostTransformFunctions} for examples
      *   and predefined functions.
      * @returns {void}
      */
     listenToChangeCss(
-        eventType = 'mousemove',
+        eventType,
         modificationFunction = args => [],
         additionalFilter = '*',
         postFunction = (controller, event, element) => {}
@@ -213,12 +214,39 @@ export default class EventController {
         this.eventControlElements
             .filter(ece => ece.domElement.matches(additionalFilter))
             .forEach(ece => {
-                document.addEventListener(eventType, event => {
+                /**
+                 * Function that will be run on events, when calling
+                 * doEvent or on events of eventType
+                 * @param {event} event
+                 */
+                const run = (event) => {
                     this._modify(event, ece, modificationFunction);
                     postFunction.call(this, event, ece);
-                });
-            }
-            );
+                };
+
+                if(eventType !== null) {
+                    document.addEventListener(eventType, run);
+                }
+
+                ece.doEvent = run;
+            });
+    }
+
+    /**
+     * runs modification functions and postfunctions for all
+     * EventControlElements, if they have previously been passed via
+     * listenToChangeCss
+     * @param {event} event
+     * @returns {void}
+     */
+    doEvent(event) {
+        this.eventControlElements
+            .forEach(ece => {
+                // only if doEvent was set by listenToChangeCss
+                if(ece.doEvent !== undefined) {
+                    ece.doEvent(event);
+                }
+            });
     }
 
     /**

js/safety/safety.js

@@ -0,0 +1,20 @@
+/**
+ * takes an encrypted mail address, written in lower-case mathematical
+ * double struck letters (𝕒-𝕫) and "normal" characters (all characters
+ * with character codes under 122), converts it to a real mail address
+ * and opens the mailto link if possible
+ * @param {string} encrypted
+ * @returns {void}
+ */
+function toMail(encrypted) {
+    let decrypted = "";
+    for(let i = 0; i < encrypted.length; i++) {
+        if(encrypted.charCodeAt(i) > 122) {
+            decrypted += String.fromCharCode(encrypted.charCodeAt(i+1) - 56561);
+            i++;
+        } else {
+            decrypted += encrypted.charAt(i);
+        }
+    }
+    window.open("mailto:" + decrypted, "_self");
+}

js/transformation/TransformationController.js

@@ -49,7 +49,7 @@ export default class TransformationController extends EC {
         additionalFilter='*',
         postFunction = (event, element)=>{} ) {
         this.listenToChangeCss(
-            'mousemove', transformationFunction,
+            null, transformationFunction,
             additionalFilter, postFunction
         );
     }