Font Awesome, jbuilder templates, getting rid of beatparser

app/assets/javascripts/application.js

@@ -1,15 +0,0 @@
-//= require jquery
-//= require jquery_ujs
-//= require jquery.autocomplete
-//= require soundmanager
-//= require vk_music
-//= require mustache
-//= require hogan
-//= require underscore
-//= require backbone
-//= require backbone_rails_sync
-//= require backbone_datalink
-//= require backbone/beat_haven
-//= require bootstrap-dropdown
-//= require_tree .
-

app/assets/javascripts/application.js.coffee

@@ -0,0 +1,21 @@
+#= require jquery
+#= require jquery_ujs
+#= require jquery.autocomplete
+
+#= require soundmanager
+#= require vk_music
+
+#= require hogan
+
+#= require underscore
+#= require backbone
+#= require backbone_rails_sync
+#= require backbone_datalink
+#= require backbone/beat_haven
+
+#= require bootstrap-dropdown
+#= require bootstrap-tooltip
+#= require bootstrap-popover
+
+#= require_tree .
+

app/assets/javascripts/backbone/autocomplete.js.coffee

@@ -7,6 +7,6 @@ $ ->
     $(".player").animate(width: 518)
 
   window.desired = $(".navbar-search input").autocomplete
-    serviceUrl: "/api/search/complete"
+    serviceUrl: "/api/search/complete.json"
     onSelect: (selected) ->
       Backbone.history.navigate("/search/"+selected.replace(/\s/g, "+"), true)

app/assets/javascripts/backbone/beat_haven.js.coffee

@@ -14,6 +14,7 @@ window.BeatHaven =
   User: null
 
   init: ->
+    new BeatHaven.Routers.Main()
     new BeatHaven.Routers.Artist()
     new BeatHaven.Routers.Album()
     new BeatHaven.Routers.Search()
@@ -21,7 +22,7 @@ window.BeatHaven =
     @User = new BeatHaven.Models.User()
     @VK = new BeatHaven.Models.VK()
 
-    @VK.init()
+    # @VK.init()
 
     Backbone.history.start(pushState: true);
     $("a").live "click", (e) ->
@@ -30,6 +31,8 @@ window.BeatHaven =
         Backbone.history.navigate($(this).attr("href"), true)
       false
 
+    # Backbone.history.navigate("/tour", true)
+
   log: (data) ->
     console.log data
 

app/assets/javascripts/backbone/models/vk.js.coffee

@@ -2,6 +2,7 @@ class BeatHaven.Models.VK extends Backbone.Model
 
   session_length: 3600 # seconds
   Music: null
+  BITMASK: 8
 
   popup: ->
     alert(1)
@@ -13,12 +14,13 @@ class BeatHaven.Models.VK extends Backbone.Model
     BH.VK.auth()
     # VK.Widgets.Like("vk-like", {type: "mini", height: 20, pageUrl: "http://beathaven.org/", text: "Like"})
 
-  auth: ->
+  auth: (callback) ->
     BH.log "Requesting new Vkontakte session ..."
     window.VK.Auth.getLoginStatus (response) ->
       BH.VK.auth_info(response)
+      callback() if callback?
       false
-    , 8
+    , window.BH.VK.BITMASK
     false
 
   auth_info: (response) ->
@@ -38,6 +40,7 @@ class BeatHaven.Models.VK extends Backbone.Model
     else
       BH.log "Not authorized"
 
+
   set_favorites: ->
     window.VK.Api.call "audio.get", uid: BH.User.vk_id(), (response) ->
       BH.User.set_favorites(response.response)

app/assets/javascripts/backbone/routers/artist_router.js.coffee

@@ -3,7 +3,7 @@ class BeatHaven.Routers.Artist extends Backbone.Router
     "artist/:name": "show"
 
   show: (name) ->
-    artist = new BeatHaven.Models.Artist(id: name)
+    artist = new BeatHaven.Models.Artist(id: name.replace(/\s|%2BF/g, "+"))
     artist.fetch()
     view = new BeatHaven.Views.ArtistShow(model: artist)
     $("#main").html(view.render().el)

app/assets/javascripts/backbone/routers/main_router.js.coffee

@@ -0,0 +1,7 @@
+class BeatHaven.Routers.Main extends Backbone.Router
+  routes:
+    "tour": "tour"
+
+  tour: ->
+    view = new BeatHaven.Views.MainTour()
+    $(".tour").html(view.render().el)

app/assets/javascripts/backbone/templates/artist/show.hamstache_

@@ -0,0 +1,36 @@
+.artist-page
+  %h1 {{ artist_title }}
+  .artist-info
+    .pic
+      %img{ src: "{{ artist_pic }}", alt: "{{ artist_title }}" }
+    .bio {{& artist_bio}}
+
+  .albums
+  {{#artist_albums}}
+    .album
+      .pic
+        %img{ src: "{{ album_pic }}", alt: "{{ album_title }}" }
+        %br
+        .bh-underlay-blue
+          %a.btn.btn-bh-dark.album-add{ href: "" }
+            %i.icon-plus.icon-white
+            Add to playlist
+        .bh-underlay-green
+          %a.btn.btn-bh-dark.album-play{ href: "" }
+            %i.icon-play.icon-white
+            Play
+
+      %h2.title {{ album_title }} ({{ album_year }})
+      %ul.tracks
+      {{# album_tracks }}
+        %li{ "data-id" => "{{ track_id }}" }
+          %a.btn.btn-round.track-play{ href: "" }
+            %i.icon-play
+          %a.btn.btn-round.track-pause{ href: "" }
+            %i.icon-pause
+          .title
+            .inner
+              %a.track-link{ href: "{{track_url}}" } {{ track_title }}
+          %span.length {{ track_length }}
+          %a.btn.btn-round.track-add{ href: "" }
+            %i.icon-plus

app/assets/javascripts/backbone/templates/artist/show.mustache

@@ -12,7 +12,7 @@
       <div class="pic">
         <img src="{{album_pic}}" alt="{{album_title}}"><br>
         <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> Add to playlist</a>
         </div>
         <div class="bh-underlay-green">
           <a href="" class="btn btn-bh-dark album-play"><i class="icon-play icon-white"></i> Play</a>

app/assets/javascripts/backbone/templates/main/tour.mustache

@@ -0,0 +1,63 @@
+<div class="hero-unit popup step step-1">
+  <h1>Привет!</h1>
+  <p></p>
+  <p>Это Битхейвен, сайт с музыкой. Наверное, ты у нас первый раз, так что давай я в двух словах расскажу что к чему.</p>
+  <p>Битхейвен не содержит музыки как таковой, он просто умеет хорошо и удобно ее проигрывать. А саму музыку он специально для тебя ищет на <strong>VK.com</strong>. Поэтому прошу тебя для начала авторизоваться через <strong>VK.com</strong>, а потом я покажу что делать дальше.</p>
+  <p>Авторизуемся?</p>
+  <p></p>
+  <p><a href="" class="btn btn-primary btn-large">Хорошо</a></p>
+</div>
+<div class="hero-unit popup step step-1a">
+  <h1>Ой!</h1>
+  <p></p>
+  <p>Авторизация не сработала.</p>
+  <p>Скорее всего так вышло из-за того, что ты не стал авторизовываться или разрешать приложению доступ. Напрасно, оно абсолютно безобидное и в принципе не может сделать тебе ничего плохого.</p>
+  <p>К сожалению, без авторизации <strong>VK.com</strong> я не смогу играть для тебя музыку, извини.</p>
+  <p>Попробуем еще раз или заглянешь позже?</p>
+  <p></p>
+  <p><a href="" class="btn btn-primary btn-large again">Еще раз</a></p>
+</div>
+<div class="hero-unit popup step step-2">
+  <h1>Отлично!</h1>
+  <p></p>
+  <p>Добро пожаловать домой, <span class="your-name-here"></span>!</p>
+  <p>Я заглянул в твои музыкальные записи и обратил внимание, что тебе нравится <strong class="your-favorite-artist-here"></strong>. Давай перейдем на страницу этого исполнителя и я покажу тебе куда нажимать.</p>
+  <p></p>
+  <p><a href="" class="btn btn-primary btn-large">Пошли!</a></p>
+</div>
+<div class="step step-3">
+  <div class="title">Это поиск</div>
+  <div class="content">
+    <p>Он твой лучший друг.</p>
+    <p>Начни вписывать в него название группы или альбома и он с первой же буквы постарается угадать что ты хочешь послушать.</p>
+    <p></p>
+    <a href="" class="btn btn-primary tour-step-3">Дальше!</a>
+  </div>
+</div>
+<div class="step step-4">
+  <div class="title">Музыка!</div>
+  <div class="content">
+    <p>Чтобы начать слушать музыку достаточно нажать на кнопку слева от любимой песни</p>
+    <p>Послушаем?</p>
+    <p></p>
+    <a href="" class="btn btn-primary tour-step-4">Давай!</a>
+  </div>
+</div>
+<div class="step step-5">
+  <div class="title">Прогресс-бар</div>
+  <div class="content">
+    <p>На нем всегда отображается название песни, которая играет в данный момент.</p>
+    <p>Еще с его помощью можно перематывать песню.</p>
+    <p></p>
+    <a href="" class="btn btn-primary tour-step-5">Понял</a>
+  </div>
+</div>
+<div class="step step-6">
+  <div class="title">Кнопочки</div>
+  <div class="content">
+    <p>Предыдущая и следующая песня, плей/пауза, все как обычно.</p>
+    <p>Думаю, ты уже достаточно освоился. Наслаждайся музыкой!</p>
+    <p></p>
+    <a href="" class="btn btn-primary tour-step-6">Спасибо!</a>
+  </div>
+</div>

app/assets/javascripts/backbone/views/artist/artist_show.js.coffee

@@ -1,5 +1,5 @@
 class BeatHaven.Views.ArtistShow extends Backbone.View
-  template: HoganTemplates["backbone/templates/artist/show"]
+  template: HoganTemplates["artist/show"]
 
   initialize: ->
     @model.on("change", @render, this)

app/assets/javascripts/backbone/views/main/main_tour.js.coffee

@@ -0,0 +1,7 @@
+class BeatHaven.Views.MainTour extends Backbone.View
+  template: HoganTemplates["backbone/templates/main/tour"]
+
+  render: ->
+    $(".fullscreen").show()
+    $(@el).html(@template.render())
+    this

app/assets/javascripts/bindings/tour.js.coffee

@@ -0,0 +1,75 @@
+window.tour_auth = ->
+  VK.Auth.login (response) ->
+    BH.VK.auth_info(response)
+    if response.session?
+      $(".tour .step").hide()
+      $(".tour .step-2").show()
+      $(".tour .step-2 .your-name-here").text("#{response.session.user.first_name}")
+      $(".tour .step-2 .your-favorite-artist-here").text("Foo Fighters")
+      Backbone.history.navigate("/artist/Foo+Fighters", true)
+    else
+      $(".tour .step").hide()
+      $(".tour .step-1a").show()
+  , BH.VK.BITMASK
+
+$ ->
+  $(".tour .step-1 a").live "click", (e) ->
+    e.preventDefault()
+    tour_auth()
+
+  $(".tour .step-1a a.again").live "click", (e) ->
+    e.preventDefault()
+    tour_auth()
+
+  $(".tour .step-2 a").live "click", (e) ->
+    e.preventDefault()
+    $(".tour").hide()
+    $(".fullscreen").css(opacity: .3)
+    $(".navbar .search-query").popover(
+      placement: "bottom"
+      title: $(".tour .step-3 .title")
+      content: $(".tour .step-3 .content").html()
+      html: true
+      trigger: "manual"
+    ).popover("show")
+
+  $("a.tour-step-3").live "click", (e) ->
+    e.preventDefault()
+    $(".navbar .search-query").popover("hide")
+    $(".artist-page .tracks li:first .track-play").popover(
+      placement: "top"
+      title: $(".tour .step-4 .title")
+      content: $(".tour .step-4 .content").html()
+      html: true
+      trigger: "manual"
+    ).popover("show")
+
+  $("a.tour-step-4").live "click", (e) ->
+    e.preventDefault()
+    $(".artist-page .tracks li:first .track-play").popover("hide").trigger("click")
+    $(".player .progress-bar").popover(
+      placement: "bottom"
+      title: $(".tour .step-5 .title")
+      content: $(".tour .step-5 .content").html()
+      html: true
+      trigger: "manual"
+    ).popover("show")
+
+  $("a.tour-step-5").live "click", (e) ->
+    e.preventDefault()
+    $(".player .progress-bar").popover("hide")
+    $(".player .controls").popover(
+      placement: "bottom"
+      title: $(".tour .step-6 .title")
+      content: $(".tour .step-6 .content").html()
+      html: true
+      trigger: "manual"
+    ).popover("show")
+
+  $("a.tour-step-6").live "click", (e) ->
+    e.preventDefault()
+    $(".player .controls").popover("hide")
+    $(".popover").remove()
+    $(".fullscreen").hide()
+
+