Merge pull request #21 from goliney/feature/vue

feat(client): Introduce Vuejs

.eslintrc

@@ -8,6 +8,11 @@
         "es6": true
     },
     "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "experimentalObjectRestSpread": true
+        }
+    },
     "rules": {
         "comma-dangle": [
             "error",
@@ -32,6 +37,9 @@
         "no-console": "off"
     },
     "globals": {
-        "ace": true
+        "ace": true,
+        "Vue": true,
+        "ROOT": true,
+        "DEPTH": true
     }
 }

README.md

@@ -93,9 +93,9 @@ Example:
 ```
 
 ### Complex preview
-If you want to include to preview more than just html, you have to create a folder with `index.html` in it. If you
-place any css or javascript files into that folder, they will become a part of a "room", and you will be able to
-switch among them on live presentation.
+If you want to include in preview more than just html, you have to create a folder with `index.html` in it. Place any 
+css or javascript files into that folder, they will become a part of a "room", and you'll be able to switch between 
+them on live presentation.
 
 ## Automation
 - [grunt-coderoom](https://github.com/goliney/grunt-coderoom)

example/source/10__Item 1/index.html

@@ -1 +1 @@
-<h2>This is from index.html</h2>
+<h2>This is from index.html (ITEM 1)</h2>

example/source/20__Folder 1/10__Nested Folder 1/10__Item 2/index.html

@@ -1 +1 @@
-<h2>This is from index.html</h2>
+<h2>This is from index.html (ITEM 2)</h2>

example/source/20__Folder 1/20__Item 3/index.html

@@ -1 +1 @@
-<h2>This is from index.html</h2>
+<h2>This is from index.html (ITEM 3)</h2>

example/source/20__Folder 1/20__Nested Folder 2/10__Item 4/index.html

@@ -1 +1 @@
-<h2>This is from index.html</h2>
+<h2>This is from index.html (ITEM 4)</h2>

example/source/30__Item 5/index.html

@@ -1 +1 @@
-<h2>This is from index.html</h2>
+<h2>This is from index.html (ITEM 5)</h2>

lib/coderoom.js

@@ -172,16 +172,16 @@ function generateHtml() {
                 );
             }
         });
-
-        // entry point index.html
-        fs.writeFileSync(
-            path.join(targetDir, 'index.html'),
-            handlebars.compile(index)({
-                settings,
-                root,
-                config: root.config,
-                depth: 0,
-            })
-        );
     }
+
+    // entry point index.html
+    fs.writeFileSync(
+        path.join(targetDir, 'index.html'),
+        handlebars.compile(index)({
+            settings,
+            root,
+            config: root.config,
+            depth: 0,
+        })
+    );
 }

lib/room.class.js

@@ -68,6 +68,13 @@ module.exports = class Room {
         return assets;
     }
 
+    getStructure() {
+        return {
+            title: this.config.title,
+            items: this.items.map(i => i.getStructure()),
+        };
+    }
+
     get hasFiles() {
         return this.files.length > 0;
     }
@@ -109,6 +116,10 @@ module.exports = class Room {
         });
     }
 
+    get stringifiedStructure() {
+        return JSON.stringify(this.getStructure());
+    }
+
     static parseFilePatterns(patterns) {
         patterns = _.isArray(patterns) ? patterns : [patterns];
         return patterns.reduce((acc, pattern) => {

lib/settings.js

@@ -16,6 +16,7 @@ module.exports = {
         'static/js/vendor/ace/ace.js',
         'static/js/vendor/ace/mode-html.js',
         'static/js/vendor/jquery-2.2.3.min.js',
+        'static/js/vendor/vue-2.2.0.min.js',
         'static/js/base.js',
         'static/js/editor.js',
         'static/js/search.js',

lib/templates/default/scss/_sidebar.scss

@@ -33,7 +33,6 @@
       }
 
       .fa-remove {
-        display: none;
         position: absolute;
         right: 0;
         padding: 0 $sidebar_gutter 0 10px;
@@ -47,13 +46,8 @@
         }
       }
 
-      &.has-query .fa-remove {
-        display: inline-block;
-      }
-
       &:hover .fa-search,
-      &.has-query .fa-search,
-      &.focus .fa-search  { // .focus - not :focus
+      &.active .fa-search  {
         color: $sidebar_color_bright;
       }
 
@@ -124,16 +118,13 @@
     }
   }
 
-  [no-items-label] {
-    display: none;
+  .no-items-label {
     padding: $sidebar_gutter;
     padding-top: $sidebar_gutter * 2;
     font-style: italic;
   }
 
-  &.no-search-results {
-    [no-items-label] {
-      display: block;
-    }
+  &:not(.mounted) .no-items-label {
+    display: none;
   }
 }

lib/templates/default/static/js/base.js

@@ -3,40 +3,29 @@ var editor;
 (function () {
     'use strict';
 
-    var $menuEl = $('#menu');
-    var $contentEl = $('#content');
-    var $editorEl = $('#editor');
-    var $iframeEl = $('#iframe');
-    var $backdrop = $('#backdrop');
+    const $contentEl = $('#content');
+    const $editorEl = $('#editor');
+    const $iframeEl = $('#iframe');
+    const $backdrop = $('#backdrop');
 
-    markActiveMenu();
     activateResizable();
 
-    function markActiveMenu() {
-        var links = $menuEl.find('.link');
-        for (var i = 0; i < links.length; i++) {
-            var href = (links[i].getAttribute('href')).replace(/\.\.\//g, '');
-            if (document.URL.indexOf(href) !== -1) {
-                links[i].classList.add('active');
-            }
-        }
-    }
-
     function activateResizable() {
-        var minWidth = 200;
-        var $handle = $('#resize-handle');
+        const minWidth = 200;
+        const $handle = $('#resize-handle');
+
         $handle.bind('mousedown', function (e) {
-            var initialX;
-            var contentWidth;
-            var iframeWidth;
-            var editorWidth;
+            let initialX = e.pageX;
+            let contentWidth = $contentEl.outerWidth();
+            let iframeWidth = $iframeEl.outerWidth();
+            let editorWidth = $editorEl.outerWidth();
 
             $backdrop.removeClass('hidden');
             $backdrop.bind({
                 mousemove: function (e) {
-                    var delta = initialX - e.pageX;
+                    const delta = initialX - e.pageX;
                     if (editorWidth - delta > minWidth && iframeWidth + delta > minWidth) {
-                        var percentage = (iframeWidth + delta) * 100 / contentWidth;
+                        const percentage = (iframeWidth + delta) * 100 / contentWidth;
                         $iframeEl.css('width', percentage + '%');
                         editor.resize();
                     }
@@ -46,11 +35,6 @@ var editor;
                     $backdrop.addClass('hidden');
                 },
             });
-
-            initialX = e.pageX;
-            contentWidth = $contentEl.outerWidth();
-            iframeWidth = $iframeEl.outerWidth();
-            editorWidth = $editorEl.outerWidth();
         });
     }
 })();