[NIFI-1707] upgradeable angular components
Project: http://git-wip-us.apache.org/repos/asf/nifi/repo Commit: http://git-wip-us.apache.org/repos/asf/nifi/commit/cb675201 Tree: http://git-wip-us.apache.org/repos/asf/nifi/tree/cb675201 Diff: http://git-wip-us.apache.org/repos/asf/nifi/diff/cb675201 Branch: refs/heads/master Commit: cb67520129fcc589521d6f014f517c18eaca3df3 Parents: dc4f983 Author: Scott Aslan <jas...@hortonworks.com> Authored: Sun May 8 01:34:54 2016 -0400 Committer: Matt Gilman <matt.c.gil...@gmail.com> Committed: Mon May 9 15:16:12 2016 -0400 ---------------------------------------------------------------------- .../controllers/nf-ng-breadcrumbs-controller.js | 256 +++-- .../controllers/nf-ng-canvas-app-controller.js | 36 +- .../nf-ng-canvas-global-menu-controller.js | 474 +++++---- .../nf-ng-canvas-graph-controls-controller.js | 290 +++--- .../nf-ng-canvas-header-controller.js | 181 ++-- .../nf-ng-canvas-navigate-controller.js | 136 ++- .../nf-ng-canvas-operate-controller.js | 436 +++++---- .../nf-ng-canvas-toolbox-controller.js | 245 +++-- .../directives/nf-ng-breadcrumbs-directive.js | 37 +- .../directives/nf-ng-draggable-directive.js | 23 +- .../header/components/nf-ng-funnel-component.js | 147 ++- .../header/components/nf-ng-group-component.js | 333 ++++--- .../components/nf-ng-input-port-component.js | 315 +++--- .../header/components/nf-ng-label-component.js | 151 ++- .../components/nf-ng-output-port-component.js | 303 +++--- .../components/nf-ng-processor-component.js | 953 +++++++++---------- .../nf-ng-remote-process-group-component.js | 313 +++--- .../components/nf-ng-template-component.js | 327 ++++--- .../src/main/webapp/js/nf/canvas/nf-canvas.js | 76 +- .../js/nf/canvas/nf-ng-canvas-app-config.js | 159 ++-- .../src/main/webapp/js/nf/nf-ng-bridge.js | 2 + .../main/webapp/js/nf/nf-ng-service-provider.js | 53 +- 22 files changed, 2584 insertions(+), 2662 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/nifi/blob/cb675201/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-breadcrumbs-controller.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-breadcrumbs-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-breadcrumbs-controller.js index 54a75c4..3c0b5e4 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-breadcrumbs-controller.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-breadcrumbs-controller.js @@ -17,66 +17,101 @@ /* global nf, d3 */ -nf.ng.BreadcrumbsCtrl = (function () { +nf.ng.BreadcrumbsCtrl = function (serviceProvider, $sanitize) { + 'use strict'; - function BreadcrumbsCtrl(serviceProvider, $sanitize) { - function BreadcrumbsCtrl() { + function BreadcrumbsCtrl() { + this.breadcrumbs = []; + } + BreadcrumbsCtrl.prototype = { + constructor: BreadcrumbsCtrl, + + /** + * Register the breadcrumbs controller. + */ + register: function() { + if (serviceProvider.breadcrumbsCtrl === undefined) { + serviceProvider.register('breadcrumbsCtrl', breadcrumbsCtrl); + } + }, + + /** + * Generate the breadcrumbs. + * + * @param {object} breadcrumb The breadcrumb + */ + generateBreadcrumbs: function(breadcrumb) { + //explicitly sanitize processGroup.name + breadcrumb.name = $sanitize(breadcrumb.name); + this.breadcrumbs.unshift(breadcrumb); + + if (nf.Common.isDefinedAndNotNull(breadcrumb.parentBreadcrumb)) { + this.generateBreadcrumbs(breadcrumb.parentBreadcrumb); + } + }, + + /** + * Reset the breadcrumbs. + */ + resetBreadcrumbs: function() { this.breadcrumbs = []; - }; - BreadcrumbsCtrl.prototype = { - constructor: BreadcrumbsCtrl, - - /** - * Register the breadcrumbs controller. - */ - register: function () { - if (serviceProvider.breadcrumbsCtrl === undefined) { - serviceProvider.register('breadcrumbsCtrl', breadcrumbsCtrl); - } - }, - - /** - * Generate the breadcrumbs. - * - * @param {object} breadcrumb The breadcrumb - */ - generateBreadcrumbs: function (breadcrumb) { - //explicitly sanitize processGroup.name - breadcrumb.name = $sanitize(breadcrumb.name); - this.breadcrumbs.unshift(breadcrumb); - - if (nf.Common.isDefinedAndNotNull(breadcrumb.parentBreadcrumb)) { - this.generateBreadcrumbs(breadcrumb.parentBreadcrumb); + }, + + /** + * Get the breadcrumbs. + */ + getBreadcrumbs: function() { + return this.breadcrumbs; + }, + + /** + * Update the breadcrumbs css. + * + * @param {object} style The style to be applied. + */ + updateBreadcrumbsCss: function(style) { + $('#breadcrumbs').css(style); + }, + + /** + * Reset initial scroll position. + */ + resetScrollPosition: function() { + var title = $('#data-flow-title-container'); + var titlePosition = title.position(); + var titleWidth = title.outerWidth(); + var titleRight = titlePosition.left + titleWidth; + + var padding = $('#breadcrumbs-right-border').width(); + var viewport = $('#data-flow-title-viewport'); + var viewportWidth = viewport.width(); + var viewportRight = viewportWidth - padding; + + // if the title's right is past the viewport's right, shift accordingly + if (titleRight > viewportRight) { + // adjust the position + title.css('left', (titlePosition.left - (titleRight - viewportRight)) + 'px'); + } else { + title.css('left', '10px'); + } + }, + + /** + * Registers a scroll event on the `element` + * + * @param {object} element The element event listener will be registered upon. + */ + registerMouseWheelEvent: function(element) { + // mousewheel -> IE, Chrome + // DOMMouseScroll -> FF + // wheel -> FF, IE + + // still having issues with this in IE :/ + element.on('DOMMouseScroll mousewheel', function (evt, d) { + if (nf.Common.isUndefinedOrNull(evt.originalEvent)) { + return; } - }, - - /** - * Reset the breadcrumbs. - */ - resetBreadcrumbs: function () { - this.breadcrumbs = []; - }, - - /** - * Get the breadcrumbs. - */ - getBreadcrumbs: function () { - return this.breadcrumbs; - }, - - /** - * Update the breadcrumbs css. - * - * @param {object} style The style to be applied. - */ - updateBreadcrumbsCss: function (style) { - $('#breadcrumbs').css(style); - }, - - /** - * Reset initial scroll position. - */ - resetScrollPosition: function () { + var title = $('#data-flow-title-container'); var titlePosition = title.position(); var titleWidth = title.outerWidth(); @@ -87,85 +122,46 @@ nf.ng.BreadcrumbsCtrl = (function () { var viewportWidth = viewport.width(); var viewportRight = viewportWidth - padding; - // if the title's right is past the viewport's right, shift accordingly - if (titleRight > viewportRight) { - // adjust the position - title.css('left', (titlePosition.left - (titleRight - viewportRight)) + 'px'); - } else { - title.css('left', '10px'); - } - }, - - /** - * Registers a scroll event on the `element` - * - * @param {object} element The element event listener will be registered upon. - */ - registerMouseWheelEvent: function (element) { - // mousewheel -> IE, Chrome - // DOMMouseScroll -> FF - // wheel -> FF, IE - - // still having issues with this in IE :/ - element.on('DOMMouseScroll mousewheel', function (evt, d) { - if (nf.Common.isUndefinedOrNull(evt.originalEvent)) { - return; - } + // if the width of the title is larger than the viewport + if (titleWidth > viewportWidth) { + var adjust = false; - var title = $('#data-flow-title-container'); - var titlePosition = title.position(); - var titleWidth = title.outerWidth(); - var titleRight = titlePosition.left + titleWidth; - - var padding = $('#breadcrumbs-right-border').width(); - var viewport = $('#data-flow-title-viewport'); - var viewportWidth = viewport.width(); - var viewportRight = viewportWidth - padding; - - // if the width of the title is larger than the viewport - if (titleWidth > viewportWidth) { - var adjust = false; - - var delta = 0; - - //Chrome and Safari both have evt.originalEvent.detail defined but - //evt.originalEvent.wheelDelta holds the correct value so we must - //check for evt.originalEvent.wheelDelta first! - if (nf.Common.isDefinedAndNotNull(evt.originalEvent.wheelDelta)) { - delta = evt.originalEvent.wheelDelta; - } else if (nf.Common.isDefinedAndNotNull(evt.originalEvent.detail)) { - delta = -evt.originalEvent.detail; - } + var delta = 0; - // determine the increment - if (delta > 0 && titleRight > viewportRight) { - var increment = -25; - adjust = true; - } else if (delta < 0 && (titlePosition.left - padding) < 0) { - increment = 25; + //Chrome and Safari both have evt.originalEvent.detail defined but + //evt.originalEvent.wheelDelta holds the correct value so we must + //check for evt.originalEvent.wheelDelta first! + if (nf.Common.isDefinedAndNotNull(evt.originalEvent.wheelDelta)) { + delta = evt.originalEvent.wheelDelta; + } else if (nf.Common.isDefinedAndNotNull(evt.originalEvent.detail)) { + delta = -evt.originalEvent.detail; + } - // don't shift too far - if (titlePosition.left + increment > padding) { - increment = padding - titlePosition.left; - } + // determine the increment + if (delta > 0 && titleRight > viewportRight) { + var increment = -25; + adjust = true; + } else if (delta < 0 && (titlePosition.left - padding) < 0) { + increment = 25; - adjust = true; + // don't shift too far + if (titlePosition.left + increment > padding) { + increment = padding - titlePosition.left; } - if (adjust) { - // adjust the position - title.css('left', (titlePosition.left + increment) + 'px'); - } + adjust = true; } - }); - } - }; - var breadcrumbsCtrl = new BreadcrumbsCtrl(); - breadcrumbsCtrl.register(); - return breadcrumbsCtrl; - } - BreadcrumbsCtrl.$inject = ['serviceProvider', '$sanitize']; //also depends on nf.Common + if (adjust) { + // adjust the position + title.css('left', (titlePosition.left + increment) + 'px'); + } + } + }); + } + } - return BreadcrumbsCtrl; -}()); \ No newline at end of file + var breadcrumbsCtrl = new BreadcrumbsCtrl(); + breadcrumbsCtrl.register(); + return breadcrumbsCtrl; +}; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/nifi/blob/cb675201/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-app-controller.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-app-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-app-controller.js index e44c13a..eefc343 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-app-controller.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-app-controller.js @@ -17,27 +17,23 @@ /* global nf, d3 */ -nf.ng.Canvas.AppCtrl = (function () { +nf.ng.Canvas.AppCtrl = function ($scope, serviceProvider) { + 'use strict'; - function AppCtrl($scope, serviceProvider) { - function AppCtrl(serviceProvider) { - //global nf namespace for reference throughout angular app - this.nf = nf; - //any registered angular service is available through the serviceProvider - this.serviceProvider = serviceProvider; - }; - AppCtrl.prototype = { - constructor: AppCtrl - }; - var appCtrl = new AppCtrl(serviceProvider); - $scope.appCtrl = appCtrl; - - //For production angular applications .scope() is unavailable so we set - //the root scope of the bootstrapped app on the bridge - nf.ng.Bridge.setRootScope($scope); + function AppCtrl(serviceProvider) { + //global nf namespace for reference throughout angular app + this.nf = nf; + //any registered angular service is available through the serviceProvider + this.serviceProvider = serviceProvider; + } + AppCtrl.prototype = { + constructor: AppCtrl } - AppCtrl.$inject = ['$scope', 'serviceProvider', 'headerCtrl', 'graphControlsCtrl']; + var appCtrl = new AppCtrl(serviceProvider); + $scope.appCtrl = appCtrl; - return AppCtrl; -}()); \ No newline at end of file + //For production angular applications .scope() is unavailable so we set + //the root scope of the bootstrapped app on the bridge + nf.ng.Bridge.setRootScope($scope); +}; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/nifi/blob/cb675201/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js index e9bdf9d..f916144 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js @@ -17,328 +17,326 @@ /* global nf, d3 */ -nf.ng.Canvas.GlobalMenuCtrl = (function () { +nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) { + 'use strict'; - function GlobalMenuCtrl(serviceProvider) { - - var config = { - urls: { - helpDocument: '../nifi-docs/documentation', - controllerAbout: '../nifi-api/flow/about' - } - }; + var config = { + urls: { + helpDocument: '../nifi-docs/documentation', + controllerAbout: '../nifi-api/flow/about' + } + }; - function GlobalMenuCtrl() { - }; - GlobalMenuCtrl.prototype = { - constructor: GlobalMenuCtrl, + function GlobalMenuCtrl(serviceProvider) { - init: function () { - this.about.modal.init(); - }, + /** + * The summary menu item. + */ + this.summary = { /** - * The summary menu item. + * The summary menu item's shell. */ - summary: { + shell: { /** - * The summary menu item's shell. + * Launch the summary shell. */ - shell: { - - /** - * Launch the summary shell. - */ - launch: function () { - nf.Shell.showPage('summary'); - } + launch: function () { + nf.Shell.showPage('summary'); } - }, + } + }; + + /** + * The counters menu item. + */ + this.counters = { /** - * The counters menu item. + * The counters menu item's shell. */ - counters: { + shell: { /** - * The counters menu item's shell. + * Launch the counters shell. */ - shell: { - - /** - * Launch the counters shell. - */ - launch: function () { - nf.Shell.showPage('counters'); - } + launch: function () { + nf.Shell.showPage('counters'); } - }, + } + }; + + /** + * The bulletin board menu item. + */ + this.bulletinBoard = { /** - * The bulletin board menu item. + * The bulletin board menu item's shell. */ - bulletinBoard: { + shell: { /** - * The bulletin board menu item's shell. + * Launch the bulletin board shell. */ - shell: { - - /** - * Launch the bulletin board shell. - */ - launch: function () { - nf.Shell.showPage('bulletin-board'); - } + launch: function () { + nf.Shell.showPage('bulletin-board'); } - }, + } + }; + + /** + * The data provenance menu item. + */ + this.dataProvenance = { /** - * The data provenance menu item. + * Determines if the data provenance menu item is enabled. + * + * @returns {*|boolean} */ - dataProvenance: { + enabled: function () { + return nf.Common.canAccessProvenance(); + }, - /** - * Determines if the data provenance menu item is enabled. - * - * @returns {*|boolean} - */ - enabled: function () { - return nf.Common.canAccessProvenance(); - }, + /** + * The data provenance menu item's shell. + */ + shell: { /** - * The data provenance menu item's shell. + * Launch the data provenance shell. */ - shell: { - - /** - * Launch the data provenance shell. - */ - launch: function () { - nf.Shell.showPage('provenance'); - } + launch: function () { + nf.Shell.showPage('provenance'); } - }, + } + }; + + /** + * The controller settings menu item. + */ + this.controllerSettings = { /** - * The controller settings menu item. + * The controller settings menu item's shell. */ - controllerSettings: { + shell: { /** - * The controller settings menu item's shell. + * Launch the settings shell. */ - shell: { - - /** - * Launch the settings shell. - */ - launch: function () { - nf.Settings.loadSettings().done(function () { - nf.Settings.showSettings(); - }); - } + launch: function () { + nf.Settings.loadSettings().done(function () { + nf.Settings.showSettings(); + }); } - }, + } + }; + + /** + * The cluster menu item. + */ + this.cluster = { /** - * The cluster menu item. + * Determines if the cluster menu item is enabled. + * + * @returns {*|boolean} */ - cluster: { + enabled: function () { + return nf.Canvas.isClustered(); + }, - /** - * Determines if the cluster menu item is enabled. - * - * @returns {*|boolean} - */ - enabled: function () { - return nf.Canvas.isClustered(); - }, + /** + * The cluster menu item's shell. + */ + shell: { /** - * The cluster menu item's shell. + * Launch the cluster shell. */ - shell: { - - /** - * Launch the cluster shell. - */ - launch: function () { - nf.Shell.showPage('cluster'); - } + launch: function () { + nf.Shell.showPage('cluster'); } - }, + } + }; + + /** + * The flow config history menu item. + */ + this.flowConfigHistory = { /** - * The flow config history menu item. + * The flow config history menu item's shell. */ - flowConfigHistory: { + shell: { /** - * The flow config history menu item's shell. + * Launch the history shell. */ - shell: { - - /** - * Launch the history shell. - */ - launch: function () { - nf.Shell.showPage('history'); - } + launch: function () { + nf.Shell.showPage('history'); } - }, + } + }; + + /** + * The users menu item. + */ + this.users = { /** - * The users menu item. + * Determines if the users menu item is enabled. + * + * @returns {*|boolean} */ - users: { + enabled: function () { + return nf.Common.isAdmin(); + }, - /** - * Determines if the users menu item is enabled. - * - * @returns {*|boolean} - */ - enabled: function () { - return nf.Common.isAdmin(); - }, + /** + * The users menu item's shell. + */ + shell: { /** - * The users menu item's shell. + * Launch the users shell. */ - shell: { - - /** - * Launch the users shell. - */ - launch: function () { - nf.Shell.showPage('users'); - } + launch: function () { + nf.Shell.showPage('users'); } - }, + } + }; + + /** + * The templates menu item. + */ + this.templates = { /** - * The templates menu item. + * The templates menu item's shell. */ - templates: { + shell: { /** - * The templates menu item's shell. + * Launch the templates shell. */ - shell: { - - /** - * Launch the templates shell. - */ - launch: function () { - nf.Shell.showPage('templates?' + $.param({ - groupId: nf.Canvas.getGroupId() - })); - } + launch: function () { + nf.Shell.showPage('templates?' + $.param({ + groupId: nf.Canvas.getGroupId() + })); } - }, + } + }; + + /** + * The help menu item. + */ + this.help = { /** - * The help menu item. + * The help menu item's shell. */ - help: { + shell: { /** - * The help menu item's shell. + * Launch the help documentation shell. */ - shell: { - - /** - * Launch the help documentation shell. - */ - launch: function () { - nf.Shell.showPage(config.urls.helpDocument); - } + launch: function () { + nf.Shell.showPage(config.urls.helpDocument); } - }, + } + }; + + /** + * The about menu item. + */ + this.about = { /** - * The about menu item. + * The about menu item's modal. */ - about: { + modal: { + + /** + * Gets the modal element. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#nf-about'); + }, /** - * The about menu item's modal. + * Initialize the modal. */ - modal: { - - /** - * Gets the modal element. - * - * @returns {*|jQuery|HTMLElement} - */ - getElement: function () { - return $('#nf-about'); - }, - - /** - * Initialize the modal. - */ - init: function () { - var self = this; - // get the about details - $.ajax({ - type: 'GET', - url: config.urls.controllerAbout, - dataType: 'json' - }).done(function (response) { - var aboutDetails = response.about; - // set the document title and the about title - document.title = aboutDetails.title; - $('#nf-version').text(aboutDetails.version); - }).fail(nf.Common.handleAjaxError); - - // configure the about dialog - this.getElement().modal({ - overlayBackground: true, - buttons: [{ - buttonText: 'Ok', - handler: { - click: function () { - self.hide(); - } + init: function () { + var self = this; + // get the about details + $.ajax({ + type: 'GET', + url: config.urls.controllerAbout, + dataType: 'json' + }).done(function (response) { + var aboutDetails = response.about; + // set the document title and the about title + document.title = aboutDetails.title; + $('#nf-version').text(aboutDetails.version); + }).fail(nf.Common.handleAjaxError); + + // configure the about dialog + this.getElement().modal({ + overlayBackground: true, + buttons: [{ + buttonText: 'Ok', + handler: { + click: function () { + self.hide(); } - }] - }); - }, - - /** - * Updates the modal config. - * - * @param {string} name The name of the property to update. - * @param {object|array} config The config for the `name`. - */ - update: function (name, config) { - this.getElement().modal(name, config); - }, - - /** - * Show the modal - */ - show: function () { - this.getElement().modal('show'); - }, - - /** - * Hide the modal - */ - hide: function () { - this.getElement().modal('hide'); - } + } + }] + }); + }, + + /** + * Updates the modal config. + * + * @param {string} name The name of the property to update. + * @param {object|array} config The config for the `name`. + */ + update: function (name, config) { + this.getElement().modal(name, config); + }, + + /** + * Show the modal + */ + show: function () { + this.getElement().modal('show'); + }, + + /** + * Hide the modal + */ + hide: function () { + this.getElement().modal('hide'); } } - }; - var globalMenuCtrl = new GlobalMenuCtrl(); - return globalMenuCtrl; + } + } + GlobalMenuCtrl.prototype = { + constructor: GlobalMenuCtrl, + + /** + * Initialize the global menu controls. + */ + init: function() { + this.about.modal.init(); + } } - GlobalMenuCtrl.$inject = ['serviceProvider']; - - return GlobalMenuCtrl; -}()); \ No newline at end of file + var globalMenuCtrl = new GlobalMenuCtrl(); + return globalMenuCtrl; +}; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/nifi/blob/cb675201/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js index 5170a05..bc6a0df 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js @@ -17,169 +17,163 @@ /* global nf, d3 */ - -nf.ng.Canvas.GraphControlsCtrl = (function () { - - function GraphControlsCtrl(serviceProvider, navigateCtrl, operateCtrl) { - - var MIN_GRAPH_CONTROL_TOP = 117; +nf.ng.Canvas.GraphControlsCtrl = function (serviceProvider, navigateCtrl, operateCtrl) { + 'use strict'; + + var MIN_GRAPH_CONTROL_TOP = 117; + + /** + * Positions the graph controls based on the size of the screen. + */ + var positionGraphControls = function () { + var windowHeight = $(window).height(); + var navigationHeight = $('#navigation-control').outerHeight(); + var operationHeight = $('#operation-control').outerHeight(); + var graphControlTop = (windowHeight / 2) - ((navigationHeight + operationHeight) / 2); + + $('#graph-controls').css('top', Math.max(MIN_GRAPH_CONTROL_TOP, graphControlTop)); + }; + + /** + * Opens the specified graph control. + * + * @param {jQuery} graphControl + */ + var openGraphControl = function (graphControl) { + // undock if necessary + if ($('div.graph-control-content').is(':visible') === false) { + $('#graph-controls div.graph-control-docked').hide(); + $('#graph-controls div.graph-control-header-container').show(); + $('.graph-control').removeClass('docked'); + } + + // show the content of the specified graph control + graphControl.children('div.graph-control-content').show(); + graphControl.find('i.graph-control-expansion').removeClass('fa-plus-square-o').addClass('fa-minus-square-o'); + + // handle specific actions as necessary + if (graphControl.attr('id') === 'navigation-control') { + nf.Birdseye.updateBirdseyeVisibility(true); + } + + // get the current visibility + var graphControlVisibility = nf.Storage.getItem('graph-control-visibility'); + if (graphControlVisibility === null) { + graphControlVisibility = {}; + } + + // update the visibility for this graph control + var graphControlId = graphControl.attr('id'); + graphControlVisibility[graphControlId] = true; + nf.Storage.setItem('graph-control-visibility', graphControlVisibility); + + // reset the graph control position + positionGraphControls(); + }; + + /** + * Hides the specified graph control. + * + * @param {jQuery} graphControl + */ + var hideGraphControl = function (graphControl) { + // hide the content of the specified graph control + graphControl.children('div.graph-control-content').hide(); + graphControl.find('i.graph-control-expansion').removeClass('fa-minus-square-o').addClass('fa-plus-square-o'); + + // dock if necessary + if ($('div.graph-control-content').is(':visible') === false) { + $('#graph-controls div.graph-control-header-container').hide(); + $('#graph-controls div.graph-control-docked').show(); + $('.graph-control').addClass('docked'); + } + + // handle specific actions as necessary + if (graphControl.attr('id') === 'navigation-control') { + nf.Birdseye.updateBirdseyeVisibility(false); + } + + // get the current visibility + var graphControlVisibility = nf.Storage.getItem('graph-control-visibility'); + if (graphControlVisibility === null) { + graphControlVisibility = {}; + } + + // update the visibility for this graph control + var graphControlId = graphControl.attr('id'); + graphControlVisibility[graphControlId] = false; + nf.Storage.setItem('graph-control-visibility', graphControlVisibility); + + // reset the graph control position + positionGraphControls(); + }; + + function GraphControlsCtrl(navigateCtrl, operateCtrl) { + this.navigateCtrl = navigateCtrl; + this.operateCtrl = operateCtrl; + } + GraphControlsCtrl.prototype = { + constructor: GraphControlsCtrl, /** - * Positions the graph controls based on the size of the screen. + * Register the header controller. */ - var positionGraphControls = function () { - var windowHeight = $(window).height(); - var navigationHeight = $('#navigation-control').outerHeight(); - var operationHeight = $('#operation-control').outerHeight(); - var graphControlTop = (windowHeight / 2) - ((navigationHeight + operationHeight) / 2); - - $('#graph-controls').css('top', Math.max(MIN_GRAPH_CONTROL_TOP, graphControlTop)); - }; + register: function() { + if (serviceProvider.graphControlsCtrl === undefined) { + serviceProvider.register('graphControlsCtrl', graphControlsCtrl); + } + }, /** - * Opens the specified graph control. - * - * @param {jQuery} graphControl + * Initialize the graph controls. */ - var openGraphControl = function (graphControl) { - // undock if necessary - if ($('div.graph-control-content').is(':visible') === false) { - $('#graph-controls div.graph-control-docked').hide(); - $('#graph-controls div.graph-control-header-container').show(); - $('.graph-control').removeClass('docked'); - } - - // show the content of the specified graph control - graphControl.children('div.graph-control-content').show(); - graphControl.find('i.graph-control-expansion').removeClass('fa-plus-square-o').addClass('fa-minus-square-o'); - - // handle specific actions as necessary - if (graphControl.attr('id') === 'navigation-control') { - nf.Birdseye.updateBirdseyeVisibility(true); - } - - // get the current visibility + init: function() { + this.operateCtrl.init(); + // initial the graph control visibility var graphControlVisibility = nf.Storage.getItem('graph-control-visibility'); - if (graphControlVisibility === null) { - graphControlVisibility = {}; + if (graphControlVisibility !== null) { + $.each(graphControlVisibility, function (id, isVisible) { + var graphControl = $('#' + id); + if (graphControl) { + if (isVisible) { + openGraphControl(graphControl); + } else { + hideGraphControl(graphControl); + } + } + }); } - // update the visibility for this graph control - var graphControlId = graphControl.attr('id'); - graphControlVisibility[graphControlId] = true; - nf.Storage.setItem('graph-control-visibility', graphControlVisibility); + // listen for browser resize events to reset the graph control positioning + $(window).resize(positionGraphControls); - // reset the graph control position + // set the initial position positionGraphControls(); - }; + }, /** - * Hides the specified graph control. - * - * @param {jQuery} graphControl + * Undock the graph control. + * @param {jQuery} $event */ - var hideGraphControl = function (graphControl) { - // hide the content of the specified graph control - graphControl.children('div.graph-control-content').hide(); - graphControl.find('i.graph-control-expansion').removeClass('fa-minus-square-o').addClass('fa-plus-square-o'); - - // dock if necessary - if ($('div.graph-control-content').is(':visible') === false) { - $('#graph-controls div.graph-control-header-container').hide(); - $('#graph-controls div.graph-control-docked').show(); - $('.graph-control').addClass('docked'); - } - - // handle specific actions as necessary - if (graphControl.attr('id') === 'navigation-control') { - nf.Birdseye.updateBirdseyeVisibility(false); - } - - // get the current visibility - var graphControlVisibility = nf.Storage.getItem('graph-control-visibility'); - if (graphControlVisibility === null) { - graphControlVisibility = {}; - } + undock: function($event) { + openGraphControl($($event.target).parent().parent()); + }, - // update the visibility for this graph control - var graphControlId = graphControl.attr('id'); - graphControlVisibility[graphControlId] = false; - nf.Storage.setItem('graph-control-visibility', graphControlVisibility); - - // reset the graph control position - positionGraphControls(); - }; - - function GraphControlsCtrl(navigateCtrl, operateCtrl) { - this.navigateCtrl = navigateCtrl; - this.operateCtrl = operateCtrl; - }; - GraphControlsCtrl.prototype = { - constructor: GraphControlsCtrl, - - /** - * Register the header controller. - */ - register: function () { - if (serviceProvider.graphControlsCtrl === undefined) { - serviceProvider.register('graphControlsCtrl', graphControlsCtrl); - } - }, - - /** - * Initialize the graph controls. - */ - init: function () { - this.operateCtrl.init(); - // initial the graph control visibility - var graphControlVisibility = nf.Storage.getItem('graph-control-visibility'); - if (graphControlVisibility !== null) { - $.each(graphControlVisibility, function (id, isVisible) { - var graphControl = $('#' + id); - if (graphControl) { - if (isVisible) { - openGraphControl(graphControl); - } else { - hideGraphControl(graphControl); - } - } - }); - } - - // listen for browser resize events to reset the graph control positioning - $(window).resize(positionGraphControls); - - // set the initial position - positionGraphControls(); - }, - - /** - * Undock the graph control. - * @param {jQuery} $event - */ - undock: function ($event) { - openGraphControl($($event.target).parent().parent()); - }, - - /** - * Expand the graph control. - * @param {jQuery} $event - */ - expand: function ($event) { - var icon = $($event.target); - if (icon.hasClass('fa-plus-square-o')) { - openGraphControl(icon.closest('div.graph-control')); - } else { - hideGraphControl(icon.closest('div.graph-control')); - } + /** + * Expand the graph control. + * @param {jQuery} $event + */ + expand: function($event) { + var icon = $($event.target); + if (icon.hasClass('fa-plus-square-o')) { + openGraphControl(icon.closest('div.graph-control')); + } else { + hideGraphControl(icon.closest('div.graph-control')); } - }; - var graphControlsCtrl = new GraphControlsCtrl(navigateCtrl, operateCtrl); - graphControlsCtrl.register(); - return graphControlsCtrl; + } } - GraphControlsCtrl.$inject = ['serviceProvider', 'navigateCtrl', 'operateCtrl']; - - return GraphControlsCtrl; -}()); \ No newline at end of file + var graphControlsCtrl = new GraphControlsCtrl(navigateCtrl, operateCtrl); + graphControlsCtrl.register(); + return graphControlsCtrl; +}; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/nifi/blob/cb675201/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-header-controller.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-header-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-header-controller.js index a6096d4..d29a638 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-header-controller.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-header-controller.js @@ -17,103 +17,98 @@ /* global nf, d3 */ - -nf.ng.Canvas.HeaderCtrl = (function () { - - function HeaderCtrl(serviceProvider, toolboxCtrl, globalMenuCtrl) { - - var MIN_TOOLBAR_WIDTH = 640; - - function HeaderCtrl(toolboxCtrl, globalMenuCtrl) { - this.toolboxCtrl = toolboxCtrl; - this.globalMenuCtrl = globalMenuCtrl; - }; - HeaderCtrl.prototype = { - constructor: HeaderCtrl, - - /** - * Register the header controller. - */ - register: function () { - if (serviceProvider.headerCtrl === undefined) { - serviceProvider.register('headerCtrl', headerCtrl); - } - }, - - /** - * Initialize the canvas header. - */ - init: function () { - this.toolboxCtrl.init(); - this.globalMenuCtrl.init(); - - // if the user is not anonymous or accessing via http - if ($('#current-user').text() !== nf.Common.ANONYMOUS_USER_TEXT || location.protocol === 'http:') { - $('#login-link-container').css('display', 'none'); +nf.ng.Canvas.HeaderCtrl = function (serviceProvider, toolboxCtrl, globalMenuCtrl) { + 'use strict'; + + var MIN_TOOLBAR_WIDTH = 640; + + function HeaderCtrl(toolboxCtrl, globalMenuCtrl) { + this.toolboxCtrl = toolboxCtrl; + this.globalMenuCtrl = globalMenuCtrl; + + /** + * The login link. + */ + this.loginLink = { + shell: { + + /** + * Launch the login shell. + */ + launch: function () { + nf.Shell.showPage('login', false); } + } + }; - // if accessing via http, don't show the current user - if (location.protocol === 'http:') { - $('#current-user-container').css('display', 'none'); - } - }, - - /** - * Reloads and clears any warnings. - */ - reloadAndClearWarnings: function () { - nf.Canvas.reload().done(function () { - // update component visibility - nf.Canvas.View.updateVisibility(); - - // refresh the birdseye - nf.Birdseye.refresh(); - - // hide the refresh link on the canvas - $('#stats-last-refreshed').removeClass('alert'); - $('#refresh-required-container').hide(); - - // hide the refresh link on the settings - $('#settings-last-refreshed').removeClass('alert'); - $('#settings-refresh-required-icon').hide(); - }).fail(function () { - nf.Dialog.showOkDialog({ - dialogContent: 'Unable to refresh the current group.', - overlayBackground: true - }); - }); - }, - - /** - * The login link. - */ - loginLink: { - shell: { - /** - * Launch the login shell. - */ - launch: function () { - nf.Shell.showPage('login', false); - } - } - }, - - /** - * Logout. - */ - logoutLink: { - logout: function () { - nf.Storage.removeItem("jwt"); - window.location = '/nifi'; - } + /** + * Logout. + */ + this.logoutLink = { + logout: function () { + nf.Storage.removeItem("jwt"); + window.location = '/nifi'; } }; - var headerCtrl = new HeaderCtrl(toolboxCtrl, globalMenuCtrl); - headerCtrl.register(); - return headerCtrl; } + HeaderCtrl.prototype = { + constructor: HeaderCtrl, + + /** + * Register the header controller. + */ + register: function() { + if (serviceProvider.headerCtrl === undefined) { + serviceProvider.register('headerCtrl', headerCtrl); + } + }, + + /** + * Initialize the canvas header. + */ + init: function() { + this.toolboxCtrl.init(); + this.globalMenuCtrl.init(); + + // if the user is not anonymous or accessing via http + if ($('#current-user').text() !== nf.Common.ANONYMOUS_USER_TEXT || location.protocol === 'http:') { + $('#login-link-container').css('display', 'none'); + } - HeaderCtrl.$inject = ['serviceProvider', 'toolboxCtrl', 'globalMenuCtrl']; + // if accessing via http, don't show the current user + if (location.protocol === 'http:') { + $('#current-user-container').css('display', 'none'); + } + }, + + /** + * Reloads and clears any warnings. + */ + reloadAndClearWarnings: function() { + nf.Canvas.reload().done(function () { + // update component visibility + nf.Canvas.View.updateVisibility(); + + // refresh the birdseye + nf.Birdseye.refresh(); + + // hide the refresh link on the canvas + $('#stats-last-refreshed').removeClass('alert'); + $('#refresh-required-container').hide(); + + // hide the refresh link on the settings + $('#settings-last-refreshed').removeClass('alert'); + $('#settings-refresh-required-icon').hide(); + }).fail(function () { + nf.Dialog.showOkDialog({ + dialogContent: 'Unable to refresh the current group.', + overlayBackground: true + }); + }); + } + } - return HeaderCtrl; -}()); \ No newline at end of file + var headerCtrl = new HeaderCtrl(toolboxCtrl, globalMenuCtrl); + headerCtrl.register(); + return headerCtrl; +}; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/nifi/blob/cb675201/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-navigate-controller.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-navigate-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-navigate-controller.js index a1f903c..45c541c 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-navigate-controller.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-navigate-controller.js @@ -17,81 +17,75 @@ /* global nf, d3 */ - -nf.ng.Canvas.NavigateCtrl = (function () { +nf.ng.Canvas.NavigateCtrl = function () { + 'use strict'; function NavigateCtrl() { - function NavigateCtrl() { + /** + * Zoom in on the canvas. + */ + this.zoomIn = function () { + nf.Canvas.View.zoomIn(); + + // hide the context menu + nf.ContextMenu.hide(); + + // refresh the canvas + nf.Canvas.View.refresh({ + transition: true + }); }; - NavigateCtrl.prototype = { - constructor: NavigateCtrl, - - /** - * Zoom in on the canvas. - */ - zoomIn: function () { - nf.Canvas.View.zoomIn(); - - // hide the context menu - nf.ContextMenu.hide(); - - // refresh the canvas - nf.Canvas.View.refresh({ - transition: true - }); - }, - - /** - * Zoom out on the canvas. - */ - zoomOut: function () { - nf.Canvas.View.zoomOut(); - - // hide the context menu - nf.ContextMenu.hide(); - - // refresh the canvas - nf.Canvas.View.refresh({ - transition: true - }); - }, - - /** - * Zoom fit on the canvas. - */ - zoomFit: function () { - nf.Canvas.View.fit(); - - // hide the context menu - nf.ContextMenu.hide(); - - // refresh the canvas - nf.Canvas.View.refresh({ - transition: true - }); - }, - - /** - * Zoom actual size on the canvas. - */ - zoomActualSize: function () { - nf.Canvas.View.actualSize(); - - // hide the context menu - nf.ContextMenu.hide(); - - // refresh the canvas - nf.Canvas.View.refresh({ - transition: true - }); - } + + /** + * Zoom out on the canvas. + */ + this.zoomOut = function () { + nf.Canvas.View.zoomOut(); + + // hide the context menu + nf.ContextMenu.hide(); + + // refresh the canvas + nf.Canvas.View.refresh({ + transition: true + }); }; - var navigateCtrl = new NavigateCtrl(); - return navigateCtrl; - } - NavigateCtrl.$inject = []; + /** + * Zoom fit on the canvas. + */ + this.zoomFit = function () { + nf.Canvas.View.fit(); + + // hide the context menu + nf.ContextMenu.hide(); + + // refresh the canvas + nf.Canvas.View.refresh({ + transition: true + }); + }; + + /** + * Zoom actual size on the canvas. + */ + this.zoomActualSize = function () { + nf.Canvas.View.actualSize(); + + // hide the context menu + nf.ContextMenu.hide(); + + // refresh the canvas + nf.Canvas.View.refresh({ + transition: true + }); + }; + } + NavigateCtrl.prototype = { + constructor: NavigateCtrl + } - return NavigateCtrl; -}()); \ No newline at end of file + var navigateCtrl = new NavigateCtrl(); + return navigateCtrl; +}; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/nifi/blob/cb675201/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js index e60c0f1..2f0dc5c 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js @@ -17,268 +17,262 @@ /* global nf, d3 */ +nf.ng.Canvas.OperateCtrl = function () { + 'use strict'; -nf.ng.Canvas.OperateCtrl = (function () { + // updates the color if its a valid hex color string + var updateColor = function () { + var hex = $('#fill-color-value').val(); - function OperateCtrl() { - - // updates the color if its a valid hex color string - var updateColor = function () { - var hex = $('#fill-color-value').val(); + // only update the fill color when its a valid hex color string + // #[six hex characters|three hex characters] case insensitive + if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex)) { + $('#fill-color').minicolors('value', hex); + } + }; - // only update the fill color when its a valid hex color string - // #[six hex characters|three hex characters] case insensitive - if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex)) { - $('#fill-color').minicolors('value', hex); - } - }; + function OperateCtrl() { - function OperateCtrl() { - }; - OperateCtrl.prototype = { - constructor: OperateCtrl, + /** + * The canvas operator's create template component. + */ + this.template = { /** - * The canvas operator's create template component. + * The canvas operator's create template component's modal. */ - template: { + modal: { /** - * The canvas operator's create template component's modal. + * Gets the modal element. + * + * @returns {*|jQuery|HTMLElement} */ - modal: { - - /** - * Gets the modal element. - * - * @returns {*|jQuery|HTMLElement} - */ - getElement: function () { - return $('#new-template-dialog'); - }, + getElement: function () { + return $('#new-template-dialog'); + }, - /** - * Initialize the modal. - */ - init: function () { - // configure the create template dialog - this.getElement().modal({ - headerText: 'Create Template', - overlayBackground: false - }); - }, + /** + * Initialize the modal. + */ + init: function () { + // configure the create template dialog + this.getElement().modal({ + headerText: 'Create Template', + overlayBackground: false + }); + }, - /** - * Updates the modal config. - * - * @param {string} name The name of the property to update. - * @param {object|array} config The config for the `name`. - */ - update: function (name, config) { - this.getElement().modal(name, config); - }, + /** + * Updates the modal config. + * + * @param {string} name The name of the property to update. + * @param {object|array} config The config for the `name`. + */ + update: function (name, config) { + this.getElement().modal(name, config); + }, - /** - * Show the modal. - */ - show: function () { - this.getElement().modal('show'); - }, + /** + * Show the modal. + */ + show: function () { + this.getElement().modal('show'); + }, - /** - * Hide the modal. - */ - hide: function () { - this.getElement().modal('hide'); - } + /** + * Hide the modal. + */ + hide: function () { + this.getElement().modal('hide'); } - }, + } + }; + + /** + * The canvas operator's fillcolor component. + */ + this.fillcolor = { /** - * The canvas operator's fillcolor component. + * The canvas operator's fillcolor component's modal. */ - fillcolor: { + modal: { /** - * The canvas operator's fillcolor component's modal. + * Gets the modal element. + * + * @returns {*|jQuery|HTMLElement} */ - modal: { + getElement: function () { + return $('#fill-color-dialog'); + }, - /** - * Gets the modal element. - * - * @returns {*|jQuery|HTMLElement} - */ - getElement: function () { - return $('#fill-color-dialog'); - }, - - /** - * Initialize the modal. - */ - init: function () { - // configure the create fillcolor dialog - this.getElement().modal({ - headerText: 'Fill', - overlayBackground: false, - buttons: [{ - buttonText: 'Apply', - handler: { - click: function () { - var selection = nf.CanvasUtils.getSelection(); - - // color the selected components - selection.each(function (d) { - var selected = d3.select(this); - var selectedData = selected.datum(); - - // get the color and update the styles - var color = $('#fill-color').minicolors('value'); - - // ensure the color actually changed - if (color !== selectedData.component.style['background-color']) { - // build the request entity - var entity = { - 'revision': nf.Client.getRevision(), - 'component': { - 'id': selectedData.id, - 'style': { - 'background-color': color - } - } - }; - - // update the style for the specified component - $.ajax({ - type: 'PUT', - url: selectedData.component.uri, - data: JSON.stringify(entity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - // update the revision - nf.Client.setRevision(response.revision); - - // update the component - nf[selectedData.type].set(response); - }).fail(function (xhr, status, error) { - if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) { - nf.Dialog.showOkDialog({ - dialogContent: nf.Common.escapeHtml(xhr.responseText), - overlayBackground: true - }); + /** + * Initialize the modal. + */ + init: function () { + // configure the create fillcolor dialog + this.getElement().modal({ + headerText: 'Fill', + overlayBackground: false, + buttons: [{ + buttonText: 'Apply', + handler: { + click: function () { + var selection = nf.CanvasUtils.getSelection(); + + // color the selected components + selection.each(function (d) { + var selected = d3.select(this); + var selectedData = selected.datum(); + + // get the color and update the styles + var color = $('#fill-color').minicolors('value'); + + // ensure the color actually changed + if (color !== selectedData.component.style['background-color']) { + // build the request entity + var entity = { + 'revision': nf.Client.getRevision(), + 'component': { + 'id': selectedData.id, + 'style': { + 'background-color': color } - }); - } - }); + } + }; + + // update the style for the specified component + $.ajax({ + type: 'PUT', + url: selectedData.component.uri, + data: JSON.stringify(entity), + dataType: 'json', + contentType: 'application/json' + }).done(function (response) { + // update the revision + nf.Client.setRevision(response.revision); + + // update the component + nf[selectedData.type].set(response); + }).fail(function (xhr, status, error) { + if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) { + nf.Dialog.showOkDialog({ + dialogContent: nf.Common.escapeHtml(xhr.responseText), + overlayBackground: true + }); + } + }); + } + }); - // close the dialog - $('#fill-color-dialog').modal('hide'); - } - } - }, { - buttonText: 'Cancel', - handler: { - click: function () { - // close the dialog - $('#fill-color-dialog').modal('hide'); - } + // close the dialog + $('#fill-color-dialog').modal('hide'); } - }], + } + }, { + buttonText: 'Cancel', handler: { - close: function () { - // clear the current color - $('#fill-color-value').val(''); - $('#fill-color').minicolors('value', ''); + click: function () { + // close the dialog + $('#fill-color-dialog').modal('hide'); } } - }); - }, + }], + handler: { + close: function () { + // clear the current color + $('#fill-color-value').val(''); + $('#fill-color').minicolors('value', ''); + } + } + }); + }, - /** - * Updates the modal config. - * - * @param {string} name The name of the property to update. - * @param {object|array} config The config for the `name`. - */ - update: function (name, config) { - this.getElement().modal(name, config); - }, + /** + * Updates the modal config. + * + * @param {string} name The name of the property to update. + * @param {object|array} config The config for the `name`. + */ + update: function (name, config) { + this.getElement().modal(name, config); + }, - /** - * Show the modal. - */ - show: function () { - this.getElement().modal('show'); - }, + /** + * Show the modal. + */ + show: function () { + this.getElement().modal('show'); + }, + + /** + * Hide the modal. + */ + hide: function () { + this.getElement().modal('hide'); + }, + + /** + * The canvas operator's fillcolor component modal's minicolors. + */ + minicolors: { /** - * Hide the modal. + * Gets the minicolors element. + * + * @returns {*|jQuery|HTMLElement} */ - hide: function () { - this.getElement().modal('hide'); + getElement: function () { + return $('#fill-color'); }, /** - * The canvas operator's fillcolor component modal's minicolors. + * Initialize the minicolors. */ - minicolors: { - - /** - * Gets the minicolors element. - * - * @returns {*|jQuery|HTMLElement} - */ - getElement: function () { - return $('#fill-color'); - }, - - /** - * Initialize the minicolors. - */ - init: function () { - // configure the minicolors - this.getElement().minicolors({ - inline: true, - change: function (hex, opacity) { - // update the value - $('#fill-color-value').val(hex); - - // always update the preview - $('#fill-color-processor-preview, #fill-color-label-preview').css({ - 'border-color': hex, - 'background': 'linear-gradient(to bottom, #ffffff, ' + hex + ')', - 'filter': 'progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#ffffff, endColorstr=' + hex + ')' - }); - } - }); + init: function () { + // configure the minicolors + this.getElement().minicolors({ + inline: true, + change: function (hex, opacity) { + // update the value + $('#fill-color-value').val(hex); + + // always update the preview + $('#fill-color-processor-preview, #fill-color-label-preview').css({ + 'border-color': hex, + 'background': 'linear-gradient(to bottom, #ffffff, ' + hex + ')', + 'filter': 'progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#ffffff, endColorstr=' + hex + ')' + }); + } + }); - // apply fill color from field on blur and enter press - $('#fill-color-value').on('blur', updateColor).on('keyup', function (e) { - var code = e.keyCode ? e.keyCode : e.which; - if (code === $.ui.keyCode.ENTER) { - updateColor(); - } - }); - } + // apply fill color from field on blur and enter press + $('#fill-color-value').on('blur', updateColor).on('keyup', function (e) { + var code = e.keyCode ? e.keyCode : e.which; + if (code === $.ui.keyCode.ENTER) { + updateColor(); + } + }); } } - }, - - /** - * Initializes the canvas operate controller. - */ - init: function () { - this.template.modal.init(); - this.fillcolor.modal.init(); - this.fillcolor.modal.minicolors.init(); } }; - var operateCtrl = new OperateCtrl(); - return operateCtrl; + } + OperateCtrl.prototype = { + constructor: OperateCtrl, + + /** + * Initializes the canvas operate controller. + */ + init: function() { + this.template.modal.init(); + this.fillcolor.modal.init(); + this.fillcolor.modal.minicolors.init(); + } } - OperateCtrl.$inject = []; - - return OperateCtrl; -}()); \ No newline at end of file + var operateCtrl = new OperateCtrl(); + return operateCtrl; +}; \ No newline at end of file
