From 451a3400b76511393c62a444f588a4ed15f4a549 Mon Sep 17 00:00:00 2001 From: Michael Lando Date: Sun, 19 Feb 2017 10:28:42 +0200 Subject: Initial OpenECOMP SDC commit Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b Signed-off-by: Michael Lando --- .../utils/sdc_error_tooltip/sdc_error_tooltip.ts | 109 +++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 catalog-ui/app/scripts/directives/utils/sdc_error_tooltip/sdc_error_tooltip.ts (limited to 'catalog-ui/app/scripts/directives/utils/sdc_error_tooltip/sdc_error_tooltip.ts') diff --git a/catalog-ui/app/scripts/directives/utils/sdc_error_tooltip/sdc_error_tooltip.ts b/catalog-ui/app/scripts/directives/utils/sdc_error_tooltip/sdc_error_tooltip.ts new file mode 100644 index 0000000000..dc30ea7f41 --- /dev/null +++ b/catalog-ui/app/scripts/directives/utils/sdc_error_tooltip/sdc_error_tooltip.ts @@ -0,0 +1,109 @@ +/*- + * ============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========================================================= + */ +/// +module Sdc.Directives { + 'use strict'; + + export interface ISdcErrorTooltipScope extends ng.IScope { + alignToSelector: string; + topMargin: string; + } + + export class SdcErrorTooltipDirective implements ng.IDirective { + + constructor(private $templateCache:ng.ITemplateCacheService) { + } + + scope = { + alignToSelector: '@', // Jquery selector to align to + topMargin: '@' // The margin from the top, in case there is label or not the top margin is different. + }; + + public replace = false; + public restrict = 'E'; + public transclude = true; + + template = ():string => { + return this.$templateCache.get('/app/scripts/directives/utils/sdc_error_tooltip/sdc_error_tooltip.html'); + }; + + link = (scope:ISdcErrorTooltipScope, $elem:any) => { + let _self = this; + + $elem.addClass("i-sdc-form-item-error-icon"); + + // Calculate the position of the elements after they loaded to the dom. + window.setTimeout(function(){ + _self.calculatePosition(scope, $elem); + },100); + + $elem.bind('mouseover', function(){ + $(".i-sdc-form-item-error-message",$elem).css("display", "block"); + }); + + $elem.bind('mouseleave', function(){ + $(".i-sdc-form-item-error-message",$elem).css("display", "none"); + }); + + } + + private calculatePosition(scope:ISdcErrorTooltipScope, $elem:any):void { + let leftMargin = 13; + let topMargin = scope.topMargin? parseInt(scope.topMargin) : 10; + + if (scope.alignToSelector) { + // Set the position of the error, in case user add align-to-selector attribute + let jObj = $(scope.alignToSelector); + if (jObj.length > 0) { + let height1 = jObj.outerHeight(); + $elem.css('left', jObj.position().left + jObj.outerWidth() + leftMargin); + //$elem.css('top', jObj.position().top + topMargin + (height1 / 2)); + $elem.css('top', jObj.position().top + (height1 / 2) - 5); // Label margin is: 2 + } + } else { + // Set the position of the error, according to the input element. + let inputElm = $elem.siblings('input'); + let textareaElm = $elem.siblings('textarea'); + let selectElm = $elem.siblings('select'); + if (inputElm.length > 0) { + $elem.css('left', inputElm.outerWidth() + leftMargin); + $elem.css('top', inputElm.position().top + topMargin); + } else if (textareaElm.length > 0) { + $elem.css('left', textareaElm.outerWidth() + leftMargin); + let height2 = textareaElm.outerHeight(); + let elmHeight2 = $elem.outerHeight(); + //let top = textareaElm.position().top; + $elem.css('bottom', (height2 - (elmHeight2 / 2)) / 2); + } else if (selectElm.length > 0) { + $elem.css('left', selectElm.outerWidth() + leftMargin); + $elem.css('top', selectElm.position().top + topMargin); + } + } + } + + public static factory = ($templateCache:ng.ITemplateCacheService)=> { + return new SdcErrorTooltipDirective($templateCache); + }; + + } + + SdcErrorTooltipDirective.factory.$inject = ['$templateCache']; + +} -- cgit 1.2.3-korg