From 055830626e9a962d22690c731fc2ae2e3e331fa6 Mon Sep 17 00:00:00 2001 From: Yuki Date: Mon, 8 Jun 2015 20:19:47 +0530 Subject: [PATCH] Set up i18n-js and show usage to pixel --- .../javascripts/answerbox/subscribe.coffee | 12 +- .../javascripts/application.js.erb.coffee | 17 ++- config/i18n-js.yml | 28 ++++ config/locales/en.yml | 7 + vendor/assets/javascripts/js.cookie.js | 137 ++++++++++++++++++ 5 files changed, 193 insertions(+), 8 deletions(-) create mode 100644 config/i18n-js.yml create mode 100644 vendor/assets/javascripts/js.cookie.js diff --git a/app/assets/javascripts/answerbox/subscribe.coffee b/app/assets/javascripts/answerbox/subscribe.coffee index 7aceb3e0..febfc965 100644 --- a/app/assets/javascripts/answerbox/subscribe.coffee +++ b/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] - showNotification "Successfully " + endpoint + "d.", true + btn[0].children[0].nextSibling.textContent = if torpedo then translate("views.actions.unsubscribe") else translate("views.actions.subscribe") + showNotification translate("frontend.subscription.#{endpoint}"), true else - showNotification "Couldn't unsubscribe from the answer.", false - error: (jqxhr, status, error) -> - console.log jqxhr, status, error - showNotification "An error occurred, a developer should check the console for details", false + showNotification translate("frontend.subscription.fail.#{endpoint}"), false + error: showNotificationXHRError complete: (jqxhr, status) -> diff --git a/app/assets/javascripts/application.js.erb.coffee b/app/assets/javascripts/application.js.erb.coffee index c017e44e..bd340125 100644 --- a/app/assets/javascripts/application.js.erb.coffee +++ b/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" diff --git a/config/i18n-js.yml b/config/i18n-js.yml new file mode 100644 index 00000000..50b4a08e --- /dev/null +++ b/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.*'] diff --git a/config/locales/en.yml b/config/locales/en.yml index f8cf9b04..cadeeb93 100644 --- a/config/locales/en.yml +++ b/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?" diff --git a/vendor/assets/javascripts/js.cookie.js b/vendor/assets/javascripts/js.cookie.js new file mode 100644 index 00000000..116e62d8 --- /dev/null +++ b/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(); +}));