From 136f06655671b0a3402273480a32c1875a84d682 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Fri, 18 Aug 2017 14:56:19 +0430 Subject: [PATCH] loadingIndicator support for SPA --- lib/app/views/loading/circle.html | 149 ++++++++++++++++++ lib/app/views/loading/cube-grid.html | 86 +++++++++++ lib/app/views/loading/fading-circle.html | 163 ++++++++++++++++++++ lib/app/views/loading/folding-cube.html | 107 +++++++++++++ lib/app/views/loading/hasing-dots.html | 66 ++++++++ lib/app/views/loading/nuxt.html | 82 ++++++++++ lib/app/views/loading/pulse.html | 47 ++++++ lib/app/views/loading/rectangle-bounce.html | 73 +++++++++ lib/app/views/loading/rotating-plane.html | 43 ++++++ lib/app/views/loading/three-bounce.html | 60 +++++++ lib/app/views/loading/wandering-cubes .html | 67 ++++++++ lib/builder/builder.js | 18 ++- lib/common/options.js | 15 ++ lib/core/renderer.js | 11 +- 14 files changed, 984 insertions(+), 3 deletions(-) create mode 100644 lib/app/views/loading/circle.html create mode 100644 lib/app/views/loading/cube-grid.html create mode 100644 lib/app/views/loading/fading-circle.html create mode 100644 lib/app/views/loading/folding-cube.html create mode 100644 lib/app/views/loading/hasing-dots.html create mode 100644 lib/app/views/loading/nuxt.html create mode 100644 lib/app/views/loading/pulse.html create mode 100644 lib/app/views/loading/rectangle-bounce.html create mode 100644 lib/app/views/loading/rotating-plane.html create mode 100644 lib/app/views/loading/three-bounce.html create mode 100644 lib/app/views/loading/wandering-cubes .html diff --git a/lib/app/views/loading/circle.html b/lib/app/views/loading/circle.html new file mode 100644 index 0000000000..0094e4038c --- /dev/null +++ b/lib/app/views/loading/circle.html @@ -0,0 +1,149 @@ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/lib/app/views/loading/cube-grid.html b/lib/app/views/loading/cube-grid.html new file mode 100644 index 0000000000..8c9f361059 --- /dev/null +++ b/lib/app/views/loading/cube-grid.html @@ -0,0 +1,86 @@ + + +
+
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/lib/app/views/loading/fading-circle.html b/lib/app/views/loading/fading-circle.html new file mode 100644 index 0000000000..d258a40ebf --- /dev/null +++ b/lib/app/views/loading/fading-circle.html @@ -0,0 +1,163 @@ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/lib/app/views/loading/folding-cube.html b/lib/app/views/loading/folding-cube.html new file mode 100644 index 0000000000..97529be291 --- /dev/null +++ b/lib/app/views/loading/folding-cube.html @@ -0,0 +1,107 @@ + + +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/lib/app/views/loading/hasing-dots.html b/lib/app/views/loading/hasing-dots.html new file mode 100644 index 0000000000..ccc0151d94 --- /dev/null +++ b/lib/app/views/loading/hasing-dots.html @@ -0,0 +1,66 @@ + + + + + \ No newline at end of file diff --git a/lib/app/views/loading/nuxt.html b/lib/app/views/loading/nuxt.html new file mode 100644 index 0000000000..b307a39749 --- /dev/null +++ b/lib/app/views/loading/nuxt.html @@ -0,0 +1,82 @@ + + + + + + \ No newline at end of file diff --git a/lib/app/views/loading/pulse.html b/lib/app/views/loading/pulse.html new file mode 100644 index 0000000000..8bdd1e81b8 --- /dev/null +++ b/lib/app/views/loading/pulse.html @@ -0,0 +1,47 @@ + + + + + \ No newline at end of file diff --git a/lib/app/views/loading/rectangle-bounce.html b/lib/app/views/loading/rectangle-bounce.html new file mode 100644 index 0000000000..2453831f57 --- /dev/null +++ b/lib/app/views/loading/rectangle-bounce.html @@ -0,0 +1,73 @@ + + + + + \ No newline at end of file diff --git a/lib/app/views/loading/rotating-plane.html b/lib/app/views/loading/rotating-plane.html new file mode 100644 index 0000000000..c70e95a5f8 --- /dev/null +++ b/lib/app/views/loading/rotating-plane.html @@ -0,0 +1,43 @@ + + + + + \ No newline at end of file diff --git a/lib/app/views/loading/three-bounce.html b/lib/app/views/loading/three-bounce.html new file mode 100644 index 0000000000..b7f5e3f7f5 --- /dev/null +++ b/lib/app/views/loading/three-bounce.html @@ -0,0 +1,60 @@ + + + + + \ No newline at end of file diff --git a/lib/app/views/loading/wandering-cubes .html b/lib/app/views/loading/wandering-cubes .html new file mode 100644 index 0000000000..94a5263a71 --- /dev/null +++ b/lib/app/views/loading/wandering-cubes .html @@ -0,0 +1,67 @@ + + + + + \ No newline at end of file diff --git a/lib/builder/builder.js b/lib/builder/builder.js index b9fbabcfdc..4b5fa41696 100644 --- a/lib/builder/builder.js +++ b/lib/builder/builder.js @@ -1,6 +1,6 @@ import _ from 'lodash' import chokidar from 'chokidar' -import fs, { remove, readFile, writeFile, mkdirp, utimes } from 'fs-extra' +import fs, { remove, readFile, writeFile, mkdirp, utimes, existsSync } from 'fs-extra' import hash from 'hash-sum' import pify from 'pify' import webpack from 'webpack' @@ -228,7 +228,7 @@ export default class Builder extends Tapable { templateVars.router.routes = this.options.build.createRoutes(this.options.srcDir) } - await this.applyPluginsAsync('extendRoutes', {routes: templateVars.router.routes, templateVars, r}) + await this.applyPluginsAsync('extendRoutes', { routes: templateVars.router.routes, templateVars, r }) // router.extendRoutes method if (typeof this.options.router.extendRoutes === 'function') { @@ -276,6 +276,20 @@ export default class Builder extends Tapable { }, t) })) + // -- Loading indicator -- + if (this.options.loadingIndicator.name) { + const indicatorPath1 = resolve(this.options.nuxtAppDir, 'views/loading', this.options.loadingIndicator.name + '.html') + const indicatorPath2 = this.nuxt.resolvePath(this.options.loadingIndicator.name) + const indicatorPath = existsSync(indicatorPath1) ? indicatorPath1 : (existsSync(indicatorPath2) ? indicatorPath2 : null) + if (indicatorPath) { + templatesFiles.push({ + src: indicatorPath, + dst: 'loading.html', + options: this.options.loadingIndicator + }) + } + } + await this.applyPluginsAsync('generate', { builder: this, templatesFiles, templateVars }) // Interpret and move template files to .nuxt/ diff --git a/lib/common/options.js b/lib/common/options.js index 0f86776561..7b2b34c834 100755 --- a/lib/common/options.js +++ b/lib/common/options.js @@ -52,6 +52,18 @@ Options.from = function (_options) { options.store = true } + // Normalize loadingIndicator + if (!isPureObject(options.loadingIndicator)) { + options.loadingIndicator = { name: options.loadingIndicator } + } + + // Apply defaults to loadingIndicator + options.loadingIndicator = Object.assign({ + name: 'circle', + color: '#222', + background: 'white' + }, options.loadingIndicator) + // Postcss // 1. Check if it is explicitly disabled by false value // ... Disable all postcss loaders @@ -224,6 +236,9 @@ Options.defaults = { height: '2px', duration: 5000 }, + loadingIndicator: { + name: undefined + }, transition: { name: 'page', mode: 'out-in' diff --git a/lib/core/renderer.js b/lib/core/renderer.js index afdef80f14..a1420d0953 100644 --- a/lib/core/renderer.js +++ b/lib/core/renderer.js @@ -97,6 +97,15 @@ export default class Renderer extends Tapable { this.resources.errorTemplate = parseTemplate(fs.readFileSync(errorTemplatePath, 'utf8')) } + // Load loading template + const loadingHTMLPath = resolve(this.options.buildDir, 'loading.html') + if (fs.existsSync(loadingHTMLPath)) { + this.resources.loadingHTML = fs.readFileSync(loadingHTMLPath, 'utf8') + this.resources.loadingHTML = this.resources.loadingHTML.replace(/[\r|\n]/g, '') + } else { + this.resources.loadingHTML = '' + } + if (updated.length > 0) { // debug('Updated', updated.join(', '), isServer) this.createRenderer() @@ -420,7 +429,7 @@ export default class Renderer extends Tapable { HTML_ATTRS: '', BODY_ATTRS: '', HEAD: '', - APP: '
' + APP: `
${this.resources.loadingHTML}
` } if (SPAData) {