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

Added custom link dialog

Browse Source
This commit is contained in:
Benoit Schweblin 2013-04-04 23:13:48 +01:00
parent 4fec6dcc97
commit 48b048053c
5 changed files with 77 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/main.css
View File

@ -42,13 +42,10 @@ div, span, a, ul, li, textarea, input, button {
.input-prepend .add-on
{
border: 1px solid #ebebeb !important;
<<<<<<< HEAD
}
input.error {
border-color: #ee5f5b !important;
=======
>>>>>>> branch 'gh-pages' of https://github.com/benweet/stackedit.git
border-color: #ff6661 !important;
}
.navbar-inner .btn {
@ -184,7 +181,7 @@ hr {
}
.wmd-prompt-background {
background-color: Black;
display: none;
}
.wmd-prompt-dialog {

38
index.html
View File

@ -86,6 +86,44 @@
<div class="ui-layout-east hide"></div>
<div class="ui-layout-south hide"></div>
<div id="modal-insert-link" class="modal hide">
<div class="modal-header">
<button type="button" class="close action-close-insert-link" data-dismiss="modal"
aria-hidden="true">&times;</button>
<h3>Hyperlink</h3>
</div>
<div class="modal-body">
<p>Please provide the link URL and an optional title:</p>
<div class="input-prepend">
<span class="add-on"><i class="icon-globe"></i></span><input
id="input-insert-link" type="text" class="span5" placeholder='http://example.com/ "optional title"'></input>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn action-close-insert-link" data-dismiss="modal">Cancel</a> <a href="#"
class="btn btn-primary action-insert-link" data-dismiss="modal">OK</a>
</div>
</div>
<div id="modal-insert-image" class="modal hide">
<div class="modal-header">
<button type="button" class="close action-close-insert-link" data-dismiss="modal"
aria-hidden="true">&times;</button>
<h3>Image</h3>
</div>
<div class="modal-body">
<p>Please provide the image URL and an optional title:</p>
<div class="input-prepend">
<span class="add-on"><i class="icon-picture"></i></span><input
id="input-insert-image" type="text" class="span5" placeholder='http://example.com/image.jpg "optional title"'></input>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn action-close-insert-link" data-dismiss="modal">Cancel</a> <a href="#"
class="btn btn-primary action-insert-image" data-dismiss="modal">OK</a>
</div>
</div>
<div id="modal-remove-file-confirm" class="modal hide">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"

4
js/Markdown.Editor.js
View File

@ -111,6 +111,7 @@
* its own image insertion dialog, this hook should return true, and the callback should be called with the chosen
* image url (or null if the user cancelled). If this hook returns false, the default dialog will be used.
*/
hooks.addFalse("insertLinkDialog");
this.getConverter = function () { return markdownConverter; }
@ -1782,7 +1783,8 @@
ui.prompt(this.getString("imagedialog"), imageDefaultText, linkEnteredCallback);
}
else {
ui.prompt(this.getString("linkdialog"), linkDefaultText, linkEnteredCallback);
if (!this.hooks.insertLinkDialog(linkEnteredCallback))
ui.prompt(this.getString("linkdialog"), linkDefaultText, linkEnteredCallback);
}
return true;
}

33
js/core.js
View File

@ -22,7 +22,9 @@ define(["jquery", "bootstrap", "jgrowl", "layout", "Markdown.Editor"], function(
if (value === undefined || value.length === 0) {
element.stop(true, true).addClass("error").delay(400)
.switchClass("error");
event.stopPropagation();
if(event !== undefined) {
event.stopPropagation();
}
return undefined;
}
return value;
@ -171,6 +173,7 @@ define(["jquery", "bootstrap", "jgrowl", "layout", "Markdown.Editor"], function(
};
// Create the PageDown editor
var insertLinkCallback = undefined;
core.createEditor = function(onTextChange) {
$("#wmd-button-bar").empty();
var converter = Markdown.getSanitizingConverter();
@ -182,6 +185,17 @@ define(["jquery", "bootstrap", "jgrowl", "layout", "Markdown.Editor"], function(
return text;
});
var editor = new Markdown.Editor(converter);
editor.hooks.set("insertLinkDialog", function (callback) {
insertLinkCallback = callback;
$("#modal-insert-link").modal('show');
return true;
});
editor.hooks.set("insertImageDialog", function (callback) {
insertLinkCallback = callback;
$("#modal-insert-image").modal('show');
return true;
});
editor.run();
firstChange = false;
@ -277,6 +291,23 @@ define(["jquery", "bootstrap", "jgrowl", "layout", "Markdown.Editor"], function(
e.stopPropagation();
});
// Click events on "insert link" and "insert image" dialog buttons
$(".action-insert-link").click(function(e) {
var value = core.getInputValue($("#input-insert-link"), e);
if(value !== undefined) {
insertLinkCallback(value);
}
});
$(".action-insert-image").click(function(e) {
var value = core.getInputValue($("#input-insert-image"), e);
if(value !== undefined) {
insertLinkCallback(value);
}
});
$(".action-close-insert-link").click(function(e) {
insertLinkCallback(null);
});
$("#menu-bar, .ui-layout-center, .ui-layout-east, .ui-layout-south").removeClass("hide");
this.loadSettings();
this.createLayout();

3
js/main.js
View File

@ -18,7 +18,8 @@ require(["jquery", "core", "file-manager", "config", "custo"], function($, core,
$(function() {
// If browser downloaded a new app cache.
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
if (window.applicationCache
&& window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
window.location.reload();
return;