Added picker access from main menu

src/CCAcontroller.js

@@ -12,19 +12,18 @@ class CCAController {
 
  initEvents() {
  ipcMain.on('init-app', event => {
- this.updateDeficiencyForeground()
- this.updateDeficiencyBackground()
+ this.updateDeficiency('foreground')
+ this.updateDeficiency('background')
  this.updateContrastRatio()
  this.sendEventToAll('foregroundColorChanged') 
  this.sendEventToAll('backgroundColorChanged')
  })
  ipcMain.on('changeRGBComponent', this.updateRGBComponent.bind(this))
  ipcMain.on('changeHSLComponent', this.updateHSLComponent.bind(this))
- ipcMain.on('changeForeground', this.updateForegroundFromString.bind(this))
- ipcMain.on('changeBackground', this.updateBackgroundFromString.bind(this))
+ ipcMain.on('changeForeground', this.updateFromString.bind(this))
+ ipcMain.on('changeBackground', this.updateFromString.bind(this))
  ipcMain.on('switchColors', this.switchColors.bind(this))
- ipcMain.on('changeFormat', this.changeFormat.bind(this))
- ipcMain.on('setOption', this.setOption.bind(this))
+ ipcMain.on('setPreference', this.setPreference.bind(this))
  }
 
  updateRGBComponent(event, group, component, value, synced = false) {
@@ -138,44 +137,27 @@ class CCAController {
  }
  }
 
- updateForegroundFromString(event, stringColor, format) {
+ updateFromString(event, section, stringColor) {
  try {
- this.sharedObject.deficiencies.normal.foregroundColor = Color(stringColor)
+ this.sharedObject.deficiencies.normal[section + "Color"] = Color(stringColor)
  }
  catch(error) {
  console.error(error)
  }
- this.updateGlobalF()
+ this.updateGlobal(section)
  }
 
- updateBackgroundFromString(event, stringColor, format) {
- try {
- this.sharedObject.deficiencies.normal.backgroundColor = Color(stringColor)
- }
- catch(error) {
- console.error(error)
- }
- this.updateGlobalB()
- }
-
- updateGlobalF() {
- this.sharedObject.deficiencies.normal.foregroundColorMixed = this.sharedObject.deficiencies.normal.foregroundColor.mixed(this.sharedObject.deficiencies.normal.backgroundColor)
- this.updateDeficiencyForeground()
- this.updateContrastRatio()
- this.sendEventToAll('foregroundColorChanged') 
- }
-
- updateGlobalB() {
+ updateGlobal(section) {
  this.sharedObject.deficiencies.normal.foregroundColorMixed = this.sharedObject.deficiencies.normal.foregroundColor.mixed(this.sharedObject.deficiencies.normal.backgroundColor)
- this.updateDeficiencyBackground()
- if (this.sharedObject.deficiencies.normal.foregroundColor.alpha() !== 1) { // Then mixed has changed
- this.updateDeficiencyForeground()
+ this.updateDeficiency(section)
+ if (section == 'background' && this.sharedObject.deficiencies.normal.foregroundColor.alpha() !== 1) { // Then mixed has changed
+ this.updateDeficiency('foreground')
  }
  this.updateContrastRatio()
- if (this.sharedObject.deficiencies.normal.foregroundColor.alpha() !== 1) { // Then mixed has changed
+ if (section == 'background' && this.sharedObject.deficiencies.normal.foregroundColor.alpha() !== 1) { // Then mixed has changed
  this.sendEventToAll('foregroundColorChanged')
  }
- this.sendEventToAll('backgroundColorChanged')
+ this.sendEventToAll(section + 'ColorChanged') 
  }
 
  switchColors(event) {
@@ -190,31 +172,20 @@ class CCAController {
  this.sendEventToAll('backgroundColorChanged') 
  }
 
- updateDeficiencyForeground() {
- this.sharedObject.deficiencies.protanopia.foregroundColor = this.sharedObject.deficiencies.normal.foregroundColorMixed.protanopia()
- this.sharedObject.deficiencies.deuteranopia.foregroundColor = this.sharedObject.deficiencies.normal.foregroundColorMixed.deuteranopia()
- this.sharedObject.deficiencies.tritanopia.foregroundColor = this.sharedObject.deficiencies.normal.foregroundColorMixed.tritanopia()
- this.sharedObject.deficiencies.protanomaly.foregroundColor = this.sharedObject.deficiencies.normal.foregroundColorMixed.protanomaly()
- this.sharedObject.deficiencies.deuteranomaly.foregroundColor = this.sharedObject.deficiencies.normal.foregroundColorMixed.deuteranomaly()
- this.sharedObject.deficiencies.tritanomaly.foregroundColor = this.sharedObject.deficiencies.normal.foregroundColorMixed.tritanomaly()
- this.sharedObject.deficiencies.achromatopsia.foregroundColor = this.sharedObject.deficiencies.normal.foregroundColorMixed.achromatopsia()
- this.sharedObject.deficiencies.achromatomaly.foregroundColor = this.sharedObject.deficiencies.normal.foregroundColorMixed.achromatomaly()
- }
-
- updateDeficiencyBackground() {
- this.sharedObject.deficiencies.protanopia.backgroundColor = this.sharedObject.deficiencies.normal.backgroundColor.protanopia()
- this.sharedObject.deficiencies.deuteranopia.backgroundColor = this.sharedObject.deficiencies.normal.backgroundColor.deuteranopia()
- this.sharedObject.deficiencies.tritanopia.backgroundColor = this.sharedObject.deficiencies.normal.backgroundColor.tritanopia()
- this.sharedObject.deficiencies.protanomaly.backgroundColor = this.sharedObject.deficiencies.normal.backgroundColor.protanomaly()
- this.sharedObject.deficiencies.deuteranomaly.backgroundColor = this.sharedObject.deficiencies.normal.backgroundColor.deuteranomaly()
- this.sharedObject.deficiencies.tritanomaly.backgroundColor = this.sharedObject.deficiencies.normal.backgroundColor.tritanomaly()
- this.sharedObject.deficiencies.achromatopsia.backgroundColor = this.sharedObject.deficiencies.normal.backgroundColor.achromatopsia() 
- this.sharedObject.deficiencies.achromatomaly.backgroundColor = this.sharedObject.deficiencies.normal.backgroundColor.achromatomaly() 
+ updateDeficiency(section) {
+ let fromColor = (section == 'foreground')?'foregroundColorMixed':'backgroundColor' 
+ this.sharedObject.deficiencies.protanopia[section + "Color"] = this.sharedObject.deficiencies.normal[fromColor].protanopia()
+ this.sharedObject.deficiencies.deuteranopia[section + "Color"] = this.sharedObject.deficiencies.normal[fromColor].deuteranopia()
+ this.sharedObject.deficiencies.tritanopia[section + "Color"] = this.sharedObject.deficiencies.normal[fromColor].tritanopia()
+ this.sharedObject.deficiencies.protanomaly[section + "Color"] = this.sharedObject.deficiencies.normal[fromColor].protanomaly()
+ this.sharedObject.deficiencies.deuteranomaly[section + "Color"] = this.sharedObject.deficiencies.normal[fromColor].deuteranomaly()
+ this.sharedObject.deficiencies.tritanomaly[section + "Color"] = this.sharedObject.deficiencies.normal[fromColor].tritanomaly()
+ this.sharedObject.deficiencies.achromatopsia[section + "Color"] = this.sharedObject.deficiencies.normal[fromColor].achromatopsia()
+ this.sharedObject.deficiencies.achromatomaly[section + "Color"] = this.sharedObject.deficiencies.normal[fromColor].achromatomaly()
  }
 
  updateContrastRatio() {
- let cr, crr
- let rounding = this.sharedObject.preferences.options.rounding
+ let rounding = this.sharedObject.preferences.main.rounding
  Object.keys(this.sharedObject.deficiencies).forEach(function(key, index) {
  if (key === 'normal') {
  this[key].contrastRatioRaw = this[key].foregroundColorMixed.contrast(this[key].backgroundColor)
@@ -292,16 +263,18 @@ The contrast ratio is: ${normal.contrastRatioString}
  clipboard.writeText(text)
  }
 
- changeFormat(event, section, format) {
- this.sharedObject.preferences[section].format = format
- store.set(section + '.format', format)
- }
-
- setOption(event, option, value) {
- this.sharedObject.preferences.options[option] = value
- store.set('options.' + option, value)
+ setPreference(event, section, level, sublevel, value) {
+ var option
+ if (sublevel) {
+ this.sharedObject.preferences[section][level][sublevel] = value
+ option = section + '.' + level + '.' + sublevel
+ } else {
+ this.sharedObject.preferences[section][level] = value
+ option = section + '.' + level 
+ }
+ store.set(option, value) 
  switch(option) {
- case 'rounding':
+ case 'main.rounding':
  this.updateContrastRatio()
  break;
  }

src/browsers/picker.js

@@ -4,8 +4,7 @@ const url = require('url')
 
 module.exports = (dirname) => {
  let win
-
- let init = () => {
+ let init = (section) => {
  if (win === null || win === undefined) {
  if (process.platform === 'darwin' || process.platform === 'win32') {
  createWindow()

src/controllers/picker.js

@@ -6,42 +6,29 @@ let mouseEvent;
 
 module.exports = (browsers, mainController) => {
  const {picker, main} = browsers
- let foregroundPicker // Keep which picker is openned
 
  let closePicker = hexColor => {
  if (picker.getWindow()) {
+ mainController.sendEventToAll('pickerToggelled', global['currentPicker'], false) 
  picker.getWindow().close()
- if (foregroundPicker === true) {
- mainController.sendEventToAll('foregroundPickerToggelled', false) 
- } else {
- mainController.sendEventToAll('backgroundPickerToggelled', false) 
- }
  if (typeof hexColor === 'string') { // If ESC wasn't used
- if (foregroundPicker === true) {
- mainController.updateForegroundFromString(null, hexColor)
- } else {
- mainController.updateBackgroundFromString(null, hexColor)
- }
+ mainController.updateFromString(null, global['currentPicker'], hexColor)
  }
  main.getWindow().focus()
  ipcMain.removeListener('closePicker', closePicker)
  ipcMain.removeListener('pickerRequested', event => {})
- foregroundPicker = null
+ global['currentPicker'] = null
  }
  }
 
- ipcMain.on('showForegroundPicker', event => {
- foregroundPicker = true
+ ipcMain.on('showPicker', (event, section) => {
+ global['currentPicker'] = section
+ mainController.sendEventToAll('pickerToggelled', global['currentPicker'], true) 
  picker.init()
- mainController.sendEventToAll('foregroundPickerToggelled', true) 
  })
- ipcMain.on('showBackgroundPicker', event => { 
- foregroundPicker = false
- picker.init()
- mainController.sendEventToAll('backgroundPickerToggelled', true) 
- })
-
- ipcMain.on('pickerRequested', (event, ratio) => {
+
+ ipcMain.on('init-picker', (event, ratio) => {
+ mainController.sendEventToAll('pickerToggelled', global['currentPicker'], true) 
  if (process.platform === 'darwin') mouseEvent = require('osx-mouse')()
  // if (process.platform === 'linux') mouseEvent = require('linux-mouse')()
  if (process.platform === 'win32') mouseEvent = require('win-mouse')()
@@ -80,5 +67,6 @@ module.exports = (browsers, mainController) => {
 
  ipcMain.on('closePicker', closePicker)
  mouseEvent.on('right-up', closePicker)
+ event.sender.send('init')
  })
 }

src/main.js

@@ -1,4 +1,4 @@
-const { app, Menu } = require('electron')
+const { app, Menu, BrowserWindow } = require('electron')
 const isDev = ('NODE_ENV' in process.env && process.env.NODE_ENV === 'dev')
 const Store = require('electron-store');
 const store = new Store();
@@ -64,6 +64,22 @@ app.on('ready', () => {
  click: (item) => {
  mainController.copyResults()
  }
+ }, {
+ type: 'separator'
+ }, {
+ label: 'Foreground picker',
+ accelerator: global.sharedObject.preferences.foreground.picker.shortcut,
+ click: () => {
+ global['currentPicker'] = 'foreground'
+ picker.init()
+ }
+ }, {
+ label: 'Background picker',
+ accelerator: global.sharedObject.preferences.background.picker.shortcut,
+ click: () => {
+ global['currentPicker'] = 'background'
+ picker.init()
+ }
  }
  ]
  },
@@ -236,35 +252,41 @@ global.sharedObject = {
  position : {
  x : null,
  y : null,
- }
+ },
+ rounding : null,
  },
  foreground : {
  format : null,
+ picker : {
+ shortcut : null
+ }
  },
  background : {
  format : null,
+ picker : {
+ shortcut : null
+ }
  },
- options : {
- rounding : null,
- }
  }
 }
 
 function loadPreferences() {
- console.log(store.path)
+ if (isDev) { console.log(store.path) } 
  prefs = global.sharedObject.preferences
  prefs.main.position.x = store.get('main.position.x', null)
  prefs.main.position.y = store.get('main.position.y', null)
+ prefs.main.rounding = store.get('main.rounding', 1)
  prefs.foreground.format = store.get('foreground.format', 'hex')
  prefs.background.format = store.get('background.format', 'hex')
- prefs.options.rounding = store.get('options.rounding', 1)
+ prefs.foreground.picker.shortcut = store.get('foreground.picker.shortcut', 'F11')
+ prefs.background.picker.shortcut = store.get('background.picker.shortcut', 'F12')
 }
 
 const browsers = require('./browsers')(__dirname)
-const {main, about, deficiency, preferences} = browsers
+const {main, about, deficiency, preferences, picker} = browsers
 
 const CCAController = require('./CCAcontroller')
 
 const mainController = new CCAController(browsers, global.sharedObject)
 
-require('./controllers')(browsers, mainController)
+require('./controllers')(browsers, mainController)

src/views/js/about.js

@@ -1,6 +1,6 @@
 const { ipcRenderer, shell } = require('electron')
 
-ipcRenderer.send('init-about');
+document.addEventListener('DOMContentLoaded', () => ipcRenderer.send('init-about'), false)
 
 ipcRenderer.on('init', (event, config) => {
  document.querySelector('#cca-version').innerHTML = config.version
@@ -15,4 +15,3 @@ Array.from(externalLinks).forEach(link => {
  event.preventDefault()
  })
 });
-

src/views/js/deficiency.js

@@ -1,7 +1,7 @@
 const { ipcRenderer } = require('electron')
 const sharedObject = require('electron').remote.getGlobal('sharedObject')
 
-ipcRenderer.send('init-deficiency')
+document.addEventListener('DOMContentLoaded', () => ipcRenderer.send('init-deficiency'), false)
 
 ipcRenderer.on('init', event => {
  applyForegroundColor()

src/views/js/main.js

@@ -37,18 +37,15 @@ ipcRenderer.on('contrastRatioChanged', event => {
  applyContrastRatio()
 })
 
-ipcRenderer.on('foregroundPickerToggelled', (event, state) => {
- document.querySelector('#foreground-color .picker').setAttribute('aria-pressed', state)
-})
-
-ipcRenderer.on('backgroundPickerToggelled', (event, state) => {
- document.querySelector('#background-color .picker').setAttribute('aria-pressed', state)
+ipcRenderer.on('pickerToggelled', (event, section, state) => {
+ console.log(section, state)
+ document.querySelector('#' + section + '-color .picker').setAttribute('aria-pressed', state)
 })
 
 function initEvents () {
  // Opens color picker on button click
- document.querySelector('#foreground-color .picker').onclick = () => ipcRenderer.send('showForegroundPicker')
- document.querySelector('#background-color .picker').onclick = () => ipcRenderer.send('showBackgroundPicker')
+ document.querySelector('#foreground-color .picker').onclick = () => ipcRenderer.send('showPicker', 'foreground')
+ document.querySelector('#background-color .picker').onclick = () => ipcRenderer.send('showPicker', 'background')
  document.querySelector('#foreground-rgb .red input[type=range]').oninput = function() {sliderRGBOnInput('foreground', 'red', this.value)}
  document.querySelector('#foreground-rgb .green input[type=range]').oninput = function() {sliderRGBOnInput('foreground', 'green', this.value)}
  document.querySelector('#foreground-rgb .blue input[type=range]').oninput = function() {sliderRGBOnInput('foreground', 'blue', this.value)}
@@ -73,7 +70,7 @@ function initEvents () {
  document.querySelector('#foreground-color .switch').onclick = function() {ipcRenderer.send('switchColors')}
  document.querySelector('#foreground-color .help').onclick = function() {showHide(this)}
  document.querySelector('#background-color .help').onclick = function() {showHide(this)}
- document.querySelector('#foreground-color .format-selector').onchange = function() {console.log("teset");changeFormat('foreground', this)}
+ document.querySelector('#foreground-color .format-selector').onchange = function() {changeFormat('foreground', this)}
  document.querySelector('#background-color .format-selector').onchange = function() {changeFormat('background', this)}
 
  document.querySelector('#foreground-hsl .hue input[type=range]').oninput = function() {sliderHSLOnInput('foreground', 'hue', this.value)}
@@ -337,7 +334,7 @@ function leaveText(section, el) {
 function changeFormat(section, el) {
  let colorReal
  // We send the selected format to the controller for saving and sharedObject update
- ipcRenderer.send('changeFormat', section, el.value)
+ ipcRenderer.send('setPreference', section, 'format', el.value)
  // Then we update the current text field
  if (section == 'foreground') {
  colorReal = sharedObject.deficiencies.normal.foregroundColorMixed

src/views/js/picker.js

@@ -1,11 +1,15 @@
 // From https:/Toinane/colorpicker
 const {ipcRenderer} = require('electron')
+
+document.addEventListener('DOMContentLoaded', () => ipcRenderer.send('init-picker', window.devicePixelRatio), false)
+
 document.querySelector('#picker').style.border = `10px solid rgba(200, 200, 200, 0.3)`
 
-document.addEventListener('DOMContentLoaded', () => ipcRenderer.send('pickerRequested', window.devicePixelRatio), false)
-document.addEventListener('keydown', event => {
- if (event.key === 'Escape') ipcRenderer.send('closePicker')
-}, false)
+ipcRenderer.on('init', (event) => {
+ document.addEventListener('keydown', event => {
+ if (event.key === 'Escape') ipcRenderer.send('closePicker')
+ }, false)
+})
 
 ipcRenderer.on('updatePicker', (event, color) => {
  document.querySelector('#picker').style.border = `10px solid ${color}`