Add toggler view others contents (#65)

* Add toggler to show/hide content of others in data view

Will try to retrieve user.id, user.name and
user.canToggleViewOthersH5PContents from H5PIntegration. If set,
allows to show/hide contents of other users using a checkbox that
uses the user parameters to set a facet on the author column.

* Add toggler to show/hide content of others in data view

Will try to retrieve user.id, user.name and
user.canToggleViewOthersH5PContents from H5PIntegration. If set,
allows to show/hide contents of other users using a checkbox that
uses the user parameters to set a facet on the author column.

* Adjust stylesheet to better match WordPress look
HFP-2862-fix-download-warning
Oliver Tacke 2019-09-30 10:36:42 +02:00 committed by Frode Petterson
parent 7d7b420b45
commit bf10430671
2 changed files with 80 additions and 2 deletions

View File

@ -53,8 +53,18 @@ var H5PDataView = (function ($) {
self.filterOn = []; self.filterOn = [];
self.facets = {}; self.facets = {};
// Index of column with author name; could be made more general by passing database column names and checking for position
self.columnIdAuthor = 2;
// Future option: Create more general solution for filter presets
if (H5PIntegration.user && parseInt(H5PIntegration.user.canToggleViewOthersH5PContents) === 1) {
self.updateTable([]);
self.filterByFacet(self.columnIdAuthor, H5PIntegration.user.id, H5PIntegration.user.name || '');
}
else {
self.loadData(); self.loadData();
} }
}
/** /**
* Load data from source URL. * Load data from source URL.
@ -151,6 +161,12 @@ var H5PDataView = (function ($) {
// Add filters // Add filters
self.addFilters(); self.addFilters();
// Add toggler for others' content
if (H5PIntegration.user && parseInt(H5PIntegration.user.canToggleViewOthersH5PContents) > 0) {
// canToggleViewOthersH5PContents = 1 is setting for only showing current user's contents
self.addOthersContentToggler(parseInt(H5PIntegration.user.canToggleViewOthersH5PContents) === 1);
}
// Add facets // Add facets
self.$facets = $('<div/>', { self.$facets = $('<div/>', {
'class': 'h5p-facet-wrapper', 'class': 'h5p-facet-wrapper',
@ -246,13 +262,17 @@ var H5PDataView = (function ($) {
appendTo: self.$facets, appendTo: self.$facets,
}) })
}; };
/** /**
* Callback for removing filter. * Callback for removing filter.
* *
* @private * @private
*/ */
var remove = function () { var remove = function () {
// Uncheck toggler for others' H5P contents
if ( self.$othersContentToggler && self.facets.hasOwnProperty( self.columnIdAuthor ) ) {
self.$othersContentToggler.prop('checked', false );
}
self.facets[col].$tag.remove(); self.facets[col].$tag.remove();
delete self.facets[col]; delete self.facets[col];
self.loadData(); self.loadData();
@ -374,5 +394,49 @@ var H5PDataView = (function ($) {
}).appendTo(self.$container); }).appendTo(self.$container);
}; };
/**
* Add toggle for others' H5P content.
* @param {boolean} [checked=false] Initial check setting.
*/
H5PDataView.prototype.addOthersContentToggler = function (checked) {
var self = this;
checked = (typeof checked === 'undefined') ? false : checked;
// Checkbox
this.$othersContentToggler = $('<input/>', {
type: 'checkbox',
'class': 'h5p-others-contents-toggler',
'id': 'h5p-others-contents-toggler',
'checked': checked,
'click': function () {
if ( this.checked ) {
// Add filter on current user
self.filterByFacet( self.columnIdAuthor, H5PIntegration.user.id, H5PIntegration.user.name );
}
else {
// Remove facet indicator and reload full data view
if ( self.facets.hasOwnProperty( self.columnIdAuthor ) && self.facets[self.columnIdAuthor].$tag ) {
self.facets[self.columnIdAuthor].$tag.remove();
}
delete self.facets[self.columnIdAuthor];
self.loadData();
}
}
});
// Label
var $label = $('<label>', {
'class': 'h5p-others-contents-toggler-label',
'text': this.l10n.showOwnContentOnly,
'for': 'h5p-others-contents-toggler'
}).prepend(this.$othersContentToggler);
$('<div>', {
'class': 'h5p-others-contents-toggler-wrapper'
}).append($label)
.appendTo(this.$container);
};
return H5PDataView; return H5PDataView;
})(H5P.jQuery); })(H5P.jQuery);

View File

@ -266,6 +266,20 @@ button.h5p-admin.disabled:hover {
display: none; display: none;
} }
.h5p-data-view .h5p-others-contents-toggler-wrapper {
float: right;
line-height: 2;
margin-right: 0.5em;
}
.h5p-data-view .h5p-others-contents-toggler-label {
font-size: 14px;
}
.h5p-data-view .h5p-others-contents-toggler {
margin-right: 0.5em;
}
.h5p-data-view th[role="button"] { .h5p-data-view th[role="button"] {
cursor: pointer; cursor: pointer;
} }