You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by se...@apache.org on 2013/07/18 18:34:43 UTC
[08/39] Format JS
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad69bc8d/ui/scripts/ui/core.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/core.js b/ui/scripts/ui/core.js
index 18c3363..c23484b 100644
--- a/ui/scripts/ui/core.js
+++ b/ui/scripts/ui/core.js
@@ -15,443 +15,462 @@
// specific language governing permissions and limitations
// under the License.
(function($, cloudStack) {
- $.extend(cloudStack, {
- ui: {
- widgets: {} // Defines API methods for UI widgets
- },
- uiCustom: {}
- });
-
- /**
- * Generate navigation <li>s
- *
- * @param args cloudStack data args
- */
- var makeNavigation = function(args) {
- var $navList = $('<ul>');
- var preFilter = cloudStack.sectionPreFilter ?
- cloudStack.sectionPreFilter({
- context: $.extend(true, {}, args.context, {
- sections: $.map(cloudStack.sections, function(value, key) {
- return key;
- })
- })
- }) : null;
+ $.extend(cloudStack, {
+ ui: {
+ widgets: {} // Defines API methods for UI widgets
+ },
+ uiCustom: {}
+ });
- $.each(args.sections, function(sectionID, args) {
- if (preFilter && $.inArray(sectionID, preFilter) == -1) {
- if (!(args.preFilter && args.preFilter())) {
- return true;
- }
- }
-
-
- var $li = $('<li>')
- .addClass('navigation-item')
- .addClass(sectionID)
- .append($('<span>').addClass('icon').html(' '))
- .append($('<span>').html(_l(args.title)))
- .data('cloudStack-section-id', sectionID);
-
- if (args.customIcon) {
- $li.addClass('custom-icon').find('span.icon').html('').append(
- $('<img>').attr({ src: args.customIcon })
- );
- }
+ /**
+ * Generate navigation <li>s
+ *
+ * @param args cloudStack data args
+ */
+ var makeNavigation = function(args) {
+ var $navList = $('<ul>');
+ var preFilter = cloudStack.sectionPreFilter ?
+ cloudStack.sectionPreFilter({
+ context: $.extend(true, {}, args.context, {
+ sections: $.map(cloudStack.sections, function(value, key) {
+ return key;
+ })
+ })
+ }) : null;
+
+ $.each(args.sections, function(sectionID, args) {
+ if (preFilter && $.inArray(sectionID, preFilter) == -1) {
+ if (!(args.preFilter && args.preFilter())) {
+ return true;
+ }
+ }
- $li.appendTo($navList);
- return true;
- });
+ var $li = $('<li>')
+ .addClass('navigation-item')
+ .addClass(sectionID)
+ .append($('<span>').addClass('icon').html(' '))
+ .append($('<span>').html(_l(args.title)))
+ .data('cloudStack-section-id', sectionID);
- // Special classes for first and last items
- $navList.find('li:first').addClass('first');
- $navList.find('li:last').addClass('last');
-
- return $navList;
- };
-
- /**
- * Create section contents
- *
- * @param sectionID Section's ID to show
- * @param args CloudStack3 configuration
- */
- var showSection = function(sectionID, args, $browser) {
- var $navItem = $('#navigation').find('li').filter(function() {
- return $(this).hasClass(sectionID);
- });
- var data = args.sections[sectionID];
-
- data.$browser = $browser;
- $navItem.siblings().removeClass('active');
- $navItem.addClass('active');
-
- // Reset browser panels
- $browser.cloudBrowser('removeAllPanels');
- $browser.cloudBrowser('addPanel', {
- title: '<span class="section">' + _l(data.title) + '</span>' + '<span class="subsection"></span>',
- data: '',
- complete: function($panel, $breadcrumb) {
- $breadcrumb.attr('title', _l(data.title));
- data.$breadcrumb = $breadcrumb;
-
- // Hide breadcrumb if this is the home section
- if (args.home === sectionID) {
- $('#breadcrumbs').find('li:first, div.end:last').hide();
- }
+ if (args.customIcon) {
+ $li.addClass('custom-icon').find('span.icon').html('').append(
+ $('<img>').attr({
+ src: args.customIcon
+ })
+ );
+ }
- // Append specified widget to view
- if (data.show)
- $panel.append(data.show(data));
- else if (data.treeView)
- $panel.treeView(data, { context: args.context });
- else
- $panel.listView(data, { context: args.context });
- }
- });
+ $li.appendTo($navList);
- return $navItem;
- };
+ return true;
+ });
- // Define page element generation fns
- var pageElems = {
- header: function(args) {
- // Make notification area
- var $notificationArea = $('<div>').addClass('button notifications')
- .append(
- $('<div>').addClass('total')
- // Total notifications
- .append($('<span>').html(0))
+ // Special classes for first and last items
+ $navList.find('li:first').addClass('first');
+ $navList.find('li:last').addClass('last');
+
+ return $navList;
+ };
+
+ /**
+ * Create section contents
+ *
+ * @param sectionID Section's ID to show
+ * @param args CloudStack3 configuration
+ */
+ var showSection = function(sectionID, args, $browser) {
+ var $navItem = $('#navigation').find('li').filter(function() {
+ return $(this).hasClass(sectionID);
+ });
+ var data = args.sections[sectionID];
+
+ data.$browser = $browser;
+ $navItem.siblings().removeClass('active');
+ $navItem.addClass('active');
+
+ // Reset browser panels
+ $browser.cloudBrowser('removeAllPanels');
+ $browser.cloudBrowser('addPanel', {
+ title: '<span class="section">' + _l(data.title) + '</span>' + '<span class="subsection"></span>',
+ data: '',
+ complete: function($panel, $breadcrumb) {
+ $breadcrumb.attr('title', _l(data.title));
+ data.$breadcrumb = $breadcrumb;
+
+ // Hide breadcrumb if this is the home section
+ if (args.home === sectionID) {
+ $('#breadcrumbs').find('li:first, div.end:last').hide();
+ }
+
+ // Append specified widget to view
+ if (data.show)
+ $panel.append(data.show(data));
+ else if (data.treeView)
+ $panel.treeView(data, {
+ context: args.context
+ });
+ else
+ $panel.listView(data, {
+ context: args.context
+ });
+ }
+ });
+
+ return $navItem;
+ };
+
+ // Define page element generation fns
+ var pageElems = {
+ header: function(args) {
+ // Make notification area
+ var $notificationArea = $('<div>').addClass('button notifications')
+ .append(
+ $('<div>').addClass('total')
+ // Total notifications
+ .append($('<span>').html(0))
)
- .append($('<span>').html(_l('label.notifications')))
- .notifications();
+ .append($('<span>').html(_l('label.notifications')))
+ .notifications();
- // Project switcher
- var $viewSwitcher = $('<div>').addClass('button view-switcher')
- .append(
- // Default View
- $('<div>').addClass('select default-view active')
- .html(_l('label.default.view'))
- .prepend(
- $('<span>').addClass('icon').html(' ')
+ // Project switcher
+ var $viewSwitcher = $('<div>').addClass('button view-switcher')
+ .append(
+ // Default View
+ $('<div>').addClass('select default-view active')
+ .html(_l('label.default.view'))
+ .prepend(
+ $('<span>').addClass('icon').html(' ')
- )
+ )
)
- .append(
- // Project View
- $('<div>').addClass('select project-view')
- .html(_l('label.project.view'))
- .prepend(
- $('<span>').addClass('icon').html(' ')
- )
+ .append(
+ // Project View
+ $('<div>').addClass('select project-view')
+ .html(_l('label.project.view'))
+ .prepend(
+ $('<span>').addClass('icon').html(' ')
+ )
)
- .click(function(event) {
- var $target = $(event.target);
- var $projectSwitcher = $(this);
- var $container = $('html body');
- var $navDisabled = $(
- $.map([
- 'projects',
- 'accounts',
- 'domains',
- 'system',
- 'global-settings',
- 'configuration'
- ], function(id) {
- return '#navigation li.' + id;
- }).join(',')
- );
-
- if ($target.closest('.select.project-view').size()) {
- $('#cloudStack3-container').addClass('project-view');
- $projectSwitcher.addClass('alt');
- $projectSwitcher.find('.select.project-view').addClass('active')
- .siblings().removeClass('active');
-
- // Activate project view
- $navDisabled.hide();
- cloudStack.uiCustom.projects({
- $projectSelect: $projectSelect.hide().find('select')
+ .click(function(event) {
+ var $target = $(event.target);
+ var $projectSwitcher = $(this);
+ var $container = $('html body');
+ var $navDisabled = $(
+ $.map([
+ 'projects',
+ 'accounts',
+ 'domains',
+ 'system',
+ 'global-settings',
+ 'configuration'
+ ], function(id) {
+ return '#navigation li.' + id;
+ }).join(',')
+ );
+
+ if ($target.closest('.select.project-view').size()) {
+ $('#cloudStack3-container').addClass('project-view');
+ $projectSwitcher.addClass('alt');
+ $projectSwitcher.find('.select.project-view').addClass('active')
+ .siblings().removeClass('active');
+
+ // Activate project view
+ $navDisabled.hide();
+ cloudStack.uiCustom.projects({
+ $projectSelect: $projectSelect.hide().find('select')
+ });
+ } else {
+ $navDisabled.show();
+ $('#cloudStack3-container').removeClass('project-view');
+ $projectSwitcher.removeClass('alt');
+ $projectSelect.hide();
+ $projectSwitcher.find('.select.default-view').addClass('active')
+ .siblings().removeClass('active');
+
+ // Put project name in header
+ $('.select.project-view').html(
+ '<span class="icon"> </span>' + _l('label.project.view')
+ ).attr('title', '');
+
+ // Clear out project
+ cloudStack.context.projects = null;
+ }
+
+ $('#navigation li.dashboard').click();
+
+ return false;
});
- } else {
- $navDisabled.show();
- $('#cloudStack3-container').removeClass('project-view');
- $projectSwitcher.removeClass('alt');
- $projectSelect.hide();
- $projectSwitcher.find('.select.default-view').addClass('active')
- .siblings().removeClass('active');
-
- // Put project name in header
- $('.select.project-view').html(
- '<span class="icon"> </span>' + _l('label.project.view')
- ).attr('title', '');
-
- // Clear out project
- cloudStack.context.projects = null;
- }
-
- $('#navigation li.dashboard').click();
-
- return false;
- });
- var $projectSelect = $('<div>').addClass('view-switcher').hide()
- .append($('<select>'));
-
- // User status area
- var userLabel = args.context.users[0].name ?
- args.context.users[0].name : args.context.users[0].login;
- var $userInfo = $('<div>').attr({ id: 'user' }).addClass('button')
- .append(
- $('<div>').addClass('name').html(
- args.context && args.context.users ?
- cloudStack.concat(userLabel, 14) : 'Invalid User'
- )
+ var $projectSelect = $('<div>').addClass('view-switcher').hide()
+ .append($('<select>'));
+
+ // User status area
+ var userLabel = args.context.users[0].name ?
+ args.context.users[0].name : args.context.users[0].login;
+ var $userInfo = $('<div>').attr({
+ id: 'user'
+ }).addClass('button')
+ .append(
+ $('<div>').addClass('name').html(
+ args.context && args.context.users ?
+ cloudStack.concat(userLabel, 14) : 'Invalid User'
+ )
)
- .append(
- $('<div>').addClass('icon options')
.append(
- $('<div>').addClass('icon arrow')
- )
+ $('<div>').addClass('icon options')
+ .append(
+ $('<div>').addClass('icon arrow')
+ )
);
- $userInfo.attr('title', userLabel);
-
- return [
- $('<div>').addClass('logo'),
- $('<div>').addClass('controls')
- .append($notificationArea)
- .append($viewSwitcher)
- .append($projectSelect)
- .append($userInfo)
- ];
- },
-
- 'main-area': function(args) {
- var $navigation = $('<div>').attr({ id: 'navigation' });
- var $browser = $('<div>').attr({ id: 'browser' })
- .append(
- // Home breadcrumb
- $('<div>').attr({ id: 'breadcrumbs' })
- .append($('<div>').addClass('home'))
- .append($('<div>').addClass('end'))
+ $userInfo.attr('title', userLabel);
+
+ return [
+ $('<div>').addClass('logo'),
+ $('<div>').addClass('controls')
+ .append($notificationArea)
+ .append($viewSwitcher)
+ .append($projectSelect)
+ .append($userInfo)
+ ];
+ },
+
+ 'main-area': function(args) {
+ var $navigation = $('<div>').attr({
+ id: 'navigation'
+ });
+ var $browser = $('<div>').attr({
+ id: 'browser'
+ })
+ .append(
+ // Home breadcrumb
+ $('<div>').attr({
+ id: 'breadcrumbs'
+ })
+ .append($('<div>').addClass('home'))
+ .append($('<div>').addClass('end'))
)
.append(
- // Panel container
- $('<div>').addClass('container')
+ // Panel container
+ $('<div>').addClass('container')
);
- makeNavigation(args).appendTo($navigation);
-
- return [
- $navigation, $browser
- ];
- }
- };
-
- $.fn.cloudStack = function(args) {
- var $container = $('<div>')
- .attr({
- id: 'container',
- 'cloudStack-container': true
- })
- .data('cloudStack-args', args)
- .appendTo(this);
- var context = args.context;
-
- // Create pageElems
- $.each(pageElems, function(id, fn) {
- var $elem = $('<div>').attr({ id: id });
-
- $(fn(args)).each(function() {
- $elem.append($(this));
- });
-
- $elem.appendTo($container);
- });
+ makeNavigation(args).appendTo($navigation);
+
+ return [
+ $navigation, $browser
+ ];
+ }
+ };
+
+ $.fn.cloudStack = function(args) {
+ var $container = $('<div>')
+ .attr({
+ id: 'container',
+ 'cloudStack-container': true
+ })
+ .data('cloudStack-args', args)
+ .appendTo(this);
+ var context = args.context;
+
+ // Create pageElems
+ $.each(pageElems, function(id, fn) {
+ var $elem = $('<div>').attr({
+ id: id
+ });
+
+ $(fn(args)).each(function() {
+ $elem.append($(this));
+ });
- // User options
- var $options = $('<div>').attr({ id: 'user-options' })
- .appendTo($('#header'));
-
- $(['label.logout', 'label.help', 'label.about']).each(function() {
- var $link = $('<a>')
- .attr({ href: '#' })
- .html(_l(this.toString()))
- .appendTo($options);
-
- if (this == 'label.help') {
- $link.click(function() {
- var helpURL = 'http://docs.cloud.com/CloudStack_Documentation';
-
- window.open(helpURL, '_blank');
-
- return false;
+ $elem.appendTo($container);
});
- }
- if (this == 'label.about') {
- $link.click(function() {
- var $logo = $('<div>').addClass('logo').html(_l('label.app.name')),
- $version = $('<div>').addClass('version').html(g_cloudstackversion),
- $about = $('<div>').addClass('about').append($logo).append($version);
- $about.dialog({
- modal: true,
- width: 300,
- title: _l('label.about.app'),
- closeOnEscape: false,
- dialogClass: 'dialog-about',
- buttons: {
- 'Close': function() {
- $( this ).dialog( "close" );
- $(':ui-dialog, .overlay').remove();
- }
+
+ // User options
+ var $options = $('<div>').attr({
+ id: 'user-options'
+ })
+ .appendTo($('#header'));
+
+ $(['label.logout', 'label.help', 'label.about']).each(function() {
+ var $link = $('<a>')
+ .attr({
+ href: '#'
+ })
+ .html(_l(this.toString()))
+ .appendTo($options);
+
+ if (this == 'label.help') {
+ $link.click(function() {
+ var helpURL = 'http://docs.cloud.com/CloudStack_Documentation';
+
+ window.open(helpURL, '_blank');
+
+ return false;
+ });
+ }
+ if (this == 'label.about') {
+ $link.click(function() {
+ var $logo = $('<div>').addClass('logo').html(_l('label.app.name')),
+ $version = $('<div>').addClass('version').html(g_cloudstackversion),
+ $about = $('<div>').addClass('about').append($logo).append($version);
+ $about.dialog({
+ modal: true,
+ width: 300,
+ title: _l('label.about.app'),
+ closeOnEscape: false,
+ dialogClass: 'dialog-about',
+ buttons: {
+ 'Close': function() {
+ $(this).dialog("close");
+ $(':ui-dialog, .overlay').remove();
+ }
+ }
+ }).closest('.ui-dialog').overlay();
+
+ return false;
+ });
}
- }).closest('.ui-dialog').overlay();
+ });
+
+ // Initialize browser
+ $container.find('#browser div.container').cloudBrowser();
+ $container.find('#navigation li')
+ .filter(function() {
+ return $(this).hasClass(args.home);
+ })
+ .click();
- return false;
+ // Validation
+ $.extend($.validator.messages, {
+ required: _l('label.required')
});
- }
- });
- // Initialize browser
- $container.find('#browser div.container').cloudBrowser();
- $container.find('#navigation li')
- .filter(function() {
- return $(this).hasClass(args.home);
- })
- .click();
-
- // Validation
- $.extend($.validator.messages, { required: _l('label.required') });
-
- $.validator.addMethod(
- "disallowSpecialCharacters",
- function(value, element) {
- return (value.indexOf("<") == -1 && value.indexOf(">") == -1);
- },
- jQuery.format("Disallowed characters: <, >")
- );
-
- // Check for pending project invitations
- if (args.projects) {
- args.projects.invitationCheck({
- context: cloudStack.context,
- response: {
- success: function(args) {
- if (!args.data.length) return;
-
- var projectList = $.map(args.data, function(invitation) {
- return '<li>' + invitation.project + '</li>';
- }).join('');
-
- cloudStack.dialog.notice({
- message: _l('message.pending.projects.1') +
- '<ul>' + projectList + '</ul>' +
- '<p>' + _l('message.pending.projects.2') + '</p>'
+ $.validator.addMethod(
+ "disallowSpecialCharacters",
+ function(value, element) {
+ return (value.indexOf("<") == -1 && value.indexOf(">") == -1);
+ },
+ jQuery.format("Disallowed characters: <, >")
+ );
+
+ // Check for pending project invitations
+ if (args.projects) {
+ args.projects.invitationCheck({
+ context: cloudStack.context,
+ response: {
+ success: function(args) {
+ if (!args.data.length) return;
+
+ var projectList = $.map(args.data, function(invitation) {
+ return '<li>' + invitation.project + '</li>';
+ }).join('');
+
+ cloudStack.dialog.notice({
+ message: _l('message.pending.projects.1') + '<ul>' + projectList + '</ul>' + '<p>' + _l('message.pending.projects.2') + '</p>'
+ });
+ }
+ }
});
- }
}
- });
- }
-
- // Hide logo conditionally
- if (!args.hasLogo) $('#header, #header .controls').addClass('nologo');
-
- $(window).trigger('cloudStack.ready');
-
- return this;
- };
-
- // Events
- $(function() {
- // Check if target should be hovered
- function checkHoveredLabel($target) {
- var $multiWizard = $('div.ui-dialog div.multi-wizard');
- if (($target.is('label[for]') && !$target.parents('body.login')) ||
- ($multiWizard.size() &&
- ($target.is('.multi-wizard label') && $target.prev('input[type="radio"],input[type="checkbox"]').size()) ||
- ($target.is('.multi-wizard .select-desc div.name') && $target.parent('div.select-desc').prev('input[type="radio"],input[type="checkbox"]').size())
- ))
- return true;
-
- return false;
- }
-
- // Rollover behavior for user options
- $(document).bind('mouseover', function(event) {
- var $target = $(event.target);
- if (checkHoveredLabel($target)) {
- $target.addClass('label-hovered');
- }
- if ($target.closest('#user, #user-options').size()) {
- return false;
- }
- else $('#user-options').hide();
-
- return false;
- });
- $(document).bind('mouseout', function(event) {
- var $target = $(event.target);
- if (checkHoveredLabel($target)) {
- $target.removeClass('label-hovered');
- }
- });
+ // Hide logo conditionally
+ if (!args.hasLogo) $('#header, #header .controls').addClass('nologo');
+
+ $(window).trigger('cloudStack.ready');
+
+ return this;
+ };
- $(document).bind('click', function(event) {
- var $target = $(event.target);
- var $container = $target.closest('[cloudStack-container]');
- var args = $container.data('cloudStack-args');
- var $browser = $container.find('#browser .container');
- var $multiWizard = $('div.ui-dialog div.multi-wizard');
-
- // Wizard: trigger click event for input when click it label
- if ($multiWizard.size()) {
- if ($target.is('.multi-wizard label') && $target.prev('input[type="radio"],input[type="checkbox"]').size()) {
- $target.prev('input').trigger('click');
- }
- if ($target.is('.multi-wizard .select-desc div.name') && $target.parent('div.select-desc').prev('input[type="radio"],input[type="checkbox"]').size()) {
- $target.parent('div.select-desc').prev('input').trigger('click');
- }
- }
-
- if (!$container.size()) return true;
-
- // Navigation items
- if ($target.closest('li.navigation-item').size() && $target.closest('#navigation').size()) {
- var $navItem = $target.closest('li.navigation-item');
-
- if ($navItem.is('.disabled')) return false;
- showSection($navItem.data('cloudStack-section-id'), args, $browser);
-
- return false;
- }
-
- // Browser expand
- if ($target.hasClass('control expand') && $target.closest('div.panel div.toolbar').size()) {
- $browser.cloudBrowser('toggleMaximizePanel', {
- panel: $target.closest('div.panel')
+ // Events
+ $(function() {
+ // Check if target should be hovered
+ function checkHoveredLabel($target) {
+ var $multiWizard = $('div.ui-dialog div.multi-wizard');
+ if (($target.is('label[for]') && !$target.parents('body.login')) ||
+ ($multiWizard.size() &&
+ ($target.is('.multi-wizard label') && $target.prev('input[type="radio"],input[type="checkbox"]').size()) ||
+ ($target.is('.multi-wizard .select-desc div.name') && $target.parent('div.select-desc').prev('input[type="radio"],input[type="checkbox"]').size())
+ ))
+ return true;
+
+ return false;
+ }
+
+ // Rollover behavior for user options
+ $(document).bind('mouseover', function(event) {
+ var $target = $(event.target);
+ if (checkHoveredLabel($target)) {
+ $target.addClass('label-hovered');
+ }
+ if ($target.closest('#user, #user-options').size()) {
+ return false;
+ } else $('#user-options').hide();
+
+ return false;
+ });
+
+ $(document).bind('mouseout', function(event) {
+ var $target = $(event.target);
+ if (checkHoveredLabel($target)) {
+ $target.removeClass('label-hovered');
+ }
});
- return false;
- }
+ $(document).bind('click', function(event) {
+ var $target = $(event.target);
+ var $container = $target.closest('[cloudStack-container]');
+ var args = $container.data('cloudStack-args');
+ var $browser = $container.find('#browser .container');
+ var $multiWizard = $('div.ui-dialog div.multi-wizard');
+
+ // Wizard: trigger click event for input when click it label
+ if ($multiWizard.size()) {
+ if ($target.is('.multi-wizard label') && $target.prev('input[type="radio"],input[type="checkbox"]').size()) {
+ $target.prev('input').trigger('click');
+ }
+ if ($target.is('.multi-wizard .select-desc div.name') && $target.parent('div.select-desc').prev('input[type="radio"],input[type="checkbox"]').size()) {
+ $target.parent('div.select-desc').prev('input').trigger('click');
+ }
+ }
- // Home breadcrumb
- if ($target.is('#breadcrumbs div.home')) {
- showSection(args.home, args, $browser);
- return false;
- }
+ if (!$container.size()) return true;
- // User options
- if ($target.closest('#user div.icon.options').size()) {
- $('#user-options').toggle();
+ // Navigation items
+ if ($target.closest('li.navigation-item').size() && $target.closest('#navigation').size()) {
+ var $navItem = $target.closest('li.navigation-item');
- return false;
- }
+ if ($navItem.is('.disabled')) return false;
+ showSection($navItem.data('cloudStack-section-id'), args, $browser);
- return true;
+ return false;
+ }
+
+ // Browser expand
+ if ($target.hasClass('control expand') && $target.closest('div.panel div.toolbar').size()) {
+ $browser.cloudBrowser('toggleMaximizePanel', {
+ panel: $target.closest('div.panel')
+ });
+
+ return false;
+ }
+
+ // Home breadcrumb
+ if ($target.is('#breadcrumbs div.home')) {
+ showSection(args.home, args, $browser);
+ return false;
+ }
+
+ // User options
+ if ($target.closest('#user div.icon.options').size()) {
+ $('#user-options').toggle();
+
+ return false;
+ }
+
+ return true;
+ });
});
- });
})(window.jQuery,
- window.cloudStack ? window.cloudStack : window.cloudStack = {});
+ window.cloudStack ? window.cloudStack : window.cloudStack = {});
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad69bc8d/ui/scripts/ui/dialog.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/dialog.js b/ui/scripts/ui/dialog.js
index 7f82eea..eb7e7b2 100644
--- a/ui/scripts/ui/dialog.js
+++ b/ui/scripts/ui/dialog.js
@@ -15,128 +15,134 @@
// specific language governing permissions and limitations
// under the License.
(function($, cloudStack, _l) {
- 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;
- });
+ 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
+ });
- 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;
- })
-
- var ret = function() {
- $('.overlay').remove();
-
- return $formContainer.dialog({
- dialogClass: args.form.bigSize ? 'create-form big' : 'create-form',
- closeOnEscape: false,
- draggable: false,
- width: args.form.bigSize ? 800 : 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; }
+ 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;
+ });
- $('div.overlay').remove();
- $('.tooltip-box').remove();
- $formContainer.remove();
- $(this).dialog('destroy');
+ var createLabel = _l(args.form.createLabel);
+ var $submit = $('<input>')
+ .attr({
+ type: 'submit'
+ })
+ .hide()
+ .appendTo($form);
- $('.hovered-elem').hide();
+ // Render fields and events
+ var fields = $.map(args.form.fields, function(value, key) {
+ return key;
+ })
+ var ret = function() {
+ $('.overlay').remove();
+
+ return $formContainer.dialog({
+ dialogClass: args.form.bigSize ? 'create-form big' : 'create-form',
+ closeOnEscape: false,
+ draggable: false,
+ width: args.form.bigSize ? 800 : 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();
+ $('.tooltip-box').remove();
+ $formContainer.remove();
+ $(this).dialog('destroy');
+
+ $('.hovered-elem').hide();
+
+ return true;
+ }
+ }, {
+ text: _l('label.cancel'),
+ 'class': 'cancel',
+ click: function() {
+ $('div.overlay').remove();
+ $('.tooltip-box').remove();
+ $formContainer.remove();
+ $(this).dialog('destroy');
+
+ $('.hovered-elem').hide();
+ }
+ }]
+ }).closest('.ui-dialog').overlay();
+ };
+
+ var isLastAsync = function(idx) {
+ for (var i = idx + 1; i < $(fields).length; i++) {
+ var f = args.form.fields[$(fields).get(i)];
+ if (f.select || f.dynamic) {
+ return false;
+ }
+ }
return true;
- }
- },
- {
- text: _l('label.cancel'),
- 'class': 'cancel',
- click: function() {
- $('div.overlay').remove();
- $('.tooltip-box').remove();
- $formContainer.remove();
- $(this).dialog('destroy');
-
- $('.hovered-elem').hide();
- }
- }
- ]
- }).closest('.ui-dialog').overlay();
- };
-
- var isLastAsync = function(idx) {
- for(var i = idx+1; i < $(fields).length ; i++) {
- var f = args.form.fields[$(fields).get(i)];
- if(f.select || f.dynamic){
- return false;
- }
- }
- return true;
- };
-
- var isAsync = false;
- var isNoDialog = args.noDialog ? args.noDialog : false;
-
- $(fields).each(function(idx, element) {
- var key = this;
- var field = args.form.fields[key];
-
- var $formItem = $('<div>')
- .addClass('form-item')
- .attr({ rel: key });
-
- if(field.isHidden != null) {
- if (typeof(field.isHidden) == 'boolean' && field.isHidden == true)
- $formItem.hide();
- else if (typeof(field.isHidden) == 'function' && field.isHidden() == true)
- $formItem.hide();
- }
+ };
+
+ var isAsync = false;
+ var isNoDialog = args.noDialog ? args.noDialog : false;
+
+ $(fields).each(function(idx, element) {
+ var key = this;
+ var field = args.form.fields[key];
+
+ var $formItem = $('<div>')
+ .addClass('form-item')
+ .attr({
+ rel: key
+ });
+
+ if (field.isHidden != null) {
+ if (typeof(field.isHidden) == 'boolean' && field.isHidden == true)
+ $formItem.hide();
+ else if (typeof(field.isHidden) == 'function' && field.isHidden() == true)
+ $formItem.hide();
+ }
- $formItem.appendTo($form);
+ $formItem.appendTo($form);
- //Handling Escape KeyPress events
- /* $('.ui-dialog').keypress(function(event) {
+ //Handling Escape KeyPress events
+ /* $('.ui-dialog').keypress(function(event) {
if ( event.which == 27 ) {
event.stopPropagation();
}
@@ -155,551 +161,567 @@
$(':ui-dialog').dialog({
closeOnEscape: false
}); */
- // Label field
+ // Label field
- var $name = $('<div>').addClass('name')
- .appendTo($formItem)
- .append(
- $('<label>').html(_l(field.label) + ':')
- );
+ 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);
+ // 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) });
- }
+ if (field.validation == null || field.validation.required == false) {
+ $astersikSpan.hide();
+ }
- // 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();
- }
+ // Tooltip description
+ if (field.desc) {
+ $formItem.attr({
+ title: _l(field.desc)
+ });
+ }
- $dependent.find('input[type=checkbox]').click();
+ // 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();
+ }
+ }
+ }
- if (!isReverse) {
- $dependent.find('input[type=checkbox]').attr('checked', false);
- } else {
- $dependent.find('input[type=checkbox]').attr('checked', true);
- }
+ // Determine field type of input
+ if (field.select) {
+ isAsync = true;
+ selectArgs = {
+ context: args.context,
+ response: {
+ success: function(args) {
+ $(args.data).each(function() {
+ var id = this.id !== undefined ? this.id : this.name;
+ 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');
+
+ if ((!isNoDialog) && isLastAsync(idx)) {
+ ret();
+ }
+ }
+ }
+ };
+
+ 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,
+ $form: $form,
+ type: 'createForm'
+ });
+
+ 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);
+ }
+ }
+
+ // Setup on click event
+ if (field.onChange) {
+ $input.click(function() {
+ field.onChange({
+ $checkbox: $input
+ });
+ });
+ }
+ } else if (field.dynamic) {
+ isAsync = true;
+ // 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
+ });
+ if ((!isNoDialog) && isLastAsync(idx)) {
+ ret();
+ }
+ }
+ }
+ });
+ } else if (field.isTextarea) {
+ $input = $('<textarea>').attr({
+ name: key
+ }).appendTo($value);
+
+ if (field.defaultValue) {
+ $input.val(field.defaultValue);
+ }
+ } else if (field.isDatepicker) { //jQuery datepicker
+ $input = $('<input>').attr({
+ name: key,
+ type: 'text'
+ }).appendTo($value);
+
+ if (field.defaultValue) {
+ $input.val(field.defaultValue);
+ }
+ if (field.id) {
+ $input.attr('id', field.id);
+ }
+ $input.addClass("disallowSpecialCharacters");
+ $input.datepicker({
+ dateFormat: 'yy-mm-dd'
+ });
+
+ } else if (field.range) { //2 text fields on the same line (e.g. port range: startPort - endPort)
+ $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'));
+ $input.addClass("disallowSpecialCharacters");
+
+ } else { //text field
+ $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");
+ }
- return true;
- });
+ if (field.validation != null)
+ $input.data('validation-rules', field.validation);
+ else
+ $input.data('validation-rules', {});
- // Show fields by default if it is reverse checkbox
- if (isReverse) {
- $dependsOn.click();
- }
- }
- }
+ var fieldLabel = field.label;
- // Determine field type of input
- if (field.select) {
- isAsync = true;
- selectArgs = {
- context: args.context,
- response: {
- success: function(args) {
- $(args.data).each(function() {
- var id = this.id !== undefined ? this.id : this.name;
- 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));
- });
+ var inputId = $input.attr('id') ? $input.attr('id') : fieldLabel.replace(/\./g, '_');
- if (field.defaultValue) {
- $input.val(_s(field.defaultValue));
- }
+ $input.attr('id', inputId);
+ $name.find('label').attr('for', inputId);
- $input.trigger('change');
+ if (field.isDisabled)
+ $input.attr("disabled", "disabled");
- if((!isNoDialog) && isLastAsync(idx)) {
- ret();
+ // Tooltip
+ if (field.docID) {
+ $input.toolTip({
+ docID: field.docID,
+ tooltip: '.tooltip-box',
+ mode: 'focus',
+ attachTo: '.form-item'
+ });
}
- }
- }
- };
- 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, $form: $form, type: 'createForm' });
-
- if (dependsOn) {
- $dependsOn = $input.closest('form').find('input, select').filter(function() {
- return $(this).attr('name') === dependsOn;
+ /* $input.blur(function() {
+ console.log('tooltip remove->' + $input.attr('name'));
+ });*/
});
- $dependsOn.bind('change', function(event) {
- var $target = $(this);
- if (!$dependsOn.is('select')) return true;
+ var getFormValues = function() {
+ var formValues = {};
+ $.each(args.form.fields, function(key) {});
+ };
- var dependsOnArgs = {};
-
- $input.find('option').remove();
+ // 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');
- if (!$target.children().size()) return true;
- dependsOnArgs[dependsOn] = $target.val();
+ var complete = function($formContainer) {
+ var $form = $formContainer.find('form');
+ var data = cloudStack.serializeForm($form);
- selectFn($.extend(selectArgs, dependsOnArgs));
+ if (!$formContainer.find('form').valid()) {
+ // Ignore hidden field validation
+ if ($formContainer.find('input.error:visible, select.error:visible').size()) {
+ return false;
+ }
+ }
- return true;
- });
+ args.after({
+ data: data,
+ ref: args.ref, // For backwards compatibility; use context
+ context: args.context,
+ $form: $form
+ });
- if (!$dependsOn.is('select')) {
- selectFn(selectArgs);
+ return true;
+ };
+
+ if (args.noDialog) {
+ return {
+ $formContainer: $formContainer,
+ completeAction: complete
+ };
+ } else if (!isAsync) {
+ return ret();
}
- } 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)
- )
- )
- )
- );
- });
+ },
+
+ // Dialog with list view selector
+ listView: function(args) {
+ var listView = args.listView;
+ var after = args.after;
+ var context = args.context;
+ var $listView = $('<div>');
+
+ listView.actions = {
+ select: {
+ label: _l('label.select.instance'),
+ type: listView.type,
+ action: {
+ uiCustom: function(args) {
+ var $item = args.$item;
+ var $input = $item.find('td.actions input:visible');
+
+ if ($input.attr('type') == 'checkbox') {
+ if ($input.is(':checked'))
+ $item.addClass('multi-edit-selected');
+ else
+ $item.removeClass('multi-edit-selected');
+ } else {
+ $item.siblings().removeClass('multi-edit-selected');
+ $item.addClass('multi-edit-selected');
+ }
+ }
+ }
+ }
+ };
- } 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);
- }
- }
-
- // Setup on click event
- if (field.onChange) {
- $input.click(function() {
- field.onChange({
- $checkbox: $input
- });
+ // Init list view
+ $listView = $('<div>').listView({
+ context: context,
+ uiCustom: true,
+ listView: listView
});
- }
- } else if (field.dynamic) {
- isAsync = true;
- // 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 });
- if((!isNoDialog) && isLastAsync(idx)) {
- ret();
+ // Change action label
+ $listView.find('th.actions').html(_l('label.select'));
+
+ $listView.dialog({
+ dialogClass: 'multi-edit-add-list panel',
+ width: 825,
+ title: _l('Select VM'),
+ buttons: [{
+ text: _l('label.apply'),
+ 'class': 'ok',
+ click: function() {
+ if (!$listView.find(
+ 'input[type=radio]:checked, input[type=checkbox]:checked'
+ ).size()) {
+ cloudStack.dialog.notice({
+ message: _l('message.select.instance')
+ });
+
+ return false;
+ }
+
+ after({
+ context: $.extend(true, {}, context, {
+ instances: $listView.find('tr.multi-edit-selected').map(function(index, row) {
+ var $row = $(row);
+
+ return $row.data('json-obj');
+ })
+ })
+ });
+
+ $listView.remove();
+
+ $('div.overlay').remove();
+ }
+ }, {
+ text: _l('label.cancel'),
+ 'class': 'cancel',
+ click: function() {
+ $listView.fadeOut(function() {
+ $listView.remove();
+ });
+ $('div.overlay').fadeOut(function() {
+ $('div.overlay').remove();
+ });
+ }
+ }]
+ }).parent('.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();
+ }
+ }
}
- }
}
- });
- } else if(field.isTextarea) {
- $input = $('<textarea>').attr({
- name: key
- }).appendTo($value);
-
- if (field.defaultValue) {
- $input.val(field.defaultValue);
- }
- } else if (field.isDatepicker) { //jQuery datepicker
- $input = $('<input>').attr({
- name: key,
- type: 'text'
- }).appendTo($value);
-
- if (field.defaultValue) {
- $input.val(field.defaultValue);
- }
- if (field.id) {
- $input.attr('id', field.id);
+ },
+
+ /**
+ * 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();
+ }
+ $('.hovered-elem').hide();
+ }
+ }, {
+ text: _l('label.yes'),
+ 'class': 'ok',
+ click: function() {
+ args.action();
+ $(this).dialog('destroy');
+ $('div.overlay').remove();
+ $('.hovered-elem').hide();
+ }
+ }]
+ }).closest('.ui-dialog').overlay();
+ },
+
+ /**
+ * Notice dialog
+ */
+ notice: function(args) {
+ if (args.message) {
+ 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();
+ $('.hovered-elem').hide();
+ }
+ }]
+ });
}
- $input.addClass("disallowSpecialCharacters");
- $input.datepicker({dateFormat: 'yy-mm-dd'});
-
- } else if(field.range) {//2 text fields on the same line (e.g. port range: startPort - endPort)
- $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'));
- $input.addClass("disallowSpecialCharacters");
-
- } else { //text field
- $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);
-
- if(field.isDisabled)
- $input.attr("disabled","disabled");
-
- // Tooltip
- if (field.docID) {
- $input.toolTip({
- docID: field.docID,
- tooltip:'.tooltip-box',
- mode:'focus',
- attachTo: '.form-item'
- });
- }
-
-
- /* $input.blur(function() {
- console.log('tooltip remove->' + $input.attr('name'));
- });*/
- });
-
- 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
- };
- } else if (!isAsync) {
- return ret();
- }
- },
-
- // Dialog with list view selector
- listView: function(args) {
- var listView = args.listView;
- var after = args.after;
- var context = args.context;
- var $listView = $('<div>');
-
- listView.actions = {
- select: {
- label: _l('label.select.instance'),
- type: listView.type,
- action: {
- uiCustom: function(args) {
- var $item = args.$item;
- var $input = $item.find('td.actions input:visible');
-
- if ($input.attr('type') == 'checkbox') {
- if ($input.is(':checked'))
- $item.addClass('multi-edit-selected');
- else
- $item.removeClass('multi-edit-selected');
- } else {
- $item.siblings().removeClass('multi-edit-selected');
- $item.addClass('multi-edit-selected');
- }
- }
- }
}
- };
-
- // Init list view
- $listView = $('<div>').listView({
- context: context,
- uiCustom: true,
- listView: listView
- });
-
- // Change action label
- $listView.find('th.actions').html(_l('label.select'));
-
- $listView.dialog({
- dialogClass: 'multi-edit-add-list panel',
- width: 825,
- title: _l('Select VM'),
- buttons: [
- {
- text: _l('label.apply'),
- 'class': 'ok',
- click: function() {
- if (!$listView.find(
- 'input[type=radio]:checked, input[type=checkbox]:checked'
- ).size()) {
- cloudStack.dialog.notice({ message: _l('message.select.instance')});
-
- return false;
- }
-
- after({
- context: $.extend(true, {}, context, {
- instances: $listView.find('tr.multi-edit-selected').map(function(index, row) {
- var $row = $(row);
-
- return $row.data('json-obj');
- })
- })
- });
-
- $listView.remove();
-
- $('div.overlay').remove();
- }
- },
- {
- text: _l('label.cancel'),
- 'class': 'cancel',
- click: function() {
- $listView.fadeOut(function() {
- $listView.remove();
- });
- $('div.overlay').fadeOut(function() {
- $('div.overlay').remove();
- });
- }
- }
- ]
- }).parent('.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(); }
- $('.hovered-elem').hide();
- }
- },
- {
- text: _l('label.yes'),
- 'class': 'ok',
- click: function() {
- args.action();
- $(this).dialog('destroy');
- $('div.overlay').remove();
- $('.hovered-elem').hide();
- }
- }
- ]
- }).closest('.ui-dialog').overlay();
- },
-
- /**
- * Notice dialog
- */
- notice: function(args) {
- if (args.message) {
- 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();
- $('.hovered-elem').hide();
- }
- }
- ]
- });
- }
-
- return false;
- }
- };
+ };
})(window.jQuery, window.cloudStack, _l);
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad69bc8d/ui/scripts/ui/events.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/events.js b/ui/scripts/ui/events.js
index bd609d2..a7eff84 100644
--- a/ui/scripts/ui/events.js
+++ b/ui/scripts/ui/events.js
@@ -15,46 +15,48 @@
// specific language governing permissions and limitations
// under the License.
(function($, cloudStack) {
- cloudStack.ui.event = {
- // Attach element to specific event type
- elem: function(widget, elem, $elem, extraData) {
- // Setup DOM metadata
- var data = { cloudStack: {} };
- data.cloudStack[widget] = {
- elem: elem
- };
- if (extraData) $.extend(data.cloudStack[widget], extraData);
+ cloudStack.ui.event = {
+ // Attach element to specific event type
+ elem: function(widget, elem, $elem, extraData) {
+ // Setup DOM metadata
+ var data = {
+ cloudStack: {}
+ };
+ data.cloudStack[widget] = {
+ elem: elem
+ };
+ if (extraData) $.extend(data.cloudStack[widget], extraData);
- return $elem
- .addClass('cloudStack-elem')
- .addClass(widget)
- .data(data);
- },
+ return $elem
+ .addClass('cloudStack-elem')
+ .addClass(widget)
+ .data(data);
+ },
- // Create widget-based event
- bind: function(widget, events) {
- return function(event) {
- var $target = $(event.target);
- var $widget, $elem;
- var data, elem;
+ // Create widget-based event
+ bind: function(widget, events) {
+ return function(event) {
+ var $target = $(event.target);
+ var $widget, $elem;
+ var data, elem;
- $elem = $target.closest('.cloudStack-elem.' + widget);
- if (!$elem.size())
- return true;
+ $elem = $target.closest('.cloudStack-elem.' + widget);
+ if (!$elem.size())
+ return true;
- $widget = $('.cloudStack-widget.' + widget);
- data = $elem.data('cloudStack')[widget];
- elem = data.elem;
+ $widget = $('.cloudStack-widget.' + widget);
+ data = $elem.data('cloudStack')[widget];
+ elem = data.elem;
- events[elem]($elem, $widget, data);
+ events[elem]($elem, $widget, data);
- return false;
- };
- },
+ return false;
+ };
+ },
- // Trigger CloudStack UI event (cloudStack.*)
- call: function(eventName, data) {
- $(window).trigger('cloudStack.' + eventName, data);
- }
- };
+ // Trigger CloudStack UI event (cloudStack.*)
+ call: function(eventName, data) {
+ $(window).trigger('cloudStack.' + eventName, data);
+ }
+ };
})(jQuery, cloudStack);
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad69bc8d/ui/scripts/ui/utils.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/utils.js b/ui/scripts/ui/utils.js
index 39ef3e3..aeaf02b 100644
--- a/ui/scripts/ui/utils.js
+++ b/ui/scripts/ui/utils.js
@@ -15,113 +15,110 @@
// specific language governing permissions and limitations
// under the License.
(function($, cloudStack) {
- // General utils
- cloudStack.serializeForm = function($form, options) {
- if (!options) options = {};
-
- var data = {};
-
- $($form.serializeArray()).each(function() {
- var dataItem = data[this.name];
- var value = _s(this.value.toString());
-
- if (options.escapeSlashes) {
- value = value.replace(/\//g, '__forwardSlash__');
- }
-
- if (!dataItem) {
- data[this.name] = value;
- } else if (dataItem && !$.isArray(dataItem)) {
- data[this.name] = [dataItem, value];
- } else if($.isArray(dataItem)){
- dataItem.push(value);
- }
- });
-
- return data;
- };
-
- // Even/odd row handling
- cloudStack.evenOdd = function($container, itemSelector, args) {
- var even = false;
-
- $container.find(itemSelector).each(function() {
- var $elem = $(this);
-
- if (even) {
- even = false;
- args.odd($elem);
- } else {
- even = true;
- args.even($elem);
- }
- });
- };
-
- /**
- * Localization -- shortcut _l
- *
- * Takes string and runs through localization function -- if no code
- * exists or function isn't present, return string as-is
- */
- cloudStack.localize = window._l = function(str) {
- var localized = cloudStack.localizationFn ?
- cloudStack.localizationFn(str) : null;
-
- return localized ? localized : str;
- };
-
- /**
- * Sanitize user input (HTML Encoding) -- shortcut _s
- *
- * Strip unwanted characters from user-based input
- */
- cloudStack.sanitize = window._s = function(value) {
- if(typeof(value) == "number") {
- //alert("number does not need to be sanitized. Only string needs to be sanitized.");
- return value;
- }
- else if(typeof(value) == "boolean") {
- //alert("boolean does not need to be sanitized. Only string needs to be sanitized.");
- return value;
- }
- else if(typeof(value) == "object") {
- //alert("object cant not be sanitized. Only string can be sanitized.");
- return value;
- }
- else if(typeof(value) == null || typeof(value) == "undefined") {
- return '';
- }
-
- var sanitized = value
- .replace(/&/g, "&")
- .replace(/</g, "<")
- .replace(/>/g, ">");
-
- return sanitized;
- };
-
- /**
- * Reverse sanitization (HTML Decoding)
- */
- cloudStack.sanitizeReverse = function(value) {
- var reversedValue = value
- .replace(/&/g, "&")
- .replace(/</g, "<")
- .replace(/>/g, ">");
-
- return reversedValue;
- };
-
- /**
- * If the str.length is > maxLen,
- * then concatenate and add '...' to the end of the string
- */
- cloudStack.concat = function(str, maxLen) {
- if (str.length > maxLen) {
- return str.substr(0, maxLen) + '...';
- } else {
- return str;
- }
- };
+ // General utils
+ cloudStack.serializeForm = function($form, options) {
+ if (!options) options = {};
+
+ var data = {};
+
+ $($form.serializeArray()).each(function() {
+ var dataItem = data[this.name];
+ var value = _s(this.value.toString());
+
+ if (options.escapeSlashes) {
+ value = value.replace(/\//g, '__forwardSlash__');
+ }
+
+ if (!dataItem) {
+ data[this.name] = value;
+ } else if (dataItem && !$.isArray(dataItem)) {
+ data[this.name] = [dataItem, value];
+ } else if ($.isArray(dataItem)) {
+ dataItem.push(value);
+ }
+ });
+
+ return data;
+ };
+
+ // Even/odd row handling
+ cloudStack.evenOdd = function($container, itemSelector, args) {
+ var even = false;
+
+ $container.find(itemSelector).each(function() {
+ var $elem = $(this);
+
+ if (even) {
+ even = false;
+ args.odd($elem);
+ } else {
+ even = true;
+ args.even($elem);
+ }
+ });
+ };
+
+ /**
+ * Localization -- shortcut _l
+ *
+ * Takes string and runs through localization function -- if no code
+ * exists or function isn't present, return string as-is
+ */
+ cloudStack.localize = window._l = function(str) {
+ var localized = cloudStack.localizationFn ?
+ cloudStack.localizationFn(str) : null;
+
+ return localized ? localized : str;
+ };
+
+ /**
+ * Sanitize user input (HTML Encoding) -- shortcut _s
+ *
+ * Strip unwanted characters from user-based input
+ */
+ cloudStack.sanitize = window._s = function(value) {
+ if (typeof(value) == "number") {
+ //alert("number does not need to be sanitized. Only string needs to be sanitized.");
+ return value;
+ } else if (typeof(value) == "boolean") {
+ //alert("boolean does not need to be sanitized. Only string needs to be sanitized.");
+ return value;
+ } else if (typeof(value) == "object") {
+ //alert("object cant not be sanitized. Only string can be sanitized.");
+ return value;
+ } else if (typeof(value) == null || typeof(value) == "undefined") {
+ return '';
+ }
+
+ var sanitized = value
+ .replace(/&/g, "&")
+ .replace(/</g, "<")
+ .replace(/>/g, ">");
+
+ return sanitized;
+ };
+
+ /**
+ * Reverse sanitization (HTML Decoding)
+ */
+ cloudStack.sanitizeReverse = function(value) {
+ var reversedValue = value
+ .replace(/&/g, "&")
+ .replace(/</g, "<")
+ .replace(/>/g, ">");
+
+ return reversedValue;
+ };
+
+ /**
+ * If the str.length is > maxLen,
+ * then concatenate and add '...' to the end of the string
+ */
+ cloudStack.concat = function(str, maxLen) {
+ if (str.length > maxLen) {
+ return str.substr(0, maxLen) + '...';
+ } else {
+ return str;
+ }
+ };
})(jQuery, cloudStack);