diff options
Diffstat (limited to 'catalog-ui/app/scripts/directives/utils/page-selector')
3 files changed, 166 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/directives/utils/page-selector/page-selector.html b/catalog-ui/app/scripts/directives/utils/page-selector/page-selector.html new file mode 100644 index 0000000000..4fbea447e2 --- /dev/null +++ b/catalog-ui/app/scripts/directives/utils/page-selector/page-selector.html @@ -0,0 +1,9 @@ +<div class="i-sdc-left-sidebar-page-nav"> + <ul data-ng-class="{'expanded': expanded===true}"> + <li data-ng-repeat="item in list | filter:exceptSelectedComparator" + data-ng-click="expanded=false" + class="sidebar-page-nav-item" + ui-sref="{{item.url}}">{{item.name}}</li> + </ul> + <div class="sidebar-page-nav-item-selected" data-ng-click="openCollapse()">{{selected}}<span data-ng-class="{'expanded': expanded===true}"></span></div> +</div> diff --git a/catalog-ui/app/scripts/directives/utils/page-selector/page-selector.less b/catalog-ui/app/scripts/directives/utils/page-selector/page-selector.less new file mode 100644 index 0000000000..da70218263 --- /dev/null +++ b/catalog-ui/app/scripts/directives/utils/page-selector/page-selector.less @@ -0,0 +1,51 @@ +.i-sdc-left-sidebar-page-nav { + + height: 64px; + + .sidebar-page-nav-item-selected, + .sidebar-page-nav-item { + .i_11; + background-color: #e0e5e9; + width: 100%; + height: 64px; + border-bottom: solid 1px #cccccc; + line-height: 64px; + text-align: center; + cursor: pointer; + vertical-align: middle; + list-style: none; + padding: 0; + margin: 0; + } + + .sidebar-page-nav-item-selected { + z-index: 1010; + position: absolute; + top: 0px; + } + + .sidebar-page-nav-item-selected span { + .sprite; + .sprite.table-arrow; + position: absolute; + top: 28px; + margin-left: 10px; + + &.expanded { + .sprite; + .sprite.table-arrow.opened; + top: 30px; + } + } + + ul { + position: absolute; + top: 0px; + padding: 0; + width: 100%; + z-index: 99; + visibility: hidden; //Need this and not display none, so I can use the function: getComputedStyle + .box-shadow(0px 4px 2px -2px rgba(0, 0, 0, 0.36)); + } + +} diff --git a/catalog-ui/app/scripts/directives/utils/page-selector/page-selector.ts b/catalog-ui/app/scripts/directives/utils/page-selector/page-selector.ts new file mode 100644 index 0000000000..c185fe1c15 --- /dev/null +++ b/catalog-ui/app/scripts/directives/utils/page-selector/page-selector.ts @@ -0,0 +1,106 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// <reference path="../../../references"/> +module Sdc.Directives { + 'use strict'; + + class ListItem { + name; + url; + } + + export interface IPageSelectorScope extends ng.IScope { + selected:string; + expanded: boolean; + list:Array<ListItem>; + exceptSelectedComparator(actual, expected):boolean; + openCollapse(); + } + + export class PageSelectorDirective implements ng.IDirective { + + constructor(private $templateCache:ng.ITemplateCacheService) { + } + + scope = { + list: '=', + selected: '@', + }; + + public replace = true; + public restrict = 'E'; + public transclude = false; + + private ulElement:HTMLElement; + private itemHeight:number = 64; + + private getUlHeight = ():number => { + let tmp:string = getComputedStyle(this.ulElement).height; + //console.log("tmp: " + tmp); + let ulHeight:number = parseInt(tmp.substr(0,tmp.length-2)); + //console.log("ulHeight: " + ulHeight); + return ulHeight; + }; + + template = ():string => { + return this.$templateCache.get('/app/scripts/directives/utils/page-selector/page-selector.html'); + }; + + link = (scope:IPageSelectorScope, $elem:any) => { + scope.expanded=false; + + window.setTimeout(() => { + this.ulElement = angular.element(".i-sdc-left-sidebar-page-nav ul")[0]; + console.log("this.ulElement: " + this.ulElement); + console.log("this.itemHeight: " + this.itemHeight); + this.ulElement.style.top = (this.itemHeight - this.getUlHeight() - 5) + 'px'; + this.ulElement.style.visibility = 'visible'; + },10); + + this.ulElement = angular.element(".i-sdc-left-sidebar-page-nav ul")[0]; + + scope.exceptSelectedComparator = (actual) => { + if (actual.name===scope.selected) { + return false; + } + return true; + }; + + scope.openCollapse = ():void => { + scope.expanded=!scope.expanded; + if (scope.expanded===true) { + this.ulElement.style.transition = 'top 0.4s ease-out'; + this.ulElement.style.top = this.itemHeight + 'px'; + } else { + this.ulElement.style.transition = 'top 0.4s ease-in'; + this.ulElement.style.top = (this.itemHeight - this.getUlHeight() - 5) + 'px'; + } + }; + + }; + + public static factory = ($templateCache:ng.ITemplateCacheService)=> { + return new PageSelectorDirective($templateCache); + }; + + } + + PageSelectorDirective.factory.$inject = ['$templateCache']; +} |