Add a ARSnova lite button to the card sidebar

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;

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,

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": {

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": {

imports/ui/card/sidebar/item/arsnovaLite.html

+<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>

imports/ui/card/sidebar/item/arsnovaLite.js

+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);
+});

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">

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";

imports/ui/main/main.html

@@ -6,6 +6,7 @@
     {{> mainModalConnectionStatus}}
     {{> mainModalUnderDevelopment}}
     {{> mainModalArsnovaClick}}
+    {{> mainModalArsnovaLite}}
     {{> mainOverlayZoomText}}
     {{> mainOverlayAspectRatio}}
     {{> helpModal}}

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";
 

imports/ui/main/modal/arsnovaLite.html

+<template name="mainModalArsnovaLite">
+    {{#unless isIOSSafari}}
+        <div class="modal" id="arsnovaLiteModal" tabindex="-1" role="dialog">
+            <div class="modal-dialog">
+            </div>
+        </div>
+    {{/unless}}
+</template>

imports/ui/main/modal/arsnovaLite.js

+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>');
+		}
+	});
+});