jQuery Integration

/**
 * jQuery shortcut for translation function (available when jQuery is loaded)
 * @param key - Translation key or array of keys
 * @param options - Translation options
 * @returns Translated string
 */
$.t(key, options): string;

// Basic jQuery translation
console.log($.t('welcome')); // "Welcome"

// With interpolation
console.log($.t('greeting', { name: 'John' })); // "Hello John"

// With pluralization
console.log($.t('item', { count: 5 })); // "5 items"

// Use in jQuery chains
$('#message').text($.t('welcome.message'));
$('#greeting').html($.t('user.greeting', { name: userName }));

// Conditional translations
if ($.t('optional.feature') !== 'optional.feature') {
  $('#feature').show().text($.t('optional.feature'));
}

/**
 * jQuery plugin for DOM localization using data-i18n attributes
 * @param options - Translation options to apply to all elements
 * @returns jQuery object for chaining
 */
$.fn.i18n(options): jQuery;

<!-- HTML with data-i18n attributes -->
<h1 data-i18n="page.title">Page Title</h1>
<p data-i18n="page.description">Description text</p>
<button data-i18n="buttons.save">Save</button>

<!-- Attribute-specific translations -->
<input type="text" data-i18n="[placeholder]forms.email.placeholder" placeholder="Email">
<img data-i18n="[alt]images.logo.alt" alt="Logo" src="logo.png">

<!-- Multiple attributes -->
<button data-i18n="[title]buttons.save.tooltip;buttons.save" title="Save tooltip">Save</button>

// Initialize localization for all elements
$('[data-i18n]').i18n();

// Localize specific container and children
$('#content').i18n();

// Localize with options
$('[data-i18n]').i18n({
  lng: 'es',
  count: itemCount
});

// Localize on language change
i18n.setLng('fr', function() {
  $('[data-i18n]').i18n(); // Re-translate all elements
});

// Localize dynamically added content
function addContent() {
  const newElement = $('<p data-i18n="dynamic.content">Loading...</p>');
  $('#container').append(newElement);
  newElement.i18n(); // Translate the new element
}

<!-- Basic key translation -->
<span data-i18n="welcome">Welcome</span>

<!-- Nested key with dot notation -->
<h2 data-i18n="user.profile.title">User Profile</h2>

<!-- Namespace-specific key -->
<button data-i18n="common:buttons.submit">Submit</button>

<!-- Translate specific attributes -->
<input data-i18n="[placeholder]forms.search.placeholder" type="text">
<img data-i18n="[alt]images.header.alt" src="header.jpg">
<a data-i18n="[title]links.home.tooltip" href="/">Home</a>

<!-- Multiple attributes -->
<button data-i18n="[title]buttons.delete.confirm;buttons.delete">Delete</button>

<!-- HTML content -->
<div data-i18n="[html]content.rich">Rich HTML content</div>

<!-- Data attributes -->
<div data-i18n="[data-value]config.theme">Theme</div>

<!-- Prepend/append content -->
<div data-i18n="[prepend]prefix.text">Existing content</div>
<div data-i18n="[append]suffix.text">Existing content</div>

<!-- Inline options as JSON -->
<span data-i18n="greeting" 
      data-i18n-options='{"name": "John", "count": 5}'>Hello</span>

<!-- Options via data attributes -->
<span data-i18n="item" 
      data-count="3">Items</span>

<!-- Default value from content -->
<span data-i18n="missing.key">Default Content</span>

<form id="loginForm">
  <label data-i18n="forms.login.email">Email:</label>
  <input type="email" 
         data-i18n="[placeholder]forms.login.email.placeholder"
         placeholder="Enter email">
  
  <label data-i18n="forms.login.password">Password:</label>
  <input type="password" 
         data-i18n="[placeholder]forms.login.password.placeholder"
         placeholder="Enter password">
  
  <button type="submit" data-i18n="forms.login.submit">Login</button>
  <a href="#" data-i18n="forms.login.forgot">Forgot password?</a>
</form>

// Localize form
$('#loginForm').i18n();

// Localize with validation messages
$('#loginForm').i18n().find('input').on('invalid', function(e) {
  const field = $(this).attr('name');
  const message = $.t(`validation.${field}.required`);
  this.setCustomValidity(message);
});

function addNotification(type, messageKey, options) {
  const notification = $(`
    <div class="notification ${type}">
      <span data-i18n="${messageKey}">Loading...</span>
      <button data-i18n="buttons.close" class="close">×</button>
    </div>
  `);
  
  $('#notifications').append(notification);
  
  // Localize the new notification
  notification.i18n(options);
  
  return notification;
}

// Usage
addNotification('success', 'messages.saved', { filename: 'document.pdf' });
addNotification('error', 'errors.network');

<table id="dataTable">
  <thead>
    <tr>
      <th data-i18n="table.headers.name">Name</th>
      <th data-i18n="table.headers.email">Email</th>
      <th data-i18n="table.headers.status">Status</th>
      <th data-i18n="table.headers.actions">Actions</th>
    </tr>
  </thead>
  <tbody>
    <!-- Dynamic rows -->
  </tbody>
</table>

function addTableRow(user) {
  const row = $(`
    <tr>
      <td>${user.name}</td>
      <td>${user.email}</td>
      <td data-i18n="status.${user.status}">Status</td>
      <td>
        <button data-i18n="buttons.edit" data-user-id="${user.id}">Edit</button>
        <button data-i18n="buttons.delete" data-user-id="${user.id}">Delete</button>
      </td>
    </tr>
  `);
  
  $('#dataTable tbody').append(row);
  row.i18n(); // Localize the new row
}

function showModal(titleKey, contentKey, options) {
  const modal = $(`
    <div class="modal">
      <div class="modal-content">
        <h2 data-i18n="${titleKey}">Loading...</h2>
        <p data-i18n="${contentKey}">Loading...</p>
        <div class="modal-actions">
          <button data-i18n="buttons.ok" class="primary">OK</button>
          <button data-i18n="buttons.cancel" class="secondary">Cancel</button>
        </div>
      </div>
    </div>
  `);
  
  $('body').append(modal);
  modal.i18n(options);
  modal.show();
  
  return modal;
}

// Usage
showModal('dialogs.confirm.title', 'dialogs.confirm.message', {
  action: 'delete',
  item: 'user account'
});

// Configure custom selector attribute
i18n.init({
  selectorAttr: 'data-translate', // Use data-translate instead of data-i18n
  // ... other options
});

// Use custom attribute
$('[data-translate]').i18n();

<div data-i18n="content.main" data-i18n-target=".inner">
  <div class="wrapper">
    <div class="inner">This will be translated</div>
  </div>
</div>

function conditionalTranslate(selector, condition) {
  $(selector).each(function() {
    const $element = $(this);
    const key = $element.data('i18n');
    
    if (condition) {
      $element.text($.t(key));
    } else {
      $element.text($.t(key + '.disabled'));
    }
  });
}

// Usage
conditionalTranslate('[data-i18n^="premium."]', user.isPremium);

function createLanguageSwitcher(languages) {
  const switcher = $('<div class="language-switcher"></div>');
  
  languages.forEach(lang => {
    const button = $(`
      <button class="lang-button" data-lang="${lang.code}">
        ${lang.name}
      </button>
    `);
    
    if (lang.code === i18n.lng()) {
      button.addClass('active');
    }
    
    button.on('click', function() {
      const newLang = $(this).data('lang');
      
      i18n.setLng(newLang, function() {
        // Update all translated content
        $('[data-i18n]').i18n();
        
        // Update active state
        $('.lang-button').removeClass('active');
        $(this).addClass('active');
        
        // Update text direction
        $('html').attr('dir', i18n.dir());
      }.bind(this));
    });
    
    switcher.append(button);
  });
  
  return switcher;
}

// Usage
const languages = [
  { code: 'en', name: 'English' },
  { code: 'es', name: 'Español' },
  { code: 'fr', name: 'Français' }
];

$('#header').append(createLanguageSwitcher(languages));

// Efficient batch translation
function batchTranslate() {
  // Collect all elements first
  const $elements = $('[data-i18n]');
  
  // Batch process to avoid repeated DOM queries
  $elements.i18n();
}

// Debounced re-translation
let translateTimeout;
function debouncedTranslate() {
  clearTimeout(translateTimeout);
  translateTimeout = setTimeout(batchTranslate, 100);
}

// Optimized for dynamic content
function addTranslatedContent(html) {
  const $content = $(html);
  $('#container').append($content);
  
  // Only translate the new content
  $content.find('[data-i18n]').addBack('[data-i18n]').i18n();
}

/**
 * Translate DOM elements without jQuery dependency
 * @param element - DOM element or document to translate
 * @param options - Translation options
 */
i18n.translateObject(element, options): void;

// Native DOM translation
i18n.translateObject(document);

// Translate specific element
const container = document.getElementById('content');
i18n.translateObject(container);

// With options
i18n.translateObject(document, { lng: 'es' });