reworked grep to max 50 files to open, preview in iframe, store curso…

…r positions if files & history

README.md

@@ -33,3 +33,5 @@ open in your browser http://your-domain/jesed/ link
 #### Troubleshooting
 * for `ENOSPC` error - extend max watches amount
 `echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p`
+* for `EMFILE` error - extend max watches amount
+`echo fs.file-max=10240 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p`

app/helpers.js

@@ -9,6 +9,19 @@ const promisify = (func, that) => (...args) =>
 
 const flatten = arr => arr.reduce((a, i) => a.concat(Array.isArray(i) ? flatten(i) : i), []);
 
+Array.prototype.chunk ||
+Object.defineProperty(Array.prototype, 'chunk', {
+    value: function(chunkSize){
+        if (!chunkSize)
+          return [this];
+        var temporal = [];
+        for (var i = 0; i < this.length; i += chunkSize){
+            temporal.push(this.slice(i, i + chunkSize));
+        }
+        return temporal;
+    }
+});
+
 const getAllFiles = (dir, deep = 999) =>
   promisify(fs.readdir)(dir)
   .then(list => Promise.all(

app/services/editor.js

@@ -60,24 +60,32 @@ const checkChange = (files, dir, name) => {
   return files.filter(i => i.slice(0, file.length) == file).length;
 }
 const findInFile = (file, val) => promisify(fs.readFile)(file).then(text => new RegExp(val).test(text));
-const regexpFolder = (root, val) =>
-  walk(root).then(list => Promise.all(list
-    .filter(i => excludes.indexOf(i) < 0)
-    .map(i => mime(i)
-      .then(m => m.editable && findInFile(i, val))
-      .then(a => a && path.relative(root, i))
-      .catch(e => 0)
-    ))
-  .then(list => list.filter(i => i)))
+
+const inList = (a, ex) => ex.filter(i => a.startsWith(i)).length
+const regexpFolder = (root, val, excludes) =>
+  walk(root)
+  .then(list => list.filter(i => !inList(i, excludes)))
+  .then(list => list.chunk(Math.ceil(list.length / 50)))
+  .then(list => Promise.all(list
+    .map(l =>
+    l.reduce((c, f) =>
+      c.then(ar => mime(f)
+        .then(m => m.editable && findInFile(f, val))
+        .then(a => a && ar.concat(path.relative(root, f)) || ar)
+        .catch(e => ar)
+        )
+    , Promise.resolve([]))))
+  .then(list => list.reduce((a, i) => a.concat(i), [])))
+
 router.get('/tree', function(req, res) {
   var dir = safePath(req.query.id);
   dir = dir == '#' && '/' || dir;
-  excludes = ['.', '..', '.htdigest', 'projects.json'].concat(req.project.excludes || [ '.git', 'node_modules']);
+  var excludes = ['..', '.htdigest', 'projects.json'].concat(req.project.excludes || [ '.git', 'node_modules']);
   const data = getRoot(req)
   .then(root => Promise.all([
-      promisify(fs.readdir)(path.join(root, dir)).then(list => list.filter(name => name && excludes.indexOf(name) < 0)),
+      promisify(fs.readdir)(path.join(root, dir)).then(list => list.filter(name => !inList(name, excludes))),
       promisify(sgit(root).status, sgit(root))(),
-      'g' in req.query && regexpFolder(path.join(root, dir), req.query.g).then(list => list.map(i => path.join(dir, i).slice(1))),
+      'g' in req.query && regexpFolder(path.join(root, dir), req.query.g, excludes).then(list => list.map(i => path.join(dir, i).slice(1))),
     ])
     .then(p => Promise.all(p[0].map(name =>
       mime(path.join(root, dir, name))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jesed",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "online instant collaborative editor",
   "main": "./jesed",
   "scripts": {

static/editor/editor.css

@@ -128,4 +128,51 @@ body {
     bottom: 0;
     left: 0;
     right: 0;
+}
+
+.frame-iframe {
+    width: 1280px;
+    height: 786px;
+    border: 0;
+    -ms-transform: scale(0.5);
+    -moz-transform: scale(0.5);
+    -o-transform: scale(0.5);
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+
+    -ms-transform-origin: 0 0;
+    -moz-transform-origin: 0 0;
+    -o-transform-origin: 0 0;
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    height:100%;
+}
+.frame-cont {
+  width: 640px;
+  height: 200%;
+}
+.frame-reload {
+  width: 5rem;
+  height: 5rem;
+  border: 10px solid #41ccd2;
+  background: #aae2de;
+  border-radius: 5rem;
+  position: absolute;
+  bottom: -2.5rem;
+  right: -2.5rem;
+}
+.frame-wrap {
+    display: none;
+    max-width: 50%;
+    height: 100%;
+    position: fixed;
+    right: 0;
+    top: 0;
+    background: white;
+    overflow: hidden;
+    width: 5%;
+}
+.frame-wrap:hover {
+    width: auto;
+    z-index: 10;
 }

static/editor/editor.js

@@ -11,6 +11,14 @@ $(function(){
 var otI;
 var state;
 var tinySession;
+      function store(name, id, val) {
+        var s = JSON.parse(localStorage.getItem(location.pathname) || '{}')
+        s[name] || (s[name] = {})
+        if (val == undefined)
+          return s[name][id]
+        s[name][id] = val;
+        localStorage.setItem(location.pathname, JSON.stringify(s));
+      }
       function changeName() {
           if(isElectron()) {
             var d = vex.dialog.prompt({
@@ -142,6 +150,13 @@ var tinySession;
             var ob = manager[editor.session.path];
             ob.scrollDown = !ob.scrollDown;
           });
+        button('<i class="fas fa-window-restore"></i>', 'btn-light', 'Set preview URL', function(e) {
+          var frameURL = store('frame', 'url');
+          frameURL = prompt('Insert here url for preview', frameURL);
+          store('frame', 'url', frameURL);
+          $('.frame-iframe').attr('src', frameURL);
+          $('.frame-wrap').toggle(!!frameURL)
+        });
         $(element).append(state = $(' <span class="m-1">Loading...</span>'));
       }
       function syncToggleButtons(editor) {
@@ -272,11 +287,14 @@ var tinySession;
             return
           }
           if (text == 'cursor') {
+            manager[val].loaded &&
+            store('positions', val, editor.getCursorPosition());
             var h = editor.getOption("hasDiff");
             if (h) {
               $('.jesed-diff .btn-secondary').eq(0).toggleClass('disabled', !h.forward);
               $('.jesed-diff .btn-secondary').eq(1).toggleClass('disabled', !h.backward);
             }
+            return
           }
           state.text(text)
         });
@@ -329,11 +347,14 @@ var tinySession;
             editor.setOptions({setBaseText: dataGit[0] })
 if(0)
             editor.setValue(data[0]);
+            manager[theUrl].loaded = 1;
             var path = location.hash.split('#'), pos = (path[2] || '').split(',');
             if (path[1] == editor.session.path)
               setTimeout(function() {editor.gotoLine(pos[0], pos[1]); }, 1000);
-            else
-              editor.gotoLine(0);
+            else {
+              var p = store('positions', theUrl);
+              p && setTimeout(function() {editor.gotoLine(p.row + 1, p.column); }, 1000) || editor.gotoLine(0);
+            }
             editor.getSession()._signal("changeAnnotation", {}); //TODO: bug update
             state.text('opened!');
           },function(data){
@@ -410,6 +431,9 @@ $(function(){
           });
         },
     });
+    $('.frame-reload').on('mouseenter', function() {
+      $('.frame-iframe')[0].src += ''
+    })
     0 &&
     $.ajax('/upnp/check')
     .then(function(data) {

static/editor/fsbrowser.js

@@ -31,10 +31,17 @@ function fsbrowser(ui, services, cb) {
         $('.jesed-grep-on').prop('checked', true);
         grep = v;
         ui.jstree('refresh');
+        addHistory(v);
+      }
+    })
+    function addHistory(v) {
         var h = $('.jesed-grep-history')
         h.find('a').each(function(i){ ($(this).text() == v || i > 5) && $(this).remove()})
         h.prepend('<a class="dropdown-item" href="#">' + v + '</a>');
-      }
+        store('grep','history', h.find('a').map(function(i){ return $(this).text() }).get())
+    }
+    (store('grep','history') || []).map(function(v) {
+      addHistory(v);
     })
     $('.jesed-grep-history').on('click', 'a', function() {
       $('.jesed-grep').val($(this).text()).trigger('change');

static/editor/index.html

@@ -148,5 +148,13 @@ <h4 class="modal-title" id="gitlogModalLabel">List revision of file <span></span
         </div>
 
     <div class="jesed-version" style="position:fixed;bottom:0;"></div>
+    <div class="frame-wrap">
+      <div class="frame-cont">
+        <iframe src="" class="frame-iframe" style=""></iframe>
+      </div>
+      <div class="frame-reload" style="padding: .6rem;">
+        <i class="fa fa-sync"></i>
+      </div>
+    </div>
   </body>
 </html>

static/editor/ot.js

@@ -37,9 +37,9 @@ ace.define("ot", function(require, exports, module) {
           var cli = ss.ot = new ot.Client(0);
           var session = ss.session;
           ss.dc = debounce(scan, 1000);
-          function state(val) {
-            ss.state = val;
-            stateEd(val)
+          function state(id, val) {
+            ss.state = id;
+            stateEd(id, val)
           }
           function onChange(obj) {
             if (self.remoteChange) return;
@@ -74,14 +74,13 @@ ace.define("ot", function(require, exports, module) {
                 var range = sel.getRange();
                 !s.connected && state('diconnected');
                 s.emit('selection', getOtSel(range));
-                state('cursor');
               }
             });
             session.getSelection().on('changeCursor', function(e, sel){
               var range = sel.getRange();
               !s.connected && state('diconnected');
               s.emit('selection', getOtSel(range));
-              state('cursor');
+              state('cursor', dir);
             });
           cli.sendOperation = function (revision, operation) {
             state('sending...')