diff --git a/.gitignore b/.gitignore index 2785a6d1..f720e67c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,7 @@ node_modules bower_components .sass-cache -compiled \ No newline at end of file +compiled +npm-debug.log +.DS_Store +.idea \ No newline at end of file diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 00000000..d16c3a34 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +10.15.3 \ No newline at end of file diff --git a/Gruntfile.coffee b/Gruntfile.coffee index abf78fb9..776135dd 100644 --- a/Gruntfile.coffee +++ b/Gruntfile.coffee @@ -1,4 +1,4 @@ -ALL_TASKS = ['jst:all', 'coffee:all', 'concat:all', 'stylus:all', 'clean:compiled'] +ALL_TASKS = ['jst:all', 'coffee:all', 'concat:all', 'stylus:all', 'clean:compiled', 'copy:all'] # formbuilder.js must be compiled in this order: # 1. rivets-config @@ -19,8 +19,10 @@ module.exports = (grunt) -> grunt.loadNpmTasks('grunt-contrib-uglify') grunt.loadNpmTasks('grunt-contrib-watch') grunt.loadNpmTasks('grunt-contrib-clean') + grunt.loadNpmTasks('grunt-contrib-copy') grunt.loadNpmTasks('grunt-release') grunt.loadNpmTasks('grunt-karma') + grunt.loadNpmTasks('grunt-contrib-connect') grunt.initConfig @@ -58,7 +60,7 @@ module.exports = (grunt) -> '<%= distFolder %>/formbuilder.js': '<%= compiledFolder %>/*.js' '<%= vendorFolder %>/js/vendor.js': [ 'bower_components/ie8-node-enum/index.js' - 'bower_components/jquery/jquery.js' + 'bower_components/jquery/dist/jquery.js' 'bower_components/jquery-ui/ui/jquery.ui.core.js' 'bower_components/jquery-ui/ui/jquery.ui.widget.js' 'bower_components/jquery-ui/ui/jquery.ui.mouse.js' @@ -66,18 +68,38 @@ module.exports = (grunt) -> 'bower_components/jquery-ui/ui/jquery.ui.droppable.js' 'bower_components/jquery-ui/ui/jquery.ui.sortable.js' 'bower_components/jquery.scrollWindowTo/index.js' - 'bower_components/underscore/underscore-min.js' + 'bower_components/lodash/dist/lodash.min.js' 'bower_components/underscore.mixin.deepExtend/index.js' 'bower_components/rivets/dist/rivets.js' 'bower_components/backbone/backbone.js' 'bower_components/backbone-deep-model/src/deep-model.js' + 'bower_components/bootstrap/dist/js/bootstrap.js', + 'bower_components/bootstrap/js/tooltip.js', + 'bower_components/signature_pad/signature_pad.js' + 'bower_components/node-uuid/uuid.js' + 'bower_components/spectrum/spectrum.js', + 'bower_components/select2/select2/dist/js/select2.min.js' ] + '<%= vendorFolder %>/css/vendor.css': [ + 'bower_components/font-awesome/css/font-awesome.css', + 'bower_components/bootstrap/dist/css/bootstrap.css', + 'bower_components/summernote/dist/summernote.css', + 'bower_components/select2/dist/css/select2.css', + 'bower_components/spectrum/spectrum.css' + ] + + copy: + all: + expand: true, + flatten: true, + src: 'bower_components/font-awesome/fonts/*', + dest: '<%= vendorFolder %>/fonts/' cssmin: dist: files: '<%= distFolder %>/formbuilder-min.css': '<%= distFolder %>/formbuilder.css' - '<%= vendorFolder %>/css/vendor.css': 'bower_components/font-awesome/css/font-awesome.css' + stylus: all: @@ -99,6 +121,12 @@ module.exports = (grunt) -> files: ['<%= srcFolder %>/**/*.{coffee,styl,html}'] tasks: ALL_TASKS + connect: + server: + options: + port: 9001 + keepalive: true + # To test, run `grunt --no-write -v release` release: npm: false diff --git a/README.md b/README.md index a7c58bbe..f0886cc3 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,8 @@ Formbuilder is a graphical interface for letting users build their own webforms. ## Demo [Click here](http://dobtco.github.io/formbuilder/) to see Formbuilder in action. +## Add new icons to element +If you need to add/replace icon for form element, you can find all available icons from `icon-font-demo` folder ## Basic usage ```
@@ -38,22 +40,22 @@ Because of its modular nature, Formbuilder is easy to customize. Most of the con Keeping with the customizable nature of Formbuilder, you are also able to modify how Formbuilder structures its JSON output. The [default keypaths](https://github.com/dobtco/formbuilder/blob/master/coffee/main.coffee#L20) are: ```coffeescript -SIZE: 'field_options.size' -UNITS: 'field_options.units' +SIZE: 'options.size' +UNITS: 'options.units' LABEL: 'label' -FIELD_TYPE: 'field_type' +type: 'type' REQUIRED: 'required' ADMIN_ONLY: 'admin_only' -OPTIONS: 'field_options.options' -DESCRIPTION: 'field_options.description' -INCLUDE_OTHER: 'field_options.include_other_option' -INCLUDE_BLANK: 'field_options.include_blank_option' -INTEGER_ONLY: 'field_options.integer_only' -MIN: 'field_options.min' -MAX: 'field_options.max' -MINLENGTH: 'field_options.minlength' -MAXLENGTH: 'field_options.maxlength' -LENGTH_UNITS: 'field_options.min_max_length_units' +OPTIONS: 'options.options' +DESCRIPTION: 'options.description' +INCLUDE_OTHER: 'options.include_other_option' +INCLUDE_BLANK: 'options.include_blank_option' +INTEGER_ONLY: 'options.integer_only' +MIN: 'options.min' +MAX: 'options.max' +MINLENGTH: 'options.minlength' +MAXLENGTH: 'options.maxlength' +LENGTH_UNITS: 'options.min_max_length_units' ``` Which outputs JSON that looks something like: @@ -61,15 +63,15 @@ Which outputs JSON that looks something like: ```javascript [{ "label": "Please enter your clearance number", - "field_type": "text", + "type": "text", "required": true, - "field_options": {}, + "options": {}, "cid": "c6" }, { "label": "Security personnel #82?", - "field_type": "radio", + "type": "radio", "required": true, - "field_options": { + "options": { "options": [{ "label": "Yes", "checked": false @@ -82,9 +84,9 @@ Which outputs JSON that looks something like: "cid": "c10" }, { "label": "Medical history", - "field_type": "file", + "type": "file", "required": true, - "field_options": {}, + "options": {}, "cid": "c14" }] ``` @@ -108,10 +110,55 @@ Have a question about Formbuilder? Feel free to [open a GitHub Issue](https://gi ## Developing You'll need [node and npm](http://nodejs.org/) installed. -1. `npm install` -2. `bower install` -3. `grunt watch` -4. open `index.html` and you're all set! +1. `nvm use` +2. `npm install` +3. `bower install` +4. `grunt watch` +5. Open a new terminal and run `grunt connect` +6. open `http://localhost:9001/` and you're all set! ## License MIT + +## Currently known issues +Last time this was worked on there were issues getting a new repo set up. +* npm install was failing to install correctly: + * running into issues with not finding xcode while trying to install gym. + * throwing lots of deprecation, no member named 'New' in 'v8::String', and NAN_THROW_ERRORs when installing gym + * failing on a package due to a no-SSL error +* bower seems to run fine but reports connection closed with 1 byte remaining +* Running grunt watch/connect resulted in lots of JS errors in the console including missing css and summernote library + +A ticket will be created for this in the meantime. + +Note made on the last attempt: + +If node install fails with `gyp: No Xcode or CLT version detected!` +Run `xcode-select --install` and try again. +If you have a pending or recently updated xcode you may need to open the app and accept permissions. + +You may also need to completely delete and re-install xcode with +~~~ +sudo rm -rf $(xcode-select -print-path) +xcode-select --install +~~~ + +Also, you may not be able to get node install to work because node-gym is unsupported with errors like this: +~~~ + CXX(target) Release/obj.target/fse/fsevents.o +In file included from ../fsevents.cc:6: +../../nan/nan.h:213:31: warning: 'Uint32Value' is deprecated [-Wdeprecated-declarations] + ? optionsObj->Get(opt)->Uint32Value() + ^ +/Users/paul/Library/Caches/node-gyp/10.19.0/include/node/v8.h:2477:3: note: 'Uint32Value' has been + explicitly marked deprecated here + V8_DEPRECATED("Use maybe version", uint32_t Uint32Value() const); +~~~ + +In that case you can switch to a much earlier version of node and try again, though it may not work: +~~~ +nvm install 0.8 +nvm use 0.8 +nvm ls +~~~ + diff --git a/bower.json b/bower.json index e7deea0a..f01ce723 100644 --- a/bower.json +++ b/bower.json @@ -16,15 +16,21 @@ "tests" ], "dependencies": { - "ie8-node-enum": "https://gist.github.com/adamjacobbecker/8902451/raw/b68459289526cb76c2e22416d98d0dbd0b722fa0/ie8_node_enum.js", - "jquery": "~2.0.3", + "ie8-node-enum": "https://gist.github.com/ajb/8902451/raw/b68459289526cb76c2e22416d98d0dbd0b722fa0/ie8_node_enum.js", + "jquery.scrollWindowTo": "https://gist.github.com/ajb/6519570/raw/cd741057495d0fb19e545a0f9a098efba3bef9c8/jquery.scrollWindowTo.js", + "jquery": "~1.11.1", "jquery-ui": "~1.10.3", - "jquery.scrollWindowTo": "https://gist.github.com/adamjacobbecker/6519570/raw/cd741057495d0fb19e545a0f9a098efba3bef9c8/jquery.scrollWindowTo.js", - "underscore": "~1.5.2", - "underscore.mixin.deepExtend": "https://gist.github.com/adamjacobbecker/6519561/raw/63682037af9b10200b05c1a3d5890903397b2103/underscore.mixin.deepExtend.js", "backbone": "~1.1.0", "backbone-deep-model": "~0.10.4", + "underscore.mixin.deepExtend": "https://gist.github.com/ajb/6519561/raw/63682037af9b10200b05c1a3d5890903397b2103/underscore.mixin.deepExtend.js", "rivets": "~0.5.13", - "font-awesome": "~4.0.0" + "signature_pad": "~1.3.2", + "bootstrap": "~3.1.1", + "summernote": "~0.6.16", + "node-uuid": "~1.4.1", + "mathjs": "~1.1.1", + "lodash": "~2.4.1", + "spectrum": "~1.7.1", + "select2": "~4.0" } -} \ No newline at end of file +} diff --git a/dist/formbuilder-min.css b/dist/formbuilder-min.css index 0247fb6d..1aae53c5 100644 --- a/dist/formbuilder-min.css +++ b/dist/formbuilder-min.css @@ -1 +1 @@ -.fb-button{display:inline-block;margin:0;padding:.563rem .844rem;border:0 none;background:#16a085;color:#fff;text-align:center;text-decoration:none;font-size:12px;line-height:1.5;cursor:pointer;border-radius:.125rem;border:thin solid #19b394;border-bottom:2px solid #16a085}.fb-button[disabled]{background:#ddd!important;border:thin solid #ccc;color:#777!important;text-shadow:none!important;-ms-filter:"alpha(Opacity=65)";opacity:.65;cursor:default}.fb-clear{clear:both}.fb-main{max-width:1000px;margin:0 auto;padding:0 20px 0 0;position:relative;font-family:'Source Sans Pro','Open Sans',Tahoma}.fb-save-wrapper{position:absolute;right:20px;top:10px}.fb-left{width:320px;float:left;padding-top:30px}.fb-right{padding-top:70px;margin-left:320px;border-left:1px solid #ddd;padding-left:20px;min-height:100%;overflow:hidden}.fb-no-response-fields{color:#999}.fb-tabs{list-style:none;margin:0 0 20px;padding:0 0 0 20px;border-bottom:1px solid #ccc}.fb-tabs li{display:inline-block}.fb-tabs li a{display:block;padding:10px;border-radius:5px 5px 0 0;font-size:13px;cursor:pointer;border-left:1px solid transparent;border-right:1px solid transparent}.fb-tabs li.active a{border:1px solid #ccc;margin-bottom:-1px;border-bottom-color:#fff}.fb-tab-content .fb-tab-pane{padding:0 20px;display:none}.fb-tab-content .fb-tab-pane.active{display:block}.fb-add-field-types .section{padding-bottom:5px;margin-bottom:20px}.fb-add-field-types{font-size:0}.fb-add-field-types a{font-size:13px;display:inline-block;width:48.5%;background-color:#1abc9c;margin-bottom:9px;box-sizing:border-box}.fb-add-field-types a:nth-child(odd){margin-right:3%}.fb-add-field-types a .symbol{opacity:.6;margin:0 .25em 0 -1em}.fb-response-fields{padding-bottom:150px}.fb-response-fields a.sortable-placeholder{display:block;border:1px dashed #ddd;min-height:80px;height:80px;width:100%}.fb-field-wrapper{cursor:pointer;position:relative;margin-bottom:20px}.fb-field-wrapper input{border-radius:3px;border:thin solid #ddd}.fb-field-wrapper:hover .actions-wrapper,.fb-field-wrapper.editing .actions-wrapper{display:block}.fb-field-wrapper:hover .subtemplate-wrapper{border-color:#ddd;border-radius:3px}.fb-field-wrapper.editing{background-color:#ecf0f1;border-radius:3px}.fb-field-wrapper.editing .subtemplate-wrapper{border-color:#d9e1e3;border-style:solid;margin:0;border-radius:3px}.fb-field-wrapper .actions-wrapper{display:none;position:absolute;bottom:-7px;right:5px;z-index:3}.fb-field-wrapper .actions-wrapper a{display:inline-block;background-color:#ccc;padding:2px 8px}.edit-response-field input,.edit-response-field textarea,.edit-response-field select{border:thin solid #ddd;border-radius:.25em;padding:.5em;display:inline-block;height:auto;vertical-align:middle}.edit-response-field input:focus,.edit-response-field textarea:focus,.edit-response-field select:focus{outline:0;border:thin solid #1abc9c}.edit-response-field select{font-size:14px}.fb-field-wrapper .actions-wrapper a.js-duplicate,.fb-edit-field-wrapper .js-add-option{background-color:#2ecc71;border:0}.fb-field-wrapper .actions-wrapper a.js-clear,.fb-edit-field-wrapper .js-remove-option{background-color:#e74c3c;border:0}.fb-field-wrapper .subtemplate-wrapper{border:1px dashed transparent;margin-bottom:10px;padding:10px;position:relative}.fb-field-wrapper .subtemplate-wrapper .cover{position:absolute;top:0;left:0;height:100%;width:100%;z-index:2}.fb-field-wrapper .subtemplate-wrapper>label{display:block;border-bottom:thin solid #eee;padding-bottom:3px;margin-bottom:7px}.fb-field-wrapper .subtemplate-wrapper abbr{color:red}.fb-field-wrapper .input-line{clear:both;margin-bottom:10px}.fb-field-wrapper .input-line .above-line{margin-top:7px}.fb-field-wrapper .input-line>span{display:inline-block;vertical-align:top}.fb-field-wrapper .input-line>span input{width:100%}.fb-field-wrapper .input-line>span>label{display:block;font-size:13px;margin-left:3px}.fb-field-wrapper .help-block{display:block;font-size:12px;margin-top:5px}.fb-edit-field-wrapper{font-size:13px}.fb-edit-field-wrapper .fb-field-label{font-weight:400;background:#eee;padding:.75em;color:#666;font-size:1.25em}.fb-edit-field-wrapper .fb-field-label .field-type{margin-top:.5em;display:block;font-family:'Source Sans Pro',sans-serif;font-size:1em}.fb-edit-field-wrapper .fb-field-label .field-type:before{content:'Type: ';color:#999}.fb-edit-field-wrapper .fb-field-label .fa.fa-arrow-right{display:none}.fb-edit-field-wrapper .fb-edit-section-header{border-bottom:1px solid #ddd;margin-top:25px;margin-bottom:10px;padding-bottom:5px;clear:both;font-weight:700}.fb-edit-field-wrapper .js-add-option,.fb-edit-field-wrapper .js-remove-option{padding:3px 6px}.fb-edit-field-wrapper .fb-bottom-add{margin-top:8px}.fb-common-wrapper .fb-label-description{margin-bottom:10px}.fb-common-wrapper .fb-label-description input,.fb-common-wrapper .fb-label-description textarea{width:100%}.fb-common-wrapper .fb-label-description textarea{min-height:5em}.response-field-draggable-helper{border:1px dashed #ddd;background:#eee}.response-field-text input.rf-size-small{width:130px}.response-field-text input.rf-size-medium{width:300px}.response-field-text input.rf-size-large{width:100%}.response-field-paragraph textarea.rf-size-small{width:200px;min-height:60px}.response-field-paragraph textarea.rf-size-medium{width:400px;min-height:100px}.response-field-paragraph textarea.rf-size-large{width:100%;min-height:200px}.response-field-address .street{width:400px}.response-field-address .city,.response-field-address .state,.response-field-address .zip,.response-field-address .country{width:198px}.response-field-date .month,.response-field-date .day,.response-field-date .year{width:50px}.response-field-time .hours,.response-field-time .minutes,.response-field-time .seconds{width:50px}.response-field-checkboxes .fb-option,.response-field-radio .fb-option{margin-bottom:5px;display:inline-block} \ No newline at end of file +[class^=fb-icon-]:before,[class*=" fb-icon-"]:before{font-family:fontello;font-style:normal;font-weight:400;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em}.fb-icon-date:before{content:'\e800'}.fb-icon-radio:before{content:'\e801'}.fb-icon-checkbox:before{content:'\e802'}.fb-icon-data-source:before{content:'\e803'}.fb-icon-dropdown:before{content:'\e804'}.fb-icon-signature:before{content:'\e805'}.fb-icon-info:before{content:'\e806'}.fb-icon-table:before{content:'\e807'}.fb-icon-textarea:before{content:'\e808'}.fb-icon-section:before{content:'\e809'}.fb-icon-text:before{content:'\e80a'}.fb-icon-number:before{content:'\e80b'}.fb-button{text-align:left}.fb-clear{clear:both}.fb-main{padding:0 20px 0 0;position:relative}.fb-save-wrapper{position:absolute;right:20px;top:10px}.fb-left{float:left;width:320px;padding-top:30px}.fb-right{padding-top:70px;margin-left:320px;border-left:1px solid #ddd;padding-left:20px;min-height:100%;overflow:hidden}.fb-no-response-fields{color:#999}.fb-tabs{list-style:none;margin:0 0 20px;padding:0 0 0 20px;border-bottom:1px solid #ccc}.fb-tabs li{display:inline-block}.fb-tabs li a{display:block;padding:10px;border-radius:5px 5px 0 0;font-size:13px;cursor:pointer;border-left:1px solid transparent;border-right:1px solid transparent}.fb-tabs li.active a{border:1px solid #ccc;margin-bottom:-1px;border-bottom-color:#fff}.fb-tab-content .fb-tab-pane{padding:0 20px;display:none}.fb-tab-content .fb-tab-pane.active{display:block}.fb-add-types .section{padding-bottom:5px;margin-bottom:20px}.fb-add-types{font-size:0}.fb-add-types a{font-size:13px;display:inline-block;width:48.5%;margin-bottom:9px;box-sizing:border-box}.fb-add-types a:nth-child(odd){margin-right:3%}.fb-add-types a .symbol{opacity:.6;margin:0 .25em 0 -1em}.fb-response-fields{padding-bottom:150px}.fb-response-fields a.sortable-placeholder{display:block;border:1px dashed #ddd;min-height:80px;height:80px;width:100%}.fb-field-wrapper{cursor:pointer;position:relative;margin-bottom:20px}.fb-field-wrapper input{border-radius:3px;border:thin solid #ddd}.fb-field-wrapper:hover .actions-wrapper,.fb-field-wrapper.editing .actions-wrapper{display:block}.fb-field-wrapper:hover .subtemplate-wrapper{border-color:#ddd;border-radius:3px}.fb-field-wrapper.editing{background-color:#ecf0f1;border-radius:3px}.fb-field-wrapper.editing .subtemplate-wrapper{border-color:#d9e1e3;border-style:solid;margin:0;border-radius:3px}.fb-field-wrapper .actions-wrapper{display:none;position:absolute;bottom:-7px;right:5px;z-index:3}.fb-field-wrapper .actions-wrapper a{display:inline-block;background-color:#ccc;padding:2px 8px}.edit-response-field input,.edit-response-field textarea,.edit-response-field select{border:thin solid #ddd;border-radius:.25em;padding:.5em;display:inline-block;height:auto;vertical-align:middle}.edit-response-field input:focus,.edit-response-field textarea:focus,.edit-response-field select:focus{outline:0}.edit-response-field select{font-size:14px}input[readonly]{cursor:not-allowed;background-color:#eee}.fb-field-wrapper .subtemplate-wrapper{border:1px dashed transparent;margin-bottom:10px;padding:10px;position:relative}.fb-field-wrapper .subtemplate-wrapper .cover{position:absolute;top:0;left:0;height:100%;width:100%;z-index:2}.fb-field-wrapper .subtemplate-wrapper>label{display:block;border-bottom:thin solid #eee;padding-bottom:3px;margin-bottom:7px}.fb-field-wrapper .subtemplate-wrapper abbr{color:red}.fb-field-wrapper .input-line{clear:both;margin-bottom:10px}.fb-field-wrapper .input-line .above-line{margin-top:7px}.fb-field-wrapper .input-line>span{display:inline-block;vertical-align:top}.fb-field-wrapper .input-line>span input{width:100%}.fb-field-wrapper .input-line>span>label{display:block;font-size:13px;margin-left:3px}.fb-field-wrapper .help-block{display:block;font-size:12px;margin-top:5px}.fb-edit-field-wrapper{font-size:13px}.fb-edit-field-wrapper .fb-field-label{font-weight:400;background:#eee;padding:.75em;color:#666;font-size:1.25em}.fb-edit-field-wrapper .fb-field-label .type{margin-top:.5em;display:block;font-family:'Source Sans Pro',sans-serif;font-size:1em}.fb-edit-field-wrapper .fb-field-label .type:before{content:'Type: ';color:#999}.fb-edit-field-wrapper .fb-field-label .fa.fa-arrow-right{display:none}.fb-edit-field-wrapper .fb-edit-section-header{border-bottom:1px solid #ddd;margin-top:25px;margin-bottom:10px;padding-bottom:5px;clear:both;font-weight:700}.fb-edit-field-wrapper .js-add-option,.fb-edit-field-wrapper .js-remove-option{padding:3px 6px}.fb-edit-field-wrapper .fb-bottom-add{margin-top:8px}.fb-common-wrapper .fb-label-description{margin-bottom:10px}.fb-common-wrapper .fb-label-description input,.fb-common-wrapper .fb-label-description textarea{width:100%}.fb-common-wrapper .fb-label-description textarea{min-height:5em}.option-score-input{width:50px}.option-label-input{width:170px}.response-field-draggable-helper{border:1px dashed #ddd;background:#eee}.response-field-text input.rf-size-medium{width:300px}.response-field-text input.rf-size-large{width:100%}.response-field-textarea textarea.rf-size-small{width:200px;min-height:60px}.response-field-textarea textarea.rf-size-medium{width:400px;min-height:100px}.response-field-textarea textarea.rf-size-large{width:100%;min-height:200px}.response-field-address .street{width:400px}.response-field-address .city,.response-field-address .state,.response-field-address .zip,.response-field-address .country{width:198px}.response-field-date .month,.response-field-date .day,.response-field-date .year{width:50px}.response-field-time .hours,.response-field-time .minutes,.response-field-time .seconds{width:50px}.response-field-checkboxes .fb-option,.response-field-radio .fb-option{margin-bottom:5px;display:inline-block}.response-field-website input{width:200px}.response-field-signature .fb-signature{width:300px;height:150px}.response-field-signature .fb-signature-placeholder{color:#aaa}.response-field-grid .cover{display:none}.response-field-table{width:100%}.response-field-table .cover{display:none}.response-field-table .section-name{display:inline-block}.response-field-table .element-selector{margin:0 5px;float:right;position:absolute;right:5px;top:5px}.response-field-table tr{vertical-align:top}.response-field-table table{margin-bottom:30px}.response-field-table table td{padding:10px 10px 0}.response-field-table table td label{border:0!important}.response-field-table table .calculated{font-style:italic;color:#ccc}.response-field-table table select,.response-field-table table input[type=text],.response-field-table table textarea,.response-field-table table .fb-signature{width:100%}.fb-options-per-row-1:before{content:" ";display:table}.fb-options-per-row-1:after{content:" ";display:table;clear:both}.fb-options-per-row-1{clear:both}.fb-options-per-row-1 .fb-option-wrapper{width:100%}.fb-options-per-row-2:before{content:" ";display:table}.fb-options-per-row-2:after{content:" ";display:table;clear:both}.fb-options-per-row-2{clear:both}.fb-options-per-row-2 .fb-option-wrapper{width:50%}.fb-options-per-row-3:before{content:" ";display:table}.fb-options-per-row-3:after{content:" ";display:table;clear:both}.fb-options-per-row-3{clear:both}.fb-options-per-row-3 .fb-option-wrapper{width:33.333333333333336%}.fb-options-per-row-4:before{content:" ";display:table}.fb-options-per-row-4:after{content:" ";display:table;clear:both}.fb-options-per-row-4{clear:both}.fb-options-per-row-4 .fb-option-wrapper{width:25%}.fb-options-per-row-5:before{content:" ";display:table}.fb-options-per-row-5:after{content:" ";display:table;clear:both}.fb-options-per-row-5{clear:both}.fb-options-per-row-5 .fb-option-wrapper{width:20%}.fb-options-per-row-6:before{content:" ";display:table}.fb-options-per-row-6:after{content:" ";display:table;clear:both}.fb-options-per-row-6{clear:both}.fb-options-per-row-6 .fb-option-wrapper{width:16.666666666666668%}.fb-options-per-row-7:before{content:" ";display:table}.fb-options-per-row-7:after{content:" ";display:table;clear:both}.fb-options-per-row-7{clear:both}.fb-options-per-row-7 .fb-option-wrapper{width:14.285714285714286%}.fb-options-per-row-8:before{content:" ";display:table}.fb-options-per-row-8:after{content:" ";display:table;clear:both}.fb-options-per-row-8{clear:both}.fb-options-per-row-8 .fb-option-wrapper{width:12.5%}.fb-options-per-row-9:before{content:" ";display:table}.fb-options-per-row-9:after{content:" ";display:table;clear:both}.fb-options-per-row-9{clear:both}.fb-options-per-row-9 .fb-option-wrapper{width:11.11111111111111%}.fb-options-per-row-10:before{content:" ";display:table}.fb-options-per-row-10:after{content:" ";display:table;clear:both}.fb-options-per-row-10{clear:both}.fb-options-per-row-10 .fb-option-wrapper{width:10%}.fb-options-per-row-11:before{content:" ";display:table}.fb-options-per-row-11:after{content:" ";display:table;clear:both}.fb-options-per-row-11{clear:both}.fb-options-per-row-11 .fb-option-wrapper{width:9.090909090909092%}.fb-options-per-row-12:before{content:" ";display:table}.fb-options-per-row-12:after{content:" ";display:table;clear:both}.fb-options-per-row-12{clear:both}.fb-options-per-row-12 .fb-option-wrapper{width:8.333333333333334%}.fb-options-per-row-13:before{content:" ";display:table}.fb-options-per-row-13:after{content:" ";display:table;clear:both}.fb-options-per-row-13{clear:both}.fb-options-per-row-13 .fb-option-wrapper{width:7.6923076923076925%}.fb-options-per-row-14:before{content:" ";display:table}.fb-options-per-row-14:after{content:" ";display:table;clear:both}.fb-options-per-row-14{clear:both}.fb-options-per-row-14 .fb-option-wrapper{width:7.142857142857143%}.fb-options-per-row-15:before{content:" ";display:table}.fb-options-per-row-15:after{content:" ";display:table;clear:both}.fb-options-per-row-15{clear:both}.fb-options-per-row-15 .fb-option-wrapper{width:6.666666666666667%}.response-field-grid-table{border-collapse:collapse;border-spacing:0;margin-bottom:5px;table-layout:fixed;width:100%}.response-field-grid-table .response-field-grid-row{height:100px;vertical-align:top}.response-field-grid-table td{padding:10px 10px 0}.response-field-grid-table .element-selector{width:100%}.response-field-grid-table .element-selector .dropdown-toggle{width:100%}.response-field-grid-table .element-selector .dropdown-toggle span{font-size:2em}.response-field-grid-table .response-field-grid-cell{padding:10px 10px 0;border:1px dashed #ddd;background-color:rgba(255,255,255,.8)}.response-field-grid-table .response-field-grid-cell .cover{display:block}.response-field-grid-table .response-field-grid-cell .response-field-selector{margin:.5em}.response-field-grid-table .response-field-grid-cell .subtemplate-wrapper>label{display:none}.response-field-grid-table .response-field-grid-cell .help-block{display:none}.response-field-grid-table .response-field-grid-cell select,.response-field-grid-table .response-field-grid-cell input[type=text],.response-field-grid-table .response-field-grid-cell textarea,.response-field-grid-table .response-field-grid-cell .fb-signature{width:100%} \ No newline at end of file diff --git a/dist/formbuilder-min.js b/dist/formbuilder-min.js index cb44897a..7d12041e 100644 --- a/dist/formbuilder-min.js +++ b/dist/formbuilder-min.js @@ -1 +1,3 @@ -(function(){rivets.binders.input={publishes:!0,routine:rivets.binders.value.routine,bind:function(a){return a.addEventListener("input",this.publish)},unbind:function(a){return a.removeEventListener("input",this.publish)}},rivets.configure({prefix:"rv",adapter:{subscribe:function(a,b,c){return c.wrapped=function(a,b){return c(b)},a.on("change:"+b,c.wrapped)},unsubscribe:function(a,b,c){return a.off("change:"+b,c.wrapped)},read:function(a,b){return"cid"===b?a.cid:a.get(b)},publish:function(a,b,c){return a.cid?a.set(b,c):a[b]=c}}})}).call(this),function(){var a,b,c,d,e,f,g,h,i,j,k,l={}.hasOwnProperty,m=function(a,b){function c(){this.constructor=a}for(var d in b)l.call(b,d)&&(a[d]=b[d]);return c.prototype=b.prototype,a.prototype=new c,a.__super__=b.prototype,a};e=function(a){function b(){return g=b.__super__.constructor.apply(this,arguments)}return m(b,a),b.prototype.sync=function(){},b.prototype.indexInDOM=function(){var a,b=this;return a=$(".fb-field-wrapper").filter(function(a,c){return $(c).data("cid")===b.cid}),$(".fb-field-wrapper").index(a)},b.prototype.is_input=function(){return null!=c.inputFields[this.get(c.options.mappings.FIELD_TYPE)]},b}(Backbone.DeepModel),d=function(a){function b(){return h=b.__super__.constructor.apply(this,arguments)}return m(b,a),b.prototype.initialize=function(){return this.on("add",this.copyCidToModel)},b.prototype.model=e,b.prototype.comparator=function(a){return a.indexInDOM()},b.prototype.copyCidToModel=function(a){return a.attributes.cid=a.cid},b}(Backbone.Collection),f=function(a){function b(){return i=b.__super__.constructor.apply(this,arguments)}return m(b,a),b.prototype.className="fb-field-wrapper",b.prototype.events={"click .subtemplate-wrapper":"focusEditView","click .js-duplicate":"duplicate","click .js-clear":"clear"},b.prototype.initialize=function(a){return this.parentView=a.parentView,this.listenTo(this.model,"change",this.render),this.listenTo(this.model,"destroy",this.remove)},b.prototype.render=function(){return this.$el.addClass("response-field-"+this.model.get(c.options.mappings.FIELD_TYPE)).data("cid",this.model.cid).html(c.templates["view/base"+(this.model.is_input()?"":"_non_input")]({rf:this.model})),this},b.prototype.focusEditView=function(){return this.parentView.createAndShowEditView(this.model)},b.prototype.clear=function(){return this.parentView.handleFormUpdate(),this.model.destroy()},b.prototype.duplicate=function(){var a;return a=_.clone(this.model.attributes),delete a.id,a.label+=" Copy",this.parentView.createField(a,{position:this.model.indexInDOM()+1})},b}(Backbone.View),b=function(a){function b(){return j=b.__super__.constructor.apply(this,arguments)}return m(b,a),b.prototype.className="edit-response-field",b.prototype.events={"click .js-add-option":"addOption","click .js-remove-option":"removeOption","click .js-default-updated":"defaultUpdated","input .option-label-input":"forceRender"},b.prototype.initialize=function(a){return this.parentView=a.parentView,this.listenTo(this.model,"destroy",this.remove)},b.prototype.render=function(){return this.$el.html(c.templates["edit/base"+(this.model.is_input()?"":"_non_input")]({rf:this.model})),rivets.bind(this.$el,{model:this.model}),this},b.prototype.remove=function(){return this.parentView.editView=void 0,this.parentView.$el.find('[data-target="#addField"]').click(),b.__super__.remove.apply(this,arguments)},b.prototype.addOption=function(a){var b,d,e,f;return b=$(a.currentTarget),d=this.$el.find(".option").index(b.closest(".option")),f=this.model.get(c.options.mappings.OPTIONS)||[],e={label:"",checked:!1},d>-1?f.splice(d+1,0,e):f.push(e),this.model.set(c.options.mappings.OPTIONS,f),this.model.trigger("change:"+c.options.mappings.OPTIONS),this.forceRender()},b.prototype.removeOption=function(a){var b,d,e;return b=$(a.currentTarget),d=this.$el.find(".js-remove-option").index(b),e=this.model.get(c.options.mappings.OPTIONS),e.splice(d,1),this.model.set(c.options.mappings.OPTIONS,e),this.model.trigger("change:"+c.options.mappings.OPTIONS),this.forceRender()},b.prototype.defaultUpdated=function(a){var b;return b=$(a.currentTarget),"checkboxes"!==this.model.get(c.options.mappings.FIELD_TYPE)&&this.$el.find(".js-default-updated").not(b).attr("checked",!1).trigger("change"),this.forceRender()},b.prototype.forceRender=function(){return this.model.trigger("change")},b}(Backbone.View),a=function(a){function e(){return k=e.__super__.constructor.apply(this,arguments)}return m(e,a),e.prototype.SUBVIEWS=[],e.prototype.events={"click .js-save-form":"saveForm","click .fb-tabs a":"showTab","click .fb-add-field-types a":"addField"},e.prototype.initialize=function(a){var b;return b=a.selector,this.formBuilder=a.formBuilder,this.bootstrapData=a.bootstrapData,null!=b&&this.setElement($(b)),this.collection=new d,this.collection.bind("add",this.addOne,this),this.collection.bind("reset",this.reset,this),this.collection.bind("change",this.handleFormUpdate,this),this.collection.bind("destroy add reset",this.hideShowNoResponseFields,this),this.collection.bind("destroy",this.ensureEditViewScrolled,this),this.render(),this.collection.reset(this.bootstrapData),this.initAutosave()},e.prototype.initAutosave=function(){var a=this;return this.formSaved=!0,this.saveFormButton=this.$el.find(".js-save-form"),this.saveFormButton.attr("disabled",!0).text(c.options.dict.ALL_CHANGES_SAVED),setInterval(function(){return a.saveForm.call(a)},5e3),$(window).bind("beforeunload",function(){return a.formSaved?void 0:c.options.dict.UNSAVED_CHANGES})},e.prototype.reset=function(){return this.$responseFields.html(""),this.addAll()},e.prototype.render=function(){var a,b,d,e;for(this.$el.html(c.templates.page()),this.$fbLeft=this.$el.find(".fb-left"),this.$responseFields=this.$el.find(".fb-response-fields"),this.bindWindowScrollEvent(),this.hideShowNoResponseFields(),e=this.SUBVIEWS,b=0,d=e.length;d>b;b++)a=e[b],new a({parentView:this}).render();return this},e.prototype.bindWindowScrollEvent=function(){var a=this;return $(window).on("scroll",function(){var b,c;if(a.$fbLeft.data("locked")!==!0)return c=Math.max(0,$(window).scrollTop()),b=a.$responseFields.height(),a.$fbLeft.css({"margin-top":Math.min(b,c)})})},e.prototype.showTab=function(a){var b,c,d;return b=$(a.currentTarget),d=b.data("target"),b.closest("li").addClass("active").siblings("li").removeClass("active"),$(d).addClass("active").siblings(".fb-tab-pane").removeClass("active"),"#editField"!==d&&this.unlockLeftWrapper(),"#editField"===d&&!this.editView&&(c=this.collection.models[0])?this.createAndShowEditView(c):void 0},e.prototype.addOne=function(a,b,c){var d,e;return e=new f({model:a,parentView:this}),null!=c.$replaceEl?c.$replaceEl.replaceWith(e.render().el):null==c.position||-1===c.position?this.$responseFields.append(e.render().el):0===c.position?this.$responseFields.prepend(e.render().el):(d=this.$responseFields.find(".fb-field-wrapper").eq(c.position))[0]?d.before(e.render().el):this.$responseFields.append(e.render().el)},e.prototype.setSortable=function(){var a=this;return this.$responseFields.hasClass("ui-sortable")&&this.$responseFields.sortable("destroy"),this.$responseFields.sortable({forcePlaceholderSize:!0,placeholder:"sortable-placeholder",stop:function(b,d){var e;return d.item.data("field-type")&&(e=a.collection.create(c.helpers.defaultFieldAttrs(d.item.data("field-type")),{$replaceEl:d.item}),a.createAndShowEditView(e)),a.handleFormUpdate(),!0},update:function(b,c){return c.item.data("field-type")?void 0:a.ensureEditViewScrolled()}}),this.setDraggable()},e.prototype.setDraggable=function(){var a,b=this;return a=this.$el.find("[data-field-type]"),a.draggable({connectToSortable:this.$responseFields,helper:function(){var a;return a=$(""),a.css({width:b.$responseFields.width(),height:"80px"}),a}})},e.prototype.addAll=function(){return this.collection.each(this.addOne,this),this.setSortable()},e.prototype.hideShowNoResponseFields=function(){return this.$el.find(".fb-no-response-fields")[this.collection.length>0?"hide":"show"]()},e.prototype.addField=function(a){var b;return b=$(a.currentTarget).data("field-type"),this.createField(c.helpers.defaultFieldAttrs(b))},e.prototype.createField=function(a,b){var c;return c=this.collection.create(a,b),this.createAndShowEditView(c),this.handleFormUpdate()},e.prototype.createAndShowEditView=function(a){var c,d,e;if(d=this.$el.find(".fb-field-wrapper").filter(function(){return $(this).data("cid")===a.cid}),d.addClass("editing").siblings(".fb-field-wrapper").removeClass("editing"),this.editView){if(this.editView.model.cid===a.cid)return this.$el.find('.fb-tabs a[data-target="#editField"]').click(),this.scrollLeftWrapper(d,"undefined"!=typeof e&&null!==e&&e),void 0;e=this.$fbLeft.css("padding-top"),this.editView.remove()}return this.editView=new b({model:a,parentView:this}),c=this.editView.render().$el,this.$el.find(".fb-edit-field-wrapper").html(c),this.$el.find('.fb-tabs a[data-target="#editField"]').click(),this.scrollLeftWrapper(d),this},e.prototype.ensureEditViewScrolled=function(){return this.editView?this.scrollLeftWrapper($(".fb-field-wrapper.editing")):void 0},e.prototype.scrollLeftWrapper=function(a){var b=this;return this.unlockLeftWrapper(),a[0]?$.scrollWindowTo(a.offset().top-this.$responseFields.offset().top,200,function(){return b.lockLeftWrapper()}):void 0},e.prototype.lockLeftWrapper=function(){return this.$fbLeft.data("locked",!0)},e.prototype.unlockLeftWrapper=function(){return this.$fbLeft.data("locked",!1)},e.prototype.handleFormUpdate=function(){return this.updatingBatch?void 0:(this.formSaved=!1,this.saveFormButton.removeAttr("disabled").text(c.options.dict.SAVE_FORM))},e.prototype.saveForm=function(){var a;if(!this.formSaved)return this.formSaved=!0,this.saveFormButton.attr("disabled",!0).text(c.options.dict.ALL_CHANGES_SAVED),this.collection.sort(),a=JSON.stringify({fields:this.collection.toJSON()}),c.options.HTTP_ENDPOINT&&this.doAjaxSave(a),this.formBuilder.trigger("save",a)},e.prototype.doAjaxSave=function(a){var b=this;return $.ajax({url:c.options.HTTP_ENDPOINT,type:c.options.HTTP_METHOD,data:a,contentType:"application/json",success:function(a){var c,d,e,f;for(b.updatingBatch=!0,d=0,e=a.length;e>d;d++)c=a[d],null!=(f=b.collection.get(c.cid))&&f.set({id:c.id}),b.collection.trigger("sync");return b.updatingBatch=void 0}})},e}(Backbone.View),c=function(){function b(b){var c;null==b&&(b={}),_.extend(this,Backbone.Events),c=_.extend(b,{formBuilder:this}),this.mainView=new a(c)}return b.helpers={defaultFieldAttrs:function(a){var c,d;return c={label:"Untitled",field_type:a,required:!0,field_options:{}},("function"==typeof(d=b.fields[a]).defaultAttributes?d.defaultAttributes(c):void 0)||c},simple_format:function(a){return null!=a?a.replace(/\n/g,"<%= rf.get(Formbuilder.options.mappings.DESCRIPTION) %>
",edit:"\n \n<%= rf.get(Formbuilder.options.mappings.DESCRIPTION) %>
",edit:'<%= rf.get(Formbuilder.options.mappings.DESCRIPTION) %>
",edit:'<%= rf.get(Formbuilder.options.mappings.DESCRIPTION) %>
",edit:'<%= rf.get(Formbuilder.options.mappings.DESCRIPTION) %>
",edit:"\n \n| \n ';__p+="\n |
| \n ';__p+="\n |
| \n ';__p+="\n |
<%- rf.get(Formbuilder.options.mappings.DESCRIPTION) %>
", + edit: "<%= rf.get(Formbuilder.options.mappings.DESCRIPTION) %>
", + edit: "<%- rf.get(Formbuilder.options.mappings.DESCRIPTION) %>
", + edit: "<%= rf.get(Formbuilder.options.mappings.DESCRIPTION) %>
", - edit: "<%- rf.get(Formbuilder.options.mappings.DESCRIPTION) %>
", + edit: "\n \n\n \n\n';
}
return __p
@@ -868,9 +2329,9 @@ obj || (obj = {});
var __t, __p = '', __e = _.escape;
with (obj) {
__p +=
-((__t = ( Formbuilder.templates['edit/base_header']() )) == null ? '' : __t) +
+((__t = ( Formbuilder.templates['edit/base_header']({rf: rf}) )) == null ? '' : __t) +
'\n' +
-((__t = ( Formbuilder.fields[rf.get(Formbuilder.options.mappings.FIELD_TYPE)].edit({rf: rf}) )) == null ? '' : __t) +
+((__t = ( Formbuilder.fields[rf.get(Formbuilder.options.mappings.TYPE)].edit({rf: rf}) )) == null ? '' : __t) +
'\n';
}
@@ -881,25 +2342,178 @@ this["Formbuilder"]["templates"]["edit/checkboxes"] = function(obj) {
obj || (obj = {});
var __t, __p = '', __e = _.escape;
with (obj) {
-__p += '\n';
+'\' />\n Required\n\n';
}
return __p
};
-this["Formbuilder"]["templates"]["edit/common"] = function(obj) {
+this["Formbuilder"]["templates"]["edit/columnwidth"] = function(obj) {
obj || (obj = {});
var __t, __p = '', __e = _.escape;
with (obj) {
-__p += '