feat(background): add blurred bg for panels

src/app/theme/components/baPanel/baPanel.directive.js

@@ -12,10 +12,10 @@
       .directive('baPanel', baPanel);
 
   /** @ngInject */
-  function baPanel(baPanel) {
+  function baPanel(baPanel, $document, $window) {
     return angular.extend({}, baPanel, {
       template: function(el, attrs) {
-        var res = '<div class="panel panel-white invisible ' + (attrs.baPanelClass || '') + '" zoom-in>';
+        var res = '<div class="panel panel-white invisible ' + (attrs.baPanelClass || '') + '" zoom-in ba-panel-blur>';
         res += baPanel.template(el, attrs);
         res += '</div>';
         return res;

src/app/theme/components/baPanel/baPanelBlur.directive.js

@@ -0,0 +1,53 @@
+/**
+ * @author v.lugovsky
+ * created on 15.01.2016
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.theme')
+      .directive('baPanelBlur', baPanelBlur);
+
+  /** @ngInject */
+  function baPanelBlur(baPanelBlurHelper, $window, $document) {
+    var bodyBgSize;
+
+    baPanelBlurHelper.bodyBgLoad().then(function() {
+      bodyBgSize = baPanelBlurHelper.getBodyBgImageSizes();
+    });
+
+    $window.addEventListener('resize', function() {
+      bodyBgSize = baPanelBlurHelper.getBodyBgImageSizes();
+    });
+
+    return {
+      restrict: 'A',
+      link: function($scope, elem) {
+        baPanelBlurHelper.bodyBgLoad().then(function() {
+          setTimeout(recalculatePanelStyle);
+        });
+        $document.on('scroll', recalculatePanelStyle);
+        $window.addEventListener('resize', recalculatePanelStyle);
+
+        $scope.$on('$destroy', function() {
+          $window.removeEventListener('resize', recalculatePanelStyle);
+        });
+
+        function recalculatePanelStyle() {
+          console.log(bodyBgSize);
+          if (!bodyBgSize) {
+            return;
+          }
+          var position = elem[0].getBoundingClientRect();
+          console.log(position);
+          elem.css({
+            backgroundSize: Math.round(bodyBgSize.width) + 'px ' + Math.round(bodyBgSize.height) + 'px',
+            backgroundPosition: Math.floor(-position.left + bodyBgSize.positionX) + 'px ' + Math.floor(-position.top + bodyBgSize.positionY) + 'px'
+          });
+        }
+
+      }
+    };
+  }
+
+})();

src/app/theme/components/baPanel/baPanelBlurHelper.service.js

@@ -0,0 +1,46 @@
+/**
+ * @author v.lugovsky
+ * created on 15.01.2016
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.theme')
+      .service('baPanelBlurHelper', baPanelBlurHelper);
+
+  /** @ngInject */
+  function baPanelBlurHelper($q) {
+    var res = $q.defer();
+    var computedStyle = getComputedStyle(document.body);
+    var image = new Image();
+    image.src = computedStyle.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2');
+    image.onerror = function() {
+      res.reject();
+    };
+    image.onload = function() {
+      res.resolve();
+    };
+
+    this.bodyBgLoad = function() {
+      return res.promise;
+    };
+
+    this.getBodyBgImageSizes = function() {
+      var elemW = document.documentElement.clientWidth;
+      var elemH = document.documentElement.clientHeight;
+      var imgRatio = (image.height / image.width);       // original img ratio
+      var containerRatio = (elemH / elemW);     // container ratio
+
+      var finalHeight, finalWidth;
+      if (containerRatio > imgRatio) {
+        finalHeight = elemH;
+        finalWidth = (elemH / imgRatio);
+      } else {
+        finalWidth = elemW;
+        finalHeight = (elemW * imgRatio);
+      }
+      return { width: finalWidth, height: finalHeight, positionX: (elemW - finalWidth) / 2, positionY: (elemH - finalHeight) / 2 };
+    };
+  }
+
+})();

src/sass/theme/bootstrap-overrides/_panel.scss

@@ -7,12 +7,12 @@ $panel-heading-font-size: 16px;
   background-color: $panel-bg;
   color: $default-text;
   position: relative;
-  transition: all 0.2s ease;
+  //transition: all 0.2s ease;
   margin-bottom: 24px;
 
-  &:hover {
+  /*&:hover {
     background: $panel-bg-hover;
-  }
+  }*/
   &.animated {
     animation-duration: 0.5s;
   }
@@ -60,6 +60,9 @@ $panel-heading-font-size: 16px;
 }
 
 .panel-white {
+  $blurredBgUrl: $images-root + 'blur-bg-blurred.jpg';
+  background: url($blurredBgUrl);
+  background-size: cover;
   > .panel-heading {
     background-color: transparent;
     border: none;

src/sass/theme/conf/_mixins.scss

@@ -51,8 +51,8 @@
 }
 
 @mixin main-background() {
-  $mainBgUrl: $images-root + 'green-bg.jpg';
-  background: url($mainBgUrl) no-repeat top center fixed;
+  $mainBgUrl: $images-root + 'blur-bg.jpg';
+  background: url($mainBgUrl) no-repeat center center fixed;
   background-size: cover;
 }