[i18n] Translate WYSIWYG input

stable
David Barragán Merino 2015-04-23 10:01:47 +02:00
parent 2aa0e27d9d
commit be138873b4
7 changed files with 112 additions and 46 deletions

View File

@ -55,7 +55,7 @@ module = angular.module("taigaCommon")
############################################################################# #############################################################################
## WYSIWYG markitup editor directive ## WYSIWYG markitup editor directive
############################################################################# #############################################################################
tgMarkitupDirective = ($rootscope, $rs, $selectedText, $template, $compile) -> MarkitupDirective = ($rootscope, $rs, $selectedText, $template, $compile, $translate) ->
previewTemplate = $template.get("common/wysiwyg/wysiwyg-markitup-preview.html", true) previewTemplate = $template.get("common/wysiwyg/wysiwyg-markitup-preview.html", true)
link = ($scope, $el, $attrs, $model) -> link = ($scope, $el, $attrs, $model) ->
@ -149,9 +149,13 @@ tgMarkitupDirective = ($rootscope, $rs, $selectedText, $template, $compile) ->
emptyListItem = lastLine.match /^(\s*)\-\s$/ emptyListItem = lastLine.match /^(\s*)\-\s$/
if emptyListItem if emptyListItem
markdownCaretPositon = addLine(data.textarea, cursorLine - 1) nline = cursorLine - 1
replace = null
else else
markdownCaretPositon = addLine(data.textarea, cursorLine, "#{match[1]}") nline = cursorLine
replace = "#{match[1]}"
markdownCaretPositon = addLine(data.textarea, nline, replace)
# unordered list * # unordered list *
match = lastLine.match /^(\s*\* ).*/ match = lastLine.match /^(\s*\* ).*/
@ -160,9 +164,13 @@ tgMarkitupDirective = ($rootscope, $rs, $selectedText, $template, $compile) ->
emptyListItem = lastLine.match /^(\s*\* )$/ emptyListItem = lastLine.match /^(\s*\* )$/
if emptyListItem if emptyListItem
markdownCaretPositon = addLine(data.textarea, cursorLine - 1) nline = cursorLine - 1
replace = null
else else
markdownCaretPositon = addLine(data.textarea, cursorLine, "#{match[1]}") nline = cursorLine
replace = "#{match[1]}"
markdownCaretPositon = addLine(data.textarea, nline, replace)
# ordered list # ordered list
match = lastLine.match /^(\s*)(\d+)\.\s/ match = lastLine.match /^(\s*)(\d+)\.\s/
@ -171,81 +179,90 @@ tgMarkitupDirective = ($rootscope, $rs, $selectedText, $template, $compile) ->
emptyListItem = lastLine.match /^(\s*)(\d+)\.\s$/ emptyListItem = lastLine.match /^(\s*)(\d+)\.\s$/
if emptyListItem if emptyListItem
markdownCaretPositon = addLine(data.textarea, cursorLine - 1) nline = cursorLine - 1
replace = null
else else
markdownCaretPositon = addLine(data.textarea, cursorLine, "#{match[1] + (parseInt(match[2], 10) + 1)}. ") nline = cursorLine
replace = "#{match[1] + (parseInt(match[2], 10) + 1)}. "
markdownCaretPositon = addLine(data.textarea, nline, replace)
setCaretPosition(data.textarea, markdownCaretPositon) if markdownCaretPositon setCaretPosition(data.textarea, markdownCaretPositon) if markdownCaretPositon
#I18N
markupSet: [ markupSet: [
{ {
name: "First Level Heading" name: $translate.instant("COMMON.WYSIWYG.H1_BUTTON")
key: "1" key: "1"
placeHolder: "Your title here..." placeHolder: $translate.instant("COMMON.WYSIWYG.H1_SAMPLE_TEXT")
closeWith: (markItUp) -> markdownTitle(markItUp, "=") closeWith: (markItUp) -> markdownTitle(markItUp, "=")
}, },
{ {
name: "Second Level Heading" name: $translate.instant("COMMON.WYSIWYG.H2_BUTTON")
key: "2" key: "2"
placeHolder: "Your title here..." placeHolder: $translate.instant("COMMON.WYSIWYG.H2_SAMPLE_TEXT")
closeWith: (markItUp) -> markdownTitle(markItUp, "-") closeWith: (markItUp) -> markdownTitle(markItUp, "-")
}, },
{ {
name: "Third Level Heading" name: $translate.instant("COMMON.WYSIWYG.H3_BUTTON")
key: "3" key: "3"
openWith: "### " openWith: "### "
placeHolder: "Your title here..." placeHolder: $translate.instant("COMMON.WYSIWYG.H3_SAMPLE_TEXT")
}, },
{ {
separator: "---------------" separator: "---------------"
}, },
{ {
name: "Bold" name: $translate.instant("COMMON.WYSIWYG.BOLD_BUTTON")
key: "B" key: "B"
openWith: "**" openWith: "**"
closeWith: "**" closeWith: "**"
placeHolder: $translate.instant("COMMON.WYSIWYG.BOLD_BUTTON_SAMPLE_TEXT")
}, },
{ {
name: "Italic" name: $translate.instant("COMMON.WYSIWYG.ITALIC_SAMPLE_TEXT")
key: "I" key: "I"
openWith: "_" openWith: "_"
closeWith: "_" closeWith: "_"
placeHolder: $translate.instant("COMMON.WYSIWYG.ITALIC_SAMPLE_TEXT")
}, },
{ {
name: "Strike" name: $translate.instant("COMMON.WYSIWYG.STRIKE_BUTTON")
key: "S" key: "S"
openWith: "~~" openWith: "~~"
closeWith: "~~" closeWith: "~~"
placeHolder: $translate.instant("COMMON.WYSIWYG.STRIKE_SAMPLE_TEXT")
}, },
{ {
separator: "---------------" separator: "---------------"
}, },
{ {
name: "Bulleted List" name: $translate.instant("COMMON.WYSIWYG.BULLETED_LIST_BUTTON")
openWith: "- " openWith: "- "
placeHolder: $translate.instant("COMMON.WYSIWYG.BULLETED_LIST_SAMPLE_TEXT")
}, },
{ {
name: "Numeric List" name: $translate.instant("COMMON.WYSIWYG.NUMERIC_LIST_BUTTON")
openWith: (markItUp) -> markItUp.line+". " openWith: (markItUp) -> markItUp.line+". "
placeHolder: $translate.instant("COMMON.WYSIWYG.NUMERIC_LIST_SAMPLE_TEXT")
}, },
{ {
separator: "---------------" separator: "---------------"
}, },
{ {
name: "Picture" name: $translate.instant("COMMON.WYSIWYG.PICTURE_BUTTON")
key: "P" key: "P"
replaceWith: '![[![Alternative text]!]](<<<[![Url:!:http://]!]>>> "[![Title]!]")' openWith: "!["
closeWith: '](<<<[![Url:!:http://]!]>>> "[![Title]!]")'
placeHolder: $translate.instant("COMMON.WYSIWYG.PICTURE_SAMPLE_TEXT")
beforeInsert:(markItUp) -> prepareUrlFormatting(markItUp) beforeInsert:(markItUp) -> prepareUrlFormatting(markItUp)
afterInsert:(markItUp) -> urlFormatting(markItUp) afterInsert:(markItUp) -> urlFormatting(markItUp)
}, },
{ {
name: "Link" name: $translate.instant("COMMON.WYSIWYG.LINK_BUTTON")
key: "L" key: "L"
openWith: "[" openWith: "["
closeWith: '](<<<[![Url:!:http://]!]>>> "[![Title]!]")' closeWith: '](<<<[![Url:!:http://]!]>>> "[![Title]!]")'
placeHolder: "Your text to link here..." placeHolder: $translate.instant("COMMON.WYSIWYG.LINK_SAMPLE_TEXT")
beforeInsert:(markItUp) -> prepareUrlFormatting(markItUp) beforeInsert:(markItUp) -> prepareUrlFormatting(markItUp)
afterInsert:(markItUp) -> urlFormatting(markItUp) afterInsert:(markItUp) -> urlFormatting(markItUp)
}, },
@ -253,43 +270,35 @@ tgMarkitupDirective = ($rootscope, $rs, $selectedText, $template, $compile) ->
separator: "---------------" separator: "---------------"
}, },
{ {
name: "Quotes" name: $translate.instant("COMMON.WYSIWYG.QUOTE_BLOCK_BUTTON")
openWith: "> " openWith: "> "
placeHolder: $translate.instant("COMMON.WYSIWYG.QUOTE_BLOCK_SAMPLE_TEXT")
}, },
{ {
name: "Code Block / Code" name: $translate.instant("COMMON.WYSIWYG.CODE_BLOCK_BUTTON")
openWith: "```\n" openWith: "```\n"
placeHolder: $translate.instant("COMMON.WYSIWYG.CODE_BLOCK_SAMPLE_TEXT")
closeWith: "\n```" closeWith: "\n```"
}, },
{ {
separator: "---------------" separator: "---------------"
}, },
{ {
name: "Preview" name: $translate.instant("COMMON.WYSIWYG.PREVIEW_BUTTON")
call: preview call: preview
className: "preview-icon" className: "preview-icon"
}, },
# {
# separator: "---------------"
# },
# {
# name: $tr.t("markdown-editor.help")
# call: openHelp
# className: "help"
# }
] ]
afterInsert: (event) -> afterInsert: (event) ->
target = angular.element(event.textarea) target = angular.element(event.textarea)
$model.$setViewValue(target.val()) $model.$setViewValue(target.val())
prepareUrlFormatting = (markItUp) -> prepareUrlFormatting = (markItUp) ->
console.log(markItUp)
regex = /(<<<|>>>)/gi regex = /(<<<|>>>)/gi
result = 0 result = 0
indices = [] indices = []
(indices.push(result.index)) while ( (result = regex.exec(markItUp.textarea.value)) ) (indices.push(result.index)) while ( (result = regex.exec(markItUp.textarea.value)) )
markItUp.donotparse = indices markItUp.donotparse = indices
console.log(indices)
urlFormatting = (markItUp) -> urlFormatting = (markItUp) ->
console.log(markItUp.donotparse) console.log(markItUp.donotparse)
@ -331,6 +340,7 @@ tgMarkitupDirective = ($rootscope, $rs, $selectedText, $template, $compile) ->
return "\n"+heading+"\n" return "\n"+heading+"\n"
element.markItUp(markdownSettings) element.markItUp(markdownSettings)
element.on "keypress", (event) -> element.on "keypress", (event) ->
$scope.$apply() $scope.$apply()
@ -340,4 +350,4 @@ tgMarkitupDirective = ($rootscope, $rs, $selectedText, $template, $compile) ->
return {link:link, require:"ngModel"} return {link:link, require:"ngModel"}
module.directive("tgMarkitup", ["$rootScope", "$tgResources", "$selectedText", "$tgTemplate", "$compile", module.directive("tgMarkitup", ["$rootScope", "$tgResources", "$selectedText", "$tgTemplate", "$compile",
tgMarkitupDirective]) "$translate", MarkitupDirective])

View File

@ -42,7 +42,6 @@
}, },
"DESCRIPTION": { "DESCRIPTION": {
"EMPTY": "Empty space is so boring... go on be descriptive... A rose by any other name would smell as sweet...", "EMPTY": "Empty space is so boring... go on be descriptive... A rose by any other name would smell as sweet...",
"MARKDOWN_HELP": "Markdown syntax help",
"NO_DESCRIPTION": "No description yet" "NO_DESCRIPTION": "No description yet"
}, },
"FIELDS": { "FIELDS": {
@ -93,6 +92,35 @@
"BREADCRUMB_TITLE": "back to categories", "BREADCRUMB_TITLE": "back to categories",
"BREADCRUMB_FILTERS": "Filters", "BREADCRUMB_FILTERS": "Filters",
"BREADCRUMB_STATUS": "status" "BREADCRUMB_STATUS": "status"
},
"WYSIWYG": {
"H1_BUTTON": "First Level Heading",
"H1_SAMPLE_TEXT": "Your title here...",
"H2_BUTTON": "Second Level Heading",
"H2_SAMPLE_TEXT": "Your title here...",
"H3_BUTTON": "Third Level Heading",
"H3_SAMPLE_TEXT": "Your title here...",
"BOLD_BUTTON": "Bold",
"BOLD_BUTTON_SAMPLE_TEXT": "Your text here...",
"ITALIC_BUTTON": "Italic",
"ITALIC_SAMPLE_TEXT": "Your text here...",
"STRIKE_BUTTON": "Strike",
"STRIKE_SAMPLE_TEXT": "Your text here...",
"BULLETED_LIST_BUTTON": "Bulleted List",
"BULLETED_LIST_SAMPLE_TEXT": "Your text here...",
"NUMERIC_LIST_BUTTON": "Numeric List",
"NUMERIC_LIST_SAMPLE_TEXT": "Your text here...",
"PICTURE_BUTTON": "Picture",
"PICTURE_SAMPLE_TEXT": "Your alternative text to picture here...",
"LINK_BUTTON": "Link",
"LINK_SAMPLE_TEXT": "Your text to link here....",
"QUOTE_BLOCK_BUTTON": "Quote Block",
"QUOTE_BLOCK_SAMPLE_TEXT": "Your text here...",
"CODE_BLOCK_BUTTON": "Code Block",
"CODE_BLOCK_SAMPLE_TEXT": "Your text here...",
"PREVIEW_BUTTON": "Preview",
"EDIT_BUTTON": "Edit",
"MARKDOWN_HELP": "Markdown syntax help"
} }
}, },
"AUTH": { "AUTH": {

View File

@ -40,7 +40,6 @@
}, },
"DESCRIPTION": { "DESCRIPTION": {
"EMPTY": "El espacio vacío es tan aburrido... trata de ser descriptivo... Una rosa con cualquier otro nombre olería con la misma dulzura...", "EMPTY": "El espacio vacío es tan aburrido... trata de ser descriptivo... Una rosa con cualquier otro nombre olería con la misma dulzura...",
"MARKDOWN_HELP": "Ayuda de sintaxis Markdown",
"NO_DESCRIPTION": "Sin descripción todavía" "NO_DESCRIPTION": "Sin descripción todavía"
}, },
"FIELDS": { "FIELDS": {
@ -91,6 +90,35 @@
"BREADCRUMB_TITLE": "Regresar a categorias", "BREADCRUMB_TITLE": "Regresar a categorias",
"BREADCRUMB_FILTERS": "Filtros", "BREADCRUMB_FILTERS": "Filtros",
"BREADCRUMB_STATUS": "estado" "BREADCRUMB_STATUS": "estado"
},
"WYSIWYG": {
"H1_BUTTON": "Título de primer nivel",
"H1_SAMPLE_TEXT": "Tu título aquí...",
"H2_BUTTON": "Título de segundo nivel",
"H2_SAMPLE_TEXT": "Tu título aquí...",
"H3_BUTTON": "Título de tercer nivel",
"H3_SAMPLE_TEXT": "Tu título aquí...",
"BOLD_BUTTON": "Negrita",
"BOLD_BUTTON_SAMPLE_TEXT": "Tu texto aquí...",
"ITALIC_BUTTON": "Cursiva",
"ITALIC_SAMPLE_TEXT": "Tu texto aquí...",
"STRIKE_BUTTON": "Tachado",
"STRIKE_SAMPLE_TEXT": "Tu texto aquí...",
"BULLETED_LIST_BUTTON": "Lista con viñetas",
"BULLETED_LIST_SAMPLE_TEXT": "Tu texto aquí...",
"NUMERIC_LIST_BUTTON": "Lista numérica",
"NUMERIC_LIST_SAMPLE_TEXT": "Tu texto aquí...",
"PICTURE_BUTTON": "Imagen",
"PICTURE_SAMPLE_TEXT": "Tu texto alternatívo para la imagen aquí...",
"LINK_BUTTON": "Enlace",
"LINK_SAMPLE_TEXT": "Tu texto del enlace aquí...",
"QUOTE_BLOCK_BUTTON": "Cita",
"QUOTE_BLOCK_SAMPLE_TEXT": "Tu texto aquí...",
"CODE_BLOCK_BUTTON": "Código",
"CODE_BLOCK_SAMPLE_TEXT": "Tu texto aquí...",
"PREVIEW_BUTTON": "Previsualizar",
"EDIT_BUTTON": "Editar",
"MARKDOWN_HELP": "Ayuda de sintaxis Markdown"
} }
}, },
"AUTH": { "AUTH": {

View File

@ -4,8 +4,8 @@
.edit-description .edit-description
textarea(placeholder="{{'COMMON.DESCRIPTION.EMPTY' | translate}}", ng-model="item.description", tg-markitup="tg-markitup") textarea(placeholder="{{'COMMON.DESCRIPTION.EMPTY' | translate}}", ng-model="item.description", tg-markitup="tg-markitup")
a.help-markdown(href="https://taiga.io/support/taiga-markdown-syntax/", target="_blank", title="{{'COMMON.MARKDOWN_HELP' | translate}}") a.help-markdown(href="https://taiga.io/support/taiga-markdown-syntax/", target="_blank", title="{{'COMMON.WYSIWYG.MARKDOWN_HELP' | translate}}")
span.icon.icon-help span.icon.icon-help
span(translate="COMMON.MARKDOWN_HELP") span(translate="COMMON.WYSIWYG.MARKDOWN_HELP")
span.save-container span.save-container
a.save.icon.icon-floppy(href="", title="{{'COMMON.SAVE' | translate}}") a.save.icon.icon-floppy(href="", title="{{'COMMON.SAVE' | translate}}")

View File

@ -13,9 +13,9 @@ section.history
div(tg-check-permission!="modify_<%- type %>", tg-toggle-comment, class="add-comment") div(tg-check-permission!="modify_<%- type %>", tg-toggle-comment, class="add-comment")
textarea(placeholder="{{'COMMENTS.TYPE_NEW_COMMENT' | translate}}", ng-model!="<%- ngmodel %>.comment", tg-markitup="tg-markitup") textarea(placeholder="{{'COMMENTS.TYPE_NEW_COMMENT' | translate}}", ng-model!="<%- ngmodel %>.comment", tg-markitup="tg-markitup")
<% if (mode !== "edit") { %> <% if (mode !== "edit") { %>
a(class="help-markdown", href="https://taiga.io/support/taiga-markdown-syntax/", target="_blank", title="{{'COMMON.DESCRIPTION.MARKDOWN_HELP' | translate}}") a(class="help-markdown", href="https://taiga.io/support/taiga-markdown-syntax/", target="_blank", title="{{'COMMON.WYSIWYG.MARKDOWN_HELP' | translate}}")
span.icon.icon-help span.icon.icon-help
span(translate="COMMON.DESCRIPTION.MARKDOWN_HELP") span(translate="COMMON.WYSIWYG.MARKDOWN_HELP")
a(href="", title="{{'COMMENTS.COMMENT' | translate}}", class="button button-green save-comment") a(href="", title="{{'COMMENTS.COMMENT' | translate}}", class="button button-green save-comment")
span(translate="COMMENTS.COMMENT") span(translate="COMMENTS.COMMENT")
<% } %> <% } %>

View File

@ -1,5 +1,5 @@
.preview .preview
.actions .actions
a(href="#" title="{{'COMMON.EDIT' | translate}}" class="icon icon-edit edit") a(href="#" title="{{'COMMON.WYSIWYG.EDIT_BUTTON' | translate}}" class="icon icon-edit edit")
.content.wysiwyg .content.wysiwyg
| <%= data %> | <%= data %>

View File

@ -3,9 +3,9 @@
span.edit.icon.icon-edit(title="{{'COMMON.EDIT' | translate}}") span.edit.icon.icon-edit(title="{{'COMMON.EDIT' | translate}}")
.edit-wiki-content(style='display: none;') .edit-wiki-content(style='display: none;')
textarea(placeholder="{{'WIKI.PLACEHOLDER_PAGE' | translate}}", ng-model='wiki.content', tg-markitup='tg-markitup') textarea(placeholder="{{'WIKI.PLACEHOLDER_PAGE' | translate}}", ng-model='wiki.content', tg-markitup='tg-markitup')
a.help-markdown(href='https://taiga.io/support/taiga-markdown-syntax/', target='_blank', title="{{'COMMON.DESCRIPTION.MARKDOWN_HELP' | translate}}") a.help-markdown(href='https://taiga.io/support/taiga-markdown-syntax/', target='_blank', title="{{'COMMON.WYSIWYG.MARKDOWN_HELP' | translate}}")
span.icon.icon-help span.icon.icon-help
span(translate="COMMON.DESCRIPTION.MARKDOWN_HELP") span(translate="COMMON.WYSIWYG.MARKDOWN_HELP")
span.action-container span.action-container
a.save.icon.icon-floppy(href='', title="{{'COMMON.SAVE' | translate}}") a.save.icon.icon-floppy(href='', title="{{'COMMON.SAVE' | translate}}")
a.cancel.icon.icon-delete(href='', title="{{'COMMON.CANCEL' | translate}}") a.cancel.icon.icon-delete(href='', title="{{'COMMON.CANCEL' | translate}}")