Skip to content

Commit

Permalink
Add Select Option for Label (#378)
Browse files Browse the repository at this point in the history
  • Loading branch information
@burhandodhy
burhandodhy authored Mar 4, 2024
1 parent 16a58aa commit e4cf3cf
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 113 deletions.
132 changes: 49 additions & 83 deletions assets/js/src/views/video-edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,8 @@ var VideoEditView = BrightcoveView.extend({
'click .caption-secondary-fields .delete': 'removeCaptionRow',
'click .add-remote-caption': 'addCaptionRow',
'change .brightcove-variant': 'changeVariant',
'click .add-bc-label': 'addLabelRow',
'keypress .brightcove-labels': 'labelAutocomplete',
'click .bc-label-secondary-fields .delete': 'removeLabelRow',
'click .bc-labels-list .remove-label': 'removeLabel',
'click .bc-add-label': 'addLabel',
},

/**
Expand Down Expand Up @@ -177,75 +176,6 @@ var VideoEditView = BrightcoveView.extend({
image.empty();
},

/**
* Add a label row
*
* @param {Event} evnt
* @param {Object} media
*/
addLabelRow: function (evnt, media) {
var source = undefined;
if (media) {
source = media.url;
}

this.addLabel(source);
},

/**
* Adds a label
*
* @param source
* @param language
* @param label
* @param defaultcap
*/
addLabel: function (source, language, label, defaultcap) {
let newRow = $(document.getElementById('js-bc-label-empty-row')).clone(),
container = document.getElementById('js-bc-labels');

// Clean up our cloned row
newRow.find('input').prop('disabled', false).val('');
newRow.removeAttr('id');
newRow.removeClass('empty-row');

// Append our new row to the container
$(container).append(newRow);
},

/**
* Fires the autocomplete function
*
* @param {Event} evnt
*/
labelAutocomplete: function (evnt) {
jQuery('.brightcove-labels').autocomplete({
source: wpbc.preload.labels,
select: function () {
$(this).parent('.bc-label-repeater.empty-row').removeClass('empty-row');
},
appendTo: '.media-modal',
});
},

/**
* Removes a label row
* @param {Event} evnt
*/
removeLabelRow: function (evnt) {
evnt.preventDefault();

let label = evnt.currentTarget,
container = $(label).parents('.bc-label-repeater'),
source = container.find('.brightcove-labels');

// Empty the input fields
$(source).val('');

// Remove the container entirely
container.remove();
},

/**
* Add a caption row
*
Expand Down Expand Up @@ -455,17 +385,7 @@ var VideoEditView = BrightcoveView.extend({
this.model.set('captions', captions);

// Labels
var labels = [];
this.$el
.find('.bc-label-repeater.repeater-row')
.not('.empty-row')
.each(function () {
var label = $(this),
Name = label.find('.brightcove-labels').val();

labels.push(Name);
});

const labels = this.$el.find('.bc-labels-value').val()?.split(',') || [];
this.model.set('labels', labels);

// Custom fields
Expand Down Expand Up @@ -569,6 +489,52 @@ var VideoEditView = BrightcoveView.extend({
this.model.set('custom', custom);
},

/**
* Adds a label.
* @param {Event} event
*/
addLabel: function (event) {
event.preventDefault();

const elem = this.el.querySelector('.brightcove-labels');
const labelsValElem = this.el.querySelector('.bc-labels-value');
const value = elem.value;

elem.querySelector('option[value="' + value + '"]').setAttribute('disabled', true);
elem.selectedIndex = 0;

const listItem = `<li>
<button class="remove-label" aria-label="Remove label: ${value}" data-label="${value}"><span aria-hidden="true">×</span></button>
<span class="label-name">${value}</span>
</li>`;

this.el.querySelector('.bc-labels-list').insertAdjacentHTML('beforeend', listItem);

labelsValElem.value = labelsValElem.value ? labelsValElem.value + ',' + value : value;
},

/**
* Removes a label.
* @param {Event} event
*/
removeLabel: function (event) {
event.preventDefault();

const label = event.currentTarget.dataset.label;
const labelsValElem = this.el.querySelector('.bc-labels-value');
const labelElem = this.el.querySelector('.brightcove-labels');
const selectedLabels = labelsValElem.value.split(',');

var index = selectedLabels.indexOf(label);
if (index > -1) {
selectedLabels.splice(index, 1);
}

labelsValElem.value = selectedLabels.join(',');
labelElem.querySelector('option[value="' + label + '"]').removeAttribute('disabled');
event.currentTarget.parentElement.remove();
},

/**
* Render the actual view for the Video Edit screen.
*
Expand Down
44 changes: 40 additions & 4 deletions assets/scss/components/_video-edit.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
.image-preview,
.setting {
margin-bottom: 8px;
.description{
.description {
margin-left: 0px;
@media screen and (min-width: 900px) {
margin-left: 252px;
Expand Down Expand Up @@ -135,16 +135,52 @@
}

span,
input[type="text"],
input[type='text'],
select {
margin: 0;
min-width: 100%;
text-align: left;
width: 100%;
}
input[type="checkbox"] {
input[type='checkbox'] {
margin: auto;
}
}
}
}

& .bc-labels-list {
margin: 0;
text-align: left;

& li {
background-color: #fff;
border-radius: 4px;
border: 1px solid #8c8f94;
display: inline-block;
margin: 0 10px 10px 0;
white-space: nowrap;
}

& button {
background-color: #f6f7f7;
border-bottom-left-radius: 4px;
border-right: 1px solid #8c8f94;
border-top-left-radius: 4px;
border: none;
cursor: pointer;
padding: 10px;
}

& span {
float: none;
}

& .label-name {
padding: 10px;
}
}

& .add-labels-container select {
margin-left: 0;
}
}
46 changes: 21 additions & 25 deletions includes/admin/class-bc-templates.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -259,34 +259,30 @@ class="brightcove-datetime brightcove-end-date"
<div class="setting labels">
<span class="name"><?php esc_html_e( 'Labels', 'brightcove' ); ?></span>
<div class="setting-content">
<div>
<button class="button-secondary add-bc-label">
<div class="bc-labels-container">
<input type="hidden" class="bc-labels-value" value="{{data.labels}}">
<ul class="bc-labels-list">
<# _.each( data.labels, function( label ) { #>
<li>
<button class="remove-label" aria-label="<?php esc_html_e( 'Remove label: ', 'brightcove' ); ?>{{label}}" data-label="{{label}}"><span aria-hidden="true">×</span></button>
<span class="label-name">{{label}}</span>
</li>
<# }); #>
</ul>
<div class="add-labels-container">
<select class="brightcove-labels" name="labels" aria-label="<?php esc_html_e( 'Select Label', 'brightcove' ); ?>">
<option><?php esc_html_e( 'Select Label', 'brightcove' ); ?></option>
<# _.each( wpbc.preload.labels, function( label ) { #>
<option
<# if ( (data.labels)?.includes(label) ) { #>disabled<# } #>
value="{{label}}">{{label}}
</option>
<# }); #>
</select>
<button class="button-secondary bc-add-label">
<?php esc_html_e( 'Add Label', 'brightcove' ); ?>
</button>
<a class="button-secondary" href="<?php echo esc_url( admin_url() . 'admin.php?page=brightcove-labels' ); ?>">
<?php esc_html_e( 'Create New Label', 'brightcove' ); ?>
</a>
</div>
<div id="js-bc-labels">
<# _.each( data.labels, function( label ) { #>
<div id="js-caption-fields" class="bc-label-repeater repeater-row">
<input type="text" class="brightcove-labels" value="{{label}}">

<div class="bc-label-secondary-fields">
<div class="action-row">
<a href="#" class="delete"><?php esc_html_e( 'Remove Label', 'brightcove' ); ?></a>
</div>
</div>
</div>
<# }); #>
<div id="js-bc-label-empty-row" class="bc-label-repeater repeater-row empty-row">
<input id="" type="text" class="brightcove-labels" value=""/>
<div class="bc-label-secondary-fields">
<div class="action-row">
<a href="#" class="delete"><?php esc_html_e( 'Remove Label', 'brightcove' ); ?></a>
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down
1 change: 0 additions & 1 deletion includes/class-bc-setup.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -390,7 +390,6 @@ public static function brightcove_enqueue_assets() {
);

$dependencies = array(
'jquery-ui-autocomplete',
'jquery',
'backbone',
'wp-backbone',
Expand Down

0 comments on commit e4cf3cf

Please sign in to comment.