diff --git a/core/client/assets/lib/jquery-utils.js b/core/client/assets/lib/jquery-utils.js
new file mode 100644
index 0000000000..2ef35def0d
--- /dev/null
+++ b/core/client/assets/lib/jquery-utils.js
@@ -0,0 +1,40 @@
+// # Ghost jQuery Utils
+
+/*global window, document, $ */
+
+(function () {
+ "use strict";
+
+ // UTILS
+
+ /**
+ * Allows to check contents of each element exactly
+ * @param obj
+ * @param index
+ * @param meta
+ * @param stack
+ * @returns {boolean}
+ */
+ $.expr[":"].containsExact = function (obj, index, meta, stack) {
+ return (obj.textContent || obj.innerText || $(obj).text() || "") === meta[3];
+ };
+
+ /**
+ * Center an element to the window vertically and centrally
+ * @returns {*}
+ */
+ $.fn.center = function () {
+ this.css({
+ 'position': 'fixed',
+ 'left': '50%',
+ 'top': '50%'
+ });
+ this.css({
+ 'margin-left': -this.outerWidth() / 2 + 'px',
+ 'margin-top': -this.outerHeight() / 2 + 'px'
+ });
+
+ return this;
+ };
+
+}());
\ No newline at end of file
diff --git a/core/client/assets/sass/modules/animations.scss b/core/client/assets/sass/modules/animations.scss
index 948499c877..dd2b08518f 100644
--- a/core/client/assets/sass/modules/animations.scss
+++ b/core/client/assets/sass/modules/animations.scss
@@ -26,4 +26,14 @@
@keyframes off-canvas {
0% { opacity: 0; }
100% { opacity: 1; }
-}
\ No newline at end of file
+}
+
+@include keyframes(fadeIn) {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
diff --git a/core/client/assets/sass/modules/global.scss b/core/client/assets/sass/modules/global.scss
index e1302e87be..3b0aabf3d0 100644
--- a/core/client/assets/sass/modules/global.scss
+++ b/core/client/assets/sass/modules/global.scss
@@ -889,6 +889,81 @@ nav {
background: $blue;
}
+/* ==========================================================================
+ Modals
+ ========================================================================== */
+#modal-container {
+ &.active {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 1000;
+
+ &.dark {
+ background: rgba(0,0,0,0.4);
+ }
+ }
+}
+
+body.blur > *:not(#modal-container) {
+ -webkit-filter: blur(2px);
+ filter: blur(2px); // Not used yet
+}
+
+%modal, .modal {
+ @include box-sizing(border-box);
+ max-height: calc(100%-80px);
+ width: 450px;
+ padding: 0px;
+ background: #FFFFFF;
+ border: 6px solid rgba(0,0,0,0.5);
+ border-radius: $rounded;
+ overflow:auto;
+
+ &.fadeIn {
+ @include animation(fadeIn 0.3s linear 1);
+ }
+}
+
+.modal-header {
+ position: relative;
+ padding: 20px;
+ border-bottom: 1px solid $lightgrey;
+
+ h1 {
+ display: inline-block;
+ margin: 0;
+ font-size: 1.5em;
+ font-weight: bold;
+ }
+
+ .close {
+ @include box-sizing(border-box);
+ position: absolute;
+ top: 10px;
+ right: 20px;
+ width: 16px;
+ min-height: 16px;
+ padding: 0;
+ margin: 0;
+ border: none;
+ opacity: 0.4;
+
+ @include icon($i-close, 1em, $midgrey);
+ @include transition(opacity 0.3s linear);
+
+ &:hover{
+ opacity: 1;
+ }
+ }
+}
+
+.modal-content {
+ padding: 20px;
+}
+
/* ==========================================================================
Main Elements
========================================================================== */
diff --git a/core/client/tpl/modal.hbs b/core/client/tpl/modal.hbs
new file mode 100644
index 0000000000..752428d253
--- /dev/null
+++ b/core/client/tpl/modal.hbs
@@ -0,0 +1,5 @@
+
+
+
+
\ No newline at end of file
diff --git a/core/client/tpl/modals/markdown.hbs b/core/client/tpl/modals/markdown.hbs
new file mode 100644
index 0000000000..2d51ee07e3
--- /dev/null
+++ b/core/client/tpl/modals/markdown.hbs
@@ -0,0 +1 @@
+For now reference: Markdown Documentation
\ No newline at end of file
diff --git a/core/client/views/base.js b/core/client/views/base.js
index a991ad4ae8..e0a0fb7897 100644
--- a/core/client/views/base.js
+++ b/core/client/views/base.js
@@ -129,4 +129,67 @@
}
});
+ /**
+ * This is the view to generate the markup for the individual
+ * modal. Will be included into #modals.
+ *
+ *
+ *
+ * Types can be
+ * - (empty)
+ *
+ */
+ Ghost.Views.Modal = Ghost.View.extend({
+ el: '#modal-container',
+ templateName: 'modal',
+ className: 'js-bb-modal',
+ initialize: function () {
+ this.render();
+ },
+ template: function (data) {
+ return JST[this.templateName](data);
+ },
+ events: {
+ 'click .close': 'removeItem'
+ },
+ render: function () {
+ this.$el.html(this.template(this.model));
+ this.$(".modal-content").html(this.addSubview(new Ghost.Views.Modal.ContentView({model: this.model})).render().el);
+ this.$el.children(".js-modal").center();
+ this.$el.addClass("active");
+ if (document.body.style.webkitFilter !== undefined) { // Detect webkit filters
+ $("body").addClass("blur");
+ } else {
+ this.$el.addClass("dark");
+ }
+ return this;
+ },
+ removeItem: function (e) {
+ e.preventDefault();
+ $(e.currentTarget).closest('.js-modal').fadeOut(300, function () {
+ $(this).remove();
+ $("#modal-container").removeClass('active dark');
+ if (document.body.style.filter !== undefined) {
+ $("body").removeClass("blur");
+ }
+ });
+ }
+ });
+
+ /**
+ * Modal Content
+ * @type {*}
+ */
+ Ghost.Views.Modal.ContentView = Ghost.View.extend({
+
+ template: function (data) {
+ return JST['modals/' + this.model.content.template](data);
+ },
+
+ render: function () {
+ this.$el.html(this.template(this.model));
+ return this;
+ }
+
+ });
}());
diff --git a/core/client/views/editor.js b/core/client/views/editor.js
index b295900c49..283cc70937 100644
--- a/core/client/views/editor.js
+++ b/core/client/views/editor.js
@@ -260,6 +260,10 @@
},
+ events: {
+ 'click .markdown-help': 'showHelp'
+ },
+
syncScroll: _.debounce(function (e) {
var $codeViewport = $(e.target),
$previewViewport = $('.entry-preview-content'),
@@ -276,6 +280,18 @@
$previewViewport.scrollTop(previewPostition);
}, 50),
+ showHelp: function () {
+ this.addSubview(new Ghost.Views.Modal({
+ model: {
+ title: 'Markdown Help',
+ content: {
+ template: 'markdown'
+ },
+ animation: 'fadeIn'
+ }
+ }));
+ },
+
// This updates the editor preview panel.
// Currently gets called on every key press.
// Also trigger word count update
diff --git a/core/server/views/default.hbs b/core/server/views/default.hbs
index 92373d9ee6..44388d7aad 100644
--- a/core/server/views/default.hbs
+++ b/core/server/views/default.hbs
@@ -34,6 +34,8 @@
{{{body}}}
+
@@ -49,6 +51,7 @@
+