Add a URL preview componant

Closes #4499

- Introduces a URL preview component
- Added the component to tag settings and post settings
- Adds a new CSS file for this component which makes sure the preview never wraps onto multiple lines

core/client/assets/sass/components/url-preview.scss

@@ -0,0 +1,18 @@
+// ------------------------------------------------------------
+// URL Preview
+//
+// Styles for the {{url-preview}} component
+//
+// * Overflow Ellipsis
+// ------------------------------------------------------------
+
+//
+// Overflow Ellipsis
+// --------------------------------------------------
+
+.ghost-url-preview {
+    width: 98%; // Makes sure the preview isnt wider than the input
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

core/client/assets/sass/screen.scss

@@ -45,6 +45,7 @@
 @import "components/badges";
 @import "components/popovers";
 @import "components/settings-menu";
+@import "components/url-preview";
 
 
 //

core/client/components/gh-url-preview.js

@@ -0,0 +1,27 @@
+/*
+Example usage:
+{{gh-url-preview prefix="tag" slug=theSlugValue tagName="p" classNames="description"}}
+*/
+var urlPreview = Ember.Component.extend({
+    classNames: 'ghost-url-preview',
+    prefix: null,
+    slug: null,
+    theUrl: null,
+
+    generateUrl: function () {
+        // Get the blog URL and strip the scheme
+        var blogUrl = this.get('config').blogUrl,
+            noSchemeBlogUrl = blogUrl.substr(blogUrl.indexOf('://') + 3), // Remove `http[s]://`
+
+            // Get the prefix and slug values
+            prefix = this.get('prefix') ? this.get('prefix') + '/' : '',
+            slug = this.get('slug') ? this.get('slug') : '',
+
+            // Join parts of the URL together with slashes
+            theUrl = noSchemeBlogUrl + '/' + prefix + slug;
+
+        this.set('the-url', theUrl);
+    }.on('didInsertElement').observes('slug')
+});
+
+export default urlPreview;

core/client/templates/components/gh-url-preview.hbs

@@ -0,0 +1 @@
+{{the-url}}

core/client/templates/post-settings-menu.hbs

@@ -14,6 +14,7 @@
                 <span class="input-icon icon-link">
                     {{gh-input class="post-setting-slug" id="url" value=slugValue name="post-setting-slug" focus-out="updateSlug" selectOnClick="true" stopEnterKeyDownPropagation="true"}}
                 </span>
+                {{gh-url-preview slug=slugValue tagName="p" classNames="description"}}
             </div>
 
             <div class="form-group">

core/client/templates/settings/tags/settings-menu.hbs

@@ -16,8 +16,9 @@
                 </div>
 
                 <div class="form-group">
-                    <label>Slug</label>{{!--@TODO show full url preview, not just slug--}}
+                    <label>Slug</label>
                     {{gh-input type="text" value=activeTagSlugScratch focus-out="saveActiveTagSlug"}}
+                    {{gh-url-preview prefix="tag" slug=activeTagSlugScratch tagName="p" classNames="description"}}
                 </div>
 
                 <div class="form-group">