From 7c310ad2df527b1bd7b5711f00a7bff9327e581a Mon Sep 17 00:00:00 2001
From: Paul Adam Davis <pauladamdavis@gmail.com>
Date: Fri, 28 Nov 2014 10:15:48 +0000
Subject: [PATCH] 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
---
 .../assets/sass/components/url-preview.scss   | 18 +++++++++++++
 core/client/assets/sass/screen.scss           |  1 +
 core/client/components/gh-url-preview.js      | 27 +++++++++++++++++++
 .../templates/components/gh-url-preview.hbs   |  1 +
 core/client/templates/post-settings-menu.hbs  |  1 +
 .../templates/settings/tags/settings-menu.hbs |  3 ++-
 6 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 core/client/assets/sass/components/url-preview.scss
 create mode 100644 core/client/components/gh-url-preview.js
 create mode 100644 core/client/templates/components/gh-url-preview.hbs

diff --git a/core/client/assets/sass/components/url-preview.scss b/core/client/assets/sass/components/url-preview.scss
new file mode 100644
index 0000000000..e46c9b7bc5
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/core/client/assets/sass/screen.scss b/core/client/assets/sass/screen.scss
index 727607dcc3..34bdd75932 100644
--- a/core/client/assets/sass/screen.scss
+++ b/core/client/assets/sass/screen.scss
@@ -45,6 +45,7 @@
 @import "components/badges";
 @import "components/popovers";
 @import "components/settings-menu";
+@import "components/url-preview";
 
 
 //
diff --git a/core/client/components/gh-url-preview.js b/core/client/components/gh-url-preview.js
new file mode 100644
index 0000000000..2a3d29e3fd
--- /dev/null
+++ b/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;
diff --git a/core/client/templates/components/gh-url-preview.hbs b/core/client/templates/components/gh-url-preview.hbs
new file mode 100644
index 0000000000..f31f6e43f8
--- /dev/null
+++ b/core/client/templates/components/gh-url-preview.hbs
@@ -0,0 +1 @@
+{{the-url}}
\ No newline at end of file
diff --git a/core/client/templates/post-settings-menu.hbs b/core/client/templates/post-settings-menu.hbs
index 1468243f46..930e99f100 100644
--- a/core/client/templates/post-settings-menu.hbs
+++ b/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">
diff --git a/core/client/templates/settings/tags/settings-menu.hbs b/core/client/templates/settings/tags/settings-menu.hbs
index 165ae74ada..a2a6888b97 100644
--- a/core/client/templates/settings/tags/settings-menu.hbs
+++ b/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">