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,