Draggable resizable dialog

Change-Id: I4e22555131842cf18938ccc8aa57c4837e978ecd Task: T194624
wikimedia · Jun 1, 2018 · 2d0d480 · 2d0d480
1 parent adea3d9
commit 2d0d480
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 44 deletions.
diff --git a/embed.html b/embed.html
@@ -68,8 +68,8 @@
 }
 
 .link {
-	position: fixed;
-	bottom: 0px;
+	position: relative;
+	top: -30px;
 	left: 0px;
 	padding: 0px 2px 0px 2px;
 	background-color: rgba(255, 255, 255, 0.8);
@@ -78,7 +78,7 @@
 
 .edit {
 	position: fixed;
-	bottom: 0.5em;
+	bottom: 2.2em;
 	left: 0;
 	font-size: 2em;
 	z-index: 401; /* one above .leaflet-pane */
@@ -101,11 +101,16 @@
 	z-index: 2001;
 }
 
+#result-browser-menu {
+	height: 50vh;
+	overflow-y: scroll;
+}
+
 .header-toolbar {
 	z-index: 1000;
 	position: fixed;
-	bottom: 0;
 	right: 0;
+	bottom: 50px;
 	opacity: 0.2;
 }
 .header-toolbar:hover {
@@ -164,14 +169,14 @@
 			<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
 			<span class="sr-only">Loading...</span>
 		</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 id="explorer-dialog">
+			<div data-role="header" class="modal-header clearfix" id="explorer-header">
+				<h3 data-role="title" class="modal-title pull-left" id="explorer-title">Explorer</h3>
+				<button data-role="close" type="button" 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>
+				</button>
+			</div>
+			<div data-role="body" id="explorer-body">
 			</div>
 		</div>
 	<a class="link edit-link" target="_blank" rel="noopener" data-i18n="[title]wdqs-embed-button-edit-query-title"><small data-i18n="wdqs-embed-button-edit-query"></small></a>

diff --git a/index.html b/index.html
@@ -31,6 +31,7 @@
 	<link rel="stylesheet" href="node_modules/jquery.uls/css/jquery.uls.mobile.css">
 	<link rel="stylesheet" href="node_modules/jstree/dist/themes/default/style.css" />
 	<link rel="stylesheet" href="node_modules/jquery-toast-plugin/src/jquery.toast.css" />
+	<link rel="stylesheet" href="node_modules/gijgo/css/gijgo.min.css">
 	<link rel="stylesheet" href="vendor/bootstrap-tags/css/bootstrap-tags.css">
 	<link rel="stylesheet" href="style.css">
  	<!-- endbuild -->
@@ -280,15 +281,15 @@
 				<span class="sr-only">Loading...</span>
 			</div>
 		</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 id="explorer-dialog">
+			<div data-role="header" class="modal-header clearfix" id="explorer-header">
+				<h3 data-role="title" class="modal-title pull-left" id="explorer-title">Explorer</h3>
+				<button data-role="close" type="button" class="close" data-dismiss="modal" aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+				</button>
+			</div>
+			<div data-role="body" id="explorer-body">
 			</div>
 		</div>
 	</div>
@@ -476,6 +477,7 @@ <h5 class="modal-title" id="keyboardShortcutHelpModalLabel" data-i18n="wdqs-dial
 	<script src="node_modules/jquery-resizable-dom/dist/jquery-resizable.js"></script>
 	<script src="node_modules/jstree/dist/jstree.js"></script>
 	<script src="node_modules/wellknown/wellknown.js"></script>
+	<script src="node_modules/gijgo/js/gijgo.min.js"></script>
 	<script src="vendor/bootstrap-tags/js/bootstrap-tags.min.js"></script>
 	<script src="vendor/sparqljs/dist/sparqljs-browser-min.js"></script>
 	<script src="vendor/bootstrapx-clickover/bootstrapx-clickover.js"></script>

diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "ekko-lightbox": "^5.3.0",
     "es6-shim": "^0.35.3",
     "font-awesome": "^4.7.0",
+    "gijgo": "^1.9.6",
     "jqcloud-npm": "^4.0.0",
     "jquery": "^3.3.1",
     "jquery-resizable-dom": "^0.20.0",

diff --git a/style.less b/style.less
@@ -343,19 +343,45 @@ iframe.shortUrl {
 	border: 1px solid #ccc;
 }
 
-.explorer-panel {
-	position: fixed;
-	right: 0;
-	bottom: 0;
-	background-color: rgba( 255, 255, 255, 0.8 );
-	z-index: 100;
+#explorer-dialog{
+	position: absolute !important;
 	display: none;
-	overflow: auto;
+	z-index: 100;
+	background-color: rgba( 255, 255, 255, 0.8 );
+	resize: both;
+	overflow: none;
 }
 
-.explorer-panel iframe {
-	height: 70vh;
-	width: 50vw;
+#explorer-dialog iframe {
+	height: 100%;
+	width: 100%;
+}
+
+#explorer-body {
+	height: 100%;
+	width: 100%;
+}
+
+#explorer-header {
+	height: 55px;
+	background-image: linear-gradient( to bottom, #f5f5f5 0, #e8e8e8 100% );
+	background-repeat: repeat-x;
+}
+
+#explorer-title {
+	font-size: 1.3em;
+}
+
+/*Disable resizing from all sides except bottom right corner*/
+
+.gj-resizable-e,
+.gj-resizable-n,
+.gj-resizable-w,
+.gj-resizable-s,
+.gj-resizable-nw,
+.gj-resizable-ne,
+.gj-resizable-sw {
+	display: none;
 }
 
 /**

diff --git a/wikibase/queryService/ui/App.js b/wikibase/queryService/ui/App.js
@@ -607,11 +607,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();

diff --git a/wikibase/queryService/ui/resultBrowser/helper/FormatterHelper.js b/wikibase/queryService/ui/resultBrowser/helper/FormatterHelper.js
@@ -385,19 +385,39 @@ wikibase.queryService.ui.resultBrowser.helper.FormatterHelper = ( function( $, m
 	 * Handler for explore links
 	 */
 	SELF.prototype.handleExploreItem = function( e ) {
+		var dialog = $( '#explorer-dialog' ).dialog( {
+			uiLibrary: 'bootstrap',
+			autoOpen: false,
+			maxWidth: window.innerWidth,
+			maxHeight: window.innerHeight,
+			resizable: true,
+			width: window.innerWidth / 2,
+			height: window.innerHeight / 3,
+			//Disable scrolling while resizing and draggnig
+			drag: function ( e ) {
+				$( 'body' ).css( 'overflow', 'hidden' );
+			},
+			dragStop: function ( e ) {
+				$( 'body' ).css( 'overflow', 'auto' );
+			},
+			resize: function ( e ) {
+				$( 'body' ).css( 'overflow', 'hidden' );
+				$( '#explorer-body' ).css( 'visibility', 'hidden' );
+			},
+			resizeStop: function ( e ) {
+				$( 'body' ).css( 'overflow', 'auto' );
+				$( '#explorer-body' ).css( 'visibility', 'visible' );
+			}
+		} );
 		var url = $( e.target ).attr( 'href' );
 		e.preventDefault();
-
 		var lang = $.i18n && $.i18n().locale || 'en',
-			query = 'SELECT ?item ?itemLabel WHERE { BIND( <' + url + '> as ?item ).	SERVICE wikibase:label { bd:serviceParam wikibase:language "' + lang + '" } }',
-			embedUrl = 'embed.html#' + encodeURIComponent( '#defaultView:Graph\n' + query );
-
-		$( '.explorer-panel .panel-body' ).html( $( '<iframe frameBorder="0" scrolling="no"></iframe>' ).attr( 'src', embedUrl ) );
-		$( '.explorer-panel' ).show();
-
+		query = 'SELECT ?item ?itemLabel WHERE { BIND( <' + url + '> as ?item ).	SERVICE wikibase:label { bd:serviceParam wikibase:language "' + lang + '" } }',
+		embedUrl = 'embed.html#' + encodeURIComponent( '#defaultView:Graph\n' + query );
+		$( '#explorer-dialog #explorer-body' ).html( $( '<iframe frameBorder="0" scrolling="no"></iframe>' ).attr( 'src', embedUrl ) );
+		dialog.open();
 		return false;
 	};
-
 	/**
 	 * Handler for commons resource links
 	 */