preparation for separation of hover effects

Author: goldst

.gitignore

@@ -77,3 +77,5 @@ typings/
 # documentation
 docs/
 
+# vscode
+.vscode

blocks/card/Card--main.js

@@ -1,25 +1,17 @@
 import CardAbstract from './CardAbstract.js';
 
 /**
- * automates the 3d effect for card blocks with the --main modifier
+ * automates event based effects for card blocks with the --main
+ * modifier
  * @extends CardAbstract
  */
 export default class CardMain extends CardAbstract {
     /**
      * @returns {void}
      */
     constructor() {
-        super('--main');
-    }
-
-    /**
-     * empty post transform function
-     * @override
-     * @protected
-     * @returns {void}
-     */
-    _postTransformFunction() {
-        //in a card with the '--main' modfier, nothing happens after the
-        //transformation
+        // in main cards, nothing happens
+        // after the transformation, thus the empty function
+        super('--main', () => {});
     }
 }

blocks/card/Card--projects.js

@@ -1,20 +1,25 @@
 import LA
     from '../../js/math/LinearAlgebra.js';
 import TF
-    from '../../js/transformation/TransformationFunctions.js';
+    from '../../js/transformationNew/TransformationFunctions.js';
 
 import CardAbstract from './CardAbstract.js';
 
 /**
- * automates the 3d effect for card blocks with the --projects modifier
+ * automates event based effects for card blocks with the --projects 
+ * modifier
  * @extends CardAbstract
  */
 export default class CardProjects extends CardAbstract {
     /**
      * @returns {void}
      */
     constructor() {
-        super('--projects');
+        super(
+            '--projects',
+            CardProjects._postTransformFunction,
+            CardProjects._transformationFunction
+        );
     }
 
     /**
@@ -30,7 +35,7 @@ export default class CardProjects extends CardAbstract {
      * @returns {String} transformation with adjusted scale and 3d
      *   rotation
      */
-    _transformationFunction(args) {
+    static _transformationFunction(args) {
         const rotAxis = LA.vector(args.transformOrigin, args.mousePosition),
             rotation =
                 TF.advBellCurve(
@@ -64,7 +69,7 @@ export default class CardProjects extends CardAbstract {
      *   transformed
      * @returns {void}
      */
-    _postTransformFunction(event, element) {
+    static _postTransformFunction(event, element) {
         const parent = element.domElement.parentElement,
             background = element.surroundingBackground(
                 'var(--c0)',

blocks/card/Card.js

@@ -1,18 +1,13 @@
 import CardAbstract from './CardAbstract.js';
 
 /**
- * automates the 3d effect for card blocks without modifiers
+ * automates event based effects for card blocks without modifiers
  * @extends CardAbstract
  */
 export default class Card extends CardAbstract {
-    /**
-     * empty post transform function
-     * @override
-     * @protected
-     * @returns {void}
-     */
-    _postTransformFunction() {
-        //in a card without a modfier, nothing happens after the
-        //transformation
+    constructor() {
+        // in cards without modifiers, nothing happens
+        // after the transformation, thus the empty function
+        super('', () => {});
     }
 }

blocks/card/CardAbstract.js

@@ -1,7 +1,7 @@
-import TC
-    from '../../js/transformationNew/TransformationController.js';
+import CT
+    from './CardTransformable.js';
 import TF
-    from '../../js/transformation/TransformationFunctions.js';
+    from '../../js/transformationNew/TransformationFunctions.js';
 import LA
     from '../../js/math/LinearAlgebra.js';
 
@@ -11,19 +11,27 @@ import LA
  * @abstract
  * @extends TransformationController
  */
-export default class cardAbstract extends TC {
+export default class cardAbstract {
     /**
      * @param {String} [modifier = ''] Modifier of the card block.
      *   Default '' means mo modifier.
+     * @param {function} postTransformFunction for examples, see
+     *   {js/transformation/TransformableElement/
+     *   PostTransformFunctions.js}
      * @returns {void}
      */
-    constructor(modifier = '') {
-        super(
-            document.body,
-            `.card${modifier} > .card__inner`
-        );
+    constructor(
+        modifier = '',
+        postTransformFunction,
+        transformationFunction = cardAbstract._transformationFunction) {
+
+        this._throwIfAbstractClass();
 
-        console.log(this);
+        this._ct = new CT(
+            modifier,
+            postTransformFunction,
+            transformationFunction
+        );
     }
 
     /**
@@ -38,7 +46,7 @@ export default class cardAbstract extends TC {
      * @returns {string} transformation with adjusted scale and 3d
      *   rotation
      */
-    _transformationFunction(args) {
+    static _transformationFunction(args) {
         const
             rotAxis = LA.vector(args.transformOrigin, args.mousePosition),
             rotation =
@@ -69,38 +77,15 @@ export default class cardAbstract extends TC {
         };
     }
 
-    /**
-     * in any implementation, override this function with a function that
-     * does what should happen after transforming the element (eg.
-     * setting the correct background to the parent element)
-     * @see {PostTransformFunctions}
-     * @abstract
-     * @protected
-     * @param {event} event - event that caused the transformation
-     * @param {TransformableElement} element - element that was
-     *   transformed
-     * @returns {void}
-     */
-    _postTransformFunction(event, element) {
-        //look for implementation examples in
-        //  'js/transformation/TransformableElement/
-        //  PostTransformFunctions.js'
-        this._throwIfAbstractFunction();
-    }
-
     /**
      * more specific version of {TransformationController}'s
      * mousemoveEventTransform that already specifies where to find the
      * passed transformation functions and what elements it applies to
      * @see TransformationController
      * @returns {void}
      */
-    mousemoveEventTransform() {
-        super.mousemoveEventTransform(
-            this._transformationFunction,
-            '*',
-            this._postTransformFunction
-        );
+    mousemoveEvent() {
+        this._ct.mousemoveEventTransform();
     }
 
     /**
@@ -114,24 +99,4 @@ export default class cardAbstract extends TC {
             throw new Error('cannot call functions in abstract class');
         }
     }
-
-    /**
-     * Helper function that always throws an error. Override the method
-     * which calls this to avoid that.
-     * @private
-     * @throws {Error} 'cannot call functions in abstract class' if class
-     *   name ends on 'Abstract'
-     * @throws {Error} 'cannot call function in child class of abstract
-     *   class that does not override the abstract function' in any other
-     *   case
-     * @returns {void}
-     */
-    _throwIfAbstractFunction() {
-        this._throwIfAbstractClass();
-
-        throw new Error(
-            'cannot call function in child class of abstract class that ' +
-            'does not override the abstract function'
-        );
-    }
 }

blocks/card/CardTransformable.js

@@ -0,0 +1,46 @@
+import TC
+    from '../../js/transformationNew/TransformationController.js';
+
+/**
+ * Base for the transformation controller for card blocks, which automates
+ * the 3d effect
+ * @abstract
+ * @extends TransformationController
+ */
+export default class cardTransformable extends TC {
+    /**
+     * @param {String} [modifier = ''] Modifier of the card block.
+     *   Default '' means mo modifier.
+     * @returns {void}
+     */
+    constructor(
+        modifier = '',
+        postTransformFunction, 
+        transformationFunction) {
+
+        super(
+            document.body,
+            `.card${modifier} > .card__inner`
+        );
+
+        this._postTransformFunction = postTransformFunction;
+        this._transformationFunction = transformationFunction;
+
+        console.log(this);
+    }
+
+    /**
+     * more specific version of {TransformationController}'s
+     * mousemoveEventTransform that already specifies where to find the
+     * passed transformation functions and what elements it applies to
+     * @see TransformationController
+     * @returns {void}
+     */
+    mousemoveEventTransform() {
+        super.mousemoveEventTransform(
+            this._transformationFunction,
+            '*',
+            this._postTransformFunction
+        );
+    }
+}

blocks/card/card.js

@@ -4,7 +4,7 @@ import CardProjects from './Card--projects.js';
 
 
 window.addEventListener('load', () => {
-    new CardProjects().mousemoveEventTransform();
-    new CardMain().mousemoveEventTransform();
-    new Card().mousemoveEventTransform();
+    new CardProjects().mousemoveEvent();
+    new CardMain().mousemoveEvent();
+    new Card().mousemoveEvent();
 });