1
0
Fork 0
This commit is contained in:
Gregory Eremin 2012-09-09 20:37:05 +04:00
parent 9cb145f0d7
commit e72aa5c292
12 changed files with 137 additions and 24 deletions

View File

@ -2,7 +2,7 @@
#= require jquery_ujs #= require jquery_ujs
#= require jquery.autocomplete #= require jquery.autocomplete
#= require soundmanager # require soundmanager
#= require vk_music #= require vk_music
#= require hogan #= require hogan
@ -12,6 +12,7 @@
#= require backbone_rails_sync #= require backbone_rails_sync
#= require backbone_datalink #= require backbone_datalink
#= require backbone/beat_haven #= require backbone/beat_haven
#= require locale/en
#= require bootstrap-dropdown #= require bootstrap-dropdown
#= require bootstrap-tooltip #= require bootstrap-tooltip

View File

@ -3,8 +3,10 @@
#= require_tree ./models #= require_tree ./models
#= require_tree ./views #= require_tree ./views
#= require_tree ./routers #= require_tree ./routers
#= require ./i18n
window.BeatHaven = window.BeatHaven =
Modules: {}
Models: {} Models: {}
Collections: {} Collections: {}
Routers: {} Routers: {}
@ -12,6 +14,8 @@ window.BeatHaven =
Player: null Player: null
User: null User: null
I18n: null
locales: {}
init: -> init: ->
new BeatHaven.Routers.Main() new BeatHaven.Routers.Main()
@ -21,6 +25,7 @@ window.BeatHaven =
@Player = new BeatHaven.Models.Player() @Player = new BeatHaven.Models.Player()
@User = new BeatHaven.Models.User() @User = new BeatHaven.Models.User()
@VK = new BeatHaven.Models.VK() @VK = new BeatHaven.Models.VK()
@I18n = new BeatHaven.Modules.I18n()
# @VK.init() # @VK.init()
@ -32,6 +37,7 @@ window.BeatHaven =
false false
# Backbone.history.navigate("/tour", true) # Backbone.history.navigate("/tour", true)
@I18n.init()
log: (data) -> log: (data) ->
console.log data console.log data

View File

@ -0,0 +1,36 @@
class BeatHaven.Modules.I18n
fallback_locale: "ru"
init: ->
this.translate_app()
locale: ->
return @fallback_locale unless BH.User? and BH.User.locale?
return @fallback_locale unless BH.User.locale in ["en"]
BH.User.locale
translate_app: ->
lang_code = this.locale()
self = this
$("*[data-translate-contents], *[data-translate-title], *[data-translate-placeholder]").each ->
if $(this).data("translate-contents")?
type = "contents"
else if $(this).data("translate-title")?
type = "title"
else if $(this).data("translate-placeholder")?
type = "placeholder"
lstr = $(this).data("translate-#{type}")
val = self.t(lstr, lang_code)
switch type
when "contents"
$(this).html(val)
when "title"
$(this).attr("title", val)
when "placeholder"
$(this).attr("placeholder", val)
t: (lstr, lang_code) ->
unless lang_code?
lang_code = this.locale()
eval "BH.locales.#{lang_code}['#{lstr.split(".").join("']['")}']"

View File

@ -4,17 +4,27 @@
<div class="pic"> <div class="pic">
<img src="{{album_pic}}" alt="{{album_title}}"><br> <img src="{{album_pic}}" alt="{{album_title}}"><br>
<div class="bh-underlay-blue"> <div class="bh-underlay-blue">
<a href="" class="btn btn-bh-dark album-add"><i class="icon-plus icon-white"></i> Add to playlist</a> <a href="" class="btn btn-bh-dark album-add">
<i class="icon-plus"></i>
<span data-translate-contents="artist.album.add">{{i18n_add}}</span>
</a>
</div> </div>
<div class="bh-underlay-green"> <div class="bh-underlay-green">
<a href="" class="btn btn-bh-dark album-play"><i class="icon-play icon-white"></i> Play</a> <a href="" class="btn btn-bh-dark album-play">
<i class="icon-play icon-white"></i>
<span data-translate-contents="artist.album.play">{{i18n_play}}</span>
</a>
</div> </div>
</div> </div>
<ul class="tracks"> <ul class="tracks">
{{#album_tracks}} {{#album_tracks}}
<li data-id="{{track_id}}"> <li data-id="{{track_id}}">
<a href="" class="btn btn-round track-play"><i class="icon-play"></i></a> <a href="" class="btn btn-round track-play" data-translate-title="artist.album.track.play" title="{{i18n_play}}">
<a href="" class="btn btn-round track-pause"><i class="icon-pause"></i></a> <i class="icon-play"></i>
</a>
<a href="" class="btn btn-round track-pause" data-translate-title="artist.album.track.pause" title="{{i18n_pause}}">
<i class="icon-pause"></i>
</a>
<div class="title"> <div class="title">
<div class="inner"> <div class="inner">
<a href="{{track_url}}" class="track-link">{{track_title}}</a> <a href="{{track_url}}" class="track-link">{{track_title}}</a>
@ -25,7 +35,9 @@
</div> </div>
</div> </div>
<span class="length">{{track_length}}</span> <span class="length">{{track_length}}</span>
<a href="" class="btn btn-round track-add"><i class="icon-plus"></i></a> <a href="" class="btn btn-round track-add" data-translate-title="artist.album.track.add" title="{{i18n_add}}">
<i class="icon-plus"></i>
</a>
</li> </li>
{{/album_tracks}} {{/album_tracks}}
</ul> </ul>

View File

@ -12,25 +12,37 @@
<div class="pic"> <div class="pic">
<img src="{{album_pic}}" alt="{{album_title}}"><br> <img src="{{album_pic}}" alt="{{album_title}}"><br>
<div class="bh-underlay-blue"> <div class="bh-underlay-blue">
<a href="" class="btn btn-bh-dark album-add"><i class="icon-plus"></i> Add to playlist</a> <a href="" class="btn btn-bh-dark album-add">
<i class="icon-plus"></i>
<span data-translate-contents="artist.album.add">{{i18n_add}}</span>
</a>
</div> </div>
<div class="bh-underlay-green"> <div class="bh-underlay-green">
<a href="" class="btn btn-bh-dark album-play"><i class="icon-play icon-white"></i> Play</a> <a href="" class="btn btn-bh-dark album-play">
<i class="icon-play icon-white"></i>
<span data-translate-contents="artist.album.play">{{i18n_play}}</span>
</a>
</div> </div>
</div> </div>
<h2 class="title">{{album_title}} ({{album_year}})</h2> <h2 class="title">{{album_title}} ({{album_year}})</h2>
<ul class="tracks"> <ul class="tracks">
{{#album_tracks}} {{#album_tracks}}
<li data-id="{{track_id}}"> <li data-id="{{track_id}}">
<a href="" class="btn btn-round track-play"><i class="icon-play"></i></a> <a href="" class="btn btn-round track-play" data-translate-title="artist.album.track.play" title="{{i18n_play}}">
<a href="" class="btn btn-round track-pause"><i class="icon-pause"></i></a> <i class="icon-play"></i>
</a>
<a href="" class="btn btn-round track-pause" data-translate-title="artist.album.track.pause" title="{{i18n_pause}}">
<i class="icon-pause"></i>
</a>
<div class="title"> <div class="title">
<div class="inner"> <div class="inner">
<a href="{{track_url}}" class="track-link">{{track_title}}</a> <a href="{{track_url}}" class="track-link">{{track_title}}</a>
</div> </div>
</div> </div>
<span class="length">{{track_length}}</span> <span class="length">{{track_length}}</span>
<a href="" class="btn btn-round track-add"><i class="icon-plus"></i></a> <a href="" class="btn btn-round track-add" data-translate-title="artist.album.track.add" title="{{i18n_add}}">
<i class="icon-plus"></i>
</a>
</li> </li>
{{/album_tracks}} {{/album_tracks}}
</ul> </ul>

View File

@ -7,7 +7,12 @@ class BeatHaven.Views.ArtistShow extends Backbone.View
render: -> render: ->
if typeof @model.get("artist_bio") != "undefined" if typeof @model.get("artist_bio") != "undefined"
for album_info in @model.get("artist_albums") for album_info in @model.get("artist_albums")
album_info["i18n_add"] = BH.I18n.t("artist.album.add")
album_info["i18n_play"] = BH.I18n.t("artist.album.play")
for track_info in album_info.album_tracks for track_info in album_info.album_tracks
track_info["i18n_add"] = BH.I18n.t("artist.album.track.add")
track_info["i18n_play"] = BH.I18n.t("artist.album.track.play")
track_info["i18n_pause"] = BH.I18n.t("artist.album.track.pause")
track = new BeatHaven.Models.Track(track_info.meta) track = new BeatHaven.Models.Track(track_info.meta)
BeatHaven.Player.tracks.push(track) BeatHaven.Player.tracks.push(track)
$(@el).html(@template.render(@model.toJSON())) $(@el).html(@template.render(@model.toJSON()))

View File

@ -0,0 +1,18 @@
BeatHaven.locales["en"] =
header:
search: "Search"
player:
prev: "Play previous track"
play: "Play"
pause: "Pause"
next: "Play next track"
waiting: "Waiting..."
preferences: "Preferences"
artist:
album:
add: "Add to playlist"
play: "Play"
track:
add: "Add track to playlist"
play: "Play this track"
pause: "Pause"

View File

@ -0,0 +1,18 @@
BeatHaven.locales["ru"] =
header:
search: "Поиск"
player:
prev: "Предыдущий трек"
play: "Плей"
pause: "Пауза"
next: "Следующий трек"
waiting: "Ждем..."
preferences: "Настройки"
artist:
album:
add: "Добавить в плейлист"
play: "Играть"
track:
add: "Добавить этот трек в плейлист"
play: "Играть этот трек"
pause: "Пауза"

View File

@ -1,14 +1,18 @@
.navbar { .navbar {
.preferences { .preferences {
margin: 14px 10px 0 15px; margin: 14px 10px 0 15px;
font-size: 27px;
color: #e0e0e0; .toggle-button {
text-shadow: 0 0 2px rgba(255, 255, 255, .6); @include inline-block;
font-size: 22px;
color: #e0e0e0;
text-shadow: 0 0 2px rgba(255, 255, 255, .6);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: #fafafa; color: #fafafa;
text-shadow: 0 0 4px rgba(255, 255, 255, .9); text-shadow: 0 0 4px rgba(255, 255, 255, .9);
} }
}
} }
} }

View File

@ -3,12 +3,12 @@
.controls { .controls {
float: left; float: left;
margin: 3px 0 0 -103px; margin: 3px 0 0 -86px;
a { a {
@include inline-block; @include inline-block;
margin: 11px 10px 0 0; margin: 11px 5px 0 0;
font-size: 27px; font-size: 22px;
color: #e0e0e0; color: #e0e0e0;
text-shadow: 0 0 2px rgba(255, 255, 255, .6); text-shadow: 0 0 2px rgba(255, 255, 255, .6);
text-decoration: none; text-decoration: none;

View File

@ -1,10 +1,10 @@
.player.pull-right .player.pull-right
.controls .controls
%a.icon-backward.prev{ href: "" } %a.icon-backward.prev{ "href" => "", "data-translate-title" => "header.player.prev" }
%a.icon-play.play{ href: "" } %a.icon-play.play{ "href" => "", "data-translate-title" => "header.player.play" }
%a.icon-pause.pause{ href: "" } %a.icon-pause.pause{ "href" => "", "data-translate-title" => "header.player.pause" }
%a.icon-forward.next{ href: "" } %a.icon-forward.next{ "href" => "", "data-translate-title" => "header.player.next" }
.progress-bar .progress-bar
.bar .bar
.title Waiting... .title{ "data-translate-contents" => "header.player.waiting" }
.move-it .move-it

View File

@ -15,9 +15,10 @@
.container .container
%a.brand{ href: "/" } BeatHaven %a.brand{ href: "/" } BeatHaven
%form.navbar-search.pull-left %form.navbar-search.pull-left
%input.search-query{ type: "search", placeholder: "Search" } %input.search-query{ "type" => "search", "data-translate-placeholder" => "header.search" }
.pull-right .pull-right
%a.icon-cog.preferences{ href: "/preferences" } .preferences
%a.icon-cog.toggle-button{ "href" => "/preferences", "data-translate-title" => "header.preferences" }
= render partial: "player" = render partial: "player"
.container#main You can't steal what's free .container#main You can't steal what's free