@jetbrains/ring-ui 5.1.23 → 5.1.24

package/components/shortcuts-ng/shortcuts-ng.js

@@ -0,0 +1,285 @@
+import angular from 'angular';
+
+import {getStyles} from '../global/dom';
+import shortcutsInstance from '../shortcuts/core';
+
+
+const angularModule = angular.module('Ring.shortcuts', []);
+
+angularModule.provider('shortcuts', function provider() {
+  const modes = {};
+  const mainModes = {};
+  const reference = [];
+
+  function addMode(config) {
+    modes[config.id] = config.shortcuts;
+    mainModes[config.id] = !!config.main;
+
+    if (config.hasOwnProperty('title')) {
+      reference.push(config);
+    }
+
+    return this;
+  }
+
+  this.mode = addMode;
+
+  this.$get = function get($rootScope) {
+    return {
+      addMode,
+
+      bind(name, handlers, scope) {
+        const mode = modes[name];
+
+        // Nothing to bind
+        if (typeof handlers !== 'object') {
+          return;
+        }
+
+        // No declaration
+        if (!mode) {
+          throw new Error(`Shortcut mode ${name} is not declared`);
+        }
+
+        mode.forEach(key => {
+          if (!angular.isFunction(handlers[key.action])) {
+            return;
+          }
+
+          shortcutsInstance.bind({
+            key: key.key,
+            scope: scope || name,
+            handler: (...args) => {
+              // TODO Dirty hack ;(
+              const ret = handlers[key.action](...args);
+              if (!$rootScope.$$phase) { // eslint-disable-line angular/no-private-call
+                $rootScope.$apply();
+              }
+              return ret;
+            }
+          });
+        });
+      },
+
+      triggerAction(mode, action) {
+        const actions = modes[mode];
+
+        for (let i = actions.length - 1; i >= 0; i--) {
+          if (actions[i].action === action) {
+            return shortcutsInstance.trigger(actions[i].key[0] || actions[i].key);
+          }
+        }
+
+        return undefined;
+      },
+
+      isMainMode: name => mainModes[name],
+      getRegisteredShortcuts: () => reference,
+      shortcuts: shortcutsInstance
+    };
+  };
+});
+
+angularModule.directive('rgShortcutsApp', function rgShortcutsAppDirective() {
+  return {
+    restrict: 'A',
+
+    controller: function controller($scope, $rootScope, $attrs, shortcuts) {
+      $scope.zones = [];
+      $scope.loop = 'shortcutsLoop' in $attrs;
+
+      function getNext(current, back) {
+        const position = current && $scope.zones.indexOf(current);
+        let next;
+
+        if (position >= 0) {
+          next = back ? $scope.zones[position - 1] : $scope.zones[position + 1];
+        }
+
+        if (!next && ($scope.loop || !current)) {
+          next = back ? $scope.zones[$scope.zones.length - 1] : $scope.zones[0];
+        }
+
+        if (!next) {
+          next = $scope.zones[0];
+        }
+
+        // Skip invisible zones
+        if (
+          next &&
+          (
+            !document.documentElement.contains(next.element) ||
+            getStyles(next.element).display === 'none'
+          )
+        ) {
+          next = getNext(next, back);
+        }
+
+        return next;
+      }
+
+      this.deselect = () => {
+        $scope.current.onBlur();
+        $scope.current = null;
+      };
+
+      this.getCurrent = () => $scope.current;
+
+      this.select = next => {
+        if ($scope.current === next) {
+          return;
+        }
+
+        if ($scope.current) {
+          shortcutsInstance.spliceScope($scope.current.scope);
+          this.deselect();
+        }
+
+        if (!next) {
+          return;
+        }
+
+        shortcutsInstance.pushScope(next.scope);
+
+        $scope.current = next;
+      };
+
+      this.route = (action, e, combo, mode) => {
+        let next;
+
+        // There is nowhere to navigate
+        if (!$scope.zones.length) {
+          return false;
+        }
+
+        // Reset current zone if it's not equal to the current scope
+        if ($scope.current && $scope.current.scope !== shortcutsInstance.getScope().
+          pop().scopeId) {
+          this.deselect();
+        }
+
+        if (action === 'main') {
+          $scope.zones.forEach((zone, index) => {
+            if (shortcuts.isMainMode(zone.name)) {
+              next = $scope.zones[index];
+            }
+          });
+        } else {
+          next = getNext($scope.current, action === 'prev');
+        }
+
+        // Select next zone and trigger same combo there
+        if (next) {
+          this.select(next);
+
+          if (shortcutsInstance.hasKey(combo, next.scope)) {
+            shortcutsInstance.trigger(combo);
+          }
+          // Otherwise go back
+        } else {
+          shortcuts.triggerAction(mode, action === 'next' ? 'prev' : 'next');
+        }
+
+        return false;
+      };
+
+      this.sort = () => {
+        const orderedElements = Array.from(document.querySelectorAll('[rg-shortcuts]'));
+
+        $scope.zones.forEach(zone => {
+          zone.order = orderedElements.indexOf(zone.element);
+        });
+
+        $scope.zones.sort((a, b) => a.order - b.order);
+      };
+
+      this.setup = (zone, keys) => {
+        shortcuts.bind(zone.name, keys, zone.scope);
+        $scope.zones.push(zone);
+        this.sort();
+      };
+
+      this.destroy = zone => {
+        shortcutsInstance.spliceScope(zone.scope);
+        shortcutsInstance.unbindScope(zone.scope);
+
+        const position = $scope.zones.indexOf(zone);
+
+        if (position !== -1) {
+          $scope.zones.splice(position, 1);
+        }
+      };
+
+      // Initial setup
+      const keyMap = {
+        next: this.route.bind(this, 'next'),
+        prev: this.route.bind(this, 'prev'),
+        main: this.route.bind(this, 'main')
+      };
+
+      shortcuts.bind('ring-shortcuts', keyMap);
+      shortcutsInstance.pushScope('ring-shortcuts');
+    }
+  };
+});
+
+angularModule.directive('rgShortcuts', function rgShortcutsDirective($parse) {
+  return {
+    restrict: 'A',
+    require: ['^rgShortcutsApp'],
+
+    link: function link($scope, iElement, iAttrs, shortcutsCtrl) {
+      // Closest controller
+      const shortcutsApp = shortcutsCtrl[shortcutsCtrl.length - 1];
+
+      const name = iAttrs.rgShortcuts;
+      const focusGetter = $parse(iAttrs.shortcutsFocus);
+      const blurGetter = $parse(iAttrs.shortcutsBlur);
+
+      const zone = {
+        name,
+        scope: `${name}-${$scope.$id}`,
+        element: iElement[0],
+        onBlur: blurGetter($scope) || angular.noop
+      };
+
+      $scope.$evalAsync(() => {
+        shortcutsApp.setup(zone, $scope.$eval(iAttrs.shortcutsMap));
+      });
+
+      $scope.$watch(() => focusGetter($scope), focusState => {
+        if (focusState) {
+          shortcutsApp.select(zone);
+        }
+      });
+
+      $scope.$on('$destroy', () => {
+        shortcutsApp.destroy(zone);
+      });
+    }
+  };
+});
+
+
+angularModule.directive('rgShortcutsGlobal', function rgShortcutsGlobalDirective(shortcuts) {
+  return {
+    restrict: 'A',
+
+    link: function link($scope, iElement, iAttrs) {
+      const name = iAttrs.rgShortcutsGlobal;
+      const scope = `${name}-${$scope.$id}`;
+
+      $scope.$evalAsync(() => {
+        shortcuts.bind(name, $scope.$eval(iAttrs.shortcutsMap), scope);
+        shortcutsInstance.pushScope(scope);
+      });
+
+      $scope.$on('$destroy', () => {
+        shortcutsInstance.spliceScope(scope);
+        shortcutsInstance.unbindScope(scope);
+      });
+    }
+  };
+});
+
+export default angularModule.name;

package/components/sidebar/sidebar.css

@@ -0,0 +1,159 @@
+@import "../global/global.css";
+
+@value unit from "../global/global.css";
+
+@keyframes show-sidebar {
+  0% {
+    right: -100%;
+  }
+
+  100% {
+    right: 0;
+  }
+}
+
+:global(.ring-sidebar) {
+  position: fixed;
+  z-index: 4;
+
+  top: 0;
+  right: -100%;
+
+  visibility: hidden;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+
+  width: calc(unit * 58);
+  height: 100%;
+
+  padding-top: calc(2 * unit);
+
+  transition: right 0.5s ease, visibility 0.5s;
+
+  border: solid 1px var(--ring-line-color);
+  border-right-width: 0;
+  background: var(--ring-content-background-color);
+}
+
+:global(.ring-sidebar_active) {
+  right: 0;
+
+  visibility: visible;
+  overflow: auto;
+
+  animation: show-sidebar 0.5s 1;
+
+  box-shadow: -1px 0 2px 0 rgba(0, 42, 76, 0.15);
+}
+
+:global(.ring-sidebar_active .ring-sidebar__i) {
+  transition: 0.5s ease-in;
+  transform: rotate(180deg);
+}
+
+:global(.ring-sidebar__toggle-icon) {
+  color: var(--ring-icon-secondary-color);
+}
+
+:global(.ring-sidebar__avatar) {
+  float: left;
+
+  width: calc(6 * unit);
+  height: calc(6 * unit);
+  object-fit: contain;
+
+  padding: 0 calc(2 * unit) 0 calc(4 * unit);
+}
+
+:global(.ring-sidebar__title) {
+  margin: 0;
+  padding-left: calc(4 * unit);
+
+  vertical-align: middle;
+
+  color: var(--ring-heading-color);
+
+  font-size: 20px;
+  line-height: 24px;
+}
+
+:global(.ring-sidebar__title .tag-flag) {
+  vertical-align: bottom;
+}
+
+:global(.ring-sidebar__avatar ~ .ring-sidebar__title) {
+  margin-bottom: 42px;
+}
+
+:global(.ring-sidebar__section) {
+  position: relative;
+
+  margin-top: calc(3 * unit);
+  padding: 0 calc(2 * unit) 0 calc(4 * unit);
+}
+
+:global(.ring-sidebar__section-title) {
+  display: inline-block;
+
+  color: var(--ring-text-color);
+
+  font-size: var(--ring-font-size);
+  font-weight: bold;
+}
+
+:global(.ring-sidebar__section-text) {
+  color: var(--ring-text-color);
+
+  font-size: var(--ring-font-size);
+  line-height: calc(3 * unit);
+}
+
+:global(.ring-sidebar__section-text_multiline) {
+  padding: 4px 0 5px;
+
+  line-height: normal;
+}
+
+:global(.ring-sidebar__section-roster) {
+  margin-top: unit;
+}
+
+:global(.ring-sidebar__section-icon) {
+  position: absolute;
+  left: 0;
+
+  display: block;
+
+  width: calc(4 * unit);
+
+  text-align: center;
+
+  color: var(--ring-icon-secondary-color);
+
+  font-size: 12px;
+}
+
+:global(.ring-sidebar__empty) {
+  margin-top: calc(unit * 4);
+
+  text-align: center;
+}
+
+:global(.ring-sidebar__empty-icon) {
+  color: var(--ring-disabled-color);
+
+  font-size: 100px;
+}
+
+:global(.ring-sidebar__empty-description) {
+  margin-top: calc(unit * 2);
+  padding-top: 4px;
+
+  color: var(--ring-text-color);
+
+  font-size: 12px;
+
+  line-height: 18px;
+}

package/components/sidebar-ng/sidebar-ng.js

@@ -0,0 +1,99 @@
+import angular from 'angular';
+
+import chevronRight from '@jetbrains/icons/chevron-right';
+import chevronLeft from '@jetbrains/icons/chevron-left';
+
+import PlaceUnder from '../place-under-ng/place-under-ng';
+import IconNG from '../icon-ng/icon-ng';
+import RingAngularComponent from '../global/ring-angular-component';
+import ButtonNG from '../button-ng/button-ng';
+
+import '../sidebar/sidebar.css';
+
+import template from './sidebar-ng__template';
+
+import buttonTemplate from './sidebar-ng__button-template';
+
+/**
+ * @name Sidebar Ng
+ */
+
+const angularModule = angular.module('Ring.sidebar', [PlaceUnder, IconNG, ButtonNG]);
+
+class SidebarController extends RingAngularComponent {
+  constructor(...args) {
+    super(...args);
+
+    this.$onInit = () => {
+      const {$scope} = this.$inject;
+
+      this.dialogIsActive = false;
+      this.showed = this.show;
+
+      // dialog has been opened — open sidebar
+      $scope.$watch(() => this.dialogIsActive, () => {
+        if (this.dialogIsActive) {
+          this.show = true;
+        } else if (!this.showed) {
+          this.show = false;
+        }
+      });
+
+      $scope.$watch(() => this.show, () => {
+        if (!this.dialogIsActive) {
+          this.showed = this.show;
+        }
+      });
+    };
+  }
+}
+SidebarController.$inject = ['$scope'];
+
+function rgSidebarDirective() {
+  return {
+    restrict: 'E',
+    transclude: true,
+    replace: true,
+    scope: {},
+    controller: SidebarController,
+    /**
+    * {{
+    *   show: boolean,
+    *   placeUnderSibling: ?string, a selector for an element the sidebar should stick to
+    *   topOffset: ?number, sidebar top offset
+    * }}
+    */
+    bindToController: {
+      show: '=',
+      placeUnderSibling: '@',
+      topOffset: '=?',
+      dialogIsActive: '=?'
+    },
+    template,
+    controllerAs: 'sidebar'
+  };
+}
+
+function rgSidebarToggleButtonDirective() {
+  return {
+    restrict: 'E',
+    transclude: true,
+    replace: true,
+    scope: {},
+    controller() {
+      this.chevronRight = chevronRight;
+      this.chevronLeft = chevronLeft;
+    },
+    bindToController: {
+      model: '=',
+      dialogIsActive: '=?'
+    },
+    template: buttonTemplate,
+    controllerAs: 'button'
+  };
+}
+
+angularModule.directive('rgSidebar', rgSidebarDirective);
+angularModule.directive('rgSidebarToggleButton', rgSidebarToggleButtonDirective);
+
+export default angularModule.name;

package/components/sidebar-ng/sidebar-ng.stories.js

@@ -0,0 +1,94 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import '../link/link__legacy.css';
+import SelectNG from '../select-ng/select-ng';
+
+import SidebarNG from './sidebar-ng';
+
+export default {
+  title: 'Legacy Angular/Sidebar Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    notes:
+      'Provides an Angular wrapper for Sidebar. To make sidebar have fixed positioning under some other element (e.g. toolbar), a selector for that element should be passed as placeUnderSibling parameter.',
+    hermione: {skip: true}
+  }
+};
+
+export const basic = () => {
+  angular.module(APP_NAME, [SidebarNG, SelectNG]);
+
+  return `
+      <div ng-init="isShowSideBar = true" style="position: relative;">
+        <rg-sidebar
+          show="isShowSideBar"
+          place-under-sibling=".some-toolbar"
+          top-offset="1">
+          <div>
+
+            <img alt="Avatar" class="ring-sidebar__avatar" ng-src="http://via.placeholder.com/64x64"/>
+
+            <h3 class="ring-sidebar__title">
+              <a class="ring-link" href="#">User Link</a>
+            </h3>
+
+            <div class="ring-sidebar__section">
+              <span class="ring-sidebar__section-title" translate>Full Name</span>
+              <div class="ring-sidebar__section-text">Value</div>
+            </div>
+          </div>
+        </rg-sidebar>
+        <div class="some-toolbar">
+          Toolbar to place before sidebar
+          <rg-sidebar-toggle-button model="isShowSideBar">Toggle sidebar
+          </rg-sidebar-toggle-button>
+        </div>
+      </div>
+    `;
+};
+
+basic.storyName = 'basic';
+
+export const aLotOfContent = () => {
+  angular.module(APP_NAME, [SidebarNG, SelectNG]);
+
+  let bigContent = '';
+  let after = '';
+
+  for (let i = 0; i < 100; i++) {
+    bigContent += ` ${Math.random()}<br/>`;
+    after += ` ${Math.random()}<br/>`;
+  }
+
+  bigContent += '===== The end of sidebar =====';
+
+  return `
+      <div>
+        <div>
+          <div>Lorem</div>
+          <div>Ipsum</div>
+          <div>Lorem</div>
+          <div>Lorem</div>
+          <div>Lorem</div>
+        </div>
+        <div ng-init="isShowSideBar = true" style="position: relative;">
+          <rg-sidebar show="isShowSideBar" place-under-sibling=".some-toolbar" top-offset="1">
+            <div>===== The start of sidebar =====
+              <rg-select options="item in []"></rg-select>
+              <br/>${bigContent}</div>
+          </rg-sidebar>
+          <div class="some-toolbar">
+            Toolbar to place before sidebar
+            <rg-sidebar-toggle-button model="isShowSideBar">Toggle sidebar
+            </rg-sidebar-toggle-button>
+          </div>
+        </div>
+        <div>${after}</div>
+      </div>
+    `;
+};
+
+aLotOfContent.storyName = 'a lot of content';

package/components/sidebar-ng/sidebar-ng.test.js

@@ -0,0 +1,37 @@
+import 'angular';
+import 'angular-mocks';
+import Sidebar from './sidebar-ng';
+
+describe('Sidebar Ng', () => {
+  let scope;
+  let element;
+  let $compile;
+
+  beforeEach(window.module(Sidebar));
+
+  /* global inject */
+  beforeEach(inject(($rootScope, _$compile_) => {
+    scope = $rootScope.$new();
+    $compile = _$compile_;
+
+    scope.isShowSidebar = true;
+
+    element = $compile('<div>' +
+      '<rg-sidebar show="isShowSidebar" place-under-sibling=".test-sibling">Test sidebar message</rg-sidebar>' +
+      '<div class="test-sibling" style="height: 100px;">test</div>' +
+    '</div>')(scope);
+
+    scope.$digest();
+  }));
+
+  it('Should be showed if showSidebar = true', () => {
+    element[0].should.contain('.ring-sidebar_active');
+  });
+
+  it('Should not be showed if showSidebar = false', () => {
+    scope.isShowSidebar = false;
+    scope.$digest();
+
+    element[0].should.not.contain('.ring-sidebar_active');
+  });
+});

package/components/sidebar-ng/sidebar-ng__button-template.js

@@ -0,0 +1,18 @@
+export default `<span>
+  <rg-button
+    ng-click="button.model = !button.model"
+    ng-disabled="button.dialogIsActive"
+  >
+    <rg-icon
+      ng-show="button.model"
+      glyph="{{button.chevronRight}}"
+    ></rg-icon>
+
+    <rg-icon
+      ng-show="!button.model"
+      glyph="{{button.chevronLeft}}"
+    ></rg-icon>
+
+    <span ng-transclude></span>
+  </rg-button>
+</span>`;

package/components/sidebar-ng/sidebar-ng__template.js

@@ -0,0 +1,10 @@
+export default `<div
+  class="ring-sidebar"
+  rg-place-under="{{sidebar.placeUnderSibling}}"
+  place-top-offset="{{sidebar.topOffset}}"
+  sync-height="true"
+  ng-class="{'ring-sidebar_active': sidebar.show}"
+>
+  <rg-dialog in-sidebar="true" active="sidebar.dialogIsActive"></rg-dialog>
+  <div class="ring-sidebar__content" ng-transclude ng-if="!sidebar.dialogIsActive"></div>
+</div>`;