mojs-player: move from rems to px

legomushroom · legomushroom · commit a30481c0f070 · 2016-12-25T22:35:57.000-06:00
diff --git a/README.md b/README.md
@@ -2,9 +2,7 @@
 
 <img src="https://github.com/legomushroom/mojs-player/blob/master/mockups/mojs-player@x4.png?raw=true" alt="mojs-player" />
 
-Player controls for [mojs](mojs.io). Intended to help you to craft `mojs` animation sequences. To be clear, this player is not needed to play `mojs` animations.  
-
-It is just a helper tool that gives you the ability to:
+Player controls for [mojs](mojs.io). Intended to help you to craft `mojs` animation sequences. To be clear, this player is not needed to play `mojs` animations. It is just a helper tool that gives you the ability to:
  - control your sequences with `GUI` while working on them
  - it saves the current progress of your animation thus you don't loose the `focus`
  - it gives you `bounds` to constrain `focus point` of your animation
@@ -44,8 +42,7 @@ import MojsPlayer from 'mojs-player';
 
 If you installed it with script link - you should have `MojsPlayer` global.
 
-
-## API
+## Usage
 
 Construct `MojsPlayer` and pass your main `Tween/Timeline` as the `add` option:
 
diff --git a/build/mojs-player.js b/build/mojs-player.js
diff --git a/css/assets/globals.postcss.css b/css/assets/globals.postcss.css
@@ -1,6 +1,7 @@
 
 @import './colors.postcss.css';
 
-$PX:      1/16rem;
+/*$PX:      1/16rem;*/
+$PX:      1px;
 $GS:      calc( 10 * $PX );
 $BRADIUS: calc( 3 * $PX );
diff --git a/css/blocks/handle.postcss.css b/css/blocks/handle.postcss.css
@@ -5,26 +5,26 @@ $handleHeight: 13;
 .handle {
   width:          calc( $handleHeight * $PX );
   height:         calc( $handleHeight * $PX );
-  
+
   cursor:         pointer;
   transform:      translateX(0);
-  /*backface-visibility: hidden;*/
-  
+  backface-visibility: hidden;
+
   &__inner,
   &__shadow {
     position:       absolute;
     left:           0;
     top:            0;
     z-index:        1;
-    
+
     width:          100%;
     height:         100%;
     border-radius:  50%;
     cursor:         pointer;
     /*transform:      translateZ(0);*/
-    backface-visibility: hidden;
+    /*backface-visibility: hidden;*/
   }
-  
+
   &__inner {
     background:     #FFF;
   }
@@ -48,7 +48,7 @@ $handleHeight: 13;
     opacity:        .85;
     transform:      scale(1);
   }
-  
+
   $width:  9;
   $height: 20;
   &.is-bound {
@@ -96,4 +96,3 @@ $handleHeight: 13;
     }
   }
 }
-
diff --git a/css/blocks/handle.postcss.css.json b/css/blocks/handle.postcss.css.json
@@ -1 +1 @@
-{"handle":"_handle_q1som_5","handle__inner":"_handle__inner_q1som_1","handle__shadow":"_handle__shadow_q1som_1","is-bound":"_is-bound_q1som_54","is-inversed":"_is-inversed_q1som_82"}
+{"handle":"_handle_8vrrs_5","handle__inner":"_handle__inner_8vrrs_1","handle__shadow":"_handle__shadow_8vrrs_1","is-bound":"_is-bound_8vrrs_54","is-inversed":"_is-inversed_8vrrs_82"}
diff --git a/css/blocks/mojs-player.postcss.css b/css/blocks/mojs-player.postcss.css
@@ -9,7 +9,11 @@
   height:         calc( 40 * $PX );
   background:     rgba( 58, 8, 57, .85 );
   z-index:        100;
-  
+
+  * {
+    box-sizing: border-box;
+  }
+
   $btnWidth: 35;
   $btnCount: 5;
   $leftWidth: calc( $btnCount * $btnWidth * $PX );
@@ -22,7 +26,7 @@
   &__mid {
     position:     absolute;
     left:         $leftWidth;
-    right:        calc( $btnWidth * $PX );
+    right:        calc( $btnWidth/2 * $PX );
     overflow:     hidden;
     padding:      0 calc( 20 * $PX );
   }
@@ -38,11 +42,16 @@
     bottom:       100%;
   }
 
+  &__mojs-logo {
+    [data-component="icon"] {
+      fill: $c-orange;
+    }
+  }
+
   &.is-hidden {
     transform:    translateY(100%);
   }
   &.is-transition {
     transition:   all .15s ease-out;
   }
 }
-
diff --git a/css/blocks/mojs-player.postcss.css.json b/css/blocks/mojs-player.postcss.css.json
@@ -1 +1 @@
-{"mojs-player":"_mojs-player_tes6w_4","mojs-player__left":"_mojs-player__left_tes6w_1","mojs-player__mid":"_mojs-player__mid_tes6w_1","mojs-player__right":"_mojs-player__right_tes6w_1","mojs-player__hide-button":"_mojs-player__hide-button_tes6w_1","is-hidden":"_is-hidden_tes6w_41","is-transition":"_is-transition_tes6w_44"}
+{"mojs-player":"_mojs-player_12g93_4","mojs-player__left":"_mojs-player__left_12g93_1","mojs-player__mid":"_mojs-player__mid_12g93_1","mojs-player__right":"_mojs-player__right_12g93_1","mojs-player__hide-button":"_mojs-player__hide-button_12g93_1","mojs-player__mojs-logo":"_mojs-player__mojs-logo_12g93_1","is-hidden":"_is-hidden_12g93_51","is-transition":"_is-transition_12g93_54"}
diff --git a/css/blocks/speed-control.postcss.css b/css/blocks/speed-control.postcss.css
@@ -5,25 +5,26 @@
   position:       relative;
   display:        inline-block;
   height:         calc( 40 * $PX );
-  
-  $pad: 2;
+
+  $pad: 20;
   &__slider {
     position:         absolute;
     bottom:           100%;
     left:             calc( 3 * $PX );
     width:            calc( 30 * $PX );
-    height:           calc( 80 * $PX );
-    padding-top:      calc( $pad * $GS );
-    padding-bottom:   calc( $pad * $GS );
-    
+    height:           calc( (80 + 2*$pad) * $PX );
+    padding-top:      calc( $pad * $PX );
+    padding-bottom:   calc( $pad * $PX );
+
     border-top-right-radius:   $BRADIUS;
     border-top-left-radius:    $BRADIUS;
-    
+
     background:       $c-purple;
-    
+
     $translateSize : calc( -99999999 * $PX );
     transform:        translate($translateSize, $translateSize);
     backface-visibility: hidden;
+
     &:before,
     &:after {
       content:        '';
@@ -50,4 +51,3 @@
 
   }
 }
-
diff --git a/css/blocks/speed-control.postcss.css.json b/css/blocks/speed-control.postcss.css.json
@@ -1 +1 @@
-{"speed-control":"_speed-control_1svrw_4","speed-control__slider":"_speed-control__slider_1svrw_1","speed-control__button":"_speed-control__button_1svrw_1","is-on":"_is-on_1svrw_48"}
+{"speed-control":"_speed-control_1mxm4_4","speed-control__slider":"_speed-control__slider_1mxm4_1","speed-control__button":"_speed-control__button_1mxm4_1","is-on":"_is-on_1mxm4_49"}
diff --git a/css/blocks/track.postcss.css b/css/blocks/track.postcss.css
@@ -5,18 +5,18 @@ $height: 40;
 .track {
   position:           relative;
   height:             100%;
-  
+
   &__track {
     position:         absolute;
     top:              50%;
     left:             0;
-    
+
     width:            100%;
     height:           calc( $PX );
-    
+
     background:       #FFF;
     box-shadow:       calc( $PX ) calc( $PX ) calc( $PX ) rgba(0,0,0,.5);
-    
+
     &:after {
       content:        '';
       position:       absolute;
@@ -35,20 +35,20 @@ $height: 40;
     top:              50%;
     margin-top:       calc( -1 * $PX );
     height:           calc( 3*$PX );
-    width:            1px;
+    width:            0.0625em;
     /*background:       $c-orange;*/
     background:       $c-white;
     z-index:          1;
     transform-origin: left center;
     &:after {
-      content:        '';
+      /*content:        '';*/
       position:       absolute;
       left:           0;
       top:            calc( - $height/2 * $PX );
       width:          100%;
       height:         calc( $height * $PX );
       cursor:         pointer;
-      /*background-color: yellow;*/
+      backface-visibility: hidden;
     }
   }
 
@@ -59,7 +59,8 @@ $height: 40;
     right:            0;
     bottom:           0;
     overflow:         hidden;
-    z-index:          1;
+    /*background:       black;*/
+    /*z-index:          1;*/
   }
 
   &.is-inversed {
@@ -78,13 +79,12 @@ $height: 40;
   &.is-y &__track {
     top:              0;
     left:             50%;
-    
+
     height:           100%;
     width:            calc( $PX );
-    
+
     /*box-shadow:       calc( $PX ) calc( $PX ) calc( $PX ) rgba(0,0,0,.5); */
   }
 
 
 }
-
diff --git a/css/blocks/track.postcss.css.json b/css/blocks/track.postcss.css.json
@@ -1 +1 @@
-{"track":"_track_1inlw_5","track__track":"_track__track_1inlw_1","track__track-progress":"_track__track-progress_1inlw_1","track__ripple":"_track__ripple_1inlw_1","is-inversed":"_is-inversed_1inlw_65","is-bound":"_is-bound_1inlw_74","is-y":"_is-y_1inlw_78"}
+{"track":"_track_1dpwb_5","track__track":"_track__track_1dpwb_1","track__track-progress":"_track__track-progress_1dpwb_1","track__ripple":"_track__ripple_1dpwb_1","is-inversed":"_is-inversed_1dpwb_66","is-bound":"_is-bound_1dpwb_75","is-y":"_is-y_1dpwb_79"}
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
   <body>
     <style>
       :root {
-        font-size: 16px;
+        /*font-size: 16px;*/
         line-height: 1.7;
       }
 
@@ -21,7 +21,7 @@
         background: cyan;
       }
     </style>
-    
+
     <div class="el" id="js-el"></div>
 
     <br />
@@ -38,13 +38,13 @@
       var tw = new mojs.Tween({
         duration:  4000,
         onUpdate (p) {
-          el.style.transform = `translateX(${ 1000 * p }px)`;
+          el.style.transform = `translateX(${ 1000 * p }px) translateZ(0)`;
         }
       });
 
       var tm = new mojs.Timeline;
       tm.add( tw, new mojs.Shape({ delay: 1000, 'left': '50%', top: '50%' }) );
-      
+
       var mojsPlayer = new MojsPlayer({
         add:          tm,
         isPlaying:    true,
@@ -58,4 +58,4 @@
     </script>
 
   </body>
-</html>
+</html>
diff --git a/js/components/handle.babel.js b/js/components/handle.babel.js
@@ -144,7 +144,7 @@ class Handle extends Module {
   */
   _addMainClasses () {
     super._addMainClasses();
-    
+
     let p         = this._props,
         classList = this.el.classList;
 
@@ -295,4 +295,4 @@ class Handle extends Module {
   }
 }
 
-export default Handle;
+export default Handle;
diff --git a/js/components/icon.babel.js b/js/components/icon.babel.js
@@ -26,6 +26,7 @@ class Icon extends Module {
     this._addMainElement();
     this.el.classList.add( CLASSES.icon );
     this.el.classList.add( CLASSES[ `is-${ this._props.size }` ] );
+    this.el.setAttribute('data-component', 'icon');
     this._renderIcon();
   }
   /*
diff --git a/js/components/ripple.babel.js b/js/components/ripple.babel.js
@@ -20,16 +20,28 @@ class Ripple extends Module {
   */
   _render () {
     super._render();
+    this.curtain = document.createElement('div');
+    // this.curtain.style.background = 'rgba(255,255,255,.15)';
+    // this.curtain.style.background = 'yellow';
+    this.curtain.style.position = 'absolute';
+    this.curtain.style.width = '100%';
+    this.curtain.style.height = '100%';
+    this.curtain.style.left = 0;
+    this.curtain.style.top = 0;
+    this.curtain.style.zIndex = 1;
+
+    this.el.appendChild(this.curtain);
+
     this._addRipple();
   }
   /*
     Method to construct ripple object.
     @private
   */
   _addRipple () {
-    this.transit = new mojs.Transit({
+    this.shape = new mojs.Shape({
       parent:       this.el,
-      left: 0,  top: 0,
+      left: 0,  top: this._o.top || 0,
       // strokeWidth:  10,
       strokeWidth:  { 10 : 0 },
       fill:         'none',
@@ -40,6 +52,7 @@ class Ripple extends Module {
       radius:       40,
       scale:        { 0: 1 },
       isShowEnd:    false,
+      // duration:     15000,
       // isForce3d:    true,
       onStart:      () => { this.isStart = true; },
       onUpdate:     this._onUpdate.bind( this ),
@@ -55,7 +68,7 @@ class Ripple extends Module {
     if ( !this._props.withHold ) { return; }
     if ( p >= .15 && this.isStart && !this.isRelease ) {
       this.isStart = false;
-      this.transit.setSpeed( .02 );
+      this.shape.setSpeed( .02 );
     }
   }
   /*
@@ -65,7 +78,7 @@ class Ripple extends Module {
   _release () {
     if ( !this._props.withHold ) { return; }
     this.isRelease = true;
-    this.transit.setSpeed( 1 ).play();
+    this.shape.setSpeed( 1 ).play();
   }
   /*
     Method that should be run on touch serface hold.
@@ -77,7 +90,7 @@ class Ripple extends Module {
         y = ( e.offsetY != null ) ? e.offsetY : e.layerY;
 
     this.isRelease = false;
-    this.transit.tune({ x: x, y: y }).replay();
+    this.shape.tune({ x: x, y: y }).replay();
   }
   /*
     Method that should be run on touch serface cancel.
@@ -86,11 +99,11 @@ class Ripple extends Module {
   _cancel () {
     if ( !this._props.withHold ) { return; }
     this.isRelease = true;
-    this.transit
+    this.shape
       .pause()
       .setSpeed( 1 )
       .playBackward();
   }
 }
 
-export default Ripple;
+export default Ripple;
diff --git a/js/components/track.babel.js b/js/components/track.babel.js
diff --git a/js/mojs-player.babel.js b/js/mojs-player.babel.js
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-{"handle":"_handle_q1som_5","handle__inner":"_handle__inner_q1som_1","handle__shadow":"_handle__shadow_q1som_1","is-bound":"_is-bound_q1som_54","is-inversed":"_is-inversed_q1som_82"}`
	`1`	`+{"handle":"_handle_8vrrs_5","handle__inner":"_handle__inner_8vrrs_1","handle__shadow":"_handle__shadow_8vrrs_1","is-bound":"_is-bound_8vrrs_54","is-inversed":"_is-inversed_8vrrs_82"}`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-{"mojs-player":"_mojs-player_tes6w_4","mojs-player__left":"_mojs-player__left_tes6w_1","mojs-player__mid":"_mojs-player__mid_tes6w_1","mojs-player__right":"_mojs-player__right_tes6w_1","mojs-player__hide-button":"_mojs-player__hide-button_tes6w_1","is-hidden":"_is-hidden_tes6w_41","is-transition":"_is-transition_tes6w_44"}`
	`1`	`+{"mojs-player":"_mojs-player_12g93_4","mojs-player__left":"_mojs-player__left_12g93_1","mojs-player__mid":"_mojs-player__mid_12g93_1","mojs-player__right":"_mojs-player__right_12g93_1","mojs-player__hide-button":"_mojs-player__hide-button_12g93_1","mojs-player__mojs-logo":"_mojs-player__mojs-logo_12g93_1","is-hidden":"_is-hidden_12g93_51","is-transition":"_is-transition_12g93_54"}`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-{"speed-control":"_speed-control_1svrw_4","speed-control__slider":"_speed-control__slider_1svrw_1","speed-control__button":"_speed-control__button_1svrw_1","is-on":"_is-on_1svrw_48"}`
	`1`	`+{"speed-control":"_speed-control_1mxm4_4","speed-control__slider":"_speed-control__slider_1mxm4_1","speed-control__button":"_speed-control__button_1mxm4_1","is-on":"_is-on_1mxm4_49"}`