Migrate to webpack 4.8 and use proper jquery timepicker

Signed-off-by: Julius Härtl <jus@bitgrid.net>

js/directive/timepicker.js

@@ -20,6 +20,8 @@
  *
  */
 import app from '../app/App.js';
+import '../legacy/jquery.ui.timepicker.js';
+import 'legacy/jquery.ui.timepicker.css';
 
 /* global app */
 /* global t */
@@ -30,7 +32,7 @@ app.directive('timepicker', function() {
 	return {
 		restrict: 'A',
 		link: function(scope, elm, attr) {
-			return elm.timepicker({
+			return $(elm).timepicker({
 				onSelect: function(date, inst) {
 					scope.setDuedateTime(moment('2000-01-01 ' + date));
 					scope.$apply();

js/init.js

@@ -1,11 +1,11 @@
 'use strict';
 
 // used for building a vendor stylesheet
-import 'jquery-timepicker/jquery.timepicker.css';
 import 'ng-sortable/dist/ng-sortable.css';
 
-
 import angular from 'angular';
+import markdownit from 'markdown-it';
+global.markdownit = markdownit;
 
 import app from './app/App.js';
 import './app/Config.js';

js/legacy/jquery.ui.timepicker.css

@@ -0,0 +1,57 @@
+/*
+ * Timepicker stylesheet
+ * Highly inspired from datepicker
+ * FG - Nov 2010 - Web3R 
+ *
+ * version 0.0.3 : Fixed some settings, more dynamic
+ * version 0.0.4 : Removed width:100% on tables
+ * version 0.1.1 : set width 0 on tables to fix an ie6 bug
+ */
+
+.ui-timepicker-inline { display: inline; }
+
+#ui-timepicker-div { padding: 0.2em; }
+.ui-timepicker-table { display: inline-table; width: 0; }
+.ui-timepicker-table table { margin:0.15em 0 0 0; border-collapse: collapse; }
+
+.ui-timepicker-hours, .ui-timepicker-minutes { padding: 0.2em;  }
+
+.ui-timepicker-table .ui-timepicker-title { line-height: 1.8em; text-align: center; }
+.ui-timepicker-table td { padding: 0.1em; width: 2.2em; }
+.ui-timepicker-table th.periods { padding: 0.1em; width: 2.2em; }
+
+/* span for disabled cells */
+.ui-timepicker-table td span {
+	display:block;
+    padding:0.2em 0.3em 0.2em 0.5em;
+    width: 1.2em;
+
+    text-align:right;
+    text-decoration:none;
+}
+/* anchors for clickable cells */
+.ui-timepicker-table td a {
+    display:block;
+    padding:0.2em 0.3em 0.2em 0.5em;
+    width: 1.2em;
+    cursor: pointer;
+    text-align:right;
+    text-decoration:none;
+}
+
+
+/* buttons and button pane styling */
+.ui-timepicker .ui-timepicker-buttonpane {
+    background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0;
+}
+.ui-timepicker .ui-timepicker-buttonpane button { margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
+/* The close button */
+.ui-timepicker .ui-timepicker-close { float: right }
+
+/* the now button */
+.ui-timepicker .ui-timepicker-now { float: left; }
+
+/* the deselect button */
+.ui-timepicker .ui-timepicker-deselect { float: left; }
+
+

js/package.json

@@ -1,5 +1,7 @@
 {
   "name": "deck",
+  "description": "Frontend for the Nextcloud Deck app",
+  "repository": "https://github.com/nextcloud/deck",
   "version": "1.0.0",
   "main": "Gruntfile.js",
   "directories": {
@@ -12,7 +14,7 @@
     "angular-markdown-it": "^0.6.1",
     "angular-sanitize": "^1.6.8",
     "jquery": "^3.3.1",
-    "jquery-timepicker": "^1.3.3",
+    "markdown-it": "^8.4.1",
     "markdown-it-link-target": "^1.0.2",
     "ng-sortable": "^1.3.8",
     "ui-select": "^0.19.8"
@@ -22,19 +24,22 @@
     "babel-loader": "^7.1.2",
     "bower": "^1.8.0",
     "css-loader": "^0.28.9",
-    "extract-text-webpack-plugin": "^3.0.2",
     "jshint-stylish": "^2.2.1",
     "karma": "^1.4.1",
+    "mini-css-extract-plugin": "^0.4.0",
     "node-sass": "^4.5.3",
     "style-loader": "^0.19.1",
     "webpack": "^4.8.2",
-    "webpack-merge": "^4.1.1"
+    "webpack-cli": "^2.1.3",
+    "webpack-merge": "^4.1.2"
   },
   "scripts": {
+    "build": "./node_modules/webpack-cli/bin/webpack.js --mode production --config webpack.prod.config.js",
+    "dev": "./node_modules/webpack-cli/bin/webpack.js --mode development --config webpack.dev.config.js",
+    "watch": "./node_modules/webpack-cli/bin/webpack.js --mode development --config webpack.dev.config.js --watch",
     "test": "echo \"Warning: no test specified\" && exit 0"
   },
   "author": "",
   "license": "AGPL-3.0",
-  "keywords": [],
-  "description": ""
+  "keywords": []
 }

js/webpack.config.js

@@ -1,54 +1,62 @@
 const path = require('path');
 const webpack = require('webpack');
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = {
-	entry: {
-		deck: './init.js',
-	},
-	output: {
-		filename: '[name].js',
-		path: __dirname + '/build'
-	},
-	resolve: {
-		modules: [path.resolve(__dirname), 'node_modules'],
-	},
-	module: {
-		loaders: [
-			{
-				test: /\.js$/,
-				exclude: /node_modules/,
-				loader: 'babel-loader',
-			},
-			{
-				test: /\.css$/,
-				use: ExtractTextPlugin.extract({
-					use: {
-						loader: 'css-loader',
-						options: {
-							minimize: true,
-						}
-					},
-				})
-			}
-		]
-	},
-	plugins: [
-		new webpack.optimize.UglifyJsPlugin({
-			test: /(vendor\.js)+/i,
-		}),
-		// we do not uglify deck.js since there are no proper dependency annotations
-		new webpack.optimize.CommonsChunkPlugin({
-			name: 'vendor',
-			filename: 'vendor.js',
-			minChunks(module, count) {
-				var context = module.context;
-				return context && context.indexOf('node_modules') >= 0;
-			},
-		}),
-		new ExtractTextPlugin({
-			filename: "../../css/vendor.css",
-			allChunks: true
-		}),
-	]
+  node: {
+    fs: 'empty',
+  },
+  entry: {
+    deck: './init.js',
+  },
+  output: {
+    filename: '[name].js',
+    path: __dirname + '/build'
+  },
+  resolve: {
+    modules: [path.resolve(__dirname), 'node_modules'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+      },
+      {
+        test: /\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          "css-loader"
+        ]
+      }
+    ]
+  },
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        /* separate vendor chunk for node_modules and legacy scripts */
+        commons: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendor",
+          chunks: "all"
+        },
+        legacy: {
+          test: /[\\/]legacy[\\/]/,
+          name: "vendor",
+          chunks: "all"
+        }
+      }
+    }
+  },
+  externals: {
+    "jquery": "jQuery"
+  },
+  plugins: [
+    new MiniCssExtractPlugin('css/[name].css'),
+    new webpack.ProvidePlugin({
+      $: "jquery",
+      jQuery: "jquery"
+    })
+  ]
 };

js/webpack.dev.config.js

@@ -2,5 +2,5 @@ const merge = require('webpack-merge');
 const baseConfig = require('./webpack.config.js');
 
 module.exports = merge(baseConfig, {
-	devtool: 'eval'
+  mode: 'development'
 });

js/webpack.prod.config.js

@@ -1,13 +1,15 @@
 const webpack = require('webpack');
 const merge = require('webpack-merge');
 const baseConfig = require('./webpack.config.js');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
 
 module.exports = merge(baseConfig, {
-	plugins: [
-		new webpack.DefinePlugin({
-			'process.env': {
-				'NODE_ENV': JSON.stringify('production')
-			}
-		}),
-	]
-});
+  mode: 'production',
+  optimization: {
+    minimizer: [
+      new UglifyJsPlugin({
+        test: /(vendor\.js)+/i
+      })
+    ]
+  }});

templates/main.php

@@ -23,10 +23,10 @@
 
 use OCP\Util;
 
-Util::addStyle('deck', 'vendor');
-Util::addStyle('deck', 'style');
-
+Util::addStyle('deck', '../js/build/vendor');
 Util::addScript('deck', 'build/vendor');
+
+Util::addStyle('deck', 'style');
 Util::addScript('deck', 'build/deck');
 ?>