@jetbrains/ring-ui 5.1.21 → 5.1.23

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

@@ -1,190 +0,0 @@
-/**
- * @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

@@ -1,94 +0,0 @@
-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

@@ -1,182 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,34 +0,0 @@
-@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;
-}