13-20

Author: marcoSven

13 - Slide in on Scroll/index-START.html

@@ -58,6 +58,70 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
+    class slideIn {
+      constructor(className) {
+        this.images = document.getElementsByClassName(className);
+        this.events = 'bind';
+      }
+
+      set events(type) {
+        const handlers = this.handlers = this.handlers || {},
+          eventHandlers = [
+            {
+              context: window,
+              type : 'scroll',
+              callback : 'checkSlide',
+              option : true,
+              deBounce: debounce
+            }
+          ],
+          isFrozen = Object.isFrozen(handlers);
+
+        eventHandlers.forEach( h => {
+          const func = this[h.callback].bind(this),
+            callback = 'function' == typeof h.deBounce ? h.deBounce( func ) : func;
+
+          h.callback = isFrozen ? handlers[h.callback] : handlers[h.callback] = callback;
+          return this[type](h);
+        });
+
+        Object.freeze(handlers)
+
+      }
+
+      bind(listen) {
+        listen.context.addEventListener( listen.type, listen.callback, listen.option )
+      }
+
+      unbind(listen) {
+        listen.context.removeEventListener( listen.type, listen.callback, listen.option )
+      }
+
+      showImage(image) {
+        image.classList.add('active');
+      }
+
+      hideImage(image) {
+        image.classList.remove('active');
+      }
+
+      checkSlide(e){
+        Array.prototype.forEach.call(this.images, (image, index) => {
+          const domRect = image.getBoundingClientRect(),
+            halfWayToTop = domRect.bottom - domRect.height / 2;
+
+            if ( halfWayToTop <= window.innerHeight  && domRect.bottom > 0) {
+              this.showImage(image)
+            } else {
+              this.hideImage(image)
+            }
+        })
+
+      }
+    }
+
+    new slideIn('slide-in');
+
   </script>
 
   <style>
@@ -68,11 +132,11 @@ <h1>Slide in on Scroll</h1>
       font-size: 20px;
       font-weight: 200;
     }
-    
+
     body {
       margin: 0;
     }
-    
+
     *, *:before, *:after {
       box-sizing: inherit;
     }
@@ -107,7 +171,7 @@ <h1>Slide in on Scroll</h1>
     .align-left.slide-in {
       transform: translateX(-30%) scale(0.95);
     }
-    
+
     .align-right.slide-in {
       transform: translateX(30%) scale(0.95);
     }

14 - JavaScript References VS Copying/index-START.html

@@ -16,10 +16,20 @@
 
     // You might think we can just do something like this:
 
+    const playersTwo = players;
+
     // however what happens when we update that array?
 
+    playersTwo.push('Seed');
+
     // now here is the problem!
 
+    console.log( 'players: ', players );
+
+    players.splice(-1,1);
+
+    console.log( 'restored players: ', players );
+
     // oh no - we have edited the original array too!
 
     // Why? It's because that is an array reference, not an array copy. They both point to the same array!
@@ -28,10 +38,30 @@
 
     // one way
 
-    // or create a new array and concat the old one in
+    const playerSlice = players.slice();
+
+    playerSlice.push('Seed Slice');
+
+    console.log( 'playerSlice: ', playerSlice );
 
+    // or create a new array and concat the old one in
+    const playerConcat = [].concat(players);
+    playerConcat.push('Seed concat');
+    console.log( 'playerConcat: ', playerConcat );
     // or use the new ES6 Spread
 
+    const playersSpread = [...players];
+
+    playersSpread.push('seed')
+
+    console.log( 'playersSpread: ', playersSpread );
+
+    console.log( 'players: ', players );
+
+    playerFrom = Array.from(players);
+
+    console.log( 'playerFrom: ', playerFrom );
+
     // now when we update it, the original one isn't changed
 
     // The same thing goes for objects, let's say we have a person object
@@ -44,8 +74,18 @@
 
     // and think we make a copy:
 
+    personRef = person;
+
+    personRef.age = 88
+
+    console.log( 'person: ', person );
+
     // how do we take a copy instead?
 
+    personCopy = Object.assign({},person, {age : 80})
+    console.log( 'personCopy: ', personCopy );
+    console.log( 'person: ', person );
+
     // We will hopefully soon see the object ...spread
 
     // Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.