Multiple Changes:

* Refactors code. (refs #15) * Shows comparsion help if comparison is enabled. (refs #27) * Fixes. (refs #20) * Styling changes. (refs #16) * Adds the infromation for former AGB on demand. (refs #28) * Switches to viz site. (refs #29)
fhstp · Oct 31, 2018 · 85149aa · 85149aa
1 parent dd71418
commit 85149aa
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 84 deletions.
diff --git a/app/pages/popup.html b/app/pages/popup.html
@@ -1,73 +1,66 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <meta charset="utf-8" />
-    <title>Popup</title>
-    <link rel="stylesheet" type="text/css" href="../styles/popup.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
-    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
-    <script src="../scripts/popup.js"></script>
-
 
+<head>
+  <meta charset="utf-8" />
+  <title>Popup</title>
+  <link rel="stylesheet" type="text/css" href="../styles/popup.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
+  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+  <script src="../scripts/popup.js"></script>
 </head>
+
 <body>
   <a href="options.html"></a>
-    <div id="popup-content_1">
-        <img id="icon_contractVis" src="../images/Logo_contractVis.png" alt="Logo">
-        <i class="fa fa-times-circle icons"  id='closing_icon' aria-hidden="true"></i>
-        <i id='general_information' class="fa fa-info-circle icons" aria-hidden="true"></i>
-    </div>
-  <div id="content_1">
-
 
+  <!-- Header -->
+  <div id="popup-content_1">
+    <img id="icon_contractVis" src="../images/Logo_contractVis.png" alt="Logo">
+    <i class="fa fa-times-circle icons" id='closing_icon' aria-hidden="true"></i>
+    <i id='general_information' class="fa fa-info-circle icons" aria-hidden="true"></i>
+  </div>
 
+  <!-- Page 1 -- General explanation -->
+  <div id="content_1">
     <div id="popup-content_2" class="hidden">
-        <h3 class="running_text" style="font-weight:bold">Highlighter ermöglicht es dir verschiedene Texte zu analysieren und besser zu verstehen</h3>
-        <ol>
-            <li class="running_text">Wie es funktioniert: </li>
-            <li class="running_text">Navigiere zu den AGB des Online-Shops. </li>
-            <li class="running_text">Markiereden Text der AGBs </li>
-            <li class="running_text">Der markierte Text wird automatisch ins Plug-In kopiert </li>
-            <li class="running_text">Treffe die Kriterienauswahl </li>
-            <li class="running_text">Check die AGBs!</li>
-        </ol>
-
-        <button type="button" class="btn btn-primary" id="button_firstpage">OK! Alles klar!</button>
-
+      <h3 class="running_text" style="font-weight:bold">Highlighter ermöglicht es dir verschiedene Texte zu analysieren
+        und besser zu verstehen</h3>
+      <ol>
+        <li class="running_text">Navigiere zu den AGB des Online-Shops.</li>
+        <li class="running_text">Markiere den Text der AGBs.</li>
+        <li class="running_text">Der markierte Text wird automatisch ins Plug-In kopiert.</li>
+        <li class="running_text">Treffe die Kriterienauswahl.</li>
+        <li class="running_text">Checke die AGBs!</li>
+      </ol>
+      <p class="additional_info">Zusätzliche Informationen findest du auf der
+        <a href="https://highlighter.media.fhstp.ac.at" target="_blank"><strong>Homeseite</strong></a></p>
+      <button type="button" class="btn btn-primary" id="button_firstpage">OK! Alles klar!</button>
     </div>
-</div>
-
-<div id="content_2" class="hidden">
-    <div class="popup-content_2">
-
-        <h3 class="running_text" style="font-weight:bold">Du kannst auch zwei verschiedene AGBs miteinander vergleichen</h3>
-        <ol>
-            <li class="running_text">Wie geht das: </li>
-            <li class="running_text">Bereits geladene AGBs werden gespeichert und können ausgewählt werden.</li>
-            <li class="running_text">Wenn nicht, müssen die AGBs und der Link markiert werden wie auf der vorigen Seite erklärt.</li>
-            <li class="running_text">Treffe die Kriterienauswahl</li>
-            <li class="running_text">Vergleiche die AGBs!</li>
-        </ol>
-        <button type="button" class="btn btn-primary" id="button_secondpage">OK! Alles klar!</button>
+  </div>
 
+  <!-- Page 2 -- Comparison explanation -->
+  <div id="content_2">
+    <div id="popup-content_3" class="hidden">
+      <h3 class="running_text" style="font-weight:bold">Du kannst auch zwei verschiedene AGBs miteinander vergleichen</h3>
+      <ol>
+        <li class="running_text">Bereits geladene AGBs werden gespeichert und können ausgewählt werden.</li>
+        <li class="running_text">Wenn nicht, müssen die AGBs und der Link markiert werden.</li>
+        <li class="running_text">Treffe die Kriterienauswahl.</li>
+        <li class="running_text">Vergleiche die AGBs!</li>
+      </ol>
+      <p class="additional_info">Zusätzliche Informationen findest du auf der
+        <a href="https://highlighter.media.fhstp.ac.at" target="_blank"><strong>Homeseite</strong></a></p>
+      <button type="button" class="btn btn-primary" id="button_secondpage">OK! Alles klar!</button>
     </div>
-</div>
-
-<!-- Page 3 -->
-<div class="container">
-  <div  class="row">
-    <div id="div_page_3" class="col-sm">
-
-      </div>
+  </div>
 
+  <!-- Page 3 -- Main Page -->
+  <div class="container">
+    <div class="row">
+      <div id="div_page_3" class="col-sm"></div>
     </div>
-
   </div>
-</div>
-
-
 </body>
-</html>
-
 
+</html>
diff --git a/app/scripts/additional_scripts/create_page.ts b/app/scripts/additional_scripts/create_page.ts
@@ -34,7 +34,7 @@ let input_criteria = $('<input>') // with only input as the string it had been a
 export function loadSecondPage() {
   $('#div_page_3').addClass('hidden');
   $('#button_thirdpage').addClass('hidden');
-  $('#content_2').removeClass('hidden');
+/*   $('#content_2').removeClass('hidden'); */
 }
 
 export function loadThirdPage(triggers: Map<string, boolean>, pageSwitch: string, crits: any) {
@@ -60,6 +60,7 @@ export function loadThirdPage(triggers: Map<string, boolean>, pageSwitch: string
     if (e.target.checked && !triggers.get('checkbox_first_time')) {
       if (localStorage.getItem(pageSwitch) === 'false') {
         localStorage.setItem(pageSwitch, 'true');
+        localStorage.setItem('showComparisonInfo', 'show');
       }
       div_agb_2 = $('<div></div>')
         .attr('id', 'div_agb_2');
@@ -86,19 +87,17 @@ export function loadThirdPage(triggers: Map<string, boolean>, pageSwitch: string
       triggers.set('bool_input,vis', true);
     }
     else if (e.target.checked && triggers.get('checkbox_first_time')) {
+      localStorage.setItem('showComparisonInfo', 'show');
       $(div_agb_2).removeAttr('class hidden');
       triggers.set('bool_input,vis', true);
     }
     else if (!e.target.checked && triggers.get('checkbox_first_time')) {
+      localStorage.setItem('showComparisonInfo', 'noShow');
       $(div_agb_2).attr('class', 'hidden');
       triggers.set('bool_input,vis', true);
     }
-
   });
 
-  let c2 = $('#content_2');
-  c2.attr('class', 'hidden');
-
   let AGB_text = $('<textarea>')
     .attr('placeholder', 'Fügen Sie den Text der AGBs ein...')
     .attr('type', 'textarea')

diff --git a/app/scripts/additional_scripts/formerAGB.ts b/app/scripts/additional_scripts/formerAGB.ts
@@ -12,6 +12,7 @@ export function setFormerAGB(link: string, agb: any) {
 }
 
 export function createBadges() {
+  const date = new Date();
   // if not set
   if (!localStorage.hasOwnProperty(key)) {
     return null;
@@ -28,7 +29,7 @@ export function createBadges() {
       link = link.replace(re, '');
       // let button = $('<button type="button" class="btn btn-primary" id="former_' + i + '"><span class="badge badge-light"></span></button>')
       let button = $(`<div class="chip">
-      <button type="button" class="buttonFormer" data-btn="${i}">${link}</button>
+      <button type="button" class="buttonFormer" title="Erstellt: ${date.toLocaleString()}" data-btn="${i}">${link}</button>
       <span class="closebtn" data-btn="${i}">&times</span></div>`);
       buttondiv.append(button);
     }

diff --git a/app/scripts/additional_scripts/server_interaction.ts b/app/scripts/additional_scripts/server_interaction.ts
@@ -30,7 +30,7 @@ export function sendData_no_compare(head_link: any, head_text: any, criteria_arr
 
 export async function insertIntoHTML_without_compare(agb: any) {
   // open tab in background, so this context isn't unloadad (?); wait for it to be ready
-  const highlighterTab = await browser.tabs.create({ url: 'https://highlighter.media.fhstp.ac.at', active: false });
+  const highlighterTab = await browser.tabs.create({ url: 'https://highlighter.media.fhstp.ac.at/#/viz', active: false });
   if (highlighterTab.id != null) {
 
     agb = JSON.stringify(agb);
@@ -52,7 +52,7 @@ export async function insertIntoHTML_without_compare(agb: any) {
 
 export async function insertIntoHTML_with_compare(agb_1: any, agb_2: any) {
   // open tab in background, so this context isn't unloadad (?); wait for it to be ready
-  const highlighterTab = await browser.tabs.create({ url: 'https://highlighter.media.fhstp.ac.at', active: false });
+  const highlighterTab = await browser.tabs.create({ url: 'https://highlighter.media.fhstp.ac.at/#/viz', active: false });
   if (highlighterTab.id != null) {
 
     agb_1 = JSON.stringify(agb_1);

diff --git a/app/scripts/popup.ts b/app/scripts/popup.ts
@@ -41,6 +41,7 @@ $(document).ready(
     if (lS === 'false') {
       $('#popup-content_2').removeClass('hidden');
       localStorage.setItem(load_first_page, 'true');
+      localStorage.setItem('informationBtnFirstTime', 'true');
     }
     else if (lS === 'true') {
       loadThirdPage(triggers, switch_to_second_page, criterias_array);
@@ -51,28 +52,40 @@ $(document).ready(
 
     $('#button_firstpage').click(() => {
       $('#popup-content_2').addClass('hidden');
-      if (!triggers.get('switch_to_third_page')) {
+
+      if (!triggers.get('switch_to_third_page')) { // First time only...
         loadThirdPage(triggers, switch_to_second_page, criterias_array);
       }
-      else {
+      else {  // ... when we switch back to normal view from info
         $('#div_page_3').removeClass('hidden');
         $('#button_thirdpage').removeClass('hidden');
       }
     });
 
     $('#button_secondpage').click(() => {
+      $('#popup-content_3').addClass('hidden');
       $('#div_page_3').removeClass('hidden');
       $('#button_thirdpage').removeClass('hidden');
-      $('#content_2').addClass('hidden');
       triggers.set('trigger_criterias', false);
     });
 
     $('#general_information').click(() => {
+      if (localStorage.getItem('informationBtnFirstTime') === 'true') {
+        localStorage.setItem(load_first_page, 'true');
+        localStorage.removeItem('informationBtnFirstTime');
+        loadThirdPage(triggers, switch_to_second_page, criterias_array);
+      }
 
-      $('#popup-content_2').removeClass('hidden');
-      $('#div_page_3').addClass('hidden');
-      triggers.set('switch_to_third_page', true);
-
+      const showComparison = localStorage.getItem('showComparisonInfo');
+      if (showComparison === 'show') {
+        $('#popup-content_3').removeClass('hidden');
+        $('#div_page_3').addClass('hidden');
+        triggers.set('switch_to_third_page', true);
+      } else {
+        $('#popup-content_2').removeClass('hidden');
+        $('#div_page_3').addClass('hidden');
+        triggers.set('switch_to_third_page', true);
+      }
       let button_thirdpage: any;
       button_thirdpage = $('#button_thirdpage');
       button_thirdpage.addClass('hidden');

diff --git a/app/styles/popup.scss b/app/styles/popup.scss
@@ -22,7 +22,8 @@ button:focus {
 .chip {
     display: inline-block;
     background-color: #4575B4;
-    border-radius: 15px;
+    border-radius: 5px;
+    margin: 5px 5px 5px;
 }
 
 .closebtn {
@@ -79,17 +80,22 @@ button:focus {
     float: right;
     font-size: 25px;
     color: #3577B1;
+    cursor: pointer;
 }
 
-.popup-content_1 {
+/* .popup-content_1 {
     background-color: #EBF1F7;
     padding: 5px;
 }
-
+ */
 #popup-content_2 {
     padding: 15px;
 }
 
+#popup-content_3 {
+  padding: 15px;
+}
+
 ol {
     padding-left: 15px;
 }
@@ -138,13 +144,13 @@ li {
 }
 
 #add_button {
-  border: none;
-  outline: none !important;
-  background: none !important;
-  box-shadow: none !important;
-  -webkit-box-shadow: none !important;
-  -moz-box-shadow: none !important;
-  margin-left: -12px;
+    border: none;
+    outline: none !important;
+    background: none !important;
+    box-shadow: none !important;
+    -webkit-box-shadow: none !important;
+    -moz-box-shadow: none !important;
+    margin-left: -12px;
 }
 
 #add_buttonimage {
@@ -153,13 +159,14 @@ li {
 }
 
 #input_critiques {
-  width: 60% !important;
-  display: initial !important;
+    width: 60% !important;
+    display: initial !important;
 }
 
 #delete_criteria {
     font-size: 20px;
     color: #3577B1;
+    cursor: pointer;
 }
 
 .button_delete_criteria {
@@ -178,6 +185,7 @@ li {
     color: #3577B1;
     font-size: 25px;
     margin-right: 10px;
+    cursor: pointer;
 }
 
 .criterias {
@@ -187,7 +195,7 @@ li {
 /* Bootstrap Overwrites */
 
 .form-control {
-    font-size: 0.7em;
+    font-size: 0.8em;
 }
 
 /* Tooltips Wraps from the checkboxes */
@@ -235,4 +243,27 @@ li {
 
 *::-webkit-scrollbar-thumb {
     background-color: #4575B4;
+    border-radius: 20px;
+}
+
+#buttonDiv {
+    margin-top: 10px;
+    overflow-x: auto;
+    white-space: nowrap;
+    width: 300px;
+}
+
+.btn-primary {
+  background-color: #3577B1 !important;
+  outline: none;
+  border: none;
+}
+
+#div_agb_2 {
+  margin-top: 25px;
+}
+
+.additional_info {
+  border: 1px solid gray;
+  padding: 5px;
 }