@jetbrains/ring-ui 5.1.23 → 5.1.24

package/components/place-under-ng/place-under-ng.js

@@ -0,0 +1,190 @@
+/**
+ * @name Place Under Ng
+ */
+
+import angular from 'angular';
+
+import debounce from 'just-debounce-it';
+import createResizeDetector from 'element-resize-detector';
+
+import {getDocumentScrollTop} from '../global/dom';
+
+const resizeDetector = createResizeDetector();
+
+const angularModule = angular.module('Ring.place-under', []);
+angularModule.directive('rgPlaceUnder',
+  // eslint-disable-next-line angular/di-unused
+  function rgPlaceUnderDirective($window, getClosestElementWithCommonParent, rgPlaceUnderHelper) {
+    return {
+      restrict: 'A',
+      link: function link(scope, iElement, iAttrs) {
+        const element = iElement[0];
+        const synchronizer = rgPlaceUnderHelper.createPositionSynchronizer(element, iAttrs, scope);
+
+        function startSyncing(placeUnderSelector) {
+          if (placeUnderSelector) {
+            scope.$evalAsync(() => {
+              const syncWith = getClosestElementWithCommonParent(element, placeUnderSelector);
+
+              if (syncWith) {
+                synchronizer.syncPositionWith(syncWith);
+              } else {
+                throw new Error('rgPlaceUnder cannot find element to sync with.');
+              }
+            });
+          }
+        }
+
+        iAttrs.$observe('rgPlaceUnder', startSyncing);
+      }
+    };
+  }
+);
+
+
+angularModule.factory('getClosestElementWithCommonParent',
+  function getClosestElementWithCommonParentFactory() {
+    return function getClosestElementWithCommonParent(currentElement, selector) {
+      const parent = currentElement.parentNode;
+      if (parent) {
+        return parent.querySelector(selector) ||
+          getClosestElementWithCommonParent(parent, selector);
+      } else {
+        return null;
+      }
+    };
+  }
+);
+
+
+angularModule.factory('rgPlaceUnderHelper', $window => {
+  const DEBOUNCE_INTERVAL = 10;
+  const AFTER_SCROLL_RECHECK_INTERVAL = 50;
+  const HEIGHT_CHECK_INTERVAL = 50;
+
+  return {
+    DEBOUNCE_INTERVAL,
+    AFTER_SCROLL_RECHECK_INTERVAL,
+    HEIGHT_CHECK_INTERVAL,
+    createPositionSynchronizer: (element, iAttrs, scope) => {
+      const topOffset = parseInt(iAttrs.placeTopOffset, 10) || 0;
+      const syncHeight = iAttrs.syncHeight;
+
+      let syncBottom = [];
+      let removeScrollListener = [];
+
+      if (iAttrs.syncBottom) {
+        syncBottom = iAttrs.syncBottom.split(',');
+      }
+
+      function waitForNonZeroHeight(elementToCheck) {
+        return new Promise(resolve => {
+          function checkElementHeight() {
+            if (elementToCheck.offsetHeight === 0) {
+              $window.setTimeout(checkElementHeight, HEIGHT_CHECK_INTERVAL);
+            } else {
+              resolve();
+            }
+          }
+
+          checkElementHeight();
+        });
+      }
+
+      function onScroll(syncElement) {
+        const documentScrollTop = getDocumentScrollTop();
+        const documentOffsetHeight =
+          ($window.document.documentElement && $window.document.documentElement.offsetHeight) ||
+          $window.document.body.offsetHeight;
+
+        const syncedElementHeight = syncElement.offsetHeight;
+        const syncedElementOffsetTop = syncElement.getBoundingClientRect().top + documentScrollTop;
+
+        const bottom = syncedElementOffsetTop + syncedElementHeight;
+
+        const margin = Math.max(bottom - documentScrollTop, syncedElementHeight);
+
+        element.style.marginTop = `${margin + topOffset}px`;
+
+        if (syncHeight) {
+          /**
+           * Decrease height by margin value to make scroll work properly
+           */
+          let bottomOffset = 0;
+          if (syncBottom.length) {
+            for (let i = 0; i < syncBottom.length; i++) {
+              const syncBottomParams = syncBottom[i].split(';');
+              const elem = $window.document.querySelector(syncBottomParams[0]);
+              const extraMargin = syncBottomParams[1] ? parseInt(syncBottomParams[1], 10) : 0;
+
+              if (elem) {
+                const boundingRect = elem.getBoundingClientRect();
+
+                if (boundingRect.top === 0) {
+                  continue;
+                }
+
+                const marginTop = parseInt($window.getComputedStyle(elem).
+                  getPropertyValue('margin-top'), 10);
+                bottomOffset = documentOffsetHeight - boundingRect.top + marginTop + extraMargin;
+                if (bottomOffset < 0) {
+                  bottomOffset = 0;
+                }
+
+                break;
+              }
+            }
+          }
+
+          element.style.height = `calc(100% - ${parseInt(element.style.marginTop, 10) + bottomOffset}px)`;
+        }
+      }
+
+      function removeScrollListeners() {
+        removeScrollListener.map(cb => cb());
+        removeScrollListener = [];
+      }
+
+      function syncPositionWith(syncElement) {
+        removeScrollListeners();
+
+        const afterScrollFinishRecheck =
+          debounce(() => this.onScroll(syncElement), AFTER_SCROLL_RECHECK_INTERVAL);
+
+        const sidebarScrollListener = debounce(() => {
+          this.onScroll(syncElement);
+          afterScrollFinishRecheck();
+        }, DEBOUNCE_INTERVAL);
+
+        this.waitForNonZeroHeight(syncElement).then(sidebarScrollListener);
+
+        $window.addEventListener('scroll', sidebarScrollListener);
+        removeScrollListener.push(() => {
+          $window.removeEventListener('scroll', sidebarScrollListener);
+        });
+
+
+        removeScrollListener.push(scope.$watch('show', sidebarScrollListener));
+        removeScrollListener.push(scope.$on('rgPlaceUnder:sync', sidebarScrollListener));
+
+
+        const elementToHeightListening = iAttrs.listenToHeightChange
+          ? $window.document.querySelector(iAttrs.listenToHeightChange)
+          : $window.document.body;
+        resizeDetector.listenTo(elementToHeightListening, sidebarScrollListener);
+        removeScrollListener.
+          push(() => resizeDetector.removeAllListeners(elementToHeightListening));
+      }
+
+      scope.$on('$destroy', removeScrollListeners);
+
+      return {
+        waitForNonZeroHeight,
+        onScroll,
+        syncPositionWith
+      };
+    }
+  };
+});
+
+export default angularModule.name;

package/components/place-under-ng/place-under-ng.stories.js

@@ -0,0 +1,94 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import {getDocumentScrollTop} from '../global/dom';
+
+import RingPlaceUnder from './place-under-ng';
+
+export default {
+  title: 'Legacy Angular/Place Under Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    notes: `
+Displays a sidebar that fills the entire right half of its container.
+To make sidebar have fixed positioning under some other element (e.g. toolbar),
+a selector for that element should be passed as placeUnderSibling parameter.
+    `
+  }
+};
+
+export const basic = () => {
+  angular.module(APP_NAME, [RingPlaceUnder]);
+
+  window.addEventListener('scroll', () => {
+    const target = document.querySelector('.target-element');
+
+    const scrolledTop = getDocumentScrollTop();
+    if (scrolledTop > 30) {
+      target.style.position = 'fixed';
+    } else {
+      target.style.position = 'static';
+    }
+  });
+
+  return `
+      <div class="head">Scroll down to see the effect</div>
+      <div rg-place-under=".target-element" class="place-under">
+        Element to be positioned under test element
+      </div>
+
+      <div class="target-element">
+        Test element to sync with.
+      </div>
+
+      <div class="scrollable">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor
+        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+        quis nostrud
+        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+        dolore eu fugiat nulla pariatur.
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+        officia deserunt mollit anim id est laborum.
+      </div>
+    `;
+};
+
+basic.storyName = 'Place Under Ng';
+
+basic.parameters = {
+  storyStyles: `
+<style>
+  .place-under {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 50%;
+    padding: 16px;
+    background-color: var(--ring-selected-background-color);
+  }
+
+  .head {
+    height: 30px;
+  }
+
+  .target-element {
+    position: static;
+    top: 0;
+    width: 100%;
+    padding: 16px;
+    background-color: var(--ring-hover-background-color);
+  }
+
+  .scrollable {
+    height: 1000px;
+    padding: 16px;
+    padding-top: 64px;
+    background-color: var(--ring-sidebar-background-color);
+  }
+</style>
+      `
+};

package/components/place-under-ng/place-under-ng.test.js

@@ -0,0 +1,182 @@
+import angular from 'angular';
+
+import EventEmitter from 'events';
+
+import 'angular-mocks';
+
+import rgPlaceUnder from './place-under-ng';
+
+
+describe('Place Under Ng', () => {
+
+
+  beforeEach(window.module(
+    rgPlaceUnder
+  ));
+
+
+  let $windowMock;
+  let documentMock;
+  let bodyMock;
+  let windowEventEmitter;
+  beforeEach(window.module($provide => {
+    documentMock = angular.element('<document/>')[0];
+    bodyMock = angular.element('<body/>')[0];
+    documentMock.body = bodyMock;
+
+    windowEventEmitter = new EventEmitter();
+
+    $windowMock = {
+      addEventListener: (eventName, callback) => windowEventEmitter.on(eventName, callback),
+      removeEventListener:
+        (eventName, callback) => windowEventEmitter.removeListener(eventName, callback),
+      setTimeout: window.setTimeout.bind(window),
+      document: documentMock
+    };
+    $provide.value('$window', $windowMock);
+  }));
+
+
+  let $rootScope;
+  let $compile;
+  let runDigest;
+  beforeEach(window.inject((_$rootScope_, _$compile_) => {
+    $rootScope = _$rootScope_;
+    $compile = _$compile_;
+
+    runDigest = () => {
+      $rootScope.$apply();
+    };
+  }));
+
+
+  describe('rgPlaceUnder', () => {
+
+
+    let $scope;
+    let element;
+    beforeEach(() => {
+      $scope = $rootScope.$new();
+
+      element = $compile('<div id="testNode" rg-place-under="#testNode"/>')($scope)[0];
+      runDigest();
+    });
+
+
+    it('should compile directive', () => {
+      element.should.have.class('ng-scope');
+    });
+  });
+
+
+  describe('rgPlaceUnderHelper', () => {
+
+
+    let clock;
+    beforeEach(() => {
+      clock = sandbox.useFakeTimers({toFake: ['setTimeout', 'clearTimeout']});
+    });
+
+
+    let $scope;
+    let rgPlaceUnderHelper;
+    let elementMock;
+    let syncElementMock;
+    let attrsMock;
+    let synchronizer;
+    let flushDebounce;
+    beforeEach(window.inject(_rgPlaceUnderHelper_ => {
+      rgPlaceUnderHelper = _rgPlaceUnderHelper_;
+
+      $scope = $rootScope.$new();
+      attrsMock = {};
+      elementMock = angular.element('<div/>')[0];
+      syncElementMock = angular.element('<div/>')[0];
+
+      synchronizer = rgPlaceUnderHelper.createPositionSynchronizer(
+        elementMock,
+        attrsMock,
+        $scope
+      );
+      sandbox.stub(synchronizer, 'onScroll');
+
+      flushDebounce = () => {
+        clock.tick(rgPlaceUnderHelper.DEBOUNCE_INTERVAL);
+      };
+    }));
+
+
+    it('should sync position', () => {
+      synchronizer.syncPositionWith(syncElementMock);
+    });
+
+
+    it('should call onScroll on window scroll event', () => {
+      synchronizer.syncPositionWith(syncElementMock);
+
+      windowEventEmitter.emit('scroll');
+      flushDebounce();
+
+      synchronizer.onScroll.should.have.been.called;
+    });
+
+    it('should call recheck scroll position after some delay after scroll events finish', () => {
+      const BIG_TICK = 500;
+      synchronizer.syncPositionWith(syncElementMock);
+
+      windowEventEmitter.emit('scroll');
+      flushDebounce();
+      windowEventEmitter.emit('scroll');
+      clock.tick(BIG_TICK);
+
+      synchronizer.onScroll.should.have.been.calledThrice;
+    });
+
+
+    it('should allow call onScroll manually using scope', () => {
+      synchronizer.syncPositionWith(syncElementMock);
+
+      $scope.$emit('rgPlaceUnder:sync');
+      flushDebounce();
+
+      synchronizer.onScroll.should.have.been.called;
+    });
+
+
+    it('should call onScroll when change show property', () => {
+      synchronizer.syncPositionWith(syncElementMock);
+
+      $scope.show = !$scope.show;
+      runDigest();
+      flushDebounce();
+
+      synchronizer.onScroll.should.have.been.called;
+    });
+
+
+    it('should remove previous listeners if we call syncPositionWith twice', () => {
+      let callCount = 0;
+      synchronizer.syncPositionWith(syncElementMock);
+      synchronizer.syncPositionWith(syncElementMock);
+
+      $scope.show = !$scope.show;
+      runDigest();
+      flushDebounce();
+
+      callCount += 1;
+      synchronizer.onScroll.callCount.should.be.equal(callCount);
+
+      $scope.$emit('rgPlaceUnder:sync');
+      flushDebounce();
+
+      callCount += 1;
+      synchronizer.onScroll.callCount.should.be.equal(callCount);
+
+      windowEventEmitter.emit('scroll');
+      flushDebounce();
+
+      callCount += 1;
+      synchronizer.onScroll.callCount.should.be.equal(callCount);
+    });
+  });
+});

package/components/popup/popup.consts.d.ts

@@ -0,0 +1,37 @@
+export declare enum Directions {
+    BOTTOM_RIGHT = "BOTTOM_RIGHT",
+    BOTTOM_LEFT = "BOTTOM_LEFT",
+    BOTTOM_CENTER = "BOTTOM_CENTER",
+    TOP_LEFT = "TOP_LEFT",
+    TOP_RIGHT = "TOP_RIGHT",
+    TOP_CENTER = "TOP_CENTER",
+    RIGHT_TOP = "RIGHT_TOP",
+    RIGHT_BOTTOM = "RIGHT_BOTTOM",
+    RIGHT_CENTER = "RIGHT_CENTER",
+    LEFT_TOP = "LEFT_TOP",
+    LEFT_BOTTOM = "LEFT_BOTTOM",
+    LEFT_CENTER = "LEFT_CENTER"
+}
+/**
+ * When positioning a popup, directions will be tried in the listed order.
+ * @type {Array.<string>}
+ */
+export declare const DEFAULT_DIRECTIONS: Directions[];
+/**
+ * @enum {number}
+ */
+export declare enum Dimension {
+    MARGIN = 16,
+    BORDER_WIDTH = 1
+}
+export declare enum MinWidth {
+    TARGET = -1
+}
+export declare enum MaxHeight {
+    SCREEN = -1
+}
+export declare enum Display {
+    HIDDEN = 0,
+    SHOWING = 1,
+    SHOWN = 2
+}

package/components/popup/popup.consts.js

@@ -0,0 +1,45 @@
+export var Directions;
+(function (Directions) {
+    Directions["BOTTOM_RIGHT"] = "BOTTOM_RIGHT";
+    Directions["BOTTOM_LEFT"] = "BOTTOM_LEFT";
+    Directions["BOTTOM_CENTER"] = "BOTTOM_CENTER";
+    Directions["TOP_LEFT"] = "TOP_LEFT";
+    Directions["TOP_RIGHT"] = "TOP_RIGHT";
+    Directions["TOP_CENTER"] = "TOP_CENTER";
+    Directions["RIGHT_TOP"] = "RIGHT_TOP";
+    Directions["RIGHT_BOTTOM"] = "RIGHT_BOTTOM";
+    Directions["RIGHT_CENTER"] = "RIGHT_CENTER";
+    Directions["LEFT_TOP"] = "LEFT_TOP";
+    Directions["LEFT_BOTTOM"] = "LEFT_BOTTOM";
+    Directions["LEFT_CENTER"] = "LEFT_CENTER";
+})(Directions || (Directions = {}));
+/**
+ * When positioning a popup, directions will be tried in the listed order.
+ * @type {Array.<string>}
+ */
+export const DEFAULT_DIRECTIONS = [
+    Directions.BOTTOM_RIGHT, Directions.BOTTOM_LEFT, Directions.TOP_LEFT, Directions.TOP_RIGHT,
+    Directions.RIGHT_TOP, Directions.RIGHT_BOTTOM, Directions.LEFT_TOP, Directions.LEFT_BOTTOM
+];
+/**
+ * @enum {number}
+ */
+export var Dimension;
+(function (Dimension) {
+    Dimension[Dimension["MARGIN"] = 16] = "MARGIN";
+    Dimension[Dimension["BORDER_WIDTH"] = 1] = "BORDER_WIDTH";
+})(Dimension || (Dimension = {}));
+export var MinWidth;
+(function (MinWidth) {
+    MinWidth[MinWidth["TARGET"] = -1] = "TARGET";
+})(MinWidth || (MinWidth = {}));
+export var MaxHeight;
+(function (MaxHeight) {
+    MaxHeight[MaxHeight["SCREEN"] = -1] = "SCREEN";
+})(MaxHeight || (MaxHeight = {}));
+export var Display;
+(function (Display) {
+    Display[Display["HIDDEN"] = 0] = "HIDDEN";
+    Display[Display["SHOWING"] = 1] = "SHOWING";
+    Display[Display["SHOWN"] = 2] = "SHOWN";
+})(Display || (Display = {}));

package/components/popup/popup.css

@@ -0,0 +1,34 @@
+@import "../global/variables.css";
+
+.popup {
+  composes: font from "../global/global.css";
+
+  position: fixed;
+  z-index: var(--ring-overlay-z-index);
+  top: -100vh;
+  left: -100vw;
+
+  overflow-y: auto;
+
+  box-sizing: border-box;
+
+  border: 1px solid var(--ring-popup-border-color);
+  border-radius: var(--ring-border-radius);
+
+  background-color: var(--ring-popup-background-color);
+  box-shadow: var(--ring-popup-shadow);
+}
+
+.hidden {
+  display: none;
+}
+
+.showing {
+  opacity: 0;
+}
+
+.attached {
+  border-top: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}