From 2c88ebbd6fccf3332eecc628b7fe46d4c517df11 Mon Sep 17 00:00:00 2001 From: Ed Sanders Date: Tue, 24 Apr 2018 14:02:07 +0100 Subject: [PATCH] ApiSandbox: Resize layout to fit content, and remove fullscreen mode Avoids unpleasant nested scrollbars, and hacky fullscren mode. Make toolbar position:sticky to keep buttons visible. Bug: T129157 Change-Id: Ia3c3176c1bd7cac6af2c35f53d820f1272df72a5 --- languages/i18n/en.json | 4 -- languages/i18n/qqq.json | 4 -- resources/Resources.php | 4 -- .../mediawiki.special.apisandbox.css | 27 +++----- .../mediawiki.special.apisandbox.js | 61 ++----------------- 5 files changed, 12 insertions(+), 88 deletions(-) diff --git a/languages/i18n/en.json b/languages/i18n/en.json index a791440109..741738aad5 100644 --- a/languages/i18n/en.json +++ b/languages/i18n/en.json @@ -2066,10 +2066,6 @@ "apisandbox-jsonly": "JavaScript is required to use the API sandbox.", "apisandbox-api-disabled": "The API is disabled on this site.", "apisandbox-intro": "Use this page to experiment with the MediaWiki web service API.\nRefer to [[mw:API:Main page|the API documentation]] for further details of API usage. Example: [https://www.mediawiki.org/wiki/API#A_simple_example get the content of a Main Page]. Select an action to see more examples.\n\nNote that, although this is a sandbox, actions you carry out on this page may modify the wiki.", - "apisandbox-fullscreen": "Expand panel", - "apisandbox-fullscreen-tooltip": "Expand the sandbox panel to fill the browser window.", - "apisandbox-unfullscreen": "Show page", - "apisandbox-unfullscreen-tooltip": "Reduce the sandbox panel, so MediaWiki navigation links are available.", "apisandbox-submit": "Make request", "apisandbox-reset": "Clear", "apisandbox-retry": "Retry", diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json index cc0fc01b2b..29869a146d 100644 --- a/languages/i18n/qqq.json +++ b/languages/i18n/qqq.json @@ -2263,10 +2263,6 @@ "apisandbox-jsonly": "Displayed as an error message if the browser does not have JavaScript enabled.", "apisandbox-api-disabled": "Displayed as an error message if the API is disabled on this site.", "apisandbox-intro": "Displayed (from JavaScript) as a header on [[Special:ApiSandbox]].", - "apisandbox-fullscreen": "JavaScript button label for enabling full-page mode.\n\nSee https://phabricator.wikimedia.org/T129632#2465838 for details.", - "apisandbox-fullscreen-tooltip": "Tooltip for the {{msg-mw|apisandbox-fullscreen}} button.", - "apisandbox-unfullscreen": "JavaScript button label for disabling full-page mode.\n\nSee https://phabricator.wikimedia.org/T129632#2465838 for details.", - "apisandbox-unfullscreen-tooltip": "Tooltip for the {{msg-mw|apisandbox-unfullscreen}} button.", "apisandbox-submit": "JavaScript button label for submitting the request.", "apisandbox-reset": "JavaScript button label for clearing the form.\n{{Identical|Clear}}", "apisandbox-retry": "JavaScript button label for retrying the submission.\n{{Identical|Retry}}", diff --git a/resources/Resources.php b/resources/Resources.php index 3d0165b78c..d3e1b6557b 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -2007,10 +2007,6 @@ return [ 'apisandbox-intro', 'apisandbox-submit', 'apisandbox-reset', - 'apisandbox-fullscreen', - 'apisandbox-fullscreen-tooltip', - 'apisandbox-unfullscreen', - 'apisandbox-unfullscreen-tooltip', 'apisandbox-retry', 'apisandbox-loading', 'apisandbox-load-error', diff --git a/resources/src/mediawiki.special/mediawiki.special.apisandbox.css b/resources/src/mediawiki.special/mediawiki.special.apisandbox.css index 60f83ad97c..fe5ac416bf 100644 --- a/resources/src/mediawiki.special/mediawiki.special.apisandbox.css +++ b/resources/src/mediawiki.special/mediawiki.special.apisandbox.css @@ -1,10 +1,13 @@ -.mw-apisandbox-fullscreen { - overflow: hidden; -} - .mw-apisandbox-toolbar { + background: #fff; + -webkit-position: sticky; + position: sticky; + top: 0; + margin-bottom: -1px; + padding: 0.5em 0; + border-bottom: 1px solid #a2a9b1; text-align: right; - padding: 0.5em; + z-index: 1; } #mw-apisandbox-ui .mw-apisandbox-link { @@ -35,20 +38,6 @@ width: 1%; } -.mw-apisandbox-fullscreen #mw-apisandbox-ui { - position: fixed; - top: 0; - left: 0; - bottom: 0; - right: 0; - background: #fff; -} - -.mw-apisandbox-fullscreen .mw-apisandbox-container { - border-width: 1px 0 0 0; - border-radius: 0; -} - .mw-apisandbox-spacer { display: inline-block; height: 1px; diff --git a/resources/src/mediawiki.special/mediawiki.special.apisandbox.js b/resources/src/mediawiki.special/mediawiki.special.apisandbox.js index 009f47b91f..523a62e75b 100644 --- a/resources/src/mediawiki.special/mediawiki.special.apisandbox.js +++ b/resources/src/mediawiki.special/mediawiki.special.apisandbox.js @@ -1,7 +1,7 @@ ( function ( $, mw, OO ) { 'use strict'; var ApiSandbox, Util, WidgetMethods, Validators, - $content, panel, booklet, oldhash, windowManager, fullscreenButton, + $content, panel, booklet, oldhash, windowManager, formatDropdown, api = new mw.Api(), bookletPages = [], @@ -774,8 +774,6 @@ init: function () { var $toolbar; - ApiSandbox.isFullscreen = false; - $content = $( '#mw-apisandbox' ); windowManager = new OO.ui.WindowManager(); @@ -784,15 +782,9 @@ errorAlert: new OO.ui.MessageDialog() } ); - fullscreenButton = new OO.ui.ButtonWidget( { - label: mw.message( 'apisandbox-fullscreen' ).text(), - title: mw.message( 'apisandbox-fullscreen-tooltip' ).text() - } ).on( 'click', ApiSandbox.toggleFullscreen ); - $toolbar = $( '
' ) .addClass( 'mw-apisandbox-toolbar' ) .append( - fullscreenButton.$element, new OO.ui.ButtonWidget( { label: mw.message( 'apisandbox-submit' ).text(), flags: [ 'primary', 'progressive' ] @@ -804,6 +796,7 @@ ); booklet = new OO.ui.BookletLayout( { + expanded: false, outlined: true, autoFocus: false } ); @@ -832,52 +825,6 @@ .append( $toolbar ) .append( panel.$element ) ); - - $( window ).on( 'resize', ApiSandbox.resizePanel ); - - ApiSandbox.resizePanel(); - }, - - /** - * Toggle "fullscreen" mode - */ - toggleFullscreen: function () { - var $body = $( document.body ), - $ui = $( '#mw-apisandbox-ui' ); - - ApiSandbox.isFullscreen = !ApiSandbox.isFullscreen; - - $body.toggleClass( 'mw-apisandbox-fullscreen', ApiSandbox.isFullscreen ); - $ui.toggleClass( 'mw-body-content', ApiSandbox.isFullscreen ); - if ( ApiSandbox.isFullscreen ) { - fullscreenButton.setLabel( mw.message( 'apisandbox-unfullscreen' ).text() ); - fullscreenButton.setTitle( mw.message( 'apisandbox-unfullscreen-tooltip' ).text() ); - OO.ui.getDefaultOverlay().prepend( $ui ); - } else { - fullscreenButton.setLabel( mw.message( 'apisandbox-fullscreen' ).text() ); - fullscreenButton.setTitle( mw.message( 'apisandbox-fullscreen-tooltip' ).text() ); - $content.append( $ui ); - } - ApiSandbox.resizePanel(); - }, - - /** - * Set the height of the panel based on the current viewport. - */ - resizePanel: function () { - var height = $( window ).height(), - contentTop = $content.offset().top; - - if ( ApiSandbox.isFullscreen ) { - height -= panel.$element.offset().top - $( '#mw-apisandbox-ui' ).offset().top; - panel.$element.height( height - 1 ); - } else { - // Subtract the height of the intro text - height -= panel.$element.offset().top - contentTop; - - panel.$element.height( height - 10 ); - $( window ).scrollTop( contentTop - 5 ); - } }, /** @@ -1123,7 +1070,7 @@ $result = $( '
' ) .append( progress.$element ); - resultPage = page = new OO.ui.PageLayout( '|results|' ); + resultPage = page = new OO.ui.PageLayout( '|results|', { expanded: false } ); page.setupOutlineItem = function () { this.outlineItem.setLabel( mw.message( 'apisandbox-results' ).text() ); }; @@ -1375,7 +1322,7 @@ * @param {Object} [config] Configuration options */ ApiSandbox.PageLayout = function ( config ) { - config = $.extend( { prefix: '' }, config ); + config = $.extend( { prefix: '', expanded: false }, config ); this.displayText = config.key; this.apiModule = config.path; this.prefix = config.prefix; -- 2.20.1