Skip to content

Commit

Permalink
Updated Audio and Program Audio embed modals
Browse files Browse the repository at this point in the history 
Issue #345
- Updated genericEmbed getModelFromForm and populateFormWithModel to
handle radio and checkbox inputs
- Added explicit_content option to Audio and Program Audio embed modal
forms
- Updated Program Audio embed modal to include duration key data
  • Loading branch information
@rpeterman-gp
rpeterman-gp committed May 16, 2017
1 parent 8db033f commit ece0cd2
Show file tree
Hide file tree
Showing 6 changed files with 208 additions and 60 deletions.
8 changes: 8 additions & 0 deletions src/contents/less/modal.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,14 @@
.embed-modal-form-control
{
.form-control();

&[type="radio"],
&[type="checkbox"]
{
display: inline;
width: auto;
height: auto;
}
}

textarea.embed-modal-form-control
Expand Down
14 changes: 14 additions & 0 deletions src/html/modal/modal_audio.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
</div>
</div>
</div>

<div class="embed-modal-row">
<div class="embed-modal-full-column">
<div class="embed-modal-form">
Expand All @@ -58,6 +59,7 @@
</div>
</div>
</div>

<div class="embed-modal-row">
<div id="audio-credits" class="embed-modal-form">
<div class="embed-modal-half-column">
Expand All @@ -74,4 +76,16 @@
</div>
</div>
</div>

<div class="embed-modal-row">
<div class="embed-modal-full-column">
<div class="embed-modal-form">
<label class="embed-modal-label" for="explicit_content">Is the content explicit?</label>
<div>
<label class="radio-inline"><input type="radio" name="explicit_content" class="embed-modal-form-control" value="0" checked>Non-explicit</label>
<label class="radio-inline"><input type="radio" name="explicit_content" class="embed-modal-form-control" value="1">Explicit</label>
</div>
</div>
</div>
</div>
</form>
39 changes: 25 additions & 14 deletions src/html/modal/modal_audioProgram.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,24 +59,35 @@
<input name="title" type="text" placeholder="Enter a title" class="embed-modal-input embed-modal-form-control" />
</div>
</div>
</div>
</div>

<div class="embed-modal-row">
<div class="embed-modal-form">
<div class="embed-modal-half-column">
<div class="embed-modal-form">
<label for="organization_program" class="embed-modal-label">Program</label>
<input id="organization_program" name="organization_program" class="embed-modal-form-control embed-modal-input js-program" type="text" placeholder="Begin typing a Program title..." />
</div>
<div class="embed-modal-half-column">
<div class="embed-modal-form">
<label for="organization_program" class="embed-modal-label">Program</label>
<input id="organization_program" name="organization_program" class="embed-modal-form-control embed-modal-input js-program" type="text" placeholder="Begin typing a Program title..." />
</div>
</div>
<div class="embed-modal-half-column">
<div class="embed-modal-form">
<label for="audio_type" class="embed-modal-label">Audio Type</label>
<select id="audio_type" class="embed-modal-form-control embed-modal-input" name="audio_type">
<option value="">-- Select Type --</option>
<option value="episode">Episode</option>
<option value="segment">Segment</option>
</select>
</div>
<div class="embed-modal-half-column">
<div class="embed-modal-form">
<label for="audio_type" class="embed-modal-label">Audio Type</label>
<select id="audio_type" class="embed-modal-form-control embed-modal-input" name="audio_type">
<option value="">-- Select Type --</option>
<option value="episode">Episode</option>
<option value="segment">Segment</option>
</select>
</div>
</div>

<div class="embed-modal-row">
<div class="embed-modal-full-column">
<div class="embed-modal-form">
<label class="embed-modal-label" for="explicit_content">Is the content explicit?</label>
<div>
<label class="radio-inline"><input type="radio" name="explicit_content" class="embed-modal-form-control" value="0" checked>Non-explicit</label>
<label class="radio-inline"><input type="radio" name="explicit_content" class="embed-modal-form-control" value="1">Explicit</label>
</div>
</div>
</div>
Expand Down
13 changes: 7 additions & 6 deletions src/js/embeds/audioEmbed.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,8 @@ var EntityEmbed = EntityEmbed || {};
url_external: null,
credit: null,
creditLink: null,
object_type: defaults.object_type
object_type: defaults.object_type,
explicit_content: 0
};
};

Expand Down Expand Up @@ -390,6 +391,11 @@ var EntityEmbed = EntityEmbed || {};

self.parent.getModelFromForm($form, self);

if(!!oldModel.upload && !self.model.upload)
{
self.model.upload = oldModel.upload;
}

if(!!self.model.url_external) {
// Make sure local file data is removed when external URL is provided.
// Need to do this here since the modal can be completed without the "Listen" btn being clicked.
Expand All @@ -398,11 +404,6 @@ var EntityEmbed = EntityEmbed || {};
delete self.model.url_path;
}

if(!!oldModel.upload && !self.model.upload)
{
self.model.upload = oldModel.upload;
}

if(!duration)
{
$ui.previewAudio.on('loadedmetadata', onLoadedMetadata);
Expand Down
35 changes: 28 additions & 7 deletions src/js/embeds/audioProgramEmbed.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -326,7 +326,8 @@ var EntityEmbed = EntityEmbed || {};
url_external: null,
organization_program: null,
audio_type: null,
object_type: defaults.object_type
object_type: defaults.object_type,
explicit_content: 0
};
};

Expand Down Expand Up @@ -497,10 +498,26 @@ var EntityEmbed = EntityEmbed || {};

audioProgramEmbed.prototype.getModelFromForm = function($form){
var self = this;
var $ui = self.$ui;
var duration = $ui.previewAudio[0].duration;
var oldModel = $.extend(true, {}, self.model);
var promise = $.Deferred();

function onLoadedMetadata() {
$ui.previewAudio.off('loadedmetadata', onLoadedMetadata);
self.model.duration = this.duration;
promise.resolve();
}

self.parent.getModelFromForm($form, self);

self.model.organization_program = self.$ui.programInput.data('organization_program');

if(!!oldModel.upload && !self.model.upload)
{
self.model.upload = oldModel.upload;
}

if(!!self.model.url_external) {
// Make sure local file data is removed when external URL is provided.
// Need to do this here since the modal can be completed without the "Listen" btn being clicked.
Expand All @@ -509,14 +526,18 @@ var EntityEmbed = EntityEmbed || {};
delete self.model.url_path;
}

self.model.organization_program = self.$ui.programInput.data('organization_program');

console.log('getModelFromForm', $.extend(true, {}, self.model));

if(!!oldModel.upload && !self.model.upload)
if(!duration)
{
self.model.upload = oldModel.upload;
$ui.previewAudio.on('loadedmetadata', onLoadedMetadata);
updateAudioPreview(self);
}
else
{
self.model.duration = duration;
promise.resolve();
}

return promise;
}

audioProgramEmbed.prototype.getModelFromFile = function(file){
Expand Down
159 changes: 126 additions & 33 deletions src/js/genericEmbed.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,56 +66,149 @@ var EntityEmbed = EntityEmbed || {};

genericEmbed.prototype.getModelFromForm = function($el, child){
var self = child || this;
var formFields = $el.find('.embed-modal-form-control, .embed-modal-file-input');
var $formFields = $el.find('.embed-modal-form-control, .embed-modal-file-input');
var model = {};

for(var i = 0; i < formFields.length; i++)
{
var name = formFields[i].name;
var type = formFields[i].type;
$formFields.each(function() {
var $this = $(this);
var name = $this.attr('name');
var type = $this.attr('type');
var value = null;
if (type === 'file')
var $inputGroup;

if(!name)
{
value = formFields[i].files[0];
console.warning('Form input missing "name" attribute. Value not added to model.', $this[0]);
return; // No need to gather value since we don't know where to store it.
}
else if(!!formFields[i].value.length)

switch (type)
{
value = formFields[i].value;
case 'file':
value = $this[0].files[0];
break;

case 'radio':
if(typeof model[name] !== 'undefined')
{
return; // We have already collected values for this group of radios. Skip to next input.
}

// Get all inputs for this checkbox group.
$inputGroup = $formFields.filter('[type=radio][name=' + name +']');

// Set value to value of checked input in group
$inputGroup.each(function() {
var $this = $(this);
if($this.is(':checked'))
{
value = $this.val();
return false; // Exit loop. Only one radio in a group should be checked anyway.
}
});
break;

case 'checkbox':
if(typeof model[name] !== 'undefined')
{
return; // We have already collected values for this group of checkboxes. Skip to next input.
}

// Get all inputs for this checkbox group.
$inputGroup = $formFields.filter('[type=checkbox][name=' + name +']');

if($inputGroup.length > 1)
{
// Get checked values and ensure value is either an array or null
value = [];
$inputGroup.each(function() {
var $this = $(this);
if($this.is(':checked'))
{
value.push($this.val());
}
});

if(!value.length)
{
value = null;
}
}
else
{
// Treat single checkboxes as boolean input for binary integer.
value = !!$inputGroup.is(':checked') ? 1 : 0;
}
break;

default:
value = $this.val() || null;
break;
}
if (!!name)

// Most input values will be strings, but we want to convert some values into useful types
if(typeof value === 'string')
{
self.model[name] = value;
value = !value.length ? null : // Convert empty strings to null
// Convert numeric values to numbers
// To see why this works:
// http://stackoverflow.com/questions/175739/is-there-a-built-in-way-in-javascript-to-check-if-a-string-is-a-valid-number
(+value === +value) ? +value :
// Otherwise, use original value
value;
}
}

// Add value to new model
model[name] = value;
});

// console.log('getModelFromForm', model);

// Merge new model into working model
$.extend(self.model, model);
};

genericEmbed.prototype.populateFormWithModel = function($form, child){
var self = child || this;
var formFields = $form.find('.embed-modal-form-control');
var $formFields = $form.find('.embed-modal-form-control');

for (var i = 0; i < formFields.length; i++)
{
if (!!formFields[i].type && formFields[i].type.indexOf('file') !== -1)
$formFields.each(function() {
var $this = $(this);
var name = $this.attr('name');
var type = $this.attr('type');
var value, $inputGroup;

if(!name)
{
continue;
console.warning('Form input missing "name" attribute. Value not set to input.', $this[0]);
return; // No need to set value since we don't know where to get it off the model.
}
if (!!formFields[i].type && formFields[i].type.indexOf('select') !== -1)
{
var options = $(formFields[i]).find('option');
var selectedOption = self.model[formFields[i].name];
var optionIndex = 0;
options.each(function(index){
if (this.value === selectedOption)
{
optionIndex = index;
}
});
formFields[i].selectedIndex = optionIndex;
}
else if (!!self.model[formFields[i].name])

value = self.model[name];

switch(type)
{
formFields[i].value = self.model[formFields[i].name];
case 'file':
return; // Skip file inputs. Won't have a value to set, and you can't do that anyway for security reasons.

case 'checkbox':
case 'radio':
// Concider all inputs for this input group as our element set.
$this = $formFields.filter('[type=' + type + '][name=' + name +']');
case 'select':
// Make sure we will pass an array to the .val method.
// Inputs/options with values found in the array will be checked.
// See: http://api.jquery.com/val/#val-value
if(typeof value !== 'undefined' && value.constructor !== Array)
{
value = [value];
}
break;
}
}

// Set the input's value
$this.val(value);
});
};

// TODO: Get rid of self paramater. See inherits function
Expand Down

0 comments on commit ece0cd2

Please sign in to comment.