Santhosh has uploaded a new change for review. https://gerrit.wikimedia.org/r/259456
Change subject: Code cleanup for ext.cx.translationview module ...................................................................... Code cleanup for ext.cx.translationview module * Remove the cx jquery plugin, and directly use translation view widget * Rename the ContentTranslation class to ContentTranslationView * ContentTranslationView widget's scoll handler is removed. They are moved to header widget and tools column widget. The scroll handler also simplified. * Move the .stick-to-side LESS definition to ext.cx.common.less because it applies to both the header and tools columns Change-Id: I85190ab8835bb1c03dea652fc53e9a65ec066ad6 --- M extension.json M modules/header/ext.cx.header.js M modules/tools/ext.cx.tools.js M modules/translationview/ext.cx.translationview.js M modules/widgets/common/ext.cx.column.less M modules/widgets/common/ext.cx.common.less 6 files changed, 61 insertions(+), 72 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation refs/changes/56/259456/1 diff --git a/extension.json b/extension.json index 823e6bd..2f58427 100644 --- a/extension.json +++ b/extension.json @@ -322,6 +322,7 @@ "header/styles/ext.cx.header.less" ], "dependencies": [ + "jquery.throttle-debounce", "mediawiki.Uri", "mediawiki.jqueryMsg", "mediawiki.ui.button", @@ -483,6 +484,7 @@ "ext.cx.tools.template", "ext.cx.util.selection", "ext.cx.widgets.spinner", + "jquery.throttle-debounce", "jquery.uls.data", "mediawiki.jqueryMsg" ] diff --git a/modules/header/ext.cx.header.js b/modules/header/ext.cx.header.js index a4525d9..489338d 100644 --- a/modules/header/ext.cx.header.js +++ b/modules/header/ext.cx.header.js @@ -170,6 +170,7 @@ mw.hook( 'mw.cx.draft.restore-failed' ).add( function () { self.$draftStatus.text( mw.msg( 'cx-draft-restore-failed' ) ); } ); + $( window ).scroll( $.throttle( 250, $.proxy( this.scroll, this ) ) ); }; ContentTranslationHeader.prototype.updateSaveStatus = function ( status ) { @@ -253,6 +254,16 @@ .append( $headerTitle, $headerBar, this.$infoBar ); }; + ContentTranslationHeader.prototype.scroll = function () { + var scrollTop = $( window ).scrollTop(); + + if ( scrollTop > 0 ) { + this.$container.addClass( 'sticky' ); + } else { + this.$container.removeClass( 'sticky' ); + } + }; + /** * CX Header plugin. Prepares the Special:CX header and interactions. * diff --git a/modules/tools/ext.cx.tools.js b/modules/tools/ext.cx.tools.js index dbd4d78..ad1c030 100644 --- a/modules/tools/ext.cx.tools.js +++ b/modules/tools/ext.cx.tools.js @@ -98,6 +98,17 @@ ContentTranslationTools.prototype.listen = function () { mw.hook( 'mw.cx.select.word' ).add( $.proxy( this.updateSearch, this ) ); mw.hook( 'mw.cx.select.link' ).add( $.proxy( this.updateSearch, this ) ); + $( window ).scroll( $.throttle( 250, $.proxy( this.scroll, this ) ) ); + }; + + ContentTranslationTools.prototype.scroll = function () { + var scrollTop = $( window ).scrollTop(); + + if ( scrollTop > 0 ) { + this.$container.addClass( 'sticky' ); + } else { + this.$container.removeClass( 'sticky' ); + } }; $.fn.cxTools = function () { diff --git a/modules/translationview/ext.cx.translationview.js b/modules/translationview/ext.cx.translationview.js index da0954a..4281aed 100644 --- a/modules/translationview/ext.cx.translationview.js +++ b/modules/translationview/ext.cx.translationview.js @@ -11,11 +11,11 @@ 'use strict'; /** - * ContentTranslation + * ContentTranslationView * * @class */ - function ContentTranslation( element, siteMapper, options ) { + function ContentTranslationView( element, siteMapper, options ) { this.$container = $( element ); this.$translation = null; @@ -23,22 +23,19 @@ this.$source = null; this.$tools = null; - this.options = $.extend( true, {}, $.fn.cx.defaults, options ); + this.options = options; this.siteMapper = siteMapper; - - this.init(); } - ContentTranslation.prototype.init = function () { + ContentTranslationView.prototype.init = function () { this.render(); this.initComponents(); - this.listen(); }; /** * Initialize the components */ - ContentTranslation.prototype.initComponents = function () { + ContentTranslationView.prototype.initComponents = function () { var cx = this, modules; this.$header.cxHeader( this.siteMapper ); @@ -63,7 +60,7 @@ } }; - ContentTranslation.prototype.render = function () { + ContentTranslationView.prototype.render = function () { var $content; $content = $( '<div>' ).addClass( 'cx-widget' ) @@ -75,7 +72,7 @@ $( '<div>' ).addClass( 'cx-column cx-column--translation' ), $( '<div>' ).addClass( 'cx-column cx-column--tools' ) ) - ); + ); this.$container.append( $content ); this.$header = this.$container.find( '.cx-widget__header' ); @@ -84,45 +81,13 @@ this.$tools = this.$container.find( '.cx-column--tools' ); }; - ContentTranslation.prototype.listen = function () { - $( window ).scroll( $.proxy( this.scroll, this ) ); - }; - - ContentTranslation.prototype.scroll = function () { - var scrollTop = $( window ).scrollTop(), - // Use the top of source column as reference point - offsetTop = this.$source.offset().top; - - if ( scrollTop > offsetTop ) { - this.$header.addClass( 'sticky' ); - this.$tools.addClass( 'sticky' ); - } else if ( scrollTop <= offsetTop ) { - this.$header.removeClass( 'sticky' ); - this.$tools.removeClass( 'sticky' ); - } - }; - - $.fn.cx = function ( siteMapper, options ) { - return this.each( function () { - var $this = $( this ), - data = $this.data( 'cx' ); - - if ( !data ) { - $this.data( 'cx', ( data = new ContentTranslation( this, siteMapper, options ) ) ); - } - - if ( typeof options === 'string' ) { - data[ options ].call( $this ); - } - } ); - }; - - $.fn.cx.defaults = {}; - - // Set the global siteMapper for code which we cannot inject it - mw.cx.siteMapper = new mw.cx.SiteMapper( mw.config.get( 'wgContentTranslationSiteTemplates' ) ); - $( function () { - $( 'body' ).cx( mw.cx.siteMapper ); + var cxview, + container = document.body; + + // Set the global siteMapper for code which we cannot inject it + mw.cx.siteMapper = new mw.cx.SiteMapper( mw.config.get( 'wgContentTranslationSiteTemplates' ) ); + cxview = new ContentTranslationView( container, mw.cx.siteMapper ); + cxview.init(); } ); }( jQuery, mediaWiki ) ); diff --git a/modules/widgets/common/ext.cx.column.less b/modules/widgets/common/ext.cx.column.less index b609bd7..9ef7552 100644 --- a/modules/widgets/common/ext.cx.column.less +++ b/modules/widgets/common/ext.cx.column.less @@ -59,26 +59,3 @@ margin-bottom: 10px; word-wrap: break-word; } - -.stick-to-side() { - position: fixed; - top: 0; - right: 0; -} - -.stick-to-bottom() { - position: fixed; - top: auto; - bottom: 0; - left: 0; - box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.05); - max-height: 20%; - min-height: 3em; - overflow-x: hidden; - overflow-y: auto; - transition: max-height 0.25s; - - &:hover { - max-height: 50%; - } -} diff --git a/modules/widgets/common/ext.cx.common.less b/modules/widgets/common/ext.cx.common.less index 930ecdd..cfe73fb 100644 --- a/modules/widgets/common/ext.cx.common.less +++ b/modules/widgets/common/ext.cx.common.less @@ -13,3 +13,26 @@ padding-bottom: 50px; font-size: medium; } + +.stick-to-side() { + position: fixed; + top: 0; + right: 0; +} + +.stick-to-bottom() { + position: fixed; + top: auto; + bottom: 0; + left: 0; + box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.05); + max-height: 20%; + min-height: 3em; + overflow-x: hidden; + overflow-y: auto; + transition: max-height 0.25s; + + &:hover { + max-height: 50%; + } +} -- To view, visit https://gerrit.wikimedia.org/r/259456 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I85190ab8835bb1c03dea652fc53e9a65ec066ad6 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/ContentTranslation Gerrit-Branch: master Gerrit-Owner: Santhosh <santhosh.thottin...@gmail.com> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits