Commit 6da48895 authored by Curtis Adam's avatar Curtis Adam

Remove markdown in frontend

parent b2b199ec
......@@ -35,7 +35,6 @@ tap:i18n-db
aldeed:collection2
okgrow:promise
themeteorchef:bert
wtfzn:bootstrap-markdown
easy:search
barbatus:stars-rating
rexzh0u:kramed
......@@ -53,7 +52,6 @@ percolate:synced-cron
browser-policy@1.1.0
check@1.3.0
shell-server@0.3.1
markdown@1.0.12
tsega:bootstrap3-lightbox
polyroid:font-roboto
ground:db
......
......@@ -93,7 +93,6 @@ less@2.7.12
livedata@1.0.18
localstorage@1.2.0
logging@1.1.20
markdown@1.0.12
matb33:collection-hooks@0.8.4
mdg:validation-error@0.5.1
meteor@1.8.6
......@@ -251,6 +250,5 @@ underscore@1.0.10
url@1.2.0
webapp@1.5.0
webapp-hashing@1.0.9
wtfzn:bootstrap-markdown@2.8.0
wtfzn:dompurify@0.6.1
zimme:active-route@2.3.2
......@@ -4,6 +4,8 @@
@import '../imports/ui/cardset/cardset.scss';
@import '../imports/ui/cardsetCourseIterations/results.scss';
@import '../imports/ui/card/card.scss';
@import '../imports/ui/markdeepEditor/content.scss';
@import '../imports/ui/markdeepEditor/navigation.scss';
@import '../imports/ui/courseIterations/coursesIterations.scss';
@import '../imports/ui/filter/filter.scss';
@import '../imports/ui/forms/cardsetCourseIterationForm.scss';
......
......@@ -367,19 +367,19 @@ $themes: (
color: $thm_gray !important;
}
.md-header .fa, .md-header .center-button, .md-header .fullscreen-button, .card-button {
#markdeepNavigation .fa, #markdeepNavigation .markdeep-center, #markdeepNavigation .markdeep-fullscreen, .card-button {
color: $thm_gray !important;
border-color: $thm_gray !important;
background-color: $white !important;
}
.md-header .markdeep-help {
#markdeepNavigation .markdeep-help {
color: $markdeep_help_text !important;
background-color: $markdeep_help_background !important;
border-color: $markdeep_help_border !important;
}
.md-header .fa:hover, .md-header .center-button:hover, .md-header .fullscreen-button:hover, .card-button:hover {
#markdeepNavigation .fa:hover, #markdeepNavigation .markdeep-center:hover, #markdeepNavigation .markdeep-fullscreen:hover, .card-button:hover {
background-color: $athens_gray_approx;
}
......@@ -394,7 +394,7 @@ $themes: (
color: $white !important;
}
.md-editor {
#markdeepNavigation {
.material-icons.pressed, .fa.pressed, .glyphicon.pressed, .card-button.pressed, .material-icons.pressed:hover, .glyphicon.pressed:hover, .card-button.pressed:hover {
background-color: $thm_orange !important;
border-color: $thm_orange !important;
......@@ -402,6 +402,10 @@ $themes: (
}
}
#contentEditor {
border-color: $primary !important;
}
.disconnected {
color: $footer_websocket_disconnected !important;
}
......@@ -594,7 +598,7 @@ $themes: (
}
}
.panel-body, .md-footer, .cardContent, #showHintModal {
.panel-body, .cardContent, #showHintModal {
a {
color: $hyperlink !important;
}
......@@ -670,11 +674,11 @@ $themes: (
background-color: $primary !important;
}
.md-editor > .md-header {
#markdeepNavigation {
background: $primary !important;
}
.md-editor {
#markdeepNavigation {
border: 1px solid $primary !important;
}
......@@ -1132,7 +1136,7 @@ $themes: (
background-color: $background_lecture !important;
}
.editorBackground, .md-editor > textarea {
.editorBackground, #contentEditor {
background: #FFFFFF !important;
}
......
......@@ -1231,7 +1231,7 @@
},
"markdeep": {
"editor": {
"help": "Format"
"help": "Formatieren mit Markdeep"
}
}
}
......@@ -1243,7 +1243,7 @@
},
"markdeep": {
"editor": {
"help": "Help"
"help": "Formatting with Markdeep"
}
}
}
import {Session} from "meteor/session";
import {toggleFullscreen} from "../ui/card/card";
class MarkdeepEditor {
help () {
window.open("https://casual-effects.com/markdeep/features.md.html", "_blank");
}
center () {
let centerTextElement = Session.get('centerTextElement');
let editMode = Session.get('activeEditMode');
if (centerTextElement[editMode]) {
centerTextElement[editMode] = false;
Session.set('centerTextElement', centerTextElement);
} else {
centerTextElement[editMode] = true;
Session.set('centerTextElement', centerTextElement);
}
}
orderCards () {
$("#underDevelopmentModal").modal("show");
}
lockCardSide () {
$("#underDevelopmentModal").modal("show");
}
changeBackgroundStyle () {
if (Session.get('backgroundStyle') === 1) {
Session.set('backgroundStyle', 0);
} else {
Session.set('backgroundStyle', 1);
}
}
toggleFullscreen () {
toggleFullscreen(false, true);
}
}
module.exports = MarkdeepEditor;
import {check} from "meteor/check";
Meteor.methods({
convertMarkdown: function (markdown) {
check(markdown, String);
kramed.setOptions({
gfm: true,
tables: true,
breaks: true,
katex: true,
highlight: function (code) {
return hljs.highlightAuto(code).value;
}
});
return kramed(markdown);
}
});
......@@ -51,9 +51,8 @@
<div class="col-xs-12 {{#unless fullscreenActive}}col-lg-6{{/unless}}">
<h5 class="editorElement editorHeader">{{_ "content"}}</h5>
{{> contentNavigation}}
<div id="editor" class="cardtext editorToolbar" data-content="{{front}}">
{{> contentEditor}}
</div>
{{>markdeepNavigation}}
{{> markdeepContent}}
</div>
{{isTextCentered}}
<div id="preview" class="col-xs-12 {{#unless fullscreenActive}}col-lg-6{{/unless}} cardtext">
......@@ -189,12 +188,6 @@
</div>
</template>
<template name="contentEditor">
<form>
<textarea id="contentEditor" name="content" placeholder="{{getPlaceholder}}" data-provide="markdown" rows="10"
tabindex="5">{{#unless gotSidesSwapped}}{{front}}{{else}}{{back}}{{/unless}}</textarea>
</form>
</template>
<template name="subjectEditor">
{{#if gotLearningUnit}}
......
......@@ -19,6 +19,7 @@ import {
displaysLearningGoalInformation, gotSidesSwapped, gotAlternativeHintStyle
} from "../../api/cardTypes";
import {backMaxLength, frontMaxLength, hintMaxLength, lectureMaxLength, subjectMaxLength} from "../../api/cards";
import {isTextCentered} from "../markdeepEditor/navigation";
/*
* ############################################################################
......@@ -41,41 +42,6 @@ function checkBackgroundStyle() {
}
}
export function adjustMarkdownToolbar() {
//btn-group 1
let btnGroup = $(".btn-toolbar .btn-group:nth-child(1)");
btnGroup.append($(".btn-toolbar .fa-bold").parent());
btnGroup.append($(".btn-toolbar .fa-header").parent());
btnGroup.append($(".btn-toolbar .fa-code").parent());
btnGroup.append($(".btn-toolbar .fa-link").parent());
btnGroup.append($(".btn-toolbar .fa-superscript").parent());
btnGroup.append($(".btn-toolbar .fa-quote-left").parent());
$('.btn-toolbar .fa-quote-left').addClass('fa-quote-right').removeClass('fa-quote-left');
//btn-group 2
btnGroup = $(".btn-toolbar .btn-group:nth-child(2)");
btnGroup.append($(".btn-toolbar .fa-list").parent());
btnGroup.append($(".btn-toolbar .fa-list-ol").parent());
btnGroup.append($(".btn-toolbar .fa-check-square").parent());
$(".center-button").text('vertical_align_center');
btnGroup.append($(".center-button").parent());
//btn-group 3
btnGroup = $(".btn-toolbar .btn-group:nth-child(3)");
btnGroup.append($(".btn-toolbar .fa-file-image-o").parent());
btnGroup.append($(".btn-toolbar .fa-youtube").parent());
btnGroup.append($(".btn-toolbar .fa-vimeo").parent());
//btn-group 4
btnGroup = $(".btn-toolbar .btn-group:nth-child(4)");
btnGroup.append($(".btn-toolbar .fa-sort-numeric-asc").parent());
btnGroup.append($(".btn-toolbar .fa-lock").parent());
btnGroup.append($(".btn-toolbar .editorBrush").parent());
checkBackgroundStyle();
$(".btn-toolbar .fullscreen-button").addClass('glyphicon-fullscreen');
btnGroup.append($(".btn-toolbar .fullscreen-button").parent());
Session.get('activeLanguage');
$('.markdeep-help').html('<span class="markdeep-help-text"></span>');
$('.markdeep-help-text').text(" " + TAPi18n.__('markdeep.editor.help','',Session.get('activeLanguage')));
}
function resetSessionData(resetSubject = false) {
defaultCenteredText(Session.get('cardType'));
if (resetSubject && Session.get('cameFromEditMode') === false) {
......@@ -92,16 +58,6 @@ function resetSessionData(resetSubject = false) {
Session.set('cameFromEditMode');
}
function isTextCentered() {
let centerTextElement = Session.get('centerTextElement');
let editMode = Session.get('activeEditMode');
if (centerTextElement !== undefined && centerTextElement[editMode]) {
$(".center-button").addClass('pressed');
} else {
$(".center-button").removeClass('pressed');
}
}
/**
* Function checks if route is a card edit Mode
* @return {Boolean} Return true, when route is new Card or edit Card.
......@@ -361,11 +317,12 @@ function resizeFlashcards() {
$('#contentEditor').css('height', newFlashcardBodyHeight);
} else {
newFlashcardHeader = $('.active .cardHeader').outerHeight();
let editorHeader = $('.btn-toolbar').outerHeight();
let editorHeader = $('#markdeepNavigation').outerHeight();
if (Session.get('activeEditMode') >= 2) {
newFlashcardHeader = 0;
}
newFlashcardBodyHeight = ($('#cardCarousel').width() / Math.sqrt(2));
let newFlashcardWidth = $('#cardCarousel').width();
newFlashcardBodyHeight = (newFlashcardWidth / Math.sqrt(2));
$('.cardContent').css('height', newFlashcardBodyHeight - newFlashcardHeader);
if ($(window).width() >= 1200) {
$('#contentEditor').css('height', (newFlashcardBodyHeight - editorHeader));
......@@ -479,136 +436,6 @@ export function turnCard(adjustEditWindow = false) {
}
}
let additionalButtons = [
[{
name: "groupCustom",
data: [{
name: 'cmdPics',
title: 'Image',
icon: 'fa fa-file-image-o',
callback: image
}, {
name: "cmdTex",
title: "Tex",
icon: "fa fa-superscript",
callback: tex
}, {
name: 'cmdCenter',
title: 'Center',
icon: 'material-icons center-button',
callback: function () {
let centerTextElement = Session.get('centerTextElement');
let editMode = Session.get('activeEditMode');
if (centerTextElement[editMode]) {
centerTextElement[editMode] = false;
Session.set('centerTextElement', centerTextElement);
} else {
centerTextElement[editMode] = true;
Session.set('centerTextElement', centerTextElement);
}
}
}, {
name: 'cmdBackgroundStyle',
title: 'Background Style',
icon: 'fa fa-paint-brush editorBrush',
callback: function () {
if (Session.get('backgroundStyle') === 1) {
Session.set('backgroundStyle', 0);
} else {
Session.set('backgroundStyle', 1);
}
}
}, {
name: 'cmdFullscreen',
title: 'Fullscreen',
icon: 'glyphicon fullscreen-button',
callback: function () {
toggleFullscreen(false, true);
}
}, {
name: 'cmdYouTube',
title: 'YouTube',
icon: 'fa fa-youtube',
callback: function () {
$("#underDevelopmentModal").modal("show");
}
}, {
name: 'cmdVimeo',
title: 'Vimeo',
icon: 'fa fa-vimeo',
callback: function () {
$("#underDevelopmentModal").modal("show");
}
}, {
name: 'cmdSetCardnumber',
title: 'Set the Card Number',
icon: 'fa fa-sort-numeric-asc',
callback: function () {
$("#underDevelopmentModal").modal("show");
}
}, {
name: 'cmdLock',
title: 'Lock',
icon: 'fa fa-lock',
callback: function () {
$("#underDevelopmentModal").modal("show");
}
}, {
name: 'cmdTask',
title: 'Task',
icon: 'fa fa-check-square',
callback: function (e) {
// Prepend/Give - surround the selection
let chunk, cursor, selected = e.getSelection();
// transform selection and set the cursor into chunked text
if (selected.length === 0) {
// Give extra word
chunk = e.__localize('list task here');
e.replaceSelection('* [ ] ' + chunk);
// Set the cursor
cursor = selected.start + 7;
} else {
if (selected.text.indexOf('\n') < 0) {
chunk = selected.text;
e.replaceSelection('* [ ] ' + chunk);
// Set the cursor
cursor = selected.start + 7;
} else {
let list = [];
list = selected.text.split('\n');
chunk = list[0];
$.each(list, function (k, v) {
list[k] = '* [ ] ' + v;
});
e.replaceSelection('\n\n' + list.join('\n'));
// Set the cursor
cursor = selected.start + 4;
}
}
// Set the cursor
e.setSelection(cursor, cursor + chunk.length);
}
}, {
name: 'cmdMarkdeepHelp',
title: 'Markdeep Help',
icon: 'fa fa-lightbulb-o card-button markdeep-help',
callback: function () {
window.open("https://casual-effects.com/markdeep/features.md.html", "_blank");
}
}
]
}]
];
/**
* Function checks if route is a Cardset
* @return {Boolean} Return true, when route is a Cardset.
......@@ -1100,58 +927,6 @@ Template.contentNavigationHint.helpers({
}
});
/*
* ############################################################################
* contentEditor
* ############################################################################
*/
Template.contentEditor.rendered = function () {
$("#contentEditor").markdown({
autofocus: false,
hiddenButtons: ["cmdPreview", "cmdImage", "cmdItalic"],
fullscreen: false,
iconlibrary: "fa",
onChange: function (e) {
var content = e.getContent();
$('#editor').attr('data-content', content);
switch (Session.get('activeEditMode')) {
case 0:
Session.set('frontText', content);
break;
case 1:
Session.set('backText', content);
break;
case 2:
Session.set('hintText', content);
break;
case 3:
Session.set('lectureText', content);
break;
}
},
additionalButtons: additionalButtons
});
isTextCentered();
adjustMarkdownToolbar();
};
Template.contentEditor.events({
'keyup #contentEditor': function () {
$('#contentEditor .md-editor').css('border-color', '');
$('#helpNewContent').html('');
}
});
Template.contentEditor.helpers({
getPlaceholder: function () {
return getPlaceholderText(Session.get('activeEditMode'), Session.get('cardType'), Session.get('learningGoalLevel'));
},
gotSidesSwapped: function () {
return gotSidesSwapped(this.cardType);
}
});
/*
* ############################################################################
* SubjectEditor
......
......@@ -232,7 +232,7 @@ img.cardside {
text-decoration: none;
}
.cardContent, #contentEditor {
.cardContent {
padding: $padding_card_content_vertical $padding_card_content_horizontal !important;
line-height: 28px;
font-size: $font_size_card_content;
......
......@@ -143,14 +143,8 @@
{{/if}}
{{/if}}
<div class="form-group setdetails description module">
<textarea class="form-control" data-provide="markdown" rows="12"
placeholder="{{#if isCourseIteration}}{{_
"courseIteration.modal.placeholder.description"}}{{else}}{{_
"modal-dialog.descriptionplaceholder"}}{{/if}}"
id="setDescription"
value="{{#if
isNew}}{{getShuffleDescription}}{{else}}{{description}}{{/if}}"></textarea>
<span id="helpSetDescription" class="help-block description"></span>
{{> markdeepNavigation}}
{{> markdeepContent}}
</div>
{{#if isCourseIteration}}
{{#unless singleUniversity}}
......
......@@ -3,9 +3,7 @@ import {Template} from "meteor/templating";
import {Session} from "meteor/session";
import "./cardsetCourseIterationForm.html";
import {Cardsets} from "../../api/cardsets.js";
import {image, tex} from '/imports/ui/card/card.js';
import {getCardTypeName, gotDifficultyLevel, gotNotesForDifficultyLevel} from '../../api/cardTypes';
import {adjustMarkdownToolbar} from "../card/card";
import {getTargetAudienceName, gotAccessControl, gotSemester, targetAudienceOrder} from "../../api/targetAudience";
import {CourseIterations} from "../../api/courseIterations";
import {prepareQuery} from "../filter/filter";
......@@ -41,7 +39,7 @@ function adjustDifficultyColor() {
export function cleanModal() {
if (shuffleRoute()) {
$('#setName').val(Session.get("ShuffleTemplate").name);
} else if (courseIterationRoute()) {
} else if (newCardsetCourseIterationRoute()) {
$('#setName').val('');
} else {
$('#setName').val(Session.get('previousName'));
......@@ -75,16 +73,15 @@ export function cleanModal() {
$('#helpSetCardType').html('');
if (shuffleRoute()) {
$('#setDescription').val(Session.get("ShuffleTemplate").description);
} else if (courseIterationRoute()) {
$('#setDescription').val('');
$('#contentEditor').val(Session.get("ShuffleTemplate").description);
} else if (newCardsetCourseIterationRoute()) {
$('#contentEditor').val('');
} else {
$('#setDescription').val(Session.get('previousDescription'));
$('#contentEditor').val(Session.get('previousDescription'));
}
$('#setDescriptionLabel').css('color', '');
$('#setDescription').css('border-color', '');
$('#contentEditor').css('border-color', '');
$('#helpSetDescription').html('');
$('.md-footer').html(' ');
if (courseIterationRoute()) {
$('#setModule').val('');
......@@ -135,7 +132,7 @@ export function cleanModal() {
if (courseIterationRoute()) {
$('#setDescription').val('');
$('#contentEditor').val('');
}
if (newCardsetCourseIterationRoute()) {
......@@ -148,6 +145,7 @@ export function cleanModal() {
$('#kindoption0').addClass('active');
Session.set('kindWithPrice', undefined);
}
$('#contentEditor').css('height', 'unset');
}
export function saveCardset() {
......@@ -163,9 +161,9 @@ export function saveCardset() {
$('#helpSetCardType').html(TAPi18n.__('modal-dialog.name_required'));
$('#helpSetCardType').css('color', '#b94a48');
}
if ($('#setDescription').val() === "") {
if ($('#contentEditor').val() === "") {
$('#setDescriptionLabel').css('color', '#b94a48');
$('#setDescription').css('border-color', '#b94a48');
$('#contentEditor').css('border-color', '#b94a48');
$('#helpSetDescription').html(TAPi18n.__('modal-dialog.description_required'));
$('#helpSetDescription').css('color', '#b94a48');
}
......@@ -202,7 +200,7 @@ export function saveCardset() {
$('#helpSetCourse').css('color', '#b94a48');
}
if ($('#setName').val() !== "" &&
($('#setDescription').val() !== "") &&
($('#contentEditor').val() !== "") &&
($('#setModule').val() !== "" || !courseIterationRoute()) &&
($('#setModuleShort').val() !== "" || !courseIterationRoute()) &&
($('#setModuleNum').val() !== "" || !courseIterationRoute()) &&
......@@ -212,7 +210,7 @@ export function saveCardset() {
cardGroups;
name = $('#setName').val();
cardType = $('#setCardType').val();
description = $('#setDescription').val();
description = $('#contentEditor').val();
module = $('#setModule').val();
moduleShort = $('#setModuleShort').val();
moduleNum = $('#setModuleNum').val();
......@@ -294,107 +292,7 @@ Template.cardsetCourseIterationForm.helpers({
* ############################################################################
*/
let additionalButtons = [
[{
name: "groupCustom",
data: [{
name: 'cmdPics',
title: 'Image',
icon: 'fa fa-file-image-o',
callback: image
}, {
name: "cmdTex",
title: "Tex",
icon: "fa fa-superscript",
callback: tex
}, {
name: 'cmdYouTube',
title: 'YouTube',
icon: 'fa fa-youtube',
callback: function () {
$("#underDevelopmentModal").modal("show");
}
}, {
name: 'cmdVimeo',
title: 'Vimeo',
icon: 'fa fa-vimeo',
callback: function () {
$("#underDevelopmentModal").modal("show");
}
}, {
name: 'cmdTask',
title: 'Task',
icon: 'fa fa-check-square',
callback: function (e) {
// Prepend/Give - surround the selection
let chunk, cursor, selected = e.getSelection();
// transform selection and set the cursor into chunked text
if (selected.length === 0) {
// Give extra word
chunk = e.__localize('list task here');
e.replaceSelection('* [ ] ' + chunk);
// Set the cursor
cursor = selected.start + 7;
} else {
if (selected.text.indexOf('\n') < 0) {
chunk = selected.text;
e.replaceSelection('* [ ] ' + chunk);
// Set the cursor
cursor = selected.start + 7;
} else {
let list = [];
list = selected.text.split('\n');
chunk = list[0];
$.each(list, function (k, v) {
list[k] = '* [ ] ' + v;
});
e.replaceSelection('\n\n' + list.join('\n'));
// Set the cursor
cursor = selected.start + 4;
}
}
// Set the cursor
e.setSelection(cursor, cursor + chunk.length);
}
}, {
name: 'cmdMarkdeepHelp',
title: 'Markdeep Help',
icon: 'fa fa-lightbulb-o card-button markdeep-help',
callback: function () {
window.open("https://casual-effects.com/markdeep/features.md.html", "_blank");
}
}
]
}]
];
Template.cardsetCourseIterationFormContent.onRendered(function () {
$("#setDescription").markdown({
autofocus: false,
hiddenButtons: ["cmdPreview", "cmdImage", "cmdItalic"],
fullscreen: false,
iconlibrary: "fa",
footer: "<p></p>",
onChange: function (e) {
var content = e.getContent();
if (content !== "") {
Meteor.promise("convertMarkdown", content)
.then(function (rendered) {
$(".md-footer").html(rendered);
});
}
},
additionalButtons: additionalButtons
});