From 0cb7ad51aae9d2e3ab091d4306677ab7d4d5925a Mon Sep 17 00:00:00 2001
From: Curtis Adam <curtis.adam@mni.thm.de>
Date: Mon, 24 Jun 2019 12:19:54 +0200
Subject: [PATCH] Add a ARSnova lite button to the card sidebar

---
 client/themeSwitcher.scss                     | 23 ++++++++++++++++-
 client/themes/theme-default.scss              |  6 +++++
 i18n/de.i18n.json                             |  1 +
 i18n/en.i18n.json                             |  1 +
 imports/ui/card/sidebar/item/arsnovaLite.html |  9 +++++++
 imports/ui/card/sidebar/item/arsnovaLite.js   | 25 +++++++++++++++++++
 imports/ui/card/sidebar/sidebar.html          |  2 ++
 imports/ui/card/sidebar/sidebar.js            |  1 +
 imports/ui/main/main.html                     |  1 +
 imports/ui/main/main.js                       |  1 +
 imports/ui/main/modal/arsnovaLite.html        |  8 ++++++
 imports/ui/main/modal/arsnovaLite.js          | 21 ++++++++++++++++
 12 files changed, 98 insertions(+), 1 deletion(-)
 create mode 100644 imports/ui/card/sidebar/item/arsnovaLite.html
 create mode 100644 imports/ui/card/sidebar/item/arsnovaLite.js
 create mode 100644 imports/ui/main/modal/arsnovaLite.html
 create mode 100644 imports/ui/main/modal/arsnovaLite.js

diff --git a/client/themeSwitcher.scss b/client/themeSwitcher.scss
index dd75b8d7..417d6a4c 100644
--- a/client/themeSwitcher.scss
+++ b/client/themeSwitcher.scss
@@ -388,7 +388,12 @@ $themes: (
     $card_sidebar_aspect_ratio_dropdown_text_active_hover: map-get($map, "card_sidebar_aspect_ratio_dropdown_text_active_hover");
     $card_sidebar_aspect_ratio_menu_background: map-get($map, "card_sidebar_aspect_ratio_menu_background");
     $card_sidebar_aspect_ratio_menu_separator: map-get($map, "card_sidebar_aspect_ratio_menu_separator");
-
+    $card_sidebar_arsnova_lite_background: map-get($map, "card_sidebar_arsnova_lite_background");
+    $card_sidebar_arsnova_lite_text: map-get($map, "card_sidebar_arsnova_lite_text");
+    $card_sidebar_arsnova_lite_background_hover: map-get($map, "card_sidebar_arsnova_lite_background_hover");
+    $card_sidebar_arsnova_lite_text_hover: map-get($map, "card_sidebar_arsnova_lite_text_hover");
+    $card_sidebar_arsnova_lite_background_active: map-get($map, "card_sidebar_arsnova_lite_background_active");
+    $card_sidebar_arsnova_lite_text_active: map-get($map, "card_sidebar_arsnova_lite_text_active");
     //cardset colors
     $cardset_markdeep_background: map-get($map, "cardset_markdeep_background");
     $cardset_markdeep_header_border: map-get($map, "cardset_markdeep_header_border");
@@ -3220,6 +3225,22 @@ $themes: (
         color: $card_sidebar_aspect_ratio_text_hover !important;
       }
 
+
+      .showArsnovaLite {
+        background-color: $card_sidebar_arsnova_lite_background !important;
+        color:$card_sidebar_arsnova_lite_text !important;
+      }
+
+      .showArsnovaLite.pressed {
+        background-color: $card_sidebar_arsnova_lite_background_active !important;
+        color:$card_sidebar_arsnova_lite_text_active !important;
+      }
+
+      .showArsnovaLite:hover {
+        background-color:$card_sidebar_arsnova_lite_background_hover !important;
+        color: $card_sidebar_arsnova_lite_text_hover !important;
+      }
+
       .editCard {
         background-color: $card_sidebar_edit_button_background !important;
         color: $card_sidebar_edit_button_text !important;
diff --git a/client/themes/theme-default.scss b/client/themes/theme-default.scss
index 6d28104d..35a6906f 100644
--- a/client/themes/theme-default.scss
+++ b/client/themes/theme-default.scss
@@ -473,6 +473,12 @@
           "card_sidebar_aspect_ratio_dropdown_text_active_hover": $button_text_hover,
           "card_sidebar_aspect_ratio_menu_background": white,
           "card_sidebar_aspect_ratio_menu_separator": black,
+          "card_sidebar_arsnova_lite_background": none,
+          "card_sidebar_arsnova_lite_text": $thm_gray,
+          "card_sidebar_arsnova_lite_background_hover": $button_background_hover,
+          "card_sidebar_arsnova_lite_text_hover": $button_text_hover,
+          "card_sidebar_arsnova_lite_background_active": $thm_gray,
+          "card_sidebar_arsnova_lite_text_active": white,
     //cardset colors
           "cardset_markdeep_background": LightGoldenRodYellow,
           "cardset_markdeep_header_border": $thm_orange,
diff --git a/i18n/de.i18n.json b/i18n/de.i18n.json
index 72e9016c..7618d3db 100644
--- a/i18n/de.i18n.json
+++ b/i18n/de.i18n.json
@@ -1593,6 +1593,7 @@
       "showHelp": "Hilfe",
       "arsnovaApp": "Befrage dein Publikum mit dem Audience-Response-System ARSnova auf arsnova.thm.de",
       "arsnovaClick": "Befrage dein Publikum mit arsnova.click, der spielbasierten Variante von ARSnova",
+      "arsnovaLite": "Befrage dein Publikum mit dem Audience-Response-System ARSnova auf beta.arsnova.eu",
       "hideSidebar": "Verberge die Rand-Buttons",
       "showSidebar": "Zeige die Rand-Buttons",
       "swapQuestionAnswer": {
diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json
index 21ef6a34..ca319070 100644
--- a/i18n/en.i18n.json
+++ b/i18n/en.i18n.json
@@ -1594,6 +1594,7 @@
       "showHelp": "Hilfe",
       "arsnovaApp": "Befrage dein Publikum mit dem Audience-Response-System ARSnova auf arsnova.thm.de",
       "arsnovaClick": "Befrage dein Publikum mit arsnova.click, der spielbasierten Variante von ARSnova",
+      "arsnovaLite": "Befrage dein Publikum mit dem Audience-Response-System ARSnova auf beta.arsnova.eu",
       "hideSidebar": "Verberge die Rand-Buttons",
       "showSidebar": "Zeige die Rand-Buttons",
       "swapQuestionAnswer": {
diff --git a/imports/ui/card/sidebar/item/arsnovaLite.html b/imports/ui/card/sidebar/item/arsnovaLite.html
new file mode 100644
index 00000000..e88dd8d2
--- /dev/null
+++ b/imports/ui/card/sidebar/item/arsnovaLite.html
@@ -0,0 +1,9 @@
+<template name="cardSidebarItemArsnovaLite">
+    {{#if isCardsetOwner this._id}}
+        {{#unless isIOSSafari}}
+            <span class="hidden-xs fas fa-comments card-button cardHeaderItem showArsnovaLite"
+                  data-type="cardNavigation"
+                  title="{{_ "card.tooltip.arsnovaLite"}}"></span>
+        {{/unless}}
+    {{/if}}
+</template>
diff --git a/imports/ui/card/sidebar/item/arsnovaLite.js b/imports/ui/card/sidebar/item/arsnovaLite.js
new file mode 100644
index 00000000..c0614487
--- /dev/null
+++ b/imports/ui/card/sidebar/item/arsnovaLite.js
@@ -0,0 +1,25 @@
+import "./arsnovaLite.html";
+import {Session} from "meteor/session";
+import {Template} from "meteor/templating";
+
+Session.setDefault('arsnovaLiteModalActive', false);
+
+/*
+ * ############################################################################
+ * cardSidebarItemArsnovaLite
+ * ############################################################################
+ */
+
+Template.cardSidebarItemArsnovaLite.events({
+	"click .showArsnovaLite": function () {
+		$('#arsnovaLiteModal').modal('show');
+	}
+});
+
+Template.cardSidebarItemArsnovaLite.onCreated(function () {
+	Session.set('arsnovaLiteModalActive', false);
+});
+
+Template.cardSidebarItemArsnovaLite.onDestroyed(function () {
+	Session.set('arsnovaLiteModalActive', false);
+});
diff --git a/imports/ui/card/sidebar/sidebar.html b/imports/ui/card/sidebar/sidebar.html
index d8e3b10b..452ede04 100644
--- a/imports/ui/card/sidebar/sidebar.html
+++ b/imports/ui/card/sidebar/sidebar.html
@@ -116,6 +116,7 @@
     {{> cardSidebarItemPomodoroButton}}
     {{> flashcardSidebarDictionary}}
     {{> cardSidebarItemArsnovaClick}}
+    {{> cardSidebarItemArsnovaLite}}
     {{> cardSidebarItemEdit}}
     {{> cardSidebarItemDelete}}
 </template>
@@ -146,6 +147,7 @@
     {{> cardSidebarItemPomodoroButton}}
     {{> flashcardSidebarDictionary}}
     {{> cardSidebarItemArsnovaClick}}
+    {{> cardSidebarItemArsnovaLite}}
 </template>
 
 <template name="flashcardSidebarDemoRight">
diff --git a/imports/ui/card/sidebar/sidebar.js b/imports/ui/card/sidebar/sidebar.js
index 1f49ad83..985fcbfe 100644
--- a/imports/ui/card/sidebar/sidebar.js
+++ b/imports/ui/card/sidebar/sidebar.js
@@ -5,6 +5,7 @@ import {CardVisuals} from "../../../api/cardVisuals";
 import "./sidebar.html";
 import "./item/aspectRatio.js";
 import "./item/arsnovaClick.js";
+import "./item/arsnovaLite.js";
 import "./item/arsnovaApp.js";
 import "./item/cardList.js";
 import "./item/backToCardset.js";
diff --git a/imports/ui/main/main.html b/imports/ui/main/main.html
index 7c1ee518..bf9dc887 100644
--- a/imports/ui/main/main.html
+++ b/imports/ui/main/main.html
@@ -6,6 +6,7 @@
     {{> mainModalConnectionStatus}}
     {{> mainModalUnderDevelopment}}
     {{> mainModalArsnovaClick}}
+    {{> mainModalArsnovaLite}}
     {{> mainOverlayZoomText}}
     {{> mainOverlayAspectRatio}}
     {{> helpModal}}
diff --git a/imports/ui/main/main.js b/imports/ui/main/main.js
index 4d99d5ef..6fbff094 100644
--- a/imports/ui/main/main.js
+++ b/imports/ui/main/main.js
@@ -38,6 +38,7 @@ import "./navigation/navigation.js";
 import "../useCases/useCases.js";
 import "./main.html";
 import "./modal/arsnovaClick.js";
+import "./modal/arsnovaLite.js";
 import "./modal/connectionStatus.js";
 import "./modal/underDevelopment.js";
 
diff --git a/imports/ui/main/modal/arsnovaLite.html b/imports/ui/main/modal/arsnovaLite.html
new file mode 100644
index 00000000..53b0fe7c
--- /dev/null
+++ b/imports/ui/main/modal/arsnovaLite.html
@@ -0,0 +1,8 @@
+<template name="mainModalArsnovaLite">
+    {{#unless isIOSSafari}}
+        <div class="modal" id="arsnovaLiteModal" tabindex="-1" role="dialog">
+            <div class="modal-dialog">
+            </div>
+        </div>
+    {{/unless}}
+</template>
diff --git a/imports/ui/main/modal/arsnovaLite.js b/imports/ui/main/modal/arsnovaLite.js
new file mode 100644
index 00000000..20845a2c
--- /dev/null
+++ b/imports/ui/main/modal/arsnovaLite.js
@@ -0,0 +1,21 @@
+import {Session} from "meteor/session";
+import "./arsnovaLite.html";
+
+/*
+ * ############################################################################
+ * mainModalArsnovaLite
+ * ############################################################################
+ */
+
+Template.mainModalArsnovaLite.onRendered(function () {
+	$('#arsnovaLiteModal').on('hidden.bs.modal', function () {
+		$('.showArsnovaLite').removeClass('pressed');
+	});
+	$('#arsnovaLiteModal').on('shown.bs.modal', function () {
+		$('.showArsnovaLite').addClass('pressed');
+		if (!Session.get('arsnovaLiteModalActive')) {
+			Session.set('arsnovaLiteModalActive', true);
+			$('#arsnovaLiteModal .modal-dialog').html('<iframe id="arsnovaLite" width="600px" height="800px" frameborder="0" src="https://beta.arsnova.eu"></iframe>');
+		}
+	});
+});
-- 
2.23.0.rc1