<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[12408] sites/trunk/wordpress.org/public_html/wp-content/plugins/gp-translation-helpers/js/editor.js: Translate: Update the events and selector to load the tabs in the right sidebar  with different events</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="http://meta.trac.wordpress.org/changeset/12408">12408</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"http://meta.trac.wordpress.org/changeset/12408","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>amieiro</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2023-02-20 18:24:22 +0000 (Mon, 20 Feb 2023)</dd>
</dl>

<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Translate: Update the events and selector to load the tabs in the right sidebar  with different events

Currently, the tab content was only loaded when a user double click on the row.
With this udpate, the info is loaded with double click, clicking in the "Details"
button and with the hotkeys, because the loading is fired when the translation
textarea gets the focus.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentpluginsgptranslationhelpersjseditorjs">sites/trunk/wordpress.org/public_html/wp-content/plugins/gp-translation-helpers/js/editor.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentpluginsgptranslationhelpersjseditorjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/plugins/gp-translation-helpers/js/editor.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/plugins/gp-translation-helpers/js/editor.js      2023-02-20 15:26:04 UTC (rev 12407)
+++ sites/trunk/wordpress.org/public_html/wp-content/plugins/gp-translation-helpers/js/editor.js        2023-02-20 18:24:22 UTC (rev 12408)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11,18 +11,14 @@
</span><span class="cx" style="display: block; padding: 0 10px">                change_visible_div( divId, originalId );
</span><span class="cx" style="display: block; padding: 0 10px">        } );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        // When a new translation row is opened (with double click), the tabs
-       // (header tab and content) for this row are updated with the Ajax query.
-       $gp.editor.table.on( 'dblclick', 'tr.preview td', function() {
-               loadTabsAndDivs( $( this ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // When a new translation row is opened (with double click, clicking in the "Details" button,
+       // or with the hotkeys), the translation textarea is focused, so the tabs (header tabs and
+       // divs with the content) for the right sidebar are updated.
+       $gp.editor.table.on( 'focus input', 'tr.editor textarea.foreign-text', function() {
+               var tr = $( this ).closest( 'tr.editor' );
+               loadTabsAndDivs( tr );
</ins><span class="cx" style="display: block; padding: 0 10px">         } );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        // When a new translation row is opened (clicking in the "Details" button), the
-       // tabs (header tab and content) for this row are updated with the Ajax query.
-       $gp.editor.table.on( 'click', '.action.edit', function( ) {
-               loadTabsAndDivs( $( this ) );
-       } );
-
</del><span class="cx" style="display: block; padding: 0 10px">         // Shows/hides the reply form for a comment in the discussion.
</span><span class="cx" style="display: block; padding: 0 10px">        $gp.editor.table.on( 'click', 'a.comment-reply-link', function( event ) {
</span><span class="cx" style="display: block; padding: 0 10px">                var commentId = $( this ).attr( 'data-commentid' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -202,7 +198,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">         * @param {Object} element The element that triggers the action.
</span><span class="cx" style="display: block; padding: 0 10px">         */
</span><span class="cx" style="display: block; padding: 0 10px">        function loadTabsAndDivs( element ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                var originalId = element.closest( 'tr' ).attr( 'id' ).substring( 8 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         var originalId = element.closest( 'tr' ).attr( 'id' ).substring( 7 );
</ins><span class="cx" style="display: block; padding: 0 10px">                 var requestUrl = $gp_translation_helpers_editor.translation_helper_url + originalId + '?nohc';
</span><span class="cx" style="display: block; padding: 0 10px">                $.getJSON( requestUrl, function( data ) {
</span><span class="cx" style="display: block; padding: 0 10px">                        $( '[data-tab="sidebar-tab-discussion-' + originalId + '"]' ).html( 'Discussion&nbsp;(' + data[ 'helper-translation-discussion-' + originalId ].count + ')' );
</span></span></pre>
</div>
</div>

</body>
</html>