From 89a4f8f77c0cee3d2f5ff9d34a0eddcebcc5953c Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Thu, 14 Jul 2016 15:38:51 -0400 Subject: [PATCH 1/2] add options for code mirror to be read only --- .../angular-codemirror/lib/AngularCodeMirror.js | 17 ++++++++++++----- awx/ui/client/src/helpers/Parse.js | 6 +++--- .../src/job-detail/job-detail.controller.js | 2 +- 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.js b/awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.js index e4b9e5e02e..71ef0a674b 100644 --- a/awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.js +++ b/awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.js @@ -30,7 +30,7 @@ angular.module('AngularCodeMirrorModule', []) .factory('AngularCodeMirror', [ function() { - return function() { + return function(readOnly) { var fn = function() { this.myCodeMirror = null; @@ -47,9 +47,9 @@ angular.module('AngularCodeMirrorModule', []) height = 0; self.element = $(element); - + // We don't want to touch the original textarea. Angular likely has a model and other listeners - // attached to it. In prior iterations attaching CodeMirror to it seemed to go bad, so we'll insert a + // attached to it. In prior iterations attaching CodeMirror to it seemed to go bad, so we'll insert a //
under it, hide the textarea and let CodeMirror attach to the
. if ($('#cm-' + model + '-container').length > 0) { $('#cm-' + model + '-container').empty(); @@ -57,18 +57,25 @@ angular.module('AngularCodeMirrorModule', []) else { self.element.after("
"); } - + // Calc the height of the text area- our CodeMirror should match. height += self.element.attr('rows') * parseInt($(self.element).css('line-height').replace(/px/,''),10); height += parseInt(self.element.css('padding-top').replace(/px|%/,''),10) + parseInt(self.element.css('padding-bottom').replace(/px|%/,''),10); height += 2; //for the border - // hide self.element.hide(); // Initialize CodeMirror self.modes[mode].value = scope[model]; + + // if readOnly is passed to AngularCodeMirror, set the + // options for all modes to be readOnly + if (readOnly) { + Object.keys(self.modes).forEach(function(val) { + self.modes[val].readOnly = true; + }); + } self.myCodeMirror = CodeMirror(document.getElementById('cm-' + model + '-container'), self.modes[mode]); // Adjust the height diff --git a/awx/ui/client/src/helpers/Parse.js b/awx/ui/client/src/helpers/Parse.js index c484963162..a81f8c8194 100644 --- a/awx/ui/client/src/helpers/Parse.js +++ b/awx/ui/client/src/helpers/Parse.js @@ -25,7 +25,8 @@ export default fld = (params.variable) ? params.variable : 'variables', pfld = (params.parse_variable) ? params.parse_variable : 'parseType', onReady = params.onReady, - onChange = params.onChange; + onChange = params.onChange, + readOnly = params.readOnly; function removeField(fld) { //set our model to the last change in CodeMirror and then destroy CodeMirror @@ -35,8 +36,7 @@ export default function createField(onChange, onReady, fld) { //hide the textarea and show a fresh CodeMirror with the current mode (json or yaml) - - scope[fld + 'codeMirror'] = AngularCodeMirror(); + scope[fld + 'codeMirror'] = AngularCodeMirror(readOnly); scope[fld + 'codeMirror'].addModes($AnsibleConfig.variable_edit_modes); scope[fld + 'codeMirror'].showTextArea({ scope: scope, diff --git a/awx/ui/client/src/job-detail/job-detail.controller.js b/awx/ui/client/src/job-detail/job-detail.controller.js index 02cb21a5f1..9181b21b20 100644 --- a/awx/ui/client/src/job-detail/job-detail.controller.js +++ b/awx/ui/client/src/job-detail/job-detail.controller.js @@ -641,7 +641,7 @@ export default return true; }); //scope.setSearchAll('host'); - ParseTypeChange({ scope: scope, field_id: 'pre-formatted-variables' }); + ParseTypeChange({ scope: scope, field_id: 'pre-formatted-variables', readOnly: true }); scope.$emit('LoadPlays', data.related.job_events); }) .error(function(data, status) { From eabc83c9147ce417e490549f18186ed94863cf73 Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Mon, 18 Jul 2016 09:53:10 -0400 Subject: [PATCH 2/2] use updated codemirror release --- .../client/lib/angular-codemirror/.bower.json | 15 +++++++------- .../client/lib/angular-codemirror/bower.json | 2 +- .../lib/AngularCodeMirror.css | 11 +++++----- .../lib/AngularCodeMirror.js | 20 +++++++------------ awx/ui/client/lib/ngToast/.bower.json | 5 ++--- 5 files changed, 23 insertions(+), 30 deletions(-) diff --git a/awx/ui/client/lib/angular-codemirror/.bower.json b/awx/ui/client/lib/angular-codemirror/.bower.json index 194a61b513..c88cb405db 100644 --- a/awx/ui/client/lib/angular-codemirror/.bower.json +++ b/awx/ui/client/lib/angular-codemirror/.bower.json @@ -1,6 +1,6 @@ { "name": "angular-codemirror", - "version": "1.0.2", + "version": "1.0.3", "dependencies": { "angular": "latest", "angular-route": "latest", @@ -13,14 +13,13 @@ "codemirror": "latest" }, "homepage": "https://github.com/chouseknecht/angular-codemirror", - "_release": "1.0.2", + "_release": "1.0.3", "_resolution": { "type": "version", - "tag": "v1.0.2", - "commit": "94b7aac548b036f4fbd94e56129ed9574e472616" + "tag": "1.0.3", + "commit": "b94dc86fde8f60a50b324054806d29d742177d21" }, - "_source": "git://github.com/chouseknecht/angular-codemirror.git", - "_target": "~1.0.2", - "_originalSource": "angular-codemirror", - "_direct": true + "_source": "https://github.com/chouseknecht/angular-codemirror.git", + "_target": "~1.0.3", + "_originalSource": "angular-codemirror" } \ No newline at end of file diff --git a/awx/ui/client/lib/angular-codemirror/bower.json b/awx/ui/client/lib/angular-codemirror/bower.json index 943b83b3e7..df7644686c 100644 --- a/awx/ui/client/lib/angular-codemirror/bower.json +++ b/awx/ui/client/lib/angular-codemirror/bower.json @@ -1,6 +1,6 @@ { "name": "angular-codemirror", - "version": "0.0.3", + "version": "1.0.2", "dependencies": { "angular": "latest", "angular-route": "latest", diff --git a/awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.css b/awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.css index a81ff6dff4..f233cc2941 100644 --- a/awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.css +++ b/awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.css @@ -1,6 +1,6 @@ /********************************************** * AngularCodeMirror.css - * + * * CodeMirror.css overrides * * Copyright (c) 2014 Chris Houseknecht @@ -30,14 +30,14 @@ .CodeMirror { height: auto; } - + .CodeMirror-activeline-background { background-color: #f7f7f7; } + - -/* Modal dialog overrides to make jqueryui dialog blend in with Twitter. +/* Modal dialog overrides to make jqueryui dialog blend in with Twitter. Why? Twitter's modal is not draggable or resizable, which is not very useful for a code editor */ @@ -71,7 +71,7 @@ border-color: #ffffff; color: #A9A9A9; } - + .ui-dialog .ui-resizable-se { right: 5px; bottom: 5px; @@ -108,3 +108,4 @@ .CodeMirror-lint-tooltip { z-index: 2060; } + diff --git a/awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.js b/awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.js index 71ef0a674b..2ef0ad4fe7 100644 --- a/awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.js +++ b/awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.js @@ -43,13 +43,12 @@ angular.module('AngularCodeMirrorModule', []) model = params.model, mode = params.mode, onReady = params.onReady, - onChange = params.onChange, height = 0; self.element = $(element); - + // We don't want to touch the original textarea. Angular likely has a model and other listeners - // attached to it. In prior iterations attaching CodeMirror to it seemed to go bad, so we'll insert a + // attached to it. In prior iterations attaching CodeMirror to it seemed to go bad, so we'll insert a //
under it, hide the textarea and let CodeMirror attach to the
. if ($('#cm-' + model + '-container').length > 0) { $('#cm-' + model + '-container').empty(); @@ -57,18 +56,19 @@ angular.module('AngularCodeMirrorModule', []) else { self.element.after("
"); } - + // Calc the height of the text area- our CodeMirror should match. height += self.element.attr('rows') * parseInt($(self.element).css('line-height').replace(/px/,''),10); height += parseInt(self.element.css('padding-top').replace(/px|%/,''),10) + parseInt(self.element.css('padding-bottom').replace(/px|%/,''),10); height += 2; //for the border + // hide self.element.hide(); // Initialize CodeMirror self.modes[mode].value = scope[model]; - + // if readOnly is passed to AngularCodeMirror, set the // options for all modes to be readOnly if (readOnly) { @@ -76,6 +76,7 @@ angular.module('AngularCodeMirrorModule', []) self.modes[val].readOnly = true; }); } + self.myCodeMirror = CodeMirror(document.getElementById('cm-' + model + '-container'), self.modes[mode]); // Adjust the height @@ -92,14 +93,7 @@ angular.module('AngularCodeMirrorModule', []) // Update the model on change self.myCodeMirror.on('change', function() { - setTimeout(function() { - scope.$apply(function(){ - scope[model] = self.myCodeMirror.getValue(); - if (onChange) { - onChange(); - } - }); - }, 500); + setTimeout(function() { scope.$apply(function(){ scope[model] = self.myCodeMirror.getValue(); }); }, 500); }); }; diff --git a/awx/ui/client/lib/ngToast/.bower.json b/awx/ui/client/lib/ngToast/.bower.json index 446800a71d..27c51cca55 100644 --- a/awx/ui/client/lib/ngToast/.bower.json +++ b/awx/ui/client/lib/ngToast/.bower.json @@ -52,8 +52,7 @@ "tag": "2.0.0", "commit": "8a1951c54a956c33964c99b338f3a4830e652689" }, - "_source": "git://github.com/tameraydin/ngToast.git", + "_source": "https://github.com/tameraydin/ngToast.git", "_target": "~2.0.0", - "_originalSource": "ngtoast", - "_direct": true + "_originalSource": "ngtoast" } \ No newline at end of file