Add extensions

CHROME_INSTRUCOES.md

@@ -0,0 +1,6 @@
+# Como instalar
+
+1. [Faça o download da extensão](https://github.com/daltonmenezes/omelete-tabs/releases/download/v1.0.0/omelete-tabs-chrome1.0.0.zip).
+2. Descompacte o arquivo zipado.
+2. Abra o Chrome e digite __chrome://extensions__ na barra de endereço e pressione ENTER. Em seguida ative o __Modo do desenvolvedor__ (caso não esteja habilitado) na área superior direita.
+3. Clique no botão __Carregar sem compactação__ e selecione a pasta que você extraiu da extensão.

chrome/content_scripts/api-config.js

@@ -0,0 +1,4 @@
+const apiConfig = {
+  endpoint: 'https://cors-anywhere.herokuapp.com/https://www.omelete.com.br/_scroll/noticias',
+  configs: { method:'get', mode: 'cors' }
+}

chrome/content_scripts/fetch-news.js

@@ -0,0 +1,47 @@
+const fetchNews = ({ endpoint, configs }) => {
+  fetch(endpoint, configs)
+  .then(response => response.json())
+  .then(data => data.reduce((acc, value)=> acc += value.body, ''))
+  .then(html => {
+   const parse = new window.DOMParser().parseFromString(html, 'text/html')
+
+   const img = 
+      Array
+      .from(parse.querySelectorAll('img'))
+      .map(img => img.src.replace('chrome-extension://', 'https://'))
+
+    const title = 
+      Array
+      .from(parse.querySelectorAll('h2'))
+      .map(title => title.textContent)
+
+    const url = 
+      Array
+      .from(parse.querySelectorAll('a'))
+      .map(a => a.href.replace('chrome-extension://', 'https://omelete.com.br/'))
+
+    const category = 
+      Array
+      .from(parse.querySelectorAll('p'))
+      .map(category => category.textContent)
+
+    const response = title.map((v, i) => 
+      Object.assign({
+        [i]: {
+          img: img[i], 
+          title: title[i], 
+          url: url[i],
+          category: category[i]
+        }
+      })
+    )
+
+    return response
+  })
+  .then(response => response.map((news, i) => newsRender(news[i], i)))
+  .then(() => document.getElementById('loading').remove())
+  .catch(err => fetchNews({ endpoint, configs }))
+}
+
+fetchNews(apiConfig)
+

chrome/content_scripts/handlers/tag-label-handler.js

@@ -0,0 +1 @@
+const tagLabelHandler = label => removeAccent(label).toLowerCase().split(/[/]| /g, 1)[0]

chrome/content_scripts/handlers/theme-handler.js

@@ -0,0 +1,25 @@
+const themeHandler = () => {
+  const theme = localStorage.getItem('theme') || 'dark'
+  const themeSwitch = document.getElementById('theme-switch')
+  const hasThemeAttribute = themeSwitch.getAttribute('theme')
+  const isThemeSwitchChecked = themeSwitch.checked
+
+  if (!hasThemeAttribute) {
+      document.getElementById('theme').href = `css/${theme}-theme.css`
+      themeSwitch.setAttribute('theme', theme)
+      themeSwitchHandler(theme, themeSwitch)
+      return
+  }
+
+  if (isThemeSwitchChecked) {
+      localStorage.setItem('theme', 'dark')  
+      themeSwitch.setAttribute('theme', 'dark')
+      document.getElementById('theme').href = `css/dark-theme.css`
+      return
+  }
+
+  localStorage.setItem('theme', 'light')
+  themeSwitch.setAttribute('theme', 'light')
+  themeSwitch.removeAttribute('checked')
+  document.getElementById('theme').href = `css/light-theme.css`
+}

chrome/content_scripts/handlers/theme-switch-handler.js

@@ -0,0 +1,5 @@
+const themeSwitchHandler = (theme, themeSwitch) => {
+  theme === 'dark'
+    ? themeSwitch.checked = 'checked'
+    : themeSwitch.checked = ''
+}

chrome/content_scripts/helpers/remove-accent.js

@@ -0,0 +1 @@
+const removeAccent = letter => letter.normalize('NFD').replace(/[\u0300-\u036f]/g, '')

chrome/content_scripts/init.js

@@ -0,0 +1,34 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const themeSwitch = document.getElementById('theme-switch')
+  const themeLabel = document.getElementById('theme-label')
+  const switchLabel = document.querySelector('.theme-switch-label')
+  const themeSwitchInnerButton = document.querySelector('.theme-switch-switch')
+  const focusColor = '#ff5500'
+  const blurColor = '#ffbf00'
+
+  themeSwitch.addEventListener('click', themeHandler)
+
+  themeSwitch.addEventListener('keypress', e => {
+    const isEnterKey = e.keyCode === 13
+    const isSpacebarKey = e.keyCode === 32
+
+    if (isEnterKey || isSpacebarKey) {
+        themeSwitch.checked = !themeSwitch.checked
+        themeHandler()
+    }
+  })
+
+  themeSwitch.addEventListener('focus', () => {
+    switchLabel.style = `border-color: ${ focusColor };`
+    themeSwitchInnerButton.style = `border-color: ${ focusColor }; background-color: ${ focusColor };`
+    themeLabel.style = `color: ${ focusColor };`
+  })
+
+  themeSwitch.addEventListener('blur', () => {
+    switchLabel.style = `border-color: ${ blurColor };`
+    themeSwitchInnerButton.style = `border-color: ${ blurColor }; background-color: ${ blurColor };`
+    themeLabel.style = `color: ${ blurColor };`
+  })
+
+  themeHandler()
+})

chrome/content_scripts/renders/news-render.js

@@ -0,0 +1,22 @@
+const newsRender = ({ url, title, category, img }, index = 0) => {
+  const canTruncate = 
+    title.length >= 75
+      ? '...'
+      : ''
+
+  document.getElementById('news').innerHTML +=
+  `
+  <section>
+    <a href="${ url }" title="${ title }" tabindex="${ index + 2 }">
+    <div class="tag">
+      <span>${ category }</span>
+      <div class="tag-label tag-label-${ tagLabelHandler(category) }"></div>
+    </div>
+      <div class="picture">
+        <img src="${ img }" alt=""/>
+      </div>
+      ${ title.slice(0, 74).trim() }${ canTruncate }
+    </a> 
+  </section>  
+  `
+}

chrome/css/dark-theme.css

@@ -0,0 +1,16 @@
+body {
+  background-color: #181818;
+}
+
+hr {
+  border-top: 1px solid black;
+  border-bottom: 1px solid #1d1d1d;
+}
+
+header {
+  background: #111111;
+}
+
+a {
+  color: #6e6e6e;
+}

chrome/css/light-theme.css

@@ -0,0 +1,12 @@
+hr {
+  border-top: 1px solid white;
+  border-bottom: 1px solid #ebebeb;
+}
+
+header {
+  background: linear-gradient(to bottom,#000,#2d2d2d);
+}
+
+a {
+  color: #575757;
+}