Refactor translationeditor widget and pulling translation strings fro…

…m crowdin

Signed-off-by: Sam Poyigi <[email protected]>

resources/js/formwidgets/translationseditor.js

@@ -9,6 +9,7 @@
 
  TranslationsEditor.prototype.init = function () {
  $(document).on('change', '[data-control="string-filter"]', $.proxy(this.onSubmit))
+ $(document).on('click', '[data-control="edit-translation"]', $.proxy(this.onToggleEditMode))
  $('[data-control="search-translations"]').keyup($.proxy(this.onSubmitSearch))
  }
 
@@ -25,10 +26,39 @@
  }
  }
 
+ TranslationsEditor.prototype.onToggleEditMode = function (event) {
+ var $el = $(event.currentTarget),
+ $container = $el.closest('tr'),
+ $icon = $container.find('[data-control="edit-translation"] i'),
+ inputName = $el.data('input-name'),
+ source = $el.data('source'),
+ translation = $el.data('translation');
+
+ if (!$container.hasClass('editing')) {
+ $container.addClass('editing')
+ $icon.removeClass('fa-pencil').addClass('fa-xmark-circle')
+ $container.find('[data-toggle="translation-preview"]').hide()
+ $container.find('[data-toggle="translation-input"]').html(
+ '<input type="hidden" name="'+inputName+'[source]">'
+ +'<textarea rows="1" name="'+inputName+'[translation]" class="form-control"></textarea>'
+ )
+
+ $container.find('input').val(source)
+ $container.find('textarea').text(translation).focus()
+ } else if ($el.is('a')) {
+ if (confirm('Are you sure you want to cancel editing this translation?')) {
+ $container.removeClass('editing')
+ $icon.addClass('fa-pencil').removeClass('fa-xmark-circle')
+ $container.find('[data-toggle="translation-preview"]').show()
+ $container.find('[data-toggle="translation-input"]').empty()
+ }
+ }
+ }
+
  // INITIALIZATION
  // ============================
 
  $(document).render(function () {
  new TranslationsEditor()
  })
-}(window.jQuery);
+}(window.jQuery);

resources/js/updates.js

@@ -51,6 +51,7 @@
 
  this.showProgressBar()
 
+ console.log(steps)
  $.each(steps, function (index, step) {
  var timeout = 500
 
@@ -396,11 +397,11 @@
 
  modalBody: [
  '<div class="text-center py-4 px-3"><a>',
- '{{#thumb}}',
- '<img src="{{thumb}}" class="img-rounded" alt="No Image" style="width: 68px; height: 68px;">',
- '{{/thumb}}{{^thumb}}',
+ '{{#icon.url}}',
+ '<img src="{{icon.url}}" class="img-rounded" alt="No Image" style="width: 68px; height: 68px;">',
+ '{{/icon.url}}{{^icon.url}}',
  '<span class="extension-icon icon-lg rounded" style="{{icon.styles}};"><i class="{{icon.class}}"></i></span>',
- '{{/thumb}}',
+ '{{/icon.url}}',
  '</a><div class="pt-4">',
  '<p>{{{description}}}</p><span class="text-muted">Version:</span> <strong>{{version}}</strong>, ',
  '<span class="text-muted">Author:</span> <strong>{{author}}</strong>',

resources/lang/en/system.php

@@ -153,16 +153,15 @@
  'text_tab_files' => 'Translations',
  'text_tab_edit_file' => 'Edit Translations',
  'text_filter_search' => 'Search by name.',
- 'text_filter_file' => 'View all translations',
+ 'text_filter_file' => 'View all groups',
  'text_filter_translations' => 'Filter translations.',
  'text_empty' => 'There are no languages available.',
  'text_empty_translations' => 'There are no translations available.',
  'text_files' => 'files',
  'text_locale_strings' => 'Locale Strings (%s%% translated, %s strings)',
  'text_current_build' => 'Current build: %s',
- 'text_title_update_available' => 'Updates available',
- 'text_title_no_update_available' => 'No updates available',
- 'text_update_available' => 'New updates are available for (%s). Only unchanged translation strings will be updated.',
+ 'text_title_update_available' => 'New translation strings are available for (%s).',
+ 'text_update_available' => 'Only the translation strings that haven’t been modified will be updated.',
  'text_no_update_available' => '(%s) is up to date',
 
  'column_code' => 'Code',
@@ -179,9 +178,13 @@
  'button_apply_update' => 'Apply updates',
 
  'help_language' => 'Use a full locale code (e.g. “fr_FR”) instead of just a generic language code (e.g. “fr”), must be same as the locale directory.',
+ 'help_locale_strings' => 'Make sure NOT to translate placeholders like <b>%s</b> or <b>:name</b>. Leave them as is.',
 
  'alert_set_default' => 'Language set as default',
  'alert_save_changes' => 'Your changes will be lost if you don\'t save them before editing another language file.',
+ 'alert_update_complete' => '%s: Translation strings for (%s) have been updated.',
+ 'alert_update_failed' => '%s: Failed to update translation strings for (%s).',
+ 'alert_update_progress' => '%s: Pulling translation strings for (%s)...',
 
  'translations' => [
 

resources/models/system/language.php

@@ -21,12 +21,6 @@
  'class' => 'btn btn-primary',
  'href' => 'languages/create',
  ],
- 'browse' => [
- 'label' => 'lang:igniter::system.languages.button_browse',
- 'class' => 'btn btn-default',
- 'href' => 'https://tastyigniter.com/translate',
- 'target' => '_blank',
- ],
  ],
 ];
 
@@ -152,6 +146,7 @@
  'comment' => 'lang:igniter::system.languages.help_language',
  ],
 ];
+
 $config['form']['tabs'] = [
  'defaultTab' => 'lang:igniter::system.languages.text_tab_general',
  'fields' => [

resources/scss/components/_buttons.scss

@@ -32,7 +32,8 @@
 }
 
 .btn-primary,
-.btn-success {
+.btn-success,
+.btn-danger {
  color: $white;
 
  &:hover,

resources/scss/components/_pagination.scss

@@ -9,6 +9,12 @@
  border-radius: $border-radius;
  }
 
+ li:not(:first-child) {
+ .page-link {
+ margin-left: 1px;
+ }
+ }
+
  > li > a,
  > li > span {
  margin: 0 1px;

resources/views/admin/_partials/flash.blade.php

@@ -3,7 +3,7 @@
  <div
  data-control="flash-overlay"
  data-title="{{ array_get($message, 'title') }}"
- data-text="{!! htmlentities(array_get($message, 'message')) !!}"
+ data-text="{{html(array_get($message, 'message'))}}"
  data-level="{{ $message['level'] }}"
  data-close-on-click-outside="{{ $message['important'] ? 'false' : 'true' }}"
  data-close-on-esc="{{ $message['important'] ? 'false' : 'true' }}"
@@ -13,7 +13,7 @@
  @class(['alert alert-'.$message['level'], 'alert-important' => $message['important']])
  data-control="flash-message"
  data-level="{{ $message['level'] }}"
- data-text="{!! htmlentities(array_get($message, 'message')) !!}"
+ data-text="{{html(array_get($message, 'message'))}}"
  data-allow-dismiss="{{ $message['important'] ? 'false' : 'true' }}"
  role="alert"
  ></div>

resources/views/system/_partials/languages/translationseditor.blade.php

@@ -4,45 +4,56 @@ class="field-translationseditor"
  data-control="translationseditor"
  data-alias="{{ $this->alias }}"
 >
- <label
- for="{{ $this->getId('items') }}"
- >{{ sprintf(lang('igniter::system.languages.text_locale_strings'), $translatedProgress, $totalStrings) }}</label>
+ <h5
+ class="fw-600"
+ >{{ sprintf(lang('igniter::system.languages.text_locale_strings'), $translatedProgress, $totalStrings) }}</h5>
+ <span class="help-block">@lang('igniter::system.languages.help_locale_strings')</span>
  <div
  id="{{ $this->getId('items') }}"
- class="table-responsive"
+ class="table-responsive mt-3"
  >
- <table class="table mb-0 border-bottom">
+ <table class="table mb-0">
  <thead>
  <tr>
- <th width="45%">@lang('igniter::system.languages.column_variable')</th>
+ <th width="1"></th>
  <th>{{ sprintf(lang('igniter::system.languages.column_language'), $this->model->name) }}</th>
+ <th width="45%">@lang('igniter::system.languages.column_variable')</th>
  </tr>
  </thead>
  <tbody>
  @if ($field->options && $field->options->count())
  @foreach($field->options as $key => $value)
  <tr>
  <td>
- <p>{{ $value['source'] }}</p>
- <span class="text-muted">{{ $key }}</span>
+ <a
+ role="button"
+ class="btn btn-link"
+ data-control="edit-translation"
+ data-input-name="{{ $field->getName() }}[{{ $key }}]"
+ data-source="{{ $value['source'] }}"
+ data-translation='{!! $value['translation'] !!}'
+ ><i class="fa fa-pencil"></i></a>
+ </td>
+ <td
+ data-control="edit-translation"
+ data-input-name="{{ $field->getName() }}[{{ $key }}]"
+ data-source="{{ $value['source'] }}"
+ data-translation="{{$value['translation']}}"
+ >
+ <div data-toggle="translation-preview">
+ <p class="mb-1">{{ $value['translation'] ?: '--' }}</p>
+ </div>
+ <div data-toggle="translation-input"></div>
  </td>
  <td>
- <input
- type="hidden"
- name="{{ $field->getName() }}[{{ $key }}][source]"
- value="{{ $value['source'] }}"
- />
- <textarea
- class="form-control"
- rows="3"
- name="{{ $field->getName() }}[{{ $key }}][translation]"
- >{!! $value['translation'] !!}</textarea>
+ <p class="mb-1">{{ $value['source'] }}</p>
+ <span class="text-muted small">{{ $key }}</span>
  </td>
  </tr>
  @endforeach
- <tr class="border-top">
- <td colspan="999">
- <div class="d-flex justify-content-end">
+ <tr>
+ <td class="border-bottom-0" colspan="999">
+ <div class="d-flex justify-content-end pt-3">
  {!! $field->options->render() !!}
  </div>
  </td>

resources/views/system/_partials/languages/updates.blade.php

@@ -1,31 +1,44 @@
 <div class="modal-dialog modal-dialog-scrollable">
  <div class="modal-content">
- <div class="modal-header">
- <h4 class="modal-title">@lang($title)</h4>
- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
- </div>
- <div class="modal-body text-center">
+ @if($updates)
+ <div class="modal-header">
+  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+  </div>
+  <div class="modal-body text-center">
  <span class="fa-stack fa-3x text-muted">
  <i class="fa-solid fa-circle fa-stack-2x"></i>
  <i class="fa-solid fa-arrow-up fa-stack-1x fa-inverse"></i>
  </span>
- <p class="lead mt-4">{{$message}}</p>
- </div>
+ <p class="lead mt-4">{{sprintf(lang('igniter::system.languages.text_title_update_available'), $locale)}}</p>
+ <p>@lang('igniter::system.languages.text_update_available')</p>
+ </div>
+ @else
+ <div class="modal-header">
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+ </div>
+ <div class="modal-body text-center">
+ <span class="fa-stack fa-3x text-muted">
+ <i class="fa-solid fa-circle fa-stack-2x"></i>
+ <i class="fa-solid fa-arrow-up fa-stack-1x fa-inverse"></i>
+ </span>
+ <p class="lead mt-4">{{sprintf(lang('igniter::system.languages.text_no_update_available'), $locale)}}</p>
+ </div>
+ @endif
  <div class="modal-footer progress-indicator-container">
  <button
  type="button"
  class="btn btn-link"
  data-bs-dismiss="modal"
  >@lang('igniter::admin.button_close')</button>
- @isset($language->code)
+ @if($updates)
  <button
- type="button"
+ type="submit"
  id="apply-updates"
  class="btn btn-primary"
+ data-control="apply-updates"
  data-progress-indicator="@lang('igniter::admin.text_loading')"
  >@lang('igniter::system.languages.button_apply_update')</button>
- @endisset
+ @endif
  </div>
  </div>
- {!! form_close() !!}
 </div>

src/Flame/Translation/FileLoader.php

@@ -61,16 +61,20 @@ protected function loadNamespaceOverrides(array $lines, $locale, $group, $namesp
  return $lines;
  }
 
- $namespace = str_replace('.', '/', $namespace);
+ $slashNamespace = str_replace('.', '/', $namespace);
+ $hyphenNamespace = str_replace('.', '-', $namespace);
 
- $file = "{$path}/{$locale}/{$namespace}/{$group}.php";
- if ($this->files->exists($file)) {
- return array_replace_recursive($lines, $this->files->getRequire($file));
- }
-
- $file = "{$path}/bundles/{$locale}/{$namespace}/{$group}.php";
- if ($this->files->exists($file)) {
- return array_replace_recursive($lines, $this->files->getRequire($file));
+ foreach ([
+ "$path/vendor/$slashNamespace/$locale/$group.php",
+ "$path/vendor/$hyphenNamespace/$locale/$group.php",
+ "$path/$locale/$slashNamespace/$group.php",
+ "$path/$locale/$hyphenNamespace/$group.php",
+ "$path/bundles/$locale/$slashNamespace/$group.php",
+ "$path/bundles/$locale/$hyphenNamespace/$group.php",
+ ] as $file) {
+ if ($this->files->exists($file)) {
+ return array_replace_recursive($lines, $this->files->getRequire($file));
+ }
  }
 
  return $lines;

src/System/Classes/HubManager.php

@@ -57,7 +57,7 @@ public function setCarte(string $key, ?array $info = null): void
  setting()->setPref($params);
  }
 
- protected function requestRemoteData(string $uri, array $params = []): array
+ protected function requestRemoteData(string $uri, array $params = [], ?string $eTag = null): array
  {
  $client = Http::baseUrl(config('igniter-system.hubEndpoint', static::ENDPOINT));
 
@@ -73,6 +73,11 @@ protected function requestRemoteData(string $uri, array $params = []): array
  throw new SystemException($response->json('message'));
  }
 
+ throw_if(
+ $eTag && $response->header('TI-ETag') !== $eTag,
+ new SystemException('ETag mismatch, please try again.')
+ );
+
  return $response->json();
  }
 
@@ -122,16 +127,16 @@ public function listLanguages(array $filter = []): array
  return $this->requestRemoteData('languages', $filter);
  }
 
- public function applyLanguagePack(string $locale, ?string $build = null): array
+ public function applyLanguagePack(string $locale, ?array $items = null): array
  {
  return $this->requestRemoteData('language/apply', [
  'locale' => $locale,
- 'build' => $build,
+ 'items' => $items,
  ]);
  }
 
- public function downloadLanguagePack(string $filePath, string $fileHash, array $params = []): array
+ public function downloadLanguagePack(string $eTag, array $params = []): array
  {
- return $this->requestRemoteData('language/download', $params, $filePath, $fileHash);
+ return $this->requestRemoteData('language/download', $params, $eTag);
  }
 }