Commit dfe156a1 authored by Curtis Adam's avatar Curtis Adam

Refactor the help templates and hook up the f1 key to a help modal

parent 17b5137f
import {Session} from "meteor/session";
import {Route} from "./route";
let keyEventsUnlocked = true;
let firstTimePresentation = 'isFirstTimePresentation';
let firstTimeLeitner = 'isFirstTimeLeitner';
let firstTimeWozniak = 'isFirstTimeWozniak';
let firstTimeDemo = 'isFirstTimeDemo';
export let MainNavigation = class MainNavigation {
static showHelp () {
$('#helpModal').modal('show');
}
static getFirstTimePresentationString () {
return firstTimePresentation;
}
static getFirstTimeLeitnerString () {
return firstTimeLeitner;
}
static getFirstTimeWozniakString () {
return firstTimeWozniak;
}
static getFirstTimeDemoString () {
return firstTimeDemo;
}
static toggleHelp () {
if ($('#helpModal').is(':visible')) {
$('#helpModal').modal('hide');
} else {
$('#helpModal').modal('show');
}
}
static enableKeyEvents () {
keyEventsUnlocked = true;
}
static keyEvents (event) {
if (keyEventsUnlocked) {
let keyCodes = [112];
keyEventsUnlocked = false;
if (keyCodes.indexOf(event.keyCode) > -1) {
event.preventDefault();
switch (event.keyCode) {
case 112:
if (Session.get('helpFilter') !== undefined || Route.isPresentationOrDemo() || Route.isBox() || Route.isMemo()) {
this.toggleHelp();
}
break;
}
}
}
}
};
......@@ -43,7 +43,7 @@ Router.route('/home', {
return [Meteor.subscribe('wordcloudCardsets')];
},
data: function () {
Session.set('helpFilter', Router.current().route.getName());
Session.set('helpFilter', "start");
return Cardsets.findOne({_id: Session.get('wordcloudItem')});
},
action: function () {
......@@ -155,7 +155,7 @@ Router.route('demolist', {
return [Meteor.subscribe('demoCardsets'), Meteor.subscribe('demoCards')];
},
data: function () {
Session.set('helpFilter', undefined);
Session.set('helpFilter', "cardsetIndex");
return Cardsets.findOne({kind: 'demo', name: "DemoCardset", shuffled: true});
},
action: function () {
......@@ -204,7 +204,7 @@ Router.route('/alldecks', {
return [Meteor.subscribe('allCardsets'), Meteor.subscribe('paidCardsets')];
},
data: function () {
Session.set('helpFilter', undefined);
Session.set('helpFilter', "pool");
Session.set('activeRouteTitle', TAPi18n.__('navbar-collapse.alldecks', {}, Session.get('activeLanguage')));
Filter.resetMaxItemCounter();
},
......@@ -379,7 +379,7 @@ Router.route('/cardset/:_id/stats', {
return [Meteor.subscribe('cardset', this.params._id), Meteor.subscribe('cardsetUserRating', this.params._id), Meteor.subscribe('cardsetWorkload', this.params._id)];
},
data: function () {
Session.set('helpFilter', "workloadProgress");
Session.set('helpFilter', "bonusStatistics");
return Cardsets.findOne({_id: this.params._id});
},
action: function () {
......@@ -402,7 +402,7 @@ Router.route('/cardsetlist/:_id', {
return [Meteor.subscribe('cardset', this.params._id), Meteor.subscribe('paidCardset', this.params._id), Meteor.subscribe('cardsetUserRating', this.params._id), Meteor.subscribe('cardsetWorkload', this.params._id), Meteor.subscribe('cardsetCards', this.params._id), Meteor.subscribe('cardsetLeitner', this.params._id), Meteor.subscribe('cardsetWozniak', this.params._id)];
},
data: function () {
Session.set('helpFilter', "cardset");
Session.set('helpFilter', "cardsetIndex");
Session.set('isNewCardset', false);
return Cardsets.findOne({_id: this.params._id});
},
......@@ -498,7 +498,7 @@ Router.route('/box/:_id', {
},
data: function () {
MarkdeepEditor.changeMobilePreview(true);
Session.set('helpFilter', "leitner");
Session.set('helpFilter', undefined);
return Cardsets.findOne({_id: this.params._id});
},
action: function () {
......@@ -518,7 +518,7 @@ Router.route('/memo/:_id', {
},
data: function () {
MarkdeepEditor.changeMobilePreview(true);
Session.set('helpFilter', "wozniak");
Session.set('helpFilter', undefined);
return Cardsets.findOne({_id: this.params._id});
},
action: function () {
......@@ -537,7 +537,7 @@ Router.route('/presentationlist/:_id', {
return [Meteor.subscribe('cardset', this.params._id), Meteor.subscribe('paidCardset', this.params._id), Meteor.subscribe('cardsetWorkload', this.params._id), Meteor.subscribe('cardsetCards', this.params._id)];
},
data: function () {
Session.set('helpFilter', undefined);
Session.set('helpFilter', "cardsetIndex");
return Cardsets.findOne({_id: this.params._id});
},
action: function () {
......@@ -596,7 +596,7 @@ Router.route('makingofcardslist', {
return [Meteor.subscribe('makingOfCardsets'), Meteor.subscribe('demoCards')];
},
data: function () {
Session.set('helpFilter', undefined);
Session.set('helpFilter', "cardsetIndex");
return Cardsets.findOne({kind: 'demo', name: "MakingOfCardset", shuffled: true});
},
action: function () {
......
......@@ -209,16 +209,6 @@ Template.copyCard.events({
}
});
Meteor.startup(function () {
CardNavigation.fullscreenExitEvents();
$(document).on('keydown', function (event) {
CardNavigation.keyEvents(event);
});
$(document).on('keyup', function () {
CardNavigation.enableKeyEvents();
});
});
/*
* ############################################################################
* cancelEditForm
......
<template name="demoHelpModalContentEnglish">
</template>
<template name="demoHelpModal">
<div class="modal fade" id="demoHelpModal" tabindex="-1" role="dialog"
<template name="demoModal">
<div class="modal fade" id="demoModal" tabindex="-1" role="dialog"
aria-labelledby="presentationHelpTitle">
<div class="modal-dialog">
<div class="modal-content modal-content-for-buttons">
......@@ -9,14 +9,24 @@
</div>
<div class="modal-body">
{{#markdeep}}
{{#if isActiveLanguage 'de'}}
{{> demoHelpModalContentGerman}}
{{else}}
{{> demoHelpModalContentEnglish}}
{{/if}}
<a href="/img/Bildlogo.png"
data-lightbox="img-1" data-title="Logo">
<img src="/img/Bildlogo.png"
alt="Logo von .cards" class="img-responsive center-block" width="75%"/>
</a>
<p>Schau dir die Demo-Kartei an und erfahre,
wie du mit 🍅cards (sprich <strong>&laquo;dot cards&raquo;</strong>)
das Wissen aus deinem Studium
organisierst, lernst, memorierst und in Seminaren präsentierst.</p>
<p>Erfahre, warum die Tomate 🍅 der Punkt in unserem Logo ist
und warum sie der Mittelpunkt in deinem Studium sein sollte.</p>
<br>
{{/markdeep}}
<button class="btn btn-raised btn-success btn-block"
id="demoHelpConfirm">{{_ "demo.help.button.confirm"}}</button>
id="demoConfirm">{{_ "demo.help.button.confirm"}}</button>
</div>
</div>
</div>
......
import "./demoHelp.html";
import "./content/english.html";
import "./content/german.html";
import "./demo.html";
import {Template} from "meteor/templating";
import {Session} from "meteor/session";
import {MainNavigation} from "../../../api/mainNavigation";
import {CardVisuals} from "../../../api/cardVisuals";
import {Route} from "../../../api/route";
import {PomodoroTimer} from "../../../api/pomodoroTimer";
let firstTimeDemo = 'isFirstTimeDemo';
/*
* ############################################################################
* demoHelpModal
* demoModal
* ############################################################################
*/
Template.demoHelpModal.onRendered(function () {
$('#presentationHelpModal').on('show.bs.modal', function () {
Session.set('helpModalActive', true);
});
$('#presentationHelpModal').on('hidden.bs.modal', function () {
Session.set('helpModalActive', false);
});
if (localStorage.getItem(firstTimeDemo) !== "true") {
$('#demoHelpModal').modal('show');
Template.demoModal.onRendered(function () {
if (localStorage.getItem(MainNavigation.getFirstTimeDemoString()) !== "true") {
$('#demoModal').modal('show');
}
});
Template.demoHelpModal.onDestroyed(function () {
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
Session.set('helpModalActive', false);
});
Template.demoHelpModal.events({
"click #demoHelpConfirm": function () {
$('#demoHelpModal').modal('hide');
Template.demoModal.events({
"click #demoConfirm": function () {
$('#demoModal').modal('hide');
CardVisuals.toggleFullscreen();
if (Route.isDemo() && CardVisuals.isFullscreen()) {
PomodoroTimer.start();
} else {
PomodoroTimer.clickClock();
}
localStorage.setItem(firstTimeDemo, "true");
localStorage.setItem(MainNavigation.getFirstTimeDemoString(), "true");
}
});
import "./help.html";
import {Route} from "../../../../api/route";
import {Session} from "meteor/session";
import {MainNavigation} from "../../../../api/mainNavigation";
import "./help.html";
/*
* ############################################################################
......@@ -10,13 +10,7 @@ import {Session} from "meteor/session";
Template.cardSidebarItemHelp.events({
"click .showModalHelp": function () {
if (Route.isPresentation() || Route.isDemo()) {
$('#presentationHelpModal').modal('show');
} else if (Route.isBox()) {
$('#leitnerHelpModal').modal('show');
} else if (Route.isMemo()) {
$('#wozniakHelpModal').modal('show');
}
MainNavigation.showHelp();
}
});
......
......@@ -5,9 +5,9 @@ import {CardType} from "../../../../api/cardTypes";
import {Leitner, Wozniak} from "../../../../api/learned";
import {Cardsets} from "../../../../api/cardsets";
import {CardsetNavigation} from "../../../../api/cardsetNavigation";
import "../modal/chooseFlashcards.js";
import "../modal/leitner.js";
import "../modal/wozniak.js";
import "../modal/chooseFlashcards.js";
import "./workload.html";
/*
......
<template name="helpWozniak">
<h2>Wiederholungen nach Woźniak</h2>
<p>Sorry, Hilfe folgt in Kürze.</p>
</template>
<template name="helpPresentation">
<h2>Präsentation</h2>
<a href="/img/help/de/Praesentation.jpg" data-lightbox="img-1"
data-title="Karte als Präsentationsfolie">
<img src="/img/help/de/Praesentation.jpg" alt="Präsentation"
class="img-responsive center-block">
</a>
<ul class="thm-numbering">
<li><strong>Die Karte als Folie:</strong> 🍅cards wurde auch als Präsentationstool entwickelt.
In der Präsentation werden die Karten in der Vollansicht dargestellt.
Das ist für ein ablenkungsfreies Betrachten und Lernen sehr förderlich.
Mit dem Karteityp "Vortrag" kannst du sogar vollständige Beamer-Präsentationen halten.
Die Uhr dient dir dann für das Timing deines Vortrags.
Durch die Präsentation navigierst du bequem mit der <strong>Leertaste</strong>,
durch die Seiten einer Karte mit der <strong>Tabtaste</strong>
und zu einer beliebigen Karte springst du im Inhaltsverzeichnis.
</li>
<li><strong>Einstelloptionen:</strong> Du kannst den Text auf der Karte um bis zum 3-Fachen vergrößern,
so dass dein Publikum in der hintersten Reihe alles gut sehen kann.
Sollte der Beamer die Farben nicht richtig darstellen, gehe zu deinen Profil-Einstellungen und schalte einfach auf Schwarz-Weiß-Kontrast.
</li>
</ul>
</template>
<template name="helpCardsetPreview">
<h2>Kostenpflichtige Kartei</h2>
<p>Sorry, Hilfe folgt in Kürze.</p>
</template>
<template name="leitnerHelpModalContentGerman">
<template name="helpContentCategoryLeitner">
<p>
Die <b>5-Fächer-Lernmethode von Leitner</b> legt bereits gelernte Karten in bestimmten länger
werdenden
......
<template name="helpWorkloadProgress">
<template name="helpContentCategoryWorkloadProgress">
<h2>Lernstand</h2>
<a href="/img/help/de/Lernstand.jpg" data-lightbox="img-1"
data-title="Lernstandsanzeige in einem Repetitorium: Der Lernstand kann für jede Kartei getrennt angezeigt werden.">
......
<template name="wozniakHelpModalContentGerman">
<template name="helpContentCategoryWozniak">
<p>
Bei der <b>SuperMemo-Lernmethode von Woźniak</b> werden die Abstände aufgrund deiner Einschätzung,
wie leicht oder schwer du dich an die Antwort erinnern kannst, individuell gemäß dem
......
<template name="helpCardEditor">
<template name="helpContentCategoryCardEditor">
<h2>Karteneditor</h2>
<a href="/img/help/de/Editor.jpg" data-lightbox="img-1"
data-title="Markdown/Markdeep-Karteneditor mit synchroner Vorschau auf einem Smartphone">
......
<template name="helpBonus">
<template name="helpContentCategoryBonus">
<h2>Bonus</h2>
<a href="/img/help/de/Bonus.jpg" data-lightbox="img-1"
data-title="Bonusphase verwalten">
......
<template name="helpLeitner">
<h2>Wiederholungen nach Leitner</h2>
<template name="helpContentCategoryBonusStatistics">
<h2>Bonus-Statistik</h2>
<p>Sorry, Hilfe folgt in Kürze.</p>
</template>
<template name="helpCardView">
<template name="helpContentCategoryCardView">
<h2>Kartei- und Kartenoptionen</h2>
<a href="/img/help/de/Karte.jpg" data-lightbox="img-1"
data-title="Kartei- und Kartenoptionen">
......
<template name="helpContentCategoryCardsetIndex">
<h2>Index</h2>
<p>Sorry, Hilfe folgt in Kürze.</p>
</template>
<template name="demoHelpModalContentGerman">
<template name="helpContentCategoryDemo">
<a href="/img/Bildlogo.png"
data-lightbox="img-1" data-title="Logo">
<img src="/img/Bildlogo.png"
......@@ -15,5 +14,4 @@
und warum sie der Mittelpunkt in deinem Studium sein sollte.</p>
<br>
</template>
<template name="helpMyCardsets">
<template name="helpContentCategoryMyCardsets">
<h2>Kartei anlegen</h2>
<a href="/img/help/de/Kartei_anlegen.jpg" data-lightbox="img-1"
data-title="Kartei anlegen">
......
<template name="helpPool">
<template name="helpContentCategoryPool">
<h2>Themen-Pool</h2>
<a href="/img/help/de/Themen-Pool.jpg" data-lightbox="img-1"
data-title="Themen-Pool mit Such-, Sortier- und Filterfunktionen">
......
<template name="helpRepetitorium">
<template name="helpContentCategoryRepetitorium">
<h2>Repetitorien</h2>
<a href="/img/help/de/Repetitorien.jpg" data-lightbox="img-1"
data-title="Repetitorien sind Sammlungen von Karteien, die thematisch zu einem Modul gehören, und dienen der Prüfungsvorbereitung.">
......
<template name="helpShuffle">
<template name="helpContentCategoryShuffle">
<h2>Karteien mischen</h2>
<p>Sorry, Hilfe folgt in Kürze.</p>
</template>
<template name="helpWorkload">
<template name="helpContentCategoryWorkload">
<h2>Lernpensum</h2>
<a href="/img/help/de/Lernpensum.jpg" data-lightbox="img-1"
data-title="Lernpensum">
......
<template name="presentationHelpModalContentGerman">
<template name="helpContentCategoryPresentation">
<strong>Rand-Buttons</strong>
......
<template name="helpProfileBilling">
<template name="helpContentCategoryProfileBilling">
<h2>Abrechnung</h2>
<p>Sorry, Hilfe folgt in Kürze.</p>
</template>
<template name="helpProfileMembership">
<template name="helpContentCategoryProfileMembership">
<h2>Mitgliedschaft</h2>
<p>Sorry, Hilfe folgt in Kürze.</p>
</template>
<template name="helpProfileNotifications">
<template name="helpContentCategoryProfileNotifications">
<h2>Nachrichten</h2>
<p>Sorry, Hilfe folgt in Kürze.</p>
</template>
<template name="helpProfileRequests">
<template name="helpContentCategoryProfileRequests">
<h2>Pro-Anfragen / Karteifreigabe</h2>
<p>Sorry, Hilfe folgt in Kürze.</p>
</template>
<template name="helpProfileSettings">
<template name="helpContentCategoryProfileSettings">
<h2>Profil & Konto</h2>
<p>Sorry, Hilfe folgt in Kürze.</p>
</template>
<template name="helpStart">
<template name="helpContentCategoryStart">
<h2>Startseite</h2>
<a href="/img/help/de/Startseite.jpg" data-lightbox="img-1" data-title="Startseite der
Lernplattform 🍅cards">
......
<template name="helpContent">
{{#if displayHelpCategory "start"}}
{{> helpContentCategoryStart}}
{{/if}}
{{#if displayHelpCategory "pool"}}
{{> helpContentCategoryPool}}
{{/if}}
{{#if displayHelpCategory "repetitorium"}}
{{> helpContentCategoryRepetitorium}}
{{/if}}
{{#if displayHelpCategory "shuffle"}}
{{> helpContentCategoryShuffle}}
{{/if}}
{{#if displayHelpCategory "workload"}}
{{> helpContentCategoryWorkload}}
{{/if}}
{{#if displayHelpCategory "create"}}
{{> helpContentCategoryMyCardsets}}
{{/if}}
{{#if displayHelpCategory "cardset"}}
{{> helpContentCategoryCardView}}
{{/if}}
{{#if displayHelpCategory "cardsetIndex"}}
{{> helpContentCategoryCardsetIndex}}
{{/if}}
{{#if displayHelpCategory "bonus"}}
{{> helpContentCategoryBonus}}
{{/if}}
{{#if displayHelpCategory "bonusStatistics"}}
{{> helpContentCategoryBonusStatistics}}
{{/if}}
{{#if displayHelpCategory "workloadProgress"}}
{{> helpContentCategoryWorkloadProgress}}
{{/if}}
{{#if displayHelpCategory "cardEditor"}}
{{> helpContentCategoryCardEditor}}
{{/if}}
{{#if displayHelpCategory "progress"}}
{{> helpContentCategoryWorkloadProgress}}
{{/if}}
{{#if displayHelpCategory "billing"}}
{{> helpContentCategoryProfileBilling}}
{{/if}}
{{#if displayHelpCategory "membership"}}
{{> helpContentCategoryProfileMembership}}
{{/if}}
{{#if displayHelpCategory "notifications"}}
{{> helpContentCategoryProfileNotifications}}
{{/if}}
{{#if displayHelpCategory "requests"}}
{{> helpContentCategoryProfileRequests}}
{{/if}}
{{#if displayHelpCategory "settings"}}
{{> helpContentCategoryProfileSettings}}
{{/if}}
</template>
import {Session} from "meteor/session";
import "./categories/algorithms/progress.html";
import "./categories/algorithms/leitner.html";
import "./categories/algorithms/wozniak.html";
import "./categories/card/editor.html";
import "./categories/cardset/bonus.html";
import "./categories/cardset/bonusStatistics.html";
import "./categories/cardset/cardView.html";
import "./categories/cardset/index.html";
import "./categories/filterResults/myCardsets.html";
import "./categories/filterResults/pool.html";
import "./categories/filterResults/repetitorium.html";
import "./categories/filterResults/shuffle.html";
import "./categories/filterResults/workload.html";
import "./categories/presentation/presentation.html";
import "./categories/profile/billing.html";
import "./categories/profile/membership.html";
import "./categories/profile/notifications.html";
import "./categories/profile/requests.html";
import "./categories/profile/settings.html";
import "./categories/start.html";
import "./helpContent.html";
/*
* ############################################################################
* helpContent
* ############################################################################
*/
Template.helpContent.helpers({
displayHelpCategory: function (category) {
return Session.get('helpFilter') === undefined || Session.get('helpFilter') === category;
}
});
......@@ -9,32 +9,7 @@
{{_ "help.resetFilter"}}
</button>
{{/if}}
{{#if displayHelpCategory "start"}}
{{> helpStart}}
{{/if}}
{{#if displayHelpCategory "pool"}}
{{> helpPool}}
{{/if}}
{{#if displayHelpCategory "repetitorium"}}
{{> helpRepetitorium}}
{{/if}}
{{#if displayHelpCategory "workload"}}
{{> helpWorkload}}
{{/if}}
{{#if displayHelpCategory "create"}}
{{> helpMyCardsets}}
{{/if}}
{{#if displayHelpCategory "cardset"}}
{{> helpCardView}}
{{> helpPresentation}}
{{> helpBonus}}
{{/if}}
{{#if displayHelpCategory "workloadProgress"}}
{{> helpWorkloadProgress}}
{{/if}}
{{#if displayHelpCategory "cardEditor"}}
{{> helpCardEditor}}
{{/if}}
{{> helpContent}}
</div>
</div>
</template>
import {Session} from "meteor/session";
import "./categories/algorithms/leitner.html";
import "./categories/algorithms/progress.html";
import "./categories/algorithms/wozniak.html";
import "./categories/card/editor.html";
import "./categories/cardset/bonus.html";
import "./categories/cardset/cardView.html";
import "./categories/cardset/presentation.html";
import "./categories/cardset/preview.html";
import "./categories/filterResults/myCardsets.html";
import "./categories/filterResults/pool.html";
import "./categories/filterResults/repetitorium.html";
import "./categories/filterResults/shuffle.html";
import "./categories/filterResults/workload.html";
import "./categories/profile/billing.html";
import "./categories/profile/membership.html";
import "./categories/profile/notifications.html";
import "./categories/profile/requests.html";
import "./categories/profile/settings.html";
import "./categories/start.html";
import "./content/helpContent.js";
import "./modal/helpModal.js";
import "./help.html";
/*
......@@ -29,9 +12,6 @@ import "./help.html";
Template.help.helpers({
isHelpFilterActive: function () {
return Session.get('helpFilter') !== undefined;
},
displayHelpCategory: function (category) {
return Session.get('helpFilter') === undefined || Session.get('helpFilter') === category;
}
});
......
<template name="helpModal">
<div class="modal fade" id="helpModal" tabindex="-1" role="dialog"
aria-labelledby="helpModalTitle">
<div class="modal-dialog">
<div class="modal-content modal-content-for-buttons">
<div class="modal-body">
{{#if isActiveRoute regex='presentation|demo|making'}}
{{#if isActiveRoute regex='presentationlist|demolist|makinglist'}}
{{> helpContent}}
{{else}}
<h4 id="presentationHelp" class="modal-title">{{_ "presentation.help.title"}}
</h4>
{{#markdeep}}
{{> helpContentCategoryPresentation}}
{{/markdeep}}
<button class="btn btn-raised btn-success btn-block"
id="presentationHelpConfirm">{{_ "presentation.help.button.confirm"}}</button>
{{/if}}
{{else}}
{{#if isActiveRoute 'box'}}
<h4 id="leitnerHelp" class="modal-title">{{_ "leitner.help.title"}}
</h4>
{{#markdeep}}
{{> helpContentCategoryLeitner}}
{{/markdeep}}
<button class="btn btn-raised btn-success"
id="leitnerHelpConfirm">{{_ "leitner.help.button.confirm"}}</button>
{{else}}
{{#if isActiveRoute 'memo'}}
<h4 id="wozniakHelp" class="modal-title">{{_ "wozniak.help.title"}}
</h4>
{{#markdeep}}
{{> helpContentCategoryWozniak}}
{{/markdeep}}
<button class="btn btn-raised btn-success"
id="wozniakHelpConfirm">{{_ "wozniak.help.button.confirm"}}</button>
{{else}}
{{> helpContent}}
{{/if}}
{{/if}}
{{/if}}
</div>
</div>
</div>
</div>
</template>
import "./presentationHelp.html";
import "./content/english.html";
import "./content/german.html";
import {Route} from "../../../api/route.js";
import "./helpModal.html";
import {Template} from "meteor/templating";
import {Session} from "meteor/session";
let firstTimePresentation = 'isFirstTimePresentation';
import {Route} from "../../../api/route";
import {MainNavigation} from "../../../api/mainNavigation";
/*
* ############################################################################
<