Added custom link dialog

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

View File

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

View File

@ -86,6 +86,44 @@
<div class="ui-layout-east hide"></div> <div class="ui-layout-east hide"></div>
<div class="ui-layout-south 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 id="modal-remove-file-confirm" class="modal hide">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal"

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 * 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. * 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; } this.getConverter = function () { return markdownConverter; }
@ -1782,7 +1783,8 @@
ui.prompt(this.getString("imagedialog"), imageDefaultText, linkEnteredCallback); ui.prompt(this.getString("imagedialog"), imageDefaultText, linkEnteredCallback);
} }
else { else {
ui.prompt(this.getString("linkdialog"), linkDefaultText, linkEnteredCallback); if (!this.hooks.insertLinkDialog(linkEnteredCallback))
ui.prompt(this.getString("linkdialog"), linkDefaultText, linkEnteredCallback);
} }
return true; return true;
} }

View File

@ -22,7 +22,9 @@ define(["jquery", "bootstrap", "jgrowl", "layout", "Markdown.Editor"], function(
if (value === undefined || value.length === 0) { if (value === undefined || value.length === 0) {
element.stop(true, true).addClass("error").delay(400) element.stop(true, true).addClass("error").delay(400)
.switchClass("error"); .switchClass("error");
event.stopPropagation(); if(event !== undefined) {
event.stopPropagation();
}
return undefined; return undefined;
} }
return value; return value;
@ -171,6 +173,7 @@ define(["jquery", "bootstrap", "jgrowl", "layout", "Markdown.Editor"], function(
}; };
// Create the PageDown editor // Create the PageDown editor
var insertLinkCallback = undefined;
core.createEditor = function(onTextChange) { core.createEditor = function(onTextChange) {
$("#wmd-button-bar").empty(); $("#wmd-button-bar").empty();
var converter = Markdown.getSanitizingConverter(); var converter = Markdown.getSanitizingConverter();
@ -182,6 +185,17 @@ define(["jquery", "bootstrap", "jgrowl", "layout", "Markdown.Editor"], function(
return text; return text;
}); });
var editor = new Markdown.Editor(converter); 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(); editor.run();
firstChange = false; firstChange = false;
@ -277,6 +291,23 @@ define(["jquery", "bootstrap", "jgrowl", "layout", "Markdown.Editor"], function(
e.stopPropagation(); 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"); $("#menu-bar, .ui-layout-center, .ui-layout-east, .ui-layout-south").removeClass("hide");
this.loadSettings(); this.loadSettings();
this.createLayout(); this.createLayout();

View File

@ -18,7 +18,8 @@ require(["jquery", "core", "file-manager", "config", "custo"], function($, core,
$(function() { $(function() {
// If browser downloaded a new app cache. // 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.applicationCache.swapCache();
window.location.reload(); window.location.reload();
return; return;