Merge "Add header to image diff container"
diff --git a/gr-opacity-diff-mode/gr-opacity-diff-mode.html b/gr-opacity-diff-mode/gr-opacity-diff-mode.html
index 0a20ea9..d884ba9 100644
--- a/gr-opacity-diff-mode/gr-opacity-diff-mode.html
+++ b/gr-opacity-diff-mode/gr-opacity-diff-mode.html
@@ -22,43 +22,43 @@
}
img {
display: block;
- margin:auto;
- position: absolute;
height: var(--img-height);
+ margin: auto;
+ position: absolute;
width: var(--img-width);
}
#imageRevision {
opacity: var(--my-opacity-value);
z-index: 1;
}
- #imageDiv {
- position: relative;
- margin: auto;
- width: 500px;
+ #imageDivContainer {
+ display: flex;
+ height: var(--div-height);
+ justify-content: space-around;
}
</style>
- <div id="imageDiv">
+ <div id="imageDivContainer">
<img id="imageBase"/>
- <img id="imageRevision" data-opacity$="{{opacityValue}}"/>
+ <img data-opacity$="{{opacityValue}}" id="imageRevision"/>
</div>
<div>
<label>
<input
id="scaleSizesToggle"
- type="checkbox"
- on-tap="handleScaleSizesToggle">
+ on-tap="handleScaleSizesToggle"
+ type="checkbox">
Scale to same size
</label>
</div>
<label for="opacitySlider">Opacity</label>
<input
- type="range"
id="opacitySlider"
- min="0.0"
max="1.0"
- value="1.0"
+ min="0.0"
+ on-input="handleOpacityChange"
step=".01"
- on-input="handleOpacityChange"/>
+ type="range"
+ value="1.0"/>
</template>
<script src="gr-opacity-diff-mode.js"></script>
</dom-module>
\ No newline at end of file
diff --git a/gr-opacity-diff-mode/gr-opacity-diff-mode.js b/gr-opacity-diff-mode/gr-opacity-diff-mode.js
index 7e3591d..237d413 100644
--- a/gr-opacity-diff-mode/gr-opacity-diff-mode.js
+++ b/gr-opacity-diff-mode/gr-opacity-diff-mode.js
@@ -26,10 +26,12 @@
if (this.revisionImage) {
const srcRevision = this.computeSrcString(this.revisionImage);
this.$.imageRevision.setAttribute('src', srcRevision);
+ this.resizeDiffContainerHeight();
}
if (this.baseImage) {
const srcBase = this.computeSrcString(this.baseImage);
this.$.imageBase.setAttribute('src', srcBase);
+ this.resizeDiffContainerHeight();
}
},
@@ -45,7 +47,8 @@
handleScaleSizesToggle() {
let width;
let height;
- if (this.$.scaleSizesToggle.checked) {
+ if (this.$.scaleSizesToggle.checked &&
+ this.baseImage && this.revisionImage) {
width = Math.max(this.revisionImage._width, this.baseImage._width);
height = Math.max(this.revisionImage._height, this.baseImage._height);
}
@@ -53,5 +56,13 @@
this.customStyle['--img-height'] = height ? height + 'px' : null;
this.updateStyles();
},
+
+ resizeDiffContainerHeight() {
+ const maxHeight = Math.max(
+ this.baseImage ? this.baseImage._height : 0,
+ this.revisionImage ? this.revisionImage._height : 0);
+ this.customStyle['--div-height'] = maxHeight + 'px';
+ this.updateStyles();
+ },
});
})();
\ No newline at end of file
diff --git a/gr-opacity-diff-mode/gr-opacity-diff-mode_test.html b/gr-opacity-diff-mode/gr-opacity-diff-mode_test.html
index 6c63c1a..a12913f 100644
--- a/gr-opacity-diff-mode/gr-opacity-diff-mode_test.html
+++ b/gr-opacity-diff-mode/gr-opacity-diff-mode_test.html
@@ -118,5 +118,17 @@
assert.equal(element.customStyle['--img-height'], '400px');
});
});
+ test('resize the div container for base & revision image comparison', () => {
+ element.baseImage = {
+ _height: 500,
+ };
+ element.revisionImage = {
+ _height: 300,
+ };
+ assert.equal(element.customStyle['--div-height'], undefined);
+ element.resizeDiffContainerHeight();
+ flushAsynchronousOperations();
+ assert.equal(element.customStyle['--div-height'], '500px');
+ });
});
</script>
\ No newline at end of file
