diff --git a/.DS_Store b/.DS_Store index 1834671..f1a67c2 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/app/assets/styles/app.css b/app/assets/styles/app.css index 263abeb..3f910c8 100644 --- a/app/assets/styles/app.css +++ b/app/assets/styles/app.css @@ -35,7 +35,7 @@ .viewport, body { - width: 280px; + width: 290px; height: 530px; font-family: 'opendyslexic'; background-color: #55b685; diff --git a/app/assets/styles/core/opendyslexic.css b/app/assets/styles/core/opendyslexic.css index 6251e59..07653c8 100644 --- a/app/assets/styles/core/opendyslexic.css +++ b/app/assets/styles/core/opendyslexic.css @@ -1,88 +1,89 @@ @font-face { font-family: 'OpenDyslexic'; src: url('{{$browser_extension_protocol}}assets/fonts/opendyslexic/regular.otf') - format('opentype'); + format('opentype'); font-style: normal; font-weight: normal; -} - -@font-face { + } + + @font-face { font-family: 'OpenDyslexic Italic'; src: url('{{$browser_extension_protocol}}assets/fonts/opendyslexic/italic.otf') - format('opentype'); + format('opentype'); font-style: normal; font-weight: normal; -} - -@font-face { + } + + @font-face { font-family: 'OpenDyslexic Bold'; src: url('{{$browser_extension_protocol}}assets/fonts/opendyslexic/bold.otf') - format('opentype'); + format('opentype'); font-style: normal; font-weight: normal; -} - -@font-face { + } + + @font-face { font-family: 'OpenDyslexic Bold Italic'; src: url('{{$browser_extension_protocol}}assets/fonts/opendyslexic/bold-italic.otf') - format('opentype'); + format('opentype'); font-style: normal; font-weight: normal; -} - -@font-face { + } + + @font-face { font-family: 'opendyslexicmono'; src: url('{{$browser_extension_protocol}}assets/fonts/opendyslexic/regular.otf') - format('opentype'); -} - -:root { + format('opentype'); + } + + :root { --opendyslexic-chrome-regular: 'OpenDyslexic'; --opendyslexic-chrome-italic: 'OpenDyslexic Italic'; --opendyslexic-chrome-bold: 'OpenDyslexic Bold'; --opendyslexic-chrome-bold-italic: 'OpenDyslexic Bold Italic'; --opendyslexic-chrome-mono: 'OpenDyslexic'; -} - -.helperbird-font-opendyslexic-regular { + } + + .helperbird-font-opendyslexic-regular * { font-family: var(--opendyslexic-chrome-regular); font-weight: normal; font-style: normal; line-height: 150%; -} - -.helperbird-font-opendyslexic-italic { + } + + .helperbird-font-opendyslexic-italic * { font-family: var(--opendyslexic-chrome-italic); font-style: italic; line-height: 150%; -} - -.helperbird-font-opendyslexic-bold { + } + + .helperbird-font-opendyslexic-bold * { font-family: var(--opendyslexic-chrome-bold); font-weight: bold; line-height: 150%; -} - -.helperbird-font-opendyslexic-bold-italic { + } + + .helperbird-font-opendyslexic-bold-italic * { font-family: var(--opendyslexic-chrome-bold); font-weight: bold; line-height: 150%; -} - -p.helperbird-font-opendyslexic-regular:nth-child(even), -p.helperbird-font-opendyslexic-italic:nth-child(even), -p.helperbird-font-opendyslexic-bold:nth-child(even), -li.helperbird-font-opendyslexic-regular:nth-child(even), -li.helperbird-font-opendyslexic-italic:nth-child(even), -li.helperbird-font-opendyslexic-bold:nth-child(even) { + } + + p.helperbird-font-opendyslexic-regular:nth-child(even), + p.helperbird-font-opendyslexic-italic:nth-child(even), + p.helperbird-font-opendyslexic-bold:nth-child(even), + li.helperbird-font-opendyslexic-regular:nth-child(even), + li.helperbird-font-opendyslexic-italic:nth-child(even), + li.helperbird-font-opendyslexic-bold:nth-child(even) { opacity: rgba(0, 0, 0, 0.03); -} - -p.helperbird-font-opendyslexic-regular:hover, -p.helperbird-font-opendyslexic-italic:hover, -p.helperbird-font-opendyslexic-bold:hover, -li.helperbird-font-opendyslexic-regular:hover, -li.helperbird-font-opendyslexic-italic:hover, -li.helperbird-font-opendyslexic-bold:hover { + } + + p.helperbird-font-opendyslexic-regular:hover, + p.helperbird-font-opendyslexic-italic:hover, + p.helperbird-font-opendyslexic-bold:hover, + li.helperbird-font-opendyslexic-regular:hover, + li.helperbird-font-opendyslexic-italic:hover, + li.helperbird-font-opendyslexic-bold:hover { background-color: rgba(0, 0, 0, 0.09) !important; -} + } + \ No newline at end of file diff --git a/app/index.html b/app/index.html index e0f88f0..8fb3547 100755 --- a/app/index.html +++ b/app/index.html @@ -23,12 +23,12 @@
diff --git a/app/scripts/app.vue b/app/scripts/app.vue index 022097f..88b9527 100644 --- a/app/scripts/app.vue +++ b/app/scripts/app.vue @@ -1,279 +1,282 @@ - - - - + } + + .animate-marquee { + display: inline-block; + animation: marquee 45s linear infinite; + } + + .animate-marquee:hover { + animation-play-state: paused; + } + + \ No newline at end of file diff --git a/app/scripts/background/index.js b/app/scripts/background/index.js index e69de29..9f73c31 100644 --- a/app/scripts/background/index.js +++ b/app/scripts/background/index.js @@ -0,0 +1,75 @@ +import { isEmpty } from '@scripts/content/utils.js'; +import { update } from '@scripts/content/badge.js'; + +chrome.storage.onChanged.addListener(async (changes, areaName) => { + if (areaName !== 'local' && areaName !== 'sync') { + return; + } + + const currentFont = await getStorage('font'); + const isEnabled = await getStorage('enabled'); + + + + if (changes.enabled) { + + update({ state: changes.enabled.newValue || false }); + const newMode = changes.enabled.newValue; + sendToAllTabs({ + type: 'openDyslexicIsOn', + enabled: newMode, + font: currentFont.found ? currentFont.item : 'regular' + }); + } + + if (changes.font) { + const newFont = changes.font.newValue; + sendToAllTabs({ + type: 'updateFont', + font: newFont, + enabled: isEnabled.found ? isEnabled.item : false + }); + } +}); + +function sendToAllTabs(message) { + try { + chrome.tabs.query({}, (tabs) => { + tabs.forEach((tab) => { + chrome.tabs.sendMessage(tab.id, message); + }); + }); + } catch (error) {} +} + +async function getStorage(key) { + const data = { + found: false, + item: '' + }; + + if (isEmpty(key)) { + return data; + } + + try { + const result = await chrome.storage.local.get(key); + if (!isEmpty(result[key])) { + data.found = true; + data.item = result[key]; + } + } catch (err) { + return data; + } + + return data; +} + + +/** + * Load initial settings from storage. + */ +chrome.storage.local.get(['enabled'], (data) => { + update({ state: data.enabled || false }); + }); + \ No newline at end of file diff --git a/app/scripts/content/badge.js b/app/scripts/content/badge.js index 085bc36..cc56ce9 100644 --- a/app/scripts/content/badge.js +++ b/app/scripts/content/badge.js @@ -1,38 +1,28 @@ -export class Badge { - constructor() {} - - async load() { - return new Promise((resolve) => { - // this.off(); - resolve(true); - }); - } - - update(mail) { - if (mail.state === true) { - this.on(); - return mail.state; - } - - this.off(); +export function update(mail) { + console.log('ddd',mail); + if (mail.state === true) { + on(); return mail.state; } - off() { - this.setColor('#ff3c2f'); - this.setText('off'); - } + off(); + return mail.state; +} - on() { - this.setColor('#34c759'); - this.setText('on'); - } +export function off() { + setColor('#ff3c2f'); + setText('off'); +} - setColor(color) { - chrome.action.setBadgeBackgroundColor({ color: color }, () => {}); - } +export function on() { + setColor('#34c759'); + setText('on'); +} - setText(text) { - chrome.action.setBadgeText({ text: text }, () => {}); - } +function setColor(color) { + chrome.action.setBadgeBackgroundColor({ color: color }, () => {}); +} + +function setText(text) { + chrome.action.setBadgeText({ text: text }, () => {}); } diff --git a/app/scripts/content/index.js b/app/scripts/content/index.js index 33bf827..caf4121 100755 --- a/app/scripts/content/index.js +++ b/app/scripts/content/index.js @@ -1,2 +1,114 @@ -import { OPENDYSLEXIC } from './engine.js'; -new OPENDYSLEXIC(); +import opendyslexic from '!!raw-loader!@styles/core/opendyslexic.css'; + +let enabled = false; +let currentFont = 'regular'; + +// Unique ID for our