Set up i18n-js and show usage to pixel

app/assets/javascripts/answerbox/subscribe.coffee

@@ -7,9 +7,11 @@ $(document).on "click", "a[data-action=ab-submarine]", (ev) ->
   torpedo = 0
   if btn[0].dataset.torpedo == "yes"
     torpedo = 1
+
   endpoint = "subscribe"
   if torpedo == 0
     endpoint = "un" + endpoint
+
   $.ajax
     url: '/ajax/' + endpoint # TODO: find a way to use rake routes instead of hardcoding them here
     type: 'POST'
@@ -18,11 +20,9 @@ $(document).on "click", "a[data-action=ab-submarine]", (ev) ->
     success: (data, status, jqxhr) ->
       if data.success
         btn[0].dataset.torpedo = ["yes", "no"][torpedo]
-        btn[0].children[0].nextSibling.textContent = ["Subscribe", "Unsubscribe"][torpedo]
+        btn[0].children[0].nextSibling.textContent = if torpedo then translate("views.actions.unsubscribe") else translate("views.actions.subscribe")
-        showNotification "Successfully " + endpoint + "d.", true
+        showNotification translate("frontend.subscription.#{endpoint}"), true
       else
-        showNotification "Couldn't unsubscribe from the answer.", false
+        showNotification translate("frontend.subscription.fail.#{endpoint}"), false
-    error: (jqxhr, status, error) ->
+    error: showNotificationXHRError
-      console.log jqxhr, status, error
-      showNotification "An error occurred, a developer should check the console for details", false
     complete: (jqxhr, status) ->

app/assets/javascripts/application.js.erb.coffee

@@ -10,8 +10,10 @@
 #= require jquery.guillotine
 #= require jquery.particleground
 #= require sweet-alert
+#= require js.cookie
 #= require i18n
-#= require i18n/translations
+#= require i18n.js
+# #= require i18n/translations
 # local requires to be seen by everyone:
 #= require_tree ./answerbox
 #= require_tree ./questionbox
@@ -31,15 +33,26 @@
 NProgress.configure
   showSpinner: false
 
+window.translate = (scope, options) ->
+  # for some reason I18n errors when calling it by assign proxy, so we got to wrap it
+  I18n.translate(scope, options)
+
 window.showNotification = (text, success=true) ->
   args =
-    title: if success then "Success!" else "Uh-oh..."
+    title: translate((if success then 'frontend.success.title' else 'frontend.error.title'))
     message: text
   if success
     $.growl.notice args
   else
     $.growl.error args
 
+I18n.defaultLocale = 'en';
+I18n.locale = Cookies.get('hl') || 'en';
+
+window.showNotificationXHRError = (jqxhr, status, error) ->
+  console.log jqxhr, status, error
+  showNotification translate('frontend.error.message'), false
+
 $(document).on "click", "button#create-account", ->
   Turbolinks.visit "/sign_up"
 

config/i18n-js.yml

@@ -0,0 +1,28 @@
+# Split context in several files.
+#
+# By default only one file with all translations is exported and
+# no configuration is required. Your settings for asset pipeline
+# are automatically recognized.
+#
+# If you want to split translations into several files or specify
+# locale contexts that will be exported, just use this file to do
+# so.
+#
+# For more informations about the export options with this file, please
+# refer to the README
+#
+#
+# If you're going to use the Rails 3.1 asset pipeline, change
+# the following configuration to something like this:
+#
+# translations:
+#   - file: "app/assets/javascripts/i18n/translations.js"
+#
+# If you're running an old version, you can use something
+# like this:
+#
+fallbacks: :default_locale
+
+translations:
+  - file: 'public/javascripts/i18n/%{locale}.js'
+    only: ['*.frontend.*', '*.views.actions.*']

config/locales/en.yml

@@ -22,6 +22,7 @@
 en:
   frontend:
     load: "Load more"
+    # is frontend.actions needed? we can use views.actions
     actions:
       delete: "Delete"
       cancel: "Cancel"
@@ -35,6 +36,12 @@ en:
     error:
       title: "Uh-oh..."
       message: "An error occurred, a developer should check the console for details"
+    subscription:
+      subscribe: "Successfully subscribed."
+      unsubscribe: "Successfully unsubscribed."
+      fail:
+        subscribe: "Failed to subscribe to answer."
+        unsubscribe: "Failed to unsubscribe from answer."
     group:
       confirm:
         title: "Really delete this group?"

vendor/assets/javascripts/js.cookie.js

@@ -0,0 +1,137 @@
+/*!
+ * JavaScript Cookie v2.0.0-pre
+ * https://github.com/js-cookie/js-cookie
+ *
+ * Copyright 2006, 2015 Klaus Hartl
+ * Released under the MIT license
+ */
+(function (factory) {
+	if (typeof define === 'function' && define.amd) {
+		define(factory);
+	} else if (typeof exports === 'object') {
+		module.exports = factory();
+	} else {
+		var _OldCookies = window.Cookies;
+		var api = window.Cookies = factory(window.jQuery);
+		api.noConflict = function () {
+			window.Cookies = _OldCookies;
+			return api;
+		};
+	}
+}(function () {
+	function extend () {
+		var i = 0;
+		var result = {};
+		for (; i < arguments.length; i++) {
+			var attributes = arguments[ i ];
+			for (var key in attributes) {
+				result[key] = attributes[key];
+			}
+		}
+		return result;
+	}
+
+	function init (converter) {
+		function api (key, value, attributes) {
+			var result;
+
+			// Write
+
+			if (arguments.length > 1) {
+				attributes = extend({
+					path: '/'
+				}, api.defaults, attributes);
+
+				if (typeof attributes.expires === 'number') {
+					var expires = new Date();
+					expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e+5);
+					attributes.expires = expires;
+				}
+
+				try {
+					result = JSON.stringify(value);
+					if (/^[\{\[]/.test(result)) {
+						value = result;
+					}
+				} catch (e) {}
+
+				value = encodeURIComponent(String(value));
+				value = value.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);
+
+				key = encodeURIComponent(String(key));
+				key = key.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent);
+				key = key.replace(/[\(\)]/g, escape);
+
+				return (document.cookie = [
+					key, '=', value,
+					attributes.expires && '; expires=' + attributes.expires.toUTCString(), // use expires attribute, max-age is not supported by IE
+					attributes.path    && '; path=' + attributes.path,
+					attributes.domain  && '; domain=' + attributes.domain,
+					attributes.secure  && '; secure'
+				].join(''));
+			}
+
+			// Read
+
+			if (!key) {
+				result = {};
+			}
+
+			// To prevent the for loop in the first place assign an empty array
+			// in case there are no cookies at all. Also prevents odd result when
+			// calling "get()"
+			var cookies = document.cookie ? document.cookie.split('; ') : [];
+			var rdecode = /(%[0-9A-Z]{2})+/g;
+			var i = 0;
+
+			for (; i < cookies.length; i++) {
+				var parts = cookies[i].split('=');
+				var name = parts[0].replace(rdecode, decodeURIComponent);
+				var cookie = parts.slice(1).join('=');
+
+				if (cookie.charAt(0) === '"') {
+					cookie = cookie.slice(1, -1);
+				}
+
+				cookie = converter && converter(cookie, name) || cookie.replace(rdecode, decodeURIComponent);
+
+				if (this.json) {
+					try {
+						cookie = JSON.parse(cookie);
+					} catch (e) {}
+				}
+
+				if (key === name) {
+					result = cookie;
+					break;
+				}
+
+				if (!key) {
+					result[name] = cookie;
+				}
+			}
+
+			return result;
+		}
+
+		api.get = api.set = api;
+		api.getJSON = function () {
+			return api.apply({
+				json: true
+			}, [].slice.call(arguments));
+		};
+		api.defaults = {};
+
+		api.remove = function (key, attributes) {
+			api(key, '', extend(attributes, {
+				expires: -1
+			}));
+		};
+
+		api.withConverter = init;
+
+		return api;
+	}
+
+	return init();
+}));