caojiezi2003/Stackedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Markdown syntax button

Browse Source
This commit is contained in:
benweet 2013-06-20 23:28:49 +01:00
parent fddd93a60c
commit 8cb2da1d23
9 changed files with 251 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
css/default.css
View File

@ -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 {

15
js/extensionMgr.js
View File

@ -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

4
js/extensions/buttonHtmlCode.js
View File

@ -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
View 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;
});

5
js/html/buttonHtmlCode.html
View File

@ -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
View 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>&gt; Email-style angle brackets
&gt; are used for blockquotes.
&gt; &gt; And, they can be nested.
&gt; #### Headers in blockquotes
&gt;
&gt; * You can quote a list.
&gt; * Etc.
</code></pre>
<h4>Code Spans</h4>
<pre><code>`&lt;code&gt;` 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>

5
js/html/buttonStat.html
View File

@ -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>

9
themes/blue-gray/blue-gray.css
View File

@ -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;
}

11
themes/night/night.css
View File

@ -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 {