Translations support, ability to hide tools

Author: ivictbor

README.md

@@ -110,6 +110,8 @@ Configuration
 |`backgroundFillColor` | Default background color when image created/erased | "#ffffff" |
 |`defaultFontSize` | Default font size in pixels | 24 |
 |`defaultSize` | default image size, should be string in format `<width>x<height>` in pixel, e.g. `'200x100'`. If value is `'fill'`(default) than all container size will be used | `'fill'` |
+|`hiddenTools` | List of tools that you do not want to see in Painterro
+    e.g. something of this list `['crop', 'line', 'rect', 'ellipse', 'brush', 'text', 'rotate', 'resize',  'save', 'open', 'close']` | [] |
 
 UI color scheme
 ===============
@@ -138,6 +140,25 @@ Painterro({
 |`backgroundColor`| Background color of component area which left outside of image due to it size/ratio | '#999999' |
 |`dragOverBarColor`| Color of bar when dropping file to painterro | '#899dff' |
 
+
+Translation
+-----------
+
+If you want to translate or change strings you can du this by passing `translation` parameter
+
+```js
+Painterro({
+  translation: {
+    name: 'ua',
+    strings: {
+      apply: 'Застосувати'    
+    }
+  }
+}).show()
+```
+For all values that can be translated see `js/translation.js`
+    
+
 Saving image
 ============
 

build/index.html

@@ -44,7 +44,9 @@
 //    }
 //  });
 
-  Painterro().show();
+  Painterro({
+
+  }).show();
 </script>
 </body>
 </html>

css/styles.css

@@ -186,10 +186,7 @@
     font-family: "Open Sans", sans-serif;
     font-size: 10px;
     float: right;
-    padding: 4px 4px 4px 0;
-    position: absolute;
-    right: 110px;
-    bottom: 0;
+    padding: 22px  4px 4px 0;
 }
 
 .ptro-wrapper .ptro-color-widget-wrapper,
@@ -236,6 +233,7 @@
     text-align: right;
     padding-right: 5px;
     float: none !important;
+    font-size: 14px;
 }
 
 .ptro-wrapper .ptro-color-edit {
@@ -261,6 +259,8 @@
 .ptro-wrapper .ptro-color-edit input.ptro-color-alpha {
     font-size: 14px;
     width: 55px;
+    padding: 0 0 0 2px;
+    line-height: 23px;
 }
 
 .ptro-wrapper .ptro-color-alpha-label,
@@ -279,6 +279,9 @@
     margin: 0;
 }
 
+.ptro-wrapper .ptro-color-edit button i {
+    line-height: 16px;
+}
 
 .ptro-wrapper .ptro-color-edit button:active {
     outline: none;

js/colorPicker.js

@@ -257,10 +257,12 @@ export class ColorPicker {
                 '<i class="ptro-icon ptro-icon-pipette"></i>' +
               '</button>' +
               '<input class="ptro-color" type="text" size="7"/>' +
-              `<span style="float:right"><span class="ptro-color-alpha-label" title="${Translation.get().tr('alphaFull')}">${Translation.get().tr('alpha')}</span>` +
+              `<span style="float:right"><span class="ptro-color-alpha-label" ` +
+                `title="${Translation.get().tr('alphaFull')}">${Translation.get().tr('alpha')}</span>` +
               '<input class="ptro-color-alpha ptro-input" type="number" min="0" max="1" step="0.1"/></span>' +
               '<div><button class="ptro-named-btn ptro-close ptro-color-control" ' +
-                'style="margin-top: 8px;position: absolute; top: 225px; right: 10px;width: 50px;">Close</button></div>' +
+                'style="margin-top: 8px;position: absolute; top: 225px; right: 10px;width: 50px;">'+
+                `${Translation.get().tr('close')}</button></div>` +
             '</div>' +
           '</div>' +
         '</div>' +

js/main.js

@@ -25,6 +25,7 @@ class PainterroProc {
   constructor(params) {
     addDocumentObjectHelpers();
     this.params = setDefaults(params);
+
     this.tools = [{
       name: 'crop',
       activate: () => {
@@ -332,6 +333,7 @@ class PainterroProc {
         this.hide();
       },
     },];
+
     this.activeTool = undefined;
     this.zoom = false;
     this.ratioRelation = undefined;
@@ -351,7 +353,7 @@ class PainterroProc {
     }
     let bar = '';
     let rightBar = '';
-    for(let b of this.tools) {
+    for(let b of this.tools.filter((t) => !this.params.hiddenTools.includes(t.name))) {
       const id = genId();
       b.buttonId = id;
       const btn =  `<button class="ptro-icon-btn ptro-color-control" title="${tr('tools.'+b.name)}" `+
@@ -377,8 +379,8 @@ class PainterroProc {
       '<div class="ptro-bar ptro-color-main">' +
         '<span>' + bar + '</span>' +
         '<span class="tool-controls"></span>' +
-        '<span class="ptro-info"></span>' +
         '<span class="ptro-bar-right">' + rightBar + '</span>' +
+        '<span class="ptro-info"></span>' +
         '<input id="ptro-file-input" type="file" style="display: none;" accept="image/x-png,image/gif,image/jpeg" />' +
       '</div>' +
       `<style>${this.params.styles}</style>`;
@@ -431,7 +433,7 @@ class PainterroProc {
       }
     };
 
-    for(let b of this.tools) {
+    for(let b of this.tools.filter((t) => !this.params.hiddenTools.includes(t.name))) {
       this._getBtnEl(b).onclick = () => {
         const currentActive = this.activeTool;
         this.closeActiveTool();

js/params.js

@@ -1,4 +1,5 @@
 import { HexToRGBA } from './colorPicker';
+import { Translation } from './translation';
 
 export function setDefaults(params) {
   params = params || {};
@@ -13,6 +14,7 @@ export function setDefaults(params) {
   params.defaultLineWidth = params.defaultLineWidth || 5;
   params.defaultFontSize = params.defaultFontSize || 24;
   params.backgroundFillColor = params.backgroundFillColor || "#ffffff";
+  params.hiddenTools = params.hiddenTools || [];
 
   params.colorScheme = params.colorScheme || {};
   params.colorScheme.main = params.colorScheme.main || "#dbebff";
@@ -40,6 +42,12 @@ export function setDefaults(params) {
     }
   }
 
+  if (params.translation) {
+    const name = params.translation.name;
+    Translation.get().addTranslation(name, params.translation.strings)
+    Translation.get().activate(name)
+  }
+
   params.styles =
     `.ptro-color-main{background-color: ${params.colorScheme.main}}
     .ptro-color-control{

js/resizer.js

@@ -93,11 +93,15 @@ export class Resizer {
           '<table>' +
             '<tr>'+
               `<td class="ptro-label ptro-resize-table-left">${Translation.get().tr("width")}</td>` +
-              '<td><input class="ptro-input ptro-resize-width-input" type="number" min="0" max="3000" step="1"/></span></td>' +
+              '<td>' +
+                '<input class="ptro-input ptro-resize-width-input" type="number" min="0" max="3000" step="1"/>' +
+              '</td>' +
             '</tr>' +
             '<tr>'+
               `<td class="ptro-label ptro-resize-table-left">${Translation.get().tr("height")}</td>` +
-              '<td><input class="ptro-input ptro-resize-heigth-input" type="number" min="0" max="3000" step="1"/></span></td>' +
+              '<td>' +
+                '<input class="ptro-input ptro-resize-heigth-input" type="number" min="0" max="3000" step="1"/>' +
+              '</td>' +
             '</tr>' +
           '</table>' +
         '</div>' +
@@ -108,9 +112,11 @@ export class Resizer {
         '</div>' +
         '<div>' +
           '<button class="ptro-named-btn ptro-apply ptro-color-control" ' +
-                'style="margin-top: 8px;position: absolute; top: 95px; right: 75px;width: 50px;">Apply</button></div>' +
+                'style="margin-top: 8px;position: absolute; top: 95px; right: 75px;">' +
+                `${Translation.get().tr("apply")}</button></div>` +
           '<button class="ptro-named-btn ptro-close ptro-color-control" ' +
-                'style="margin-top: 8px;position: absolute; top: 95px; right: 10px;width: 55px;">Cancel</button></div>' +
+                'style="margin-top: 8px;position: absolute; top: 95px; right: 10px;">'+
+                `${Translation.get().tr("cancel")}</button></div>` +
         '</div>' +
       '</div>';
   }

js/translation.js

@@ -21,6 +21,7 @@ export class Translation {
         fontNameFull: 'Font name',
         apply: 'Apply',
         cancel: 'Cancel',
+        close: 'Close',
         width: 'Width',
         height: 'Height',
         keepRatio: 'Keep width/height ratio',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "painterro",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "description": "Embуedded html image editor",
   "main": "build/painterro.commonjs2.js",
   "scripts": {