refactored options, elementTypes option added

.gitignore

@@ -38,4 +38,6 @@ tmp
 *.iml
 out
 gen
-/nbproject/private/
+/nbproject/private/
+
+nbproject

demo/demo.js

@@ -4,7 +4,7 @@ angular.module('app', ['mwFormBuilder', 'mwFormViewer', 'mwFormUtils', 'pascalpr
             prefix: '../dist/i18n/',
             suffix: '/angular-surveys.json'
         });
-        $translateProvider.preferredLanguage('es');
+        $translateProvider.preferredLanguage('en');
     })
     .controller('DemoController', function($q,$http, $translate, mwFormResponseUtils) {
 
@@ -28,6 +28,14 @@ angular.module('app', ['mwFormBuilder', 'mwFormViewer', 'mwFormUtils', 'pascalpr
         ctrl.formOptions = {
             autoStart: false
         };
+        ctrl.optionsBuilder={
+            /*elementButtons:   [{title: 'My title tooltip', icon: 'fa fa-database', text: '', callback: ctrl.callback, filter: ctrl.filter, showInOpen: true}],
+            customQuestionSelects:  [
+                {key:"category", label: 'Category', options: [{key:"1", label:"Uno"},{key:"2", label:"dos"},{key:"3", label:"tres"},{key:"4", label:"4"}], required: false},
+                {key:"category2", label: 'Category2', options: [{key:"1", label:"Uno"},{key:"2", label:"dos"},{key:"3", label:"tres"},{key:"4", label:"4"}]}
+            ],
+            elementTypes: ['question', 'image']*/
+        };
         ctrl.formStatus= {};
         ctrl.responseData={};
         $http.get('response-data.json')

src/builder/form-builder-options.service.js

@@ -0,0 +1,54 @@
+angular.module('mwFormBuilder')
+    .constant('MW_QUESTION_TYPES', ['text', 'textarea', 'radio', 'checkbox', 'grid', 'priority', 'division', 'number', 'date', 'time', 'email', 'range', 'url'])
+    .constant('MW_ELEMENT_TYPES', ['question', 'image', 'paragraph'])
+    .factory('mwFormBuilderOptions', function mwFormBuilderOptionsFactory(MW_ELEMENT_TYPES, MW_QUESTION_TYPES){
+
+        var defaultElementButtonOptions={
+            title: null,
+            icon: null,
+            text: null,
+            callback: null,
+            filter: null,
+            showInOpen:false,
+            showInPreview:true,
+            cssClass: ''
+        };
+
+        var defaultCustomQuestionSelectOptions={
+            key: null,
+            label: null,
+            selects: [],
+            required: true
+        };
+
+        var defaultOptions={
+            elementTypes: MW_ELEMENT_TYPES,
+            questionTypes: MW_QUESTION_TYPES,
+            elementButtons: [],
+            customQuestionSelects: [],
+            customElements: [] //TODO
+        };
+
+        function extendOptionList(optionList, defaultItemOptions){
+            if(!optionList){
+                return [];
+            }
+            return optionList.map(function (itemOptions){
+                return angular.extend({}, defaultItemOptions, itemOptions);
+            });
+        }
+
+        var options = {
+
+            $init: function(customOptions){
+                angular.extend(options, defaultOptions, customOptions);
+                options.customQuestionSelects = extendOptionList(options.customQuestionSelects, defaultCustomQuestionSelectOptions);
+                options.elementButtons = extendOptionList(options.elementButtons, defaultElementButtonOptions);
+
+                return options;
+            }
+        };
+
+
+        return options;
+    });

src/builder/form-builder.directive.js

@@ -21,29 +21,17 @@ angular.module('mwFormBuilder').directive('mwFormBuilder', function () {
                 ctrl.formData.pages = [];
                 ctrl.formData.pages.push(createEmptyPage(1));
             }
-            mwFormBuilderOptions.questionTypes = MW_QUESTION_TYPES;
-            mwFormBuilderOptions.elementButtons = [];
-            mwFormBuilderOptions.additionalSelects = [];
-
-            if(ctrl.options){
-                if(ctrl.options.questionTypes){
-                    mwFormBuilderOptions.questionTypes = ctrl.options.questionTypes;
-                }
-                if(ctrl.options.additionalSelects){
-                    mwFormBuilderOptions.additionalSelects = ctrl.options.additionalSelects;
-                }
-                if(ctrl.options.elementButtons){
-                    mwFormBuilderOptions.elementButtons = ctrl.options.elementButtons;
-                }
-            }
-
 
+            ctrl.options = mwFormBuilderOptions.$init(ctrl.options);
+            console.log('options',mwFormBuilderOptions);
 
             ctrl.addPage = function(){
                 ctrl.formData.pages.push(createEmptyPage(ctrl.formData.pages.length+1));
             };
 
 
+
+
             function createEmptyPage(number){
                 var defaultPageFlow = null;
                 if(ctrl.possiblePageFlow){

src/builder/form-builder.module.js

@@ -1,5 +1 @@
-angular.module('mwFormBuilder', ['ngSanitize', 'ui.bootstrap','ng-sortable', 'pascalprecht.translate'])
-        .constant('MW_QUESTION_TYPES', ['text', 'textarea', 'radio', 'checkbox', 'grid', 'priority', 'division', 'number', 'date', 'time', 'email', 'range', 'url'])
-        .value('mwFormBuilderOptions', {});
-
-
+angular.module('mwFormBuilder', ['ngSanitize', 'ui.bootstrap','ng-sortable', 'pascalprecht.translate']);

src/builder/form-page-builder.directive.js

@@ -15,7 +15,7 @@ angular.module('mwFormBuilder').directive('mwFormPageBuilder', function () {
         templateUrl: 'mw-form-page-builder.html',
         controllerAs: 'ctrl',
         bindToController: true,
-        controller: function($timeout, mwFormUuid, mwFormClone){
+        controller: function($timeout, mwFormUuid, mwFormClone, mwFormBuilderOptions){
             var ctrl = this;
             ctrl.hoverEdit = false;
             ctrl.formPage.namedPage = !!ctrl.formPage.name;
@@ -58,7 +58,8 @@ angular.module('mwFormBuilder').directive('mwFormPageBuilder', function () {
 
             ctrl.addElement = function(type){
                 if(!type){
-                    type='question';
+
+                    type=mwFormBuilderOptions.elementTypes[0];
                 }
                 var element = createEmptyElement(type, ctrl.formPage.elements.length + 1);
                 ctrl.activeElement=element;
@@ -98,6 +99,10 @@ angular.module('mwFormBuilder').directive('mwFormPageBuilder', function () {
                 updateElementsOrderNo();
             };
 
+            ctrl.isElementTypeEnabled = function(elementType){
+                return mwFormBuilderOptions.elementTypes.indexOf(elementType) !== -1;
+            };
+
             ctrl.addQuestion = function(){
                 ctrl.addElement('question');
             };

src/builder/form-page-element-builder.directive.js

@@ -26,9 +26,16 @@ angular.module('mwFormBuilder').directive('mwFormPageElementBuilder', function (
                     element.callback(ctrl.pageElement);
                 }
             };
-            ctrl.filter = function(element){
-                if (element.filter && typeof element.filter === "function") {
-                    return element.filter(ctrl.pageElement);
+            ctrl.filter = function(button){
+                if(!button.showInOpen && ctrl.isActive){
+                    return false;
+                }
+                if(!button.showInPreview && !ctrl.isActive){
+                    return false;
+                }
+
+                if (button.filter && typeof button.filter === "function") {
+                    return button.filter(ctrl.pageElement);
                 }
                 return true;
             };

src/builder/mw-form-page-builder.html

@@ -57,9 +57,9 @@
                     <span class="sr-only">Split button!</span>
                 </button>
                 <ul uib-dropdown-menu aria-labelledby="simple-dropdown" role="menu">
-                    <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>
+                    <li ng-if="ctrl.isElementTypeEnabled('question')"><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 ng-if="ctrl.isElementTypeEnabled('image')"><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 ng-if="ctrl.isElementTypeEnabled('paragraph')"><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>

src/builder/mw-form-page-element-builder.html

@@ -2,7 +2,17 @@
     <div class="mw-form-page-element-builder" ng-class="{'active': ctrl.isActive, 'inactive draggable': !ctrl.isActive}">
         <!--{{ctrl.pageElement.orderNo}}-->
         <div class="mw-page-element-actions-tab" ng-switch="ctrl.isActive&&!ctrl.readOnly">
-            <div ng-switch-when="true">
+            <span class="mw-additional-buttons">
+                <button type="button" ng-click="ctrl.callback($event,button)"
+                        ng-attr-title="{{button.title | translate}}" ng-class="button.cssClass" class="edit-button"
+                        aria-label="{{button.title | translate}}"  aria-hidden="false" ng-if="ctrl.filter(button) && !ctrl.readOnly"
+                        ng-repeat="button in ctrl.options.elementButtons"
+                        uib-popover="{{button.title | translate}}" popover-trigger="mouseenter" popover-append-to-body popover-placement="right"
+                >
+                    <i class="{{button.icon}}"></i> {{button.text}}
+                </button>
+            </span>
+            <span ng-switch-when="true">
                 <button type="button" class="move-down-button" ng-click="ctrl.moveDown()" ng-if="!ctrl.isLast"
                         ng-attr-title="{{'mwForm.buttons.moveDown' | translate}}" uib-popover="{{'mwForm.buttons.moveDown' | translate}}" popover-trigger="mouseenter" popover-placement="top">
                     <i class="fa  fa-chevron-down"></i>
@@ -14,8 +24,8 @@
                 <button type="button" class="remove-button" mw-confirm-click confirmed-action="ctrl.removeElement()"
                         ng-attr-title="{{'mwForm.buttons.remove' | translate}}" uib-popover="{{'mwForm.buttons.remove' | translate}}" popover-trigger="mouseenter" popover-placement="top">
                     <i class="fa fa-trash"></i></button>
-            </div>
-            <div ng-switch-when="false">
+            </span>
+            <span ng-switch-when="false">
                 <button type="button" aria-label="{{'mwForm.buttons.clone' | translate}}" aria-hidden="false" class="edit-button" ng-click="ctrl.cloneElement($event)" ng-if="!ctrl.readOnly"
                         ng-attr-title="{{'mwForm.buttons.clone' | translate}}" uib-popover="{{'mwForm.buttons.clone' | translate}}" popover-trigger="mouseenter" popover-placement="top">
                     <i class="fa fa-clone"></i>
@@ -28,15 +38,9 @@
                         ng-attr-title="{{'mwForm.buttons.view' | translate}}" uib-popover="{{'mwForm.buttons.view' | translate}}" popover-trigger="mouseenter" popover-placement="top">
                     <i class="fa fa-eye"></i>
                 </button>
-                <button type="button" ng-click="ctrl.callback($event,button)" 
-                        ng-attr-title="{{button.title | translate}}" class="edit-button" 
-                        aria-label="{{button.title | translate}}"  aria-hidden="false" ng-if="ctrl.filter(button) && !ctrl.readOnly"
-                        ng-repeat="button in ctrl.options.elementButtons"
-                        uib-popover="{{button.title | translate}}" popover-trigger="mouseenter" popover-append-to-body popover-placement="right"
-                        >
-                    <i class="{{button.icon}}"></i> {{button.text}} 
-                </button>
-            </div>
+
+            </span>
+
         </div>
         <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>

src/builder/mw-form-question-builder.html

@@ -21,10 +21,10 @@
                         </div>
                     </div>
                 </div>
-                <div class="form-group mw-question-type" ng-repeat="opt in ctrl.options.additionalSelects">
-                    <mw-label label-for="question-{{opt.key}}-{{ctrl.id}}" label-class="col-sm-2 control-label"  label-key="{{opt.label}}"></mw-label>
+                <div class="form-group mw-question-type" ng-repeat="select in ctrl.options.customQuestionSelects">
+                    <mw-label label-for="question-{{select.key}}-{{ctrl.id}}" label-class="col-sm-2 control-label"  label-key="{{select.label}}"></mw-label>
                     <div class="col-sm-10 form-inline">
-                        <select ng-attr-id="question-{{opt.key}}-{{ctrl.id}}" ng-options="sel.label for sel in opt.selects track by sel.key" ng-model="ctrl.question[opt.key]"  class="form-control" ng-disabled="ctrl.readOnly" required></select>
+                        <select ng-attr-id="question-{{opt.key}}-{{ctrl.id}}" ng-options="opt.label for opt in select.options track by opt.key" ng-model="ctrl.question[select.key]"  class="form-control" ng-disabled="ctrl.readOnly" ng-required="select.required"></select>
 
                     </div>
                 </div>