From 0525f49008bbea605b5874e68d7866a7c5f4e4f1 Mon Sep 17 00:00:00 2001
From: Andrew Miner <andrewminer@mac.com>
Date: Thu, 12 Mar 2015 22:33:42 -0700
Subject: [PATCH] Show official URL on item detail page

---
 .../controllers/item_page_controller.coffee   | 25 +++++++++++++++----
 src/jade/templates/item_page.jade             |  4 ++-
 src/scss/tags.scss                            |  5 ++++
 src/scss/templates/item_page.scss             | 10 ++++++++
 4 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/coffee/controllers/item_page_controller.coffee b/src/coffee/controllers/item_page_controller.coffee
index c8dd6e53e..646a9da40 100644
--- a/src/coffee/controllers/item_page_controller.coffee
+++ b/src/coffee/controllers/item_page_controller.coffee
@@ -39,6 +39,13 @@ module.exports = class ItemPageController extends PageController
 
         @modPack.on Event.change, => @tryRefresh()
 
+    # Event Methods ################################################################################
+
+    craftingPlanButtonClicked: ->
+        display = @modPack.findItemDisplay @model.item.slug
+        router.navigate display.craftingUrl, trigger:true
+        return false
+
     # PageController Overrides #####################################################################
 
     getTitle: ->
@@ -63,10 +70,11 @@ module.exports = class ItemPageController extends PageController
 
         @$byline                  = @$('.byline')
         @$bylineLink              = @$('.byline a')
-        @$craftingPlanLink        = @$('a.craftingPlan')
+        @$craftingPlanButton      = @$('button.craftingPlan')
         @$descriptionPanel        = @$('.description .panel')
         @$descriptionSection      = @$('.description')
         @$name                    = @$('h1.name')
+        @$officialPageLink        = @$('a.officialPage')
         @$recipeContainer         = @$('.recipes .panel')
         @$recipesSection          = @$('.recipes')
         @$recipesSectionTitle     = @$('.recipes h2')
@@ -84,13 +92,19 @@ module.exports = class ItemPageController extends PageController
 
         if @model.item?
             display = @modPack.findItemDisplay @model.item.slug
-            @$craftingPlanLink.attr href:display.craftingUrl
-            @$craftingPlanLink.fadeIn duration:Duration.fast
+            @$craftingPlanButton.fadeIn duration:Duration.fast
             @imageLoader.load display.iconUrl, @$titleImage
             @$name.html display.itemName
 
+            if @model.item.officialUrl?
+                @$officialPageLink.attr 'href', @model.item.officialUrl
+                @$officialPageLink.fadeIn duration:Duration.normal
+            else
+                @$officialPageLink.fadeOut duration:Duration.normal
+
             @$el.slideDown duration:Duration.normal
         else
+            @$craftingPlanButton.fadeOut duration:Duration.fast
             @$el.slideUp duration:Duration.normal
 
         @_refreshByline()
@@ -107,8 +121,9 @@ module.exports = class ItemPageController extends PageController
 
     events: ->
         return _.extend super,
-            'click a.craftingPlan': 'routeLinkClick'
-            'click .byline a':      'routeLinkClick'
+            'click a.craftingPlan':      'routeLinkClick'
+            'click .byline a':           'routeLinkClick'
+            'click button.craftingPlan': 'craftingPlanButtonClicked'
 
     # Private Methods ##############################################################################
 
diff --git a/src/jade/templates/item_page.jade b/src/jade/templates/item_page.jade
index f4616dba1..15fed1421 100644
--- a/src/jade/templates/item_page.jade
+++ b/src/jade/templates/item_page.jade
@@ -8,7 +8,9 @@
 .view__item_page
     .sidebar
         .titleImage: a: img
-        a.craftingPlan.externalLink: p See Crafting Plan
+        a.officialPage.externalLink(target="new"): p Offical Documentation
+
+        button.large.craftingPlan See Crafting Plan
 
         .view__adsense
 
diff --git a/src/scss/tags.scss b/src/scss/tags.scss
index 766a957f9..3d1665d0e 100644
--- a/src/scss/tags.scss
+++ b/src/scss/tags.scss
@@ -24,6 +24,11 @@ button {
         background: white;
         color: $color-active-hover;
     }
+
+    &.large {
+        margin: 2em 0;
+        padding: 0.5em 0.5em;
+    }
 }
 
 h1 {
diff --git a/src/scss/templates/item_page.scss b/src/scss/templates/item_page.scss
index 15e0e2118..3358a9d92 100644
--- a/src/scss/templates/item_page.scss
+++ b/src/scss/templates/item_page.scss
@@ -13,6 +13,16 @@ All rights reserved.
         display: inline-block;
     }
 
+    .sidebar {
+        .externalLink {
+            display: none;
+        }
+
+        button.large {
+            width: 100%;
+        }
+    }
+
     .mainBody {
         h1.name {
             font-family: $font-family-header;