Merge pull request #386 from phpony/master

Multiple translation issues + RU lang file

src/js/core/gui/gui-colors.js

@@ -5,14 +5,15 @@
 
 import config from './../../config.js';
 import Helper_class from './../../libs/helpers.js';
+import Tools_translate_class from './../../modules/tools/translate.js';
 
 const Helper = new Helper_class();
 
 const sidebarTemplate = `
  <div class="ui_flex_group justify_content_space_between stacked">
  <div id="selected_color_sample" class="ui_color_sample" title="Current Color Preview"></div>
  <div class="ui_button_group">
- <button id="toggle_color_picker_section_button" aria-pressed="true" class="ui_icon_button" title="Toggle Color Picker">
+ <button id="toggle_color_picker_section_button" aria-pressed="true" class="ui_icon_button trn" title="Toggle Color Picker">
  <span class="sr_only">Toggle Color Picker</span>
  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="https://www.w3.org/2000/svg">
  <rect width="24" height="24" opacity="0" />
@@ -23,7 +24,7 @@ const sidebarTemplate = `
  <path d="M6.16 11.26a1.5 1.5 0 1 0 2.08.4 1.49 1.49 0 0 0-2.08-.4z" />
  </svg>
  </button>
- <button id="toggle_color_channels_section_button" aria-pressed="true" class="ui_icon_button" title="Toggle Color Channels">
+ <button id="toggle_color_channels_section_button" aria-pressed="true" class="ui_icon_button trn" title="Toggle Color Channels">
  <span class="sr_only">Toggle Color Channels</span>
  <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-card-list" fill="currentColor" xmlns="https://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
@@ -33,7 +34,7 @@ const sidebarTemplate = `
  <circle cx="3.5" cy="10.5" r=".5"/>
  </svg>
  </button>
- <button id="toggle_color_swatches_section_button" aria-pressed="true" class="ui_icon_button" title="Toggle Swatches">
+ <button id="toggle_color_swatches_section_button" aria-pressed="true" class="ui_icon_button trn" title="Toggle Swatches">
  <span class="sr_only">Toggle Swatches</span>
  <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-grid-3x2" fill="currentColor" xmlns="https://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M0 3.5A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v8a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 11.5v-8zM1.5 3a.5.5 0 0 0-.5.5V7h4V3H1.5zM5 8H1v3.5a.5.5 0 0 0 .5.5H5V8zm1 0h4v4H6V8zm4-1H6V3h4v4zm1 1v4h3.5a.5.5 0 0 0 .5-.5V8h-4zm0-1V3h3.5a.5.5 0 0 1 .5.5V7h-4z"/>
@@ -101,11 +102,11 @@ const dialogTemplate = `
  <div class="block_section">
  <div class="ui_input_grid stacked">
  <div class="ui_input_group">
- <label class="label_width_medium">Current</label>
+ <label class="label_width_medium trn">Current</label>
  <div id="dialog_selected_color_sample" class="ui_color_sample"></div>
  </div>
  <div class="ui_input_group">
- <label class="label_width_medium">Previous</label>
+ <label class="label_width_medium trn">Previous</label>
  <div id="dialog_previous_color_sample" class="ui_color_sample"></div>
  </div>
  </div>
@@ -177,6 +178,7 @@ class GUI_colors_class {
  this.sections = null;
  this.inputs = null;
  this.Helper = new Helper_class();
+ this.Tools_translate = new Tools_translate_class();
  }
 
  render_main_colors(uiType) {
@@ -190,6 +192,9 @@ class GUI_colors_class {
  this.el = document.getElementById('toggle_colors');
  this.el.innerHTML = sidebarTemplate;
  }
+ if (config.LANG != 'en') {
+ this.Tools_translate.translate(config.LANG, this.el);
+ }
  this.init_components();
  this.render_ui_deferred = Helper.throttle(this.render_ui_deferred, 50);
  }

src/js/core/gui/gui-details.js

@@ -15,17 +15,17 @@ var template = `
  <div class="row">
  <span class="trn label">X</span>
  <input type="number" id="detail_x" step="any" />
- <button class="extra reset" type="button" id="reset_x" title="Reset">Reset</button>
+ <button class="extra reset trn" type="button" id="reset_x" title="Reset">Reset</button>
  </div>
  <div class="row">
  <span class="trn label">Y:</span>
  <input type="number" id="detail_y" step="any" />
- <button class="extra reset" type="button" id="reset_y" title="Reset">Reset</button>
+ <button class="extra reset trn" type="button" id="reset_y" title="Reset">Reset</button>
  </div>
  <div class="row">
  <span class="trn label">Width:</span>
  <input type="number" id="detail_width" step="any" />
- <button class="extra reset" type="button" id="reset_size" title="Reset">Reset</button>
+ <button class="extra reset trn" type="button" id="reset_size" title="Reset">Reset</button>
  </div>
  <div class="row">
  <span class="trn label">Height:</span>
@@ -35,12 +35,12 @@ var template = `
  <div class="row">
  <span class="trn label">Rotate:</span>
  <input type="number" min="-360" max="360" id="detail_rotate" />
- <button class="extra reset" type="button" id="reset_rotate" title="Reset">Reset</button>
+ <button class="extra reset trn" type="button" id="reset_rotate" title="Reset">Reset</button>
  </div>
  <div class="row">
  <span class="trn label">Opacity:</span>
  <input type="number" min="0" max="100" id="detail_opacity" />
- <button class="extra reset" type="button" id="reset_opacity" title="Reset">Reset</button>
+ <button class="extra reset trn" type="button" id="reset_opacity" title="Reset">Reset</button>
  </div>
  <div class="row">
  <span class="trn label">Color:</span>
@@ -122,11 +122,14 @@ class GUI_details_class {
  this.Tools_settings = new Tools_settings_class();
  this.Helper = new Helper_class();
  this.layer_details_active = false;
+ this.Tools_translate = new Tools_translate_class();
  }
 
  render_main_details() {
  document.getElementById('toggle_details').innerHTML = template;
-
+ if (config.LANG != 'en') {
+ this.Tools_translate.translate(config.LANG, document.getElementById('toggle_details'));
+ }
  this.render_details(true);
  }
 

src/js/core/gui/gui-information.js

@@ -7,6 +7,7 @@ import config from './../../config.js';
 import Base_layers_class from './../base-layers.js';
 import Tools_settings_class from './../../modules/tools/settings.js';
 import Helper_class from './../../libs/helpers.js';
+import Tools_translate_class from './../../modules/tools/translate.js';
 
 var template = `
  <span class="trn label">Size:</span>
@@ -30,7 +31,7 @@ class GUI_information_class {
  this.Base_layers = new Base_layers_class();
  this.Tools_settings = new Tools_settings_class();
  this.Helper = new Helper_class();
-
+ this.Tools_translate = new Tools_translate_class();
  this.last_width = null;
  this.last_height = null;
  this.units = this.Tools_settings.get_setting('default_units');
@@ -39,6 +40,9 @@ class GUI_information_class {
 
  render_main_information() {
  document.getElementById('toggle_info').innerHTML = template;
+ if (config.LANG != 'en') {
+ this.Tools_translate.translate(config.LANG, document.getElementById('toggle_info'));
+ }
  this.set_events();
  this.show_size();
  }

src/js/core/gui/gui-layers.js

@@ -11,14 +11,15 @@ import Layer_rename_class from './../../modules/layer/rename.js';
 import Effects_browser_class from './../../modules/effects/browser.js';
 import Layer_duplicate_class from './../../modules/layer/duplicate.js';
 import Layer_raster_class from './../../modules/layer/raster.js';
+import Tools_translate_class from './../../modules/tools/translate.js';
 
 var template = `
- <button type="button" class="layer_add" id="insert_layer" title="Insert new layer">+</button>
- <button type="button" class="layer_duplicate" id="layer_duplicate" title="Duplicate layer">D</button>
- <button type="button" class="layer_raster" id="layer_raster" title="Convert layer to raster">R</button>
+ <button type="button" class="layer_add trn" id="insert_layer" title="Insert new layer">+</button>
+ <button type="button" class="layer_duplicate trn" id="layer_duplicate" title="Duplicate layer">D</button>
+ <button type="button" class="layer_raster trn" id="layer_raster" title="Convert layer to raster">R</button>
 
- <button type="button" class="layers_arrow" title="Move layer down" id="layer_down">&darr;</button>
- <button type="button" class="layers_arrow" title="Move layer up" id="layer_up">&uarr;</button>
+ <button type="button" class="layers_arrow trn" title="Move layer down" id="layer_down">&darr;</button>
+ <button type="button" class="layers_arrow trn" title="Move layer up" id="layer_up">&uarr;</button>
 
  <div class="layers_list" id="layers"></div>
 `;
@@ -35,12 +36,15 @@ class GUI_layers_class {
  this.Effects_browser = new Effects_browser_class();
  this.Layer_duplicate = new Layer_duplicate_class();
  this.Layer_raster = new Layer_raster_class();
+ this.Tools_translate = new Tools_translate_class();
  }
 
  render_main_layers() {
  document.getElementById('layers_base').innerHTML = template;
+ if (config.LANG != 'en') {
+ this.Tools_translate.translate(config.LANG, document.getElementById('layers_base'));
+ }
  this.render_layers();
-
  this.set_events();
  }
 
@@ -151,10 +155,10 @@ class GUI_layers_class {
 
  html += '<div class="item ' + class_extra + '">';
  if (value.visible == true)
- html += ' <button class="visibility visible" id="visibility" data-id="' + value.id + '" title="Hide"></button>';
+ html += ' <button class="visibility visible trn" id="visibility" data-id="' + value.id + '" title="Hide"></button>';
  else
- html += ' <button class="visibility" id="visibility" data-id="' + value.id + '" title="Show"></button>';
- html += ' <button class="delete" id="delete" data-id="' + value.id + '" title="Delete"></button>';
+ html += ' <button class="visibility trn" id="visibility" data-id="' + value.id + '" title="Show"></button>';
+ html += ' <button class="delete trn" id="delete" data-id="' + value.id + '" title="Delete"></button>';
 
  if(value.composition === 'source-atop'){
  html += ' <button class="arrow_down" data-id="' + value.id + '" ></button>';
@@ -185,6 +189,9 @@ class GUI_layers_class {
 
  //register
  document.getElementById(target_id).innerHTML = html;
+ if (config.LANG != 'en') {
+ this.Tools_translate.translate(config.LANG, document.getElementById(target_id));
+ }
  }
 }
 

src/js/core/gui/gui-menu.js

@@ -46,8 +46,12 @@ class GUI_menu_class {
  document.body.addEventListener('mousedown', (event) => { return this.on_mouse_down_body(event); }, true);
  document.body.addEventListener('touchstart', (event) => { return this.on_mouse_down_body(event); }, true);
  window.addEventListener('resize', (event) => { return this.on_resize_window(event); }, true);
-
+ 
  document.body.classList.add('loaded');
+
+ if (config.LANG != 'en') {
+ this.Tools_translate.translate(config.LANG, this.menuContainer);
+ }
  }
 
  on(eventName, callback) {

src/js/core/gui/gui-tools.js

@@ -252,8 +252,9 @@ class GUI_tools_class {
  }
 
  var elementTitle = document.createElement('label');
- elementTitle.innerHTML = title + ': ';
+ elementTitle.innerHTML = title + ':';
  elementTitle.id = 'attribute_label_' + k;
+ elementTitle.className = 'trn';
 
  const elementInput = document.createElement('input');
  elementInput.type = 'number';
@@ -293,8 +294,9 @@ class GUI_tools_class {
  //select
 
  var elementTitle = document.createElement('label');
- elementTitle.innerHTML = title + ': ';
+ elementTitle.innerHTML = title + ':';
  elementTitle.for = k;
+ elementTitle.className = 'trn';
 
  var selectList = document.createElement("select");
  selectList.id = k;
@@ -340,8 +342,9 @@ class GUI_tools_class {
  //color
 
  var elementTitle = document.createElement('label');
- elementTitle.innerHTML = title + ': ';
+ elementTitle.innerHTML = title + ':';
  elementTitle.for = k;
+ elementTitle.className = 'trn';
 
  var colorInput = document.createElement('input');
  colorInput.type = 'color';