Commit 992ce58e authored by thiemol's avatar thiemol

move svg dir to assets

switch deployment to webpack
parent 18725c66
.acceptIcon {
background: url('../svg/acceptIcon.svg');
}
.addCaseIcon {
background: url('../svg/addCaseIcon.svg');
}
.branchCenter {
background: url('../svg/branchCenter.svg');
}
.branchIcon {
background: url('../svg/branchIcon.svg');
}
.branchSplit {
background: url('../svg/branchSplit.svg');
}
.caseIcon {
background: url('../svg/caseIcon.svg');
}
.countLoopIcon {
background: url('../svg/countLoopIcon.svg');
}
.deleteIcon {
background: url('../svg/deleteIcon.svg');
}
.footLoopIcon {
background: url('../svg/footLoopIcon.svg');
}
.frameBottom {
background: url('../svg/frameBottom.svg');
}
.frameLeftBottom {
background: url('../svg/frameLeftBottom.svg');
}
.frameLeftRight {
background: url('../svg/frameLeftRight.svg');
}
.frameTop {
background: url('../svg/frameTop.svg');
}
.insertIcon {
background: url('../svg/insertIcon.svg');
}
.logo {
background: url('../svg/logo.svg');
}
.moveIcon {
background: url('../svg/moveIcon.svg');
}
.placeholder {
background: url('../svg/placeholder.svg');
}
.switchDefaultCaseIcon {
background: url('../svg/switchDefaultCaseIcon.svg');
}
.taskIcon {
background: url('../svg/taskIcon.svg');
}
......@@ -2,6 +2,7 @@
@import "importExport";
@import "cases";
@import "code";
@import "svg";
$font-stack: "Verdana", Geneva, sans-serif;
......
......@@ -3,9 +3,129 @@
*
* @ return string random generated
*/
export function guidGenerator() {
const gen = function() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
};
return (gen()+gen()+"-"+gen()+"-"+gen()+"-"+gen()+"-"+gen()+gen());
export function guidGenerator () {
const gen = function () {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
}
return (gen() + gen() + '-' + gen() + '-' + gen() + '-' + gen() + '-' + gen() + gen())
}
/**
* Generate HTML tree
*
*/
export function generateHtmltree () {
// Header
let section1 = document.createElement('section')
section1.setAttribute('class', 'nav-col')
let div = document.createElement('div')
div.setAttribute('class', 'nav-logo-container')
section1.appendChild(div)
div = document.createElement('div')
div.setAttribute('class', 'logo-container logo')
section1.appendChild(div)
let link = document.createElement('a')
let text = document.createTextNode('Struktog.')
// strong
link.appendChild(text)
link.title = ''
link.href = 'index.html'
section1.appendChild(link)
let section2 = document.createElement('section')
section2.setAttribute('class', 'nav-col')
let button = document.createElement('button')
button.setAttribute('class', 'column')
button.setAttribute('onclick', "document.getElementById('IEModal').style.display = 'block';")
button.innerHTML = 'Import / Export'
let divinner = document.createElement('div')
divinner.setAttribute('class', 'column container')
let divouter = document.createElement('div')
divouter.setAttribute('class', 'options-container')
divouter.setAttribute('id', 'optionButtons')
divinner.appendChild(button)
divouter.appendChild(divinner)
section2.appendChild(divouter)
let header = document.createElement('header')
header.setAttribute('class', 'container')
header.appendChild(section1)
header.appendChild(section2)
// main
let mdiv1 = document.createElement('div')
mdiv1.setAttribute('class', 'container')
mdiv1.setAttribute('id', 'editorDisplay')
let span = document.createElement('span')
span.setAttribute('class', 'close')
span.setAttribute('onclick', "document.getElementById('IEModal').style.display = 'none';")
span.innerHTML = '×'
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 mdiv211 = document.createElement('div')
mdiv211.setAttribute('id', 'Export')
mdiv211.setAttribute('class', 'text-center pt-1')
let mdiv21 = document.createElement('div')
mdiv21.setAttribute('class', 'modal-content')
mdiv21.appendChild(span)
mdiv21.appendChild(p)
mdiv21.appendChild(input)
mdiv21.appendChild(p2)
mdiv21.appendChild(mdiv211)
let mdiv2 = document.createElement('div')
mdiv2.setAttribute('class', 'modal')
mdiv2.setAttribute('id', 'IEModal')
mdiv2.appendChild(mdiv21)
let main = document.createElement('main')
main.appendChild(mdiv1)
main.appendChild(mdiv2)
// footer
let fspan1 = document.createElement('span')
fspan1.innerHTML = ('© 2019 Didaktik der Informatik')
let fspan2 = document.createElement('span')
fspan2.innerHTML = '('
let fspan3 = document.createElement('span')
fspan3.innerHTML = ')'
let flink = document.createElement('a')
let ftext = document.createTextNode('MIT License')
// strong
flink.innerHTML = ftext
flink.title = ''
flink.href = 'license.html'
let fdiv = document.createElement('div')
fdiv.setAttribute('class', 'column')
fdiv.appendChild(fspan1)
fdiv.appendChild(fspan2)
fdiv.appendChild(flink)
fdiv.appendChild(fspan3)
let footer = document.createElement('footer')
footer.appendChild(fdiv)
document.body.appendChild(header)
document.body.appendChild(main)
document.body.appendChild(footer)
}
/**
* Main javascript of the Struktog. software
*
*
* @author Klaus Ramm <klaus@ramm-web.de>
* @copyright Klaus Ramm 25.06.2019
* @licence MIT License (MIT), see license.md
* @version 0.5
* @link struktog.ramm-web.de
*/
import { model } from './model/main'
import { Presenter } from './presenter/main'
import { Structogram } from './views/structogram'
import { CodeView } from './views/code'
import { ImportExport } from './views/importExport'
import { generateHtmltree } from './helpers/generator'
import { model } from './model/main';
import { Presenter } from './presenter/main';
import { Structogram } from './views/structogram';
import { CodeView } from './views/code';
import { ImportExport } from './views/importExport';
import './assets/scss/structog.scss'
window.onload = function () {
generateHtmltree()
// create presenter object
const presenter = new Presenter(model)
// TODO: this should not be necessary, but some functions depend on moveId and nextInsertElement
model.setPresenter(presenter)
window.onload = function() {
// create presenter object
const presenter = new Presenter(model);
// TODO: this should not be necessary, but some functions depend on moveId and nextInsertElement
model.setPresenter(presenter);
// create our view objects
const structogram = new Structogram(presenter, document.getElementById('editorDisplay'))
presenter.addView(structogram)
const code = new CodeView(presenter, document.getElementById('editorDisplay'))
presenter.addView(code)
const importExport = new ImportExport(presenter, document.getElementById('Export'))
presenter.addView(importExport)
// create our view objects
const structogram = new Structogram(presenter, document.getElementById("editorDisplay"));
presenter.addView(structogram);
const code = new CodeView(presenter, document.getElementById("editorDisplay"));
presenter.addView(code);
const importExport = new ImportExport(presenter, document.getElementById('Export'));
presenter.addView(importExport);
// 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'))
// 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.appendChild(resetButton)
document.getElementById('optionButtons').appendChild(resetButtonDiv)
resetButtonDiv.appendChild(resetButton);
document.getElementById('optionButtons').appendChild(resetButtonDiv);
presenter.init();
presenter.init()
}
// const path = require('path');
// const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const gameRoot = process.cwd()
// the path(s) that should be cleaned
let pathsToClean = [
'build'
]
// the clean options to use
let cleanOptions = {
verbose: true,
dry: false
}
var config = {
// bundle javascript
entry: `${gameRoot}/src/index.js`,
output: {
path: `${gameRoot}/build`,
filename: 'struktogramm.js'
// path: path.resolve(__dirname, "build"),
// publicPath: "${game_root}/build"
},
resolve: { symlinks: false },
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
// modules: true,
// sourceMap: true,
// importLoaders: 1
}
},
'sass-loader'
]
},
{
test: /\.svg$/,
use: {
loader: 'svg-url-loader',
options: {}
}
}
]
},
plugins: [
new CleanWebpackPlugin({ pathsToClean, cleanOptions }),
new MiniCssExtractPlugin({
filename: 'struktogramm.css',
chunkFilename: '[name].css'
}),
new HtmlWebpackPlugin({
title: 'Struktogramm',
meta: { viewport: 'width=device-width, initial-scale=1, user-scalable=no' }
})
]
}
module.exports = (env, argv) => {
if (!argv || !argv.mode) { config.mode = 'development' }
if (!argv || !argv.mode || argv.mode === 'development') { config.devtool = 'source-map' }
return config
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment