diff --git a/core/client/assets/sass/modules/global.scss b/core/client/assets/sass/modules/global.scss index 6e18b5e10a..3b0aabf3d0 100644 --- a/core/client/assets/sass/modules/global.scss +++ b/core/client/assets/sass/modules/global.scss @@ -914,15 +914,13 @@ body.blur > *:not(#modal-container) { %modal, .modal { @include box-sizing(border-box); - position: fixed; - top: 10%; - left: 50%; + max-height: calc(100%-80px); width: 450px; padding: 0px; - margin-left: -225px; background: #FFFFFF; border: 6px solid rgba(0,0,0,0.5); border-radius: $rounded; + overflow:auto; &.fadeIn { @include animation(fadeIn 0.3s linear 1); diff --git a/core/client/tpl/modal.hbs b/core/client/tpl/modal.hbs index 59c5afb14e..752428d253 100644 --- a/core/client/tpl/modal.hbs +++ b/core/client/tpl/modal.hbs @@ -1,6 +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