From 8cb2da1d23be7701ec3e8788efb2b8b0ca00c431 Mon Sep 17 00:00:00 2001 From: benweet Date: Thu, 20 Jun 2013 23:28:49 +0100 Subject: [PATCH] Added Markdown syntax button --- css/default.css | 69 +++++++++--- js/extensionMgr.js | 19 +++- js/extensions/buttonHtmlCode.js | 4 - js/extensions/buttonMarkdownSyntax.js | 19 ++++ js/html/buttonHtmlCode.html | 5 +- js/html/buttonMarkdownSyntax.html | 144 ++++++++++++++++++++++++++ js/html/buttonStat.html | 5 +- themes/blue-gray/blue-gray.css | 9 +- themes/night/night.css | 11 +- 9 files changed, 251 insertions(+), 34 deletions(-) create mode 100644 js/extensions/buttonMarkdownSyntax.js create mode 100644 js/html/buttonMarkdownSyntax.html diff --git a/css/default.css b/css/default.css index 571ce2fc..00f7dcc0 100644 --- a/css/default.css +++ b/css/default.css @@ -25,7 +25,8 @@ body { cursor: progress; } -.btn,.dropdown-menu { +.btn, +.dropdown-menu { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -105,19 +106,25 @@ input::-webkit-input-placeholder,textarea::-webkit-input-placeholder { background-color: #ddd; } +#extension-preview-buttons .dropdown-menu, +#extension-preview-buttons .btn-group.open .btn, +#extension-preview-buttons .btn-group.open:hover .btn { + background-color: #e8e8e8; +} + .navbar-inner .btn:hover, .navbar-inner .btn:focus, .navbar-inner .btn:active, .navbar-inner .btn.active, .btn-group.open .btn.dropdown-toggle, -#extension-preview-buttons .btn-group:hover .btn, -#extension-preview-buttons .btn-group.open .btn { +#extension-preview-buttons .btn-group:hover .btn { color: #333333; background-color: #eee; } -.nav .dropdown-toggle .caret,.nav .dropdown-toggle:hover .caret,.nav .dropdown-toggle:focus .caret - { +.nav .dropdown-toggle .caret, +.nav .dropdown-toggle:hover .caret, +.nav .dropdown-toggle:focus .caret { border-top-color: #000; border-bottom-color: #000; } @@ -126,20 +133,27 @@ input::-webkit-input-placeholder,textarea::-webkit-input-placeholder { display: none; } -.navbar-inner .btn.disabled,.navbar-inner .btn[disabled] { +.navbar-inner .btn.disabled, +.navbar-inner .btn[disabled] { color: #333333; background-color: #ddd; opacity: 0.3; filter: alpha(opacity = 30); } -.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-submenu:hover>a,.dropdown-submenu:focus>a,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus - { +.dropdown-menu>li>a:hover, +.dropdown-menu>li>a:focus, +.dropdown-submenu:hover>a, +.dropdown-submenu:focus>a, +.dropdown-menu>.active>a, +.dropdown-menu>.active>a:hover, +.dropdown-menu>.active>a:focus { background-color: #888; } -.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus - { +.dropdown-menu>.disabled>a, +.dropdown-menu>.disabled>a:hover, +.dropdown-menu>.disabled>a:focus { color: #bbb; } @@ -157,8 +171,13 @@ input[readonly],select[readonly],textarea[readonly] { cursor: text; } -.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled],.btn-group.open .btn.btn-primary.dropdown-toggle - { +.btn-primary:hover, +.btn-primary:focus, +.btn-primary:active, +.btn-primary.active, +.btn-primary.disabled, +.btn-primary[disabled], +.btn-group.open .btn.btn-primary.dropdown-toggle { color: #fff; background-color: #888; } @@ -176,10 +195,15 @@ input[readonly],select[readonly],textarea[readonly] { #extension-preview-buttons .dropdown-menu { position: fixed; right: 25px; - top: inherit; + top: auto; z-index: 1; } +#extension-preview-buttons .dropdown-menu { + border: 0 !important; + margin-top: 1px; +} + #extension-preview-buttons .btn-group:hover .btn, #extension-preview-buttons .btn-group.open .btn { opacity: 1; @@ -225,6 +249,16 @@ input[readonly],select[readonly],textarea[readonly] { border-bottom-right-radius: 4px; } +#markdown-syntax { + max-height: 300px; + overflow-y: auto; + overflow-x: hidden; + padding-right: 20px; + margin: 0 -20px 10px 0; + width: 300px; + white-space: normal; +} + .btn-group>.btn+.dropdown-toggle { padding-right: 12px; padding-left: 12px; @@ -250,7 +284,9 @@ h1 { list-style-type: none; } -p,pre,blockquote { +p, +pre, +blockquote { margin: 0 0 20px; } @@ -355,7 +391,8 @@ div.dropdown-menu { padding: 5px 20px; } -div.dropdown-menu p,div.dropdown-menu blockquote { +div.dropdown-menu p, +div.dropdown-menu blockquote { margin: 10px 0; } @@ -369,8 +406,8 @@ div.dropdown-menu i { div.dropdown-menu textarea { width: 250px; - max-width: 250px; height: 150px; + resize: none; } #link-container { diff --git a/js/extensionMgr.js b/js/extensionMgr.js index 7fad431a..e5aa1b6a 100644 --- a/js/extensionMgr.js +++ b/js/extensionMgr.js @@ -10,6 +10,7 @@ define([ "extensions/buttonShare", "extensions/buttonStat", "extensions/buttonHtmlCode", + "extensions/buttonMarkdownSyntax", "extensions/buttonViewer", "extensions/dialogAbout", "extensions/dialogManagePublication", @@ -168,14 +169,26 @@ define([ _.each(onCreateButtonCallbackList, function(callback) { $("#extension-buttons").append($('
').append(callback())); }); - + // Create extension preview buttons logger.log("onCreatePreviewButton"); + function showDropdown(btnGroup) { + $("#extension-preview-buttons .open").removeClass("open").find(".dropdown-menu").addClass("hide"); + if(btnGroup !== undefined) { + btnGroup.addClass("open").find(".dropdown-menu").removeClass("hide"); + } + } var onCreatePreviewButtonCallbackList = getExtensionCallbackList("onCreatePreviewButton"); _.each(onCreatePreviewButtonCallbackList, function(callback) { - $("#extension-preview-buttons").append($('
').append(callback())); + $("#extension-preview-buttons").append($('
').append(callback()).each(function() { + // Toggle dropdown manually + var btnGroup = $(this); + btnGroup.find(".dropdown-toggle").click(function() { + showDropdown(btnGroup.is(".open") ? undefined : btnGroup); + }); + })); }); - + // Call extensions onReady callbacks var onReady = createHook("onReady"); onReady(); diff --git a/js/extensions/buttonHtmlCode.js b/js/extensions/buttonHtmlCode.js index 7d499910..a4d46e32 100644 --- a/js/extensions/buttonHtmlCode.js +++ b/js/extensions/buttonHtmlCode.js @@ -19,10 +19,6 @@ define([ }; buttonHtmlCode.onReady = function() { - $("#input-html-code").click(function(event) { - event.stopPropagation(); - }); - $(".action-html-code").click(function() { _.defer(function() { $("#input-html-code").each(function() { diff --git a/js/extensions/buttonMarkdownSyntax.js b/js/extensions/buttonMarkdownSyntax.js new file mode 100644 index 00000000..2e766afc --- /dev/null +++ b/js/extensions/buttonMarkdownSyntax.js @@ -0,0 +1,19 @@ +define([ + "jquery", + "text!html/buttonMarkdownSyntax.html", +], function($, buttonMarkdownSyntaxHTML) { + + var buttonMarkdownSyntax = { + extensionId: "buttonMarkdownSyntax", + extensionName: 'Button "Markdown syntax"', + optional: true, + settingsBloc: '

Adds a "Markdown syntax" button over the preview.

' + }; + + buttonMarkdownSyntax.onCreatePreviewButton = function() { + return $(buttonMarkdownSyntaxHTML); + }; + + return buttonMarkdownSyntax; + +}); \ No newline at end of file diff --git a/js/html/buttonHtmlCode.html b/js/html/buttonHtmlCode.html index 200119f2..ea4eb591 100644 --- a/js/html/buttonHtmlCode.html +++ b/js/html/buttonHtmlCode.html @@ -1,8 +1,7 @@ -
-

HTML code

+

HTML code

diff --git a/js/html/buttonMarkdownSyntax.html b/js/html/buttonMarkdownSyntax.html new file mode 100644 index 00000000..51b8b173 --- /dev/null +++ b/js/html/buttonMarkdownSyntax.html @@ -0,0 +1,144 @@ + +
+

Markdown syntax

+
+

Phrase Emphasis

+ +
*italic*   **bold**
+_italic_   __bold__
+
+ +

Links

+ +

Inline:

+ +
An [example](http://url.com/ "Title")
+
+ +

Reference-style labels (titles are optional):

+ +
An [example][id]. Then, anywhere
+else in the doc, define the link:
+
+  [id]: http://example.com/  "Title"
+
+ +

Images

+ +

Inline (titles are optional):

+ +
![alt text](/path/img.jpg "Title")
+
+ +

Reference-style:

+ +
![alt text][id]
+
+[id]: /url/to/img.jpg "Title"
+
+ +

Headers

+ +

Setext-style:

+ +
Header 1
+========
+
+Header 2
+--------
+
+ +

atx-style (closing #'s are optional):

+ +
# Header 1 #
+
+## Header 2 ##
+
+###### Header 6
+
+ +

Lists

+ +

Ordered, without paragraphs:

+ +
1.  Foo
+2.  Bar
+
+ +

Unordered, with paragraphs:

+ +
*   A list item.
+
+    With multiple paragraphs.
+
+*   Bar
+
+ +

You can nest them:

+ +
*   Abacus
+    * answer
+*   Bubbles
+    1.  bunk
+    2.  bupkis
+        * BELITTLER
+    3. burper
+*   Cunning
+
+ +

Blockquotes

+ +
> Email-style angle brackets
+> are used for blockquotes.
+
+> > And, they can be nested.
+
+> #### Headers in blockquotes
+> 
+> * You can quote a list.
+> * Etc.
+
+ +

Code Spans

+ +
`<code>` spans are delimited
+by backticks.
+
+You can include literal backticks
+like `` `this` ``.
+
+ +

Preformatted Code Blocks

+ +

Indent every line of a code block by at least 4 spaces or 1 tab.

+ +
This is a normal paragraph.
+
+    This is a preformatted
+    code block.
+
+ +

Horizontal Rules

+ +

Three or more dashes or asterisks:

+ +
---
+
+* * *
+
+- - - - 
+
+ +

Manual Line Breaks

+ +

End a line with two or more spaces:

+ +
Roses are red,   
+Violets are blue.
+
+ +

Based on the Markdown syntax guide, by Fletcher T. Penney.

+
+
diff --git a/js/html/buttonStat.html b/js/html/buttonStat.html index e3648326..a6992d90 100644 --- a/js/html/buttonStat.html +++ b/js/html/buttonStat.html @@ -1,9 +1,8 @@ -
-

Statistics

+

Statistics

<%= name1 %>: diff --git a/themes/blue-gray/blue-gray.css b/themes/blue-gray/blue-gray.css index cbd3e955..e3c7957d 100644 --- a/themes/blue-gray/blue-gray.css +++ b/themes/blue-gray/blue-gray.css @@ -19,14 +19,19 @@ textarea[disabled], background-color: #ced5de; } +#extension-preview-buttons .dropdown-menu, +#extension-preview-buttons .btn-group.open .btn, +#extension-preview-buttons .btn-group.open:hover .btn { + background-color: #e1e6ed; +} + .btn:hover, .navbar-inner .btn:hover, .navbar-inner .btn:focus, .navbar-inner .btn:active, .navbar-inner .btn.active, .btn-group.open .btn.dropdown-toggle, -#extension-preview-buttons .btn-group:hover .btn, -#extension-preview-buttons .btn-group.open .btn { +#extension-preview-buttons .btn-group:hover .btn { background-color: #e1e6ed; } diff --git a/themes/night/night.css b/themes/night/night.css index 2b70d5b1..d9875169 100644 --- a/themes/night/night.css +++ b/themes/night/night.css @@ -79,14 +79,19 @@ blockquote { background-color: #444; } +#extension-preview-buttons .btn-group:hover .btn { + background-color: #333; +} + .navbar-inner .btn:hover, .navbar-inner .btn:focus, .navbar-inner .btn:active, .navbar-inner .btn.active, .btn-group.open .btn.dropdown-toggle, -#extension-preview-buttons .btn-group:hover .btn, -#extension-preview-buttons .btn-group.open .btn { - background-color: #555; +#extension-preview-buttons .dropdown-menu, +#extension-preview-buttons .btn-group.open .btn, +#extension-preview-buttons .btn-group.open:hover .btn { + background-color: #555; } .btn:hover {