add event on window resize to scale the loader

Signed-off-by: Oleksii Kurinnyi <okurinnyi@codenvy.com>

dashboard/src/app/ide/ide-loader/ide-loader.html

@@ -1,7 +1,7 @@
 <div class="ide-loader" layout="column" layout-align="center center">
   <che-loader layout="column" layout-align="center center">
     <!--crane and terminals-->
-    <div class="che-loader-animation-panel main-page" layout="row" flex="">
+    <div class="che-loader-animation-panel main-page" layout="row" flex>
       <div layout="column"
            hide-xs hide-sm
            layout-align="end start">

dashboard/src/app/ide/ide-loader/ide-loader.styl

@@ -35,21 +35,3 @@ ide-loader#ide-loader.ng-hide
 .ide-loader-download-link
   margin-top 20px
   margin-right 35px
-
-@media (min-height: 800px) and (max-height: 959px) and (min-width: 1600px), (min-height: 960px) and (min-width: 960px) and (max-width: 1599px)
-  .ide-loader-back-link
-    margin-left 90px
-
-@media (min-height: 720px) and (max-height: 799px), (min-height: 800px) and (max-height: 959px) and (min-width: 960px) and (max-width: 1599px)
-  .ide-loader-back-link
-    margin-left 80px
-
-@media (max-height: 719px)
-  .ide-loader-back-link
-    margin-left 70px
-
-@media (max-width:959px), (orientation: portrait)
-  .ide-loader-back-link
-    margin-left 8px
-  .ide-loader-download-link
-    margin-right 8px

dashboard/src/components/widget/loader/che-loader-crane.directive.js

@@ -20,8 +20,9 @@ export class CheLoaderCrane {
    * Default constructor that is using resource
    * @ngInject for Dependency injection
    */
-  constructor($timeout) {
+  constructor($timeout, $window) {
     this.$timeout = $timeout;
+    this.$window = $window;
     this.restrict = 'E';
     this.replace = true;
     this.templateUrl = 'components/widget/loader/che-loader-crane.html';
@@ -36,13 +37,22 @@ export class CheLoaderCrane {
   }
 
   link($scope, element) {
-    let craneEl = element.find('.che-loader-crane'),
-      cargoEl = element.find('#che-loader-crane-load'),
+    let jqCrane = element.find('.che-loader-crane'),
+      craneHeight = jqCrane.height(),
+      craneWidth = jqCrane.width(),
+      jqCraneLoad = element.find('#che-loader-crane-load'),
+      jqCraneScaleWrap = element.find('.che-loader-crane-scale-wrapper'),
+      jqCreateProjectContentPage = angular.element('#create-project-content-page'),
+      jqBody = angular.element(document).find('body'),
+      scaleStep = 0.05,
+      scaleMin = 0.6,
+
       oldSteps = [],
       newStep,
       animationStopping = false,
       animationRunning = false;
 
+
     $scope.$watch(() => {
       return $scope.step;
     }, (newVal) => {
@@ -53,7 +63,7 @@ export class CheLoaderCrane {
         animationStopping = true;
 
         if (!$scope.switchOnIteration) {
-          // stop animation immediately if it shouldn't wait untill next iteration
+          // stop animation immediately if it shouldn't wait until next iteration
           setNoAnimation();
         }
       }
@@ -66,7 +76,7 @@ export class CheLoaderCrane {
       newStep = newVal;
 
       // go to next step
-      // if animation hasn't run yet or it shouldn't wait untill next iteration
+      // if animation hasn't run yet or it shouldn't wait until next iteration
       if (!animationRunning || !$scope.switchOnIteration) {
         setAnimation();
         setCurrentStep();
@@ -77,7 +87,36 @@ export class CheLoaderCrane {
       }
     });
 
-    if (!!$scope.switchOnIteration) {
+    let destroyResizeEvent;
+    $scope.$watch(() => {
+      return element.find('.che-loader-crane:visible').length;
+    }, (craneIsVisible) => {
+
+      if (!craneIsVisible) {
+        // destroy event
+        if (angular.isFunction(destroyResizeEvent)) {
+          destroyResizeEvent();
+        }
+        return;
+      }
+
+      // initial resize
+      this.$timeout(() => {
+        setCraneSize();
+      },0);
+
+      let timeoutPromise;
+      destroyResizeEvent = angular.element(this.$window).bind('resize', () => {
+        if (timeoutPromise) {
+          this.$timeout.cancel(timeoutPromise);
+        }
+        timeoutPromise = this.$timeout(() => {
+          setCraneSize();
+        }, 50);
+      });
+    });
+
+    if ($scope.switchOnIteration) {
       element.find('.che-loader-animation.trolley-block').bind('animationstart', () => {
         animationRunning = true;
       });
@@ -91,17 +130,82 @@ export class CheLoaderCrane {
       });
     }
 
-    let setAnimation = () => {
-        craneEl.removeClass('che-loader-no-animation');
+    let applyScale = (jqElement, scale) => {
+        if (jqElement.nodeType) {
+          jqElement = angular.element(jqElement);
+        }
+        jqElement.css('transform', 'scale('+scale+')');
+        jqElement.css('height', craneHeight * scale);
+        jqElement.css('width', craneWidth * scale);
+      },
+      hasScrollMoreThan = (domElement,diff) => {
+        if (!domElement.nodeType) {
+          domElement = domElement[0];
+        }
+        if (!domElement) {
+          return;
+        }
+        return domElement.scrollHeight - domElement.offsetHeight > diff;
+      },
+      isVisibilityPartial = (domElement) => {
+        if (!domElement.nodeType) {
+          domElement = domElement[0];
+        }
+        if (!domElement) {
+          return;
+        }
+        let rect = domElement.getBoundingClientRect();
+        return rect.top < 0;
+      },
+      setCraneSize = () => {
+        let scale = scaleMin;
+
+        applyScale(jqCraneScaleWrap, scale);
+        jqCraneScaleWrap.css('display','block');
+
+        // do nothing if loader is hidden by hide-sm directive
+        if (element.find('.che-loader-crane-scale-wrapper:visible').length === 0) {
+          return;
+        }
+
+        // hide loader if there is scroll on minimal scale
+        if (
+          // check loader visibility on ide loading or factory loading
+          (isVisibilityPartial(jqCrane)
+          // check whether scroll is present on project creating page
+          || hasScrollMoreThan(jqBody, 5) || hasScrollMoreThan(jqCreateProjectContentPage, 5))
+          && scale === scaleMin) {
+          jqCraneScaleWrap.css('display','none');
+          return;
+        }
+
+        while (scale < 1) {
+          applyScale(jqCraneScaleWrap, scale + scaleStep);
+
+          // check for scroll appearance
+          if (
+            // check loader visibility on ide loading or factory loading
+            isVisibilityPartial(jqCrane)
+            // check whether scroll is present on project creating page
+            || hasScrollMoreThan(jqBody, 5) || hasScrollMoreThan(jqCreateProjectContentPage, 5)) {
+            applyScale(jqCraneScaleWrap, scale);
+            break;
+          }
+
+          scale = scale + scaleStep;
+        }
+      },
+      setAnimation = () => {
+        jqCrane.removeClass('che-loader-no-animation');
       },
       setNoAnimation = () => {
         animationRunning = false;
-        craneEl.addClass('che-loader-no-animation');
+        jqCrane.addClass('che-loader-no-animation');
       },
       setCurrentStep = () => {
         for (let i = 0; i < oldSteps.length; i++) {
-          craneEl.removeClass('step-' + oldSteps[i]);
-          cargoEl.removeClass('layer-' + oldSteps[i]);
+          jqCrane.removeClass('step-' + oldSteps[i]);
+          jqCraneLoad.removeClass('layer-' + oldSteps[i]);
         }
         oldSteps.length = 0;
 
@@ -112,9 +216,8 @@ export class CheLoaderCrane {
           currentLayer.removeAttr('style');
         },500);
 
-        craneEl.addClass('step-' + newStep);
-        cargoEl.addClass('layer-' + newStep);
-      }
+        jqCrane.addClass('step-' + newStep);
+        jqCraneLoad.addClass('layer-' + newStep);
+      };
   }
-
 }

dashboard/src/components/widget/loader/che-loader-crane.styl

@@ -294,7 +294,6 @@ $che-crane-width = ($load-jib-1-width + $load-jib-2-width + $load-jib-3-width +
   bottom -100px
 
 .che-loader-crane-scale-wrapper
-  position relative
   transform-origin top left
   height $crane-height
   width $che-crane-width
@@ -1007,42 +1006,6 @@ for $index, $layer-props in $layers-hash
     .layer-ropes
       animation-name ropes
 
-@media (min-height: 960px) and (min-width: 1600px)
-  .che-loader-panel .che-loader-crane-scale-wrapper
-    transform scale3D(0.9,0.9,0.9)
-    width ($che-crane-width * 0.9)
-    height ($crane-height * 0.9)
-
-@media (min-height: 800px) and (max-height: 959px) and (min-width: 1600px), (min-height: 960px) and (min-width: 960px) and (max-width: 1599px)
-  .che-loader-crane-scale-wrapper
-    transform scale3D(0.9,0.9,0.9)
-    width ($che-crane-width * 0.9)
-    height ($crane-height * 0.9)
-  .che-loader-panel .che-loader-crane-scale-wrapper
-    transform scale3D(0.8,0.8,0.8)
-    width ($che-crane-width * 0.8)
-    height ($crane-height * 0.8)
-
-@media (min-height: 720px) and (max-height: 799px), (min-height: 800px) and (max-height: 959px) and (min-width: 960px) and (max-width: 1599px)
-  .che-loader-crane-scale-wrapper
-    transform scale3D(0.8,0.8,0.8)
-    width ($che-crane-width * 0.8)
-    height ($crane-height * 0.8)
-  .che-loader-panel .che-loader-crane-scale-wrapper
-    transform scale3D(0.7,0.7,0.7)
-    width ($che-crane-width * 0.7)
-    height ($crane-height * 0.7)
-
-@media (max-height: 719px)
-  .che-loader-crane-scale-wrapper
-    transform scale3D(0.7,0.7,0.7)
-    width ($che-crane-width * 0.7)
-    height ($crane-height * 0.7)
-  .che-loader-panel .che-loader-crane-scale-wrapper
-    transform scale3D(0.7,0.7,0.7)
-    width ($che-crane-width * 0.7)
-    height ($crane-height * 0.7)
-
 @media (orientation: portrait)
   .che-loader-crane-scale-wrapper
     transform none