dialog.js

// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you 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.
(function($, cloudStack) {
  cloudStack.dialog = {
    /**
     * Error message form
     *
     * Returns callback, that can be plugged into a standard data provider response
     */
    error: function(callback) {
      return function(args) {
        var message = args.message ? args.message : args;
        if (message) cloudStack.dialog.notice({ message: message });

        if (callback) callback();
      };
    },

    /**
     * Dialog with form
     */
    createForm: function(args) {
      var $formContainer = $('<div>').addClass('form-container');
      var $message = $('<span>').addClass('message').appendTo($formContainer).html(
        _l(args.form.desc)
      );
      var $form = $('<form>').appendTo($formContainer)
            .submit(function() {
              $(this).closest('.ui-dialog').find('button.ok').click();

              return false;
            });

      var createLabel = _l(args.form.createLabel);
      var $submit = $('<input>')
            .attr({
              type: 'submit'
            })
            .hide()
            .appendTo($form);

      // Render fields and events
      var fields = $.map(args.form.fields, function(value, key) {
        return key;
      })
			
      $(fields).each(function() {
        var key = this;
        var field = args.form.fields[key];

        var $formItem = $('<div>')
              .addClass('form-item')
              .attr({ rel: key });

        if (field.hidden || field.isHidden) $formItem.hide();

        $formItem.appendTo($form);

        //Handling Escape KeyPress events
        /*   $('.ui-dialog').keypress(function(event) {
         if ( event.which == 27 ) {
         event.stopPropagation();
         }
         });

         $(document).ready(function(){
         $('.ui-dialog').keydown(function(event) {
         if(event.keyCode == 27)
         {
         alert("you pressed the Escape key");
         event.preventdefault();
         }
         })
         });

         $(':ui-dialog').dialog({
         closeOnEscape: false
         }); */
        // Label field
				
				//if( field.label == 'label.network.offering' || field.label == 'label.guest.gateway')
				//  debugger;
				
        var $name = $('<div>').addClass('name')
              .appendTo($formItem)
              .append(
                $('<label>').html(_l(field.label) + ':')
              );

        // red asterisk
				var $astersikSpan = $('<span>').addClass('field-required').html('*');
				$name.find('label').prepend($astersikSpan);        
				if (field.validation == null || field.validation.required == false) {
          $astersikSpan.hide();
        }

        // Tooltip description
        if (field.desc) {
          $formItem.attr({ title: _l(field.desc) });
        }

        // Input area
        var $value = $('<div>').addClass('value')
              .appendTo($formItem);
        var $input, $dependsOn, selectFn, selectArgs;
        var dependsOn = field.dependsOn;

        // Depends on fields
        if (field.dependsOn) {
          $formItem.attr('depends-on', dependsOn);
          $dependsOn = $form.find('input, select').filter(function() {
            return $(this).attr('name') === dependsOn;
          });

          if ($dependsOn.is('[type=checkbox]')) {
            var isReverse = args.form.fields[dependsOn].isReverse;

            // Checkbox
            $dependsOn.bind('click', function(event) {
              var $target = $(this);
              var $dependent = $target.closest('form').find('[depends-on=\'' + dependsOn + '\']');

              if (($target.is(':checked') && !isReverse) ||
                  ($target.is(':unchecked') && isReverse)) {
                $dependent.css('display', 'inline-block');
                $dependent.each(function() {
                  if ($(this).data('dialog-select-fn')) {
                    $(this).data('dialog-select-fn')();
                  }
                });
              } else if (($target.is(':unchecked') && !isReverse) ||
                         ($target.is(':checked') && isReverse)) {
                $dependent.hide();
              }

              $dependent.find('input[type=checkbox]').click();

              if (!isReverse) {
                $dependent.find('input[type=checkbox]').attr('checked', false);
              } else {
                $dependent.find('input[type=checkbox]').attr('checked', true);
              }

              return true;
            });

            // Show fields by default if it is reverse checkbox
            if (isReverse) {
              $dependsOn.click();
            }
          }
        }

        // Determine field type of input
        if (field.select) {
          selectArgs = {
            context: args.context,
            response: {
              success: function(args) {
                $(args.data).each(function() {
                  var id = this.id;
                  var description = this.description;

                  if (args.descriptionField)
                    description = this[args.descriptionField];
                  else
                    description = this.description;

                  var $option = $('<option>')
                        .appendTo($input)
                        .val(_s(id))
                        .html(_s(description));
                });

                if (field.defaultValue) {
                  $input.val(_s(field.defaultValue));
                }

                $input.trigger('change');
              }
            }
          };

          selectFn = field.select;
          $input = $('<select>')
            .attr({ name: key })
            .data('dialog-select-fn', function(args) {
              selectFn(args ?
                       $.extend(true, {}, selectArgs, args) : selectArgs);
            })
            .appendTo($value);

          // Pass form item to provider for additional manipulation
          $.extend(selectArgs, { $select: $input });

          if (dependsOn) {
            $dependsOn = $input.closest('form').find('input, select').filter(function() {
              return $(this).attr('name') === dependsOn;
            });

            $dependsOn.bind('change', function(event) {
              var $target = $(this);

              if (!$dependsOn.is('select')) return true;

              var dependsOnArgs = {};

              $input.find('option').remove();
             
              if (!$target.children().size()) return true;

              dependsOnArgs[dependsOn] = $target.val();
              selectFn($.extend(selectArgs, dependsOnArgs));

              return true;
            });

            if (!$dependsOn.is('select')) {
              selectFn(selectArgs);
            }
          } else {
            selectFn(selectArgs);
          }
        } else if (field.isBoolean) {
          if (field.multiArray) {
            $input = $('<div>')
              .addClass('multi-array').addClass(key).appendTo($value);

            $.each(field.multiArray, function(itemKey, itemValue) {
              $input.append(
                $('<div>').addClass('item')
                  .append(
                    $.merge(
                      $('<div>').addClass('name').html(_l(itemValue.label)),
                      $('<div>').addClass('value').append(
                        $('<input>').attr({ name: itemKey, type: 'checkbox' }).appendTo($value)
                      )
                    )
                  )
              );
            });

          } else {
            $input = $('<input>').attr({ name: key, type: 'checkbox' }).appendTo($value);
            if (field.isChecked) {
              $input.attr('checked', 'checked');
            } else {
              // This is mainly for IE compatibility
              setTimeout(function() {
                $input.attr('checked', false);                
              }, 100);
            }
          }
        } else if (field.dynamic) {
          // Generate a 'sub-create-form' -- append resulting fields
          $input = $('<div>').addClass('dynamic-input').appendTo($value);
          $form.hide();

          field.dynamic({
            response: {
              success: function(args) {
                var form = cloudStack.dialog.createForm({
                  noDialog: true,
                  form: {
                    title: '',
                    fields: args.fields
                  }
                });

                var $fields = form.$formContainer.find('.form-item').appendTo($input);
                $form.show();

                // Form should be slightly wider
                $form.closest(':ui-dialog').dialog('option', { position: 'center',closeOnEscape: false });
              }
            }
          });
        } else if(field.isTextarea) {
          $input = $('<textarea>').attr({
            name: key
          }).appendTo($value);

          if (field.defaultValue) {
            $input.val(field.defaultValue);
          }
        } else {
          // Text field
          if (field.range) {
            $input = $.merge(
              // Range start
              $('<input>').attr({
                type: 'text',
                name: field.range[0]
              }),

              // Range end
              $('<input>').attr({
                type: 'text',
                name: field.range[1]
              })
            ).appendTo(
              $('<div>').addClass('range-edit').appendTo($value)
            );

            $input.wrap($('<div>').addClass('range-item'));
          } else {
            $input = $('<input>').attr({
              name: key,
              type: field.password || field.isPassword ? 'password' : 'text'
            }).appendTo($value);

            if (field.defaultValue) {
              $input.val(field.defaultValue);
            }
			if (field.id) {
              $input.attr('id', field.id);
            }
          }
          $input.addClass("disallowSpecialCharacters");
        }

				if(field.validation != null)
          $input.data('validation-rules', field.validation);
				else
          $input.data('validation-rules', {});

          var fieldLabel = field.label;
          var inputId = $input.attr('id') ? $input.attr('id') : fieldLabel.replace(/\./g,'_');
          $input.attr('id', inputId);
          $name.find('label').attr('for', inputId);
      });
     
      var getFormValues = function() {
        var formValues = {};
        $.each(args.form.fields, function(key) {});
      };

      // Setup form validation			
      $formContainer.find('form').validate();
      $formContainer.find('input, select').each(function() {			  
        if ($(this).data('validation-rules')) {
          $(this).rules('add', $(this).data('validation-rules'));
        }
				else {
				  $(this).rules('add', {});
				}
      });			
      $form.find('select').trigger('change'); 
			
			
      var complete = function($formContainer) {
        var $form = $formContainer.find('form');
        var data = cloudStack.serializeForm($form);

        if (!$formContainer.find('form').valid()) {
          // Ignore hidden field validation
          if ($formContainer.find('input.error:visible, select.error:visible').size()) {
            return false;
          }
        }

        args.after({
          data: data,
          ref: args.ref, // For backwards compatibility; use context
          context: args.context,
          $form: $form
        });

        return true;
      };

      if (args.noDialog) {
        return {
          $formContainer: $formContainer,
          completeAction: complete
        };
      }

      return $formContainer.dialog({
        dialogClass: 'create-form',
        closeOnEscape: false,
        width: 400,
        title: _l(args.form.title),
        open: function() {
          if (args.form.preFilter) {
            args.form.preFilter({ $form: $form, context: args.context });
          }
        },
        buttons: [
          {
            text: createLabel ? createLabel : _l('label.ok'),
            'class': 'ok',
            click: function() {
              if (!complete($formContainer)) { return false; }

              $('div.overlay').remove();
              $formContainer.remove();
              $(this).dialog('destroy');

              return true;
            }
          },
          {
            text: _l('label.cancel'),
            'class': 'cancel',
            click: function() {
              $('div.overlay').remove();
              $formContainer.remove();
              $(this).dialog('destroy');
            }
          }
        ]
      }).closest('.ui-dialog').overlay();
    },

		/**
     * to change a property(e.g. validation) of a createForm field after a createForm is rendered
     */
		createFormField: {
			validation: {
				required: {					
					add: function($formField) {         
            var $input = $formField.find('input, select');						
						var validationRules = $input.data('validation-rules');		
											
					  if(validationRules == null || validationRules.required == null || validationRules.required == false) {					
							$formField.find('.name').find('label').find('span.field-required').css('display', 'inline'); //show red asterisk
																																
							if(validationRules == null)
								validationRules = {};										
							validationRules.required = true;																				
							$input.data('validation-rules', validationRules);		
														
							$input.rules('add', { required: true });					
						}		
            			
					},
					remove: function($formField) {      
            var $input = $formField.find('input, select');
						var validationRules = $input.data('validation-rules');		
											
					  if(validationRules != null && validationRules.required != null && validationRules.required == true) {						
							$formField.find('.name').find('label').find('span.field-required').hide(); //hide red asterisk
																																	  														
							delete validationRules.required;																				
							$input.data('validation-rules', validationRules);	

              $input.rules('remove', 'required');									
														
							$formField.find('.value').find('label.error').hide();																		
						}		            		
					}
				}
			}  
		},
		
    /**
     * Confirmation dialog
     */
    confirm: function(args) {
      return $(
        $('<span>').addClass('message').html(
          _l(args.message)
        )
      ).dialog({
        title: _l('label.confirmation'),
        dialogClass: 'confirm',
        closeOnEscape: false,
        zIndex: 5000,
        buttons: [
          {
            text: _l('label.no'),
            'class': 'cancel',
            click: function() {
              $(this).dialog('destroy');
              $('div.overlay').remove();
              if (args.cancelAction) { args.cancelAction(); }
            }
          },
          {
            text: _l('label.yes'),
            'class': 'ok',
            click: function() {
              args.action();
              $(this).dialog('destroy');
              $('div.overlay').remove();
            }
          }
        ]
      }).closest('.ui-dialog').overlay();
    },

    /**
     * Notice dialog
     */
    notice: function(args) {
      return $(
        $('<span>').addClass('message').html(
          _l(args.message)
        )
      ).dialog({
        title: _l('label.status'),
        dialogClass: 'notice',
        closeOnEscape: false,
        zIndex: 5000,
        buttons: [
          {
            text: _l('Close'),
            'class': 'close',
            click: function() {
              $(this).dialog('destroy');
              if (args.clickAction) args.clickAction();
            }
          }
        ]
      });
    }
  };
})(window.jQuery, window.cloudStack);