diff options
Diffstat (limited to 'catalog-ui/app/scripts/directives/utils/wizard_steps')
3 files changed, 224 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.html b/catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.html new file mode 100644 index 0000000000..0c9b97a58c --- /dev/null +++ b/catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.html @@ -0,0 +1,16 @@ +<ul class="sdc-wizard-step"> + <li class="step" data-ng-repeat="step in steps track by $index"> + <div class="step-wrapper"> + <button class="step-index" + data-ng-click="controllerStepClicked(step.name)" + data-ng-class="{'selected': step.selected===true, 'valid': step.valid===true, 'disabled': !step.enabled || step.enabled===false}"> + {{$index+1}} + </button> + <span class="step-name" + data-ng-class="{'selected': step.selected===true, 'valid': step.valid===true, 'disabled': !step.enabled || step.enabled===false}">{{step.name}} + </span> + </div> + <div class="step-seperator"></div> + </li> +</ul> + diff --git a/catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.less b/catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.less new file mode 100644 index 0000000000..8b777923a0 --- /dev/null +++ b/catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.less @@ -0,0 +1,69 @@ +@circle-radius: 18px; +@gap: 70px; +@gap-width: 2px; +@valid-width: 2px; + +ul.sdc-wizard-step { + padding: 0; + margin: 0; + + li.step { + position: relative; + list-style: none; + + .step-wrapper { + line-height: @circle-radius*2; + height: @circle-radius*2; + margin-bottom: @gap; + + button.step-index { + ._w-sdc-wizard-step-btn(@circle-radius); + z-index: 99; + display: inline-block; + + &.valid { + display: inline-block; + } + + } + + span.step-name { + .b_7; + line-height: @circle-radius; + display: inline-block; + word-wrap: break-word; + width: calc(~"100%" - @circle-radius*2 + 4); + vertical-align: middle; + padding-left: 10px; + white-space: normal; + + &.selected { + .a_7; + font-weight: bold; + } + + &.disabled { + border: none; + background-color: transparent; + } + + } + } + + .step-seperator { + border-right: @gap-width solid @color_n; + height: @gap + @circle-radius*2; + position: absolute; + top: @circle-radius*2-@circle-radius; + left: @circle-radius - @gap-width/2; + } + + } + + li.step:last-child { + .step-seperator { + display: none; + } + } + +} diff --git a/catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.ts b/catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.ts new file mode 100644 index 0000000000..9cad36ab78 --- /dev/null +++ b/catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.ts @@ -0,0 +1,139 @@ +/*- + * ============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'; + + export interface IWizardStep { + name: string; + selected?: boolean; + valid?:boolean; + enabled?:boolean; + callback: Function; + } + + export interface ISdcWizardStepScope extends ng.IScope { + steps:Array<IWizardStep>; + control:any; + internalControl:any; + + stepClicked(stepName:string):void; + controllerStepClicked(stepName:string):void; + + setStepValidity(stepName:string, valid:boolean):void; + controllerSetStepValidity(step:IWizardStep, valid:boolean):void; + } + + export interface SdcWizardStepMethods { + unSelectAllSteps():void; + selectStep(step:IWizardStep):void; + } + + export class SdcWizardStepDirective implements ng.IDirective { + + constructor(private $templateCache:ng.ITemplateCacheService) { + } + + scope = { + steps: '=', + control: '=' + }; + + public replace = false; + public restrict = 'E'; + public transclude = true; + public controller = SdcWizardStepDirectiveController; + + template = ():string => { + return this.$templateCache.get('/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.html'); + }; + + link = (scope:ISdcWizardStepScope, $elem:JQuery, attr:any, controller:SdcWizardStepDirectiveController) => { + scope.internalControl = scope.control || {}; + scope.internalControl.stepClicked = (step:string):void => { + scope.controllerStepClicked(step); + }; + + scope.internalControl.setStepValidity = (step:IWizardStep, valid:boolean):void => { + scope.controllerSetStepValidity(step, valid); + }; + } + + public static factory = ($templateCache:ng.ITemplateCacheService)=> { + return new SdcWizardStepDirective($templateCache); + }; + + } + + SdcWizardStepDirective.factory.$inject = ['$templateCache']; + + export class SdcWizardStepDirectiveController { + static $inject = ['$element', '$scope']; + + methods:SdcWizardStepMethods = <SdcWizardStepMethods>{}; + + constructor(public $element: JQuery, + public $scope: ISdcWizardStepScope) { + + this.initMethods(); + this.initScope(); + } + + private initScope = ():void => { + + this.$scope.controllerStepClicked = (stepName:string):void => { + let selectedStep:IWizardStep = <IWizardStep>_.find(this.$scope.steps, function (item) { + return item.name === stepName; + }); + + if (selectedStep && selectedStep.enabled===true){ + let result:boolean = selectedStep.callback(); + if (result===true){ + this.methods.unSelectAllSteps(); + this.methods.selectStep(selectedStep); + } + } + }; + + this.$scope.controllerSetStepValidity = (step:IWizardStep, valid:boolean):void => { + step.valid=valid; + }; + + }; + + private initMethods = ():void => { + + this.methods.unSelectAllSteps = ():void => { + this.$scope.steps.forEach(function (step) { + step.selected = false; + }); + } + + this.methods.selectStep = (step:IWizardStep):void => { + if (step.enabled===true){ + step.selected=true; + } + } + }; + + } + +} |