diff --git a/app/coffee/modules/issues/detail.coffee b/app/coffee/modules/issues/detail.coffee index 4f3e73e7..4c98ba3e 100644 --- a/app/coffee/modules/issues/detail.coffee +++ b/app/coffee/modules/issues/detail.coffee @@ -529,3 +529,138 @@ CommentDirective = () -> return {link:link} module.directive("tgComment", CommentDirective) + +############################################################################# +## WYSIWYG markitup editor directive +############################################################################# + +$i18next = {t: (key) -> key} + +tgMarkitupDirective = ($rootscope) -> + link = ($scope, $el, $attrs, $model) -> + openHelp = () -> + window.open($rootscope.urls.wikiHelpUrl(), '_blank') + + markdownSettings = + nameSpace: 'markdown' + onShiftEnter: {keepDefault:false, openWith:'\n\n'} + markupSet: [ + { + name: $i18next.t('wiki-editor.heading-1') + key: "1" + placeHolder: $i18next.t('wiki-editor.placeholder') + closeWith: (markItUp) -> markdownTitle(markItUp, '=') + }, + { + name: $i18next.t('wiki-editor.heading-2') + key: "2" + placeHolder: $i18next.t('wiki-editor.placeholder') + closeWith: (markItUp) -> markdownTitle(markItUp, '-') + }, + { + name: $i18next.t('wiki-editor.heading-3') + key: "3" + openWith: '### ' + placeHolder: $i18next.t('wiki-editor.placeholder') + }, + { + separator: '---------------' + }, + { + name: $i18next.t('wiki-editor.bold') + key: "B" + openWith: '**' + closeWith: '**' + }, + { + name: $i18next.t('wiki-editor.italic') + key: "I" + openWith: '_' + closeWith: '_' + }, + { + name: $i18next.t('wiki-editor.strike') + key: "S" + openWith: '~~' + closeWith: '~~' + }, + { + separator: '---------------' + }, + { + name: $i18next.t('wiki-editor.bulleted-list') + openWith: '- ' + }, + { + name: $i18next.t('wiki-editor.numeric-list') + openWith: (markItUp) -> markItUp.line+'. ' + }, + { + separator: '---------------' + }, + { + name: $i18next.t('wiki-editor.picture') + key: "P" + replaceWith: '![[![Alternative text]!]]([![Url:!:http://]!] "[![Title]!]")' + }, + { + name: $i18next.t('wiki-editor.link') + key: "L" + openWith: '[' + closeWith: ']([![Url:!:http://]!] "[![Title]!]")' + placeHolder: $i18next.t('wiki-editor.link-placeholder') + }, + { + separator: '---------------' + }, + { + name: $i18next.t('wiki-editor.quotes') + openWith: '> ' + }, + { + name: $i18next.t('wiki-editor.code-block') + openWith: '```\n' + closeWith: '\n```' + }, + { + separator: '---------------' + }, + # { + # name: $i18next.t('wiki-editor.preview') + # call: preview + # className: "preview-icon" + # }, + # { + # separator: '---------------' + # }, + # { + # name: $i18next.t('wiki-editor.help') + # call: openHelp + # className: "help" + # } + ] + afterInsert: (event) -> + target = angular.element(event.textarea) + $model.$setViewValue(target.val()) + + markdownTitle = (markItUp, char) -> + heading = '' + n = $.trim(markItUp.selection or markItUp.placeHolder).length + + for i in [0..n-1] + heading += char + + return '\n'+heading+'\n' + + element = angular.element($el) + element.markItUp(markdownSettings) + + element.on "keypress", (event) -> + $scope.$apply() + + $scope.$on "$destroy", -> + $el.off() + + return {link:link, require:"ngModel"} + +module.directive("tgMarkitup", ["$rootScope", tgMarkitupDirective]) diff --git a/app/images/markitup/bg-container.png b/app/images/markitup/bg-container.png new file mode 100755 index 00000000..ec38b8e1 Binary files /dev/null and b/app/images/markitup/bg-container.png differ diff --git a/app/images/markitup/bg-editor-bbcode.png b/app/images/markitup/bg-editor-bbcode.png new file mode 100755 index 00000000..39cdbd83 Binary files /dev/null and b/app/images/markitup/bg-editor-bbcode.png differ diff --git a/app/images/markitup/bg-editor-dotclear.png b/app/images/markitup/bg-editor-dotclear.png new file mode 100755 index 00000000..b3188dcd Binary files /dev/null and b/app/images/markitup/bg-editor-dotclear.png differ diff --git a/app/images/markitup/bg-editor-html.png b/app/images/markitup/bg-editor-html.png new file mode 100755 index 00000000..11bff456 Binary files /dev/null and b/app/images/markitup/bg-editor-html.png differ diff --git a/app/images/markitup/bg-editor-json.png b/app/images/markitup/bg-editor-json.png new file mode 100755 index 00000000..e898c1d7 Binary files /dev/null and b/app/images/markitup/bg-editor-json.png differ diff --git a/app/images/markitup/bg-editor-markdown.png b/app/images/markitup/bg-editor-markdown.png new file mode 100755 index 00000000..c1997152 Binary files /dev/null and b/app/images/markitup/bg-editor-markdown.png differ diff --git a/app/images/markitup/bg-editor-textile.png b/app/images/markitup/bg-editor-textile.png new file mode 100755 index 00000000..3ab1e9f6 Binary files /dev/null and b/app/images/markitup/bg-editor-textile.png differ diff --git a/app/images/markitup/bg-editor-wiki.png b/app/images/markitup/bg-editor-wiki.png new file mode 100755 index 00000000..7887181c Binary files /dev/null and b/app/images/markitup/bg-editor-wiki.png differ diff --git a/app/images/markitup/bg-editor-xml.png b/app/images/markitup/bg-editor-xml.png new file mode 100755 index 00000000..33b1c5d8 Binary files /dev/null and b/app/images/markitup/bg-editor-xml.png differ diff --git a/app/images/markitup/bg-editor.png b/app/images/markitup/bg-editor.png new file mode 100755 index 00000000..ab7cde48 Binary files /dev/null and b/app/images/markitup/bg-editor.png differ diff --git a/app/images/markitup/body.png b/app/images/markitup/body.png new file mode 100755 index 00000000..c6b7531a Binary files /dev/null and b/app/images/markitup/body.png differ diff --git a/app/images/markitup/bold.png b/app/images/markitup/bold.png new file mode 100755 index 00000000..889ae80e Binary files /dev/null and b/app/images/markitup/bold.png differ diff --git a/app/images/markitup/clean.png b/app/images/markitup/clean.png new file mode 100755 index 00000000..7e7cefb8 Binary files /dev/null and b/app/images/markitup/clean.png differ diff --git a/app/images/markitup/code.png b/app/images/markitup/code.png new file mode 100644 index 00000000..63fe6cef Binary files /dev/null and b/app/images/markitup/code.png differ diff --git a/app/images/markitup/h1.png b/app/images/markitup/h1.png new file mode 100644 index 00000000..9c122e91 Binary files /dev/null and b/app/images/markitup/h1.png differ diff --git a/app/images/markitup/h2.png b/app/images/markitup/h2.png new file mode 100644 index 00000000..fbd87657 Binary files /dev/null and b/app/images/markitup/h2.png differ diff --git a/app/images/markitup/h3.png b/app/images/markitup/h3.png new file mode 100644 index 00000000..c7836cf0 Binary files /dev/null and b/app/images/markitup/h3.png differ diff --git a/app/images/markitup/h4.png b/app/images/markitup/h4.png new file mode 100644 index 00000000..4e929eaf Binary files /dev/null and b/app/images/markitup/h4.png differ diff --git a/app/images/markitup/h5.png b/app/images/markitup/h5.png new file mode 100644 index 00000000..30cabebf Binary files /dev/null and b/app/images/markitup/h5.png differ diff --git a/app/images/markitup/h6.png b/app/images/markitup/h6.png new file mode 100644 index 00000000..058170a2 Binary files /dev/null and b/app/images/markitup/h6.png differ diff --git a/app/images/markitup/handle.png b/app/images/markitup/handle.png new file mode 100755 index 00000000..3993b203 Binary files /dev/null and b/app/images/markitup/handle.png differ diff --git a/app/images/markitup/help.png b/app/images/markitup/help.png new file mode 100644 index 00000000..a00b5b6c Binary files /dev/null and b/app/images/markitup/help.png differ diff --git a/app/images/markitup/image.png b/app/images/markitup/image.png new file mode 100755 index 00000000..fc3c393c Binary files /dev/null and b/app/images/markitup/image.png differ diff --git a/app/images/markitup/italic.png b/app/images/markitup/italic.png new file mode 100755 index 00000000..8482ac8c Binary files /dev/null and b/app/images/markitup/italic.png differ diff --git a/app/images/markitup/jaysalvat.png b/app/images/markitup/jaysalvat.png new file mode 100755 index 00000000..a2a23b39 Binary files /dev/null and b/app/images/markitup/jaysalvat.png differ diff --git a/app/images/markitup/link.png b/app/images/markitup/link.png new file mode 100755 index 00000000..25eacb7c Binary files /dev/null and b/app/images/markitup/link.png differ diff --git a/app/images/markitup/list-bullet.png b/app/images/markitup/list-bullet.png new file mode 100755 index 00000000..4a8672bd Binary files /dev/null and b/app/images/markitup/list-bullet.png differ diff --git a/app/images/markitup/list-numeric.png b/app/images/markitup/list-numeric.png new file mode 100755 index 00000000..33b0b8df Binary files /dev/null and b/app/images/markitup/list-numeric.png differ diff --git a/app/images/markitup/markitup.png b/app/images/markitup/markitup.png new file mode 100755 index 00000000..44f3e5db Binary files /dev/null and b/app/images/markitup/markitup.png differ diff --git a/app/images/markitup/menu.png b/app/images/markitup/menu.png new file mode 100755 index 00000000..de337c88 Binary files /dev/null and b/app/images/markitup/menu.png differ diff --git a/app/images/markitup/picture.png b/app/images/markitup/picture.png new file mode 100755 index 00000000..4a158fef Binary files /dev/null and b/app/images/markitup/picture.png differ diff --git a/app/images/markitup/preview.png b/app/images/markitup/preview.png new file mode 100755 index 00000000..a9925a06 Binary files /dev/null and b/app/images/markitup/preview.png differ diff --git a/app/images/markitup/preview_ico.png b/app/images/markitup/preview_ico.png new file mode 100644 index 00000000..f6e036d4 Binary files /dev/null and b/app/images/markitup/preview_ico.png differ diff --git a/app/images/markitup/quotes.png b/app/images/markitup/quotes.png new file mode 100644 index 00000000..e54ebeba Binary files /dev/null and b/app/images/markitup/quotes.png differ diff --git a/app/images/markitup/stroke.png b/app/images/markitup/stroke.png new file mode 100755 index 00000000..612058a7 Binary files /dev/null and b/app/images/markitup/stroke.png differ diff --git a/app/images/markitup/submenu.png b/app/images/markitup/submenu.png new file mode 100755 index 00000000..03d1977a Binary files /dev/null and b/app/images/markitup/submenu.png differ diff --git a/app/partials/issues-detail-edit.jade b/app/partials/issues-detail-edit.jade index 4777d260..7bc3cd6a 100644 --- a/app/partials/issues-detail-edit.jade +++ b/app/partials/issues-detail-edit.jade @@ -25,7 +25,7 @@ block content section.us-content // TODO Placeholder should be a WYSIWYG with issue.description - textarea(placeholder="Write a description of your issue", ng-model="issue.description") + textarea(placeholder="Write a description of your issue", ng-model="issue.description", tg-markitup) // include views/modules/attachments textarea(ng-model="issue.comment", placeholder="Write here a new commet") diff --git a/app/styles/vendor/jquery.textcomplete.css b/app/styles/vendor/jquery.textcomplete.css new file mode 100644 index 00000000..ce74c742 --- /dev/null +++ b/app/styles/vendor/jquery.textcomplete.css @@ -0,0 +1,36 @@ +/* Sample */ + +.dropdown-menu { + border: 1px solid #ddd; + background-color: white; +} + +.dropdown-menu li { + border-top: 1px solid #ddd; + padding: 2px 5px; +} + +.dropdown-menu li:first-child { + border-top: none; +} + +.dropdown-menu li:hover, +.dropdown-menu .active { + background-color: rgb(110, 183, 219); +} + +.textcomplete-wrapper { + width: 100%; +} + +/* SHOULD not modify */ + +.dropdown-menu { + list-style: none; + padding: 0; + margin: 0; +} + +.dropdown-menu a:hover { + cursor: pointer; +} diff --git a/app/styles/vendor/markitup.css b/app/styles/vendor/markitup.css new file mode 100644 index 00000000..93a8a345 --- /dev/null +++ b/app/styles/vendor/markitup.css @@ -0,0 +1,175 @@ +/* ------------------------------------------------------------------- +// markItUp! +// By Jay Salvat - http://markitup.jaysalvat.com/ +// ------------------------------------------------------------------*/ +.markItUp .markItUpButton1 a { + background-image:url("../images/markitup/h1.png"); +} + +.markItUp .markItUpButton2 a { + background-image:url("../images/markitup/h2.png"); +} + +.markItUp .markItUpButton3 a { + background-image:url("../images/markitup/h3.png"); +} + +.markItUp .markItUpButton4 a { + background-image:url("../images/markitup/bold.png"); +} +.markItUp .markItUpButton5 a { + background-image:url("../images/markitup/italic.png"); +} + +.markItUp .markItUpButton6 a { + background-image:url("../images/markitup/stroke.png"); +} + +.markdown .markItUpButton7 a { + background-image:url("../images/markitup/list-bullet.png"); +} +.markdown .markItUpButton8 a { + background-image:url("../images/markitup/list-numeric.png"); +} + +.markdown .markItUpButton9 a { + background-image:url("../images/markitup/picture.png"); +} +.markdown .markItUpButton10 a { + background-image:url("../images/markitup/link.png"); +} + +.markdown .markItUpButton11 a { + background-image:url("../images/markitup/quotes.png"); +} +.markdown .markItUpButton12 a { + background-image:url("../images/markitup/code.png"); +} + +.markdown .preview-icon a { + background-image:url("../images/markitup/preview.png"); +} + +.markdown .help a { + background-image:url("../images/markitup/help.png"); +} + + +/* ------------------------------------------------------------------- +// markItUp! Universal MarkUp Engine, JQuery plugin +// By Jay Salvat - http://markitup.jaysalvat.com/ +// ------------------------------------------------------------------*/ +.markItUp * { + margin:0px; padding:0px; + outline:none; +} +.markItUp a:link, +.markItUp a:visited { + color:#000; + text-decoration:none; +} +.markItUpContainer { + padding:5px 5px 2px 5px; + font:11px Verdana, Arial, Helvetica, sans-serif; +} +.markItUpEditor { + font:12px 'Courier New', Courier, monospace; + padding:5px; + height:320px; + clear:both; + line-height:18px; + overflow:auto; +} +.markItUpPreviewFrame { + overflow:auto; + background-color:#FFF; + width:99.9%; + height:300px; + margin:5px 0; +} +.markItUpFooter { + width:100%; +} +.markItUpResizeHandle { + overflow:hidden; + width:22px; height:5px; + margin-left:auto; + margin-right:auto; + background-image:url(../images/markitup/handle.png); + cursor:n-resize; +} +/***************************************************************************************/ +/* first row of buttons */ +.markItUp .markItUpHeader ul { + margin: 0; +} +.markItUpHeader ul li { + list-style:none; + float:left; + position:relative; + margin: 3px; +} +.markItUpHeader ul li:hover > ul{ + display:block; +} +.markItUpHeader ul .markItUpDropMenu { + background:transparent url(../images/markitup/menu.png) no-repeat 115% 50%; + margin-right:5px; +} +.markItUpHeader ul .markItUpDropMenu li { + margin-right:0px; +} +/* next rows of buttons */ +.markItUpHeader ul ul { + display:none; + position:absolute; + top:18px; left:0px; + background:#FFF; + border:1px solid #000; +} +.markItUpHeader ul ul li { + float:none; + border-bottom:1px solid #000; +} +.markItUpHeader ul ul .markItUpDropMenu { + background:#FFF url(../images/markitup/submenu.png) no-repeat 100% 50%; +} +.markItUpHeader ul .markItUpSeparator { + margin:2px 10px 0 10px; + width:1px; + height:16px; + overflow:hidden; + background-color:#CCC; +} +.markItUpHeader ul ul .markItUpSeparator { + width:auto; height:1px; + margin:0px; +} +/* next rows of buttons */ +.markItUpHeader ul ul ul { + position:absolute; + top:-1px; left:150px; +} +.markItUpHeader ul ul ul li { + float:none; +} +.markItUpHeader ul a { + display:block; + width:16px; height:16px; + text-indent:-10000px; + background-repeat:no-repeat; + padding:3px; + margin:0px; +} +.markItUpHeader ul ul a { + display:block; + padding-left:0px; + text-indent:0; + width:120px; + padding:5px 5px 5px 25px; + background-position:2px 50%; +} +.markItUpHeader ul ul a:hover { + color:#FFF; + background-color:#000; +} diff --git a/gulpfile.coffee b/gulpfile.coffee index 093065ce..4c5679ba 100644 --- a/gulpfile.coffee +++ b/gulpfile.coffee @@ -63,7 +63,9 @@ paths = { "app/vendor/pikaday/pikaday.js", "app/vendor/jquery-flot/jquery.flot.js", "app/vendor/jquery-flot/jquery.flot.pie.js", - "app/vendor/jquery-flot/jquery.flot.time.js" + "app/vendor/jquery-flot/jquery.flot.time.js", + "app/vendor/jquery-textcomplete/jquery.textcomplete.js", + "app/vendor/markitup/markitup/jquery.markitup.js" ] } @@ -173,7 +175,7 @@ gulp.task "copy", -> gulp.src("#{paths.app}/fonts/*") .pipe(gulp.dest("#{paths.dist}/fonts/")) - gulp.src("#{paths.app}/images/*") + gulp.src("#{paths.app}/images/**/*") .pipe(gulp.dest("#{paths.dist}/images/"))