You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by bf...@apache.org on 2012/10/23 00:20:21 UTC
[2/2] Add tooltips to form fields
http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/8bb273de/ui/scripts/ui/widgets/toolTip.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/widgets/toolTip.js b/ui/scripts/ui/widgets/toolTip.js
new file mode 100644
index 0000000..84df8fe
--- /dev/null
+++ b/ui/scripts/ui/widgets/toolTip.js
@@ -0,0 +1,160 @@
+// Copyright 2012 Citrix Systems, Inc. Licensed under the
+// Apache License, Version 2.0 (the "License"); you may not use this
+// file except in compliance with the License. Citrix Systems, Inc.
+// reserves all rights not expressly granted by 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.
+//
+// Automatically generated by addcopyright.py at 04/03/2012
+(function($,cloudStack) {
+
+ $.widget("cloudStack.toolTip", {
+ _init: function(args) {
+ var context = this.options.context;
+ var dataProvider = this.options.dataProvider;
+ var actions = this.options.actions;
+ var docID = this.options.docID;
+ var text = cloudStack.docs[docID].desc;
+ var $text = $('<p>').html(text).appendTo($tooltip);
+ var $tooltip = $('<div>').addClass('tooltip-box');
+ var $text = $('<p>').html(text).appendTo($tooltip);
+ var $container = $('#cloudStack3-container');
+ $tooltip.appendTo($container);
+
+ if (this.options.mode == 'hover'){
+ $(this.element).hover(hoverHandler,outHandler);
+ } else if (this.options.mode == 'focus'){
+ $(this.element).focus(hoverHandler);
+ $(this.element).blur(outHandler);
+ } else if (this.options.mode == 'manual'){}
+
+ $(this.element).data('$tooltip', $tooltip);
+
+ // Add arrow
+ $tooltip.append($('<div></div>').addClass('arrow'));
+
+ $tooltip.hide();
+ },
+
+ show: function(){
+ var o = this.options;
+
+ if(o.mode=='manual'){
+ prepare(this.element,o);
+ }
+
+ $(o.toolTip).show();
+ },
+
+ hide: function(){
+ var o = this.options;
+ $(o.toolTip).hide();
+ }
+ });
+
+ $.extend($.cloudStack.toolTip, {
+ defaults: {
+ toolTip: '',
+ onShow: function(sender){
+ //Flipping arrow and text
+
+ var $tooltip = $('.tooltip-box');
+
+ //Switch styles based on how close to viewport border
+
+ if($(window).width()-sender.target.offset().left <= $tooltip.width()) {
+
+ $('.tooltiptextleft',$tooltip).removeClass('tooltiptextleft').addClass('tooltiptextright');
+ $('.tooltiparrowleft',$tooltip).removeClass('tooltiparrowleft').addClass('tooltiparrowright');
+
+ }
+ else{
+ $('.tooltiptextright',$tooltip).removeClass('tooltiptextright').addClass('tooltiptextleft');
+ $('.tooltiparrowright',$tooltip).removeClass('tooltiparrowright').addClass('tooltiparrowleft');
+ }
+
+ },
+ onHide: undefined,
+ mode: 'hover',
+ // provide a speed for the animation
+ speed: 1000,
+ // provide a period for the popup to keep showing
+ period: 2000,
+ // default the animation algorithm to the basic slide
+ animation:'slide'
+ },
+ animations: {
+ slide: function(e, options) {
+
+ },
+ fade: function(e, options) {
+
+ }
+ }
+ });
+
+ function hoverHandler(event)
+ {
+ //Fetch Options
+ var o = $.data(this,'toolTip').options;
+
+ //Element who raised the event
+ var $this = $(this);
+
+ //Helper functon for Positioning and Calling Callback function
+ prepare($this,o);
+
+ //Call Show method of the tooltip Widget,
+ //Show method should play on any required animations
+ $.data(this,'$tooltip').show();
+ };
+ function outHandler(event)
+ {
+ //Fetch Options
+ var o = $.data(this,'toolTip').options;
+
+ //Get tooptip Element
+ var $tooltip = $(o.toolTip);
+
+ //If call back method defined, initiate the call
+ if($.data(this,'toolTip').options.onHide){
+ $.data(this,'toolTip').options.onHide.call(this, {target:$(this)});
+ }
+
+ //Call Hide method of the tooltip Widget,
+ //Hide method should play on any required animations
+ $.data(this,'$tooltip').hide();
+ };
+ function prepare(jObj, options)
+ {
+ var $tooltip = $(options.tooltip);
+ var element = jObj[0];
+ var offset = jObj.offset();
+
+ var left = offset.left + jObj.width();
+ var top = offset.top-5;
+
+ if(options.onShow){
+ options.onShow.call(this, {target:jObj});
+ }
+
+ if($(window).width()-offset.left <= $tooltip.width()) {
+ left = offset.left - $tooltip.width();
+ }
+ else{
+ left += 35;
+ }
+ $tooltip.css({position:'absolute', top:top+'px', left:left+'px'});
+
+ // Fix overlay
+ setTimeout(function() {
+ $('.tooltip-box').zIndex($(':ui-dialog').zIndex() + 1); });
+
+ };
+
+
+})(jQuery,cloudStack);
http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/8bb273de/ui/scripts/vpc.js
----------------------------------------------------------------------
diff --git a/ui/scripts/vpc.js b/ui/scripts/vpc.js
index c9e4406..a79006e 100644
--- a/ui/scripts/vpc.js
+++ b/ui/scripts/vpc.js
@@ -633,7 +633,8 @@
title: 'label.add.new.gateway',
desc: 'message.add.new.gateway.to.vpc',
fields: {
- physicalnetworkid: {
+ physicalnetworkid: {
+ docID: 'helpVPCGatewayPhysicalNetwork',
label: 'label.physical.network',
select: function(args) {
$.ajax({
@@ -652,10 +653,22 @@
});
}
},
- vlan: { label: 'label.vlan', validation: { required: true }},
- ipaddress: { label: 'label.ip.address', validation: { required: true }},
- gateway: { label: 'label.gateway', validation: { required: true }},
- netmask: { label: 'label.netmask', validation: { required: true }}
+ vlan: {
+ label: 'label.vlan', validation: { required: true },
+ docID: 'helpVPCGatewayVLAN'
+ },
+ ipaddress: {
+ label: 'label.ip.address', validation: { required: true },
+ docID: 'helpVPCGatewayIP'
+ },
+ gateway: {
+ label: 'label.gateway', validation: { required: true },
+ docID: 'helpVPCGatewayGateway'
+ },
+ netmask: {
+ label: 'label.netmask', validation: { required: true },
+ docID: 'helpVPCGatewayNetmask'
+ }
}
},
action: function(args) {
@@ -1956,11 +1969,14 @@
createForm: {
title: 'label.add.new.tier',
fields: {
- name: { label: 'label.name',
- validation: { required: true }
- },
+ name: {
+ label: 'label.name',
+ validation: { required: true },
+ docID: 'helpTierName'
+ },
networkOfferingId: {
label: 'label.network.offering',
+ docID: 'helpTierNetworkOffering',
validation: { required: true },
dependsOn: 'zoneId',
select: function(args) {
@@ -2025,10 +2041,12 @@
},
gateway: {
label: 'label.gateway',
+ docID: 'helpTierGateway',
validation: { required: true }
},
netmask: {
label: 'label.netmask',
+ docID: 'helpTierNetmask',
validation: { required: true }
}
}