got textAngular to semi-work with template variables

This commit is contained in:
David Baldwynn 2017-11-14 23:26:47 -08:00
parent 49141e6dc0
commit 758eb5a786
17 changed files with 108 additions and 122 deletions

View File

@ -74,8 +74,6 @@ module.exports = {
url: /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/,
hexCode: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,
email: /^(([^<>()\[\]\\.,;:\s@']+(\.[^<>()\[\]\\.,;:\s@']+)*)|('.+'))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
templateVariable: /<var(.*)id(.*)>(.|\n)*?<\/var>/g
},
varFormat: ['<var([^<>]+)id=["\']{1}field:', '["\']{1}>([^<>]+)*?<\/var>'],
varFormat: ['<var([^<>]+)class=["\']{1}.*field-', '["\']{1}.*>([^<>]+)*?<\/var>'],
};

View File

@ -12,9 +12,7 @@ module.exports = {
html: parsedTemplate
};
console.log('HERE');
smtpTransport.sendMail(mailOptions, function(){
console.log('THERE');
cb();
});
},

View File

@ -44,6 +44,8 @@ block content
script(type='text/javascript', src='https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.8/angular-strap.min.js')
//script(src='http://textangular.com/dist/textAngular.min.js')
//Application JavaScript Files
each jsFile in jsFiles
script(type='text/javascript', src=jsFile)

View File

@ -44,7 +44,8 @@
"textAngular": "^1.5.16",
"angular-ui-select": "^0.19.8",
"angular-bootstrap-switch": "^0.5.2",
"jquery": "^3.2.1"
"jquery": "^3.2.1",
"ng-quill": "https://github.com/KillerCodeMonkey/ng-quill"
},
"resolutions": {
"angular-bootstrap": "^0.14.0",

View File

@ -35,7 +35,6 @@ angular.module(ApplicationConfiguration.applicationModuleName).run(['$rootScope'
event.preventDefault(); // stop current execution
$state.go('listForms'); // go to listForms page
}
});
}
@ -45,6 +44,7 @@ angular.module(ApplicationConfiguration.applicationModuleName).run(['$rootScope'
angular.module(ApplicationConfiguration.applicationModuleName).run(['$rootScope', 'Auth', 'User', 'Authorizer', '$state', '$stateParams',
function($rootScope, Auth, User, Authorizer, $state, $stateParams) {
$rootScope.$on('$stateChangeStart', function(event, next) {
console.log('$stateChangeStart');
var authenticator, permissions, user;
permissions = next && next.data && next.data.permissions ? next.data.permissions : null;

View File

@ -19,6 +19,25 @@ angular.module('core').controller('HeaderController', ['$rootScope', '$scope', '
$rootScope.hideNav = false;
$scope.menu = Menus.getMenu('topbar');
$rootScope.languages = ['en', 'fr', 'es', 'it', 'de'];
$rootScope.langCodeToWord = {
'en': 'English',
'fr': 'Français',
'es': 'Español',
'it': 'Italiàno',
'de': 'Deutsch'
};
$rootScope.wordToLangCode = {
'English': 'en',
'Français': 'fr',
'Español': 'es',
'Italiàno': 'it',
'Deutsch': 'de'
};
$scope.signout = function() {
var promise = User.logout();
promise.then(function() {

View File

@ -1,34 +1,3 @@
.tag {
background-color: #999;
border-radius: 3px 3px 3px 3px;
border: 0;
color: #FFFFFF;
font-style: inherit;
font-size: 11px;
padding: 4px 5px;
margin: 0 2px 2px 2px;
font-family: inherit;
white-space: nowrap;
vertical-align: middle;
cursor: pointer !important;
pointer-events: none;
}
.email-subject.ta-root .ta-editor.ta-html, .email-subject .ta-scroll-window.form-control {
min-height: 0;
overflow: hidden;
height: auto;
border-radius: 4px;
box-shadow: none;
font-size: 18px;
padding-top: 10px;
}
.email-subject.ta-root .ta-scroll-window > .ta-bind {
min-height: 0;
outline: 0;
}
.ui-select input.form-control {
height: 34px;
padding: 6px;

View File

@ -0,0 +1,36 @@
.ta-editor > div.ta-bind p {
display: inline-block;
min-width: 1px;
}
.tag {
background-color: #999;
border-radius: 3px 3px 3px 3px;
border: 0;
color: #FFFFFF;
font-style: inherit;
font-size: 11px;
padding: 4px 5px;
margin: 0 2px 2px 2px;
font-family: inherit;
white-space: nowrap;
vertical-align: middle;
cursor: pointer !important;
display: inline!important;
width: 100%;
}
.email-subject.ta-root .ta-editor.ta-html, .email-subject .ta-scroll-window.form-control {
min-height: 0;
overflow: hidden;
height: auto;
border-radius: 4px;
box-shadow: none;
font-size: 18px;
padding-top: 10px;
}
.email-subject.ta-root .ta-scroll-window > .ta-bind {
min-height: 0;
outline: 0;
}

View File

@ -14,30 +14,6 @@ angular.module('forms').directive('configureFormDirective', ['$rootScope', '$fil
$scope.resetForm = $rootScope.resetForm;
$scope.update = $rootScope.update;
console.log($scope.myform);
$scope.$evalAsync(function() {
angular.element('.tag')
});
$scope.languages = ['en', 'fr', 'es', 'it', 'de'];
$scope.langCodeToWord = {
'en': 'English',
'fr': 'Français',
'es': 'Español',
'it': 'Italiàno',
'de': 'Deutsch'
};
$scope.wordToLangCode = {
'English': 'en',
'Français': 'fr',
'Español': 'es',
'Italiàno': 'it',
'Deutsch': 'de'
};
$scope.configureTabs = [
{
heading: $filter('translate')('GENERAL_TAB'),

View File

@ -22,10 +22,10 @@
<div class="col-sm-8 field-input">
<ui-select ng-model="myform.language" search-enabled="false" theme="selectize">
<ui-select-match>
{{ langCodeToWord[$select.selected] }}
{{ $root.langCodeToWord[$select.selected] }}
</ui-select-match>
<ui-select-choices repeat="language in languages">
<span ng-bind-html="langCodeToWord[language] | highlight: $select.search">
<ui-select-choices repeat="language in $root.languages">
<span ng-bind-html="$root.langCodeToWord[language] | highlight: $select.search">
</span>
</ui-select-choices>
</select>

View File

@ -74,9 +74,10 @@
</div>
<div class="col-sm-12 field-input">
<text-angular class="email-subject" ng-model="myform.respondentNotifications.htmlTemplate"
<text-angular ng-model="myform.respondentNotifications.htmlTemplate"
ta-toolbar="[['bold','italics', 'insertField']]"
ta-unsafe-sanitizer="true">
ta-unsafe-sanitizer="true"
ta-default-wrap='p'>
</text-angular>
<div ng-bind="myform.respondentNotifications.htmlTemplate"></div>
</div>

View File

@ -56,8 +56,11 @@
</div>
<div class="col-sm-12 field-input">
<text-angular class="email-subject" ng-model="myform.selfNotifications.subject" ta-toolbar="[['insertField']]"
<!--
<text-angular class="email-subject" ng-model="myform.selfNotifications.subject"
ta-toolbar="[['insertField']]"
ta-unsafe-sanitizer="true" ta-default-wrap="n"></text-angular>
-->
</div>
</div>
@ -67,8 +70,13 @@
</div>
<div class="col-sm-12 field-input">
<text-angular ng-model="myform.selfNotifications.htmlTemplate" ta-toolbar="[['bold','italics', 'insertField']]" ta-unsafe-sanitizer="true"></text-angular>
<text-angular ng-model="myform.selfNotifications.htmlTemplate"
ta-toolbar="[['bold','italics', 'insertField', 'insertImage']]"
ta-unsafe-sanitizer="true">
</text-angular>
</div>
<div ng-bind="myform.selfNotifications.htmlTemplate"></div>
</div>
</div>
</div>

View File

@ -1,5 +1,4 @@
<div class="config-form container">
<div class="row">
<uib-tabset active="activePill" type="pills">
<uib-tab ng-repeat="tab in configureTabs" active="tab.active" select="go(tab)" heading="{{tab.heading}}">

View File

@ -56,21 +56,28 @@ angular.module('forms').run(['Menus',
return $delegate;
});
}]).config(['$provide', function ($provide){
$provide.decorator('taOptions', ['$delegate', 'taRegisterTool', '$translate', '$window', function(taOptions, taRegisterTool, $translate, $window) {
$provide.decorator('taOptions', ['$delegate', 'taRegisterTool', '$translate', '$window', 'taSelection', function(taOptions, taRegisterTool, $translate, $window, taSelection) {
taRegisterTool('insertField', {
display: '<div class="dropdown" uib-dropdown is-open="isopen">\
<div class="dropdown-toggle" ng-disabled="isDisabled()" uib-dropdown-toggle>\
display: '<div uib-dropdown is-open="isopen">\
<div class="btn btn-default" ng-disabled="isDisabled()" uib-dropdown-toggle>\
<span>{{ "ADD_VARIABLE_BUTTON" | translate }}</span>\
<b class="caret"></b>\
</div>\
<ul class="dropdown-menu">\
<ul class="dropdown-menu" uib-dropdown-menu>\
<li ng-repeat="field in $root.myform.form_fields" ng-click="onClickField(field.globalId, field.title)">\
{{field.title}}\
<a> {{field.title}} </a>\
</li>\
</ul>\
</div>',
class: 'btn-group',
onClickField: function(field_id, field_name){
this.$editor().wrapSelection('insertHTML', '<var class="tag" contenteditable="false" id="field:' + field_id + '">' + field_name + '</var>', false);
if (taSelection.getSelectionElement().tagName && (taSelection.getSelectionElement().tagName.toLowerCase() === 'var' || taSelection.getSelectionElement().tagName.toLowerCase() === 'a')) {
// due to differences in implementation between FireFox and Chrome, we must move the
// insertion point past the <a> element, otherwise FireFox inserts inside the <a>
// With this change, both FireFox and Chrome behave the same way!
taSelection.setSelectionAfterElement(taSelection.getSelectionElement());
}
this.$editor().wrapSelection('insertHTML', ' <var class="tag field-' + field_id + '" contenteditable="false">' + field_name + '</var> ', true);
},
action: function(){
}

View File

@ -2,7 +2,6 @@
angular.module('users').controller('PasswordController', ['$scope', '$stateParams', '$state', 'User', '$translate', '$window',
function($scope, $stateParams, $state, User, $translate, $window) {
$translate.use($window.locale);
$scope.error = '';
$scope.forms = {};

View File

@ -1,4 +1,5 @@
<header data-ng-include="'/static/modules/core/views/header.client.view.html'"></header>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css'>
<section class="row" data-ng-controller="SettingsController">
<h2 class="col-xs-offset-1 col-xs-10 text-center">{{ 'EDIT_PROFILE' | translate }}</h2>
@ -32,20 +33,23 @@
<div class="row">
<hr>
</div>
<div class="row form-group">
<div class="col-xs-7 field-title">
{{ 'LANGUAGE_LABEL' | translate }}
</div>
<div class="col-xs-12 field-input">
<select ng-model="user.language" required>
<option ng-repeat="language in languages"
ng-selected="language == user.language"
value="{{language}}">
{{language}}
</option>
</select>
</div>
</div>
<div class="row field">
<div class="col-sm-4 field-title">
<h4>{{ 'LANGUAGE' | translate }}</h4>
</div>
<div class="col-sm-8 field-input">
<ui-select ng-model="user.language" search-enabled="false" theme="selectize">
<ui-select-match>
{{ $root.langCodeToWord[$select.selected] }}
</ui-select-match>
<ui-select-choices repeat="language in $root.languages">
<span ng-bind-html="$root.langCodeToWord[language] | highlight: $select.search">
</span>
</ui-select-choices>
</select>
<span class="required-error" ng-show="field.required && !field.fieldValue">* {{ 'REQUIRED_FIELD' | translate }}</span>
</div>
</div>
<div class="row form-group">
<div class="col-xs-7 field-title">

View File

@ -1,31 +0,0 @@
<header data-ng-include="'/static/modules/core/views/header.client.view.html'"></header>
<section class="row" data-ng-controller="SettingsController">
<h3 class="col-md-12 text-center" data-ng-show="hasConnectedAdditionalSocialAccounts()">{{ 'CONNECTED_SOCIAL_ACCOUNTS' | translate }}:</h3>
<div class="col-md-12 text-center">
<div data-ng-repeat="(providerName, providerData) in user.additionalProvidersData" class="remove-account-container">
<img ng-src="/modules/users/img/buttons/{{providerName}}.png">
<a class="btn btn-danger btn-remove-account" data-ng-click="removeUserSocialAccount(providerName)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</div>
</div>
<h3 class="col-md-12 text-center">{{ 'CONNECT_OTHER_SOCIAL_ACCOUNTS' | translate }}</h3>
<div class="col-md-12 text-center">
<a href="/auth/facebook" data-ng-hide="isConnectedSocialAccount('facebook')" class="undecorated-link">
<img src="/modules/users/img/buttons/facebook.png">
</a>
<a href="/auth/twitter" data-ng-hide="isConnectedSocialAccount('twitter')" class="undecorated-link">
<img src="/modules/users/img/buttons/twitter.png">
</a>
<a href="/auth/google" data-ng-hide="isConnectedSocialAccount('google')" class="undecorated-link">
<img src="/modules/users/img/buttons/google.png">
</a>
<a href="/auth/linkedin" data-ng-hide="isConnectedSocialAccount('linkedin')" class="undecorated-link">
<img src="/modules/users/img/buttons/linkedin.png">
</a>
<a href="/auth/github" data-ng-hide="isConnectedSocialAccount('github')" class="undecorated-link">
<img src="/modules/users/img/buttons/github.png">
</a>
</div>
</section>