Jonas Kress (WMDE) has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/277204

Change subject: Refactor bootstrap table
......................................................................

Refactor bootstrap table

Use bootrap table to render table from data.

Change-Id: Ic3af5d7cb8309c5333b6e76e4ab6919426ea935c
---
M wikibase/queryService/ui/resultBrowser/TableResultBrowser.js
1 file changed, 61 insertions(+), 134 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/wikidata/query/gui 
refs/changes/04/277204/1

diff --git a/wikibase/queryService/ui/resultBrowser/TableResultBrowser.js 
b/wikibase/queryService/ui/resultBrowser/TableResultBrowser.js
index f69d1bc..12d071e 100644
--- a/wikibase/queryService/ui/resultBrowser/TableResultBrowser.js
+++ b/wikibase/queryService/ui/resultBrowser/TableResultBrowser.js
@@ -8,150 +8,33 @@
        "use strict";
 
        /**
-        * Represents a Bootstrap Table
-        *
-        * @license GNU GPL v2+
-        *
-        * @author Jonas Keinholz
-        * @constructor
-        */
-       function BootstrapTable( columns, rows, contentHelper, browser ) {
-               this.columns = columns;
-               this.rows = rows;
-
-               this.contentHelper = contentHelper;
-               this.browser = browser;
-       }
-
-       /**
-        * @param {jQuery} $wrapper
-        */
-       BootstrapTable.prototype.createTable = function ( $wrapper ) {
-               this.$table = $( '<table>' ).attr( 'class', 'table' );
-
-               $wrapper.html( this.$table );
-
-               this.createTableHeader().appendTo( this.$table );
-               this.createTableBody().appendTo( this.$table );
-               this.initializeBootstrapTable();
-       };
-
-       /**
-        * @private
-        * @returns {jQuery}
-        */
-       BootstrapTable.prototype.createTableHeader = function () {
-               var $thead = $( '<thead>' );
-               var $tr = $( '<tr>' );
-
-               this.columns.forEach( function ( column ) {
-                       $( '<th>' ).text( column ).appendTo( $tr );
-               } );
-
-               $thead.append( $tr );
-
-               return $thead;
-       };
-
-       /**
-        * @private
-        * @returns {jQuery}
-        */
-       BootstrapTable.prototype.createTableBody = function () {
-               var $tbody = $( '<tbody>' );
-               var self = this;
-
-               self.rows.forEach( function ( row ) {
-                       var $tr = $( '<tr>' ).appendTo( $tbody );
-
-                       self.columns.forEach( function ( column ) {
-                               self.createTableCell( row, column ).appendTo( 
$tr );
-                       } );
-               } );
-
-               return $tbody;
-       };
-
-       /**
-        * @private
-        * @param {Object} row
-        * @param {string} column
-        * @returns {jQuery}
-        */
-       BootstrapTable.prototype.createTableCell = function ( row, column ) {
-               if ( !( column in row ) ) {
-                       return $( '<td>' ).attr( 'class', 'unbound' );
-               }
-
-               var $td = $( '<td>' );
-               var data = row[ column ];
-
-               this.browser.processVisitors( data );
-
-               $td.attr( this.getAttributes( data ) );
-
-               $td.append( this.contentHelper.formatValue( data ) );
-
-               return $td;
-       };
-
-       /**
-        * @private
-        * @param {Object} data
-        * @returns {Object}
-        */
-       BootstrapTable.prototype.getAttributes = function ( data ) {
-               if ( data.type === 'typed-literal' ) {
-                       return {
-                               'class': 'literal',
-                               'data-datatype': data.datatype
-                       };
-               }
-
-               var attr = {
-                       'class': data.type
-               };
-
-               if ( data[ 'xml:lang' ] ) {
-                       attr[ 'data-lang' ] = data[ 'xml:lang' ];
-                       attr.title = data.value + '@' + data[ 'xml:lang' ];
-               }
-
-               return attr;
-       };
-
-       BootstrapTable.prototype.initializeBootstrapTable = function () {
-               var events = {
-                       'click .explore': $.proxy( 
this.contentHelper.handleExploreItem, this ),
-                       'click .gallery': 
this.contentHelper.handleCommonResourceItem
-               };
-
-               this.$table.bootstrapTable( {
-                       columns: this.columns.map( function ( column ) {
-                               return {
-                                       title: column,
-                                       field: column,
-                                       events: events,
-                                       sortable: true
-                               };
-                       } ),
-                       mobileResponsive: true
-               } );
-       };
-
-       /**
         * A result browser for tables
         *
         * @class wikibase.queryService.ui.resultBrowser.TableResultBrowser
         * @license GNU GPL v2+
         *
         * @author Jonas Kress
+        * @author Jonas Keinholz
+        *
         * @constructor
         */
        function SELF() {
        }
 
        SELF.prototype = new 
wikibase.queryService.ui.resultBrowser.AbstractResultBrowser();
+
+       /**
+        * @property {object}
+        * @private
+        **/
+       SELF.prototype._columns = null;
+
+       /**
+        * @property {object}
+        * @private
+        **/
+       SELF.prototype._rows = null;
+
 
        /**
         * Draw browser to the given element
@@ -168,8 +51,52 @@
                        return;
                }
 
-               var bootstrapTable = new BootstrapTable( data.head.vars, 
data.results.bindings, this._contentHelper, this );
-               bootstrapTable.createTable( $element );
+
+               this.columns =  data.head.vars;
+               this.rows = data.results.bindings;
+
+               var $wrapper = $( '<table/>' ).attr( 'class', 'table' );
+               $element.html( $wrapper );
+               this.drawBootstrapTable( $wrapper );
+       };
+
+       /**
+        * Draw browser to the given element
+        * @param {jQuery} $element to draw at
+        **/
+       SELF.prototype.drawBootstrapTable = function ( $element ) {
+               var self = this;
+
+               jQuery.fn.bootstrapTable.columnDefaults.formatter = function( 
data ){
+                       if( !data ){
+                               return '';
+                       }
+                       return self._contentHelper.formatValue( data ).html();
+               };
+
+               var stringSorter = function( data1, data2 ){
+                       return data1.value.localeCompare( data2.value );
+               }
+
+               var events = {
+                               'click .explore': $.proxy( 
this._contentHelper.handleExploreItem, this ),
+                               'click .gallery': 
this._contentHelper.handleCommonResourceItem
+               };
+
+               $element.bootstrapTable( {
+                       columns: this.columns.map( function ( column ) {
+                               return {
+                                       title: column,
+                                       field: column,
+                                       events: events,
+                                       sortable: true,
+                                       sorter: stringSorter
+                               };
+                       } ),
+                       data: this.rows,
+                       mobileResponsive: true
+               } );
+
        };
 
        /**

-- 
To view, visit https://gerrit.wikimedia.org/r/277204
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: Ic3af5d7cb8309c5333b6e76e4ab6919426ea935c
Gerrit-PatchSet: 1
Gerrit-Project: wikidata/query/gui
Gerrit-Branch: master
Gerrit-Owner: Jonas Kress (WMDE) <[email protected]>

_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to