strings management new

assets/texts.json

@@ -27,6 +27,7 @@
             "loadingStrings": "Loading strings",
             "projectSaved": "Project saved",
             "overrideTranslationsSaved": "Override translations flag updated",
+            "stringsKeyNamingSaved": "Key naming pattern option updated",
             "credentialsSaved": "Credentials saved",
             "stringsUploadedToCrowdin": "Strings were successfully pushed to Crowdin. You can now either pre-translate them via Machine Translation engines or invite translators to your Crowdin project",
             "creatingNewDirectory": "Creating new directory",
@@ -44,7 +45,8 @@
             "screenshotsUploadedToCrowdin": "Screenshots were successfully pushed to Crowdin",
             "screenshotUploadingToCrowdin": "Sending screenshot for the %name% artboard",
             "screenshotUploadedToCrowdin": "Screenshot for the %name% artboard successfully pushed to Crowdin",
-            "addingTagsToScreenshot": "Adding tags to screenshot for the %name% artboard"
+            "addingTagsToScreenshot": "Adding tags to screenshot for the %name% artboard",
+            "stringAdded": "String '%name%' successfully added to Crowdin"
         }
     },
     "ui": {
@@ -55,10 +57,12 @@
             "contactUsTab": "Contact Us",
             "selectProjectLabel": "Select Project:",
             "overrideTranslationsLabel": "Override existing translations",
+            "stringsKeyNamingLabel": "Key naming pattern:",
             "connectionDetailsLabel": "Crowdin Credentials",
             "tokenLabel": "Personal Access Token:",
             "tokenDetailsText": "You can generate it in your Crowdin Account Settings",
             "overrideTranslationsText": "Override existing translated pages and artboards and keep only the latest version for each language",
+            "stringsKeyNamingText": "Pattern which will be used to autocomplete string identifier if it was added from design",
             "organizationLabel": "Organization",
             "organizationDetailsText": "Fill in your organization domain name (for Crowdin Enterprise only)",
             "connectToCrowdinButton": "Connect to Crowdin",

src/action/manage-string.js

@@ -1,3 +1,4 @@
+import ui from 'sketch/ui';
 import settings from 'sketch/settings';
 import dom from 'sketch/dom';
 import { PROJECT_ID, ACCESS_TOKEN_KEY } from '../constants';
@@ -9,6 +10,7 @@ async function addString(req) {
     const callback = async (projectId) => {
         const { sourceStringsApi } = httpUtil.createClient();
         const res = await sourceStringsApi.addString(projectId, req);
+        ui.message(displayTexts.notifications.info.stringAdded.replace('%name%', req.text));
         return { id: res.data.id };
     };
     return await executeOperartion(callback);

src/action/source-strings.js

@@ -6,9 +6,9 @@ import * as httpUtil from '../util/http';
 import * as localStorage from '../util/local-storage';
 import { default as displayTexts } from '../../assets/texts.json';
 
-async function useString(string) {
+async function useString(strings) {
     try {
-        if (!string || !string.id || !string.text) {
+        if (strings.length === 0) {
             throw displayTexts.notifications.warning.selectString;
         }
         const selectedDocument = dom.getSelectedDocument();
@@ -21,8 +21,8 @@ async function useString(string) {
         if (!selectedPage) {
             throw displayTexts.notifications.warning.selectPage;
         }
-        const selectedText = domUtil.getSelectedText(selectedPage);
-        if (!selectedText) {
+        const selectedTexts = domUtil.getSelectedText(selectedPage);
+        if (selectedTexts.length === 0) {
             throw displayTexts.notifications.warning.selectTextElement;
         }
         if (!settings.settingForKey(ACCESS_TOKEN_KEY)) {
@@ -32,35 +32,56 @@ async function useString(string) {
             throw displayTexts.notifications.warning.selectProject;
         }
 
-        const id = string.id;
-        const text = string.text;
+        strings.forEach(string => {
+            const selectedText = !!string.selectedText
+                ? selectedTexts.find(st => {
+                    if (!!string.selectedText.artboardId) {
+                        return !!st.artboard
+                            && st.artboard.id === string.selectedText.artboardId
+                            && st.element.id === string.selectedText.elementId
+                            && st.type === string.selectedText.type;
+                    } else {
+                        return !st.artboard
+                            && st.element.id === string.selectedText.elementId
+                            && st.type === string.selectedText.type;
+                    }
+                })
+                : selectedTexts[0];
+            if (!selectedText) {
+                return;
+            }
 
-        if (selectedText.type === TEXT_TYPE) {
-            selectedText.element.text = text;
-        } else {
-            selectedText.element.value = text;
-        }
+            const id = string.id;
+            const text = string.text;
 
-        const artboard = selectedText.artboard;
-        const tags = localStorage.getTags(selectedDocument);
-        const tagIndex = tags.findIndex(t =>
-            t.id === selectedText.id
-            && t.type === selectedText.type
-            && t.pageId === selectedPage.id
-        );
-        const tag = {
-            id: selectedText.id,
-            type: selectedText.type,
-            artboardId: !!artboard ? artboard.id : undefined,
-            pageId: selectedPage.id,
-            stringId: id
-        };
-        if (tagIndex < 0) {
-            tags.push(tag);
-        } else {
-            tags[tagIndex] = tag;
-        }
-        localStorage.saveTags(selectedDocument, tags);
+            if (selectedText.type === TEXT_TYPE) {
+                selectedText.element.text = text;
+                selectedText.element.name = !!string.identifier ? string.identifier : text;
+            } else {
+                selectedText.element.value = text;
+            }
+
+            const artboard = selectedText.artboard;
+            const tags = localStorage.getTags(selectedDocument);
+            const tagIndex = tags.findIndex(t =>
+                t.id === selectedText.id
+                && t.type === selectedText.type
+                && t.pageId === selectedPage.id
+            );
+            const tag = {
+                id: selectedText.id,
+                type: selectedText.type,
+                artboardId: !!artboard ? artboard.id : undefined,
+                pageId: selectedPage.id,
+                stringId: id
+            };
+            if (tagIndex < 0) {
+                tags.push(tag);
+            } else {
+                tags[tagIndex] = tag;
+            }
+            localStorage.saveTags(selectedDocument, tags);
+        });
     } catch (error) {
         httpUtil.handleError(error);
     }
@@ -77,14 +98,39 @@ function getSelectedText() {
         return {};
     }
 
-    const selectedText = domUtil.getSelectedText(selectedPage);
-    if (!selectedText) {
-        return {};
-    }
+    const selectedTexts = domUtil.getSelectedText(selectedPage);
+    return selectedTexts.map(selectedText => {
+        const text = selectedText.type === TEXT_TYPE ? selectedText.element.text : selectedText.element.value;
+        const elementName = selectedText.type === TEXT_TYPE ? selectedText.element.name : selectedText.element.affectedLayer.name;
+        const artboardName = !!selectedText.artboard ? selectedText.artboard.name : '';
+        const artboardId = !!selectedText.artboard ? selectedText.artboard.id : undefined;
+        const groupName = !!selectedText.group ? selectedText.group.name : '';
 
-    const text = selectedText.type === TEXT_TYPE ? selectedText.element.text : selectedText.element.value;
+        return {
+            text,
+            artboard: artboardName,
+            group: groupName,
+            elementName,
+            artboardId,
+            type: selectedText.type,
+            elementId: selectedText.element.id
+        };
+    });
+}
+
+function getUsedStrings() {
+    const selectedDocument = dom.getSelectedDocument();
+    if (!selectedDocument) {
+        throw displayTexts.notifications.warning.selectDocument;
+    }
+    const selectedPage = selectedDocument ? selectedDocument.selectedPage : undefined;
 
-    return { text };
+    if (!selectedPage) {
+        throw displayTexts.notifications.warning.selectPage;
+    }
+    return localStorage.getTags(selectedDocument)
+        .filter(t => t.pageId === selectedPage.id)
+        .map(t => t.stringId);
 }
 
-export { useString, getSelectedText };
+export { useString, getSelectedText, getUsedStrings };

src/constants.js

@@ -4,8 +4,30 @@ export const ACCESS_TOKEN_KEY = `${KEY_PREFIX}-access-token`;
 export const ORGANIZATION = `${KEY_PREFIX}-organization`;
 export const PROJECT_ID = `${KEY_PREFIX}-project-id`;
 export const OVERRIDE_TRANSLATIONS = `${KEY_PREFIX}-override-translations`;
+export const KEY_NAMING_PATTERN = `${KEY_PREFIX}-key-naming`;
 
 export const SYMBOL_TYPE = 'symbol-override';
 export const TEXT_TYPE = 'text';
 
-export const PLUGIN_VERSION = '2.0.1';
+export const PLUGIN_VERSION = '2.0.1';
+
+export const STRINGS_KEY_NAMING_OPTIONS = [
+    { id: 1, name: 'Artboard.Group.Element_name', },
+    { id: 2, name: 'Artboard:Group:Element_name' },
+    { id: 3, name: 'Artboard::Group::Element_name' },
+    { id: 4, name: 'Artboard__Group__Element_name' },
+    { id: 5, name: 'Artboard.Element_name' },
+    { id: 6, name: 'Artboard::Element_name' },
+    { id: 7, name: 'Artboard__Element_name' },
+    { id: 8, name: 'artboard.group.element_name' },
+    { id: 9, name: 'artboard:group:element_name' },
+    { id: 10, name: 'artboard::group::element_name' },
+    { id: 11, name: 'artboard__group__element_name' },
+    { id: 12, name: 'artboard.element_name' },
+    { id: 13, name: 'artboard:element_name' },
+    { id: 14, name: 'artboard::element_name' },
+    { id: 15, name: 'artboard__element_name' },
+    { id: 16, name: 'element_name' }
+];
+
+export const DEFAULT_STRINGS_KEY_NAMING_OPTION = 16;

src/plugin.js

@@ -3,10 +3,10 @@ import dom from 'sketch/dom';
 import settings from 'sketch/settings';
 import BrowserWindow from 'sketch-module-web-view';
 import { getWebview } from 'sketch-module-web-view/remote';
-import { ACCESS_TOKEN_KEY, PROJECT_ID, ORGANIZATION, OVERRIDE_TRANSLATIONS } from './constants';
+import { ACCESS_TOKEN_KEY, PROJECT_ID, ORGANIZATION, OVERRIDE_TRANSLATIONS, DEFAULT_STRINGS_KEY_NAMING_OPTION, KEY_NAMING_PATTERN, STRINGS_KEY_NAMING_OPTIONS } from './constants';
 import { getProjects, getLanguages, getStrings, getFiles } from './util/client';
 import { sendStrings } from './action/send-strings';
-import { useString, getSelectedText } from './action/source-strings';
+import { useString, getSelectedText, getUsedStrings } from './action/source-strings';
 import { translate } from './action/translate';
 import { uploadScreenshots } from './action/upload-screenshots';
 import { stringsPreview } from './action/strings-preview';
@@ -46,6 +46,8 @@ export default function start() {
     browserWindow.webContents.on('saveProject', saveProject);
     browserWindow.webContents.on('getOverrideTranslations', getOverrideTranslations);
     browserWindow.webContents.on('saveOverrideTranslations', saveOverrideTranslations);
+    browserWindow.webContents.on('getKeyPatternOptions', getKeyPatternOptions);
+    browserWindow.webContents.on('saveKeyPatternOption', saveKeyPatternOption);
 
     //data
     browserWindow.webContents.on('getProjects', getProjects);
@@ -56,6 +58,7 @@ export default function start() {
     //strings mode
     browserWindow.webContents.on('useString', useString);
     browserWindow.webContents.on('stringsPreview', stringsPreview);
+    browserWindow.webContents.on('getUsedStrings', getUsedStrings);
     //string management
     browserWindow.webContents.on('getSelectedText', getSelectedText);
     browserWindow.webContents.on('addString', addString);
@@ -100,6 +103,27 @@ function saveOverrideTranslations(value) {
     ui.message(displayTexts.notifications.info.overrideTranslationsSaved);
 }
 
+function getKeyPatternOptions() {
+    let selectedOption = !!dom.getSelectedDocument() && !!settings.documentSettingForKey(dom.getSelectedDocument(), KEY_NAMING_PATTERN)
+        ? parseInt(settings.documentSettingForKey(dom.getSelectedDocument(), KEY_NAMING_PATTERN))
+        : DEFAULT_STRINGS_KEY_NAMING_OPTION;
+    return STRINGS_KEY_NAMING_OPTIONS.map(e => {
+        return {
+            selected: selectedOption === e.id,
+            ...e
+        };
+    })
+}
+
+function saveKeyPatternOption(value) {
+    if (!dom.getSelectedDocument()) {
+        ui.message(displayTexts.notifications.warning.selectDocument);
+        return;
+    }
+    settings.setDocumentSettingForKey(dom.getSelectedDocument(), KEY_NAMING_PATTERN, value);
+    ui.message(displayTexts.notifications.info.stringsKeyNamingSaved);
+}
+
 function saveCredentials(creds) {
     const token = settings.settingForKey(ACCESS_TOKEN_KEY);
     let initValue = undefined;
@@ -121,7 +145,7 @@ function saveProject(projectId) {
     settings.setDocumentSettingForKey(dom.getSelectedDocument(), PROJECT_ID, projectId);
     if (!!projectId) {
         ui.message(displayTexts.notifications.info.projectSaved);
-    }   
+    }
 }
 
 export function onShutdown() {

src/util/client.js

@@ -131,7 +131,7 @@ function convertCrowdinStringsToStrings(crowdinStrings) {
                     text.other || '';
             }
             return {
-                text, id: e.id, fileId: e.fileId
+                text, id: e.id, fileId: e.fileId, identifier: e.identifier
             }
         })
         .filter(e => e.text && e.text.length > 0);