http://git-wip-us.apache.org/repos/asf/nifi/blob/bf3b1640/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 06959df..e7dedea 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 @@ -15,330 +15,364 @@ * limitations under the License. */ -/* global nf, d3 */ - -nf.ng.Canvas.GraphControlsCtrl = function (serviceProvider, navigateCtrl, operateCtrl) { +/* global define, module, require, exports */ + +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Actions', + 'nf.Birdseye', + 'nf.Storage', + 'nf.CanvasUtils', + 'nf.Common', + 'nf.ProcessGroupConfiguration'], + function ($, action, birdseye, storage, canvasUtils, common, processGroupConfiguration) { + return (nf.ng.Canvas.GraphControlsCtrl = factory($, action, birdseye, storage, canvasUtils, common, processGroupConfiguration)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.Canvas.GraphControlsCtrl = + factory(require('jquery'), + require('nf.Actions'), + require('nf.Birdseye'), + require('nf.Storage'), + require('nf.CanvasUtils'), + require('nf.Common'), + require('nf.ProcessGroupConfiguration'))); + } else { + nf.ng.Canvas.GraphControlsCtrl = factory(root.$, + root.nf.Actions, + root.nf.Birdseye, + root.nf.Storage, + root.nf.CanvasUtils, + root.nf.Common, + root.nf.ProcessGroupConfiguration); + } +}(this, function ($, actions, birdseye, storage, canvasUtils, common, processGroupConfiguration) { 'use strict'; - /** - * 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('div.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); - }; - - /** - * 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('div.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'); - } + return function (serviceProvider, navigateCtrl, operateCtrl) { + 'use strict'; - // handle specific actions as necessary - if (graphControl.attr('id') === 'navigation-control') { - nf.Birdseye.updateBirdseyeVisibility(false); - } + /** + * 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'); + } - // get the current visibility - var graphControlVisibility = nf.Storage.getItem('graph-control-visibility'); - if (graphControlVisibility === null) { - graphControlVisibility = {}; - } + // show the content of the specified graph control + graphControl.children('div.graph-control-content').show(); + graphControl.find('div.graph-control-expansion').removeClass('fa-plus-square-o').addClass('fa-minus-square-o'); - // update the visibility for this graph control - var graphControlId = graphControl.attr('id'); - graphControlVisibility[graphControlId] = false; - nf.Storage.setItem('graph-control-visibility', graphControlVisibility); - }; + // handle specific actions as necessary + if (graphControl.attr('id') === 'navigation-control') { + birdseye.updateBirdseyeVisibility(true); + } - function GraphControlsCtrl(navigateCtrl, operateCtrl) { - this.navigateCtrl = navigateCtrl; - this.operateCtrl = operateCtrl; - } + // get the current visibility + var graphControlVisibility = storage.getItem('graph-control-visibility'); + if (graphControlVisibility === null) { + graphControlVisibility = {}; + } - GraphControlsCtrl.prototype = { - constructor: GraphControlsCtrl, + // update the visibility for this graph control + var graphControlId = graphControl.attr('id'); + graphControlVisibility[graphControlId] = true; + storage.setItem('graph-control-visibility', graphControlVisibility); + }; /** - * Register the header controller. + * Hides the specified graph control. + * + * @param {jQuery} graphControl */ - register: function () { - if (serviceProvider.graphControlsCtrl === undefined) { - serviceProvider.register('graphControlsCtrl', graphControlsCtrl); + var hideGraphControl = function (graphControl) { + // hide the content of the specified graph control + graphControl.children('div.graph-control-content').hide(); + graphControl.find('div.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'); } - }, - /** - * 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); - } - } - }); - } else { - openGraphControl($('#navigation-control')); - openGraphControl($('#operation-control')); + // handle specific actions as necessary + if (graphControl.attr('id') === 'navigation-control') { + birdseye.updateBirdseyeVisibility(false); } - }, - - /** - * Undock the graph control. - * @param {jQuery} $event - */ - undock: function ($event) { - openGraphControl($($event.target).parent()); - }, - /** - * Expand the graph control. - * @param {jQuery} $event - */ - expand: function ($event) { - var icon = $($event.target); - if (icon.find('.fa-plus-square-o').length > 0 || icon.hasClass('fa-plus-square-o') || icon.parent().children().find('.fa-plus-square-o').length > 0) { - openGraphControl(icon.closest('div.graph-control')); - } else { - hideGraphControl(icon.closest('div.graph-control')); + // get the current visibility + var graphControlVisibility = storage.getItem('graph-control-visibility'); + if (graphControlVisibility === null) { + graphControlVisibility = {}; } - }, - /** - * Gets the icon to show for the selection context. - */ - getContextIcon: function () { - var selection = nf.CanvasUtils.getSelection(); + // update the visibility for this graph control + var graphControlId = graphControl.attr('id'); + graphControlVisibility[graphControlId] = false; + storage.setItem('graph-control-visibility', graphControlVisibility); + }; + + function GraphControlsCtrl(navigateCtrl, operateCtrl) { + this.navigateCtrl = navigateCtrl; + this.operateCtrl = operateCtrl; + } + + GraphControlsCtrl.prototype = { + constructor: GraphControlsCtrl, - if (selection.empty()) { - if (nf.Canvas.getParentGroupId() === null) { - return 'icon-drop'; + /** + * 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 = 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); + } + } + }); } else { - return 'icon-group'; + openGraphControl($('#navigation-control')); + openGraphControl($('#operation-control')); } - } else { - if (selection.size() === 1) { - if (nf.CanvasUtils.isProcessor(selection)) { - return 'icon-processor'; - } else if (nf.CanvasUtils.isProcessGroup(selection)) { - return 'icon-group'; - } else if (nf.CanvasUtils.isInputPort(selection)) { - return 'icon-port-in'; - } else if (nf.CanvasUtils.isOutputPort(selection)) { - return 'icon-port-out'; - } else if (nf.CanvasUtils.isRemoteProcessGroup(selection)) { - return 'icon-group-remote'; - } else if (nf.CanvasUtils.isFunnel(selection)) { - return 'icon-funnel'; - } else if (nf.CanvasUtils.isLabel(selection)) { - return 'icon-label'; - } else if (nf.CanvasUtils.isConnection(selection)) { - return 'icon-connect'; - } + }, + + /** + * Undock the graph control. + * @param {jQuery} $event + */ + undock: function ($event) { + openGraphControl($($event.target).parent()); + }, + + /** + * Expand the graph control. + * @param {jQuery} $event + */ + expand: function ($event) { + var icon = $($event.target); + if (icon.find('.fa-plus-square-o').length > 0 || icon.hasClass('fa-plus-square-o') || icon.parent().children().find('.fa-plus-square-o').length > 0) { + openGraphControl(icon.closest('div.graph-control')); } else { - return 'icon-drop'; + hideGraphControl(icon.closest('div.graph-control')); } - } - }, + }, - /** - * Will hide target when appropriate. - */ - hide: function () { - var selection = nf.CanvasUtils.getSelection(); - if (selection.size() > 1) { - return 'invisible' - } else { - return ''; - } - }, + /** + * Gets the icon to show for the selection context. + */ + getContextIcon: function () { + var selection = canvasUtils.getSelection(); - /** - * Gets the name to show for the selection context. - */ - getContextName: function () { - var selection = nf.CanvasUtils.getSelection(); - var canRead = nf.Canvas.canRead(); - - if (selection.empty()) { - if (canRead) { - return nf.Canvas.getGroupName(); + if (selection.empty()) { + if (canvasUtils.getParentGroupId() === null) { + return 'icon-drop'; + } else { + return 'icon-group'; + } + } else { + if (selection.size() === 1) { + if (canvasUtils.isProcessor(selection)) { + return 'icon-processor'; + } else if (canvasUtils.isProcessGroup(selection)) { + return 'icon-group'; + } else if (canvasUtils.isInputPort(selection)) { + return 'icon-port-in'; + } else if (canvasUtils.isOutputPort(selection)) { + return 'icon-port-out'; + } else if (canvasUtils.isRemoteProcessGroup(selection)) { + return 'icon-group-remote'; + } else if (canvasUtils.isFunnel(selection)) { + return 'icon-funnel'; + } else if (canvasUtils.isLabel(selection)) { + return 'icon-label'; + } else if (canvasUtils.isConnection(selection)) { + return 'icon-connect'; + } + } else { + return 'icon-drop'; + } + } + }, + + /** + * Will hide target when appropriate. + */ + hide: function () { + var selection = canvasUtils.getSelection(); + if (selection.size() > 1) { + return 'invisible' } else { - return nf.Canvas.getGroupId(); + return ''; } - } else { - if (selection.size() === 1) { - var d = selection.datum(); - if (d.permissions.canRead) { - if (nf.CanvasUtils.isLabel(selection)) { - if ($.trim(d.component.label) !== '') { - return d.component.label; + }, + + /** + * Gets the name to show for the selection context. + */ + getContextName: function () { + var selection = canvasUtils.getSelection(); + var canRead = canvasUtils.canReadFromGroup(); + + if (selection.empty()) { + if (canRead) { + return canvasUtils.getGroupName(); + } else { + return canvasUtils.getGroupId(); + } + } else { + if (selection.size() === 1) { + var d = selection.datum(); + if (d.permissions.canRead) { + if (canvasUtils.isLabel(selection)) { + if ($.trim(d.component.label) !== '') { + return d.component.label; + } else { + return ''; + } + } else if (canvasUtils.isConnection(selection)) { + return canvasUtils.formatConnectionName(d.component); } else { - return ''; + return d.component.name; } - } else if (nf.CanvasUtils.isConnection(selection)) { - return nf.CanvasUtils.formatConnectionName(d.component); } else { - return d.component.name; + return d.id; } } else { - return d.id; + return 'Multiple components selected'; } - } else { - return 'Multiple components selected'; } - } - }, + }, - /** - * Gets the type to show for the selection context. - */ - getContextType: function () { - var selection = nf.CanvasUtils.getSelection(); - - if (selection.empty()) { - return 'Process Group'; - } else { - if (selection.size() === 1) { - if (nf.CanvasUtils.isProcessor(selection)) { - return 'Processor'; - } else if (nf.CanvasUtils.isProcessGroup(selection)) { - return 'Process Group'; - } else if (nf.CanvasUtils.isInputPort(selection)) { - return 'Input Port'; - } else if (nf.CanvasUtils.isOutputPort(selection)) { - return 'Output Port'; - } else if (nf.CanvasUtils.isRemoteProcessGroup(selection)) { - return 'Remote Process Group'; - } else if (nf.CanvasUtils.isFunnel(selection)) { - return 'Funnel'; - } else if (nf.CanvasUtils.isLabel(selection)) { - return 'Label'; - } else if (nf.CanvasUtils.isConnection(selection)) { - return 'Connection'; - } + /** + * Gets the type to show for the selection context. + */ + getContextType: function () { + var selection = canvasUtils.getSelection(); + + if (selection.empty()) { + return 'Process Group'; } else { - return 'Multiple selected'; + if (selection.size() === 1) { + if (canvasUtils.isProcessor(selection)) { + return 'Processor'; + } else if (canvasUtils.isProcessGroup(selection)) { + return 'Process Group'; + } else if (canvasUtils.isInputPort(selection)) { + return 'Input Port'; + } else if (canvasUtils.isOutputPort(selection)) { + return 'Output Port'; + } else if (canvasUtils.isRemoteProcessGroup(selection)) { + return 'Remote Process Group'; + } else if (canvasUtils.isFunnel(selection)) { + return 'Funnel'; + } else if (canvasUtils.isLabel(selection)) { + return 'Label'; + } else if (canvasUtils.isConnection(selection)) { + return 'Connection'; + } + } else { + return 'Multiple selected'; + } } - } - }, + }, - /** - * Gets the id to show for the selection context. - */ - getContextId: function () { - var selection = nf.CanvasUtils.getSelection(); - - if (selection.empty()) { - return nf.Canvas.getGroupId(); - } else { - if (selection.size() === 1) { - var d = selection.datum(); - return d.id; + /** + * Gets the id to show for the selection context. + */ + getContextId: function () { + var selection = canvasUtils.getSelection(); + + if (selection.empty()) { + return canvasUtils.getGroupId(); } else { - return 'Multiple selected'; - } - } - }, + if (selection.size() === 1) { + var d = selection.datum(); + return d.id; + } else { + return 'Multiple selected'; + } + } + }, - /** - * Determines whether the user can configure or open the details dialog. - */ - canConfigureOrOpenDetails: function () { - var selection = nf.CanvasUtils.getSelection(); + /** + * Determines whether the user can configure or open the details dialog. + */ + canConfigureOrOpenDetails: function () { + var selection = canvasUtils.getSelection(); - if (selection.empty()) { - return true; - } + if (selection.empty()) { + return true; + } - return nf.CanvasUtils.isConfigurable(selection) || nf.CanvasUtils.hasDetails(selection); - }, + return canvasUtils.isConfigurable(selection) || canvasUtils.hasDetails(selection); + }, - /** - * Opens either the configuration or details view based on the current state. - */ - openConfigureOrDetailsView: function () { - var selection = nf.CanvasUtils.getSelection(); + /** + * Opens either the configuration or details view based on the current state. + */ + openConfigureOrDetailsView: function () { + var selection = canvasUtils.getSelection(); - if (selection.empty()) { - nf.ProcessGroupConfiguration.showConfiguration(nf.Canvas.getGroupId()); - } + if (selection.empty()) { + processGroupConfiguration.showConfiguration(canvasUtils.getGroupId()); + } - if (nf.CanvasUtils.isConfigurable(selection)) { - nf.Actions.showConfiguration(selection); - } else if (nf.CanvasUtils.hasDetails(selection)) { - nf.Actions.showDetails(selection); - } - }, + if (canvasUtils.isConfigurable(selection)) { + actions.showConfiguration(selection); + } else if (canvasUtils.hasDetails(selection)) { + actions.showDetails(selection); + } + }, + + /** + * Determines whether the user can configure or open the policy management page. + */ + canManagePolicies: function () { + var selection = canvasUtils.getSelection(); + + // ensure 0 or 1 components selected + if (selection.size() <= 1) { + // if something is selected, ensure it's not a connection + if (!selection.empty() && canvasUtils.isConnection(selection)) { + return false; + } - /** - * Determines whether the user can configure or open the policy management page. - */ - canManagePolicies: function () { - var selection = nf.CanvasUtils.getSelection(); - - // ensure 0 or 1 components selected - if (selection.size() <= 1) { - // if something is selected, ensure it's not a connection - if (!selection.empty() && nf.CanvasUtils.isConnection(selection)) { - return false; + // ensure access to read tenants + return common.canAccessTenants(); } - // ensure access to read tenants - return nf.Common.canAccessTenants(); + return false; } - - return false; } - } - var graphControlsCtrl = new GraphControlsCtrl(navigateCtrl, operateCtrl); - graphControlsCtrl.register(); - 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/bf3b1640/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 903cea9..2ad8895 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 @@ -15,113 +15,141 @@ * limitations under the License. */ -/* global nf, d3 */ - -nf.ng.Canvas.HeaderCtrl = function (serviceProvider, toolboxCtrl, globalMenuCtrl, flowStatusCtrl) { +/* global define, module, require, exports */ + +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Common', + 'nf.Storage', + 'nf.Shell', + 'nf.ErrorHandler'], + function ($, common, storage, shell, errorHandler) { + return (nf.ng.Canvas.HeaderCtrl = factory($, common, storage, shell, errorHandler)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.Canvas.HeaderCtrl = + factory(require('jquery'), + require('nf.Common'), + require('nf.Storage'), + require('nf.Shell'), + require('nf.ErrorHandler'))); + } else { + nf.ng.Canvas.HeaderCtrl = factory(root.$, + root.nf.Common, + root.nf.Storage, + root.nf.Shell, + root.nf.ErrorHandler); + } +}(this, function ($, common, storage, shell, errorHandler) { 'use strict'; - var MIN_TOOLBAR_WIDTH = 640; + return function (serviceProvider, toolboxCtrl, globalMenuCtrl, flowStatusCtrl) { + 'use strict'; - var config = { - urls: { - accessConfig: '../nifi-api/access/config' - } - }; + var MIN_TOOLBAR_WIDTH = 640; - function HeaderCtrl(toolboxCtrl, globalMenuCtrl, flowStatusCtrl) { - this.toolboxCtrl = toolboxCtrl; - this.globalMenuCtrl = globalMenuCtrl; - this.flowStatusCtrl = flowStatusCtrl; + var config = { + urls: { + accessConfig: '../nifi-api/access/config' + } + }; - /** - * The login controller. - */ - this.loginCtrl = { + function HeaderCtrl(toolboxCtrl, globalMenuCtrl, flowStatusCtrl) { + this.toolboxCtrl = toolboxCtrl; + this.globalMenuCtrl = globalMenuCtrl; + this.flowStatusCtrl = flowStatusCtrl; /** - * Initialize the login controller. + * The login controller. */ - init: function () { - var loginCtrl = this; + this.loginCtrl = { - // 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'); - } - - // if accessing via http, don't show the current user - if (location.protocol === 'http:') { - $('#current-user-container').css('display', 'none'); - } + /** + * Initialize the login controller. + */ + init: function () { + var loginCtrl = this; + + // if the user is not anonymous or accessing via http + if ($('#current-user').text() !== common.ANONYMOUS_USER_TEXT || location.protocol === 'http:') { + $('#login-link-container').css('display', 'none'); + } + + // if accessing via http, don't show the current user + if (location.protocol === 'http:') { + $('#current-user-container').css('display', 'none'); + } + + // get the login config + var loginXhr = $.ajax({ + type: 'GET', + url: config.urls.accessConfig, + dataType: 'json' + }); + + $.when(loginXhr).done(function (loginResult) { + loginCtrl.supportsLogin = loginResult.config.supportsLogin; + }).fail(errorHandler.handleAjaxError); + }, - // get the login config - var loginXhr = $.ajax({ - type: 'GET', - url: config.urls.accessConfig, - dataType: 'json' - }); + /** + * Boolean describing whether or not the NiFi instance supports login. + */ + supportsLogin: undefined, - $.when(loginXhr).done(function (loginResult) { - loginCtrl.supportsLogin = loginResult.config.supportsLogin; - }).fail(nf.ErrorHandler.handleAjaxError); - }, + /** + * The login shell controller. + */ + shell: { + + /** + * Launch the login shell. + */ + launch: function () { + shell.showPage('login', false); + } + } + }; /** - * Boolean describing whether or not the NiFi instance supports login. + * The logout controller. */ - supportsLogin: undefined, + this.logoutCtrl = { + logout: function () { + storage.removeItem("jwt"); + window.location = '/nifi'; + } + }; + } + + HeaderCtrl.prototype = { + constructor: HeaderCtrl, /** - * The login shell controller. + * Register the header controller. */ - shell: { - - /** - * Launch the login shell. - */ - launch: function () { - nf.Shell.showPage('login', false); + register: function () { + if (serviceProvider.headerCtrl === undefined) { + serviceProvider.register('headerCtrl', headerCtrl); } - } - }; - - /** - * The logout controller. - */ - this.logoutCtrl = { - logout: function () { - nf.Storage.removeItem("jwt"); - window.location = '/nifi'; - } - }; - } - - HeaderCtrl.prototype = { - constructor: HeaderCtrl, + }, - /** - * Register the header controller. - */ - register: function () { - if (serviceProvider.headerCtrl === undefined) { - serviceProvider.register('headerCtrl', headerCtrl); + /** + * Initialize the canvas header. + * + * @argument {boolean} supportsLogin Whether login is supported. + */ + init: function () { + this.toolboxCtrl.init(); + this.globalMenuCtrl.init(); + this.flowStatusCtrl.init(); + this.loginCtrl.init(); } - }, - - /** - * Initialize the canvas header. - * - * @argument {boolean} supportsLogin Whether login is supported. - */ - init: function () { - this.toolboxCtrl.init(); - this.globalMenuCtrl.init(); - this.flowStatusCtrl.init(); - this.loginCtrl.init(); } - } - var headerCtrl = new HeaderCtrl(toolboxCtrl, globalMenuCtrl, flowStatusCtrl); - headerCtrl.register(); - return headerCtrl; -}; \ No newline at end of file + var headerCtrl = new HeaderCtrl(toolboxCtrl, globalMenuCtrl, flowStatusCtrl); + headerCtrl.register(); + return headerCtrl; + }; +})); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/nifi/blob/bf3b1640/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 45c541c..ca0b226 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 @@ -15,77 +15,97 @@ * limitations under the License. */ -/* global nf, d3 */ - -nf.ng.Canvas.NavigateCtrl = function () { - 'use strict'; - - 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 - }); - }; - - /** - * 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 +/* global define, module, require, exports */ + +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['nf.CanvasUtils', + 'nf.ContextMenu'], + function (canvasUtils, contextMenu) { + return (nf.ng.Canvas.NavigateCtrl = factory(canvasUtils, contextMenu)); }); - }; - - /** - * 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 + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.Canvas.NavigateCtrl = + factory(require('nf.CanvasUtils'), + require('nf.ContextMenu'))); + } else { + nf.ng.Canvas.NavigateCtrl = factory(root.nf.CanvasUtils, + root.nf.ContextMenu); } +}(this, function (canvasUtils, contextMenu) { + 'use strict'; - var navigateCtrl = new NavigateCtrl(); - return navigateCtrl; -}; \ No newline at end of file + return function () { + 'use strict'; + + function NavigateCtrl() { + + /** + * Zoom in on the canvas. + */ + this.zoomIn = function () { + canvasUtils.zoomCanvasViewIn(); + + // hide the context menu + contextMenu.hide(); + + // refresh the canvas + canvasUtils.refreshCanvasView({ + transition: true + }); + }; + + /** + * Zoom out on the canvas. + */ + this.zoomOut = function () { + canvasUtils.zoomCanvasViewOut(); + + // hide the context menu + contextMenu.hide(); + + // refresh the canvas + canvasUtils.refreshCanvasView({ + transition: true + }); + }; + + /** + * Zoom fit on the canvas. + */ + this.zoomFit = function () { + canvasUtils.fitCanvasView(); + + // hide the context menu + contextMenu.hide(); + + // refresh the canvas + canvasUtils.refreshCanvasView({ + transition: true + }); + }; + + /** + * Zoom actual size on the canvas. + */ + this.zoomActualSize = function () { + canvasUtils.actualSizeCanvasView(); + + // hide the context menu + contextMenu.hide(); + + // refresh the canvas + canvasUtils.refreshCanvasView({ + transition: true + }); + }; + } + + NavigateCtrl.prototype = { + constructor: NavigateCtrl + } + + var navigateCtrl = new NavigateCtrl(); + return navigateCtrl; + }; +})); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/nifi/blob/bf3b1640/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 d6d8688..dc1ad39 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 @@ -15,455 +15,492 @@ * limitations under the License. */ -/* global nf, d3 */ - -nf.ng.Canvas.OperateCtrl = function () { +/* global define, module, require, exports */ + +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'd3', + 'nf.Dialog', + 'nf.Birdseye', + 'nf.CanvasUtils', + 'nf.Common', + 'nf.Client', + 'nf.Processor'], + function ($, d3, dialog, birdseye, canvasUtils, common, client, processor) { + return (nf.ng.Canvas.OperateCtrl = factory($, d3, dialog, birdseye, canvasUtils, common, client, processor)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.Canvas.OperateCtrl = + factory(require('jquery'), + require('d3'), + require('nf.Dialog'), + require('nf.Birdseye'), + require('nf.CanvasUtils'), + require('nf.Common'), + require('nf.Client'), + require('nf.Processor'))); + } else { + nf.ng.Canvas.OperateCtrl = factory(root.$, + root.d3, + root.nf.Dialog, + root.nf.Birdseye, + root.nf.CanvasUtils, + root.nf.Common, + root.nf.Client, + root.nf.Processor); + } +}(this, function ($, d3, dialog, birdseye, canvasUtils, common, client, processor) { 'use strict'; - // updates the color if its a valid hex color string - var updateColor = function () { - var hex = $('#fill-color-value').val(); + return function () { + 'use strict'; - // 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); - } - }; + // updates the color if its a valid hex color string + var updateColor = function () { + var hex = $('#fill-color-value').val(); - function OperateCtrl() { + // 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); + } + }; - /** - * The canvas operator's create template component. - */ - this.template = { + function OperateCtrl() { /** - * The canvas operator's create template component's modal. + * The canvas operator's create template component. */ - modal: { + this.template = { /** - * Gets the modal element. - * - * @returns {*|jQuery|HTMLElement} + * The canvas operator's create template component's modal. */ - getElement: function () { - return $('#new-template-dialog'); - }, + modal: { - /** - * Initialize the modal. - */ - init: function () { - // configure the create template dialog - this.getElement().modal({ - scrollableContentStyle: 'scrollable', - headerText: 'Create Template' - }); - }, + /** + * Gets the modal element. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#new-template-dialog'); + }, - /** - * 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); - }, + /** + * Initialize the modal. + */ + init: function () { + // configure the create template dialog + this.getElement().modal({ + scrollableContentStyle: 'scrollable', + headerText: 'Create Template' + }); + }, - /** - * Show the modal. - */ - show: function () { - this.getElement().modal('show'); - }, + /** + * 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); + }, - /** - * Hide the modal. - */ - hide: function () { - this.getElement().modal('hide'); - } - } - }; + /** + * Show the modal. + */ + show: function () { + this.getElement().modal('show'); + }, - /** - * The canvas operator's create template component. - */ - this.templateUpload = { + /** + * Hide the modal. + */ + hide: function () { + this.getElement().modal('hide'); + } + } + }; /** - * The canvas operator's create template component's modal. + * The canvas operator's create template component. */ - modal: { + this.templateUpload = { /** - * Gets the modal element. - * - * @returns {*|jQuery|HTMLElement} + * The canvas operator's create template component's modal. */ - getElement: function () { - return $('#upload-template-dialog'); - }, + modal: { - /** - * Initialize the modal. - */ - init: function () { - // initialize the form - var templateForm = $('#template-upload-form').ajaxForm({ - url: '../nifi-api/process-groups/', - dataType: 'xml', - beforeSubmit: function (formData, $form, options) { - // ensure uploading to the current process group - options.url += (encodeURIComponent(nf.Canvas.getGroupId()) + '/templates/upload'); - }, - success: function (response, statusText, xhr, form) { - // see if the import was successful and inform the user - if (response.documentElement.tagName === 'templateEntity') { - nf.Dialog.showOkDialog({ - headerText: 'Success', - dialogContent: 'Template successfully imported.' - }); - } else { - // import failed - var statusText = 'Unable to import template. Please check the log for errors.'; - if (response.documentElement.tagName === 'errorResponse') { - // if a more specific error was given, use it - var errorMessage = response.documentElement.getAttribute('statusText'); - if (!nf.Common.isBlank(errorMessage)) { - statusText = errorMessage; + /** + * Gets the modal element. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#upload-template-dialog'); + }, + + /** + * Initialize the modal. + */ + init: function () { + // initialize the form + var templateForm = $('#template-upload-form').ajaxForm({ + url: '../nifi-api/process-groups/', + dataType: 'xml', + beforeSubmit: function (formData, $form, options) { + // ensure uploading to the current process group + options.url += (encodeURIComponent(canvasUtils.getGroupId()) + '/templates/upload'); + }, + success: function (response, statusText, xhr, form) { + // see if the import was successful and inform the user + if (response.documentElement.tagName === 'templateEntity') { + dialog.showOkDialog({ + headerText: 'Success', + dialogContent: 'Template successfully imported.' + }); + } else { + // import failed + var statusText = 'Unable to import template. Please check the log for errors.'; + if (response.documentElement.tagName === 'errorResponse') { + // if a more specific error was given, use it + var errorMessage = response.documentElement.getAttribute('statusText'); + if (!common.isBlank(errorMessage)) { + statusText = errorMessage; + } } - } - // show reason - nf.Dialog.showOkDialog({ + // show reason + dialog.showOkDialog({ + headerText: 'Unable to Upload', + dialogContent: common.escapeHtml(statusText) + }); + } + }, + error: function (xhr, statusText, error) { + // request failed + dialog.showOkDialog({ headerText: 'Unable to Upload', - dialogContent: nf.Common.escapeHtml(statusText) + dialogContent: common.escapeHtml(xhr.responseText) }); } - }, - error: function (xhr, statusText, error) { - // request failed - nf.Dialog.showOkDialog({ - headerText: 'Unable to Upload', - dialogContent: nf.Common.escapeHtml(xhr.responseText) - }); - } - }); - - // configure the upload template dialog - this.getElement().modal({ - headerText: 'Upload Template', - buttons: [{ - buttonText: 'Upload', - color: { - base: '#728E9B', - hover: '#004849', - text: '#ffffff' - }, - handler: { - click: function () { - var selectedTemplate = $('#selected-template-name').text(); + }); - // submit the template if necessary - if (nf.Common.isBlank(selectedTemplate)) { - $('#upload-template-status').text('No template selected. Please browse to select a template.'); - } else { - templateForm.submit(); + // configure the upload template dialog + this.getElement().modal({ + headerText: 'Upload Template', + buttons: [{ + buttonText: 'Upload', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + var selectedTemplate = $('#selected-template-name').text(); + // submit the template if necessary + if (common.isBlank(selectedTemplate)) { + $('#upload-template-status').text('No template selected. Please browse to select a template.'); + } else { + templateForm.submit(); + + // hide the dialog + $('#upload-template-dialog').modal('hide'); + } + } + } + }, { + buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, + handler: { + click: function () { // hide the dialog $('#upload-template-dialog').modal('hide'); } } - } - }, { - buttonText: 'Cancel', - color: { - base: '#E3E8EB', - hover: '#C7D2D7', - text: '#004849' - }, + }], handler: { - click: function () { - // hide the dialog - $('#upload-template-dialog').modal('hide'); + close: function () { + // set the filename + $('#selected-template-name').text(''); + $('#upload-template-status').text(''); + + // reset the form to ensure that the change fire will fire + templateForm.resetForm(); } } - }], - handler: { - close: function () { - // set the filename - $('#selected-template-name').text(''); - $('#upload-template-status').text(''); - - // reset the form to ensure that the change fire will fire - templateForm.resetForm(); - } - } - }); + }); - // add a handler for the change file input chain event - $('#template-file-field').on('change', function (e) { - var filename = $(this).val(); - if (!nf.Common.isBlank(filename)) { - filename = filename.replace(/^.*[\\\/]/, ''); - } + // add a handler for the change file input chain event + $('#template-file-field').on('change', function (e) { + var filename = $(this).val(); + if (!common.isBlank(filename)) { + filename = filename.replace(/^.*[\\\/]/, ''); + } - // set the filename and clear any status - $('#selected-template-name').text(filename); - $('#upload-template-status').text(''); - }); - }, + // set the filename and clear any status + $('#selected-template-name').text(filename); + $('#upload-template-status').text(''); + }); + }, - /** - * 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's modal. + * The canvas operator's fillcolor component. */ - modal: { + this.fillcolor = { /** - * Gets the modal element. - * - * @returns {*|jQuery|HTMLElement} + * The canvas operator's fillcolor component's modal. */ - getElement: function () { - return $('#fill-color-dialog'); - }, + modal: { - /** - * Initialize the modal. - */ - init: function () { - // configure the create fillcolor dialog - this.getElement().modal({ - scrollableContentStyle: 'scrollable', - headerText: 'Change Color', - buttons: [{ - buttonText: 'Apply', - color: { - base: '#728E9B', - hover: '#004849', - text: '#ffffff' - }, - 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(selectedData), - 'component': { - 'id': selectedData.id, - 'style': { - 'background-color': color - } - } - }; - - // update the style for the specified component - $.ajax({ - type: 'PUT', - url: selectedData.uri, - data: JSON.stringify(entity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - // 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({ - headerText: 'Error', - dialogContent: nf.Common.escapeHtml(xhr.responseText) - }); - } - }).always(function(){ - nf.Birdseye.refresh(); - }); - } - }); + /** + * Gets the modal element. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#fill-color-dialog'); + }, - // close the dialog - $('#fill-color-dialog').modal('hide'); - } - } - }, - { - buttonText: 'Cancel', + /** + * Initialize the modal. + */ + init: function () { + // configure the create fillcolor dialog + this.getElement().modal({ + scrollableContentStyle: 'scrollable', + headerText: 'Change Color', + buttons: [{ + buttonText: 'Apply', color: { - base: '#E3E8EB', - hover: '#C7D2D7', - text: '#004849' + base: '#728E9B', + hover: '#004849', + text: '#ffffff' }, handler: { click: function () { + var selection = 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': client.getRevision(selectedData), + 'component': { + 'id': selectedData.id, + 'style': { + 'background-color': color + } + } + }; + + // update the style for the specified component + $.ajax({ + type: 'PUT', + url: selectedData.uri, + data: JSON.stringify(entity), + dataType: 'json', + contentType: 'application/json' + }).done(function (response) { + // update the component + canvasUtils.getComponentByType(selectedData.type).set(response); + }).fail(function (xhr, status, error) { + if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) { + dialog.showOkDialog({ + headerText: 'Error', + dialogContent: common.escapeHtml(xhr.responseText) + }); + } + }).always(function () { + birdseye.refresh(); + }); + } + }); + // close the dialog $('#fill-color-dialog').modal('hide'); } } - }], - handler: { - close: function () { - // clear the current color - $('#fill-color-value').val(''); - $('#fill-color').minicolors('value', ''); + }, + { + buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, + handler: { + 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); - }, - - /** - * 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); + }, - /** - * The canvas operator's fillcolor component modal's minicolors. - */ - minicolors: { + /** + * Show the modal. + */ + show: function () { + this.getElement().modal('show'); + }, /** - * Gets the minicolors element. - * - * @returns {*|jQuery|HTMLElement} + * Hide the modal. */ - getElement: function () { - return $('#fill-color'); + hide: function () { + this.getElement().modal('hide'); }, /** - * Initialize the minicolors. + * The canvas operator's fillcolor component modal's 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 - if (hex.toLowerCase() === '#ffffff') { - //special case #ffffff implies default fill - $('#fill-color-processor-preview-icon').css({ - 'color': nf.Processor.defaultIconColor(), - 'background-color': hex + 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 + if (hex.toLowerCase() === '#ffffff') { + //special case #ffffff implies default fill + $('#fill-color-processor-preview-icon').css({ + 'color': processor.defaultIconColor(), + 'background-color': hex + }); + } else { + $('#fill-color-processor-preview-icon').css({ + 'color': common.determineContrastColor( + common.substringAfterLast( + hex, '#')), + 'background-color': hex + }); + } + + var borderColor = hex; + if (borderColor.toLowerCase() === '#ffffff') { + borderColor = 'rgba(0,0,0,0.25)'; + } + $('#fill-color-processor-preview').css({ + 'border-color': borderColor }); - } else { - $('#fill-color-processor-preview-icon').css({ - 'color': nf.Common.determineContrastColor( - nf.Common.substringAfterLast( - hex, '#')), - 'background-color': hex + + $('#fill-color-label-preview').css({ + 'background': hex }); + $('#fill-color-label-preview-value').css('color', + common.determineContrastColor(common.substringAfterLast(hex, '#')) + ); } + }); - var borderColor = hex; - if (borderColor.toLowerCase() === '#ffffff') { - borderColor = 'rgba(0,0,0,0.25)'; + // 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(); } - $('#fill-color-processor-preview').css({ - 'border-color': borderColor - }); - - $('#fill-color-label-preview').css({ - 'background': hex - }); - $('#fill-color-label-preview-value').css('color', - nf.Common.determineContrastColor(nf.Common.substringAfterLast(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(); - } - }); + }); + } } } - } - }; - } + }; + } - OperateCtrl.prototype = { - constructor: OperateCtrl, - - /** - * Initializes the canvas operate controller. - */ - init: function () { - this.template.modal.init(); - this.templateUpload.modal.init(); - this.fillcolor.modal.init(); - this.fillcolor.modal.minicolors.init(); + OperateCtrl.prototype = { + constructor: OperateCtrl, + + /** + * Initializes the canvas operate controller. + */ + init: function () { + this.template.modal.init(); + this.templateUpload.modal.init(); + this.fillcolor.modal.init(); + this.fillcolor.modal.minicolors.init(); + } } - } - var operateCtrl = new OperateCtrl(); - return operateCtrl; -}; \ No newline at end of file + var operateCtrl = new OperateCtrl(); + return operateCtrl; + }; +})); \ No newline at end of file
