Reworked modals to take content from modal content templates.

This also includes the example modal, which needs to be replaced with content.

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;
+    max-height: calc(100%-80px);
-    top: 10%;
-    left: 50%;
     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);

core/client/tpl/modal.hbs

@@ -1,6 +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">
-        {{{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