Handle mode preference should stick
Change-Id: I28e4c537175c065e12e1d3cc31410b1235ac824b
diff --git a/gr-image-diff-tool/gr-image-diff-tool.html b/gr-image-diff-tool/gr-image-diff-tool.html
index 6f2d85e..55d1c46 100644
--- a/gr-image-diff-tool/gr-image-diff-tool.html
+++ b/gr-image-diff-tool/gr-image-diff-tool.html
@@ -48,7 +48,7 @@
<div id="header">
<h3>Image Diff</h3>
- <select id="dropdown">
+ <select value="{{_observeMode::change}}" id="dropdown">
<option value="resemble">Resemble Mode</option>
<option value="opacity">Opacity Mode</option>
</select>
diff --git a/gr-image-diff-tool/gr-image-diff-tool.js b/gr-image-diff-tool/gr-image-diff-tool.js
index 20a0ac9..95df491 100644
--- a/gr-image-diff-tool/gr-image-diff-tool.js
+++ b/gr-image-diff-tool/gr-image-diff-tool.js
@@ -14,29 +14,54 @@
(function() {
'use strict';
+ const DiffModes = {
+ OPACITY: 'opacity',
+ RESEMBLE: 'resemble',
+ };
+
Polymer({
is: 'gr-image-diff-tool',
properties: {
- _showResembleMode: {
- type: Boolean,
- value: true,
- },
- _showOpacityMode: {
- type: Boolean,
- value: false,
+ _showResembleMode: Boolean,
+ _showOpacityMode: Boolean,
+ _observeMode: {
+ type: String,
+ observer: '_handleSelect',
},
},
- handleSelect() {
- const mode = this.$.dropdown.value;
- if (mode === 'resemble') {
- this._showResembleMode = true;
- this._showOpacityMode = false;
- } else if (mode === 'opacity') {
- this._showOpacityMode = true;
- this._showResembleMode = false;
- }
+ attached() {
+ const diff_mode = this._getMode();
+ diff_mode === DiffModes.OPACITY ?
+ this._displayOpacityMode() : this._displayResembleMode();
+ },
+
+ _getMode() {
+ return window.localStorage.getItem('image-diff-mode');
+ },
+
+ _setMode(mode) {
+ window.localStorage.setItem('image-diff-mode', mode);
+ },
+
+ _handleSelect(mode) {
+ mode === DiffModes.OPACITY ?
+ this._displayOpacityMode() : this._displayResembleMode();
+ },
+
+ _displayResembleMode() {
+ this._observeMode = DiffModes.RESEMBLE;
+ this._showResembleMode = true;
+ this._showOpacityMode = false;
+ this._setMode(DiffModes.RESEMBLE);
+ },
+
+ _displayOpacityMode() {
+ this._observeMode = DiffModes.OPACITY;
+ this._showResembleMode = false;
+ this._showOpacityMode = true;
+ this._setMode(DiffModes.OPACITY);
},
});
})();
\ No newline at end of file
diff --git a/gr-image-diff-tool/gr-image-diff-tool_test.html b/gr-image-diff-tool/gr-image-diff-tool_test.html
index 0fe8a3e..ec1a4be 100644
--- a/gr-image-diff-tool/gr-image-diff-tool_test.html
+++ b/gr-image-diff-tool/gr-image-diff-tool_test.html
@@ -38,14 +38,17 @@
<script>
suite('gr-image-diff-tool tests', () => {
let element;
+ let sandbox;
setup(() => {
element = fixture('basicFixture');
+ sandbox = sinon.sandbox.create();
});
+ teardown(() => { sandbox.restore(); });
+
test('test opacity mode', () => {
- element.$.dropdown.value = 'opacity';
- element.handleSelect();
+ element._observeMode = 'opacity';
assert.isTrue(element._showOpacityMode);
assert.isFalse(element._showResembleMode);
flushAsynchronousOperations();
@@ -55,8 +58,7 @@
});
test('test resemble mode', () => {
- element.$.dropdown.value = 'resemble';
- element.handleSelect();
+ element._observeMode = 'resemble';
assert.isTrue(element._showResembleMode);
assert.isFalse(element._showOpacityMode);
flushAsynchronousOperations();
@@ -64,5 +66,17 @@
assert.ok(element.$$('gr-resemble-diff-mode'));
assert.equal(element.$$('gr-opacity-diff-mode'), null);
});
+
+ test('localStorage persists', () => {
+ sandbox.stub(element, '_setMode');
+ sandbox.stub(element, '_getMode');
+ element.attached();
+ assert.equal(element._getMode.callCount, 1);
+ assert.equal(element._setMode.callCount, 1);
+ element._observeMode = 'opacity';
+ assert.equal(element._setMode.callCount, 2);
+ element._observeMode = 'resemble';
+ assert.equal(element._setMode.callCount, 3);
+ });
});
</script>
\ No newline at end of file
