wikimedia/mediawiki-extensions-Translate

/*!
 * Translate editor shortcuts
 */
( function () {
    'use strict';
    var translateEditorShortcuts = {
        /**
         * @internal
         */
        showShortcuts: function () {
            // Any better way?
            var rtl = $( document.body ).is( '.rtl' );

            var editorOffset = this.$editor.offset();
            var minTop = editorOffset.top;
            var maxTop = minTop + this.$editor.outerHeight();
            var middle = minTop + ( maxTop - minTop ) / 2;
            var maxLeft = rtl ? editorOffset.left : editorOffset.left + this.$editor.outerWidth();

            this.hideShortcuts();

            // For scrolling up and down
            $( '<div>' )
                .text( '↑' )
                .addClass( 'shortcut-popup' )
                .appendTo( document.body )
                .offset( { top: middle - 15, left: maxLeft } )
                .css( 'transform', 'translate( -50%, 0 )' );

            $( '<div>' )
                .text( '↓' )
                .addClass( 'shortcut-popup' )
                .appendTo( document.body )
                .offset( { top: middle + 15, left: maxLeft } )
                .css( 'transform', 'translate( -50%, 0 )' );

            this.$editor.find( '.shortcut-activated:visible' ).each( function ( index ) {
                var offset = getStartCornerOffsetOf( $( this ), rtl );

                // Let's not have numbers appear outside the editor over other content
                if ( offset.top > maxTop || offset.top < minTop ) {
                    return;
                }

                $( '<div>' )
                    .text( index + 1 )
                    .addClass( 'shortcut-popup' )
                    .appendTo( document.body )
                    .offset( offset )
                    .css( 'transform', 'translate( -50%, -50% )' );
            } );
        },

        /**
         * @internal
         */
        hideShortcuts: function () {
            $( '.shortcut-popup' ).remove();
        }
    };

    function getStartCornerOffsetOf( $element, rtl ) {
        var offset = $element.offset();

        if ( rtl ) {
            offset.left += $element.outerWidth();
        }

        return offset;
    }

    mw.translate.editor = mw.translate.editor || {};
    $.extend( mw.translate.editor, translateEditorShortcuts );

}() );