From 5360d77b7978b98a7a597cfb66924af296be64ca Mon Sep 17 00:00:00 2001
From: David Baumgold <david@davidbaumgold.com>
Date: Fri, 19 Dec 2014 14:20:14 -0500
Subject: [PATCH] Refactor sock HTML to have text in Mako template

---
 cms/static/js/sock.js           | 22 +++++++++++++---------
 cms/templates/widgets/sock.html |  5 ++++-
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/cms/static/js/sock.js b/cms/static/js/sock.js
index 0d8af7c0d0..9e5b30d7f1 100644
--- a/cms/static/js/sock.js
+++ b/cms/static/js/sock.js
@@ -3,12 +3,22 @@ require(["domReady", "jquery", "jquery.smoothScroll"],
         var toggleSock = function (e) {
             e.preventDefault();
 
-            var $btnLabel = $(this).find('.copy');
+            var $btnShowSockLabel = $(this).find('.copy-show');
+            var $btnHideSockLabel = $(this).find('.copy-hide');
             var $sock = $('.wrapper-sock');
             var $sockContent = $sock.find('.wrapper-inner');
 
-            $sock.toggleClass('is-shown');
-            $sockContent.toggle('fast');
+            if ($sock.hasClass('is-shown')) {
+                $sock.removeClass('is-shown');
+                $sockContent.hide('fast');
+                $btnHideSockLabel.removeClass("is-shown").addClass("is-hidden");
+                $btnShowSockLabel.removeClass("is-hidden").addClass("is-shown");
+            } else {
+                $sock.addClass('is-shown');
+                $sockContent.show('fast');
+                $btnHideSockLabel.removeClass("is-hidden").addClass("is-shown");
+                $btnShowSockLabel.removeClass("is-shown").addClass("is-hidden");
+            }
 
             $.smoothScroll({
                 offset: -200,
@@ -17,12 +27,6 @@ require(["domReady", "jquery", "jquery.smoothScroll"],
                 scrollElement: null,
                 scrollTarget: $sock
             });
-
-            if ($sock.hasClass('is-shown')) {
-                $btnLabel.text(gettext('Hide Studio Help'));
-            } else {
-                $btnLabel.text(gettext('Looking for Help with Studio?'));
-            }
         };
 
         domReady(function () {
diff --git a/cms/templates/widgets/sock.html b/cms/templates/widgets/sock.html
index 9956f343c5..e4f477e8c4 100644
--- a/cms/templates/widgets/sock.html
+++ b/cms/templates/widgets/sock.html
@@ -4,7 +4,10 @@
 <div class="wrapper-sock wrapper">
   <ul class="list-actions list-cta">
     <li class="action-item">
-      <a href="#sock" class="cta cta-show-sock"><i class="icon-question-sign"></i> <span class="copy">${_("Looking for help with {studio_name}?").format(studio_name=settings.STUDIO_NAME)}</span></a>
+      <a href="#sock" class="cta cta-show-sock"><i class="icon-question-sign"></i>
+        <span class="copy-show is-shown">${_("Looking for help with {studio_name}?").format(studio_name=settings.STUDIO_NAME)}</span>
+        <span class="copy-hide is-hidden">${_("Hide {studio_name} Help").format(studio_name=settings.STUDIO_NAME)}</span>
+      </a>
     </li>
   </ul>