External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-12 02:19:58 -03:30
Code Issues Packages Projects Releases Wiki Activity

add syntax-highlight directive

Browse Source
This commit is contained in:
Keith Grant 2019-06-06 10:10:58 -07:00 committed by Jim Ladd
parent adf25c61a2
commit 8a04cf0cb4
8 changed files with 142 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
awx/ui/client/lib/components/index.js
View File

@ -42,6 +42,7 @@ import toolbar from '~components/list/list-toolbar.directive';
import topNavItem from '~components/layout/top-nav-item.directive';
import truncate from '~components/truncate/truncate.directive';
import atCodeMirror from '~components/code-mirror';
import atSyntaxHighlight from '~components/syntax-highlight';
import card from '~components/cards/card.directive';
import cardGroup from '~components/cards/group.directive';
import atSwitch from '~components/switch/switch.directive';
@ -54,7 +55,8 @@ const MODULE_NAME = 'at.lib.components';
angular
.module(MODULE_NAME, [
atLibServices,
atCodeMirror
atCodeMirror,
atSyntaxHighlight,
])
.directive('atActionGroup', actionGroup)
.directive('atActionButton', actionButton)

10
awx/ui/client/lib/components/syntax-highlight/index.js Normal file
View File

@ -0,0 +1,10 @@
// import 'codemirror/mode/jinja2/jinja2';
import syntaxHighlight from './syntax-highlight.directive';
// import strings from './syntax-highlight.strings';
const MODULE_NAME = 'at.syntax.highlight';
angular.module(MODULE_NAME, [])
.directive('atSyntaxHighlight', syntaxHighlight);
export default MODULE_NAME;

83
awx/ui/client/lib/components/syntax-highlight/syntax-highlight.directive.js Normal file
View File

@ -0,0 +1,83 @@
const templateUrl = require('~components/syntax-highlight/syntax-highlight.partial.html');
function atSyntaxHighlightController ($scope, AngularCodeMirror) {
const vm = this;
const variablesName = `${$scope.name}_codemirror`;
function init () {
if ($scope.disabled === 'true') {
$scope.disabled = true;
} else if ($scope.disabled === 'false') {
$scope.disabled = false;
}
// TODO: get default value
$scope.codeMirrorValue = $scope.codeMirrorValue || '';
$scope.parseType = 'jinja2';
$scope.variablesName = variablesName;
$scope[variablesName] = $scope.codeMirrorValue;
const codeMirror = AngularCodeMirror($scope.disabled);
codeMirror.addModes({
jinja2: {
mode: 'text/x-jinja2',
matchBrackets: true,
autoCloseBrackets: true,
styleActiveLine: true,
lineNumbers: true,
gutters: ['CodeMirror-lint-markers'],
lint: true,
scrollbarStyle: null,
}
});
// codeMirror.fromTextArea(document.getElementById(`${$scope.name}_codemirror`));
codeMirror.showTextArea({
scope: $scope,
model: variablesName,
element: `${$scope.name}_codemirror`,
lineNumbers: true,
mode: 'jinja2',
});
$scope.$watch(variablesName, () => {
$scope.codeMirrorValue = $scope[variablesName];
});
}
vm.name = $scope.name;
vm.variablesName = variablesName;
vm.parseType = $scope.parseType;
if ($scope.init) {
$scope.init = init;
}
angular.element(document).ready(() => {
init();
});
}
atSyntaxHighlightController.$inject = [
'$scope',
'AngularCodeMirror'
];
function atCodeMirrorTextarea () {
return {
restrict: 'E',
replace: true,
transclude: true,
templateUrl,
controller: atSyntaxHighlightController,
controllerAs: 'vm',
scope: {
disabled: '@',
label: '@',
labelClass: '@',
tooltip: '@',
tooltipPlacement: '@',
variables: '=',
name: '@',
init: '='
}
};
}
export default atCodeMirrorTextarea;

30
awx/ui/client/lib/components/syntax-highlight/syntax-highlight.partial.html Normal file
View File

@ -0,0 +1,30 @@
<div>
<div class="atCodeMirror-label">
<div class="atCodeMirror-labelLeftSide">
<span class="atCodeMirror-labelText" ng-class="labelClass">
{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}
</span>
<a id=""
href=""
aw-pop-over="{{ tooltip || vm.strings.get('code_mirror.tooltip.TOOLTIP') }}"
data-placement="{{ tooltipPlacement || 'top' }}"
data-container="body"
over-title="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
class="help-link"
data-original-title="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
title="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
tabindex="-1"
ng-if="tooltip">
<i class="fa fa-question-circle"></i>
</a>
</div>
</div>
<textarea
ng-disabled="disabled"
rows="6"
ng-model="codeMirrorValue"
name="{{ vm.name }}_codemirror"
class="form-control Form-textArea"
id="{{ vm.name }}_codemirror">
</textarea>
</div>

4
awx/ui/client/src/notifications/notificationTemplates.form.js
View File

@ -591,9 +591,9 @@ export default ['i18n', function(i18n) {
start_message: {
label: i18n._('Start Message'),
class: 'Form-formGroup--fullWidth',
type: 'text',
type: 'syntax_highlight',
default: '',
ngShow: "customize_messages",
ngShow: "true || customize_messages",
},
start_body: {
label: i18n._('Start Body'),

12
awx/ui/client/src/shared/form-generator.js
View File

@ -1359,6 +1359,18 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
html += '></at-code-mirror>';
}
if (field.type === 'syntax_highlight') {
html += '<at-syntax-highlight ';
html += `id="${form.name}_${fld}" `;
html += `class="${field.class}" `;
html += `label="${field.label}" `;
html += `tooltip="${field.awPopOver}" `;
html += `name="${fld}" `;
html += `variables="${field.variables}" `;
html += `ng-disabled="${field.ngDisabled}" `;
html += '></at-syntax-highlight>';
}
if (field.type === 'custom') {
let labelOptions = {};

1
awx/ui/client/src/shared/parse/parse-type-change.factory.js
View File

@ -1,6 +1,7 @@
import 'codemirror/lib/codemirror.js';
import 'codemirror/mode/javascript/javascript.js';
import 'codemirror/mode/yaml/yaml.js';
import 'codemirror/mode/jinja2/jinja2.js';
import 'codemirror/addon/lint/lint.js';
import 'angular-codemirror/lib/yaml-lint.js';
import 'codemirror/addon/edit/closebrackets.js';

1
awx/ui/client/src/vendor.js
View File

@ -72,3 +72,4 @@ require('ng-toast');
require('lr-infinite-scroll');
require('codemirror/mode/yaml/yaml');
require('codemirror/mode/javascript/javascript');
require('codemirror/mode/jinja2/jinja2');