frontend stuff with babel and webpack

This commit is contained in:
marudor 2018-01-03 01:19:31 +01:00
parent 14584b9611
commit 7f722314e4
41 changed files with 175 additions and 49357 deletions

17
.babelrc Normal file
View File

@ -0,0 +1,17 @@
{
"presets": [["env", {
"targets": {
"chrome": 45,
"firefox": 42,
"safari": 9,
"opera": 32,
"edge": 12,
"iOS": 9
},
"loose": true,
"useBuiltIns": true
}]
],
"plugins": [
]
}

3
.gitignore vendored
View File

@ -26,3 +26,6 @@ _vimrc_local.vim
# Composer files
/vendor/
/composer.lock
node_modules
public/assets

View File

@ -19,8 +19,7 @@
"illuminate/container": "5.5.*",
"psr/container": "^1.0",
"psr/log": "^1.0",
"symfony/http-foundation": "^3.3",
"twbs/bootstrap": "^3.3"
"symfony/http-foundation": "^3.3"
},
"require-dev": {
"filp/whoops": "^2.1",

31
js/vendor.js Normal file
View File

@ -0,0 +1,31 @@
import 'imports-loader?module=>false!jquery';
import 'imports-loader?define=>false!jquery-ui';
import 'bootstrap';
import 'imports-loader?define=>false&exports=>false!bootstrap-datepicker';
import 'bootstrap-datepicker/js/locales/bootstrap-datepicker.de';
import 'bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css';
import 'imports-loader?this=>window!chart.js';
import 'imports-loader?this=>window&define=>false&exports=>false!moment';
import 'imports-loader?this=>window&define=>false&exports=>false!moment/locale/de';
import './forms';
import './sticky-headers';
import 'icomoon/style.css';
$(function () {
moment.locale("%locale%");
});
$(document).ready(function () {
if (typeof moment !== "undefined") {
$.each($(".moment-countdown"), function (i, e) {
var span = $(e);
var text = span.html();
/* global moment */
var timestamp = moment(parseInt(span.attr("data-timestamp") * 1000));
span.html(text.replace("%c", timestamp.fromNow()));
setInterval(function () {
span.html(text.replace("%c", timestamp.fromNow()));
}, 1000);
});
}
});

36
package.json Normal file
View File

@ -0,0 +1,36 @@
{
"name": "engelsystem",
"version": "1.0.0",
"main": "index.js",
"repository": "https://github.com/engelsystem/engelsystem.git",
"author": "marudor <marudor@marudor.de>",
"license": "MIT",
"scripts": {
"build": "NODE_ENV=production webpack",
"build:watch": "webpack --watch"
},
"dependencies": {
"bootstrap": "^3.3.7",
"bootstrap-datepicker": "^1.7.1",
"chart.js": "^1.0.2",
"icomoon": "^1.0.0",
"jquery": "^2.1.1",
"jquery-ui": "^1.11.2",
"moment": "^2.8.2",
"select2": "^4.0.6-rc.1",
"select2-bootstrap-theme": "0.1.0-beta.10"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.6",
"imports-loader": "^0.7.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"style-loader": "^0.19.1",
"webpack": "^3.10.0"
}
}

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -1,19 +0,0 @@
/**
* Initialize all moment countdowns on the page. A moment countdown has the
* class "moment-countdown" and the attribute "data-timestamp" which defines the
* countdown's time goal.
*/
$(document).ready(function () {
if (typeof moment !== "undefined") {
$.each($(".moment-countdown"), function (i, e) {
var span = $(e);
var text = span.html();
/* global moment */
var timestamp = moment(parseInt(span.attr("data-timestamp") * 1000));
span.html(text.replace("%c", timestamp.fromNow()));
setInterval(function () {
span.html(text.replace("%c", timestamp.fromNow()));
}, 1000);
});
}
});

File diff suppressed because one or more lines are too long

View File

@ -1 +0,0 @@
../../vendor/twbs/bootstrap/dist

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +0,0 @@
!function(a){a.fn.datepicker.dates.de={days:["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"],daysShort:["Son","Mon","Die","Mit","Don","Fre","Sam"],daysMin:["So","Mo","Di","Mi","Do","Fr","Sa"],months:["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],monthsShort:["Jan","Feb","Mär","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez"],today:"Heute",monthsTitle:"Monate",clear:"Löschen",weekStart:1,format:"dd.mm.yyyy"}}(jQuery);

Binary file not shown.

View File

@ -1,11 +0,0 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icomoon" horiz-adv-x="512">
<font-face units-per-em="512" ascent="480" descent="-32" />
<missing-glyph horiz-adv-x="512" />
<glyph unicode="&#x20;" d="" horiz-adv-x="256" />
<glyph unicode="&#xe600;" d="M262.158 408.627c-70.507 0-127.664-66.46-127.664-148.443 0-45.996 17.956-87.059 46.202-114.287v-34.156l-179.946-52.779v-94.564l510.657-4.399v94.563l-165.356 59.377h-2.432v31.957c28.247 27.228 46.202 68.291 46.202 114.287 0 81.983-57.157 148.443-127.664 148.443zM262.158 479c-124.226 0-224.932-40.861-224.932-91.265s100.706-91.265 224.932-91.265c124.226 0 224.932 40.861 224.932 91.265s-100.706 91.265-224.932 91.265zM262.158 432.818c102.738 0 186.025-28.553 186.025-63.775s-83.286-63.776-186.025-63.776c-102.738 0-186.025 28.553-186.025 63.776s83.286 63.775 186.025 63.775z" />
</font></defs></svg>

Before

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

Binary file not shown.

View File

@ -1,74 +0,0 @@
{
"IcoMoonType": "selection",
"icons": [
{
"icon": {
"paths": [
"M524.315 142.746c-141.014 0-255.328 132.92-255.328 296.886 0 91.993 35.911 174.118 92.405 228.574v68.311l-359.891 105.559v189.127l1021.314 8.797v-189.127l-330.711-118.754h-4.863v-63.913c56.494-54.456 92.405-136.581 92.405-228.574 0-163.965-114.314-296.886-255.328-296.886z",
"M524.315 2c-248.453 0-449.864 81.721-449.864 182.53s201.411 182.53 449.864 182.53c248.453 0 449.864-81.721 449.864-182.53s-201.411-182.53-449.864-182.53zM524.315 94.364c205.477 0 372.050 57.106 372.050 127.551s-166.572 127.551-372.050 127.551c-205.477 0-372.050-57.106-372.050-127.551s166.572-127.551 372.050-127.551z"
],
"attrs": [
{},
{}
],
"grid": 0,
"tags": [
"icon_angel"
]
},
"attrs": [
{},
{}
],
"properties": {
"order": 4,
"id": 0,
"prevSize": 32,
"code": 58880,
"name": "icon_angel",
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 0
}
],
"height": 1024,
"metadata": {
"name": "icomoon"
},
"preferences": {
"fontPref": {
"prefix": "icon-",
"metadata": {
"fontFamily": "icomoon"
},
"showGlyphs": true,
"metrics": {
"emSize": 512,
"baseline": 6.25,
"whitespace": 50
},
"resetPoint": 58880,
"showQuickUse": true,
"quickUsageToken": false,
"showMetrics": true,
"showMetadata": false
},
"imagePref": {
"color": 0,
"height": 32,
"columns": 16,
"margin": 16,
"png": false,
"sprites": true
},
"historySize": 100,
"showCodes": true,
"gridSize": 16,
"showLiga": false,
"showGrid": true,
"showGlyphs": true,
"showQuickUse": true,
"search": ""
}
}

View File

@ -1,28 +0,0 @@
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?-kja6ux');
src:url('fonts/icomoon.eot?#iefix-kja6ux') format('embedded-opentype'),
url('fonts/icomoon.woff?-kja6ux') format('woff'),
url('fonts/icomoon.ttf?-kja6ux') format('truetype'),
url('fonts/icomoon.svg?-kja6ux#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-icon_angel:before {
content: "\e600";
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -31,6 +31,7 @@ class Db
try {
self::$db = new PDO($dsn, $username, $password, $options);
} catch (PDOException $e) {
var_dump($e);
return false;
}

View File

@ -4,11 +4,8 @@
<title>%title% - Engelsystem</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/theme%theme%.css"/>
<link rel="stylesheet" type="text/css" href="vendor/icomoon/style.css"/>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap-datepicker-1.7.1/css/bootstrap-datepicker3.min.css"/>
<script type="text/javascript" src="vendor/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="vendor/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/theme%theme%.css"/>
<script type="text/javascript" src="assets/vendor.js"></script>
%atom_link%
</head>
<body>
@ -41,22 +38,9 @@
· <a href="https://github.com/engelsystem/engelsystem/issues">Bugs / Features</a>
· <a href="https://github.com/engelsystem/engelsystem/">Development Platform</a>
· <a href="%credits_url%">Credits</a>
</div>
</div>;
</div>
</div>
</div>
<script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="vendor/bootstrap-datepicker-1.7.1/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="vendor/bootstrap-datepicker-1.7.1/locales/bootstrap-datepicker.de.min.js"></script>
<script type="text/javascript" src="vendor/Chart.min.js"></script>
<script type="text/javascript" src="js/forms.js"></script>
<script type="text/javascript" src="vendor/moment-with-locales.min.js"></script>
<script type="text/javascript">
$(function () {
moment.locale("%locale%");
});
</script>
<script type="text/javascript" src="js/moment-countdown.js"></script>
<script type="text/javascript" src="js/sticky-headers.js"></script>
</body>
</html>

View File

@ -4,11 +4,8 @@
<title>Maintenance - Engelsystem</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/theme0.css"/>
<link rel="stylesheet" type="text/css" href="vendor/icomoon/style.css"/>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap-datepicker-1.4.0/css/bootstrap-datepicker3.min.css"/>
<script type="text/javascript" src="vendor/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="vendor/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/theme0.css"/>
<script type="text/javascript" src="assets/vendor.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
@ -70,17 +67,5 @@
</div>
</div>
</div>
<script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="vendor/bootstrap-datepicker-1.4.0/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="vendor/bootstrap-datepicker-1.4.0/locales/bootstrap-datepicker.de.min.js"></script>
<script type="text/javascript" src="vendor/Chart.min.js"></script>
<script type="text/javascript" src="js/forms.js"></script>
<script type="text/javascript" src="vendor/moment-with-locales.min.js"></script>
<script type="text/javascript">
$(function () {
moment.locale("en_US.UTF-8");
});
</script>
<script type="text/javascript" src="js/moment-countdown.js"></script>
</body>
</html>

View File

@ -1,6 +1,6 @@
@import "../vendor/twbs/bootstrap/less/bootstrap";
@import "../node_modules/bootstrap/less/bootstrap";
@icon-font-path: "../../../../vendor/bootstrap/fonts/";
@icon-font-path: "../fonts/";
body {
padding-top: 50px;

View File

@ -1,15 +0,0 @@
#!/bin/bash
FILE_PATH="$(dirname "$0")"
for file in $(ls "${FILE_PATH}/"*.less); do
filename="${file##*/}"
themeName="${filename%.less}"
if [[ "$filename" == "base.less" ]]; then
continue;
fi
echo "Building ${themeName}"
lessc "${file}" > "${FILE_PATH}/../public/css/${themeName}.css"
done

View File

@ -1,4 +1,4 @@
@import "../vendor/twbs/bootstrap/less/variables";
@import "../node_modules/bootstrap/less/variables";
/*
The MIT License (MIT)

View File

@ -1,4 +1,4 @@
@import "../vendor/twbs/bootstrap/less/variables";
@import "../node_modules/bootstrap/less/variables";
@brand-primary: #758499;
@brand-success: #7b9c41;

View File

@ -1,4 +1,4 @@
@import "../vendor/twbs/bootstrap/less/variables";
@import "../node_modules/bootstrap/less/variables";
@brand-primary: #f19224;
@brand-success: #39AB50;

View File

@ -1,4 +1,4 @@
@import "../vendor/twbs/bootstrap/less/variables";
@import "../node_modules/bootstrap/less/variables";
/*
The MIT License (MIT)

View File

@ -1,4 +1,4 @@
@import "../vendor/twbs/bootstrap/less/variables";
@import "../node_modules/bootstrap/less/variables";
@brand-primary: rgb(164, 28, 49);
@brand-success: rgb(153, 204, 0);

View File

@ -1,4 +1,4 @@
@import "../vendor/twbs/bootstrap/less/variables";
@import "../node_modules/bootstrap/less/variables";
/*
The MIT License (MIT)

73
webpack.config.js Normal file
View File

@ -0,0 +1,73 @@
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const nodeEnv = (process.env.NODE_ENV || 'development').trim();
// eslint-disable-next-line
const __DEV__ = nodeEnv !== 'production';
const devtool = __DEV__ ? '#source-map' : '';
const plugins = [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(nodeEnv),
},
}),
new ExtractTextPlugin('[name].css'),
];
// if (!__DEV__) {
// plugins.push(
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false,
// },
// output: {
// comments: false,
// },
// screwIe8: true,
// sourceMap: false,
// })
// );
// }
const themeEntries = {};
for (let i = 0; i < 7; i++) {
themeEntries[`theme${i}`] = `./themes/theme${i}.less`;
}
module.exports = {
context: __dirname,
resolve: {
extensions: ['.js', '.jsx'],
},
entry: {
...themeEntries,
vendor: './js/vendor.js',
},
output: {
path: path.resolve('public/assets'),
filename: '[name].js',
publicPath: '/assets/',
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: { cacheDirectory: true },
},
{ test: /\.(eot|ttf|otf|svg|woff2?)(\?.*)?$/, loader: 'file-loader' },
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.less$/, use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader!less-loader'
})}
],
},
plugins,
devtool,
};