@kumologica/sdk 3.2.0-beta9 → 4.0.0-alpha2

package/src/app/ui/editor-client/src/js/ui/library.js

@@ -1,570 +0,0 @@
-RED.library = (function() {
-  var exportToLibraryDialog;
-  var elementPrefix = 'node-input-';
-
-  var _librarySaveConfirm =
-    '<div id="node-dialog-library-save-confirm" class="hide"><form class="form-horizontal"><div style="text-align: center; padding-top: 30px;" id="node-dialog-library-save-content"></div></form></div>';
-  var _librarySave =
-    '<div id="node-dialog-library-save" class="hide"><form class="form-horizontal"><div class="form-row"><label for="node-dialog-library-save-folder" data-i18n="[append]library.folder"><i class="fa fa-folder-open"></i> </label><input type="text" id="node-dialog-library-save-folder" data-i18n="[placeholder]library.folderPlaceholder"></div><div class="form-row"><label for="node-dialog-library-save-filename" data-i18n="[append]library.filename"><i class="fa fa-file"></i> </label><input type="text" id="node-dialog-library-save-filename" data-i18n="[placeholder]library.filenamePlaceholder"></div></form></div>';
-  var _libraryLookup =
-    '<div id="node-dialog-library-lookup" class="hide"><form class="form-horizontal"><div class="form-row"><ul id="node-dialog-library-breadcrumbs" class="breadcrumb"><li class="active"><a href="#" data-i18n="[append]library.breadcrumb"></a></li></ul></div><div class="form-row"><div style="vertical-align: top; display: inline-block; height: 100%; width: 30%; padding-right: 20px;"><div id="node-select-library" style="border: 1px solid #999; width: 100%; height: 100%; overflow:scroll;"><ul></ul></div></div><div style="vertical-align: top; display: inline-block;width: 65%; height: 100%;"><div style="height: 100%; width: 95%;" class="node-text-editor" id="node-select-library-text" ></div></div></div></form></div>';
-
-  // TODO: Commenting this out, as it is getting invoked in other part and it is not relevant this code anymore
-  function loadFlowLibrary() {
-    // console.log('loadFlowLibrary invoked');
-    // $.getJSON('library/flows', function(data) {
-    //   console.log(data);
-    //   var buildMenu = function(data, root) {
-    //     var i;
-    //     var li;
-    //     var a;
-    //     var ul = document.createElement('ul');
-    //     if (root === '') {
-    //       ul.id = 'menu-item-import-library-submenu';
-    //     }
-    //     ul.className = 'dropdown-menu';
-    //     if (data.d) {
-    //       for (i in data.d) {
-    //         if (data.d.hasOwnProperty(i)) {
-    //           li = document.createElement('li');
-    //           li.className = 'dropdown-submenu pull-left';
-    //           a = document.createElement('a');
-    //           a.href = '#';
-    //           var label = i
-    //             .replace(/^@.*\//, '')
-    //             .replace(/^kumologica-core-contrib-/, '')
-    //             .replace(/^kumologica-core-node-/, '')
-    //             .replace(/-/g, ' ')
-    //             .replace(/_/g, ' ');
-    //           a.innerText = label;
-    //           li.appendChild(a);
-    //           li.appendChild(
-    //             buildMenu(data.d[i], root + (root !== '' ? '/' : '') + i)
-    //           );
-    //           ul.appendChild(li);
-    //         }
-    //       }
-    //     }
-    //     if (data.f) {
-    //       for (i in data.f) {
-    //         if (data.f.hasOwnProperty(i)) {
-    //           li = document.createElement('li');
-    //           a = document.createElement('a');
-    //           a.href = '#';
-    //           a.innerText = data.f[i];
-    //           a.flowName = root + (root !== '' ? '/' : '') + data.f[i];
-    //           a.onclick = function() {
-    //             $.get('library/flows/' + this.flowName, function(data) {
-    //               RED.view.importNodes(data);
-    //             });
-    //           };
-    //           li.appendChild(a);
-    //           ul.appendChild(li);
-    //         }
-    //       }
-    //     }
-    //     return ul;
-    //   };
-    //   var examples;
-    //   if (data.d && data.d._examples_) {
-    //     examples = data.d._examples_;
-    //     delete data.d._examples_;
-    //   }
-    //   var menu = buildMenu(data, '');
-    //   $('#menu-item-import-examples').remove();
-    //   if (examples) {
-    //     RED.menu.addItem('menu-item-import', {
-    //       id: 'menu-item-import-examples',
-    //       label: RED._('menu.label.examples'),
-    //       options: []
-    //     });
-    //     $('#menu-item-import-examples-submenu').replaceWith(
-    //       buildMenu(examples, '_examples_')
-    //     );
-    //   }
-    //   //TODO: need an api in RED.menu for this
-    //   $('#menu-item-import-library-submenu').replaceWith(menu);
-    // });
-  }
-
-  function createUI(options) {
-    var libraryData = {};
-    var selectedLibraryItem = null;
-    var libraryEditor = null;
-    elementPrefix = options.elementPrefix || 'node-input-';
-
-    // Orion editor has set/getText
-    // ACE editor has set/getValue
-    // normalise to set/getValue
-    if (options.editor.setText) {
-      // Orion doesn't like having pos passed in, so proxy the call to drop it
-      options.editor.setValue = function(text, pos) {
-        options.editor.setText.call(options.editor, text);
-      };
-    }
-    if (options.editor.getText) {
-      options.editor.getValue = options.editor.getText;
-    }
-
-    function buildFileListItem(item) {
-      var li = document.createElement('li');
-      li.onmouseover = function(e) {
-        $(this).addClass('list-hover');
-      };
-      li.onmouseout = function(e) {
-        $(this).removeClass('list-hover');
-      };
-      return li;
-    }
-
-    function buildFileList(root, data) {
-      var ul = document.createElement('ul');
-      var li;
-      for (var i = 0; i < data.length; i++) {
-        var v = data[i];
-        if (typeof v === 'string') {
-          // directory
-          li = buildFileListItem(v);
-          li.onclick = (function() {
-            var dirName = v;
-            return function(e) {
-              var bcli = $(
-                '<li class="active"><span class="divider">/</span> </li>'
-              );
-              $('<a href="#"></a>')
-                .text(dirName)
-                .appendTo(bcli)
-                .click(function(e) {
-                  $(this)
-                    .parent()
-                    .nextAll()
-                    .remove();
-                  $.getJSON('library/' + options.url + root + dirName, function(
-                    data
-                  ) {
-                    $('#node-select-library')
-                      .children()
-                      .first()
-                      .replaceWith(buildFileList(root + dirName + '/', data));
-                  });
-                  e.stopPropagation();
-                });
-              var bc = $('#node-dialog-library-breadcrumbs');
-              $('.active', bc).removeClass('active');
-              bc.append(bcli);
-              $.getJSON('library/' + options.url + root + dirName, function(
-                data
-              ) {
-                $('#node-select-library')
-                  .children()
-                  .first()
-                  .replaceWith(buildFileList(root + dirName + '/', data));
-              });
-            };
-          })();
-          $('<i class="fa fa-folder"></i>').appendTo(li);
-          $('<span>')
-            .text(' ' + v)
-            .appendTo(li);
-          ul.appendChild(li);
-        } else {
-          // file
-          li = buildFileListItem(v);
-          li.innerText = v.name;
-          li.onclick = (function() {
-            var item = v;
-            return function(e) {
-              $('.list-selected', ul).removeClass('list-selected');
-              $(this).addClass('list-selected');
-              $.get('library/' + options.url + root + item.fn, function(data) {
-                selectedLibraryItem = item;
-                libraryEditor.setValue(data, -1);
-              });
-            };
-          })();
-          ul.appendChild(li);
-        }
-      }
-      return ul;
-    }
-
-    $('#' + elementPrefix + 'name')
-      .css('width', 'calc(100% - 52px)')
-      .after(
-        '<div class="btn-group" style="margin-left:5px;">' +
-          '<a id="node-input-' +
-          options.type +
-          '-lookup" class="editor-button" data-toggle="dropdown"><i class="fa fa-book"></i> <i class="fa fa-caret-down"></i></a>' +
-          '<ul class="dropdown-menu pull-right" role="menu">' +
-          '<li><a id="node-input-' +
-          options.type +
-          '-menu-open-library" tabindex="-1" href="#">' +
-          'Open Library' +
-          '</a></li>' +
-          '<li><a id="node-input-' +
-          options.type +
-          '-menu-save-library" tabindex="-1" href="#">' +
-          'Save to Library...' +
-          '</a></li>' +
-          '</ul></div>'
-      );
-
-    $('#node-input-' + options.type + '-menu-open-library').click(function(e) {
-      $('#node-select-library')
-        .children()
-        .remove();
-      var bc = $('#node-dialog-library-breadcrumbs');
-      bc.children()
-        .first()
-        .nextAll()
-        .remove();
-      libraryEditor.setValue('', -1);
-
-      $.getJSON('library/' + options.url, function(data) {
-        $('#node-select-library').append(buildFileList('/', data));
-        $('#node-dialog-library-breadcrumbs a').click(function(e) {
-          $(this)
-            .parent()
-            .nextAll()
-            .remove();
-          $('#node-select-library')
-            .children()
-            .first()
-            .replaceWith(buildFileList('/', data));
-          e.stopPropagation();
-        });
-        $('#node-dialog-library-lookup').dialog('open');
-      });
-
-      e.preventDefault();
-    });
-
-    $('#node-input-' + options.type + '-menu-save-library').click(function(e) {
-      //var found = false;
-      var name = $('#' + elementPrefix + 'name')
-        .val()
-        .replace(/(^\s*)|(\s*$)/g, '');
-
-      //var buildPathList = function(data,root) {
-      //    var paths = [];
-      //    if (data.d) {
-      //        for (var i in data.d) {
-      //            var dn = root+(root==""?"":"/")+i;
-      //            var d = {
-      //                label:dn,
-      //                files:[]
-      //            };
-      //            for (var f in data.d[i].f) {
-      //                d.files.push(data.d[i].f[f].fn.split("/").slice(-1)[0]);
-      //            }
-      //            paths.push(d);
-      //            paths = paths.concat(buildPathList(data.d[i],root+(root==""?"":"/")+i));
-      //        }
-      //    }
-      //    return paths;
-      //};
-      $('#node-dialog-library-save-folder').attr('value', '');
-
-      var filename = name.replace(/[^\w-]/g, '-');
-      if (filename === '') {
-        filename = 'unnamed-' + options.type;
-      }
-      $('#node-dialog-library-save-filename').attr('value', filename + '.js');
-
-      //var paths = buildPathList(libraryData,"");
-      //$("#node-dialog-library-save-folder").autocomplete({
-      //        minLength: 0,
-      //        source: paths,
-      //        select: function( event, ui ) {
-      //            $("#node-dialog-library-save-filename").autocomplete({
-      //                    minLength: 0,
-      //                    source: ui.item.files
-      //            });
-      //        }
-      //});
-
-      $('#node-dialog-library-save').dialog('open');
-      e.preventDefault();
-    });
-
-    libraryEditor = ace.edit('node-select-library-text');
-    libraryEditor.setTheme('ace/theme/tomorrow');
-    if (options.mode) {
-      libraryEditor.getSession().setMode(options.mode);
-    }
-    libraryEditor.setOptions({
-      readOnly: true,
-      highlightActiveLine: false,
-      highlightGutterLine: false
-    });
-    libraryEditor.renderer.$cursorLayer.element.style.opacity = 0;
-    libraryEditor.$blockScrolling = Infinity;
-
-    $('#node-dialog-library-lookup').dialog({
-      title: `${options.type} library`,
-      modal: true,
-      autoOpen: false,
-      width: 800,
-      height: 450,
-      buttons: [
-        {
-          text: 'Cancel',
-          click: function() {
-            $(this).dialog('close');
-          }
-        },
-        {
-          text: 'Load',
-          class: 'primary',
-          click: function() {
-            if (selectedLibraryItem) {
-              for (var i = 0; i < options.fields.length; i++) {
-                var field = options.fields[i];
-                $('#' + elementPrefix + field).val(selectedLibraryItem[field]);
-              }
-              options.editor.setValue(libraryEditor.getValue(), -1);
-            }
-            $(this).dialog('close');
-          }
-        }
-      ],
-      open: function(e) {
-        var form = $('form', this);
-        form.height(form.parent().height() - 30);
-        $('#node-select-library-text').height('100%');
-        $('.form-row:last-child', form)
-          .children()
-          .height(form.height() - 60);
-      },
-      resize: function(e) {
-        var form = $('form', this);
-        form.height(form.parent().height() - 30);
-        $('.form-row:last-child', form)
-          .children()
-          .height(form.height() - 60);
-      }
-    });
-
-    function saveToLibrary(overwrite) {
-      var name = $('#' + elementPrefix + 'name')
-        .val()
-        .replace(/(^\s*)|(\s*$)/g, '');
-      if (name === '') {
-        name = `Unnamed ${options.type}`;
-      }
-      var filename = $('#node-dialog-library-save-filename')
-        .val()
-        .replace(/(^\s*)|(\s*$)/g, '');
-      var pathname = $('#node-dialog-library-save-folder')
-        .val()
-        .replace(/(^\s*)|(\s*$)/g, '');
-      if (filename === '' || !/.+\.js$/.test(filename)) {
-        RED.notify('Invalid filename', 'warning');
-        return;
-      }
-      var fullpath = pathname + (pathname === '' ? '' : '/') + filename;
-      if (!overwrite) {
-        //var pathnameParts = pathname.split("/");
-        //var exists = false;
-        //var ds = libraryData;
-        //for (var pnp in pathnameParts) {
-        //    if (ds.d && pathnameParts[pnp] in ds.d) {
-        //        ds = ds.d[pathnameParts[pnp]];
-        //    } else {
-        //        ds = null;
-        //        break;
-        //    }
-        //}
-        //if (ds && ds.f) {
-        //    for (var f in ds.f) {
-        //        if (ds.f[f].fn == fullpath) {
-        //            exists = true;
-        //            break;
-        //        }
-        //    }
-        //}
-        //if (exists) {
-        //    $("#node-dialog-library-save-content").html(RED._("library.dialogSaveOverwrite",{libraryType:options.type,libraryName:fullpath}));
-        //    $("#node-dialog-library-save-confirm").dialog( "open" );
-        //    return;
-        //}
-      }
-      var queryArgs = [];
-      var data = {};
-      for (var i = 0; i < options.fields.length; i++) {
-        var field = options.fields[i];
-        if (field == 'name') {
-          data.name = name;
-        } else {
-          data[field] = $('#' + elementPrefix + field).val();
-        }
-      }
-
-      data.text = options.editor.getValue();
-      $.ajax({
-        url: 'library/' + options.url + '/' + fullpath,
-        type: 'POST',
-        data: JSON.stringify(data),
-        contentType: 'application/json; charset=utf-8'
-      })
-        .done(function(data, textStatus, xhr) {
-          RED.notify(`Saved ${options.type}`, 'success');
-        })
-        .fail(function(xhr, textStatus, err) {
-          if (xhr.status === 401) {
-            RED.notify('Save failed: user not authorized', 'error');
-          } else {
-            RED.notify(`Save failed: ${xht.responseText}`, 'error');
-          }
-        });
-    }
-    $('#node-dialog-library-save-confirm').dialog({
-      title: 'Save to Library...',
-      modal: true,
-      autoOpen: false,
-      width: 530,
-      height: 230,
-      buttons: [
-        {
-          text: 'Cancel',
-          click: function() {
-            $(this).dialog('close');
-          }
-        },
-        {
-          text: 'Save',
-          class: 'primary',
-          click: function() {
-            saveToLibrary(true);
-            $(this).dialog('close');
-          }
-        }
-      ]
-    });
-    $('#node-dialog-library-save').dialog({
-      title: 'Save to Library...',
-      modal: true,
-      autoOpen: false,
-      width: 530,
-      height: 230,
-      buttons: [
-        {
-          text: 'Cancel',
-          click: function() {
-            $(this).dialog('close');
-          }
-        },
-        {
-          text: 'Save',
-          class: 'primary',
-          click: function() {
-            saveToLibrary(false);
-            $(this).dialog('close');
-          }
-        }
-      ]
-    });
-  }
-
-  function exportFlow() {
-    //TODO: don't rely on the main dialog
-    var nns = RED.nodes.createExportableNodeSet(RED.view.selection().nodes);
-    $('#node-input-library-filename').attr('nodes', JSON.stringify(nns));
-    exportToLibraryDialog.dialog('open');
-  }
-
-  return {
-    init: function() {
-      $(_librarySave).appendTo(document.body);
-      $(_librarySaveConfirm).appendTo(document.body);
-      $(_libraryLookup).appendTo(document.body);
-
-      RED.actions.add('core:library-export', exportFlow);
-
-      RED.events.on('view:selection-changed', function(selection) {
-        if (!selection.nodes) {
-          RED.menu.setDisabled('menu-item-export-library', true);
-        } else {
-          RED.menu.setDisabled('menu-item-export-library', false);
-        }
-      });
-
-      if (RED.settings.theme('menu.menu-item-import-library') !== false) {
-        loadFlowLibrary();
-      }
-
-      exportToLibraryDialog = $(
-        '<div id="library-dialog" class="hide"><form class="dialog-form form-horizontal"></form></div>'
-      )
-        .appendTo('body')
-        .dialog({
-          modal: true,
-          autoOpen: false,
-          width: 500,
-          resizable: false,
-          title: 'Export nodes to library',
-          buttons: [
-            {
-              id: 'library-dialog-cancel',
-              text: 'Cancel',
-              click: function() {
-                $(this).dialog('close');
-              }
-            },
-            {
-              id: 'library-dialog-ok',
-              class: 'primary',
-              text: 'Export',
-              click: function() {
-                //TODO: move this to RED.library
-                var flowName = $('#node-input-library-filename').val();
-                flowName = flowName.trim();
-                if (flowName === '' || flowName.endsWith('/')) {
-                  RED.notify('Invalid file name', 'warning');
-                } else {
-                  $.ajax({
-                    url: 'library/flows/' + flowName,
-                    type: 'POST',
-                    data: $('#node-input-library-filename').attr('nodes'),
-                    contentType: 'application/json; charset=utf-8'
-                  })
-                    .done(function() {
-                      //RED.library.loadFlowLibrary();
-                      //RED.notify(RED._('library.savedNodes'), 'success');
-                    })
-                    .fail(function(xhr, textStatus, err) {
-                      if (xhr.status === 401) {
-                        RED.notify('Save failed: user not authorized','error');
-                      } else {
-                        RED.notify(`Save failed ${xhr.responseText}`,'error');
-                      }
-                    });
-                }
-                $(this).dialog('close');
-              }
-            }
-          ],
-          open: function(e) {
-            $(this)
-              .parent()
-              .find('.ui-dialog-titlebar-close')
-              .hide();
-          },
-          close: function(e) {}
-        });
-      exportToLibraryDialog.children('.dialog-form').append(
-        $(
-          '<div class="form-row">' +
-          '<label for="node-input-library-filename" data-i18n="[append]editor:library.filename"><i class="fa fa-file"></i> </label>' +
-          '<input type="text" id="node-input-library-filename" data-i18n="[placeholder]editor:library.fullFilenamePlaceholder">' +
-          '<input type="text" style="display: none;" />' + // Second hidden input to prevent submit on Enter
-            '</div>'
-        )
-      );
-    },
-    create: createUI,
-    loadFlowLibrary: loadFlowLibrary,
-
-    export: exportFlow
-  };
-})();