show shortcuts to repo on home page

html/index.mustache.html

@@ -27,7 +27,7 @@
         <div id="nav-menus">
             <div id="menu-repo" class="pure-g">
               <div class="pure-u-1">
-                <span class="cat-title">Collections d'exemples</span>
+                <span class="cat-title">{{_.exampleCollections}}</span>
                 <ul class="nav-menu">{{#menuRepo}}
                   <li><a href="/{{slug}}">{{title}}</a></li>{{/menuRepo}}
                 </ul>
@@ -56,13 +56,18 @@
               {{/repo}}
               </section>
               <section id="add-repo" class="inline-block">
-                <button class="add-btn inline-block h-collapsed fast in"><span class="icon-plus rounded"></span></button>
+                <button class="add-btn inline-block h-collapsed light-gray fast in"><span class="icon-plus"></span> {{_.addCollection}}</button>
                 <form class="inline-block h-collapsed">
                     <input type="text" name="title" class="input-sm" value="" placeholder="{{_.collectionName}}" required />
                     <button type="button" class="icon-cross rounded"></button><!--
                     --><button type="submit" class="icon-checkmark rounded"></button>
                 </form>
               </section>
+              <section id="shortcut-repo"{{#repo}} class="hidden"{{/repo}}>
+                <h3>{{_.exampleCollections}}</h3><ul>{{#menuRepo}}
+                  <li><a href="/{{slug}}">{{title}}</a></li>{{/menuRepo}}
+                </ul>
+              </section>
             </div>
 
             <div>
@@ -72,11 +77,11 @@
               {{/example}}
               </section>
               <section id="add-example" class="inline-block">
-                <button class="add-btn inline-block h-collapsed fast{{#repo}} in{{/repo}}"><span class="icon-plus rounded"></span></button>
+                <button class="add-btn inline-block h-collapsed light-gray fast{{#repo}} in{{/repo}}"><span class="icon-plus"> {{_.addExample}}</span></button>
                 <form class="inline-block h-collapsed">
                     <input type="text" name="title" class="input-sm" value="" placeholder="{{_.exampleName}}" required />
-                    <button type="button" id="add-example-cancel" class="icon-cross rounded red"></button><!--
-                    --><button type="submit" id="add-example-save" class="icon-checkmark rounded green"></button>
+                    <button type="button" id="add-example-cancel" class="icon-cross rounded"></button><!--
+                    --><button type="submit" id="add-example-save" class="icon-checkmark rounded"></button>
                 </form>
               </section>
             </div>
@@ -148,6 +153,13 @@
   <strong>{{_.collection}} </strong><span>{{title}}</span>
 {{/repo}}
 </script>
+
+<script data-tmpl-for="shortcut-repo" type="text/x-mustache-tmpl">
+  <h3>{{_.exampleCollections}}</h3><ul>{{#repos}}
+    <li><a href="/{{slug}}">{{title}}</a></li>{{/repos}}
+  </ul>
+</script>
+
 <%={{ }}=%>
 
 <!-- Vendor scripts -->
@@ -167,6 +179,8 @@
 window._ws = {
   files: {{{filesJSON}}},
   repo: {{{repoJSON}}},
+  repos: {{{reposJSON}}},
+  _: {{{_JSON}}},
   example: {{{exampleJSON}}}
 };
 </script>

js/ws-menu.js

@@ -64,6 +64,7 @@
           _ws.ui.addExample.$btn.removeClass('in');
           _ws.ui.addExample.hide();
           _ws.ui.menuExample.render({ examples: [] });
+          _ws.ui.shortcutRepo.render({ repos: _ws.repos, _: _ws._ });
         }
         else {
           console.log('nav: repo changed');
@@ -76,6 +77,7 @@
             _ws.ui.addExample.show();
             _ws.ui.detailsRepo.render(parts);
             _ws.ui.menuExample.render(parts);
+            _ws.ui.shortcutRepo.hide();
             _ws.events.emit('navToRepo', navState.repo);
           });
         }
@@ -122,6 +124,13 @@
       }
     });
 
+    _ws.makeView('shortcut-repo', {
+      events: {
+        'click a': menuItemClicked
+      }
+    });
+
+
 
     /**
      * Initialize menu-example view

js/ws-ui-parts.js

@@ -23,6 +23,7 @@
         }
         this.$elem.empty();
         this.$elem.html( Mustache.render( this.tmpl, data ) );
+        this.$elem.removeClass('hidden');
         this.$elem.show();
         this.bindEvents();
       }
@@ -67,6 +68,7 @@
      * Show view element
      */
     function viewElemShow() {
+      this.$elem.removeClass('hidden');
       this.$elem.show();
     }
 
@@ -75,6 +77,7 @@
      * Hide view element
      */
     function hideElemShow() {
+      this.$elem.addClass('hidden');
       this.$elem.hide();
     }
 

languages/en-US.json

@@ -2,10 +2,12 @@
   "home": "Home",
   "repoNotFound": "Example collection `%s` not found",
   "exampleNotFound": "Example `%s/%s` not found",
-  "add": "Add",
+  "addCollection": "Add collection",
+  "addExample": "Add example",
   "exampleName": "Example name",
   "collectionName": "Collection name",
   "collection": "Collection:",
   "example": "Example:",
-  "fileNameWithExt": "File name"
+  "fileNameWithExt": "File name",
+  "exampleCollections": "Exameple collections"
 }

languages/fr-FR.json

@@ -2,10 +2,12 @@
   "home": "Accueil",
   "repoNotFound": "Collection d'exemples `%s` introuvable",
   "exampleNotFound": "Exemple `%s/%s` introuvable",
-  "add": "Ajouter",
+  "addCollection": "Ajouter collection",
+  "addExample": "Ajouter exemple",
   "exampleName": "Nom de l'exemple",
   "collectionName": "Nom de la collection",
   "collection": "Collection :",
   "example": "Exemple :",
-  "fileNameWithExt": "Nom de fichier"
+  "fileNameWithExt": "Nom de fichier",
+  "exampleCollections": "Collections d'exemples"
 }

lib/indexHandlers.js

@@ -42,16 +42,20 @@ module.exports = function(exStore, exDir, testMode) {
     let repo;
     let menuExample;
     let statusCode;
+    const menuRepo = exStore.getRepoMenu();
+    const translations = translator.getAll(locale);
 
     // Initialize view data
     let data = {
-      menuRepo: exStore.getRepoMenu(),
+      menuRepo,
+      reposJSON: JSON.stringify(menuRepo),
       repoJSON: 'null',
       exampleJSON: 'null',
       testMode,
       testRun: testMode && req.query.testing,
       appPath: req.path,
-      _: translator.getAll(locale)
+      _: translations,
+      _JSON: JSON.stringify(translations)
     };
 
     // Fetch example repository if needed