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