var FormView = require('ampersand-form-view') var InputView = require('ampersand-input-view') var templates = require('../templates') var ExtendedInput = InputView.extend({ template: templates.includes.formInput() }) var TextareaInput = InputView.extend({ template: templates.includes.formTextarea() }) module.exports = FormView.extend({ fields: function () { return [ new ExtendedInput({ label: 'Name', name: 'name', value: this.model && this.model.name || '', required: false, placeholder: 'Name', parent: this }), new ExtendedInput({ label: 'Image', name: 'img', value: this.model && this.model.img || '', required: false, placeholder: 'Image', parent: this }), new ExtendedInput({
var InputView = require('ampersand-input-view'); var assign = require('lodash/assign'); module.exports = InputView.extend({ bindings: assign({ 'removable': { type: 'toggle', hook: 'remove-field' } }, InputView.prototype.bindings), props: { removable: 'boolean', template: ['string'] }, events: { 'click [data-hook~=remove-field]': 'handleRemoveClick' }, handleRemoveClick: function () { this.parent.removeField(this); } });
/* global app */ var FormView = require('ampersand-form-view') var InputView = require('ampersand-input-view') var SelectView = require('ampersand-select-view') var DateView = require('ampersand-date-view') var templates = require('../templates') var options = require('../../../options') var ExtendedInput = InputView.extend({ template: templates.includes.formInput() }) module.exports = FormView.extend({ initialize: function () { var self = this if (this.model && this.model.threadKind === 'company') { _addPollFields(self) } }, fields: function () { return [ new SelectView({ template: templates.includes.formSelect(), unselectedText: 'please choose one', name: 'event', label: 'Event', parent: this, options: app.events, value: this.model && this.model.event || '', idAttribute: 'id', textAttribute: 'name',
module.exports = InputView.extend({ template: [ '<div class="field field--radio">', '<div class="radio-buttons"></div>', '<input type="hidden" data-hook="main">', '<span class="label" data-hook="label"></span>', '<div data-hook="message-container" class="message message-below message-error">', '<p data-hook="message-text"></p>', '</div>', '</div>' ].join(''), props: { buttons: 'array', extraClass: 'string' }, bindings: extend({}, InputView.prototype.bindings, { 'extraClass': { type: 'class' } }), initialize: function() { this.type = 'hidden'; InputView.prototype.initialize.apply( this ); }, render: function () { InputView.prototype.render.apply( this ); for ( var i = 0; i < this.buttons.length; i++ ){ this.renderSubview( new OneButton({ text: this.buttons[i].text, value: this.buttons[i].value, checked: this.buttons[i].checked, disabled: this.buttons[i].disabled, name: this.name + '-doNotUseDirectly', parent: this }), '.radio-buttons'); if ( this.buttons[i].checked ) { this.inputValue = this.buttons[i].value; } } }, events: extend({}, InputView.prototype.events, { 'click input[type=radio]': '_radioClickHandler' }), _radioClickHandler: function(e) { this.inputValue = e.target.value; } });
var $ = require('jquery'); var _ = require('underscore'); var InputView = require('ampersand-input-view'); ModifyingInputView = InputView.extend({ initialize : function(attr, options) { InputView.prototype.initialize.call(this, attr, options); this._derived.valid.cache = false; this.on('change:value', _.bind(this.setModelVariable, this)); }, render : function() { InputView.prototype.render.call(this); $(this.el).find('input').prop('autocomplete', 'off'); }, setModelVariable: function(model, value, options) { if(this.valid) this.model[this.name] = this.value; } }); module.exports = ModifyingInputView
var FileReaderInputView = AmpersandInputView.extend({ props: { label: [ 'string', true, 'File' ], name: [ 'string', true, 'file' ], placeholder: [ 'string', true, 'file' ], type: [ 'string', true, 'file' ], validClass: [ 'string', true, 'input-valid' ], invalidClass: [ 'string', true, 'input-invalid' ], tests: [ 'array', true, newArray ], message: [ 'string', false, '' ], template: [ 'any', false, '' ], unselectedText: 'any', // these are any so a function returning a string can be passed value: 'any' // }, initialize: function (opts) { this.callback = opts.callback || function () {}; if (typeof opts.template === 'undefined') { this.template = '<label>'+ '<span data-hook="label"></span>'+ '<input class="form-input" placeholder="file" type="file">'+ '<div data-hook="message-container" class="message message-below message-error">'+ '<p data-hook="message-text">This field is required.</p>'+ '</div>'+ '</label>'; } // // this.requiredMet = this.fieldsValid = true; AmpersandInputView.prototype.initialize.call(this); }, beforeSubmit: function () { this.shouldValidate = true; if (!this.valid) { // && !this.requiredMet) { this.message = this.requiredMessage; } }, reset: function () { this.query('input').value = ''; }, disable: function () { var disabledClass = 'input-disabled'; function hasClass(element, className) { var regex = new RegExp('(\\s|^)' + className + '(\\s|$)'); return !!element.className.match(regex); } if (!hasClass(this.el, disabledClass)) { this.el.clasName += disabledClass; this.query('input').disabled = true; } }, enable: function () { var regex = new RegExp('(\\s|^)' + 'input-disabled' + '(\\s|$)'); this.el.className = this.el.className.replace(regex, ''); this.query('input').disabled = false; }, render: function () { var self = this; AmpersandInputView.prototype.render.call(this); this.query('input').addEventListener('change', function (changeEvent) { var reader = new FileReader(); var file = changeEvent.target.files[0]; //file input in single mode, read only 1st item in files array if (file && !!file.type.match('image')) { //image: read and return metadata reader.onloadend = function () { var shadowDomImgElm = document.createElement('img'); //set temporary Shadow DOM image element src to get width/height shadowDomImgElm.src = reader.result; self.callback(self, { width: shadowDomImgElm.width, height: shadowDomImgElm.height, type: file.type, src: reader.result }); //cleanup shadowDomImgElm = undefined; }; reader.readAsDataURL(file); //read image file } else { //video: return content-type self.callback(self, { type: file.type }); } }); return this; } });
var FormView = require('ampersand-form-view'); var InputView = require('ampersand-input-view'); var ExtendedInput = InputView.extend({ template: require('../../templates/includes/formInput.hbs') }); module.exports = FormView.extend({ fields: function () { return [ new ExtendedInput({ label: 'First Name', name: 'firstName', value: this.model && this.model.firstName, placeholder: 'First Name', parent: this }), new ExtendedInput({ label: 'Last Name', name: 'lastName', value: this.model && this.model.lastName, placeholder: 'Last Name', parent: this }), new ExtendedInput({ label: 'Coolness Factor', name: 'coolnessFactor', value: this.model && this.model.coolnessFactor, type: 'number', placeholder: '8', parent: this,