rendering background position in the control panel

andrewplummer · Oct 14, 2017 · e842617 · e842617
1 parent 33c7cad
commit e842617
Show file tree

Hide file tree

Showing 10 changed files with 212 additions and 64 deletions.
diff --git a/positionable.js b/positionable.js
diff --git a/test/helpers/fixtures.js b/test/helpers/fixtures.js
@@ -44,6 +44,10 @@ function appendSubpixelTransformedBox(className, parent) {
   return appendFixture(['box', 'subpixel-transformed-box', className], parent);
 }
 
+function appendBackgroundImageBox(className, parent) {
+  return appendFixture(['box', 'background-image-box', className], parent);
+}
+
 function appendNestedBox() {
   var container = appendRelativeBox();
   return appendFixture(['box', 'absolute-box'], container);

diff --git a/test/index.html b/test/index.html
@@ -32,7 +32,6 @@
     <script src="tests/positionable-element-alignment-manager.js"></script>
     <script src="tests/control-panel.js"></script>
     <script src="tests/position-handle.js"></script>
-    <script src="tests/background-image.js"></script>
     <script src="tests/rotation-handle.js"></script>
     <script src="tests/resize-handle.js"></script>
     <script src="tests/cursor-manager.js"></script>
@@ -43,6 +42,7 @@
     <script src="tests/browser-event-target.js"></script>
     <script src="tests/css-box.js"></script>
     <script src="tests/css-positioning-property.js"></script>
+    <script src="tests/css-background-position.js"></script>
     <script>
 
       ShadowDomInjector.setBasePath('../');

diff --git a/test/styles/elements.css b/test/styles/elements.css
@@ -51,6 +51,10 @@
   transform: rotate(45.3288deg) translate(20.23428px, 30.206238px);
 }
 
+.background-image-box {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1QUY1NjQ3REE4RTgxMUU3QkU2MTkwQTc2QjM2RDgxNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1QUY1NjQ3RUE4RTgxMUU3QkU2MTkwQTc2QjM2RDgxNCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVBRjU2NDdCQThFODExRTdCRTYxOTBBNzZCMzZEODE0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjVBRjU2NDdDQThFODExRTdCRTYxOTBBNzZCMzZEODE0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+jbJp8wAAABJJREFUeNpiYGBg+P//P0CAAQAGAQL+we4SrgAAAABJRU5ErkJggg==") 20px 40px no-repeat;
+}
+
 .align-box-1 {
   top: 50px;
   left: 80px;

diff --git a/test/tests/control-panel.js b/test/tests/control-panel.js
@@ -62,7 +62,13 @@ describe('ControlPanel', function(uiRoot) {
 
   // --- Rendering Element Area
 
+  it('should not render element components if area not active', function() {
+    panel.renderElementSelector('.foo');
+    assert.equal(getUiElement(document.documentElement, '#element-area-selector').textContent, '');
+  });
+
   it('should render element area with single element', function() {
+    panel.showElementArea();
     panel.renderElementSelector('.foo');
     panel.renderElementPosition('50px, 50px');
     panel.renderElementDimensions('100px, 100px');
@@ -76,6 +82,7 @@ describe('ControlPanel', function(uiRoot) {
   });
 
   it('should not render elements with empty fields', function() {
+    panel.showElementArea();
     panel.renderElementZIndex('');
     panel.renderElementTransform('');
     assert.equal(getUiElement(document.documentElement, '#element-area-zindex').style.display, 'none');
@@ -90,6 +97,14 @@ describe('ControlPanel', function(uiRoot) {
     assert.equal(getUiElement(document.documentElement, '#element-area-transform').textContent, '50deg');
   });
 
+  it('should render background position and hide when not active', function() {
+    var className = 'control-panel--element-background-active';
+    panel.showElementArea();
+    panel.renderElementBackgroundPosition('20px 40px');
+    assert.equal(getUiElement(document.documentElement, '#element-area-background-position').textContent, '20px 40px');
+    assert.isTrue(getUiElement(document.documentElement, '#control-panel').classList.contains(className));
+  });
+
   // --- Rendering Align Area
 
   it('should render multiple selected', function() {

diff --git a/test/tests/background-image.js → test/tests/css-background-position.js b/test/tests/background-image.js → test/tests/css-background-position.js
@@ -1,7 +1,7 @@
 
-describe('BackgroundImage', function(uiRoot) {
+describe('CSSBackgroundPosition', function(uiRoot) {
 
-  var el, backgroundImage;
+  var el, backgroundPosition;
 
   setup(function() {
     el = appendAbsoluteBox();
@@ -12,15 +12,15 @@ describe('BackgroundImage', function(uiRoot) {
   });
 
   it('should not render a null background position', function() {
-    backgroundImage = BackgroundImage.fromStyles('', 'initial');
-    backgroundImage.render(el.style);
+    backgroundPosition = CSSBackgroundPosition.fromStyles('', 'initial');
+    backgroundPosition.render(el.style);
     assert.equal(el.style.backgroundPosition, '');
   });
 
   it('should render a set background position', function() {
-    backgroundImage = BackgroundImage.fromStyles('', 'initial');
-    backgroundImage.move(100, 100);
-    backgroundImage.render(el.style);
+    backgroundPosition = CSSBackgroundPosition.fromStyles('', 'initial');
+    backgroundPosition.move(100, 100);
+    backgroundPosition.render(el.style);
     assert.equal(el.style.backgroundPosition, '100px 100px');
   });
 

diff --git a/test/tests/positionable-element-manager.js b/test/tests/positionable-element-manager.js
@@ -60,6 +60,20 @@ describe('PositionableElementManager', function(uiRoot) {
     onRotationDragStop() {
     }
 
+    // --- Update Events
+
+    onPositionUpdated() {
+    }
+
+    onBackgroundPositionUpdated() {
+    }
+
+    onDimensionsUpdated() {
+    }
+
+    onRotationUpdated() {
+    }
+
   }
 
   setup(function() {

diff --git a/test/tests/positionable-element-output-manager.js b/test/tests/positionable-element-output-manager.js
@@ -37,6 +37,11 @@ describe('PositionableElementOutputManager', function(uiRoot) {
     return new PositionableElement(el);
   }
 
+  function appendBackgroundImagePositionableElement() {
+    var el = appendBackgroundImageBox();
+    return new PositionableElement(el);
+  }
+
   it('should get correct selector', function() {
     var element1 = appendPositionableElement();
     var element2 = appendPositionableElement();
@@ -102,4 +107,9 @@ describe('PositionableElementOutputManager', function(uiRoot) {
     assert.equal(manager.getTransformHeader(element), '45.33deg, 20.23px, 30.21px');
   });
 
+  it('should get correct background image', function() {
+    var element = appendBackgroundImagePositionableElement();
+    assert.equal(manager.getBackgroundPositionHeader(element), '20px, 40px');
+  });
+
 });
diff --git a/ui.css b/ui.css
@@ -158,6 +158,8 @@ h1,h2,h3 {
 
 .element-area-selector {
   font-size: 28px;
+  line-height: 1;
+  margin-bottom: .2em;
 }
 
 .element-area-properties {
@@ -170,6 +172,33 @@ h1,h2,h3 {
   margin-right: .2em;
 }
 
+.element-area-background-position {
+  font-size: 14px;
+  transition: opacity 300ms linear;
+  opacity: 0;
+  margin-top: 3px;
+}
+
+.element-area-background-position:after {
+  content: '';
+  display: inline-block;
+  vertical-align: middle;
+  width: 14px;
+  height: 14px;
+  background: url('chrome-extension://__MSG_@@extension_id__/images/icons/background.svg') no-repeat;
+  background-size: contain;
+  margin-left: 5px;
+  opacity: .6;
+}
+
+.control-panel--element-background-active {
+  height: 130px;
+}
+
+.control-panel--element-background-active .element-area-background-position {
+  opacity: 1;
+}
+
 /*---------------------------] Alignment Area [-----------------------*/
 
 .control-panel--align-active {

diff --git a/ui.html b/ui.html
@@ -17,6 +17,7 @@ <h3 id="element-area-selector" class="element-area-selector"></h3>
       <span class="element-area-property" id="element-area-zindex" title="Z-Index"></span>
       <span class="element-area-property" id="element-area-transform" title="Transform (Rotation - Translation)"></span>
     </p>
+    <p id="element-area-background-position" class="element-area-background-position" title="Background Position"></p>
   </div>
 
   <div class="control-panel-area" id="align-area">