Button to flip the foreground and background colors (closes #2)

ThePacielloGroup · Jun 5, 2018 · 72c56d1 · 72c56d1
1 parent 51e10ae
commit 72c56d1
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 0 deletions.
diff --git a/src/CCAcontroller.js b/src/CCAcontroller.js
@@ -20,6 +20,7 @@ class CCAController {
         ipcMain.on('changeRGBComponent', this.updateRGBComponent.bind(this))
         ipcMain.on('changeForeground', this.updateForegroundFromString.bind(this))
         ipcMain.on('changeBackground', this.updateBackgroundFromString.bind(this))
+        ipcMain.on('switchColors', this.switchColors.bind(this))
     }
 
     updateRGBComponent(event, group, component, value, synced = false) {
@@ -112,6 +113,19 @@ class CCAController {
         this.sendEventToAll('backgroundColorChanged')
     }
 
+    switchColors(event) {
+        let background = this.sharedObject.normal.backgroundColor
+        this.sharedObject.normal.backgroundColor = this.sharedObject.normal.foregroundColorMixed
+        this.sharedObject.normal.foregroundColor = background
+        this.sharedObject.normal.foregroundColorMixed = this.sharedObject.normal.foregroundColor.mixed(this.sharedObject.normal.backgroundColor)
+        this.updateDeficiencyForeground()
+        this.updateDeficiencyBackground()
+        this.updateContrastRatio()
+        this.updateAdvanced()
+        this.sendEventToAll('foregroundColorChanged')    
+        this.sendEventToAll('backgroundColorChanged')        
+    }
+
     updateDeficiencyForeground() {
         this.sharedObject.protanopia.foregroundColor = this.sharedObject.normal.foregroundColorMixed.protanopia()
         this.sharedObject.deuteranopia.foregroundColor = this.sharedObject.normal.foregroundColorMixed.deuteranopia()

diff --git a/src/views/css/main.css b/src/views/css/main.css
@@ -107,6 +107,10 @@ section#background-color button.text {
     background-image: url('../icons/text.svg');
 }
 
+section#foreground-color button.switch {
+    background-image: url('../icons/switch.svg');
+}
+
 /* Text input sections */
 section#foreground-text input,
 section#background-text input {

diff --git a/src/views/icons/switch.svg b/src/views/icons/switch.svg
diff --git a/src/views/js/main.js b/src/views/js/main.js
@@ -50,6 +50,8 @@ function initEvents () {
     document.querySelector('#background-color .text').onclick = function() {showHide(this)}
     document.querySelector('#foreground-text input').oninput = function() {validateForegroundText(this.value)}
     document.querySelector('#background-text input').oninput = function() {validateBackgroundText(this.value)}
+    document.querySelector('#foreground-color .switch').onclick = function() {ipcRenderer.send('switchColors')}
+
     // initDetails
     document.querySelectorAll('details').forEach(function(details) {
         details.ontoggle = function() {

diff --git a/src/views/main.html b/src/views/main.html
@@ -22,6 +22,7 @@ <h2>Foreground Colour</h2>
           <button class="text" aria-label="Foreground text input" aria-controls="foreground-text" aria-expanded="false"></button>
           <button class="rgb" aria-label="Foreground rgb sliders" aria-controls="foreground-rgb" aria-expanded="false"></button>
           <button class="picker" aria-label="Foreground color picker"></button>
+          <button class="switch" aria-label="Switch Colors"></button>
       </div>
     </section>
     <section id="foreground-text" hidden>