Merge pull request #249 from makkoncept/collections_section

Add "Sources" section to the extension

Author: makkoncept

src/options/base.js

@@ -9,6 +9,7 @@ const elements = {
   accordionItems: document.querySelectorAll('.accordion .accordion-link'),
   enableSearchStorageCheckbox: document.getElementById('enable-search-storage-checkbox'),
   enableSearchClearConfirmCheckbox: document.getElementById('enable-search-clear-confirm-checkbox'),
+  tabsHeader: document.getElementsByClassName('tabs')[0].getElementsByTagName('ul')[0],
 };
 
 export default elements;

src/options/helper.js

@@ -23,7 +23,6 @@ function addSourcesToDom(sources) {
     const input = document.createElement('input');
     input.type = 'checkbox';
     input.id = sources[key];
-    input.classList = 'vocab choice-field magenta-colored small-sized';
 
     const label = document.createElement('label');
     label.setAttribute('for', input.id);

src/options/options.html

@@ -91,30 +91,34 @@ elements.importBookmarksButton.addEventListener('click', () => {
 });
 
 // tab switching logic
-document.getElementById('vocab-tabbed-header').addEventListener('click', e => {
+elements.tabsHeader.addEventListener('click', e => {
+  console.log(e.target);
+  console.log(e.target.parentElement);
   // removing active class
-  if (e.target.classList.contains('tab')) {
-    Array.prototype.forEach.call(e.currentTarget.getElementsByClassName('tab active'), element => {
-      element.classList.remove('active');
+  if (e.target.parentElement.classList.contains('tab')) {
+    Array.prototype.forEach.call(e.currentTarget.getElementsByClassName('is-active'), element => {
+      element.classList.remove('is-active');
+      console.log('this is inner element');
+      console.log(element);
     });
 
     // add active class to the clicked tab header
-    e.target.classList.add('active');
+    e.target.parentElement.classList.add('is-active');
 
-    const tabNo = e.target.getAttribute('data-tab-no');
+    const tabNo = e.target.parentElement.getAttribute('data-tab-no');
     let targetContentDiv;
 
     // removing active class from any tab content div
-    Array.prototype.forEach.call(document.getElementById('vocab-tabbed-contents').children, element => {
-      element.classList.remove('active');
+    Array.prototype.forEach.call(document.getElementById('tabs-content').children, element => {
+      element.classList.remove('is-active');
       if (element.getAttribute('data-content-no') === tabNo) {
         // saving the target content div
         targetContentDiv = element;
       }
     });
 
     // adding active class to target content div
-    targetContentDiv.classList.add('active');
+    targetContentDiv.classList.add('is-active');
   }
 });
 

src/options/options.js

@@ -1,15 +1,3 @@
-ul {
-  padding-left: 1.1rem;
-}
-
-.note {
-  padding-left: 1rem;
-  color: tomato;
-}
-
-.filter-checkboxes {
-  margin-left: 1rem;
-  input[type='checkbox'] {
-    margin-bottom: 0.2rem;
-  }
+.tabs-panel {
+  padding: 0rem 1rem 1rem;
 }

src/options/sass/base/_base.scss

@@ -1,16 +1,5 @@
-.highlight-orange {
+.highlight {
+  font-family: monospace;
   font-weight: 900;
   font-style: normal;
-  color: #ed592f;
-}
-
-.highlight-green {
-  font-weight: 900;
-  font-style: normal;
-  color: #04a635;
-}
-
-.listitem {
-  list-style: none;
-  margin-bottom: 1rem;
 }