Skip to content

Commit

Permalink
New toolbars for embed view
Browse files Browse the repository at this point in the history 
Bug: T151057
Change-Id: Iadcdacf02800cc90e5ff4193b8fe5b1cecbc2744
  • Loading branch information
@prssanna
prssanna committed Jul 31, 2018
1 parent 32b4358 commit 3fc8812
Show file tree
Hide file tree
Showing 9 changed files with 425 additions and 144 deletions.
371 changes: 294 additions & 77 deletions embed.html
View file

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions i18n/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,10 @@
"wdqs-action-preview": "Result preview",
"wdqs-result-map-layers-all": "All layers",
"wdqs-result-map-progress": "Loading map data: $1%",
"wdqs-embed-button-edit-query": "Edit this query",
"wdqs-embed-button-edit-query-title": "Edit this query with the SPARQL editor",
"wdqs-embed-button-edit-query": "Edit",
"wdqs-embed-button-edit-query-title": "Edit this query with the query helper",
"wdqs-embed-button-edit-code": "Edit code",
"wdqs-embed-button-edit-code-title": "Edit this query with the SPARQL editor",
"wdqs-embed-explorer-button-incoming": "Show incoming links",
"wdqs-embed-explorer-button-outgoing": "Show outgoing links"
}
10 changes: 6 additions & 4 deletions i18n/qqq.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,8 +116,10 @@
"wdqs-action-preview": "Label for progressbar displaying preview",
"wdqs-result-map-layers-all": "Label for all layers in layer control on map view",
"wdqs-result-map-progress": "Message while loading data for the map view. $1 is a percentage from 0 to 100.",
"wdqs-embed-button-edit-query": "Label for button in embed",
"wdqs-embed-button-edit-query-title": "Title for button in embed",
"wdqs-embed-explorer-button-incoming": "Show incoming links",
"wdqs-embed-explorer-button-outgoing": "Show outgoing links"
"wdqs-embed-button-edit-query": "Label for button to edit a query with the query helper in embed",
"wdqs-embed-button-edit-query-title": "Title for the Edit button in embed",
"wdqs-embed-button-edit-code": "Label for button to edit the query with the SPARQL editor in embed",
"wdqs-embed-button-edit-code-title": "Title for the Edit Code button in embed",
"wdqs-embed-explorer-button-incoming": "Title for button to show incoming links",
"wdqs-embed-explorer-button-outgoing": "Title for button to show outgoing links"
}
14 changes: 14 additions & 0 deletions style.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -279,6 +279,11 @@ a {
width: 100%;
}

#layout-options {
margin-top: -35px;
text-align: center;
}

.error-line {
border-bottom: 2px dotted @color-erroneous;
}
Expand Down Expand Up @@ -391,6 +396,15 @@ a {
}
}

.toolbar-label {
position: absolute;
}

.toolbar-icon {
position: relative;
left: 105px;
}

.table-cell-selected {
background-color: @background-color-primary;
}
Expand Down
9 changes: 2 additions & 7 deletions wikibase/init.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,18 +63,13 @@
editor,
new wb.ui.queryHelper.QueryHelper( api, sparqlApi ),
sparqlApi,
querySamplesApi
querySamplesApi,
codeSamplesApi
);

if ( !config.showBirthdayPresents ) {
$( '[data-target="#CodeExamples"]' ).hide(); // TODO: remove after birthday
}
new wikibase.queryService.ui.dialog.CodeExample(
$( '#CodeExamples' ),
function () {
return codeSamplesApi.getExamples( editor.getValue() );
}
);

} );

Expand Down
64 changes: 16 additions & 48 deletions wikibase/queryService/ui/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,13 @@ wikibase.queryService.ui.App = ( function( $, download, window, _, Cookies, mome
* @param {wikibase.queryService.ui.editor.Editor} editor
* @param {wikibase.queryService.api.Sparql} queryHelper
*/
function SELF( $element, editor, queryHelper, sparqlApi, querySamplesApi ) {
function SELF( $element, editor, queryHelper, sparqlApi, querySamplesApi, codeSamplesApi ) {
this._$element = $element;
this._editor = editor;
this._queryHelper = queryHelper;
this._sparqlApi = sparqlApi;
this._querySamplesApi = querySamplesApi;
this._codeSamplesApi = codeSamplesApi;

this._init();
}
Expand Down Expand Up @@ -58,6 +59,12 @@ wikibase.queryService.ui.App = ( function( $, download, window, _, Cookies, mome
*/
SELF.prototype._querySamplesApi = null;

/**
* @property {wikibase.queryService.api.CodeSamples}
* @private
*/
SELF.prototype._codeSamplesApi = null;

/**
* @property {wikibase.queryService.ui.editor.Editor}
* @private
Expand Down Expand Up @@ -104,14 +111,14 @@ wikibase.queryService.ui.App = ( function( $, download, window, _, Cookies, mome
this._sparqlApi = new wikibase.queryService.api.Sparql();
}

if ( !this._resultView ) {
this._resultView = new wikibase.queryService.ui.ResultView( this._sparqlApi );
}

if ( !this._querySamplesApi ) {
this._querySamplesApi = new wikibase.queryService.api.QuerySamples();
}

if ( !this._codeSamplesApi ) {
this._codeSamplesApi = new wikibase.queryService.api.CodeSamples();
}

if ( !this._trackingApi ) {
this._trackingApi = new wikibase.queryService.api.Tracking();
}
Expand All @@ -120,12 +127,15 @@ wikibase.queryService.ui.App = ( function( $, download, window, _, Cookies, mome
this._editor = new wikibase.queryService.ui.editor.Editor();
}

if ( !this._resultView ) {
this._resultView = new wikibase.queryService.ui.ResultView( this._sparqlApi, this._codeSamplesApi, this._editor );
}

this._track( 'init' );

this._initApp();
this._initEditor();
this._initQueryHelper();
this._initExamples();
this._initDataUpdated();
this._initQuery();
this._initRdfNamespaces();
Expand Down Expand Up @@ -459,25 +469,6 @@ wikibase.queryService.ui.App = ( function( $, download, window, _, Cookies, mome
}
};

/**
* @private
*/
SELF.prototype._initExamples = function() {
var self = this;
new wikibase.queryService.ui.dialog.QueryExampleDialog( $( '#QueryExamples' ),
this._querySamplesApi, function( query, title ) {
if ( !query || !query.trim() ) {
return;
}

self._editor.setValue( '#' + title + '\n' + query );

$( '#QueryExamples' ).one( 'hidden.bs.modal', function() {
setTimeout( function() { self._editor.focus(); }, 0 );
} );
} );
};

/**
* @private
*/
Expand Down Expand Up @@ -608,11 +599,6 @@ wikibase.queryService.ui.App = ( function( $, download, window, _, Cookies, mome
self._track( 'buttonClick.clear' );
} );

$( '.explorer-close' ).click( function( e ) {
e.preventDefault();
$( '.explorer-panel' ).hide();
} );

$( '.restore' ).click( function( e ) {
self._track( 'buttonClick.restore' );
e.preventDefault();
Expand Down Expand Up @@ -685,24 +671,6 @@ wikibase.queryService.ui.App = ( function( $, download, window, _, Cookies, mome
self._track( 'buttonClick.shortUrlQuery' );
} );

$( '.shortUrlTrigger.result' ).clickover( {
placement: 'left',
'global_close': true,
'html': true,
'content': function() {
self._updateQueryUrl();
var $link = $( '<a>' ).attr( 'href', 'embed.html' + window.location.hash );
return '<iframe ' +
'class="shortUrl" ' +
'src="' + SHORTURL_API + encodeURIComponent( $link[0].href ) + '" ' +
'referrerpolicy="origin" ' +
'sandbox="" ' +
'></iframe>';
}
} ).click( function() {
self._track( 'buttonClick.shortUrlResult' );
} );

$( '.embed.result' ).clickover( {
placement: 'left',
'global_close': true,
Expand Down
89 changes: 86 additions & 3 deletions wikibase/queryService/ui/ResultView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,10 @@ wikibase.queryService.ui.ResultView = ( function( $, window ) {
*
* @param {wikibase.queryService.api.Sparql} sparqlApi
*/
function SELF( sparqlApi ) {
function SELF( sparqlApi, codeSamplesApi, editor ) {
this._sparqlApi = sparqlApi;
this._codeSamplesApi = codeSamplesApi;
this._editor = editor;

this._init();
}
Expand All @@ -43,6 +45,12 @@ wikibase.queryService.ui.ResultView = ( function( $, window ) {
*/
SELF.prototype._sparqlApi = null;

/**
* @property {wikibase.queryService.api.CodeSamples}
* @private
*/
SELF.prototype._codeSamplesApi = null;

/**
* @property {string}
* @private
Expand Down Expand Up @@ -191,13 +199,20 @@ wikibase.queryService.ui.ResultView = ( function( $, window ) {
this._trackingApi = new wikibase.queryService.api.Tracking();
}

if ( !this._codeSamplesApi ) {
this._codeSamplesApi = new wikibase.queryService.api.CodeSamples();
}

this._actionBar = new wikibase.queryService.ui.toolbar.Actionbar( $( '.action-bar' ) );

this._sparqlQuery = this._query = new wikibase.queryService.ui.queryHelper.SparqlQuery();

this._internationalizeCharts();

this._initResultBrowserMenu();
this._initExamples();
this._initCodeExamples();
this._initQueryLinkPopover();
};

/**
Expand All @@ -218,8 +233,8 @@ wikibase.queryService.ui.ResultView = ( function( $, window ) {
*/
SELF.prototype._initResultBrowserMenu = function() {
$.each( this._resultBrowsers, function( key, b ) {
var $element = $( '<li><a class="result-browser" href="#">' +
'<span class="' + b.icon.split( '-', 1 )[0] + ' ' + b.icon + '"></span>' + b.label +
var $element = $( '<li class="result-browser-item"><a class="result-browser" href="#">' +
'<span class="toolbar-label">' + b.label + ' ' + '</span>' + '<span class="toolbar-icon ' + b.icon.split( '-', 1 )[0] + ' ' + b.icon + '"></span>' +
'</a></li>' );
$element.appendTo( $( '#result-browser-menu' ) );
b.$element = $element;
Expand Down Expand Up @@ -444,6 +459,72 @@ wikibase.queryService.ui.ResultView = ( function( $, window ) {
return { defaultName: defaultName, optionsMap: optionsMap };
};

/**
* @private
*/
SELF.prototype._initExamples = function() {
var self = this;
new wikibase.queryService.ui.dialog.QueryExampleDialog( $( '#QueryExamples' ),
this._querySamplesApi, function( query, title ) {
if ( !query || !query.trim() ) {
return;
}

if ( self._editor ) {
self._editor.setValue( '#' + title + '\n' + query );
$( '#QueryExamples' ).one( 'hidden.bs.modal', function() {
setTimeout( function() { self._editor.focus(); }, 0 );
} );
} else {
self.draw( query );
window.location.hash = '#' + encodeURIComponent( '#' + title + '\n' + query );
}
} );
};

/**
* @private
*/
SELF.prototype._initCodeExamples = function() {
var self = this;
new wikibase.queryService.ui.dialog.CodeExample(
$( '#CodeExamples' ),
function () {
return self._codeSamplesApi.getExamples( self._query );
}
);
};

/**
* @private
*/
SELF.prototype._initQueryLinkPopover = function() {
var self = this;
var SHORTURL_API = '//tinyurl.com/api-create.php?url=';
$( '.shortUrlTrigger.result' ).clickover( {
placement: 'left',
'global_close': true,
'html': true,
'content': function() {
var queryUrl;
if ( self._editor ) {
queryUrl = '#' + encodeURIComponent( self._editor.getValue() );
} else {
queryUrl = window.location.hash;
}
var $link = $( '<a>' ).attr( 'href', 'embed.html' + queryUrl );
return '<iframe ' +
'class="shortUrl" ' +
'src="' + SHORTURL_API + encodeURIComponent( $link[0].href ) + '" ' +
'referrerpolicy="origin" ' +
'sandbox="" ' +
'></iframe>';
}
} ).click( function() {
self._track( 'buttonClick.shortUrlResult' );
} );
};

/**
* @private
*/
Expand All @@ -455,6 +536,7 @@ wikibase.queryService.ui.ResultView = ( function( $, window ) {

if ( b.object.isDrawable() ) {
b.$element.css( 'opacity', 1 ).attr( 'href', '#' );

b.$element.click( function() {
$( this ).closest( '.open' ).removeClass( 'open' );

Expand All @@ -468,6 +550,7 @@ wikibase.queryService.ui.ResultView = ( function( $, window ) {
} );
} else {
b.$element.css( 'opacity', 0.5 ).removeAttr( 'href' );
b.$element.css( 'opacity', 0.5 ).addClass( 'result-browser-inactive' );
}
} );
};
Expand Down
2 changes: 1 addition & 1 deletion wikibase/queryService/ui/resultBrowser/GraphResultBrowser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ wikibase.queryService.ui.resultBrowser.GraphResultBrowser = ( function( $, vis,
* @private
*/
SELF.prototype._createToolbar = function( network ) {
var $toolbar = $( '<div id="layout-options" style="margin-top: -35px; text-align: center;">' );
var $toolbar = $( '<div id="layout-options">' );

function setLayout( type ) {
if ( type === 'none' ) {
Expand Down
4 changes: 2 additions & 2 deletions wikibase/queryService/ui/resultBrowser/helper/FormatterHelper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -393,8 +393,8 @@ wikibase.queryService.ui.resultBrowser.helper.FormatterHelper = ( function( $, m
autoOpen: false,
maxWidth: window.innerWidth,
maxHeight: window.innerHeight,
minHeight: 100,
minWidth: 100,
minHeight: 220,
minWidth: 220,
resizable: true,
width: window.innerWidth / 2,
height: Math.min( window.innerWidth, window.innerHeight ) / 2,
Expand Down

0 comments on commit 3fc8812

Please sign in to comment.