From 4d0cbaa81730ad5c78a2413b1e44f915622dc063 Mon Sep 17 00:00:00 2001 From: evaneus Date: Wed, 21 Dec 2016 15:56:01 +0000 Subject: [PATCH 1/4] Add css vars for default accessibility color schemes Closes #7 --- lib/index.js | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/lib/index.js b/lib/index.js index 436831c..684e1c1 100644 --- a/lib/index.js +++ b/lib/index.js @@ -2,10 +2,32 @@ import _ from 'lodash'; export default class PiePlayer extends HTMLElement { + constructor() { super(); this._pies = {}; + this.colorSchemes = { + "black_on_white": { + "color": "black", + "backgroundColor": "white" + }, + "white_on_black": { + "color": "white", + "backgroundColor": "black" + }, + "black_on_rose": { + "color": "black", + "backgroundColor": "mistyrose" + }, + } + + + this.style.setProperty('--default-color', 'black'); + this.style.setProperty('--default-background-color', 'white'); + this.style.color = 'var(--default-color)'; + this.style.backgroundColor = 'var(--default-background-color)'; + this.addEventListener('pie.register', (event) => { //stop the event from bubbling further event.preventDefault(); @@ -69,8 +91,18 @@ export default class PiePlayer extends HTMLElement { }); }; + + _updateColorContrast(colorContrast){ + + if (colorContrast) { + this.style.setProperty('--default-color', this.colorSchemes[colorContrast].color); + this.style.setProperty('--default-background-color', this.colorSchemes[colorContrast].backgroundColor); + } + } _update() { + this._updateColorContrast(this._env && this._env.accessibility && this._env.accessibility.colorContrast); + let dispatchModelUpdated = () => { let event = new CustomEvent('pie.model-updated'); this.dispatchEvent(event); From 8364ff4fd1471dd2e46d06f506213fc16b39d429 Mon Sep 17 00:00:00 2001 From: evaneus Date: Wed, 21 Dec 2016 16:07:40 +0000 Subject: [PATCH 2/4] Update colorSchemes to constant and scope default css variables --- lib/index.js | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/lib/index.js b/lib/index.js index 684e1c1..ee17605 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1,13 +1,6 @@ import _ from 'lodash'; -export default class PiePlayer extends HTMLElement { - - - constructor() { - super(); - this._pies = {}; - - this.colorSchemes = { +const colorSchemes = { "black_on_white": { "color": "black", "backgroundColor": "white" @@ -22,11 +15,17 @@ export default class PiePlayer extends HTMLElement { }, } +export default class PiePlayer extends HTMLElement { + + + constructor() { + super(); + this._pies = {}; - this.style.setProperty('--default-color', 'black'); - this.style.setProperty('--default-background-color', 'white'); - this.style.color = 'var(--default-color)'; - this.style.backgroundColor = 'var(--default-background-color)'; + this.style.setProperty('--pie-default-color', 'black'); + this.style.setProperty('--pie-default-background-color', 'white'); + this.style.color = 'var(--pie-default-color)'; + this.style.backgroundColor = 'var(--pie-default-background-color)'; this.addEventListener('pie.register', (event) => { //stop the event from bubbling further @@ -95,8 +94,8 @@ export default class PiePlayer extends HTMLElement { _updateColorContrast(colorContrast){ if (colorContrast) { - this.style.setProperty('--default-color', this.colorSchemes[colorContrast].color); - this.style.setProperty('--default-background-color', this.colorSchemes[colorContrast].backgroundColor); + this.style.setProperty('--pie-default-color', colorSchemes[colorContrast].color); + this.style.setProperty('--pie-default-background-color', colorSchemes[colorContrast].backgroundColor); } } _update() { From 08c4e5bb26db95e1d59a4ad33e8aff88c9d0e246 Mon Sep 17 00:00:00 2001 From: evaneus Date: Wed, 21 Dec 2016 16:07:40 +0000 Subject: [PATCH 3/4] feat(pie-player): added default accessibility contrast support --- lib/index.js | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/lib/index.js b/lib/index.js index 684e1c1..ee17605 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1,13 +1,6 @@ import _ from 'lodash'; -export default class PiePlayer extends HTMLElement { - - - constructor() { - super(); - this._pies = {}; - - this.colorSchemes = { +const colorSchemes = { "black_on_white": { "color": "black", "backgroundColor": "white" @@ -22,11 +15,17 @@ export default class PiePlayer extends HTMLElement { }, } +export default class PiePlayer extends HTMLElement { + + + constructor() { + super(); + this._pies = {}; - this.style.setProperty('--default-color', 'black'); - this.style.setProperty('--default-background-color', 'white'); - this.style.color = 'var(--default-color)'; - this.style.backgroundColor = 'var(--default-background-color)'; + this.style.setProperty('--pie-default-color', 'black'); + this.style.setProperty('--pie-default-background-color', 'white'); + this.style.color = 'var(--pie-default-color)'; + this.style.backgroundColor = 'var(--pie-default-background-color)'; this.addEventListener('pie.register', (event) => { //stop the event from bubbling further @@ -95,8 +94,8 @@ export default class PiePlayer extends HTMLElement { _updateColorContrast(colorContrast){ if (colorContrast) { - this.style.setProperty('--default-color', this.colorSchemes[colorContrast].color); - this.style.setProperty('--default-background-color', this.colorSchemes[colorContrast].backgroundColor); + this.style.setProperty('--pie-default-color', colorSchemes[colorContrast].color); + this.style.setProperty('--pie-default-background-color', colorSchemes[colorContrast].backgroundColor); } } _update() { From 72e8625705118558267dcd6bbed8898483a13a93 Mon Sep 17 00:00:00 2001 From: evaneus Date: Thu, 22 Dec 2016 16:25:38 +0000 Subject: [PATCH 4/4] Add tests, move style setters to connectedCallback --- lib/index.js | 10 ++++------ test/index.test.html | 5 +++++ 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/lib/index.js b/lib/index.js index ee17605..4c1a5b6 100644 --- a/lib/index.js +++ b/lib/index.js @@ -22,11 +22,6 @@ export default class PiePlayer extends HTMLElement { super(); this._pies = {}; - this.style.setProperty('--pie-default-color', 'black'); - this.style.setProperty('--pie-default-background-color', 'white'); - this.style.color = 'var(--pie-default-color)'; - this.style.backgroundColor = 'var(--pie-default-background-color)'; - this.addEventListener('pie.register', (event) => { //stop the event from bubbling further event.preventDefault(); @@ -48,7 +43,10 @@ export default class PiePlayer extends HTMLElement { } connectedCallback() { - + this.style.setProperty('--pie-default-color', 'black'); + this.style.setProperty('--pie-default-background-color', 'white'); + this.style.color = 'var(--pie-default-color)'; + this.style.backgroundColor = 'var(--pie-default-background-color)'; let event = new CustomEvent('pie.player-ready', { bubbles: true }); this.dispatchEvent(event); } diff --git a/test/index.test.html b/test/index.test.html index 2fe557f..3f4ff05 100644 --- a/test/index.test.html +++ b/test/index.test.html @@ -76,6 +76,11 @@ it('calls controller.model', function(){ sinon.assert.calledWith(mockController.model, [{id: '1'}], {mode: 'gather'}); }); + it('changes default colors using colorContrast property', function(){ + el.env = {mode:'gather', accessibility: {colorContrast: 'white_on_black'}}; + expect(el.style['--pie-default-color']).not.to.be.null; + expect(el.style.getPropertyValue('--pie-default-color')).to.eql('white'); + }); });