cloudstack-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From bfede...@apache.org
Subject [2/2] Add tooltips to form fields
Date Mon, 22 Oct 2012 22:20:21 GMT
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 }
               }
             }


Mime
View raw message