add css, Lsx class

packages/growi-plugin-lsx/package.json

@@ -8,6 +8,7 @@
   ],
   "scripts": {
     "build": "NODE_ENV=production babel src --out-dir lib --source-maps inline",
+    "postbuild": "ncp 'src/resource/css' lib/resource/css",
     "watch": "babel src --out-dir lib --watch --source-maps inline",
     "test": "mocha --compilers js:babel-register test/*.js"
   },
@@ -21,12 +22,16 @@
     "url": "https://github.com/yuki-takei/crowi-plugin-lsx/issues"
   },
   "homepage": "https://github.com/yuki-takei/crowi-plugin-lsx#readme",
+  "dependencies": {
+    "string-replace-async": "^1.2.0"
+  },
   "devDependencies": {
     "babel-cli": "^6.23.0",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-preset-es2015": "^6.22.0",
     "babel-preset-power-assert": "^1.0.0",
     "babel-register": "^6.23.0",
+    "ncp": "^2.0.0",
     "power-assert": "^1.4.2"
   }
 }

packages/growi-plugin-lsx/src/client-entry.js

@@ -1,6 +1,10 @@
 import { LsxPreProcessor } from './resource/js/util/PreProcessor/LsxPreProcessor';
 
 export default (crowi, crowiRenderer) => {
+  // import css
+  require('./resource/css/index.css');
+
+  // add preprocessor
   crowiRenderer.preProcessors = crowiRenderer.preProcessors.concat(
         crowiRenderer.preProcessors, [new LsxPreProcessor()]);
 }

packages/growi-plugin-lsx/src/lib/routes/index.js

@@ -1,4 +1,4 @@
-module.exports = function(crowi, app) {
+module.exports = (crowi, app) => {
   var debug = require('debug')('crowi-plugin:lsx:routes')
     , middleware = crowi.require('../util/middlewares')
     , lsx = require('./lsx')(crowi, app)

packages/growi-plugin-lsx/src/lib/routes/lsx.js

@@ -1,47 +1,21 @@
-module.exports = function(crowi, app) {
+module.exports = (crowi, app) => {
   var debug = require('debug')('crowi-plugin:lsx:routes:lsx')
     , path = require('path')
-    , Page = crowi.model('Page')
+    , Lsx = require('../util/Lsx')
+    , lsx = new Lsx(crowi, app)
     , actions = {};
 
-  actions.renderHtml = function(req, res) {
+  actions.renderHtml = (req, res) => {
     var currentPath = req.query.currentPath;
     var args = req.query.args;
 
-    debug(`rendering html for currentPath='${currentPath}', args='${args}'`);
-
-    // TODO try-catch
-
-    // create {Key: Value} Objects
-    var splittedArgs = args.split(',');
-    var lsxOptions = {};
-    splittedArgs.forEach(function(arg) {
-      // see https://regex101.com/r/pYHcOM/1
-      var match = arg.match(/([^=]+)=?(.+)?/);
-      var value = match[2] || true;
-      lsxOptions[match[1]] = value;
-    });
-
-    // determine prefix
-    // 'prefix=foo' pattern or the first argument
-    var lsxPrefix = lsxOptions.prefix || splittedArgs[0];
-    // resolve path
-    var pagePath = path.resolve(currentPath, lsxPrefix);
-    var queryOptions = {}
-
-    // find pages
-    Page.findListByStartWith(pagePath, req.user, queryOptions)
-      .then(function(pages) {
-        var renderVars = {};
-        renderVars.pages = pages;
-        renderVars.pager = false
-        renderVars.viewConfig = {};
-
-        // render widget
-        res.render('widget/page_list', renderVars);
+    lsx.renderHtml
+      .then((html) => {
+        res.send(html);
       })
-      .catch(function(err) {
+      .catch((err) => {
         debug('Error on rendering lsx.renderHtml', err);
+        res.send(err);
       });
   }
 

packages/growi-plugin-lsx/src/lib/util/Lsx.js

@@ -0,0 +1,56 @@
+const debug = require('debug')('crowi-plugin:lsx:util:lsx');
+const path = require('path');
+
+class Lsx {
+
+  constructor(crowi, app) {
+    this.crowi = crowi;
+    this.app = app;
+  }
+
+  renderHtml(user, currentPath, args) {
+    debug(`rendering html for currentPath='${currentPath}', args='${args}'`);
+
+    // TODO try-catch
+
+    // create {Key: Value} Objects
+    const splittedArgs = args.split(',');
+    let lsxOptions = {};
+    splittedArgs.forEach((arg) => {
+      // see https://regex101.com/r/pYHcOM/1
+      const match = arg.match(/([^=]+)=?(.+)?/);
+      const value = match[2] || true;
+      lsxOptions[match[1]] = value;
+    });
+
+    // determine prefix
+    // 'prefix=foo' pattern or the first argument
+    const lsxPrefix = lsxOptions.prefix || splittedArgs[0];
+    // resolve path
+    const pagePath = path.resolve(currentPath, lsxPrefix);
+    const queryOptions = {}
+
+    // find pages
+    const Page = this.crowi.model('Page');
+    return Page.findListByStartWith(pagePath, user, queryOptions)
+      .then((pages) => {
+        let renderVars = {};
+        renderVars.pages = pages;
+        renderVars.pager = false
+        renderVars.viewConfig = {};
+
+        // app.render widget
+        return new Promise((resolve, reject) => {
+          this.app.render('widget/page_list', renderVars, (err, html) => {
+            if (err) {
+              reject(err);
+            }
+            resolve(html);
+          });
+        });
+      });
+  }
+
+}
+
+module.exports = Lsx;

packages/growi-plugin-lsx/src/resource/css/index.css

@@ -0,0 +1,8 @@
+.lsx-blink {
+  animation: lsx-fadeIn 1s ease 0s infinite alternate;
+}
+
+@keyframes lsx-fadeIn {
+  0% {opacity: .2}
+  100% {opacity: .9}
+}

packages/growi-plugin-lsx/src/resource/js/util/PreProcessor/LsxPreProcessor.js

@@ -1,5 +1,8 @@
+const stringReplaceAsync = require('string-replace-async');
+
 // TODO change to PostProcessor
 export class LsxPreProcessor {
+
   process(markdown) {
     // get current path from window.location
     let currentPath = window.location.pathname;
@@ -7,9 +10,14 @@ export class LsxPreProcessor {
     return markdown
       // see: https://regex101.com/r/NQq3s9/2
       .replace(/\$lsx\((.*)\)/g, (all, group1) => {
-        // TODO create hash
-        let replacementId = 'key_created_by_currentPath_and_args';
 
+        const storedItem = sessionStorage.getItem(all);
+        if (storedItem) {
+          return storedItem;
+        }
+
+        const tempHtml = '<i class="fa fa-spinner fa-pulse fa-fw"></i>'
+           + `<span class="lsx-blink">${all}</span>`;
         /*
          * TODO regist post processor
          *
@@ -21,7 +29,7 @@ export class LsxPreProcessor {
             console.error(data);
           });
          */
-        return `$$crowi-plugin-lsx$${replacementId}`;
+        return tempHtml;
       });
   }
 }