Added Markdown syntax button
This commit is contained in:
parent
fddd93a60c
commit
8cb2da1d23
@ -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 {
|
||||
|
@ -10,6 +10,7 @@ define([
|
||||
"extensions/buttonShare",
|
||||
"extensions/buttonStat",
|
||||
"extensions/buttonHtmlCode",
|
||||
"extensions/buttonMarkdownSyntax",
|
||||
"extensions/buttonViewer",
|
||||
"extensions/dialogAbout",
|
||||
"extensions/dialogManagePublication",
|
||||
@ -171,9 +172,21 @@ define([
|
||||
|
||||
// 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($('<div class="btn-group">').append(callback()));
|
||||
$("#extension-preview-buttons").append($('<div class="btn-group">').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
|
||||
|
@ -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() {
|
||||
|
19
js/extensions/buttonMarkdownSyntax.js
Normal file
19
js/extensions/buttonMarkdownSyntax.js
Normal file
@ -0,0 +1,19 @@
|
||||
define([
|
||||
"jquery",
|
||||
"text!html/buttonMarkdownSyntax.html",
|
||||
], function($, buttonMarkdownSyntaxHTML) {
|
||||
|
||||
var buttonMarkdownSyntax = {
|
||||
extensionId: "buttonMarkdownSyntax",
|
||||
extensionName: 'Button "Markdown syntax"',
|
||||
optional: true,
|
||||
settingsBloc: '<p>Adds a "Markdown syntax" button over the preview.</p>'
|
||||
};
|
||||
|
||||
buttonMarkdownSyntax.onCreatePreviewButton = function() {
|
||||
return $(buttonMarkdownSyntaxHTML);
|
||||
};
|
||||
|
||||
return buttonMarkdownSyntax;
|
||||
|
||||
});
|
@ -1,8 +1,7 @@
|
||||
<button class="btn dropdown-toggle action-html-code" data-toggle="dropdown"
|
||||
title="HTML code">
|
||||
<button class="btn dropdown-toggle action-html-code" title="HTML code">
|
||||
<i class="icon-code"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu pull-right">
|
||||
<h3 class="muted">HTML code</h3>
|
||||
<h3>HTML code</h3>
|
||||
<textarea id="input-html-code"></textarea>
|
||||
</div>
|
||||
|
144
js/html/buttonMarkdownSyntax.html
Normal file
144
js/html/buttonMarkdownSyntax.html
Normal file
@ -0,0 +1,144 @@
|
||||
<button class="btn dropdown-toggle" title="Markdown syntax">
|
||||
<i class="icon-question-sign"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu pull-right">
|
||||
<h3>Markdown syntax</h3>
|
||||
<div id="markdown-syntax">
|
||||
<h4>Phrase Emphasis</h4>
|
||||
|
||||
<pre><code>*italic* **bold**
|
||||
_italic_ __bold__
|
||||
</code></pre>
|
||||
|
||||
<h4>Links</h4>
|
||||
|
||||
<p>Inline:</p>
|
||||
|
||||
<pre><code>An [example](http://url.com/ "Title")
|
||||
</code></pre>
|
||||
|
||||
<p>Reference-style labels (titles are optional):</p>
|
||||
|
||||
<pre><code>An [example][id]. Then, anywhere
|
||||
else in the doc, define the link:
|
||||
|
||||
[id]: http://example.com/ "Title"
|
||||
</code></pre>
|
||||
|
||||
<h4>Images</h4>
|
||||
|
||||
<p>Inline (titles are optional):</p>
|
||||
|
||||
<pre><code>![alt text](/path/img.jpg "Title")
|
||||
</code></pre>
|
||||
|
||||
<p>Reference-style:</p>
|
||||
|
||||
<pre><code>![alt text][id]
|
||||
|
||||
[id]: /url/to/img.jpg "Title"
|
||||
</code></pre>
|
||||
|
||||
<h4>Headers</h4>
|
||||
|
||||
<p>Setext-style:</p>
|
||||
|
||||
<pre><code>Header 1
|
||||
========
|
||||
|
||||
Header 2
|
||||
--------
|
||||
</code></pre>
|
||||
|
||||
<p>atx-style (closing #'s are optional):</p>
|
||||
|
||||
<pre><code># Header 1 #
|
||||
|
||||
## Header 2 ##
|
||||
|
||||
###### Header 6
|
||||
</code></pre>
|
||||
|
||||
<h4>Lists</h4>
|
||||
|
||||
<p>Ordered, without paragraphs:</p>
|
||||
|
||||
<pre><code>1. Foo
|
||||
2. Bar
|
||||
</code></pre>
|
||||
|
||||
<p>Unordered, with paragraphs:</p>
|
||||
|
||||
<pre><code>* A list item.
|
||||
|
||||
With multiple paragraphs.
|
||||
|
||||
* Bar
|
||||
</code></pre>
|
||||
|
||||
<p>You can nest them:</p>
|
||||
|
||||
<pre><code>* Abacus
|
||||
* answer
|
||||
* Bubbles
|
||||
1. bunk
|
||||
2. bupkis
|
||||
* BELITTLER
|
||||
3. burper
|
||||
* Cunning
|
||||
</code></pre>
|
||||
|
||||
<h4>Blockquotes</h4>
|
||||
|
||||
<pre><code>> Email-style angle brackets
|
||||
> are used for blockquotes.
|
||||
|
||||
> > And, they can be nested.
|
||||
|
||||
> #### Headers in blockquotes
|
||||
>
|
||||
> * You can quote a list.
|
||||
> * Etc.
|
||||
</code></pre>
|
||||
|
||||
<h4>Code Spans</h4>
|
||||
|
||||
<pre><code>`<code>` spans are delimited
|
||||
by backticks.
|
||||
|
||||
You can include literal backticks
|
||||
like `` `this` ``.
|
||||
</code></pre>
|
||||
|
||||
<h4>Preformatted Code Blocks</h4>
|
||||
|
||||
<p>Indent every line of a code block by at least 4 spaces or 1 tab.</p>
|
||||
|
||||
<pre><code>This is a normal paragraph.
|
||||
|
||||
This is a preformatted
|
||||
code block.
|
||||
</code></pre>
|
||||
|
||||
<h4>Horizontal Rules</h4>
|
||||
|
||||
<p>Three or more dashes or asterisks:</p>
|
||||
|
||||
<pre><code>---
|
||||
|
||||
* * *
|
||||
|
||||
- - - -
|
||||
</code></pre>
|
||||
|
||||
<h4>Manual Line Breaks</h4>
|
||||
|
||||
<p>End a line with two or more spaces:</p>
|
||||
|
||||
<pre><code>Roses are red,
|
||||
Violets are blue.
|
||||
</code></pre>
|
||||
|
||||
<p class="muted">Based on the <a target="_blank" href="https://github.com/fletcher/MultiMarkdown/blob/master/Documentation/Markdown%20Syntax.md">Markdown syntax guide</a>, by Fletcher T. Penney.</p>
|
||||
</div>
|
||||
</div>
|
@ -1,9 +1,8 @@
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown"
|
||||
title="Document statistics">
|
||||
<button class="btn dropdown-toggle" title="Document statistics">
|
||||
<i class="icon-stat"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu pull-right">
|
||||
<h3 class="muted">Statistics</h3>
|
||||
<h3>Statistics</h3>
|
||||
<div class="stat">
|
||||
<div>
|
||||
<%= name1 %>: <span id="span-stat-value1"></span>
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -79,13 +79,18 @@ 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 {
|
||||
#extension-preview-buttons .dropdown-menu,
|
||||
#extension-preview-buttons .btn-group.open .btn,
|
||||
#extension-preview-buttons .btn-group.open:hover .btn {
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user