From: Jean-Philippe Lang Date: Sun, 10 Apr 2016 08:44:49 +0000 (+0000) Subject: Inline code highlighting toolbar button (#14937). X-Git-Tag: 3.3.0~144 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=a3b188762adbfa0671809cd6539f65cfc479bf99;p=redmine.git Inline code highlighting toolbar button (#14937). git-svn-id: http://svn.redmine.org/redmine/trunk@15316 e93f8b46-1217-0410-a6f0-8f06a7374b81 --- diff --git a/public/images/jstoolbar/bt_precode.png b/public/images/jstoolbar/bt_precode.png new file mode 100644 index 000000000..e093032a7 Binary files /dev/null and b/public/images/jstoolbar/bt_precode.png differ diff --git a/public/javascripts/jstoolbar/jstoolbar-textile.min.js b/public/javascripts/jstoolbar/jstoolbar-textile.min.js index e74cb3874..c49013c66 100644 --- a/public/javascripts/jstoolbar/jstoolbar-textile.min.js +++ b/public/javascripts/jstoolbar/jstoolbar-textile.min.js @@ -1,2 +1 @@ -function jsToolBar(e){if(!document.createElement){return}if(!e){return}if(typeof document["selection"]=="undefined"&&typeof e["setSelectionRange"]=="undefined"){return}this.textarea=e;this.editor=document.createElement("div");this.editor.className="jstEditor";this.textarea.parentNode.insertBefore(this.editor,this.textarea);this.editor.appendChild(this.textarea);this.toolbar=document.createElement("div");this.toolbar.className="jstElements";this.editor.parentNode.insertBefore(this.toolbar,this.editor);if(this.editor.addEventListener&&navigator.appVersion.match(/\bMSIE\b/)){this.handle=document.createElement("div");this.handle.className="jstHandle";var t=this.resizeDragStart;var n=this;this.handle.addEventListener("mousedown",function(e){t.call(n,e)},false);window.addEventListener("unload",function(){var e=n.handle.parentNode.removeChild(n.handle);delete n.handle},false);this.editor.parentNode.insertBefore(this.handle,this.editor.nextSibling)}this.context=null;this.toolNodes={}}function jsButton(e,t,n,r){if(typeof jsToolBar.strings=="undefined"){this.title=e||null}else{this.title=jsToolBar.strings[e]||e||null}this.fn=t||function(){};this.scope=n||null;this.className=r||null}function jsSpace(e){this.id=e||null;this.width=null}function jsCombo(e,t,n,r,i){this.title=e||null;this.options=t||null;this.scope=n||null;this.fn=r||function(){};this.className=i||null}jsButton.prototype.draw=function(){if(!this.scope)return null;var e=document.createElement("button");e.setAttribute("type","button");e.tabIndex=200;if(this.className)e.className=this.className;e.title=this.title;var t=document.createElement("span");t.appendChild(document.createTextNode(this.title));e.appendChild(t);if(this.icon!=undefined){e.style.backgroundImage="url("+this.icon+")"}if(typeof this.fn=="function"){var n=this;e.onclick=function(){try{n.fn.apply(n.scope,arguments)}catch(e){}return false}}return e};jsSpace.prototype.draw=function(){var e=document.createElement("span");if(this.id)e.id=this.id;e.appendChild(document.createTextNode(String.fromCharCode(160)));e.className="jstSpacer";if(this.width)e.style.marginRight=this.width+"px";return e};jsCombo.prototype.draw=function(){if(!this.scope||!this.options)return null;var e=document.createElement("select");if(this.className)e.className=className;e.title=this.title;for(var t in this.options){var n=document.createElement("option");n.value=t;n.appendChild(document.createTextNode(this.options[t]));e.appendChild(n)}var r=this;e.onchange=function(){try{r.fn.call(r.scope,this.value)}catch(e){alert(e)}return false};return e};jsToolBar.prototype={base_url:"",mode:"wiki",elements:{},help_link:"",getMode:function(){return this.mode},setMode:function(e){this.mode=e||"wiki"},switchMode:function(e){e=e||"wiki";this.draw(e)},setHelpLink:function(e){this.help_link=e},button:function(e){var t=this.elements[e];if(typeof t.fn[this.mode]!="function")return null;var n=new jsButton(t.title,t.fn[this.mode],this,"jstb_"+e);if(t.icon!=undefined)n.icon=t.icon;return n},space:function(e){var t=new jsSpace(e);if(this.elements[e].width!==undefined)t.width=this.elements[e].width;return t},combo:function(e){var t=this.elements[e];var n=t[this.mode].list.length;if(typeof t[this.mode].fn!="function"||n==0){return null}else{var r={};for(var i=0;i $2")})}}};jsToolBar.prototype.elements.unbq={type:"button",title:"Unquote",fn:{wiki:function(){this.encloseLineSelection("","",function(e){e=e.replace(/\r/g,"");return e.replace(/(\n|^) *[>]? *([^\n]*)/g,"$1$2")})}}};jsToolBar.prototype.elements.pre={type:"button",title:"Preformatted text",fn:{wiki:function(){this.encloseLineSelection("
\n","\n
")}}};jsToolBar.prototype.elements.space4={type:"space"};jsToolBar.prototype.elements.link={type:"button",title:"Wiki link",fn:{wiki:function(){this.encloseSelection("[[","]]")}}};jsToolBar.prototype.elements.img={type:"button",title:"Image",fn:{wiki:function(){this.encloseSelection("!","!")}}};jsToolBar.prototype.elements.space5={type:"space"};jsToolBar.prototype.elements.help={type:"button",title:"Help",fn:{wiki:function(){window.open(this.help_link,"","resizable=yes, location=no, width=300, height=640, menubar=no, status=no, scrollbars=yes")}}} +function jsToolBar(e){if(document.createElement&&e&&("undefined"!=typeof document.selection||"undefined"!=typeof e.setSelectionRange)){if(this.textarea=e,this.editor=document.createElement("div"),this.editor.className="jstEditor",this.textarea.parentNode.insertBefore(this.editor,this.textarea),this.editor.appendChild(this.textarea),this.toolbar=document.createElement("div"),this.toolbar.className="jstElements",this.editor.parentNode.insertBefore(this.toolbar,this.editor),this.editor.addEventListener&&navigator.appVersion.match(/\bMSIE\b/)){this.handle=document.createElement("div"),this.handle.className="jstHandle";var t=this.resizeDragStart,n=this;this.handle.addEventListener("mousedown",function(e){t.call(n,e)},!1),window.addEventListener("unload",function(){n.handle.parentNode.removeChild(n.handle);delete n.handle},!1),this.editor.parentNode.insertBefore(this.handle,this.editor.nextSibling)}this.context=null,this.toolNodes={}}}function jsButton(e,t,n,o){"undefined"==typeof jsToolBar.strings?this.title=e||null:this.title=jsToolBar.strings[e]||e||null,this.fn=t||function(){},this.scope=n||null,this.className=o||null}function jsSpace(e){this.id=e||null,this.width=null}function jsCombo(e,t,n,o,i){this.title=e||null,this.options=t||null,this.scope=n||null,this.fn=o||function(){},this.className=i||null}jsButton.prototype.draw=function(){if(!this.scope)return null;var e=document.createElement("button");e.setAttribute("type","button"),e.tabIndex=200,this.className&&(e.className=this.className),e.title=this.title;var t=document.createElement("span");if(t.appendChild(document.createTextNode(this.title)),e.appendChild(t),void 0!=this.icon&&(e.style.backgroundImage="url("+this.icon+")"),"function"==typeof this.fn){var n=this;e.onclick=function(){try{n.fn.apply(n.scope,arguments)}catch(e){}return!1}}return e},jsSpace.prototype.draw=function(){var e=document.createElement("span");return this.id&&(e.id=this.id),e.appendChild(document.createTextNode(String.fromCharCode(160))),e.className="jstSpacer",this.width&&(e.style.marginRight=this.width+"px"),e},jsCombo.prototype.draw=function(){if(!this.scope||!this.options)return null;var e=document.createElement("select");this.className&&(e.className=className),e.title=this.title;for(var t in this.options){var n=document.createElement("option");n.value=t,n.appendChild(document.createTextNode(this.options[t])),e.appendChild(n)}var o=this;return e.onchange=function(){try{o.fn.call(o.scope,this.value)}catch(e){alert(e)}return!1},e},jsToolBar.prototype={base_url:"",mode:"wiki",elements:{},help_link:"",getMode:function(){return this.mode},setMode:function(e){this.mode=e||"wiki"},switchMode:function(e){e=e||"wiki",this.draw(e)},setHelpLink:function(e){this.help_link=e},button:function(e){var t=this.elements[e];if("function"!=typeof t.fn[this.mode])return null;var n=new jsButton(t.title,t.fn[this.mode],this,"jstb_"+e);return void 0!=t.icon&&(n.icon=t.icon),n},space:function(e){var t=new jsSpace(e);return void 0!==this.elements[e].width&&(t.width=this.elements[e].width),t},combo:function(e){var t=this.elements[e],n=t[this.mode].list.length;if("function"!=typeof t[this.mode].fn||0==n)return null;for(var o={},i=0;n>i;i++){var s=t[this.mode].list[i];o[s]=t.options[s]}return new jsCombo(t.title,o,this,t[this.mode].fn)},draw:function(e){for(this.setMode(e);this.toolbar.hasChildNodes();)this.toolbar.removeChild(this.toolbar.firstChild);this.toolNodes={};var t,n,o;for(var i in this.elements){t=this.elements[i];var s=void 0==t.type||""==t.type||void 0!=t.disabled&&t.disabled||void 0!=t.context&&null!=t.context&&t.context!=this.context;s||"function"!=typeof this[t.type]||(n=this[t.type](i),n&&(o=n.draw()),o&&(this.toolNodes[i]=o,this.toolbar.appendChild(o)))}},singleTag:function(e,t){e=e||null,t=t||e,e&&t&&this.encloseSelection(e,t)},encloseLineSelection:function(e,t,n){this.textarea.focus(),e=e||"",t=t||"";var o,i,s,l,a,r;if("undefined"!=typeof document.selection?s=document.selection.createRange().text:"undefined"!=typeof this.textarea.setSelectionRange&&(o=this.textarea.selectionStart,i=this.textarea.selectionEnd,l=this.textarea.scrollTop,o=this.textarea.value.substring(0,o).replace(/[^\r\n]*$/g,"").length,i=this.textarea.value.length-this.textarea.value.substring(i,this.textarea.value.length).replace(/^[^\r\n]*/,"").length,s=this.textarea.value.substring(o,i)),s.match(/ $/)&&(s=s.substring(0,s.length-1),t+=" "),r="function"==typeof n?s?n.call(this,s):n(""):s?s:"",a=e+r+t,"undefined"!=typeof document.selection){document.selection.createRange().text=a;var c=this.textarea.createTextRange();c.collapse(!1),c.move("character",-t.length),c.select()}else"undefined"!=typeof this.textarea.setSelectionRange&&(this.textarea.value=this.textarea.value.substring(0,o)+a+this.textarea.value.substring(i),s?this.textarea.setSelectionRange(o+a.length,o+a.length):this.textarea.setSelectionRange(o+e.length,o+e.length),this.textarea.scrollTop=l)},encloseSelection:function(e,t,n){this.textarea.focus(),e=e||"",t=t||"";var o,i,s,l,a,r;if("undefined"!=typeof document.selection?s=document.selection.createRange().text:"undefined"!=typeof this.textarea.setSelectionRange&&(o=this.textarea.selectionStart,i=this.textarea.selectionEnd,l=this.textarea.scrollTop,s=this.textarea.value.substring(o,i)),s.match(/ $/)&&(s=s.substring(0,s.length-1),t+=" "),r="function"==typeof n?s?n.call(this,s):n(""):s?s:"",a=e+r+t,"undefined"!=typeof document.selection){document.selection.createRange().text=a;var c=this.textarea.createTextRange();c.collapse(!1),c.move("character",-t.length),c.select()}else"undefined"!=typeof this.textarea.setSelectionRange&&(this.textarea.value=this.textarea.value.substring(0,o)+a+this.textarea.value.substring(i),s?this.textarea.setSelectionRange(o+a.length,o+a.length):this.textarea.setSelectionRange(o+e.length,o+e.length),this.textarea.scrollTop=l)},stripBaseURL:function(e){if(""!=this.base_url){var t=e.indexOf(this.base_url);0==t&&(e=e.substr(this.base_url.length))}return e}},jsToolBar.prototype.resizeSetStartH=function(){this.dragStartH=this.textarea.offsetHeight+0},jsToolBar.prototype.resizeDragStart=function(e){var t=this;this.dragStartY=e.clientY,this.resizeSetStartH(),document.addEventListener("mousemove",this.dragMoveHdlr=function(e){t.resizeDragMove(e)},!1),document.addEventListener("mouseup",this.dragStopHdlr=function(e){t.resizeDragStop(e)},!1)},jsToolBar.prototype.resizeDragMove=function(e){this.textarea.style.height=this.dragStartH+e.clientY-this.dragStartY+"px"},jsToolBar.prototype.resizeDragStop=function(e){document.removeEventListener("mousemove",this.dragMoveHdlr,!1),document.removeEventListener("mouseup",this.dragStopHdlr,!1)},jsToolBar.prototype.precodeMenu=function(e){for(var t=["c","clojure","cpp","css","delphi","diff","erb","go","groovy","haml","html","java","javascript","json","lua","php","python","ruby","sass","sql","text","xml","yaml"],n=$(""),o=0;o").text(t[o]).appendTo(n).mousedown(function(){e($(this).text())});return $("body").append(n),n.menu().width(150).position({my:"left top",at:"left bottom",of:this.toolNodes.precode}),$(document).on("mousedown",function(){n.remove()}),!1},jsToolBar.prototype.elements.strong={type:"button",title:"Strong",fn:{wiki:function(){this.singleTag("*")}}},jsToolBar.prototype.elements.em={type:"button",title:"Italic",fn:{wiki:function(){this.singleTag("_")}}},jsToolBar.prototype.elements.ins={type:"button",title:"Underline",fn:{wiki:function(){this.singleTag("+")}}},jsToolBar.prototype.elements.del={type:"button",title:"Deleted",fn:{wiki:function(){this.singleTag("-")}}},jsToolBar.prototype.elements.code={type:"button",title:"Code",fn:{wiki:function(){this.singleTag("@")}}},jsToolBar.prototype.elements.space1={type:"space"},jsToolBar.prototype.elements.h1={type:"button",title:"Heading 1",fn:{wiki:function(){this.encloseLineSelection("h1. ","",function(e){return e=e.replace(/^h\d+\.\s+/,"")})}}},jsToolBar.prototype.elements.h2={type:"button",title:"Heading 2",fn:{wiki:function(){this.encloseLineSelection("h2. ","",function(e){return e=e.replace(/^h\d+\.\s+/,"")})}}},jsToolBar.prototype.elements.h3={type:"button",title:"Heading 3",fn:{wiki:function(){this.encloseLineSelection("h3. ","",function(e){return e=e.replace(/^h\d+\.\s+/,"")})}}},jsToolBar.prototype.elements.space2={type:"space"},jsToolBar.prototype.elements.ul={type:"button",title:"Unordered list",fn:{wiki:function(){this.encloseLineSelection("","",function(e){return e=e.replace(/\r/g,""),e.replace(/(\n|^)[#-]?\s*/g,"$1* ")})}}},jsToolBar.prototype.elements.ol={type:"button",title:"Ordered list",fn:{wiki:function(){this.encloseLineSelection("","",function(e){return e=e.replace(/\r/g,""),e.replace(/(\n|^)[*-]?\s*/g,"$1# ")})}}},jsToolBar.prototype.elements.space3={type:"space"},jsToolBar.prototype.elements.bq={type:"button",title:"Quote",fn:{wiki:function(){this.encloseLineSelection("","",function(e){return e=e.replace(/\r/g,""),e.replace(/(\n|^) *([^\n]*)/g,"$1> $2")})}}},jsToolBar.prototype.elements.unbq={type:"button",title:"Unquote",fn:{wiki:function(){this.encloseLineSelection("","",function(e){return e=e.replace(/\r/g,""),e.replace(/(\n|^) *[>]? *([^\n]*)/g,"$1$2")})}}},jsToolBar.prototype.elements.pre={type:"button",title:"Preformatted text",fn:{wiki:function(){this.encloseLineSelection("
\n","\n
")}}},jsToolBar.prototype.elements.precode={type:"button",title:"Highlighted code",fn:{wiki:function(){var e=this;this.precodeMenu(function(t){e.encloseLineSelection('
\n',"\n
\n")})}}},jsToolBar.prototype.elements.space4={type:"space"},jsToolBar.prototype.elements.link={type:"button",title:"Wiki link",fn:{wiki:function(){this.encloseSelection("[[","]]")}}},jsToolBar.prototype.elements.img={type:"button",title:"Image",fn:{wiki:function(){this.encloseSelection("!","!")}}},jsToolBar.prototype.elements.space5={type:"space"},jsToolBar.prototype.elements.help={type:"button",title:"Help",fn:{wiki:function(){window.open(this.help_link,"","resizable=yes, location=no, width=300, height=640, menubar=no, status=no, scrollbars=yes")}}}; diff --git a/public/javascripts/jstoolbar/jstoolbar.js b/public/javascripts/jstoolbar/jstoolbar.js index 3db31f609..ba1646c9a 100644 --- a/public/javascripts/jstoolbar/jstoolbar.js +++ b/public/javascripts/jstoolbar/jstoolbar.js @@ -372,3 +372,24 @@ jsToolBar.prototype.resizeDragStop = function(event) { document.removeEventListener('mousemove', this.dragMoveHdlr, false); document.removeEventListener('mouseup', this.dragStopHdlr, false); }; + +/* Code highlighting menu */ +jsToolBar.prototype.precodeMenu = function(fn){ + var codeRayLanguages = ["c", "clojure", "cpp", "css", "delphi", "diff", "erb", "go", "groovy", "haml", "html", "java", "javascript", "json", "lua", "php", "python", "ruby", "sass", "sql", "text", "xml", "yaml"]; + var menu = $("
    "); + for (var i = 0; i < codeRayLanguages.length; i++) { + $("
  • ").text(codeRayLanguages[i]).appendTo(menu).mousedown(function(){ + fn($(this).text()); + }); + } + $("body").append(menu); + menu.menu().width(150).position({ + my: "left top", + at: "left bottom", + of: this.toolNodes['precode'] + }); + $(document).on("mousedown", function() { + menu.remove(); + }); + return false; +}; diff --git a/public/javascripts/jstoolbar/lang/jstoolbar-en.js b/public/javascripts/jstoolbar/lang/jstoolbar-en.js index 2d68498f9..4f72f087e 100644 --- a/public/javascripts/jstoolbar/lang/jstoolbar-en.js +++ b/public/javascripts/jstoolbar/lang/jstoolbar-en.js @@ -7,6 +7,7 @@ jsToolBar.strings['Code'] = 'Inline Code'; jsToolBar.strings['Heading 1'] = 'Heading 1'; jsToolBar.strings['Heading 2'] = 'Heading 2'; jsToolBar.strings['Heading 3'] = 'Heading 3'; +jsToolBar.strings['Highlighted code'] = 'Highlighted code'; jsToolBar.strings['Unordered list'] = 'Unordered list'; jsToolBar.strings['Ordered list'] = 'Ordered list'; jsToolBar.strings['Quote'] = 'Quote'; diff --git a/public/javascripts/jstoolbar/markdown.js b/public/javascripts/jstoolbar/markdown.js index 5f58e4363..02abd724a 100644 --- a/public/javascripts/jstoolbar/markdown.js +++ b/public/javascripts/jstoolbar/markdown.js @@ -170,6 +170,20 @@ jsToolBar.prototype.elements.pre = { } } +// Code highlighting +jsToolBar.prototype.elements.precode = { + type: 'button', + title: 'Highlighted code', + fn: { + wiki: function() { + var This = this; + this.precodeMenu(function(lang){ + This.encloseLineSelection('~~~ ' + lang + '\n', '\n~~~\n'); + }); + } + } +} + // spacer jsToolBar.prototype.elements.space4 = {type: 'space'} diff --git a/public/javascripts/jstoolbar/textile.js b/public/javascripts/jstoolbar/textile.js index fa4030fc9..40bc04094 100644 --- a/public/javascripts/jstoolbar/textile.js +++ b/public/javascripts/jstoolbar/textile.js @@ -179,6 +179,20 @@ jsToolBar.prototype.elements.pre = { } } +// Code highlighting +jsToolBar.prototype.elements.precode = { + type: 'button', + title: 'Highlighted code', + fn: { + wiki: function() { + var This = this; + this.precodeMenu(function(lang){ + This.encloseLineSelection('
    \n', '\n
    \n'); + }); + } + } +} + // spacer jsToolBar.prototype.elements.space4 = {type: 'space'} diff --git a/public/stylesheets/jstoolbar.css b/public/stylesheets/jstoolbar.css index 036346315..3f976a3f4 100644 --- a/public/stylesheets/jstoolbar.css +++ b/public/stylesheets/jstoolbar.css @@ -89,6 +89,9 @@ .jstb_pre { background-image: url(../images/jstoolbar/bt_pre.png); } +.jstb_precode { + background-image: url(../images/jstoolbar/bt_precode.png); +} .jstb_link { background-image: url(../images/jstoolbar/bt_link.png); }