Merge pull request #307 from matthojo/modals

Added in Modals

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;
+    };
+
+}());

core/client/assets/sass/modules/animations.scss

@@ -26,4 +26,14 @@
 @keyframes off-canvas {
   0%   { opacity: 0; }
   100% { opacity: 1; }
-}
+}
+
+@include keyframes(fadeIn) {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+

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
    ========================================================================== */

core/client/tpl/modal.hbs

@@ -0,0 +1,5 @@
+<article class="modal{{#if type}}-{{type}}{{/if}} {{animation}} js-modal">
+    <header class="modal-header"><h1>{{title}}</h1><a class="close" href="#"><span class="hidden">Close</span></a></header>
+    <section class="modal-content">
+    </section>
+</article>

core/client/tpl/modals/markdown.hbs

@@ -0,0 +1 @@
+For now reference: <a href="http://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown Documentation</a>

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;
+        }
+
+    });
 }());

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

core/server/views/default.hbs

@@ -34,6 +34,8 @@
             {{{body}}}
         </main>
 
+        <aside id="modal-container">
+        </aside>
         <script src="/public/vendor/jquery/jquery.min.js"></script>
         <script src="/public/vendor/icheck/jquery.icheck.min.js"></script>
         <script src="/public/vendor/underscore.js"></script>
@@ -49,6 +51,7 @@
         <script src="/public/vendor/jquery/jquery-ui-1.10.3.custom.min.js"></script>
         <script src="/public/vendor/packery.pkgd.min.js"></script>
 
+        <script src="/public/lib/jquery-utils.js"></script>
         <script src="/public/init.js"></script>
         <script src="/public/tpl/hbs-tpl.js"></script>
         <script src="/public/toggle.js"></script>