#284: Url Dialog window.

.electron-vue/webpack.renderer.config.js

@@ -20,6 +20,15 @@ var FixDefaultImportPlugin = require('webpack-fix-default-import-plugin')
  * https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals
  */
 let whiteListedModules = ['vue']
+const defaultMinify =  {
+  collapseWhitespace: true,
+  removeAttributeQuotes: true,
+  removeComments: true
+}
+
+const defaultNodeModules = process.env.NODE_ENV !== 'production'
+  ? path.resolve(__dirname, '../node_modules')
+  : false
 
 let rendererConfig = {
   devtool: '#cheap-module-eval-source-map',
@@ -112,54 +121,11 @@ let rendererConfig = {
   },
   plugins: [
     new ExtractTextPlugin('styles.css'),
-    new HtmlWebpackPlugin({
-      filename: 'index.html',
-      template: path.resolve(__dirname, '../src/index.ejs'),
-      minify: {
-        collapseWhitespace: true,
-        removeAttributeQuotes: true,
-        removeComments: true
-      },
-      nodeModules: process.env.NODE_ENV !== 'production'
-        ? path.resolve(__dirname, '../node_modules')
-        : false
-    }),
-    new HtmlWebpackPlugin({
-      filename: 'keyboardhelp.html',
-      template: path.resolve(__dirname, '../src/keyboardhelp.ejs'),
-      minify: {
-        collapseWhitespace: true,
-        removeAttributeQuotes: true,
-        removeComments: true
-      },
-      nodeModules: process.env.NODE_ENV !== 'production'
-        ? path.resolve(__dirname, '../node_modules')
-        : false
-    }),
-    new HtmlWebpackPlugin({
-      filename: 'openexcel.html',
-      template: path.resolve(__dirname, '../src/openexcel.ejs'),
-      minify: {
-        collapseWhitespace: true,
-        removeAttributeQuotes: true,
-        removeComments: true
-      },
-      nodeModules: process.env.NODE_ENV !== 'production'
-        ? path.resolve(__dirname, '../node_modules')
-        : false
-    }),
-    new HtmlWebpackPlugin({
-      filename: 'errors.html',
-      template: path.resolve(__dirname, '../src/errors.ejs'),
-      minify: {
-        collapseWhitespace: true,
-        removeAttributeQuotes: true,
-        removeComments: true
-      },
-      nodeModules: process.env.NODE_ENV !== 'production'
-        ? path.resolve(__dirname, '../node_modules')
-        : false
-    }),
+    createHtmlPlugin('index'),
+    createHtmlPlugin('keyboardhelp'),
+    createHtmlPlugin('urldialog'),
+    createHtmlPlugin('openexcel'),
+    createHtmlPlugin('errors'),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin(),
     new FixDefaultImportPlugin()
@@ -180,6 +146,14 @@ let rendererConfig = {
   target: 'electron-renderer'
 }
 
+function createHtmlPlugin(pageName) {
+  return new HtmlWebpackPlugin({
+    filename: `${pageName}.html`,
+    template: path.resolve(__dirname, `../src/${pageName}.ejs`),
+    minify: defaultMinify,
+    nodeModules: defaultNodeModules
+  })
+}
 /**
  * Adjust rendererConfig for development settings
  */

src/renderer/components/UrlDialog.vue

@@ -0,0 +1,56 @@
+<template>
+<div id="container" class="container-fluid">
+  <form>
+    <p>
+      <input :class="{ 'form-control': true, 'validate-danger': errors.has('url-dialog') }" type="text" id="url-dialog" name="url-dialog" v-validate="'url:true'" v-model="urlText"/>
+    </p>
+    <div v-show="errors.has('url-dialog')" class="row help validate-danger">
+      {{ errors.first('url-dialog')}}
+    </div>
+    <div class="submit-container">
+      <button id="submit" class="btn btn-default" @click.prevent="submit">{{submitText}}</button> <button id="cancel" class="btn btn-default" @click.prevent="cancel">Cancel</button>
+    </div>
+  </form>
+</div>
+</template>
+<script>
+import ValidationRules from '@/mixins/ValidationRules'
+import {ipcRenderer as ipc} from 'electron'
+export default {
+  name: 'urldialog',
+  data() {
+    return {
+      urlText: '',
+      submitText: 'Open URL'
+    }
+  },
+  methods: {
+    submit: function() {
+      ipc.send('urlSubmitted', this.urlText)
+    },
+    cancel: function() {
+      ipc.send('urlCancelled')
+    },
+    updateSubmitText: function(text) {
+      this.submitText = text
+    },
+    resetUrlTextOnError: function() {
+      if (this.errors.has('url-dialog')) {
+        this.urlText = ''
+      }
+    }
+  },
+  mounted: function() {
+    const vueUpdateSubmitText = this.updateSubmitText
+    ipc.on('urlDialog', function(event, arg) {
+      vueUpdateSubmitText(arg)
+    })
+  }
+}
+</script>
+<style lang="styl" scoped>
+@import '~static/css/url-dialog'
+</style>
+<style lang="styl" scoped>
+@import '~static/css/validationrules'
+</style>

src/renderer/main.js

@@ -22,6 +22,8 @@ if (document.querySelector('#app')) {
   compileVue('#openexcel', 'openexcel')
 } else if (document.querySelector('#errors')) {
   compileVue('#errors', 'errors')
+} else if (document.querySelector('#urldialog')) {
+  compileVue('#urldialog', 'urldialog')
 } else {
   console.log('No match found for root id on incoming page.')
 }

src/renderer/router/index.js

@@ -10,6 +10,7 @@ export default new Router({
       components: {
         default: require('@/components/Home'),
         keyboardhelp: require('@/components/KeyboardHelp'),
+        urldialog: require('@/components/UrlDialog'),
         openexcel: require('@/components/SelectWorksheet'),
         errors: require('@/components/Errors')
       }

src/urldialog.ejs

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Data Curator - URL Dialog</title>
+    <% if (htmlWebpackPlugin.options.nodeModules) { %>
+      <!-- Add `node_modules/` to global paths so `require` works properly in development -->
+      <script>
+        require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
+      </script>
+    <% } %>
+  </head>
+  <body>
+    <div id="urldialog" ></div>
+    <!-- Set `__static` path to static files in production -->
+    <script>
+      if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
+    </script>
+
+    <!-- webpack builds are automatically injected -->
+  </body>
+</html>

static/css/url-dialog.styl

@@ -0,0 +1,13 @@
+.submit-container
+  position absolute
+  bottom 0
+  width 100%
+  margin 0 0 0 -15px
+  text-align right
+  border-radius 0
+  border-bottom 0
+  padding 7px
+
+#urldialog
+  margin 7px
+  width 95%