(core) move client code to core

Summary:
This moves all client code to core, and makes minimal fix-ups to
get grist and grist-core to compile correctly.  The client works
in core, but I'm leaving clean-up around the build and bundles to
follow-up.

Test Plan: existing tests pass; server-dev bundle looks sane

Reviewers: dsagal

Reviewed By: dsagal

Differential Revision: https://phab.getgrist.com/D2627

app/client/components/viewCommon.js

@@ -0,0 +1,69 @@
+/* global $ */
+
+var koDom = require('../lib/koDom');
+
+/**
+ * This adds `.isFlex` option to JQuery's $.ui.resizable to make it work better with flexbox.
+ * Specifically, when resizing to the left, JQuery adjusts both `width` and `left` properties. If
+ * the element is part of a flexbox, it's wrong to adjust `left`. This widget adds `.isFlex`
+ * option: when set to true, the `left` (also `top`) adjustments get ignored.
+ */
+var _respectSize = $.ui.resizable.prototype._respectSize;
+$.ui.resizable.prototype._respectSize = function() {
+  var data = _respectSize.apply(this, arguments);
+  if (this.options.isFlex) {
+    console.log("Ignoring left, top");
+    data.left = data.top = undefined;
+  }
+  return data;
+};
+
+/**
+ * When used as an argument to dom() function, makes the containing element resizable, with the
+ * size written into the given observable. If the observable has a .save() method, it's called
+ * when the resize is complete (to save the new size to the server).
+ * @param {Object} options.enabled: An observable, a constant, or a function for a computed
+ *      observable. The value is treated as a boolean, and determined whether resizable
+ *      functionality is enabled.
+ * @param {String} options.handles: Same as for jqueryui's `resizable`, e.g. 'e' to resize right
+ *      edge (east), 'w' to resize left edge (west).
+ * @param {Function} options.stop: Additional callback to call when resizing stops.
+ * @param {Boolean} options.isFlex: If true, will avoid changing 'left' when resizing the left edge.
+ * @param {Number} options.minWidth: The minimum width the element can be resized to.
+ *      Defaults to 10 (JQuery default).
+ */
+function makeResizable(widthObservable, options) {
+  options = options || {};
+  function onEvent(e, ui) {
+    widthObservable(ui.size.width);
+    if (e.type === 'resizestop') {
+      if (options.stop) {
+        options.stop(e, ui);
+      }
+      if (widthObservable.save) {
+        widthObservable.save();
+      }
+    }
+  }
+
+  return function(elem) {
+    $(elem).resizable({
+      handles: options.handles || 'e',
+      resize: onEvent,
+      stop: onEvent,
+      isFlex: options.isFlex,
+      minWidth: options.minWidth || 10
+    });
+
+    if (options.hasOwnProperty('enabled')) {
+      koDom.setBinding(elem, options.enabled, function(elem, value) {
+        if (value) {
+          $(elem).resizable('enable');
+        } else {
+          $(elem).resizable('disable').removeClass('ui-state-disabled');
+        }
+      });
+    }
+  };
+}
+exports.makeResizable = makeResizable;