aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/app/scripts/directives/utils/wizard_steps
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/app/scripts/directives/utils/wizard_steps')
-rw-r--r--catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.html16
-rw-r--r--catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.less69
-rw-r--r--catalog-ui/app/scripts/directives/utils/wizard_steps/sdc-wizard-steps.ts139
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;
+ }
+ }
+ };
+
+ }
+
+}