From f8253e139f7389e8df86afbcd05dabbe68e5393d Mon Sep 17 00:00:00 2001 From: Thiago Elias Rezende Date: Wed, 13 Sep 2017 21:02:13 -0300 Subject: [PATCH 1/2] Defining max-height and overflow auto on the #code div, so it won't fill the whole screen when the generated html code is too big. --- main.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/main.css b/main.css index 566beb8..ac9eb1c 100644 --- a/main.css +++ b/main.css @@ -174,6 +174,8 @@ a:link, a:visited { box-shadow: rgba(0,0,0,0.2) 0 0 2px 2px; display: none; border-radius: 3px; + max-height: 50%; + overflow: auto; } #code_content { padding: 10px; @@ -448,7 +450,7 @@ a:link, a:visited { box-shadow: 1px 1px 3px rgba(0,0,0,0.2) inset; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; - box-sizing: border-box; + box-sizing: border-box; font-family: monospace; font-size: 11px; line-height: 1.3; @@ -508,7 +510,7 @@ a:link, a:visited { stroke-width: 2px; } #svg rect.helper:hover { - fill: #F00; + fill: #F00; } .edit > #svg rect, .edit > #svg circle, .edit > #svg polygon { cursor: move; @@ -539,4 +541,4 @@ a:link, a:visited { } .edit > #svg .w-resize { cursor: w-resize; -} \ No newline at end of file +} From 9576341ed80c1b7b17166b0bf3de7968821863f7 Mon Sep 17 00:00:00 2001 From: Thiago Elias Rezende Silva Date: Wed, 13 Sep 2017 23:30:39 -0300 Subject: [PATCH 2/2] Adding a simple i18n support with pt_BR translation for the html. --- index.htm | 104 +++++++++++++++--------------- strings.js | 183 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 236 insertions(+), 51 deletions(-) create mode 100644 strings.js diff --git a/index.htm b/index.htm index 97f2a00..82b3e0c 100644 --- a/index.htm +++ b/index.htm @@ -1,13 +1,14 @@ - Summer html image map creator + + @@ -18,33 +19,33 @@ Please, enable javascript in your browser - +
+
# @@ -61,36 +62,36 @@

-
Attrubutes
+

- +

- +

- +

- +
-
Loading areas
+

- +

- +
- +
@@ -99,21 +100,21 @@
Loading areas
Summer html image map creator
-
Loading
+
- +
- x + x preview
- or +
- + x - +

@@ -123,36 +124,37 @@
Loading areas
-

Main

-

F5 — reload the page and display the form for loading image again

-

S — save map params in localStorage

+

+

F5 —

+

S —

-

Drawing mode (rectangle / circle / polygon)

-

ENTER — stop polygon drawing (or click on first helper)

-

ESC — cancel drawing of a new area

-

SHIFT — square drawing in case of a rectangle and right angle drawing in case of a polygon

+

+

ENTER —

+

ESC —

+

SHIFT —

-

Editing mode

-

DELETE — remove a selected area

-

ESC — cancel editing of a selected area

-

SHIFT — edit and save proportions for rectangle

-

I — edit attributes of a selected area (or dblclick on an area)

-

CTRL + C — a copy of the selected area

-

↑ — move a selected area up

-

↓ — move a selected area down

-

← — move a selected area to the left

-

→ — move a selected area to the right

+

+

DELETE —

+

ESC —

+

SHIFT —

+

I —

+

CTRL + C —

+

↑ —

+

↓ —

+

← —

+

→ —

+ - \ No newline at end of file + diff --git a/strings.js b/strings.js new file mode 100644 index 0000000..5503bcc --- /dev/null +++ b/strings.js @@ -0,0 +1,183 @@ +var lang = 'en_US'; + +var strings = { + title: { + en_US: "Summer html image map creator", + pt_BR: "Summer: Criador de Image map Html" + }, + drag_image: { + en_US: "Drag an image", + pt_BR: "Arraste e solte uma imagem" + }, + or: { + en_US: "or", + pt_BR: "ou" + }, + type_url: { + en_US: "type a url", + pt_BR: "digite uma url" + }, + ok: { + en_US: "OK", + pt_BR: "OK" + }, + main: { + en_US: "Main", + pt_BR: "Principal" + }, + f5_description: { + en_US: "reload the page and display the form for loading image again", + pt_BR: "recarrega a pagina e exibe o formulário para carregar a imagem novamente" + }, + s_description: { + en_US: "save map params in localStorage", + pt_BR: "salva os parâmetros do mapa no armazenamento local" + }, + drawing_mode: { + en_US: "Drawing mode (rectangle / circle / polygon)", + pt_BR: "Modo de desenho (retângulo, círculo, polígono)" + }, + dr_enter_description: { + en_US: "stop polygon drawing (or click on first helper)", + pt_BR: "interrompe o desenho do polígono (ou clique no primeiro ponto)" + }, + dr_esc_description: { + en_US: "cancel drawing of a new area", + pt_BR: "cancela o desenho de uma nova área" + }, + dr_shift_description: { + en_US: "square drawing in case of a rectangle and right angle drawing in case of a polygon", + pt_BR: "desenho quadrado no caso de um retângulo e ângulo perfeito em caso de um polígono" + }, + editing_mode: { + en_US: "Editing mode", + pt_BR: "Modo de Edição" + }, + ed_delete_description: { + en_US: "remove a selected area", + pt_BR: "remove uma área selecionada" + }, + ed_esc_description: { + en_US: "cancel editing of a selected area", + pt_BR: "cancela a edição de uma área selecionada" + }, + ed_shift_description: { + en_US: "edit and save proportions for rectangle", + pt_BR: "edita e salva as proporções para o retângulo" + }, + ed_i_description: { + en_US: "edit attributes of a selected area (or dblclick on an area)", + pt_BR: "edita os atributos de uma área selecionada (ou clique 2x em uma área)" + }, + ed_ctrl_c_description: { + en_US: "a copy of the selected area", + pt_BR: "uma cópia da área selecionada" + }, + ed_up_description: { + en_US: "move a selected area up", + pt_BR: "move uma área selecionada para cima" + }, + ed_down_description: { + en_US: "move a selected area down", + pt_BR: "move uma área selecionada para baixo" + }, + ed_left_description: { + en_US: "move a selected area to the left", + pt_BR: "move uma área selecionada para a esquerda" + }, + ed_right_description: { + en_US: "move a selected area to the right", + pt_BR: "move uma área selecionada para a direita" + }, + mit_licence: { + en_US: "MIT License", + pt_BR: "Licença MIT" + }, + save: { + en_US: "save", + pt_BR: "salvar" + }, + load: { + en_US: "load", + pt_BR: "carregar" + }, + from_html: { + en_US: "from html", + pt_BR: "do html" + }, + rectangle: { + en_US: "rectangle", + pt_BR: "retângulo" + }, + circle: { + en_US: "circle", + pt_BR: "círculo" + }, + polygon: { + en_US: "polygon", + pt_BR: "polígono" + }, + edit: { + en_US: "edit", + pt_BR: "editar" + }, + to_html: { + en_US: "to html", + pt_BR: "para html" + }, + preview: { + en_US: "preview", + pt_BR: "visualizar" + }, + clear: { + en_US: "clear", + pt_BR: "limpar" + }, + new_image: { + en_US: "new image", + pt_BR: "nova imagem" + }, + attributes: { + en_US: "Attributes", + pt_BR: "Atributos" + }, + href: { + en_US: "href", + pt_BR: "href" + }, + alt: { + en_US: "alt", + pt_BR: "alt" + }, + img_title: { + en_US: "title", + pt_BR: "título" + }, + loading_areas: { + en_US: "Loading Areas", + pt_BR: "Carregando Áreas" + }, + enter_html_code: { + en_US: "Enter your html code:", + pt_BR: "Preencha com seu código html" + }, + loading: { + en_US: "Loading", + pt_BR: "Carregando" + }, + objects: { + en_US: "objects", + pt_BR: "objeto(s)" + }, + saved: { + en_US: "Saved", + pt_BR: "Salvo" + } +} + +function i18n(item) { + if (typeof lang === 'undefined' || typeof strings[item][lang] === 'undefined') { + lang = 'en_US'; + } + document.write(strings[item][lang]); +}