From 3057945b70c799b9829c377100d525231838b767 Mon Sep 17 00:00:00 2001 From: Matthew Harrison-Jones Date: Fri, 26 Jul 2013 12:32:26 +0100 Subject: [PATCH 1/2] Refactored menu fading to be a plugin for extendability. Need to find suitable place for the `.overlay` hideAway function call. --- core/client/admin-ui-temp.js | 12 ----------- core/client/assets/lib/jquery-utils.js | 28 ++++++++++++++++++++++++++ 2 files changed, 28 insertions(+), 12 deletions(-) diff --git a/core/client/admin-ui-temp.js b/core/client/admin-ui-temp.js index 85bdf797d7..40c29eee50 100644 --- a/core/client/admin-ui-temp.js +++ b/core/client/admin-ui-temp.js @@ -83,18 +83,6 @@ $(document).ready(function () { - // ## Set interactions for all menus - // This finds all visible '.overlay' elements and hides them upon clicking away from the element itself. - $("body").on('click', function (event) { - var $target = $(event.target); - if (!$target.parents().is(".overlay:visible") && !$target.is(".overlay:visible")) { - $("body").find(".overlay:visible").fadeOut(); - - // Toggle active classes on menu headers - $("[data-toggle].active").removeClass("active"); - } - }); - // LOGIN SCREEN $(window).trigger('resize'); diff --git a/core/client/assets/lib/jquery-utils.js b/core/client/assets/lib/jquery-utils.js index f82e4c3054..bb183ab0fa 100644 --- a/core/client/assets/lib/jquery-utils.js +++ b/core/client/assets/lib/jquery-utils.js @@ -54,4 +54,32 @@ } }; + /** + * Set interactions for all menus and overlays + * This finds all visible 'hideClass' elements and hides them upon clicking away from the element itself. + * A callback can be defined to customise the results. By default it will hide the element. + * @param callback + */ + $.fn.hideAway = function (callback) { + var $self = $(this); + $("body").on('click', function (event) { + var $target = $(event.target), + hideClass = $self.selector; + if (!$target.parents().is(hideClass + ":visible") && !$target.is(hideClass + ":visible")) { + if (callback) { + callback($("body").find(hideClass + ":visible")); + } else { + $("body").find(hideClass + ":visible").fadeOut(); + + // Toggle active classes on menu headers + $("[data-toggle].active").removeClass("active"); + } + } + }); + + return this; + }; + + $('.overlay').hideAway(); // TODO: Move to a more sensible global file. + }()); \ No newline at end of file From b089e67154b09c128625c42fe5a82ec8a48e5842 Mon Sep 17 00:00:00 2001 From: Matthew Harrison-Jones Date: Fri, 26 Jul 2013 15:32:44 +0100 Subject: [PATCH 2/2] Improved modal creation, now includes info and action types. --- core/client/assets/sass/layouts/editor.scss | 4 +++ core/client/assets/sass/modules/global.scss | 32 ++++++++++++++++- core/client/tpl/modal.hbs | 11 ++++-- core/client/views/base.js | 39 ++++++++++++++++++--- core/client/views/editor.js | 26 +++++++++----- 5 files changed, 97 insertions(+), 15 deletions(-) diff --git a/core/client/assets/sass/layouts/editor.scss b/core/client/assets/sass/layouts/editor.scss index fcf92fccf8..6e5732e24c 100644 --- a/core/client/assets/sass/layouts/editor.scss +++ b/core/client/assets/sass/layouts/editor.scss @@ -109,8 +109,12 @@ } .markdown-help { + position: relative; + top: -5px; + right: -5px; @include icon($i-question, '', lighten($brown, 15%)); float:right; + padding: 5px; &:hover { @include icon($i-question, '', $brown) diff --git a/core/client/assets/sass/modules/global.scss b/core/client/assets/sass/modules/global.scss index f2d110c66b..dfc557aa2b 100644 --- a/core/client/assets/sass/modules/global.scss +++ b/core/client/assets/sass/modules/global.scss @@ -899,11 +899,21 @@ nav { bottom: 0; left: 0; right: 0; - z-index: 1000; + z-index: 999; &.dark { background: rgba(0,0,0,0.4); } + + .modal-background { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 999; + } + } } @@ -921,12 +931,21 @@ body.blur > *:not(#modal-container) { border: 6px solid rgba(0,0,0,0.5); border-radius: $rounded; overflow:auto; + z-index: 1001; &.fadeIn { @include animation(fadeIn 0.3s linear 1); } } +.modal-info { + @extend %modal; +} + +.modal-action { + @extend %modal; +} + .modal-header { position: relative; padding: 20px; @@ -964,6 +983,17 @@ body.blur > *:not(#modal-container) { padding: 20px; } +.modal-footer { + padding: 20px; + padding-top: 0; + text-align: center; +} + +.modal-style-wide { + @extend %modal; + width: 550px; +} + /* ========================================================================== Main Elements ========================================================================== */ diff --git a/core/client/tpl/modal.hbs b/core/client/tpl/modal.hbs index 752428d253..44dd969bd2 100644 --- a/core/client/tpl/modal.hbs +++ b/core/client/tpl/modal.hbs @@ -1,5 +1,12 @@ -
-

{{title}}

+ +
+

{{content.title}}

{{#if options.close}}{{/if}}
+ {{#if options.confirm}} + + {{/if}}
\ No newline at end of file diff --git a/core/client/views/base.js b/core/client/views/base.js index e0a0fb7897..fe41b505be 100644 --- a/core/client/views/base.js +++ b/core/client/views/base.js @@ -1,4 +1,4 @@ -/*global window, document, Ghost, $, _, Backbone, JST */ +/*global window, document, Ghost, $, _, Backbone, JST, shortcut */ (function () { "use strict"; @@ -145,12 +145,33 @@ className: 'js-bb-modal', initialize: function () { this.render(); + var self = this; + if (!this.model.options.confirm) { + shortcut.add("ESC", function () { + self.removeItem(); + }); + $(document).on('click', '.modal-background', function (e) { + self.removeItem(e); + }); + } else { + // Initiate functions for buttons here so models don't get tied up. + this.acceptModal = function () { + this.model.options.confirm.accept.func(); + }; + this.rejectModal = function () { + this.model.options.confirm.reject.func(); + }; + shortcut.remove("ESC"); + $(document).off('click', '.modal-background'); + } }, template: function (data) { return JST[this.templateName](data); }, events: { - 'click .close': 'removeItem' + 'click .close': 'removeItem', + 'click .js-button-accept': 'acceptModal', + 'click .js-button-reject': 'rejectModal' }, render: function () { this.$el.html(this.template(this.model)); @@ -164,15 +185,25 @@ } return this; }, + remove: function () { + this.undelegateEvents(); + this.$el.empty(); + this.stopListening(); + return this; + }, removeItem: function (e) { - e.preventDefault(); - $(e.currentTarget).closest('.js-modal').fadeOut(300, function () { + if (e) { + e.preventDefault(); + e.stopPropagation(); + } + $('.js-modal').fadeOut(300, function () { $(this).remove(); $("#modal-container").removeClass('active dark'); if (document.body.style.filter !== undefined) { $("body").removeClass("blur"); } }); + this.remove(); } }); diff --git a/core/client/views/editor.js b/core/client/views/editor.js index 4ea83b3518..ae6a401c5b 100644 --- a/core/client/views/editor.js +++ b/core/client/views/editor.js @@ -283,11 +283,16 @@ showHelp: function () { this.addSubview(new Ghost.Views.Modal({ model: { - title: 'Markdown Help', - content: { - template: 'markdown' + options: { + close: true, + type: "info", + style: "wide", + animation: 'fadeIn' }, - animation: 'fadeIn' + content: { + template: 'markdown', + title: 'Markdown Help' + } } })); }, @@ -340,11 +345,16 @@ showHTML: function () { this.addSubview(new Ghost.Views.Modal({ model: { - title: 'Copied HTML', - content: { - template: 'copyToHTML' + options: { + close: true, + type: "info", + style: "wide", + animation: 'fadeIn' }, - animation: 'fadeIn' + content: { + template: 'copyToHTML', + title: 'Copied HTML' + } } })); }