Skip to content

Commit

Permalink
new page element - paragraph, angular-sanitize
Browse files Browse the repository at this point in the history
  • Loading branch information
mwasiluk committed Dec 1, 2015
1 parent 363beeb commit 7b00687
Show file tree
Hide file tree
Showing 20 changed files with 116 additions and 26 deletions.
3 changes: 2 additions & 1 deletion bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"angular-translate-loader-partial": "~2.8.1",
"angular-translate-loader-static-files": "~2.8.1",
"font-awesome": "~4.5.0",
"angular-elastic": "~2.5.1"
"angular-elastic": "~2.5.1",
"angular-sanitize": "~1.4.8"
}
}
1 change: 1 addition & 0 deletions demo/demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@
<script src="../bower_components/jquery-ui/jquery-ui.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="../bower_components/angular-translate/angular-translate.min.js"></script>
<script src="../bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
<script src="../bower_components/angular-ui-sortable/sortable.min.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion dist/form-builder.min.css

Large diffs are not rendered by default.

9 changes: 5 additions & 4 deletions dist/form-builder.min.js

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/form-viewer.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/i18n/en.json
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"mwForm":{"form":{"name":"Form name","name.placeholder":"Form title","description":"Description"},"buttons":{"addPage":"Add page","moveDown":"Move down","moveUp":"Move up","removePage":"Remove page","remove":"Remove","addElement":"Add element","questionReady":"Ready","next":"Next","back":"Back","submit":"Submit","begin":"Begin"},"page":{"tab":{"heading":"Page {{page}} of {{allPages}}"},"elements":{"empty":"Empty page"},"pageWithNameCheckbox":"named","name":"Page name"},"pageFlow":{"afterPage":"After page {{page}}:","afterQuestionAnswer":"Go to page based on answer","goToPage":"Go to page {{page.number}}","goToNextPage":"Continue to next page","submitForm":"Submit form"},"elements":{"question":"Question","image":"Image"},"question":{"types":{"text":{"name":"Short text"},"textarea":{"name":"Long text"},"radio":{"name":"Radio"},"checkbox":{"name":"Checkboxes"},"grid":{"name":"Grid"},"priority":{"name":"Priority"},"division":{"name":"Division"}},"text":"Question text","type":"Question type","required":"Required","preview":{"text":"Short answer text","textarea":"Long answer text","otherAnswer":"Other"},"division":{"quantity":"Quantity","unit":"Unit label","assignedSumLabel":"Assigned","fromRequiredLabel":"from required"},"priority":{"sorted":"Sorted","available":"Available","clickToAddItem":"Click to add item"},"grid":{"rowLabel":"Row {{row}}","clickToAddRow":"Click to add row","columnLabel":"Column {{col}}","clickToAddColumn":"Click to add column"},"orLabel":"or ","otherLabel":"Other: ","userAnswer":"User answer","buttons":{"addOption":"Click to add option","addOther":"Add 'Other'"}},"image":{"selectImageButton":"Select image"},"confirmationPage":{"title":"Confirmation page","customMessage":"Custom confirmation message","defaultMessage":"Your response has been recorded","errorMessage":"Error! Your response has not been recorded","pendingMessage":"Your response is being saved."}}}
{"mwForm":{"form":{"name":"Form name","name.placeholder":"Form title","description":"Description"},"buttons":{"addPage":"Add page","moveDown":"Move down","moveUp":"Move up","removePage":"Remove page","remove":"Remove","addElement":"Add element","questionReady":"Ready","next":"Next","back":"Back","submit":"Submit","begin":"Begin"},"page":{"tab":{"heading":"Page {{page}} of {{allPages}}"},"elements":{"empty":"Empty page"},"pageWithNameCheckbox":"named","name":"Page name"},"pageFlow":{"afterPage":"After page {{page}}:","afterQuestionAnswer":"Go to page based on answer","goToPage":"Go to page {{page.number}}","goToNextPage":"Continue to next page","submitForm":"Submit form"},"elements":{"question":"Question","image":"Image","paragraph":"Paragraph"},"question":{"types":{"text":{"name":"Short text"},"textarea":{"name":"Long text"},"radio":{"name":"Radio"},"checkbox":{"name":"Checkboxes"},"grid":{"name":"Grid"},"priority":{"name":"Priority"},"division":{"name":"Division"}},"text":"Question text","type":"Question type","required":"Required","preview":{"text":"Short answer text","textarea":"Long answer text","otherAnswer":"Other"},"division":{"quantity":"Quantity","unit":"Unit label","assignedSumLabel":"Assigned","fromRequiredLabel":"from required"},"priority":{"sorted":"Sorted","available":"Available","clickToAddItem":"Click to add item"},"grid":{"rowLabel":"Row {{row}}","clickToAddRow":"Click to add row","columnLabel":"Column {{col}}","clickToAddColumn":"Click to add column"},"orLabel":"or ","otherLabel":"Other: ","userAnswer":"User answer","buttons":{"addOption":"Click to add option","addOther":"Add 'Other'"}},"image":{"selectImageButton":"Select image"},"paragraph":{"placeholder":"Enter paragraph text"},"confirmationPage":{"title":"Confirmation page","customMessage":"Custom confirmation message","defaultMessage":"Your response has been recorded","errorMessage":"Error! Your response has not been recorded","pendingMessage":"Your response is being saved."}}}
2 changes: 1 addition & 1 deletion dist/i18n/pl.json
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"mwForm":{"form":{"name":"Nazwa ankiety","name.placeholder":"Podaj nazwę ankiety","description":"Opis"},"buttons":{"addPage":"Dodaj stronę","moveDown":"Przenieś w dół","moveUp":"Przenieś w górę","removePage":"Usuń stronę","remove":"Usuń","addElement":"Dodaj element","questionReady":"Gotowe","next":"Dalej","back":"Wstecz","submit":"Prześlij","begin":"Rozpocznij"},"page":{"tab":{"heading":"Strona {{page}} z {{allPages}}"},"elements":{"empty":"Brak elementów"},"pageWithNameCheckbox":"nazwana","name":"Nazwa strony"},"pageFlow":{"afterPage":"Po stronie {{page}}","afterQuestionAnswer":"Przejdź do strony w oparciu o odpowiedź","goToPage":"Przejdź do strony numer {{page.number}}","goToNextPage":"Przejdz do następnej strony","submitForm":"Prześlij formularz"},"elements":{"question":"Pytanie/Polecenie","image":"Obraz"},"question":{"types":{"text":{"name":"Tekst"},"textarea":{"name":"Długi tekst"},"radio":{"name":"Jednokrotny wybór"},"checkbox":{"name":"Wielokrotny wybór"},"grid":{"name":"Siatka"},"priority":{"name":"Lista priorytetowa"},"division":{"name":"Podział"}},"text":"Treść pytania","type":"Typ pytania","required":"Pytanie wymagane","preview":{"text":"Pole na wpisanie odpowiedzi","textarea":"Pole na wpisanie odpowiedzi","otherAnswer":"Inna"},"division":{"quantity":"Ilość","unit":"Etykieta jednostki","assignedSumLabel":"Przydzielono","fromRequiredLabel":"z wymaganych"},"priority":{"sorted":"Uszeregowane","available":"Pozostałe","clickToAddItem":"Kliknij aby dodać pozycję"},"grid":{"rowLabel":"Etykieta wiersza {{row}}","clickToAddRow":"Kliknij aby dodać wiersz","columnLabel":"Etykieta kolumny {{col}}","clickToAddColumn":"Kliknij aby dodać kolumnę"},"orLabel":"lub ","otherLabel":"Inna: ","userAnswer":"Odpowiedź użytkownika","buttons":{"addOption":"Kliknij aby dodać opcję","addOther":"Dodaj \"Inne\""}},"image":{"selectImageButton":"Wybierz obraz"},"confirmationPage":{"title":"Strona potwierdzenia","customMessage":"Niestandardowa wiadomość z potwierdzeniem","defaultMessage":"Twoja odpowiedź została zapisana","errorMessage":"Błąd. Twoja odpowiedź nie została zapisana.","pendingMessage":"Zapisywanie odpowiedzi w trakcie."}}}
{"mwForm":{"form":{"name":"Nazwa ankiety","name.placeholder":"Podaj nazwę ankiety","description":"Opis"},"buttons":{"addPage":"Dodaj stronę","moveDown":"Przenieś w dół","moveUp":"Przenieś w górę","removePage":"Usuń stronę","remove":"Usuń","addElement":"Dodaj element","questionReady":"Gotowe","next":"Dalej","back":"Wstecz","submit":"Prześlij","begin":"Rozpocznij"},"page":{"tab":{"heading":"Strona {{page}} z {{allPages}}"},"elements":{"empty":"Brak elementów"},"pageWithNameCheckbox":"nazwana","name":"Nazwa strony"},"pageFlow":{"afterPage":"Po stronie {{page}}","afterQuestionAnswer":"Przejdź do strony w oparciu o odpowiedź","goToPage":"Przejdź do strony numer {{page.number}}","goToNextPage":"Przejdz do następnej strony","submitForm":"Prześlij formularz"},"elements":{"question":"Pytanie/Polecenie","image":"Obraz","paragraph":"Paragraf"},"question":{"types":{"text":{"name":"Tekst"},"textarea":{"name":"Długi tekst"},"radio":{"name":"Jednokrotny wybór"},"checkbox":{"name":"Wielokrotny wybór"},"grid":{"name":"Siatka"},"priority":{"name":"Lista priorytetowa"},"division":{"name":"Podział"}},"text":"Treść pytania","type":"Typ pytania","required":"Pytanie wymagane","preview":{"text":"Pole na wpisanie odpowiedzi","textarea":"Pole na wpisanie odpowiedzi","otherAnswer":"Inna"},"division":{"quantity":"Ilość","unit":"Etykieta jednostki","assignedSumLabel":"Przydzielono","fromRequiredLabel":"z wymaganych"},"priority":{"sorted":"Uszeregowane","available":"Pozostałe","clickToAddItem":"Kliknij aby dodać pozycję"},"grid":{"rowLabel":"Etykieta wiersza {{row}}","clickToAddRow":"Kliknij aby dodać wiersz","columnLabel":"Etykieta kolumny {{col}}","clickToAddColumn":"Kliknij aby dodać kolumnę"},"orLabel":"lub ","otherLabel":"Inna: ","userAnswer":"Odpowiedź użytkownika","buttons":{"addOption":"Kliknij aby dodać opcję","addOther":"Dodaj \"Inne\""}},"image":{"selectImageButton":"Wybierz obraz"},"paragraph":{"placeholder":"Wpisz treść paragrafu"},"confirmationPage":{"title":"Strona potwierdzenia","customMessage":"Niestandardowa wiadomość z potwierdzeniem","defaultMessage":"Twoja odpowiedź została zapisana","errorMessage":"Błąd. Twoja odpowiedź nie została zapisana.","pendingMessage":"Zapisywanie odpowiedzi w trakcie."}}}
6 changes: 5 additions & 1 deletion i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@
},
"elements":{
"question":"Question",
"image":"Image"
"image":"Image",
"paragraph": "Paragraph"
},
"question":{
"types":{
Expand Down Expand Up @@ -103,6 +104,9 @@
"image":{
"selectImageButton": "Select image"
},
"paragraph":{
"placeholder": "Enter paragraph text"
},
"confirmationPage":{
"title": "Confirmation page",
"customMessage": "Custom confirmation message",
Expand Down
6 changes: 5 additions & 1 deletion i18n/pl.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@
},
"elements":{
"question":"Pytanie/Polecenie",
"image":"Obraz"
"image":"Obraz",
"paragraph": "Paragraf"
},
"question":{
"types":{
Expand Down Expand Up @@ -103,6 +104,9 @@
"image":{
"selectImageButton": "Wybierz obraz"
},
"paragraph":{
"placeholder": "Wpisz treść paragrafu"
},
"confirmationPage":{
"title": "Strona potwierdzenia",
"customMessage": "Niestandardowa wiadomość z potwierdzeniem",
Expand Down
2 changes: 1 addition & 1 deletion src/builder/form-builder.module.js
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
angular.module('mwFormBuilder', ['ui.sortable']);
angular.module('mwFormBuilder', ['ngSanitize', 'ui.sortable']);

6 changes: 4 additions & 2 deletions src/builder/form-page-builder.directive.js
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,10 @@ angular.module('mwFormBuilder').directive('mwFormPageBuilder', function () {
ctrl.addElement('image');
};

ctrl.addParagraph= function(){
ctrl.addElement('paragraph');
};

ctrl.isElementActive= function(element){
return ctrl.activeElement==element;
};
Expand All @@ -96,8 +100,6 @@ angular.module('mwFormBuilder').directive('mwFormPageBuilder', function () {
};

ctrl.onElementReady = function(){


$timeout(function(){
ctrl.activeElement=null;
});
Expand Down
8 changes: 8 additions & 0 deletions src/builder/form-page-element-builder.directive.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,14 @@ angular.module('mwFormBuilder').directive('mwFormPageElementBuilder', function (
};
}

}else if(ctrl.pageElement.type=='paragraph'){
if(!ctrl.pageElement.paragraph){
ctrl.pageElement.paragraph={
id: uuid.get(),
html: ''
};
}

}


Expand Down
45 changes: 45 additions & 0 deletions src/builder/form-paragraph-builder.directive.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@

angular.module('mwFormBuilder').factory("FormParagraphBuilderId", function(){
var id = 0;
return {
next: function(){
return ++id;
}
}
})

.directive('mwFormParagraphBuilder', function () {

return {
replace: true,
restrict: 'AE',
require: '^mwFormPageElementBuilder',
scope: {
paragraph: '=',
formObject: '=',
onReady: '&',
isPreview: '=?',
readOnly: '=?',
options: '=?'
},
templateUrl: 'mw-form-paragraph-builder.html',
controllerAs: 'ctrl',
bindToController: true,
controller: function($timeout,FormParagraphBuilderId, uuid){
var ctrl = this;
ctrl.id = FormParagraphBuilderId.next();
ctrl.formSubmitted=false;

ctrl.save=function(){
ctrl.formSubmitted=true;
if(ctrl.form.$valid){
ctrl.onReady();
}
};

},
link: function (scope, ele, attrs, formPageElementBuilder){
var ctrl = scope.ctrl;
}
};
});
5 changes: 3 additions & 2 deletions src/builder/mw-form-page-builder.html
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,9 @@
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><button type="button" ng-click="ctrl.addQuestion()"><span translate="mwForm.elements.question">Pytanie</span><i class="fa fa-question-circle fa-fw" style="margin-left: 10px;"></i></button></li>
<li><button type="button" ng-click="ctrl.addImage()"><span translate="mwForm.elements.image">Obraz</span><i class="fa fa-picture-o fa-fw" style="margin-left: 10px;"></i></button></li>
<li><button type="button" ng-click="ctrl.addQuestion()"><span translate="mwForm.elements.question">Pytanie</span><i class="fa fa-question-circle fa-lg fa-fw" style="margin-left: 10px;"></i></button></li>
<li><button type="button" ng-click="ctrl.addImage()"><span translate="mwForm.elements.image">Obraz</span><i class="fa fa-picture-o fa-lg fa-fw" style="margin-left: 10px;"></i></button></li>
<li><button type="button" ng-click="ctrl.addParagraph()"><span translate="mwForm.elements.paragraph">Obraz</span><i class="fa fa-paragraph fa-lg fa-fw" style="margin-left: 10px;"></i></button></li>

</ul>
</div>
Expand Down
7 changes: 5 additions & 2 deletions src/builder/mw-form-page-element-builder.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,11 @@
<button type="button" aria-label="Wyświetl element" aria-hidden="false" class="edit-button" ng-click="ctrl.editElement()" ng-if="ctrl.readOnly"><i class="fa fa-eye"></i></button>
</div>
</div>
<mw-form-question-builder ng-if="ctrl.pageElement.type=='question'" question="ctrl.pageElement.question" form-object="ctrl.formObject" on-ready="ctrl.onReady()" is-preview="!ctrl.isActive" read-only="ctrl.readOnly"></mw-form-question-builder>
<mw-form-image-builder ng-if="ctrl.pageElement.type=='image'" image="ctrl.pageElement.image" form-object="ctrl.formObject" on-ready="ctrl.onReady()" is-preview="!ctrl.isActive" read-only="ctrl.readOnly" on-image-selection="ctrl.onImageSelection()"></mw-form-image-builder>
<div ng-switch="ctrl.pageElement.type">
<mw-form-question-builder ng-switch-when="question" question="ctrl.pageElement.question" form-object="ctrl.formObject" on-ready="ctrl.onReady()" is-preview="!ctrl.isActive" read-only="ctrl.readOnly"></mw-form-question-builder>
<mw-form-image-builder ng-switch-when="image" image="ctrl.pageElement.image" form-object="ctrl.formObject" on-ready="ctrl.onReady()" is-preview="!ctrl.isActive" read-only="ctrl.readOnly" on-image-selection="ctrl.onImageSelection()"></mw-form-image-builder>
<mw-form-paragraph-builder ng-switch-when="paragraph" paragraph="ctrl.pageElement.paragraph" form-object="ctrl.formObject" on-ready="ctrl.onReady()" is-preview="!ctrl.isActive" read-only="ctrl.readOnly"></mw-form-paragraph-builder>
</div>
</div>

</div>
17 changes: 17 additions & 0 deletions src/builder/mw-form-paragraph-builder.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<div class="mw-form-paragraph-builder-wrapper">
<div class="mw-form-paragraph-builder" ng-class="{'ng-submitted':ctrl.formSubmitted}">
<div class="paragraph-editor" ng-form="ctrl.form" ng-if="!ctrl.isPreview">
<textarea msd-elastic class="form-control mw-form-paragraph-textarea" ng-model="ctrl.paragraph.html" required ng-attr-id="paragraph-textarea-{{ctrl.id}}" ng-readonly="ctrl.readOnly" ng-attr-placeholder="{{'mwForm.paragraph.placeholder'|translate}}"></textarea>
<div class="row">
<br/>
<div class="col-xs-2">
<button type="button" class="btn btn-primary" ng-click="ctrl.save()" translate="mwForm.buttons.questionReady">Gotowe</button>
</div>
</div>
</div>
<div class="mw-preview" ng-if="ctrl.isPreview">
<p ng-bind-html="ctrl.paragraph.html"></p>
</div>
</div>

</div>
2 changes: 1 addition & 1 deletion src/viewer/form-viewer.module.js
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
angular.module('mwFormViewer', [ 'ui.sortable']);
angular.module('mwFormViewer', ['ngSanitize', 'ui.sortable']);

2 changes: 1 addition & 1 deletion src/viewer/mw-form-question.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<input class="form-control" type="text" ng-model="ctrl.questionResponse.answer" placeholder="{{'mwForm.question.preview.text'|translate}}" ng-required="ctrl.question.required">
</div>
<div ng-if="ctrl.question.type=='textarea'">
<textarea class="form-control" ng-model="ctrl.questionResponse.answer" placeholder="{{'mwForm.question.preview.textarea'|translate}}" ng-required="ctrl.question.required" ></textarea>
<textarea msd-elastic class="form-control" ng-model="ctrl.questionResponse.answer" placeholder="{{'mwForm.question.preview.textarea'|translate}}" ng-required="ctrl.question.required" ></textarea>
</div>
<div ng-if="ctrl.question.type=='radio'">
<div class="radio" ng-repeat="answer in ctrl.question.offeredAnswers">
Expand Down
10 changes: 7 additions & 3 deletions src/viewer/mw-form-viewer-content.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,18 @@ <h1 class="form-title">{{ctrl.formData.name}}</h1>
<div class="mw-form-page" ng-if="ctrl.currentPage">
<h2 class="mw-page-title" ng-if="ctrl.currentPage.namedPage && ctrl.currentPage.name">{{ctrl.currentPage.name}}</h2>
<div class="mw-form-page-element-list">
<div class="mw-page-element" ng-repeat="pageElement in ctrl.currentPage.elements">
<mw-form-question ng-if="pageElement.type=='question'" question="pageElement.question" question-response="ctrl.responseData[pageElement.question.id]" read-only="ctrl.readOnly" on-response-changed="ctrl.onResponseChanged(pageElement)"></mw-form-question>
<div class="image-element" ng-if="pageElement.type=='image'">
<div class="mw-page-element" ng-repeat="pageElement in ctrl.currentPage.elements" ng-switch="pageElement.type">
<mw-form-question ng-switch-when="question" question="pageElement.question" question-response="ctrl.responseData[pageElement.question.id]" read-only="ctrl.readOnly" on-response-changed="ctrl.onResponseChanged(pageElement)"></mw-form-question>
<div class="image-element" ng-switch-when="image">
<figure ng-class="'align-'+pageElement.image.align">
<img ng-src="{{pageElement.image.src}}" ng-attr-alt="pageElement.image.caption">
<figcaption ng-if="pageElement.image.caption">{{pageElement.image.caption}}</figcaption>
</figure>
</div>
<div ng-switch-when="paragraph">
<p ng-bind-html="pageElement.paragraph.html"></p>
</div>

</div>

</div>
Expand Down
3 changes: 1 addition & 2 deletions styles/form-builder.scss
Original file line number Diff line number Diff line change
Expand Up @@ -128,8 +128,6 @@

}



.mw-page-bottom-tab-actions{
background-color: $bg-color;
padding: 4px;
Expand Down Expand Up @@ -167,6 +165,7 @@
width: 100%;
border: none;
background: none;
line-height: 28px;

&:hover{
background: #CCCCCC;
Expand Down

0 comments on commit 7b00687

Please sign in to comment.