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

js/h5p-data-view.js

@@ -53,7 +53,17 @@ var H5PDataView = (function ($) {
     self.filterOn = [];
     self.facets = {};
 
-    self.loadData();
+    // 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();
+    }
   }
 
   /**
@@ -151,6 +161,12 @@ var H5PDataView = (function ($) {
       // Add filters
       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
       self.$facets = $('<div/>', {
         'class': 'h5p-facet-wrapper',
@@ -246,13 +262,17 @@ var H5PDataView = (function ($) {
         appendTo: self.$facets,
       })
     };
-
     /**
      * Callback for removing filter.
      *
      * @private
      */
     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();
       delete self.facets[col];
       self.loadData();
@@ -374,5 +394,49 @@ var H5PDataView = (function ($) {
     }).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;
 })(H5P.jQuery);

styles/h5p-admin.css

@@ -266,6 +266,20 @@ button.h5p-admin.disabled:hover {
   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"] {
   cursor: pointer;
 }