Jonas Kress (WMDE) has uploaded a new change for review. ( 
https://gerrit.wikimedia.org/r/371616 )

Change subject: [WIP] Refactor embed.html to use ResultView
......................................................................

[WIP] Refactor embed.html to use ResultView

Change-Id: I56aea2101a78f9bf17db6e4b8bb7740535b89aad
---
M embed.html
1 file changed, 104 insertions(+), 121 deletions(-)


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

diff --git a/embed.html b/embed.html
index 0e8bb47..c8389c3 100644
--- a/embed.html
+++ b/embed.html
@@ -95,17 +95,82 @@
 </style>
 <body>
 
-       <div id="progress">
-               <div class="progress">
-                       <div class="progress-bar progress-bar-striped 
active">Loading</div>
+               <noscript>
+                       <div class="row action-bar" style="display: block">
+                               <div class="message">
+                                       <div class="label label-warning">
+                                               For interactive query editing, 
a localized user interface, and other improvements,
+                                               please enable JavaScript or use 
a browser that supports it.
+                                       </div>
+                               </div>
+                       </div>
+               </noscript>
+               <div class="row">
+                                       <nav class="navbar navbar-default 
result">
+                                               <ul class="nav navbar-nav 
navbar-left">
+                                                       <li><a 
id="display-button" href="#" data-toggle="dropdown" class="dropdown-toggle" 
data-placement="top" data-i18n="[title]wdqs-app-button-display-title"><span 
id="display-button-icon" class="glyphicon glyphicon-eye-open" 
aria-hidden="true"></span><span id="display-button-label"></span><span 
class="caret"></span>
+                                                       </a>
+                                                               <ul 
id="result-browser-menu" class="dropdown-menu" role="menu">
+                                                               </ul></li>
+                                                       <li>
+                                                       <li>
+                                                               <a 
target="_blank" class="help" rel="noopener" 
href="https://www.wikidata.org/wiki/Wikidata:SPARQL_query_service/Wikidata_Query_Help/Result_Views";><span
 class="fa fa-question-circle"></span></a>
+                                                       </li>
+                                               </ul>
+                                               <ul class="nav navbar-nav 
navbar-right">
+                                                       <li class="navbar-text">
+                                                               <span 
class="query-total">
+                                                               <span 
class="label label-default"><span id="total-results"></span> Results in <span 
id="query-time"></span> ms </span></span> &nbsp;
+                                                       </li>
+                                                       <li><a 
id="download-button" href="#" data-toggle="dropdown" class="dropdown-toggle" 
data-placement="top" data-i18n="[title]wdqs-app-button-download-title"><span 
class="glyphicon glyphicon-download-alt" aria-hidden="true"></span><span 
data-i18n="wdqs-app-button-download"></span><span class="caret"></span>
+                                                       </a>
+                                                       <ul 
class="dropdown-menu" role="menu">
+                                                               <li><a 
id="downloadJSON" href="#"><span class="fa fa-file-code-o" 
aria-hidden="true"></span> <span 
data-i18n="wdqs-app-result-json"></span></a></li>
+                                                               <li><a 
id="downloadFull-JSON" href="#"><span class="fa fa-file-code-o" 
aria-hidden="true"></span> <span 
data-i18n="wdqs-app-result-json-verbose"></span></a></li>
+                                                               <li 
role="separator" class="divider"></li>
+                                                               <li><a 
id="downloadSimple-TSV" href="#"><span class="fa fa-file-excel-o" 
aria-hidden="true"></span> <span 
data-i18n="wdqs-app-result-tsv"></span></a></li>
+                                                               <li><a 
id="downloadTSV" href="#"><span class="fa fa-file-excel-o" 
aria-hidden="true"></span> <span 
data-i18n="wdqs-app-result-tsv-verbose"></span></a></li>
+                                                               <li 
role="separator" class="divider"></li>
+                                                               <li><a 
id="downloadCSV" href="#"><span class="fa fa-file-excel-o" 
aria-hidden="true"></span> <span 
data-i18n="wdqs-app-result-csv"></span></a></li>
+                                                               <li 
role="separator" class="divider"></li>
+                                                               <li><a 
id="downloadSVG" href="#"><span class="fa fa-file-image-o" 
aria-hidden="true"></span> <span 
data-i18n="wdqs-app-result-svg"></span></a></li>
+                                                       </ul></li>
+                                                       <li>
+                                                       <a id="link-button" 
href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true" 
aria-expanded="false" data-placement="top" 
data-i18n="[title]wdqs-app-button-link-title">
+                                                                   <span 
class="glyphicon glyphicon-link" aria-hidden="true"></span><span 
data-i18n="wdqs-app-button-link"></span><span class="caret"></span>
+                                                                 </a>
+                                                                 <ul 
class="dropdown-menu">
+                                                                       <li><a 
href="#" class="shortUrlTrigger result" target="_blank"  
data-i18n="[title]wdqs-app-result-shorturl-title" data-toggle="popover"><span 
data-i18n="wdqs-app-result-shorturl"></span></a></li>
+                                                                       <li><a 
target="_blank" class="queryUri" 
data-i18n="[title]wdqs-app-result-endpoint-title"><span 
data-i18n="wdqs-app-result-endpoint"></span></a></li>
+                                                                       <li><a 
href="#" class="embed result" target="_blank" data-toggle="popover" 
data-i18n="wdqs-app-result-embed"></a></li>
+                                                                       <li 
role="separator" class="divider"></li>
+                                                                       <li><a 
target="_blank" rel="noopener" class="rawGraphsUri" 
data-i18n="[title]wdqs-app-result-rawgraphs-title"><span class="glyphicon 
glyphicon-export"></span> <span 
data-i18n="wdqs-app-result-rawgraphs"></span></a></li>
+                                                                 </ul>
+                                                       </li>
+                                               </ul>
+                                       </nav>
                </div>
-               <div class="logo"></div>
-       </div>
-       <div id="error" class="progress">
-               <div class="progress-bar progress-bar-danger">Error</div>
-       </div>
+               <div class="row action-bar">
+                       <div class="message"></div>
+               </div>
+               <div class="row">
+                       <div id="query-result">Test result</div>
+               </div>
+               <div class="row">
+                       <div id="query-error" class="panel-heading">Test 
error</div>
+               </div>
 
-       <div id="query-result"></div>
+               <div class="explorer-panel panel panel-default">
+                   <div class="panel-heading clearfix">
+                     <h1 class="panel-title pull-left" style="padding-top: 
7.5px;">Explorer</h1>
+                     <div class="btn-group pull-right">
+                       <a href="#" class="btn btn-default btn-sm 
explorer-close"><span class="glyphicon glyphicon-remove" 
aria-hidden="true"></span>Close</a>
+                     </div>
+                   </div>
+                       <div class="panel-body">
+                       </div>
+               </div>
+
        <a class="link edit-link" target="_blank" title="Wikidata Query Service 
SPARQL"><small>Edit on query.Wikidata.org</small></a>
        <a href="#" class="edit edit-link" data-toggle="popover"><span 
class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
 
@@ -133,9 +198,21 @@
        <script src="vendor/sparqljs/dist/sparqljs-browser-min.js"></script>
        <script 
src="vendor/bootstrapx-clickover/bootstrapx-clickover.js"></script>
        <script src="node_modules/jstree/dist/jstree.js"></script>
+       <script src="node_modules/jquery.uls/src/jquery.uls.data.js"></script>
+       <script 
src="node_modules/jquery.uls/src/jquery.uls.data.utils.js"></script>
+       <script src="node_modules/jquery.uls/src/jquery.uls.lcd.js"></script>
+       <script 
src="node_modules/jquery.uls/src/jquery.uls.languagefilter.js"></script>
+       <script src="node_modules/jquery.uls/src/jquery.uls.core.js"></script>
+       <script src="node_modules/jquery.i18n/src/jquery.i18n.js"></script>
+       <script 
src="node_modules/jquery.i18n/src/jquery.i18n.messagestore.js"></script>
+       <script 
src="node_modules/jquery.i18n/src/jquery.i18n.fallbacks.js"></script>
+       <script 
src="node_modules/jquery.i18n/src/jquery.i18n.parser.js"></script>
+       <script 
src="node_modules/jquery.i18n/src/jquery.i18n.emitter.js"></script>
+       <script 
src="node_modules/jquery.i18n/src/jquery.i18n.language.js"></script>
        <!-- endbuild -->
 
        <!-- build:js js/embed.wdqs.min.js -->
+       <script src="wikibase/queryService/ui/ResultView.js"></script>
        <script 
src="wikibase/queryService/ui/resultBrowser/helper/FormatterHelper.js"></script>
        <script 
src="wikibase/queryService/ui/resultBrowser/AbstractResultBrowser.js"></script>
        <script 
src="wikibase/queryService/ui/resultBrowser/AbstractChartResultBrowser.js"></script>
@@ -154,6 +231,7 @@
        <script 
src="wikibase/queryService/ui/resultBrowser/MultiDimensionResultBrowser.js"></script>
        <script 
src="wikibase/queryService/ui/resultBrowser/GraphResultBrowser.js"></script>
        <script 
src="wikibase/queryService/ui/resultBrowser/GraphResultBrowserNodeBrowser.js"></script>
+       <script 
src="wikibase/queryService/ui/resultBrowser/PolestarResultBrowser.js"></script>
        <script src="wikibase/queryService/api/Sparql.js"></script>
        <script src="wikibase/queryService/api/Wikibase.js"></script>
        <script src="wikibase/queryService/api/Tracking.js"></script>
@@ -162,123 +240,28 @@
        <script 
src="wikibase/queryService/ui/queryHelper/SparqlQuery.js"></script>
        <script 
src="wikibase/queryService/ui/queryHelper/SelectorBox.js"></script>
        <script 
src="wikibase/queryService/ui/queryHelper/QueryTemplate.js"></script>
+       <script src="wikibase/queryService/ui/toolbar/ActionBar.js"></script>
+       <script src="wikibase/config.js"></script>
        <!-- endbuild -->
 
        <script type="text/javascript">
-               // TODO: Put this to config and consolidate with the one in 
app.js
-               var RESULT_BROWSER = {
-                       Table: {
-                               class: 'TableResultBrowser'
-                       },
-                       ImageGrid: {
-                               class: 'ImageResultBrowser'
-                       },
-                       Map: {
-                               class: 'CoordinateResultBrowser'
-                       },
-                       BubbleChart: {
-                               class: 'BubbleChartResultBrowser'
-                       },
-                       LineChart: {
-                               class: 'LineChartResultBrowser',
-                       },
-                       BarChart: {
-                               class: 'BarChartResultBrowser',
-                       },
-                       ScatterChart: {
-                               class: 'ScatterChartResultBrowser',
-                       },
-                       AreaChart: {
-                               class: 'AreaChartResultBrowser',
-                       },
-                       TreeMap: {
-                               class: 'TreeMapResultBrowser'
-                       },
-                       Tree: {
-                               class: 'TreeResultBrowser'
-                       },
-                       Timeline: {
-                               class: 'TimelineResultBrowser'
-                       },
-                       Dimensions: {
-                               class: 'MultiDimensionResultBrowser'
-                       },
-                       Graph: {
-                               class: 'GraphResultBrowser'
-                       }
-               };
-
                $( document ).ready( function() {
-                       var sparqlApi = new wikibase.queryService.api.Sparql();
+                       var config = CONFIG,
+                               lang = Cookies.get( 'lang' ) ? Cookies.get( 
'lang' ) : config.language,
+                               sparqlApi = new 
wikibase.queryService.api.Sparql( config.api.sparql.uri, lang ),
+                               resultView = new 
wikibase.queryService.ui.ResultView( sparqlApi ),
+                               query = decodeURIComponent( 
window.location.hash.substr( 1 ) );
 
-                       function getResultBrowser( query ) {
-                               var browser = null;
-                               var browserPackage = 
wikibase.queryService.ui.resultBrowser;
-
-                               try {
-                                       var browserKey = query.match( 
/#defaultView:(\w+)/ )[1];
-                                       var browserClass = 
RESULT_BROWSER[browserKey].class;
-                                       browser = new 
browserPackage[browserClass]();
-                               } catch ( e ) {
-                                       var browserClass = 
RESULT_BROWSER.Table.class;
-                                       browser = new 
browserPackage[browserClass]();
-                               }
-                               browser.setSparqlApi( sparqlApi );
-
-                               var tracking = new 
wikibase.queryService.api.Tracking();
-                               tracking.track( 
'wikibase.queryService.ui.embed.' + ( browserKey || 'default' ) );
-                               return browser;
-                       }
-
-                       function renderEdit( query, callback ) {
-                               var ve = new 
wikibase.queryService.ui.queryHelper.QueryHelper();
-                               ve.setChangeListener( _.debounce( function( v ) 
{
-                                       callback( v.getQuery() );
-                               }, 1500 ) );
-
-                               var $editor = $( '<div>' );
-                               ve.setQuery( query );
-                               ve.draw( $editor );
-                               $('.edit').on('click',function(e){
-                                   e.preventDefault();
-                                 }).popover( {
-                                               placement: 'top',
-                                               'html': true,
-                                               'content': $editor
-                                       } );
-                               if ( /^#TEMPLATE=/m.test( query ) ) {
-                                       // expand query template popover after 
allowing some time for labels to load
-                                       setTimeout( function() { $( '.edit' 
).click(); }, 500 );
-                               }
-                       }
-
-                       function renderQuery( query ) {
-                               $( '.edit-link' ).attr( 'href', 
'https://query.wikidata.org/' + window.location.hash )
-                               window.location.hash = '#' + 
encodeURIComponent( query )
-
-                               var browser = getResultBrowser( query );
-                               $( '#query-result' ).hide();
-                               $( '#query-result' ).empty();
-                               $( '#progress' ).show();
-                               sparqlApi.query( query ).done( function() {
-                                       try {
-                                               browser.setResult( 
sparqlApi.getResultRawData() );
-                                               $( '#query-result' ).show();
-                                               browser.draw( $( 
'#query-result' ) );
-                                               $( '#progress' ).hide();
-                                       } catch ( e ) {
-                                               $( '#progress' ).hide();
-                                               $( '#error' ).show();
-                                       }
-                               } ).fail( function() {
-                                       $( '#progress' ).hide();
-                                       $( '#error' ).show();
-                               } );
-                       }
-
-                       var query = decodeURIComponent( 
window.location.hash.substr( 1 ) );
-                       renderQuery( query );
-                       renderEdit( query, renderQuery );
+                               
+                       $.i18n().locale = lang;
+                       $.when(
+                               config.i18nLoad( lang )
+                       ).done( function() {
+                               $( 'body' ).i18n();
+                               $( 'html' ).attr( { lang: lang, dir: 
$.uls.data.getDir( lang ) } );
+                       } );
+                               
+                       resultView.draw( query );
                } );
        </script>
 </body>

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

Gerrit-MessageType: newchange
Gerrit-Change-Id: I56aea2101a78f9bf17db6e4b8bb7740535b89aad
Gerrit-PatchSet: 1
Gerrit-Project: wikidata/query/gui
Gerrit-Branch: master
Gerrit-Owner: Jonas Kress (WMDE) <jonas.kr...@wikimedia.de>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to