@jetbrains/ring-ui 5.1.1 → 6.0.2-beta.0

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

@@ -1,113 +0,0 @@
-/* eslint-disable angular/no-angular-mock */
-
-import angular from 'angular';
-import 'angular-mocks';
-
-import sniffer from '../global/sniffer';
-
-import ShortcutsNgHint from './shortcuts-hint-ng';
-
-describe('Shortcuts Hint Ng', () => {
-  beforeEach(angular.mock.module(ShortcutsNgHint));
-
-  describe('shortcut key symbol filter', () => {
-    let shortcutKeySymbolFilter;
-
-    /* global inject */
-    beforeEach(inject(_shortcutKeySymbolFilter_ => {
-      shortcutKeySymbolFilter = _shortcutKeySymbolFilter_;
-    }));
-
-    it('Should replace + with spaces on mac os', () => {
-      sandbox.stub(sniffer, 'os').value({name: 'macos'});
-      shortcutKeySymbolFilter('S1+S2').should.be.equal('S1S2');
-    });
-
-    it('Should replace + with spaces on windows', () => {
-      sandbox.stub(sniffer, 'os').value({name: 'windows'});
-      shortcutKeySymbolFilter('S1+S2').should.be.equal('S1+S2');
-    });
-
-    it('Should capitalize key if is not in key mapping', () => {
-      sandbox.stub(sniffer, 'os').value({name: 'macos'});
-      shortcutKeySymbolFilter('f2+e').should.be.equal('F2E');
-    });
-
-    it('Should replace action keys with symbols on mac', () => {
-      sandbox.stub(sniffer, 'os').value({name: 'macos'});
-      shortcutKeySymbolFilter('ctrl+alt+shift+enter+up+down+left+right+backspace').
-        should.be.equal('⌃⌥⇧⏎↑↓←→⌫');
-    });
-
-    it('Should replace action keys with key names on windows', () => {
-      sandbox.stub(sniffer, 'os').value({name: 'windows'});
-      shortcutKeySymbolFilter('ctrl+alt+shift+enter+up+down+left+right+backspace+f4').
-        should.be.equal('Ctrl+Alt+Shift+Enter+↑+↓+←+→+Backspace+F4');
-    });
-  });
-
-  describe('shortcut search filter', () => {
-    let shortcutSearchFilter;
-    let fakeShortcuts;
-
-    beforeEach(inject(_shortcutSearchFilter_ => {
-      shortcutSearchFilter = _shortcutSearchFilter_;
-
-      fakeShortcuts = [
-        {key: 'shift+left+up', titles: ['combination first']},
-        {key: 'ctrl+enter', titles: ['some second']},
-        {key: 'meta+alt+down', titles: ['combination third']}
-      ];
-    }));
-
-    it('Should not filter if query is empty', () => {
-      const filtered = shortcutSearchFilter(fakeShortcuts, undefined);
-
-      filtered.should.be.deep.equal(fakeShortcuts);
-    });
-
-    it('Should search by shortcut title', () => {
-      const filtered = shortcutSearchFilter(fakeShortcuts, 'second');
-
-      filtered.length.should.be.equal(1);
-      filtered[0].should.be.equal(fakeShortcuts[1]);
-    });
-
-    it('Should search by shortcut key', () => {
-      const filtered = shortcutSearchFilter(fakeShortcuts, 'down');
-
-      filtered.length.should.be.equal(1);
-      filtered[0].should.be.equal(fakeShortcuts[2]);
-    });
-
-    it('Should search by shortcut symbol on mac', () => {
-      sandbox.stub(sniffer, 'os').value({name: 'macos'});
-      const filtered = shortcutSearchFilter(fakeShortcuts, '⌥');
-
-      filtered.length.should.be.equal(1);
-      filtered[0].should.be.equal(fakeShortcuts[2]);
-    });
-
-    it('Should find multiple results', () => {
-      const filtered = shortcutSearchFilter(fakeShortcuts, 'combination');
-
-      filtered.length.should.be.equal(2);
-    });
-
-    it('Should support multiple keys', () => {
-      const filtered = shortcutSearchFilter([
-        {key: ['shift+left+up', 'shift+left+up'], titles: ['combination first']}
-      ], 'combination');
-
-      filtered.length.should.be.equal(1);
-    });
-
-    it('Should support multiple titles', () => {
-      const filtered = shortcutSearchFilter([
-        {key: ['shift+left+up'], titles: ['combination first', 'combination second']}
-      ], 'second');
-
-      filtered.length.should.be.equal(1);
-    });
-  });
-});

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

@@ -1,48 +0,0 @@
-export default `<div class="shortcuts-hint">
-
-  <div class="shortcuts-hint__search-input-wrapper">
-    <rg-input
-      ng-attr-placeholder="{{hintPopupCtrl.searchPlaceholder}}"
-      ng-model="hintPopupCtrl.searchText"
-    ></rg-input>
-    <rg-icon
-      class="shortcuts-hint__search-icon"
-      glyph="{{hintPopupCtrl.searchIcon}}"
-    ></rg-icon>
-  </div>
-
-  <div class="shortcuts-hint__columns">
-    <div class="shortcuts-hint__table">
-      <div ng-repeat="mode in hintPopupCtrl.modes"
-        class="shortcuts-hint__shortcut-block">
-
-        <div class="shortcuts-hint__table-title" ng-if="mode.title">
-          <div></div>
-          <div class="shortcuts-hint__shortcuts-title">{{hintPopupCtrl.getTitle(mode.title)}}</div>
-        </div>
-
-        <div ng-repeat="shortcut in mode.shortcuts | shortcutSearch:hintPopupCtrl.searchText"
-          class="shortcuts-hint__table-row">
-          <div class="shortcuts-hint__shortcut-cell">
-            <div class="shortcuts-hint__shortcut"
-              ng-if="hintPopupCtrl.isArray(shortcut.key)"
-              ng-repeat="key in shortcut.key track by $index">
-              {{key | shortcutKeySymbol}}
-            </div>
-            <span class="shortcuts-hint__shortcut"
-              ng-if="!hintPopupCtrl.isArray(shortcut.key)">{{shortcut.key | shortcutKeySymbol}}</span>
-          </div>
-          <div class="shortcuts-hint__hint">
-            <span ng-repeat="title in shortcut.titles">
-              {{hintPopupCtrl.getTitle(title)}}
-              <br ng-if="!$last">
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div rg-template="hintPopupCtrl.tailTemplate"></div>
-
-</div>`;

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

@@ -1,285 +0,0 @@
-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-ng/sidebar-ng.examples.js

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

@@ -1,100 +0,0 @@
-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 {
-  static $inject = ['$scope'];
-
-  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;
-        }
-      });
-    };
-  }
-}
-
-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.test.js

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

@@ -1,18 +0,0 @@
-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>`;