Commit afc9dd7c authored by Curtis Adam's avatar Curtis Adam

Use the presentation navigation for all views

parent d54b9641
import {Session} from "meteor/session";
import {CardEditor} from "./cardEditor";
import {Route} from "./route";
import {CardType} from "./cardTypes";
let editorFullScreenActive = false;
......@@ -134,18 +133,6 @@ export let CardVisuals = class CardVisuals {
}
}
/**
* Function changes from the backside to the front side of
* a card or the other way around
*/
static turnCard (adjustEditWindow = false) {
if ($(".box").hasClass("flipped")) {
this.turnFront(adjustEditWindow);
} else {
this.turnBack(adjustEditWindow);
}
}
static isCentered (type, centerTextElement) {
if (Route.isEditMode()) {
return Session.get('centerTextElement')[type];
......@@ -153,52 +140,4 @@ export let CardVisuals = class CardVisuals {
return centerTextElement[type];
}
}
static turnFront (adjustEditWindow = false) {
if (Session.get('reverseViewOrder')) {
Session.set('isQuestionSide', false);
} else {
Session.set('isQuestionSide', true);
}
if (Route.isEditMode() && adjustEditWindow) {
CardEditor.prepareFront();
}
$(".box .cardfront-symbol").css('display', "");
$(".box .cardback-symbol").css('display', "none");
$(".box .cardfront").css('display', "");
$(".box .cardFrontHeader").css('display', "");
$(".box .cardback").css('display', "none");
$(".box .cardBackHeader").css('display', "none");
$(".box").removeClass("flipped");
$(".box .cardHeader").removeClass("back");
$(".box .cardContent").removeClass("back");
}
static turnBack (adjustEditWindow = false) {
if (Session.get('reverseViewOrder')) {
Session.set('isQuestionSide', true);
} else {
Session.set('isQuestionSide', false);
}
if (Route.isEditMode() && adjustEditWindow) {
CardEditor.prepareBack();
}
$(".cardbackCheck").css('display', "");
$(".cardfrontCheck").css('display', "none");
$(".box .cardfront-symbol").css('display', "none");
$(".box .cardback-symbol").css('display', "");
$(".box .cardfront").css('display', "none");
$(".box .cardFrontHeader").css('display', "none");
$(".box .cardback").css('display', "");
$(".box .cardBackHeader").css('display', "");
$(".box").addClass("flipped");
$(".box .cardHeader").addClass("back");
$(".box .cardContent").addClass("back");
}
static cardHeaderTurnCard (evt) {
if (!CardType.gotOneColumn($(evt.target).data('cardtype')) && ($(evt.target).data('type') !== "cardNavigation") && !$(evt.target).is('a, a *')) {
this.turnCard();
}
}
};
......@@ -12,6 +12,7 @@ import DOMPurify from 'dompurify';
import {DOMPurifyConfig} from "../../api/dompurify.js";
import "/client/markdeep.js";
import {getAuthorName} from "../../api/userdata";
import {Route} from "../../api/route";
Meteor.subscribe("collegesCourses");
......@@ -529,6 +530,18 @@ Template.registerHelper("getLearnphase", function (state) {
});
Template.registerHelper("getCardBackground", function (difficulty, cardType, backgroundStyle) {
if (Route.isPresentationOrDemo() || Route.isCardset() || Route.isBox() || Route.isEditMode() || Route.isMemo()) {
if (Session.get('activeEditMode') === 2) {
if (CardType.gotAlternativeHintStyle(this.cardType)) {
return "box-hint-alternative";
} else {
return "box-hint";
}
}
if (CardType.gotLecture(this.cardType) && Session.get('activeEditMode') === 3) {
return "box-lecture";
}
}
switch (cardType) {
case 8:
return 'box-post-it';
......
......@@ -37,7 +37,7 @@
<template name="flashcards">
{{> cardHint cardType=cardset.cardType}}
{{> copyCard}}
<div class="{{#if isCardset}}{{#unless fullscreenActive}}col-xs-12{{/unless}}{{/if}} flip-container"
<div class="flip-container"
id="set-details-region">
<div>
<div id="cardCarousel" class="carousel slide" data-interval="false">
......
......@@ -129,21 +129,10 @@ Template.flashcardNavigation.helpers({
Template.flashcardNavigation.events({
"click #leftCarouselControl, click #rightCarouselControl": function () {
let showLecture = $('.item.active .showLecture.pressed');
if (Session.get('reverseViewOrder')) {
if (Route.isPresentationOrDemo()) {
CardEditor.editBack();
} else {
showLecture.click();
CardVisuals.turnBack();
}
CardEditor.editBack();
} else {
if (Route.isPresentationOrDemo()) {
CardEditor.editFront();
} else {
showLecture.click();
CardVisuals.turnFront();
}
CardEditor.editFront();
}
let flashcardCarousel = $('#cardCarousel');
flashcardCarousel.on('slide.bs.carousel', function () {
......@@ -277,11 +266,7 @@ Meteor.startup(function () {
}
break;
case 38:
if (Route.isPresentationOrDemo()) {
MarkdeepEditor.cardSideNavigation();
} else if (!Route.isEditMode()) {
CardVisuals.turnFront();
}
MarkdeepEditor.cardSideNavigation();
break;
case 39:
if ($('#rightCarouselControl').click()) {
......@@ -294,11 +279,7 @@ Meteor.startup(function () {
}
break;
case 40:
if (Route.isPresentationOrDemo()) {
MarkdeepEditor.cardSideNavigation(false);
} else if (!Route.isEditMode()) {
CardVisuals.turnBack();
}
MarkdeepEditor.cardSideNavigation(false);
break;
case 48:
if (!Session.get('isQuestionSide')) {
......
<template name="flashcardContent">
{{#if isEditModeOrPresentation}}
{{> flashcardContentPresentation this}}
{{else}}
{{> flashcardContentDefault this}}
{{/if}}
{{> flashcardContentPresentation this}}
</template>
<template name="cardFrontContent">
......
......@@ -29,10 +29,7 @@
</template>
<template name="flashcardHeaderPresentation">
<div class="cardHeader {{#if isHintPreview}}{{#if
gotAlternativeHintStyle}}box-hint-alternative{{else}}box-hint{{/if}}{{else}}{{#if
isLecturePreview}}box-lecture{{else}}{{getCardBackground difficulty cardType
backgroundStyle}}{{/if}}{{/if}}-header"
<div class="cardHeader {{getCardBackground difficulty cardType backgroundStyle}}-header"
data-cardtype="{{cardType}}">
{{> flashcardHeaderPresentationLeft this}}
{{> flashcardHeaderCenter this}}
......@@ -41,10 +38,7 @@
</template>
<template name="flashcardHeaderDemo">
<div class="cardHeader {{#if isHintPreview}}{{#if
gotAlternativeHintStyle}}box-hint-alternative{{else}}box-hint{{/if}}{{else}}{{#if
isLecturePreview}}box-lecture{{else}}{{getCardBackground difficulty cardType
backgroundStyle}}{{/if}}{{/if}}-header"
<div class="cardHeader {{getCardBackground difficulty cardType backgroundStyle}}-header"
data-cardtype="{{cardType}}">
{{> flashcardHeaderPresentationLeft this}}
{{> flashcardHeaderCenter this}}
......@@ -53,10 +47,7 @@
</template>
<template name="flashcardHeaderEditor">
<div class="cardHeader {{#if isHintPreview}}{{#if
gotAlternativeHintStyle}}box-hint-alternative{{else}}box-hint{{/if}}{{else}}{{#if
isLecturePreview}}box-lecture{{else}}{{getCardBackground difficulty cardType
backgroundStyle}}{{/if}}{{/if}}-header"
<div class="cardHeader {{getCardBackground difficulty cardType backgroundStyle}}-header"
data-cardtype="{{cardType}}">
{{> flashcardHeaderEditorLeft this}}
{{> flashcardHeaderCenter this}}
......
import {Session} from "meteor/session";
import {Template} from "meteor/templating";
import {Route} from "../../../api/route";
import {CardVisuals} from "../../../api/cardVisuals";
import {CardType} from "../../../api/cardTypes";
import "./header.html";
import "./left/left.js";
import "./right/right.js";
......@@ -15,11 +12,8 @@ import "./item/countCardsLeitner.js";
import "./item/dictionary.js";
import "./item/edit.js";
import "./item/endPresentation.js";
import "./item/hint.js";
import "./item/lecture.js";
import "./item/swapOrder.js";
import "./item/toggleFullscreen.js";
import "./item/turnCard.js";
/*
* ############################################################################
......@@ -47,99 +41,3 @@ Template.flashcardHeader.helpers({
return Route.isMemo();
}
});
/*
* ############################################################################
* flashcardHeaderDefault
* ############################################################################
*/
Template.flashcardHeaderDefault.events({
"click .cardHeader": function (evt) {
CardVisuals.cardHeaderTurnCard(evt);
}
});
/*
* ############################################################################
* flashcardHeaderPresentation
* ############################################################################
*/
Template.flashcardHeaderPresentation.helpers({
gotAlternativeHintStyle: function () {
return CardType.gotAlternativeHintStyle(this.cardType);
},
isHintPreview: function () {
return Session.get('activeEditMode') === 2;
},
isLecturePreview: function () {
if (CardType.gotLecture(this.cardType)) {
return Session.get('activeEditMode') === 3;
}
}
});
/*
* ############################################################################
* flashcardHeaderDemo
* ############################################################################
*/
Template.flashcardHeaderDemo.helpers({
gotAlternativeHintStyle: function () {
return CardType.gotAlternativeHintStyle(this.cardType);
},
isHintPreview: function () {
return Session.get('activeEditMode') === 2;
},
isLecturePreview: function () {
if (CardType.gotLecture(this.cardType)) {
return Session.get('activeEditMode') === 3;
}
}
});
/*
* ############################################################################
* flashcardHeaderEditor
* ############################################################################
*/
Template.flashcardHeaderEditor.helpers({
gotAlternativeHintStyle: function () {
return CardType.gotAlternativeHintStyle(this.cardType);
},
isHintPreview: function () {
return Session.get('activeEditMode') === 2;
},
isLecturePreview: function () {
if (CardType.gotLecture(this.cardType)) {
return Session.get('activeEditMode') === 3;
}
}
});
/*
* ############################################################################
* flashcardHeaderLeitner
* ############################################################################
*/
Template.flashcardHeaderLeitner.events({
"click .cardHeader": function (evt) {
CardVisuals.cardHeaderTurnCard(evt);
}
});
/*
* ############################################################################
* flashcardHeaderWozniak
* ############################################################################
*/
Template.flashcardHeaderWozniak.events({
"click .cardHeader": function (evt) {
CardVisuals.cardHeaderTurnCard(evt);
}
});
<template name="cardHeaderItemHint">
{{#if gotHint}}
<span class="showHint fa fa-book card-button cardHeaderItem"
data-id="{{_id}}" data-type="cardNavigation"
data-toggle="modal"
data-target="#showHintModal"></span>
{{/if}}
</template>
import {Session} from "meteor/session";
import "./hint.html";
import {CardType} from "../../../../api/cardTypes";
/*
* ############################################################################
* cardHeaderItemHint
* ############################################################################
*/
Template.cardHeaderItemHint.helpers({
gotHint: function () {
return (CardType.gotHint(this.cardType) && this.hint !== "" && this.hint !== undefined);
}
});
Template.cardHeaderItemHint.events({
"click .showHint": function (evt) {
Session.set('selectedHint', $(evt.target).data('id'));
$('#showHint').children().addClass("pressed");
}
});
<template name="cardHeaderItemLecture">
{{#if gotLecture}}
<span class="showLecture glyphicon glyphicon glyphicon-education card-button cardHeaderItem"
data-type="cardNavigation"
data-toggle="collapse"
data-target="#collapseLecture-{{_id}}"></span>
{{/if}}
</template>
import "./lecture.html";
import {CardType} from "../../../../api/cardTypes";
/*
* ############################################################################
* cardHeaderItemLecture
* ############################################################################
*/
Template.cardHeaderItemLecture.helpers({
gotLecture: function () {
return CardType.gotLecture(this.cardType) && this.lecture !== "" && this.lecture !== undefined;
}
});
Template.cardHeaderItemLecture.events({
"click .showLecture": function () {
let showLecture = $('.item.active .showLecture');
if (showLecture.hasClass("pressed")) {
showLecture.removeClass("pressed");
} else {
showLecture.addClass("pressed");
}
}
});
import {Session} from "meteor/session";
import "./swapOrder.html";
import {Route} from "../../../../api/route";
import {CardEditor} from "../../../../api/cardEditor";
import {CardType} from "../../../../api/cardTypes";
import {CardVisuals} from "../../../../api/cardVisuals";
/*
* ############################################################################
......@@ -34,26 +32,11 @@ Template.cardHeaderItemSwapOrder.events({
"click .swapOrder": function () {
if (Session.get('reverseViewOrder')) {
Session.set('reverseViewOrder', false);
if (Route.isEditMode()) {
CardVisuals.turnFront(true);
} else {
if (Route.isPresentation()) {
CardEditor.editFront();
} else {
CardVisuals.turnFront();
}
}
CardEditor.editFront();
} else {
Session.set('reverseViewOrder', true);
if (Route.isEditMode()) {
CardVisuals.turnBack(true);
} else {
if (Route.isPresentation()) {
CardEditor.editBack();
} else {
CardVisuals.turnBack();
}
}
CardEditor.editBack();
}
Session.set('isQuestionSide', true);
}
});
<template name="cardHeaderItemTurnCard">
{{#unless gotOneColumn}}
{{#if gotBack}}
<span class="turnCard fa fa-refresh card-button cardHeaderItem {{#unless
isQuestionSide}}pressed{{/unless}}"
data-cardtype="{{cardType}}" title="{{_ "card.tooltip.turnCard"}}"></span>
{{/if}}
{{/unless}}
</template>
import {Session} from "meteor/session";
import "./turnCard.html";
import {CardType} from "../../../../api/cardTypes";
/*
* ############################################################################
* cardHeaderItemTurnCard
* ############################################################################
*/
Template.cardHeaderItemTurnCard.helpers({
gotOneColumn: function () {
return CardType.gotOneColumn(this.cardType);
},
isQuestionSide: function () {
return Session.get('isQuestionSide');
},
gotBack: function () {
if (CardType.gotOneColumn(this.cardType)) {
return true;
}
if (CardType.gotBack(this.cardType)) {
return this.back !== '' && this.back !== undefined;
} else {
return false;
}
}
});
......@@ -19,16 +19,8 @@
<div class="cardHeaderGroup">
<div class="cardHeaderRowHalf" data-cardtype="{{cardType}}">
{{> cardHeaderItemEdit this}}
{{> cardHeaderItemLecture this}}
<span class="hidden-xs" data-cardtype="{{cardType}}">
{{> cardHeaderItemHint this}}
</span>
</div>
<div class="cardHeaderRowHalf" data-cardtype="{{cardType}}">
<span class="visible-xs" data-cardtype="{{cardType}}">
{{> cardHeaderItemHint this}}
</span>
<span class="hidden-xs" data-cardtype="{{cardType}}">
{{> cardHeaderItemCardList this}}
{{> cardHeaderItemCopy this}}
......@@ -43,20 +35,6 @@
<template name="flashcardHeaderLeitnerLeft">
<div class="col-xs-3 cardHeaderLeft" data-cardtype="{{cardType}}">
<div class="cardHeaderGroup">
<div class="cardHeaderRowHalf" data-cardtype="{{cardType}}">
{{> cardHeaderItemLecture this}}
<span class="hidden-xs" data-cardtype="{{cardType}}">
{{> cardHeaderItemHint this}}
</span>
</div>
<div class="cardHeaderRowHalf" data-cardtype="{{cardType}}">
<span class="visible-xs" data-cardtype="{{cardType}}">
{{> cardHeaderItemHint this}}
</span>
</div>
</div>
<div class="cardHeaderGroup" data-cardtype="{{cardType}}">
{{> cardHeaderItemDictionary this}}
</div>
......@@ -65,20 +43,6 @@
<template name="flashcardHeaderWozniakLeft">
<div class="col-xs-3 cardHeaderLeft" data-cardtype="{{cardType}}">
<div class="cardHeaderGroup">
<div class="cardHeaderRowHalf" data-cardtype="{{cardType}}">
{{> cardHeaderItemLecture this}}
<span class="hidden-xs" data-cardtype="{{cardType}}">
{{> cardHeaderItemHint this}}
</span>
</div>
<div class="cardHeaderRowHalf" data-cardtype="{{cardType}}">
<span class="visible-xs" data-cardtype="{{cardType}}">
{{> cardHeaderItemHint this}}
</span>
</div>
</div>
<div class="cardHeaderGroup" data-cardtype="{{cardType}}">
{{> cardHeaderItemDictionary this}}
</div>
......
......@@ -28,9 +28,6 @@
{{> cardHeaderItemCountCards this}}
</div>
<div class="cardHeaderRowHalf" data-cardtype="{{cardType}}">
<span class="hidden-xs" data-cardtype="{{cardType}}">
{{> cardHeaderItemTurnCard this}}
</span>
{{> cardHeaderItemSwapOrder this}}
<span class="hidden-xs" data-cardtype="{{cardType}}">
{{> cardHeaderItemToggleFullscreen this}}
......@@ -57,10 +54,6 @@
{{> cardHeaderItemCountCardsLeitner this}}
</div>
<div class="cardHeaderRowHalf" data-cardtype="{{cardType}}">
<span class="hidden-xs" data-cardtype="{{cardType}}">
{{> cardHeaderItemTurnCard this}}
</span>
{{> cardHeaderItemSwapOrder this}}
<span class="hidden-xs" data-cardtype="{{cardType}}">
{{> cardHeaderItemToggleFullscreen this}}
</span>
......@@ -73,10 +66,6 @@
<div class="cardHeaderRowHalf" data-cardtype="{{cardType}}">
</div>
<div class="cardHeaderRowHalf" data-cardtype="{{cardType}}">
<span class="hidden-xs" data-cardtype="{{cardType}}">
{{> cardHeaderItemTurnCard this}}
</span>
{{> cardHeaderItemSwapOrder this}}
<span class="hidden-xs" data-cardtype="{{cardType}}">
{{> cardHeaderItemToggleFullscreen this}}
</span>
......
......@@ -58,7 +58,11 @@ Template.cardNavigation.helpers({
return CardType.gotLecture(Session.get('cardType'));
},
gotBack: function () {
return CardType.gotBack(Session.get('cardType'));
if ((Route.isBox() || Route.isMemo())) {
return false;
} else {
return CardType.gotBack(Session.get('cardType'));
}
},
gotTop: function () {
return CardType.gotTop(Session.get('cardType'));
......
......@@ -53,7 +53,12 @@
{{> leitnerLearning}}
{{else}}
{{#if getQuantity this}}
{{> flashcards cardset=this}}
<div class="col-xs-12">
{{> cardNavigation}}
</div>
<div class="col-xs-12">
{{> flashcards cardset=this}}
</div>
{{/if}}
{{/if}}
{{/if}}
......@@ -67,7 +72,12 @@
{{/if}}
{{else}}
{{#if getQuantity this}}
{{> flashcards cardset=this}}
<div class="col-xs-12">
{{> cardNavigation}}
</div>
<div class="col-xs-12">
{{> flashcards cardset=this}}
</div>
{{/if}}
{{/if}}
</template>
......
......@@ -126,6 +126,7 @@ Template.cardset.rendered = function () {
}
});
}
$('html, body').animate({scrollTop: '0px'}, 0);
};
Template.cardset.helpers({
......
......@@ -22,11 +22,22 @@
{{#if isFinished}}
{{> flashcardsEnd}}
{{else}}
{{> learnAnswerOptions}}
{{> flashcards}}
<div class="col-xs-12">
{{> learnAnswerOptions}}
</div>
{{#if isQuestionSide}}
<div class="col-xs-12">
{{> cardNavigation}}
</div>
{{/if}}
<div class="col-xs-12">
{{> flashcards cardset=this}}
</div>
{{/if}}
{{/if}}
{{> learnBackButton}}
<div class="col-xs-12">
{{> learnBackButton}}
</div>
</div>
</template>
......@@ -63,35 +74,40 @@
<div class="btn-group">
<button id="memoRate0" class="btn btn-warning btn-raised btn-warning rate-answer wrong"
data-id="0"
data-toggle="tooltip" title="{{_ "wozniak.answer.0"}}"><span class="hidden-xs">{{_ "wozniak.answer.0"}}</span>
data-toggle="tooltip" title="{{_ "wozniak.answer.0"}}"><span class="hidden-xs">{{_
"wozniak.answer.0"}}</span>
<span class="visible-xs">{{_ "wozniak.answer.0Mobile"}}</span>
</button>
</div>
<div class="btn-group">
<button id="memoRate1" class="btn btn-default btn-raised rate-answer wrong" data-id="1"
data-toggle="tooltip"
title="{{_ "wozniak.answer.1"}}"><span class="hidden-xs">{{_ "wozniak.answer.1"}}</span>
title="{{_ "wozniak.answer.1"}}"><span class="hidden-xs">{{_
"wozniak.answer.1"}}</span>
<span class="visible-xs">{{_ "wozniak.answer.1Mobile"}}</span>
</button>
</div>
<div class="btn-group">
<button id="memoRate2" class="btn btn-default btn-raised rate-answer" data-id="2"
data-toggle="tooltip"
title="{{_ "wozniak.answer.2"}}"><span class="hidden-xs">{{_ "wozniak.answer.2"}}</span>
title="{{_ "wozniak.answer.2"}}"><span class="hidden-xs">{{_
"wozniak.answer.2"}}</span>
<span class="visible-xs">{{_ "wozniak.answer.2Mobile"}}</span>
</button>
</div>
<div class="btn-group">
<button id="memoRate3" class="btn btn-default btn-raised rate-answer" data-id="3"
data-toggle="tooltip"
title="{{_ "wozniak.answer.3"}}"><span class="hidden-xs">{{_ "wozniak.answer.3"}}</span>
title="{{_ "wozniak.answer.3"}}"><span class="hidden-xs">{{_
"wozniak.answer.3"}}</span>
<span class="visible-xs">{{_ "wozniak.answer.3Mobile"}}</span>
</button>
</div>
<div class="btn-group">
<button id="memoRate4" class="btn btn-default btn-raised rate-answer" data-id="4"
data-toggle="tooltip"
title="{{_ "wozniak.answer.4"}}"><span class="hidden-xs">{{_ "wozniak.answer.4"}}</span>
title="{{_ "wozniak.answer.4"}}"><span class="hidden-xs">{{_
"wozniak.answer.4"}}</span>
<span class="visible-xs">{{_ "wozniak.answer.4Mobile"}}</span>
</button>
</div>
......@@ -99,7 +115,8 @@
<button id="memoRate5" class="btn btn-default btn-raised btn-success rate-answer"
data-id="5"
data-toggle="tooltip"
title="{{_ "wozniak.rate.5"}}"><span class="hidden-xs">{{_ "wozniak.answer.5"}}</span>
title="{{_ "wozniak.rate.5"}}"><span class="hidden-xs">{{_
"wozniak.answer.5"}}</span>
<span class="visible-xs">{{_ "wozniak.answer.5Mobile"}}</span>
</button>
</div>
......
......@@ -7,6 +7,7 @@ import {Leitner, Wozniak} from "../../api/learned.js";
import {CardVisuals} from "../../api/cardVisuals.js";
import "./learn.html";
import {Cardsets} from "../../api/cardsets";
import {CardEditor} from "../../api/cardEditor";
Meteor.subscribe("cardsets");
Meteor.subscribe("cards");
......@@ -26,6 +27,8 @@ export function skipAnswer(scrollRight = true) {
Session.set('animationPlaying', false);
Session.set('activeCard', $(".item.active").data('id'));
});
CardEditor.editFront();
Session.set('isQuestionSide', true);
}
/*
......@@ -81,6 +84,9 @@ Template.learnAlgorithms.helpers({
}
});
}
},
isQuestionSide: function () {
return Session.get('