impl gallery tag

packages/growi-plugin-attachment-refs/README.md

@@ -89,16 +89,15 @@ $refimg(pict.png, width=50%, alt=Pic)
 
 ```
 $refsimg(/somewhere/page, regexp=/^.*\.png$/, max-width=200)
+$refsimg(prefix=/somewhere, grid=autofill, grid-gap=1px)
 ```
 
 #### Output
 
 ```html
-<ul>
-  <li><img src="/attachment/xxxxx" style="max-width: 200"></li>
-  <li><img src="/attachment/yyyyy" style="max-width: 200"></li>
-  <li><img src="/attachment/zzzzz" style="max-width: 200"></li>
-</ul>
+<div><img src="/attachment/xxxxx" style="max-width: 200"></div>
+<div><img src="/attachment/yyyyy" style="max-width: 200"></div>
+<div><img src="/attachment/zzzzz" style="max-width: 200"></div>
 ```
 
 #### Options
@@ -132,6 +131,31 @@ $refsimg(/somewhere/page, regexp=/^.*\.png$/, max-width=200)
   - e.g. `grid-gap=1px`
 - *`no-carousel`* : Omit carousel function and just show images
 
+
+### `gallery` tag
+
+#### Syntax
+
+```
+$gallery(prefix=/somewhere/page)
+```
+
+`gallery` is a Grid Mode Sugar Syntax for `refsimg`.  
+This is same to:
+
+```
+$refsimg(prefix=/somewhere, grid=col-4, grid-gap=1px)
+```
+
+#### Output
+
+```html
+<div><img src="/attachment/xxxxx" style="max-width: 200"></div>
+<div><img src="/attachment/yyyyy" style="max-width: 200"></div>
+<div><img src="/attachment/zzzzz" style="max-width: 200"></div>
+```
+
+
 TODO
 -----
 

packages/growi-plugin-attachment-refs/src/client/js/util/GalleryContext.js

@@ -0,0 +1,24 @@
+import RefsContext from './RefsContext';
+
+/**
+ * Context Object class for $gallery()
+ */
+export default class GalleryContext extends RefsContext {
+
+  /**
+   * @param {object|TagContext|RefsContext} initArgs
+   */
+  constructor(initArgs, fromPagePath) {
+    super(initArgs);
+
+    this.options = {
+      grid: 'col-4',
+      'grid-gap': '1px',
+    };
+  }
+
+  get isExtractImg() {
+    return true;
+  }
+
+}

packages/growi-plugin-attachment-refs/src/client/js/util/Interceptor/RefsPostRenderInterceptor.js

@@ -4,6 +4,8 @@ import ReactDOM from 'react-dom';
 import { BasicInterceptor } from 'growi-commons';
 
 import RefsContext from '../RefsContext';
+import GalleryContext from '../GalleryContext';
+
 import AttachmentList from '../../components/AttachmentList';
 
 /**
@@ -34,13 +36,17 @@ export default class RefsPostRenderInterceptor extends BasicInterceptor {
   process(contextName, ...args) {
     const context = Object.assign(args[0]); // clone
 
-    // forEach keys of refsContextMap
-    Object.keys(context.refsContextMap).forEach((domId) => {
+    // forEach keys of tagContextMap
+    Object.keys(context.tagContextMap).forEach((domId) => {
       const elem = document.getElementById(domId);
 
       if (elem) {
+        const tagContext = context.tagContextMap[domId];
+
         // instanciate RefsContext from context
-        const refsContext = new RefsContext(context.refsContextMap[domId] || {});
+        const refsContext = (tagContext.method === 'gallery')
+          ? new GalleryContext(tagContext || {})
+          : new RefsContext(tagContext || {});
         refsContext.fromPagePath = context.currentPagePath;
 
         this.renderReactDom(refsContext, elem);

packages/growi-plugin-attachment-refs/src/client/js/util/Interceptor/RefsPreRenderInterceptor.js

@@ -34,11 +34,11 @@ export default class RefsPreRenderInterceptor extends BasicInterceptor {
     const parsedHTML = context.parsedHTML;
     this.initializeCache(contextName);
 
-    const tagPattern = /ref|refs|refimg|refsimg/;
+    const tagPattern = /ref|refs|refimg|refsimg|gallery/;
     const result = customTagUtils.findTagAndReplace(tagPattern, parsedHTML);
 
     context.parsedHTML = result.html;
-    context.refsContextMap = result.tagContextMap;
+    context.tagContextMap = result.tagContextMap;
 
     return context;
   }

packages/growi-plugin-attachment-refs/src/client/js/util/RefsContext.js

@@ -52,7 +52,7 @@ export default class RefsContext extends TagContext {
     }
 
     const parsedArgs = ArgsParser.parse(this.args);
-    this.options = parsedArgs.options;
+    this.options = Object.assign(this.options, parsedArgs.options);
 
     if (this.isSingle) {
       this.parseForSingle(parsedArgs);