Anpans has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/401808 )
Change subject: Add highlight and selection feature for query result table for
Query.Wikidata.org
......................................................................
Add highlight and selection feature for query result table for
Query.Wikidata.org
Change-Id: Ia8733d328300d243ddbb715ae9c07b9fec8e8510
Phabricator: T183807
---
M style.less
M wikibase/queryService/ui/resultBrowser/TableResultBrowser.js
2 files changed, 108 insertions(+), 2 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/wikidata/query/gui
refs/changes/08/401808/1
diff --git a/style.less b/style.less
index 5567952..602efff 100644
--- a/style.less
+++ b/style.less
@@ -68,6 +68,10 @@
padding: 0 0.5em 0 0;
}
+.table-cell-selected{
+ background-color: palegreen;
+}
+
.fixed-table-pagination {
margin-bottom: 2.5em;
}
diff --git a/wikibase/queryService/ui/resultBrowser/TableResultBrowser.js
b/wikibase/queryService/ui/resultBrowser/TableResultBrowser.js
index e992161..2b2dc74 100644
--- a/wikibase/queryService/ui/resultBrowser/TableResultBrowser.js
+++ b/wikibase/queryService/ui/resultBrowser/TableResultBrowser.js
@@ -41,6 +41,12 @@
* @property {Object}
* @private
*/
+ SELF.prototype._$selectedCell = {};
+
+ /**
+ * @property {Object}
+ * @private
+ */
SELF.prototype._sorter = {
string: function( val1, val2 ) {
return val1.localeCompare( val2 );
@@ -144,15 +150,111 @@
showPaginationSwitch: showPagination,
pageSize: TABLE_PAGE_SIZE,
pageList: TABLE_PAGE_SIZE_LIST,
- keyEvents: true,
+ keyEvents: false,
cookie: true,
cookieIdTable: '1',
cookieExpire: '1y',
- cookiesEnabled: [ 'bs.table.pageList' ]
+ cookiesEnabled: [ 'bs.table.pageList' ],
+ onResetView: function(name, args){
+ self.selectFirstCell($element);
+ },
+ onClickCell: function(field, value, row, $cell){
+ self.selectCell($cell);
+ }
} );
+ $(document).keydown(function(e){
+ self.keyPressed(e);
+ });
};
/**
+ * Select the first cell of the table
+ *
+ * @private
+ * @param {jQuery} $table in which to select the first cell
+ */
+ SELF.prototype.selectFirstCell = function($table){
+ var $cell = $table.find( 'td' ).first();
+ this.selectCell($cell);
+ }
+
+ /**
+ * Select and highlight a cell
+ *
+ * @private
+ * @param {jQuery} $cell to be highlighted
+ */
+ SELF.prototype.selectCell = function($cell){
+ if($cell.length){ //if cell actually exists
+ if(this._$selectedCell.length)
+ this._$selectedCell.removeClass(
'table-cell-selected' );
+ this._$selectedCell = $cell;
+ if(!this._$selectedCell.parent().hasClass(
'no-records-found' )){ //make sure that the cell chosen isn't a 'No Matching
Records Found' cell
+ this._$selectedCell.addClass(
'table-cell-selected' );
+ var offset = this._$selectedCell.offset().top;
//make sure the highlighed cell is visible
(https://stackoverflow.com/questions/6215779/scroll-if-element-is-not-visible)
+ var visible_area_start = $(window).scrollTop();
+ var visible_area_end = visible_area_start +
window.innerHeight;
+ if(offset < visible_area_start || offset >
visible_area_end){
+ // Not in view so scroll to it
+ $( 'html,body' ).animate({scrollTop: offset - window.innerHeight/3},
100);
+ }
+ }
+ }
+ }
+
+ /**
+ * Called when a key is pressed
+ *
+ * @private
+ * @param e event element
+ */
+ SELF.prototype.keyPressed = function(e){
+ if($(document.activeElement).is( 'textarea, input' )){
+ return;
+ }
+ if((e.ctrlKey || e.metaKey) && e.which === 67){ //if Ctrl + C
is pressed
+ this.copyToClipboard(this._$selectedCell);
+ return;
+ }
+ if ( e.ctrlKey || e.metaKey || e.altKey ) {
+ return;
+ }
+
+ switch(e.which){
+ case 13: //When the enter key is pressed, click on the
first link in the selected cell
+ this._$selectedCell.find( 'a' ).first().click();
+ break;
+ case 37: //left arrow key
+ this.selectCell(this._$selectedCell.prev());
+ break;
+ case 38: //up arrow key
+
this.selectCell(this._$selectedCell.parent().prev().children('td:nth-child(' +
(this._$selectedCell.index() + 1).toString() + ')' ));
+ break;
+ case 39: //right arrow key
+ this.selectCell(this._$selectedCell.next());
+ break;
+ case 40: //down arrow key
+
this.selectCell(this._$selectedCell.parent().next().children( 'td:nth-child(' +
(this._$selectedCell.index() + 1).toString() + ')' ));
+ break;
+ }
+ }
+
+ /**
+ * Copies the text of an element to clipboard
+ *
+ * @private
+ * @param $element whose text to copy
+ */
+ SELF.prototype.copyToClipboard = function($element) {
+ var $temp = $( '<input>' );
+ $( 'body' ).append($temp);
+ $temp.val($element.text()).select();
+ document.execCommand( 'copy' );
+ $temp.remove();
+ };
+
+
+ /**
* Checks whether the browser can draw the given result
*
* @return {boolean}
--
To view, visit https://gerrit.wikimedia.org/r/401808
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ia8733d328300d243ddbb715ae9c07b9fec8e8510
Gerrit-PatchSet: 1
Gerrit-Project: wikidata/query/gui
Gerrit-Branch: master
Gerrit-Owner: Anpans <anpans...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
