Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Select Option for Label #378

Merged
merged 8 commits into from
Mar 4, 2024
Merged

Add Select Option for Label #378

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
31cdb8c
Add multiselect option for labels
burhandodhy Feb 13, 2024
8ef1849
Add select field
burhandodhy Feb 28, 2024
c803f10
Cleanup
burhandodhy Feb 28, 2024
f35d5d3
Cleanup
burhandodhy Feb 28, 2024
3d57820
Cleanup
burhandodhy Feb 28, 2024
8302496
Fix style
burhandodhy Feb 28, 2024
2427833
Adjust feedback
burhandodhy Feb 28, 2024
82910a2
Merge branch 'develop' into fix/labels-issue
burhandodhy Mar 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 49 additions & 83 deletions assets/js/src/views/video-edit.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading