r105956 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r105955‎ | r105956 | r105957 >
Date:23:41, 12 December 2011
Author:tparscal
Status:deferred
Tags:
Comment:
Moved toolbar floating code to sandbox.js - using a wrapper instead of a spacer to avoid resize events causing scroll events which cause a nasty loop
Modified paths:
  • /trunk/extensions/VisualEditor/SpecialVisualEditorSandbox.php (modified) (history)
  • /trunk/extensions/VisualEditor/demo/index.html (modified) (history)
  • /trunk/extensions/VisualEditor/modules/es/views/es.SurfaceView.js (modified) (history)
  • /trunk/extensions/VisualEditor/modules/es/views/es.ToolbarView.js (modified) (history)
  • /trunk/extensions/VisualEditor/modules/sandbox/sandbox.css (modified) (history)
  • /trunk/extensions/VisualEditor/modules/sandbox/sandbox.js (modified) (history)

Diff [purge]

Index: trunk/extensions/VisualEditor/SpecialVisualEditorSandbox.php
——@@ -33,17 +33,19 @@
3434 <ul id="es-docs-list" ></ul>
3535 </div>
3636 <div id="es-base">
37 - <div id="es-toolbar" class="es-toolbar">
38 - <div id="es-modes" class="es-modes">
39 - <div id="es-mode-wikitext" class="es-modes-button" title="$modeWikitext"></div>
40 - <div id="es-mode-json" class="es-modes-button" title="$modeJson"></div>
41 - <div id="es-mode-html" class="es-modes-button" title="$modeHtml"></div>
42 - <div id="es-mode-render" class="es-modes-button" title="$modeRender"></div>
43 - <div id="es-mode-history" class="es-modes-button" title="$modeHistory"></div>
44 - <div id="es-mode-help" class="es-modes-button" title="$modeHelp"></div>
 37+ <div id="es-toolbar-wrapper">
 38+ <div id="es-toolbar" class="es-toolbar">
 39+ <div id="es-modes" class="es-modes">
 40+ <div id="es-mode-wikitext" class="es-modes-button" title="$modeWikitext"></div>
 41+ <div id="es-mode-json" class="es-modes-button" title="$modeJson"></div>
 42+ <div id="es-mode-html" class="es-modes-button" title="$modeHtml"></div>
 43+ <div id="es-mode-render" class="es-modes-button" title="$modeRender"></div>
 44+ <div id="es-mode-history" class="es-modes-button" title="$modeHistory"></div>
 45+ <div id="es-mode-help" class="es-modes-button" title="$modeHelp"></div>
 46+ </div>
 47+ <div style="clear:both"></div>
 48+ <div id="es-toolbar-shadow"></div>
4549 </div>
46 - <div style="clear:both"></div>
47 - <div id="es-toolbar-shadow"></div>
4850 </div>
4951 <div id="es-panes">
5052 <div id="es-visual">
Index: trunk/extensions/VisualEditor/demo/index.html
——@@ -70,17 +70,19 @@
7171 <ul id="es-docs-list" ></ul>
7272 </div>
7373 <div id="es-base">
74 - <div id="es-toolbar" class="es-toolbar">
75 - <div id="es-modes" class="es-modes">
76 - <div id="es-mode-wikitext" class="es-modes-button" title="Toggle wikitext view"></div>
77 - <div id="es-mode-json" class="es-modes-button" title="Toggle JSON view"></div>
78 - <div id="es-mode-html" class="es-modes-button" title="Toggle HTML view"></div>
79 - <div id="es-mode-render" class="es-modes-button" title="Toggle preview"></div>
80 - <div id="es-mode-history" class="es-modes-button" title="Toggle transaction history view"></div>
81 - <div id="es-mode-help" class="es-modes-button" title="Toggle help view"></div>
 74+ <div id="es-toolbar-wrapper">
 75+ <div id="es-toolbar" class="es-toolbar">
 76+ <div id="es-modes" class="es-modes">
 77+ <div id="es-mode-wikitext" class="es-modes-button" title="Toggle wikitext view"></div>
 78+ <div id="es-mode-json" class="es-modes-button" title="Toggle JSON view"></div>
 79+ <div id="es-mode-html" class="es-modes-button" title="Toggle HTML view"></div>
 80+ <div id="es-mode-render" class="es-modes-button" title="Toggle preview"></div>
 81+ <div id="es-mode-history" class="es-modes-button" title="Toggle transaction history view"></div>
 82+ <div id="es-mode-help" class="es-modes-button" title="Toggle help view"></div>
 83+ </div>
 84+ <div style="clear:both"></div>
 85+ <div id="es-toolbar-shadow"></div>
8286 </div>
83 - <div style="clear:both"></div>
84 - <div id="es-toolbar-shadow"></div>
8587 </div>
8688 <div id="es-panes">
8789 <div id="es-visual">
Index: trunk/extensions/VisualEditor/modules/es/views/es.SurfaceView.js
——@@ -63,7 +63,6 @@
6464 height: $window.height(),
6565 scrollTop: $window.scrollTop(),
6666 // XXX: This is a dirty hack!
67 - toolbarTop: $( '#es-toolbar' ).offset().top,
6867 toolbarHeight: $( '#es-toolbar' ).height()
6968 };
7069
——@@ -139,6 +138,8 @@
140139 // resizing - can be implemented with setTimeout
141140 _this.hideCursor();
142141 _this.dimensions.height = $window.height();
 142+ // XXX: This is a dirty hack!
 143+ _this.dimensions.toolbarHeight = $( '#es-toolbar' ).height();
143144 var width = _this.$.width();
144145 if ( _this.dimensions.width !== width ) {
145146 _this.dimensions.width = width;
Index: trunk/extensions/VisualEditor/modules/es/views/es.ToolbarView.js
——@@ -14,35 +14,8 @@
1515 this.surfaceView = surfaceView;
1616 this.$ = $container;
1717 this.$groups = $( '<div class="es-toolbarGroups"></div>' ).prependTo( this.$ );
18 - this.$spacer = $('<div></div>');
19 - this.$.after( this.$spacer );
2018 this.tools = [];
2119
22 - // Events
23 - /*
24 - * This code is responsible for switching toolbar into floating mode when scrolling (with
25 - * keyboard or mouse).
26 - */
27 - $window.scroll( function() {
28 - if ( _this.surfaceView.dimensions.scrollTop > _this.surfaceView.dimensions.toolbarTop ) {
29 - if ( !_this.$.hasClass( 'float' ) ) {
30 - var left = _this.$.offset().left,
31 - right = $window.width() - _this.$.outerWidth() - left;
32 - _this.$.css( 'right', right );
33 - _this.$.css( 'left', left );
34 - _this.$spacer.height( _this.$.height() );
35 - _this.$.addClass( 'float' );
36 - }
37 - } else {
38 - if ( _this.$.hasClass( 'float' ) ) {
39 - _this.$.css( 'right', 0 );
40 - _this.$.css( 'left', 0 );
41 - _this.$spacer.height(0);
42 - _this.$.removeClass( 'float' );
43 - }
44 - }
45 - } );
46 -
4720 this.surfaceView.on( 'cursor', function( annotations, nodes ) {
4821 for( var i = 0; i < _this.tools.length; i++ ) {
4922 _this.tools[i].updateState( annotations, nodes );
Index: trunk/extensions/VisualEditor/modules/sandbox/sandbox.css
——@@ -14,7 +14,7 @@
1515 -o-user-select;
1616 user-select: none;
1717 }
18 -#es-toolbar.float {
 18+#es-toolbar-wrapper.float #es-toolbar {
1919 top: 0;
2020 position: fixed;
2121 -webkit-border-radius: 0;
Index: trunk/extensions/VisualEditor/modules/sandbox/sandbox.js
——@@ -566,10 +566,33 @@
567567 window.contextView = new es.ContextView( window.surfaceView );
568568 window.surfaceModel.select( new es.Range( 1, 1 ) );
569569
 570+ /*
 571+ * This code is responsible for switching toolbar into floating mode when scrolling (with
 572+ * keyboard or mouse).
 573+ */
 574+ var $toolbarWrapper = $( '#es-toolbar-wrapper' ),
 575+ $toolbar = $( '#es-toolbar' ),
 576+ $window = $( window );
 577+ $window.scroll( function() {
 578+ var toolbarWrapperOffset = $toolbarWrapper.offset();
 579+ if ( $window.scrollTop() > toolbarWrapperOffset.top ) {
 580+ if ( !$toolbarWrapper.hasClass( 'float' ) ) {
 581+ var left = toolbarWrapperOffset.left,
 582+ right = $window.width() - $toolbarWrapper.outerWidth() - left;
 583+ $toolbarWrapper.css( 'height', $toolbarWrapper.height() ).addClass( 'float' );
 584+ $toolbar.css( { 'left': left, 'right': right } );
 585+ }
 586+ } else {
 587+ if ( $toolbarWrapper.hasClass( 'float' ) ) {
 588+ $toolbarWrapper.css( 'height', 'auto' ).removeClass( 'float' );
 589+ $toolbar.css( { 'left': 0, 'right': 0 } );
 590+ }
 591+ }
 592+ } );
 593+
570594 var $modeButtons = $( '.es-modes-button' ),
571595 $panels = $( '.es-panel' ),
572596 $base = $( '#es-base' ),
573 - $window = $(window),
574597 currentMode = null,
575598 modes = {
576599 'wikitext': {

Status & tagging log