Skip to content

GitLab

D
draftToCode
Source
Select Git revision
...
Target
Select Git revision
 
Commits (4)
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 884 additions and 490 deletions
.gitignore
View file @ d77cac05
node_modules
dist/main.js
dist/struktog.min.css
\ No newline at end of file
build
dist/index.html deleted 100644 → 0
View file @ d83b4b0e
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="struktog.min.css">
<script src="main.js"></script>
<title>Struktog.</title>
</head>
<body>
<!-- Header -->
<header class="container">
<section class="nav-col">
<div class="nav-logo-container">
<div class="logo-container logo"></div>
<a href="index.html">
<strong>Struktog.</strong>
</a>
</div>
</section>
<section class="nav-col">
<div id="optionButtons" class="options-container">
<div class="column container">
<button class="column" onclick="document.getElementById('IEModal').style.display = 'block';">
Import / Export
</button>
</div>
</div>
</section>
</header>
<main>
<div id="editorDisplay" class="container">
</div>
<!-- Popup modal for import and export -->
<div id="IEModal" class="modal">
<div class="modal-content">
<span class="close"
onclick="document.getElementById('IEModal').style.display = 'none';">
&times;
</span>
<p>
JSON-Import:
</p>
<input id="ImportForm" type="file" class="form-input" \>
<p>
Export:
</p>
<div id="Export" class="text-center pt-1"></div>
</div>
</div>
</main>
<footer class="container">
<div class="column">
<span>
&#169; 2019 Klaus Ramm
</span>
<span>
(
</span>
<a href="license.html">MIT License</a>
<span>
)
</span>
</div>
</footer>
</body>
</html>
dist/license.html deleted 100644 → 0
View file @ d83b4b0e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Licence Struktog.</title>
<style>
body {
width: 50%;
}
@media (max-width: 840px) {
body {width: 95%}
}
</style>
</head>
<body>
<p>The MIT License (MIT)</p>
<p>Copyright © 2019 Klaus Ramm</p>
<p>
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the “Software”), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
</p>
<p>
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
</p>
<p>
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
</p>
</body>
</html>
dist/struktogRAMM.min.css deleted 100644 → 0
View file @ d83b4b0e
This diff is collapsed.
src/assets/scss/_code.scss
View file @ d77cac05
$code-highlight: rgb(128,212,255);
.highlight {
background-color: rgba(145, 138, 229, 0.4);
}
.form-select {
outline: 0;
box-shadow: none;
background: white;
position: relative;
width: 90%;
overflow: hidden;
border-radius: .2em;
border: 0.1em solid rgb(38, 64, 64);
padding: 0 .5em;
color: rgb(38, 64, 64);
cursor: pointer;
option {
color: rgb(38, 64, 64);
cursor: pointer;
}
}
.text-code {
color: $code-highlight;
/* Remove IE arrow */
select::-ms-expand {
display: none;
}
.bg-primary {
background-color: $main-background-color;
.code {
color: rgb(38, 64, 64);
position: relative;
padding-left: 0.3em;
display: flex;
&::before {
color: rgb(38, 64, 64);
content: attr(data-lang);
font-size: 100%;
position: absolute;
right: 0.5em;
top: 0.5em;
}
code {
//background: rgb(238, 238, 238);
border-radius: 0.2em;
border: 0.1em solid rgb(38, 64, 64);
color: inherit;
line-height: 1.5;
overflow-x: auto;
flex: 1;
padding: 1rem;
.keyword {
color: rgb(127, 0, 85);
}
span {
font-weight: bold;
}
}
}
src/assets/scss/_importExport.scss
View file @ d77cac05
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 2; /* Sit on top */
align-items: center;
bottom: 0;
display: none;
justify-content: center;
left: 0;
opacity: 0;
overflow: hidden;
padding: 0.5em;
position: fixed;
right: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
&:target,
&.active {
display: flex;
opacity: 1;
z-index: 2;
.modal-overlay {
background: rgba(0,0,0,0.4);
bottom: 0;
cursor: default;
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
.modal-container {
animation: slide-down .2s ease 1;
z-index: 1;
}
}
&.modal-sm {
.modal-container {
max-width: 10em;
padding: 0 1em;
}
}
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
.modal-container {
background: rgb(250, 250, 250);
border-radius: 0.1em;
display: flex;
flex-direction: column;
max-height: 75vh;
max-width: 25em;
padding: 0 1em;
width: 100%;
&.modal-fullheight {
max-height: 100vh;
}
.modal-header {
padding: 0 1em;
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
}
.modal-body {
overflow-y: auto;
padding: 0 1em;
position: relative;
}
.modal-footer {
padding: 1em;
text-align: right;
.modal-buttons {
flex: auto;
min-height: 1.5em;
margin: 0 1em;
border: 0.15em solid rgb(38, 64, 64);
border-radius: 0.2em;
}
}
}
src/assets/scss/_structogram.scss
View file @ d77cac05
......@@ -12,7 +12,13 @@ $main-background-color: rgba(128,212,255, 0.5);
}
.fixedHalfHeight {
flex: 0 0 1em;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 0.7em;
transition: flex-basis 0.2s ease-in-out;
&:hover {
flex-basis: 1.3em;
}
}
.fixedHeight {
......@@ -41,38 +47,54 @@ $main-background-color: rgba(128,212,255, 0.5);
}
.symbol {
margin-top: 6.5px;
margin: 6.5px 0;
.input-group {
margin-top: -6px;
}
}
.margin-small {
margin-left: 0.2em;
}
.symbolHeight {
height: 1em;
flex: auto;
}
.justify-center {
justify-content: center;
}
.columnInput {
flex: 48%;
}
@media screen and (min-width: 486px) {
.columnInput {
flex-grow: 0;
flex-basis: 48%;
}
}
@media screen and (min-width: 800px) {
.columnInput {
flex: 32%;
flex-grow: 0;
flex-basis: 32%;
}
}
.insertButton {
border: 0.15em solid black;
border: 0.15em solid rgb(38, 64, 64);
text-align: center;
margin: 0.2em;
border-radius: 0.2em;
display: flex;
justify-content: center;
.buttonLogo {
float: left;
height: 1em;
height: 1.3em;
min-width: 2em;
margin: auto;
flex: 1;
......@@ -105,14 +127,12 @@ $main-background-color: rgba(128,212,255, 0.5);
}
}
.columnText {
flex: auto;
}
.optionContainer {
position: absolute;
z-index: 1;
top: 0;
right: 1em;
height: 100%;
......@@ -136,55 +156,6 @@ $main-background-color: rgba(128,212,255, 0.5);
}
}
.tooltip {
position: relative;
&:after {
background: rgba(50, 50, 50, 0.95);
border-radius: 0;
bottom: 100%;
color: white;
content: attr(data-tooltip);
display: block;
left: -100%;
max-width: 15em;
opacity: 0;
overflow: hidden;
padding: 0.3em;
pointer-events: none;
position: absolute;
text-overflow: ellipsis;
transform: translate(-50%, 0.3em);
transition: opacity .2s, transform .2s;
white-space: pre;
z-index: 2;
}
&:focus,
&:hover {
&::after {
opacity: 1;
transform: translate(-50%, -0.3em);
}
}
&[disabled],
&.disabled {
pointer-events: auto;
}
&.tooltip-bottom {
&::after {
bottom: auto;
top: 75%;
transform: translate(-50%, -0.3em);
}
&:focus,
&:hover {
&::after {
transform: translate(-50%, 0.3em);
}
}
}
}
.columnFull {
flex-basis: 100%;
......@@ -194,14 +165,18 @@ $main-background-color: rgba(128,212,255, 0.5);
flex: 1;
}
.bottomHeader {
align-self: flex-end;
.columnAuto-2 {
flex: 2;
}
.moveText {
flex: auto;
margin: auto;
padding-bottom: 0.15em;
}
// display borders around elements
.simpleBorder {
margin: 0 1px;
background-color: $main-background-color;
.bottomHeader {
align-self: flex-end;
}
.loopShift {
......
src/assets/scss/structog.scss
View file @ d77cac05
......@@ -6,6 +6,10 @@
$font-stack: "Verdana", Geneva, sans-serif;
header {
margin-top: 0.5em;
}
body {
font: 100% $font-stack;
max-width: 1500px;
......@@ -14,12 +18,17 @@ body {
display: flex;
flex-direction: column;
justify-content: center;
background-color: rgb(250, 250, 250);
main {
flex: 1;
}
}
strong {
color: rgb(38, 64, 64);
}
.container {
display: flex;
flex-direction: row;
......@@ -59,6 +68,17 @@ body {
flex-wrap: wrap;
align-items: center;
justify-content: center;
a {
text-decoration: none;
margin-left: calc(0.5em + 2px);
}
strong {
padding-left: 1em;
color: rgb(38, 64, 64);
font-size: 1.5em;
}
}
.nav-col {
......@@ -66,19 +86,42 @@ body {
margin: auto;
}
.nav-col-opt {
flex-basis: 100%;
margin-top: 0.5em;
}
@media screen and (min-width: 731px) {
.nav-col-opt {
flex: auto;
margin: auto;
}
}
.options-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-end;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.options-element {
height: 3em;
flex-basis: 5em;
}
.hand {
cursor: pointer;
}
.center {
flex: auto;
margin: auto;
}
.columnEditorFull {
margin-top: 0.5em;
flex-basis: 100%;
}
......@@ -88,7 +131,16 @@ body {
}
.columnEditorCode {
flex-basis: 50%;
margin: 0.2em;
padding-top: 1em;
flex-grow: 0;
width: 100%;
}
@media screen and (min-width: 480px) {
.columnEditorCode {
width: 50%;
}
}
@media screen and (min-width: 1200px) {
......@@ -97,7 +149,9 @@ body {
}
.columnEditorCode {
flex-basis: 24%;
padding-top: 0;
margin: 0 1em;
width: calc(25% - 4.5em);
}
}
......@@ -120,3 +174,88 @@ body {
.ov-hidden {
overflow: hidden;
}
.fixFullWidth {
flex-basis: 100%;
flex-grow: 0;
flex-shrink: 0;
}
.tooltip {
position: relative;
&:after {
background: rgba(50, 50, 50, 0.95);
border-radius: 0;
bottom: 100%;
color: white;
content: attr(data-tooltip);
display: block;
left: 50%;
max-width: 15em;
opacity: 0;
overflow: hidden;
padding: 0.3em;
pointer-events: none;
position: absolute;
text-overflow: ellipsis;
transform: translate(-50%, 0.3em);
transition: opacity .2s, transform .2s;
white-space: pre;
z-index: 1;
}
&:focus,
&:hover {
&::after {
opacity: 1;
transform: translate(-50%, -0.3em);
}
}
&[disabled],
&.disabled {
pointer-events: auto;
}
&.tooltip-bottom {
&::after {
bottom: auto;
top: 100%;
transform: translate(-50%, -0.3em);
}
&:focus,
&:hover {
&::after {
transform: translate(-50%, 0.3em);
}
}
}
&.tooltip-bottoml {
&::after {
bottom: auto;
top: 75%;
left: -100%;
transform: translate(-50%, -0.3em);
}
&:focus,
&:hover {
&::after {
transform: translate(-50%, 0.3em);
}
}
}
}
.divider {
display: block;
position: relative;
border-top: 0.1em solid rgb(38, 64, 64);
height: 0.1em;
margin: 0.2em 0;
}
.borderWidth {
flex: 0 0 3px;
}
.borderHeight {
height: 2px;
}
src/assets/svg/branchIcon.svg
View file @ d77cac05
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 128 64">
<rect x="10" y="10" width="108" height="44" stroke="black" stroke-width="4" fill-opacity="0" />
<rect x="10" y="40" width="108" height="14" stroke="black" stroke-width="4" fill-opacity="0" />
<line x1="10" y1="10" x2="64" y2="40" stroke="black" stroke-width="4" />
<line x1="118" y1="10" x2="64" y2="40" stroke="black" stroke-width="4" />
<line x1="64" y1="40" x2="64" y2="54" stroke="black" stroke-width="4" />
<rect x="10" y="10" width="108" height="44" stroke="rgb(38, 64, 64)" stroke-width="4" fill-opacity="0" />
<rect x="10" y="40" width="108" height="14" stroke="rgb(38, 64, 64)" stroke-width="4" fill-opacity="0" />
<line x1="10" y1="10" x2="64" y2="40" stroke="rgb(38, 64, 64)" stroke-width="4" />
<line x1="118" y1="10" x2="64" y2="40" stroke="rgb(38, 64, 64)" stroke-width="4" />
<line x1="64" y1="40" x2="64" y2="54" stroke="rgb(38, 64, 64)" stroke-width="4" />
</svg>
src/assets/svg/caseIcon.svg
View file @ d77cac05
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 128 64">
<rect x="10" y="10" width="108" height="44" stroke="black" stroke-width="4" fill-opacity="0" />
<line x1="10" y1="10" x2="91" y2="40" stroke="black" stroke-width="4" />
<line x1="118" y1="10" x2="91" y2="40" stroke="black" stroke-width="4" />
<line x1="37" y1="54" x2="37" y2="20" stroke="black" stroke-width="4" />
<line x1="64" y1="54" x2="64" y2="30" stroke="black" stroke-width="4" />
<line x1="91" y1="54" x2="91" y2="40" stroke="black" stroke-width="4" />
<rect x="10" y="10" width="108" height="44" stroke="rgb(38, 64, 64)" stroke-width="4" fill-opacity="0" />
<line x1="10" y1="10" x2="91" y2="40" stroke="rgb(38, 64, 64)" stroke-width="4" />
<line x1="118" y1="10" x2="91" y2="40" stroke="rgb(38, 64, 64)" stroke-width="4" />
<line x1="37" y1="54" x2="37" y2="20" stroke="rgb(38, 64, 64)" stroke-width="4" />
<line x1="64" y1="54" x2="64" y2="30" stroke="rgb(38, 64, 64)" stroke-width="4" />
<line x1="91" y1="54" x2="91" y2="40" stroke="rgb(38, 64, 64)" stroke-width="4" />
</svg>
src/assets/svg/countLoopIcon.svg
View file @ d77cac05
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 128 64">
<rect x="10" y="10" width="108" height="44" stroke="black" stroke-width="4" fill-opacity="0" />
<rect x="30" y="30" width="88" height="24" stroke="black" stroke-width="4" fill-opacity="0" />
<rect x="10" y="10" width="108" height="44" stroke="rgb(38, 64, 64)" stroke-width="4" fill-opacity="0" />
<rect x="30" y="30" width="88" height="24" stroke="rgb(38, 64, 64)" stroke-width="4" fill-opacity="0" />
</svg>
src/assets/svg/deleteIcon.svg
View file @ d77cac05
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 100 100">
<rect x="0%" y="0%" width="100%" height="100%" fill="rgba(255, 255, 255, 0.7)" />
<line x1="5%" y1="5%" x2="95%" y2="95%" stroke="black" stroke-linecap="round" stroke-width="10%" />
<line x1="5%" y1="95%" x2="95%" y2="5%" stroke="black" stroke-linecap="round" stroke-width="10%" />
</svg>
src/assets/svg/footLoopIcon.svg
View file @ d77cac05
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 128 64">
<rect x="10" y="10" width="108" height="44" stroke="black" stroke-width="4" fill-opacity="0" />
<rect x="30" y="10" width="88" height="24" stroke="black" stroke-width="4" fill-opacity="0" />
<rect x="10" y="10" width="108" height="44" stroke="rgb(38, 64, 64)" stroke-width="4" fill-opacity="0" />
<rect x="30" y="10" width="88" height="24" stroke="rgb(38, 64, 64)" stroke-width="4" fill-opacity="0" />
</svg>
src/assets/svg/insertIcon.svg
View file @ d77cac05
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 100 100">
viewBox="0 0 130 100">
<line x1="25%" y1="40%" x2="5%" y2="40%" stroke="black" stroke-linecap="round" stroke-width="7" />
<line x1="5%" y1="40%" x2="5%" y2="95%" stroke="black" stroke-linecap="round" stroke-width="7" />
<line x1="5%" y1="95%" x2="95%" y2="95%" stroke="black" stroke-linecap="round" stroke-width="7" />
<line x1="95%" y1="95%" x2="95%" y2="40%" stroke="black" stroke-linecap="round" stroke-width="7" />
<line x1="95%" y1="40%" x2="75%" y2="40%" stroke="black" stroke-linecap="round" stroke-width="7" />
<line x1="50%" y1="5%" x2="50%" y2="80%" stroke="black" stroke-linecap="round" stroke-width="7" />
<line x1="50%" y1="80%" x2="30%" y2="60%" stroke="black" stroke-linecap="round" stroke-width="7" />
<line x1="50%" y1="80%" x2="70%" y2="60%" stroke="black" stroke-linecap="round" stroke-width="7" />
<line x1="50%" y1="5%" x2="50%" y2="70%" stroke="black" stroke-linecap="round" stroke-width="7" />
<line x1="50%" y1="70%" x2="30%" y2="55%" stroke="black" stroke-linecap="round" stroke-width="7" />
<line x1="50%" y1="70%" x2="70%" y2="55%" stroke="black" stroke-linecap="round" stroke-width="7" />
</svg>
src/assets/svg/moveIcon.svg
View file @ d77cac05
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 100 100">
<rect x="0%" y="0%" width="100%" height="100%" fill="rgba(255, 255, 255, 0.7)" />
<circle cx="50%" cy="50%" r="50%" fill="rgba(250, 250, 250, 0.9)" />
<line x1="5%" y1="50%" x2="95%" y2="50%" stroke="black" stroke-linecap="round" stroke-width="10%" />
<line x1="50%" y1="5%" x2="50%" y2="95%" stroke="black" stroke-linecap="round" stroke-width="10%" />
<line x1="14%" y1="50%" x2="86%" y2="50%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
<line x1="50%" y1="14%" x2="50%" y2="86%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
<line x1="50%" y1="5%" x2="65%" y2="20%" stroke="black" stroke-linecap="round" stroke-width="10%" />
<line x1="50%" y1="5%" x2="35%" y2="20%" stroke="black" stroke-linecap="round" stroke-width="10%" />
<line x1="50%" y1="14%" x2="60%" y2="24%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
<line x1="50%" y1="14%" x2="40%" y2="24%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
<line x1="95%" y1="50%" x2="80%" y2="35%" stroke="black" stroke-linecap="round" stroke-width="10%" />
<line x1="95%" y1="50%" x2="80%" y2="65%" stroke="black" stroke-linecap="round" stroke-width="10%" />
<line x1="86%" y1="50%" x2="76%" y2="40%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
<line x1="86%" y1="50%" x2="76%" y2="60%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
<line x1="5%" y1="50%" x2="20%" y2="35%" stroke="black" stroke-linecap="round" stroke-width="10%" />
<line x1="5%" y1="50%" x2="20%" y2="65%" stroke="black" stroke-linecap="round" stroke-width="10%" />
<line x1="14%" y1="50%" x2="24%" y2="40%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
<line x1="14%" y1="50%" x2="24%" y2="60%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
<line x1="50%" y1="95%" x2="35%" y2="80%" stroke="black" stroke-linecap="round" stroke-width="10%" />
<line x1="50%" y1="95%" x2="65%" y2="80%" stroke="black" stroke-linecap="round" stroke-width="10%" />
<line x1="50%" y1="86%" x2="40%" y2="76%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
<line x1="50%" y1="86%" x2="60%" y2="76%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
</svg>
src/assets/svg/taskIcon.svg
View file @ d77cac05
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 128 64">
<rect x="10" y="10" width="108" height="44" stroke="black" stroke-width="4" fill-opacity="0" />
<rect x="10" y="10" width="108" height="44" stroke="rgb(38, 64, 64)" stroke-width="4" fill-opacity="0" />
</svg>
src/config.js 0 → 100644
View file @ d77cac05
export const config = {
InsertNode: {
color: 'rgb(255,255,243)'
},
Placeholder: {
color: 'rgb(255,255,243)'
},
InsertCase: {
color: 'rgb(250, 218, 209)'
},
InputNode: {
use: true,
id: 'InputButton',
text: 'Eingabe-Feld',
icon: 'taskIcon',
color: 'rgb(253, 237, 206)'
},
OutputNode: {
use: true,
id: 'OutputButton',
text: 'Ausgabe-Feld',
icon: 'taskIcon',
color: 'rgb(253, 237, 206)'
},
TaskNode: {
use: true,
id: 'TaskButton',
text: 'Anweisung',
icon: 'taskIcon',
color: 'rgb(253, 237, 206)'
},
CountLoopNode: {
use: true,
id: 'CountLoopButton',
text: 'Zählergesteuerte Schleife',
icon: 'countLoopIcon',
color: 'rgb(220, 239, 231)'
},
HeadLoopNode: {
use: true,
id: 'HeadLoopButton',
text: 'Kopfgesteuerte Schleife',
icon: 'countLoopIcon',
color: 'rgb(220, 239, 231)'
},
FootLoopNode: {
use: true,
id: 'FootLoopButton',
text: 'Fußgesteuerte Schleife',
icon: 'footLoopIcon',
color: 'rgb(220, 239, 231)'
},
BranchNode: {
use: true,
id: 'BranchButton',
text: 'Verzweigung',
icon: 'branchIcon',
color: 'rgb(250, 218, 209)'
},
CaseNode: {
use: true,
id: 'CaseButton',
text: 'Fallunterscheidung',
icon: 'caseIcon',
color: 'rgb(250, 218, 209)'
}
}
src/helpers/generator.js
View file @ d77cac05
......@@ -60,38 +60,46 @@ export function generateHtmltree () {
header.appendChild(section2)
// main
let mdiv1 = document.createElement('div')
mdiv1.setAttribute('class', 'container')
mdiv1.setAttribute('id', 'editorDisplay')
let mdiv20 = document.createElement('div')
mdiv20.setAttribute('class', 'modal.overlay')
mdiv20.setAttribute('aria-label', 'Close')
mdiv20.setAttribute('onclick', "document.getElementById('IEModal').classList.remove('active');")
let span = document.createElement('span')
span.setAttribute('class', 'close')
span.setAttribute('onclick', "document.getElementById('IEModal').style.display = 'none';")
span.setAttribute('class', 'close hand')
span.setAttribute('onclick', "document.getElementById('IEModal').classList.remove('active');")
span.innerHTML = '&times;'
let p = document.createElement('p')
p.innerHTML = 'JSON-Import:'
let input = document.createElement('input')
input.setAttribute('id', 'ImportForm')
input.setAttribute('type', 'file')
input.setAttribute('class', 'form-input')
let p2 = document.createElement('p')
p2.innerHTML = 'Export:'
let mdiv210 = document.createElement('div')
mdiv210.setAttribute('class', 'modal-header')
mdiv210.appendChild(span)
let mdiv2110 = document.createElement('div')
mdiv2110.setAttribute('id', 'modal-content')
mdiv2110.setAttribute('class', 'content')
mdiv2110.innerHTML = 'Content'
let mdiv211 = document.createElement('div')
mdiv211.setAttribute('id', 'Export')
mdiv211.setAttribute('class', 'text-center pt-1')
mdiv211.setAttribute('class', 'modal-body')
mdiv211.appendChild(mdiv2110)
let mdiv212 = document.createElement('div')
mdiv212.setAttribute('class', 'modal-footer container')
mdiv212.setAttribute('id', 'modal-footer')
mdiv212.innerHTML = 'Footer'
let mdiv21 = document.createElement('div')
mdiv21.setAttribute('class', 'modal-content')
mdiv21.appendChild(span)
mdiv21.appendChild(p)
mdiv21.appendChild(input)
mdiv21.appendChild(p2)
mdiv21.setAttribute('class', 'modal-container')
mdiv21.appendChild(mdiv210)
mdiv21.appendChild(mdiv211)
mdiv21.appendChild(mdiv212)
let mdiv2 = document.createElement('div')
mdiv2.setAttribute('class', 'modal')
mdiv2.setAttribute('id', 'IEModal')
mdiv2.appendChild(mdiv20)
mdiv2.appendChild(mdiv21)
let main = document.createElement('main')
......@@ -126,6 +134,7 @@ export function generateHtmltree () {
footer.appendChild(fdiv)
document.body.appendChild(header)
// append <div class="divider"></div>
document.body.appendChild(main)
document.body.appendChild(footer)
}
src/index.js
View file @ d77cac05
......@@ -24,13 +24,29 @@ window.onload = function () {
// reset button must be last defined
let resetButtonDiv = document.createElement('div')
resetButtonDiv.classList.add('column', 'container')
let resetButton = document.createElement('button')
resetButton.classList.add('column')
resetButton.addEventListener('click', () => presenter.resetModel())
resetButton.appendChild(document.createTextNode('Reset'))
resetButtonDiv.classList.add('options-element', 'resetIcon', 'tooltip', 'tooltip-bottom', 'hand')
resetButtonDiv.setAttribute('data-tooltip', 'Reset')
resetButtonDiv.addEventListener('click', () => {
const content = document.getElementById('modal-content')
const footer = document.getElementById('modal-footer')
while (content.hasChildNodes()) {
content.removeChild(content.lastChild)
}
while (footer.hasChildNodes()) {
footer.removeChild(footer.lastChild)
}
content.appendChild(document.createTextNode('Alles löschen?'))
const doButton = document.createElement('div')
doButton.classList.add('modal-buttons', 'acceptIcon', 'hand')
doButton.addEventListener('click', () => presenter.resetModel())
footer.appendChild(doButton)
const cancelButton = document.createElement('div')
cancelButton.classList.add('modal-buttons', 'deleteIcon', 'hand')
cancelButton.addEventListener('click', () => document.getElementById('IEModal').classList.remove('active'))
footer.appendChild(cancelButton)
resetButtonDiv.appendChild(resetButton)
document.getElementById('IEModal').classList.add('active')
})
document.getElementById('optionButtons').appendChild(resetButtonDiv)
presenter.init()
......
src/presenter/main.js
View file @ d77cac05
......@@ -21,6 +21,11 @@ export class Presenter {
}
getModelTree() {
return this.model.getTree();
}
resetButtons() {
for (const view of this.views) {
view.resetButtons();
......@@ -284,6 +289,7 @@ export class Presenter {
this.model.reset();
this.updateBrowserStore();
this.renderAllViews();
document.getElementById('IEModal').classList.remove('active');
}
/**
......@@ -395,6 +401,24 @@ export class Presenter {
}
getStringifiedTree() {
return JSON.stringify(this.model.getTree());
}
saveDialog() {
// define the data url to start a download on click
const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(this.getStringifiedTree());
// create filename with current date in the name
const exportFileDefaultName = 'struktog_' + (new Date(Date.now()).toJSON()).substring(0, 10) + '.json';
// generate the download button element and append it to the node
let linkElement = document.createElement('a');
linkElement.setAttribute('href', dataUri);
linkElement.setAttribute('download', exportFileDefaultName);
linkElement.click();
}
/**
* Read input from a JSON file and replace the current model
*/
......
src/views/code.js
View file @ d77cac05
......@@ -51,7 +51,7 @@ export class CodeView {
'pre': "while (",
'post': ");\n"
},
'CaseNode': {'pre': "switch(",
'CaseNode': {'pre': "switch (",
'post': ")\n",
},
'InsertCase': {'preNormal': "case ",
......@@ -86,7 +86,7 @@ export class CodeView {
'pre': "while (",
'post': ");\n"
},
'CaseNode': {'pre': "switch(",
'CaseNode': {'pre': "switch (",
'post': ")\n",
},
'InsertCase': {'preNormal': "case ",
......@@ -105,20 +105,20 @@ export class CodeView {
preRender() {
let sourcecode = document.createElement('div');
//sourcecode.style.float = 'right';
sourcecode.id = 'SourcecodeDisplay';
sourcecode.classList.add('columnEditorCode');
sourcecode.classList.add('columnEditorCode', 'vcontainer');
sourcecode.style.display = 'none';
let sourcecodeDisplay = document.createElement('div');
//sourcecodeDisplay.classList.add('columns', 'd-hide');
sourcecodeDisplay.classList.add('fixFullWidth');
let sourcecodeHeader = document.createElement('div');
//sourcecodeHeader.classList.add('column', 'col-10', 'col-mx-auto');
let sourcecodeTitle = document.createElement('span');
sourcecodeHeader.classList.add('columnAuto', 'container');
let sourcecodeTitle = document.createElement('strong');
sourcecodeTitle.classList.add('center');
sourcecodeTitle.appendChild(document.createTextNode('Übersetzen in:'));
let sourcecodeForm = document.createElement('div');
//sourcecodeForm.classList.add('form-group');
sourcecodeForm.classList.add('center');
let sourcecodeSelect = document.createElement('select');
//sourcecodeSelect.classList.add('form-select');
sourcecodeSelect.classList.add('form-select');
sourcecodeSelect.id = 'SourcecodeSelect';
sourcecodeSelect.addEventListener('change', (event) => this.presenter.startTransforming(event));
let sourcecodeOption = document.createElement('option');
......@@ -137,7 +137,7 @@ export class CodeView {
sourcecodeHeader.appendChild(sourcecodeForm);
let sourcecodeWorkingArea = document.createElement('div');
//sourcecodeWorkingArea.classList.add('column', 'col-12', 'lowerPadding');
sourcecodeWorkingArea.classList.add('columnAuto');
sourcecodeWorkingArea.id = 'Sourcecode';
sourcecodeDisplay.appendChild(sourcecodeHeader);
......@@ -148,14 +148,10 @@ export class CodeView {
this.domRoot = document.getElementById('Sourcecode');
let options = document.createElement('div');
options.classList.add('column', 'container');
let optionButton = document.createElement('button');
optionButton.classList.add('column');
optionButton.id = 'ToggleSourcecode';
optionButton.addEventListener('click', (event) => this.presenter.alterSourcecodeDisplay(event));
optionButton.appendChild(document.createTextNode('Quellcode einblenden'));
options.appendChild(optionButton);
options.classList.add('options-element', 'codeIcon', 'tooltip', 'tooltip-bottom', 'hand');
options.setAttribute('data-tooltip', 'Quellcode einblenden');
options.id = 'ToggleSourcecode';
options.addEventListener('click', (event) => this.presenter.alterSourcecodeDisplay(event));
document.getElementById('optionButtons').appendChild(options);
if (typeof(Storage) !== "undefined") {
......@@ -188,7 +184,7 @@ export class CodeView {
// create container for the spans
let preBlock = document.createElement('pre');
//preBlock.classList.add('code');
preBlock.classList.add('code');
// set the language attribute
preBlock.setAttribute('data-lang', this.lang);
......@@ -201,7 +197,7 @@ export class CodeView {
codeBlock.appendChild(i);
});
} else {
codeBlock.appendChild(document.createTextNode("Das Struktogramm enthält Elemente, \nwelche in der Programmiersprache nicht \nzur Verfügung stehen."));
codeBlock.appendChild(document.createTextNode("Das Struktogramm enthält Elemente, \nwelche in der Programmiersprache \nnicht zur Verfügung stehen."));
}
preBlock.appendChild(codeBlock);
......@@ -302,15 +298,16 @@ export class CodeView {
} else {
// create the span
let elemSpan = document.createElement('span');
elemSpan.id = subTree.id + '-codeLine';
// add eventlisteners for mouseover and click events
// highlight equivalent element in struktogramm on mouseover
elemSpan.addEventListener('mouseover', function() {
let node = document.getElementById(subTree.id);
node.firstChild.classList.add('bg-primary');
const node = document.getElementById(subTree.id);
node.firstChild.classList.add('highlight');
});
elemSpan.addEventListener('mouseout', function() {
let node = document.getElementById(subTree.id);
node.firstChild.classList.remove('bg-primary');
const node = document.getElementById(subTree.id);
node.firstChild.classList.remove('highlight');
});
// switch to edit mode of equivalent element in the struktogramm
let text = this.createHighlightedSpan(subTree.text);
......@@ -322,29 +319,52 @@ export class CodeView {
return this.transformToCode(subTree.followElement, indentLevel, lang)
break;
case 'InputNode':
elemSpan.appendChild(document.createTextNode(this.addIndentations(indentLevel) + this.translationMap[lang].InputNode.pre));
const inputPre = document.createElement('span');
inputPre.classList.add('keyword');
inputPre.appendChild(document.createTextNode(this.addIndentations(indentLevel) + this.translationMap[lang].InputNode.pre));
elemSpan.appendChild(inputPre);
elemSpan.appendChild(text);
elemSpan.appendChild(document.createTextNode(this.translationMap[lang].InputNode.post));
const inputPost = document.createElement('span');
inputPost.classList.add('keyword');
inputPost.appendChild(document.createTextNode(this.translationMap[lang].InputNode.post));
elemSpan.appendChild(inputPost);
return [elemSpan].concat(this.transformToCode(subTree.followElement, indentLevel, lang));
break;
case 'OutputNode':
elemSpan.appendChild(document.createTextNode(this.addIndentations(indentLevel) + this.translationMap[lang].OutputNode.pre));
const outputPre = document.createElement('span');
outputPre.classList.add('keyword');
outputPre.appendChild(document.createTextNode(this.addIndentations(indentLevel) + this.translationMap[lang].OutputNode.pre));
elemSpan.appendChild(outputPre);
elemSpan.appendChild(text);
elemSpan.appendChild(document.createTextNode(this.translationMap[lang].OutputNode.post));
const outputPost = document.createElement('span');
outputPost.classList.add('keyword');
outputPost.appendChild(document.createTextNode(this.translationMap[lang].OutputNode.post));
elemSpan.appendChild(outputPost);
return [elemSpan].concat(this.transformToCode(subTree.followElement, indentLevel, lang));
break;
case 'TaskNode':
elemSpan.appendChild(document.createTextNode(this.addIndentations(indentLevel) + this.translationMap[lang].TaskNode.pre));
const taskPre = document.createElement('span');
taskPre.classList.add('keyword');
taskPre.appendChild(document.createTextNode(this.addIndentations(indentLevel) + this.translationMap[lang].TaskNode.pre));
elemSpan.appendChild(taskPre);
elemSpan.appendChild(text);
elemSpan.appendChild(document.createTextNode(this.translationMap[lang].TaskNode.post));
const taskPost = document.createElement('span');
taskPost.classList.add('keyword');
taskPost.appendChild(document.createTextNode(this.translationMap[lang].TaskNode.post));
elemSpan.appendChild(taskPost);
return [elemSpan].concat(this.transformToCode(subTree.followElement, indentLevel, lang));
break;
case 'BranchNode':
{
let branchHeaderPre = this.addIndentations(indentLevel) + this.translationMap[lang].BranchNode.pre;
elemSpan.appendChild(document.createTextNode(branchHeaderPre));
const branchHeaderPre = document.createElement('span');
branchHeaderPre.classList.add('keyword');
branchHeaderPre.appendChild(document.createTextNode(this.addIndentations(indentLevel) + this.translationMap[lang].BranchNode.pre));
elemSpan.appendChild(branchHeaderPre);
elemSpan.appendChild(text);
elemSpan.appendChild(document.createTextNode(this.translationMap[lang].BranchNode.post));
const branchHeaderPost = document.createElement('span');
branchHeaderPost.classList.add('keyword');
branchHeaderPost.appendChild(document.createTextNode(this.translationMap[lang].BranchNode.post));
elemSpan.appendChild(branchHeaderPost);
let branch = [elemSpan];
if (this.translationMap[lang].leftBracket != '') {
let leftBracket = document.createElement('span');
......@@ -370,10 +390,15 @@ export class CodeView {
break;
case 'CountLoopNode':
{
let loopHeaderPre = this.addIndentations(indentLevel) + this.translationMap[lang].CountLoopNode.pre;
elemSpan.appendChild(document.createTextNode(loopHeaderPre));
const loopHeaderPre = document.createElement('span');
loopHeaderPre.classList.add('keyword');
loopHeaderPre.appendChild(document.createTextNode(this.addIndentations(indentLevel) + this.translationMap[lang].CountLoopNode.pre));
elemSpan.appendChild(loopHeaderPre);
elemSpan.appendChild(text);
elemSpan.appendChild(document.createTextNode(this.translationMap[lang].CountLoopNode.post));
const loopHeaderPost = document.createElement('span');
loopHeaderPost.classList.add('keyword');
loopHeaderPost.appendChild(document.createTextNode(this.translationMap[lang].CountLoopNode.post));
elemSpan.appendChild(loopHeaderPost);
let loop = [elemSpan];
if (this.translationMap[lang].leftBracket != '') {
let leftBracket = document.createElement('span');
......@@ -391,10 +416,15 @@ export class CodeView {
break;
case 'HeadLoopNode':
{
let loopHeaderPre = this.addIndentations(indentLevel) + this.translationMap[lang].HeadLoopNode.pre;
elemSpan.appendChild(document.createTextNode(loopHeaderPre));
const loopHeaderPre = document.createElement('span');
loopHeaderPre.classList.add('keyword');
loopHeaderPre.appendChild(document.createTextNode(this.addIndentations(indentLevel) + this.translationMap[lang].HeadLoopNode.pre));
elemSpan.appendChild(loopHeaderPre);
elemSpan.appendChild(text);
elemSpan.appendChild(document.createTextNode(this.translationMap[lang].HeadLoopNode.post));
const loopHeaderPost = document.createElement('span');
loopHeaderPost.classList.add('keyword');
loopHeaderPost.appendChild(document.createTextNode(this.translationMap[lang].HeadLoopNode.post));
elemSpan.appendChild(loopHeaderPost);
let loop = [elemSpan];
if (this.translationMap[lang].leftBracket != '') {
let leftBracket = document.createElement('span');
......@@ -412,8 +442,10 @@ export class CodeView {
break;
case 'FootLoopNode':
{
let loopContent = this.addIndentations(indentLevel) + this.translationMap[lang].FootLoopNode.prepre;
elemSpan.appendChild(document.createTextNode(loopContent));
const loopContent = document.createElement('span');
loopContent.classList.add('keyword');
loopContent.appendChild(document.createTextNode(this.addIndentations(indentLevel) + this.translationMap[lang].FootLoopNode.prepre));
elemSpan.appendChild(loopContent);
let loop = [elemSpan];
if (this.translationMap[lang].leftBracket != '') {
let leftBracket = document.createElement('span');
......@@ -428,16 +460,24 @@ export class CodeView {
loop.push(rightBracket);
}
let subContent = document.createElement('span');
subContent.appendChild(document.createTextNode(this.addIndentations(indentLevel) + this.translationMap[lang].FootLoopNode.pre));
subContent.id = subTree.id + '-codeLine';
elemSpan.id = '';
const subContentPre = document.createElement('span');
subContentPre.classList.add('keyword');
subContentPre.appendChild(document.createTextNode(this.addIndentations(indentLevel) + this.translationMap[lang].FootLoopNode.pre));
subContent.appendChild(subContentPre);
subContent.appendChild(text);
subContent.appendChild(document.createTextNode(this.translationMap[lang].FootLoopNode.post));
const subContentPost = document.createElement('span');
subContentPost.classList.add('keyword');
subContentPost.appendChild(document.createTextNode(this.translationMap[lang].FootLoopNode.post));
subContent.appendChild(subContentPost);
subContent.addEventListener('mouseover', function() {
let node = document.getElementById(subTree.id);
node.parentElement.parentElement.classList.add('bg-primary');
const node = document.getElementById(subTree.id);
node.firstChild.classList.add('highlight');
});
subContent.addEventListener('mouseout', function() {
let node = document.getElementById(subTree.id);
node.parentElement.parentElement.classList.remove('bg-primary');
const node = document.getElementById(subTree.id);
node.firstChild.classList.remove('highlight');
});
loop.push(subContent);
......@@ -446,22 +486,37 @@ export class CodeView {
break;
case 'CaseNode':
{
elemSpan.appendChild(document.createTextNode(this.addIndentations(indentLevel) + this.translationMap[lang].CaseNode.pre));
const caseHeadPre = document.createElement('span');
caseHeadPre.classList.add('keyword');
caseHeadPre.appendChild(document.createTextNode(this.addIndentations(indentLevel) + this.translationMap[lang].CaseNode.pre));
elemSpan.appendChild(caseHeadPre);
elemSpan.appendChild(text);
elemSpan.appendChild(document.createTextNode(this.translationMap[lang].CaseNode.post));
const caseHeadPost = document.createElement('span');
caseHeadPost.classList.add('keyword');
caseHeadPost.appendChild(document.createTextNode(this.translationMap[lang].CaseNode.post));
elemSpan.appendChild(caseHeadPost);
let cases = [elemSpan];
if (this.translationMap[lang].leftBracket != '') {
let leftBracket = document.createElement('span');
leftBracket.appendChild(document.createTextNode(this.addIndentations(indentLevel) + this.translationMap[lang].leftBracket + "\n"));
cases.push(leftBracket);
}
//subTree.cases.forEach(function(element) {
for (const element of subTree.cases) {
cases = cases.concat(this.transformToCode(element, indentLevel + 1, lang));
}
if (subTree.defaultOn) {
let defaultCase = document.createElement('span');
defaultCase.classList.add('keyword');
defaultCase.id = subTree.defaultNode.id + '-codeLine';
defaultCase.appendChild(document.createTextNode(this.addIndentations(indentLevel + 1) + this.translationMap[lang].InsertCase.preDefault + this.translationMap[lang].InsertCase.post));
defaultCase.addEventListener('mouseover', function() {
const node = document.getElementById(subTree.defaultNode.id);
node.firstChild.classList.add('highlight');
});
defaultCase.addEventListener('mouseout', function() {
const node = document.getElementById(subTree.defaultNode.id);
node.firstChild.classList.remove('highlight');
});
cases.push(defaultCase);
cases = cases.concat(this.transformToCode(subTree.defaultNode.followElement, indentLevel + 2, lang));
}
......@@ -475,13 +530,20 @@ export class CodeView {
break;
case 'InsertCase':
{
elemSpan.appendChild(document.createTextNode(this.addIndentations(indentLevel) + this.translationMap[lang].InsertCase.preNormal));
const casePre = document.createElement('span');
casePre.classList.add('keyword');
casePre.appendChild(document.createTextNode(this.addIndentations(indentLevel) + this.translationMap[lang].InsertCase.preNormal));
elemSpan.appendChild(casePre);
elemSpan.appendChild(text);
elemSpan.appendChild(document.createTextNode(this.translationMap[lang].InsertCase.post));
const casePost = document.createElement('span');
casePost.classList.add('keyword');
casePost.appendChild(document.createTextNode(this.translationMap[lang].InsertCase.post));
elemSpan.appendChild(casePost);
let content = [elemSpan];
content = content.concat(this.transformToCode(subTree.followElement, indentLevel + 1, lang));
let endContent = document.createElement('span');
endContent.classList.add('keyword');
endContent.appendChild(document.createTextNode(this.addIndentations(indentLevel + 1) + this.translationMap[lang].InsertCase.postpost));
content.push(endContent);
return content;
......@@ -508,12 +570,10 @@ export class CodeView {
*/
displaySourcecode(buttonId) {
if (this.presenter.getSourcecodeDisplay()) {
document.getElementById(buttonId).textContent = "Quellcode ausblenden";
//document.getElementById(buttonId).classList.add('btn-primary');
document.getElementById(buttonId).setAttribute('data-tooltip', 'Quellcode ausblenden');
document.getElementById('SourcecodeDisplay').style.display = "block";
} else {
document.getElementById(buttonId).textContent = "Quellcode einblenden";
//document.getElementById(buttonId).classList.remove('btn-primary');
document.getElementById(buttonId).setAttribute('data-tooltip', 'Quellcode einblenden');
document.getElementById('SourcecodeDisplay').style.display = "none";
}
}
......
src/views/importExport.js
View file @ d77cac05
......@@ -2,48 +2,37 @@ export class ImportExport {
constructor(presenter, domRoot) {
this.presenter = presenter;
this.domRoot = domRoot;
this.printHeight = 48;
this.printHeight = 32;
document.getElementById('ImportForm').addEventListener('change', (e) => this.presenter.readFile(e));
this.preRender();
}
/**
* Generate a JSON file of the current model status and append a button element for download
*/
render(model) {
// remove old export elements
while (this.domRoot.hasChildNodes()) {
this.domRoot.removeChild(this.domRoot.lastChild);
}
// transform the model into a JSON object
const dataStr = JSON.stringify(model);
// define the data url to start a download on click
const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
render(model) {}
// create filename with current date in the name
const exportFileDefaultName = 'struktog_' + (new Date(Date.now()).toJSON()).substring(0, 10) + '.json';
// generate the download button element and append it to the node
let linkElement = document.createElement('a');
linkElement.setAttribute('href', dataUri);
linkElement.setAttribute('download', exportFileDefaultName);
linkElement.classList.add('btn');
linkElement.classList.add('btn-sm');