Merge pull request #312 from dozoisch/build_tools

Changed the way scripts are loaded into page

.eslintignore

@@ -1,2 +1,3 @@
-public/**
 node_modules/**
+build/**
+lib/views/**

.eslintrc.js

@@ -41,7 +41,13 @@ module.exports = {
     "padded-blocks": ["off"],
     "no-underscore-dangle": ["off"],
 
-    "import/no-extraneous-dependencies": ["error", {"devDependencies": ["**/test/*.js"]}],
+    "import/no-extraneous-dependencies": ["error", {
+      "devDependencies": [
+        "**/test/*.js",
+        "**/scripts/*.js",
+        "**/webpack.config.js",
+      ]
+    }],
 
     "lodash/callback-binding": ["error"],
     "lodash/collection-method-value": ["error"],

.gitignore

@@ -1,3 +1,5 @@
+build-assets.json
+
 # OS
 # ===========
 .DS_Store

lib/middleware.js

@@ -1,15 +1,22 @@
 'use strict';
 
-var express     = require('express');
-var swig        = require('swig-templates');
-var swigFilters = require('./filters');
-var router      = require('./router');
+const express     = require('express');
+const swig        = require('swig-templates');
+const swigFilters = require('./filters');
+const router      = require('./router');
 
-var middleware = function (config) {
-  var app = express();
+const assets = require('../build-assets.json');
+
+const middleware = function (config) {
+  const app = express();
+
+  app.locals.assets = assets;
 
   //Set up swig
-  var swigEngine = new swig.Swig();
+  const swigOptions = {
+    cache: process.env.NODE_ENV === 'production' ? 'memory' : false,
+  };
+  const swigEngine = new swig.Swig(swigOptions);
   app.engine('html', swigEngine.renderFile);
   Object.keys(swigFilters).forEach(function (name) {
     swig.setFilter(name, swigFilters[name]);

lib/router.js

@@ -28,7 +28,7 @@ var router = function (config) {
 
   appRouter.use(logger('dev', config.options.logger));
 
-  appRouter.use('/', express.static(__dirname + '/../public'));
+  appRouter.use('/public', express.static(__dirname + '/../build/'));
 
   // Set request size limit
   appRouter.use(bodyParser.urlencoded({

lib/scripts/.eslintrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+  parserOptions: {
+    sourceType: 'module',
+  },
+  env: {
+    node: false,
+    browser: true,
+  },
+  globals: {
+    ME_SETTINGS: true,
+  },
+};

lib/scripts/codeMirrorLoader.js

@@ -0,0 +1,4 @@
+import CodeMirror from 'codemirror';
+import 'codemirror/mode/javascript/javascript';
+
+export default CodeMirror;

lib/scripts/collection.js

@@ -0,0 +1,213 @@
+import $ from 'jquery';
+import renderjson from 'renderjson';
+import CodeMirror from './codeMirrorLoader';
+
+const $document = $(document);
+
+function getParameterByName(name) {
+  name = name.replace(/\[/, '\\[').replace(/[\]]/, '\\]');
+  const regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+  const results = regex.exec(location.search);
+  return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+}
+
+$document.ready(function () {
+  $('#tabs').tab();
+  if (document.location.href.indexOf('query=') >= 0 && getParameterByName('query') !== '') {
+    $('#tabs a[href="#advanced"]').tab('show');
+  }
+});
+
+const addDoc = CodeMirror.fromTextArea(document.getElementById('document'), {
+  mode: { name: 'javascript', json: true },
+  indentUnit: 4,
+  electricChars: true,
+  matchBrackets: true,
+  lineNumbers: true,
+  theme: ME_SETTINGS.codeMirrorEditorTheme,
+});
+
+window.checkValidJSON = function () {
+  $.ajax({
+    type: 'POST',
+    url: `${ME_SETTINGS.baseHref}checkValid`,
+    data: {
+      document: addDoc.getValue(),
+    },
+  }).done((data) => {
+    if (data === 'Valid') {
+      $('#documentInvalidJSON').remove();
+      $('#addDocumentForm').submit();
+    } else if ($('#documentInvalidJSON').length === 0) {
+      $('.modal-body').parent().append('<div id="documentInvalidJSON" class="alert alert-danger"><strong>Invalid JSON</strong></div>');
+    }
+  });
+  return false;
+};
+
+$('#addDocument').on('shown.bs.modal', function () {
+  addDoc.refresh();
+  addDoc.focus();
+});
+
+if (ME_SETTINGS.collapsibleJSON) {
+  $(function () {
+    const $this = $(this);
+    // convert all objects to renderjson elements
+    $('div.tableContent pre').each(function () {
+      var text = $.trim($this.text());
+
+      if (text) {
+        $this.html(renderjson(JSON.parse(text)));
+      }
+    });
+  });
+  renderjson.set_show_to_level(ME_SETTINGS.collapsibleJSONDefaultUnfold);
+}
+
+function makeCollectionUrl() {
+  const st = ME_SETTINGS;
+  return `${st.baseHref}db/${st.dbName}/${st.collectionName}/`;
+}
+
+window.loadDocument = function (id) {
+  location.href = `${makeCollectionUrl()}${encodeURIComponent(id)}`;
+};
+
+$document.ready(function () {
+  const $tableWrapper = $('.tableWrapper');
+  if ($('.tableHeaderFooterBars').width() === $tableWrapper.width()) {
+    // table wrapper is the same width as the table itself, so not overflowing, so remove the white gradient
+    $('.fadeToWhite').remove();
+  } else {
+    $('.fadeToWhite').height($('.tableWrapper').height()); // limit the height only to the table div
+  }
+
+  $('.deleteButtonCollection').tooltip({
+    title: 'Are you sure you want to delete this collection? All documents will be deleted.',
+  });
+
+  $tableWrapper.scroll(function () {
+    const proximityToRightOfTable = $('.tableWrapper table').width() - $tableWrapper.scrollLeft() - $tableWrapper.width();
+    document.getElementById('fadeToWhiteID').style.opacity = Math.min(Math.max(proximityToRightOfTable - 50, 50) - 50, 100) / 100;
+  });
+
+  $('.tooDamnBig').bind('click', function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const target = $(this);
+    const _id = target.attr('doc_id');
+    const prop = target.attr('doc_prop');
+    const spinner = `<img src="${ME_SETTINGS.baseHref}public/img/gears.gif" />`;
+    const leftScroll = $tableWrapper.scrollLeft();
+
+    // Set the element with spinner for now
+    target.html(spinner);
+
+    $.get(`${makeCollectionUrl()}${encodeURIComponent(_id)}/${prop}`, function (input) {
+
+      // Images inline
+      if (
+        typeof input === 'string' &&
+        (
+          input.substr(0, 22) === 'data:image/png;base64,' ||
+          input.substr(0, 22) === 'data:image/gif;base64,' ||
+          input.substr(0, 22) === 'data:image/jpg;base64,' ||
+          input.substr(0, 23) === 'data:image/jpeg;base64,'
+        )
+      )  {
+        input = '<img src="' + input + '" style="max-height:100%; max-width:100%; "/>';
+      }
+
+      // Audio inline
+      if (
+        typeof input === 'string' &&
+        (
+          input.substr(0, 22) === 'data:audio/ogg;base64,' ||
+          input.substr(0, 22) === 'data:audio/mp3;base64,'
+        )
+      )  {
+        input = '<audio controls style="width:45px;" src="' + input + '">Your browser does not support the audio element.</audio>';
+      }
+
+      // Video inline
+      if (
+        typeof input === 'string' &&
+        (
+          input.substr(0, 23) === 'data:video/webm;base64,' ||
+          input.substr(0, 22) === 'data:video/mp4;base64,'  ||
+          input.substr(0, 22) === 'data:video/ogv;base64,'
+        )
+      )  {
+        input = '<video controls><source type="' + input.substring(input.indexOf(':') + 1, input.indexOf(';')) + '" src="' + input + '"/>' +
+          'Your browser does not support the video element.</video>';
+      }
+
+      if (typeof input === 'object' && (input.toString() === '[object Object]' || input.toString().substr(0, 7) === '[object')) {
+        input = renderjson(input);
+      }
+
+      // Set the element with gotten datas
+      target.parent().html(input);
+
+      // Set original scroll position
+      $('.tableWrapper').scrollLeft(leftScroll);
+    });
+  });
+
+  $('.deleteButtonDocument').on('click', function (e) {
+    const $form = $(this).closest('form');
+    e.stopPropagation();
+    e.preventDefault();
+
+    $('#confirm-deletion-document').modal({ backdrop: 'static', keyboard: false }).one('click', '#delete', function () {
+      $form.trigger('submit'); // submit the form
+    });
+  });
+
+  $('#deleteListConfirmButton').on('click', function () {
+    // we just need to POST the form, as all the query parameters are already embedded in the form action
+    $('#deleteListForm').trigger('submit');
+  });
+
+  $('.deleteButtonCollection').on('click', function (event) {
+
+    $('.deleteButtonCollection').tooltip('hide');
+
+    event.preventDefault();
+
+    const $target = $(this);
+    const $parentForm = $('#' + $target.attr('childof'));
+
+    $('#confirmation-input').attr('shouldbe', $target.attr('collection-name'));
+    $('#modal-collection-name').text($target.attr('collection-name'));
+    $('#confirm-deletion-collection').modal({ backdrop: 'static', keyboard: false })
+      .one('shown.bs.modal', function () {
+        $('#confirmation-input').focus();
+      })
+      .one('click', '#delete', function () {
+        const $input = $('#confirmation-input');
+        if ($input.val().toLowerCase() === $input.attr('shouldbe').toLowerCase()) {
+          $parentForm.trigger('submit');
+        }
+      });
+  });
+
+  const nextSort = {
+    1: -1,
+    '-1': 0,
+    0: 1,
+    undefined: 1,
+  };
+  $('.sorting-button').on('click', function () {
+    const $this = $(this);
+    const column = $this.data('column');
+    const direction = nextSort[$this.data('direction')];
+
+    $('input.sort-' + column).val(direction).prop('checked', direction !== 0);
+
+    const $form = $($('#tabs li.active a').attr('href') + ' form');
+    $form.find('button[type="submit"]').click();
+  });
+});

lib/scripts/database.js

@@ -0,0 +1,36 @@
+import $ from 'jquery';
+
+$(document).ready(() => {
+  $('#collection').popover({
+    content: 'Collection names must begin with a letter, underscore or slash, and can contain only letters, underscores, numbers, dots or slashes',
+    placement: 'left',
+  });
+
+  const $deleteButton = $('.deleteButton');
+
+  $deleteButton.tooltip({
+    title: 'Warning! Are you sure you want to delete this collection? All documents will be deleted.',
+  });
+
+  $deleteButton.on('click', function onDeleteClick(event) {
+    $deleteButton.tooltip('hide');
+
+    event.preventDefault();
+
+    const target = $(this);
+    const parentForm = $('#' + target.attr('childof'));
+
+    $('#confirmation-input').attr('shouldbe', target.attr('collection-name'));
+    $('#modal-collection-name').text(target.attr('collection-name'));
+    $('#confirm-deletion').modal({ backdrop: 'static', keyboard: false })
+      .one('shown.bs.modal', () => {
+        $('#confirmation-input').focus();
+      })
+      .one('click', '#delete', () => {
+        const input = $('#confirmation-input');
+        if (input.val().toLowerCase() === input.attr('shouldbe').toLowerCase()) {
+          parentForm.trigger('submit');
+        }
+      });
+  });
+});

lib/scripts/document.js

@@ -0,0 +1,53 @@
+import $ from 'jquery';
+import CodeMirror from './codeMirrorLoader';
+
+const doc = CodeMirror.fromTextArea(document.getElementById('document'), {
+  mode: {
+    name: 'javascript',
+    json: true,
+  },
+  indentUnit: 4,
+  lineNumbers: true,
+  autoClearEmptyLines: true,
+  matchBrackets: true,
+  readOnly: ME_SETTINGS.readOnly,
+  theme: ME_SETTINGS.codeMirrorEditorTheme,
+});
+
+window.onBackClick = function () {
+  // "Back" button is clicked
+
+  if (doc.isClean()) {
+    history.back();
+  } else if ($('#discardChanges').length === 0) {
+    $('#pageTitle').parent().append(
+      '<div id="discardChanges" class="alert alert-warning"><strong>Document has changed! Are you sure you wish to go back?</strong></div>'
+    );
+    $('.backButton').text('Back & Discard Changes');
+  } else {
+    history.back();
+  }
+
+  return false;
+};
+
+window.onSubmitClick = function () {
+  // Save button is clicked
+  $('#discardChanges').remove();
+
+  $.ajax({
+    type: 'POST',
+    url: `${ME_SETTINGS.baseHref}checkValid`,
+    data: {
+      document: doc.getValue(),
+    },
+  }).done((data) => {
+    if (data === 'Valid') {
+      $('#documentInvalidJSON').remove();
+      $('#documentEditForm').submit();
+    } else if ($('#documentInvalidJSON').length === 0) {
+      $('#pageTitle').parent().append('<div id="documentInvalidJSON" class="alert alert-danger"><strong>Invalid JSON</strong></div>');
+    }
+  });
+  return false;
+};

lib/scripts/gridfs.js

@@ -0,0 +1,4 @@
+window.loadFile = function (id) {
+  const st = ME_SETTINGS;
+  location.href = `${st.baseHref}db/${st.dbName}/gridFS/${st.bucketName}/${encodeURIComponent(id)}`;
+};