About page, lots of fixin

This commit is contained in:
magnolia-fan 2011-06-29 08:11:54 +04:00
parent 08295f01aa
commit bfd1cd3ff8
31 changed files with 267 additions and 69 deletions

View File

@ -20,10 +20,10 @@ class Ajax
else if data.status == 'loading_failed'
_search.hideSpinner()
_search.showError()
_beathaven.redrawScrollbar()
else
_ajax.setArchor '/artist/' +name+ '/'
_pages.renderArtist data
_beathaven.redrawScrollbar()
false
loadSearchPage: ->
@ -44,6 +44,12 @@ class Ajax
_beathaven.redrawScrollbar()
false
loadAboutPage: ->
$.get '/templates/about.html', (data) ->
_pages.renderTextpage data
_ajax.setTitle 'About'
false
setArchor: (anchor) ->
@referer = this.getAnchor()
window.location.hash = '#' +anchor
@ -65,6 +71,8 @@ class Ajax
_ajax.loadSearchPage();
else if _ajax.getAnchor().match /\/settings\//
_ajax.loadSettingsPage()
else if _ajax.getAnchor().match /\/about\//
_ajax.loadAboutPage()
else
_ajax.loadSearchPage()
false

View File

@ -10,7 +10,7 @@ _settings = null
$ ->
l = document.location
if l.host not in ['beathaven.org', 'localhost']
if l.host not in ['beathaven.org', 'local.beathaven.org']
l.href = 'http://beathaven.org/'+ l.hash
_beathaven = new BeatHaven()
@ -30,7 +30,8 @@ class BeatHaven
this.adjustSizes()
this.checkRedrawScrollbar()
_vkontakte = new Vkontakte(if document.location.host == 'beathaven.org' then 2335068 else 2383163)
# if document.location.host == 'beathaven.org' then 2335068 else 2383163
_vkontakte = new Vkontakte(2335068)
_vkontakte.init()
_ajax = new Ajax()

View File

@ -49,6 +49,7 @@ class Pages
yaCounter7596904.hit _ajax.getAnchor(), data.artist.name, _ajax.referer
_ajax.setTitle data.artist.name
_beathaven.redrawScrollbar()
false
renderSearch: (data) ->
@ -79,9 +80,22 @@ class Pages
false
renderSettings: (data) ->
unless _session.getUser().name?
_ajax.go('/search/')
return false
$('.data-container').css background: 'none'
$('.data-container .inner').html data
yaCounter7596904.hit _ajax.getAnchor(), 'Settings', _ajax.referer
_ajax.setTitle 'Settings'
$('.settings-container .tabs .tab').first().trigger 'click'
false
renderTextpage: (data) ->
$('.data-container').css background: 'url(/images/concrete_wall_2.png) 0 -30px repeat'
$('.data-container .inner').html data
_beathaven.redrawScrollbar()
false
$('.about').live 'click', ->
_ajax.go '/about/'
false

View File

@ -24,3 +24,7 @@ class Session
q_params[key] = val
$.post url, q_params, callback
false
reloadSession: ->
_session.query '/user/auth', {}, (ar) ->
_session.setUser ar.user

View File

@ -2,9 +2,11 @@ class Settings
getAccountInfo: (callback) ->
_session.query '/user/update/', {}, callback
false
saveAccountInfo: (params, callback) ->
_session.query '/user/update', params, callback
false
loadFormData: (form) ->
if form == 'account'
@ -13,10 +15,21 @@ class Settings
else if form == 'lastfm'
if _session.getUser().lastfm_username
$('.form-container input[name$="username"]').first().val _session.getUser().lastfm_username
false
updateLastfmLogin: ->
if window.lastfm_popup.closed
_session.query '/user/auth', {}, (ar) ->
_session.setUser ar.user
_settings.loadFormData 'lastfm'
else
setTimeout _settings.updateLastfmLogin, 100
false
$('.settings') .live 'click', ->
_ajax.go('/settings/');
false
$('.settings-container .tabs .tab').live 'click', ->
if not $(this).hasClass 'active'
@ -24,9 +37,12 @@ $('.settings-container .tabs .tab').live 'click', ->
$(this).addClass 'active'
$('.form-container').html $('.forms .'+ $(this).attr 'data-fieldset').html()
_settings.loadFormData $(this).attr 'data-fieldset'
false
$('.lastfm-connect') .live 'click', ->
window.open _session.getUser().lastfm_login_url
window.lastfm_popup = window.open _session.getUser().lastfm_login_url
setTimeout _settings.updateLastfmLogin, 100
false
$('.settings-container .form input').live 'blur', ->
active_tab = $('.settings-container .tabs .tab.active').attr 'data-fieldset'
@ -35,4 +51,6 @@ $('.settings-container .form input').live 'blur', ->
username: $('.settings-container .form input[name$="username"]').first().val()
email: $('.settings-container .form input[name$="email"]').first().val()
_settings.saveAccountInfo params, ->
$('#header-container .hello .greating').text 'Hi there, ' +(if params.username.length > 0 then params.username else '%username%')+ '!'
$('.header-container .hello .greating span').text (if params.username.length > 0 then params.username else '%username%')
false
false

View File

@ -1,15 +1,24 @@
class Vkontakte
qr: null
api_id: null
constructor: (@api_id) ->
getApiId: ->
@api_id
init: ->
@qr = []
VK.init
apiId: @api_id
VK.Auth.getLoginStatus this.authInfo
window.vkAsyncInit = ->
VK.init apiId: _vkontakte.getApiId()
VK.Auth.getLoginStatus _vkontakte.authInfo
setTimeout ->
$('#vk_api_transport').append('<script async="async" src="http://vkontakte.ru/js/api/openapi.js"></script>')
, 0
authInfo: (response) ->
if typeof response isnt 'undefined' and response.session
@ -26,16 +35,18 @@ class Vkontakte
_session.query '/user/update', name: r.response, (ar2) ->
_session.setUser ar2.user
$('.header-container .hello .greating')
.text 'Hi there, ' +(if _session.getUser().name then _session.getUser().name else '%username%')+ '!'
.html 'Tēnā koe, <span class="settings">' +(if _session.getUser().name then _session.getUser().name else '%username%')+ '</span>!'
else
_session.setUser ar.user
$('.header-container .hello').show()
$('.header-container .hello .greating')
.text 'Hi there, ' +(if _session.getUser().name then _session.getUser().name else '%username%')+ '!'
.html 'Tēnā koe, <span class="settings">' +(if _session.getUser().name then _session.getUser().name else '%username%')+ '</span>!'
else
_session = new Session({})
_session.setUser {}
$('#vk_login, .auth_notice').css display: 'block'
$('#vk_logout').hide()
$('.header-container .hello').hide()
window._session = _session
loadTracksData: (artist, track, duration, callback) ->
@ -96,8 +107,13 @@ class Vkontakte
@qr[query]
false
$ ->
$('#vk_login').click ->
VK.Auth.login _vkontakte.authInfo(), 8
$('#vk_logout').click ->
VK.Auth.logout _vkontakte.authInfo()
$('#vk_login').live 'click', ->
VK.Auth.login (response) ->
_vkontakte.authInfo(response)
false
, 8
false
$('#vk_logout').live 'click', ->
_ajax.go '/search/';
VK.Auth.logout _vkontakte.authInfo
false

View File

@ -4,7 +4,8 @@ class ApplicationController < ActionController::Base
protect_from_forgery
def authorized?
secret_key = request.host == 'beathaven.org' ? 'sdgwSbl3nNE4ZxafuPrp' : 's5zyjb693z6uV4rbhEyc'
# secret_key = request.host == 'beathaven.org' ? 'sdgwSbl3nNE4ZxafuPrp' : 's5zyjb693z6uV4rbhEyc'
secret_key = 'sdgwSbl3nNE4ZxafuPrp'
unless params[:expire].nil? or params[:mid].nil? or params[:secret].nil? or params[:sid].nil? or params[:sig].nil?
# Calculating hash
hash = 'expire='+ params[:expire] +'mid='+ params[:mid] +'secret='+ params[:secret] +'sid='+ params[:sid] + secret_key

View File

@ -4,6 +4,10 @@ class ArtistController < ApplicationController
@@default_album_types = ['Album', 'Soundtrack']
def data
data = {}
if params[:name].nil? or params[:name].length == 0
render :json => {status: 'loading_failed', pics: []}
return
end
name = params[:name].gsub('%20', ' ').gsub('+', ' ')
artist = Artist.find_by_name(name)
if artist and artist.status == 0

View File

@ -1,3 +1,3 @@
class Artist < ActiveRecord::Base
has_many :albums, :order => 'year ASC, id ASC', :dependent => :destroy
has_many :albums, :order => 'pic_url DESC, year ASC, id ASC', :dependent => :destroy
end

View File

@ -5,7 +5,6 @@
<meta charset="utf-8"/>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/beathaven.css" />
<script type="text/javascript" charset="windows-1251" src="http://vkontakte.ru/js/api/openapi.js"></script>
<%= javascript_include_tag "jquery/jquery.min.js" %>
<%= javascript_include_tag "jquery/jquery-ui/js/jquery-ui-1.8.13.custom.min.js" %>
<%= javascript_include_tag "jquery/jquery.autocomplete.js" %>
@ -59,12 +58,13 @@
<div class="header-container">
<div class="hello">
<span class="greating"></span>
<div class="settings"></div>
<div class="settings settings-button"></div>
</div>
<ul class="navigation">
<li class="logo search">BeatHaven<div class="version">0.4</div></li>
<li class="search">Search</li>
<li><a href="https://twitter.com/#!/beat_haven" target="_blank">News</a></li>
<li class="about">About</li>
<li class="vk_auth" id="vk_login">Login</li>
</ul>
</div>

View File

@ -9,22 +9,22 @@ Ajax = (function() {
if (data.status != null) {
if (data.status === 'loading') {
_search.showArtistPics(data.pics);
return setTimeout(function() {
setTimeout(function() {
return _ajax.loadArtistData(name);
}, 3000);
} else if (data.status === 'corrected') {
return _ajax.loadArtistData(data.page);
_ajax.loadArtistData(data.page);
} else if (data.status === 'suggestions') {
_search.hideSpinner();
return _search.showSuggestions(data.values);
_search.showSuggestions(data.values);
} else if (data.status === 'loading_failed') {
_search.hideSpinner();
return _search.showError();
_search.showError();
}
return _beathaven.redrawScrollbar();
} else {
_ajax.setArchor('/artist/' + name + '/');
_pages.renderArtist(data);
return _beathaven.redrawScrollbar();
return _pages.renderArtist(data);
}
});
return false;
@ -50,6 +50,13 @@ Ajax = (function() {
});
return false;
};
Ajax.prototype.loadAboutPage = function() {
$.get('/templates/about.html', function(data) {
_pages.renderTextpage(data);
return _ajax.setTitle('About');
});
return false;
};
Ajax.prototype.setArchor = function(anchor) {
this.referer = this.getAnchor();
return window.location.hash = '#' + anchor;
@ -72,6 +79,8 @@ Ajax = (function() {
_ajax.loadSearchPage();
} else if (_ajax.getAnchor().match(/\/settings\//)) {
_ajax.loadSettingsPage();
} else if (_ajax.getAnchor().match(/\/about\//)) {
_ajax.loadAboutPage();
} else {
_ajax.loadSearchPage();
}

View File

@ -10,7 +10,7 @@ _settings = null;
$(function() {
var l, _ref;
l = document.location;
if ((_ref = l.host) !== 'beathaven.org' && _ref !== 'localhost') {
if ((_ref = l.host) !== 'beathaven.org' && _ref !== 'local.beathaven.org') {
l.href = 'http://beathaven.org/' + l.hash;
}
_beathaven = new BeatHaven();
@ -28,7 +28,7 @@ BeatHaven = (function() {
BeatHaven.prototype.init = function() {
this.adjustSizes();
this.checkRedrawScrollbar();
_vkontakte = new Vkontakte(document.location.host === 'beathaven.org' ? 2335068 : 2383163);
_vkontakte = new Vkontakte(2335068);
_vkontakte.init();
_ajax = new Ajax();
_player = new Player();

View File

@ -52,6 +52,7 @@ Pages = (function() {
$('.data-container .inner').html('').append(artist_info).append(albums_info);
yaCounter7596904.hit(_ajax.getAnchor(), data.artist.name, _ajax.referer);
_ajax.setTitle(data.artist.name);
_beathaven.redrawScrollbar();
return false;
};
Pages.prototype.renderSearch = function(data) {
@ -80,6 +81,10 @@ Pages = (function() {
return false;
};
Pages.prototype.renderSettings = function(data) {
if (_session.getUser().name == null) {
_ajax.go('/search/');
return false;
}
$('.data-container').css({
background: 'none'
});
@ -89,5 +94,17 @@ Pages = (function() {
$('.settings-container .tabs .tab').first().trigger('click');
return false;
};
Pages.prototype.renderTextpage = function(data) {
$('.data-container').css({
background: 'url(/images/concrete_wall_2.png) 0 -30px repeat'
});
$('.data-container .inner').html(data);
_beathaven.redrawScrollbar();
return false;
};
return Pages;
})();
$('.about').live('click', function() {
_ajax.go('/about/');
return false;
});

View File

@ -30,5 +30,10 @@ Session = (function() {
$.post(url, q_params, callback);
return false;
};
Session.prototype.reloadSession = function() {
return _session.query('/user/auth', {}, function(ar) {
return _session.setUser(ar.user);
});
};
return Session;
})();

View File

@ -2,36 +2,54 @@ var Settings;
Settings = (function() {
function Settings() {}
Settings.prototype.getAccountInfo = function(callback) {
return _session.query('/user/update/', {}, callback);
_session.query('/user/update/', {}, callback);
return false;
};
Settings.prototype.saveAccountInfo = function(params, callback) {
return _session.query('/user/update', params, callback);
_session.query('/user/update', params, callback);
return false;
};
Settings.prototype.loadFormData = function(form) {
if (form === 'account') {
$('.settings-container .form input[name$="username"]').val(_session.getUser().name);
return $('.settings-container .form input[name$="email"]').val(_session.getUser().email);
$('.settings-container .form input[name$="email"]').val(_session.getUser().email);
} else if (form === 'lastfm') {
if (_session.getUser().lastfm_username) {
return $('.form-container input[name$="username"]').first().val(_session.getUser().lastfm_username);
$('.form-container input[name$="username"]').first().val(_session.getUser().lastfm_username);
}
}
return false;
};
Settings.prototype.updateLastfmLogin = function() {
if (window.lastfm_popup.closed) {
_session.query('/user/auth', {}, function(ar) {
_session.setUser(ar.user);
return _settings.loadFormData('lastfm');
});
} else {
setTimeout(_settings.updateLastfmLogin, 100);
}
return false;
};
return Settings;
})();
$('.settings').live('click', function() {
return _ajax.go('/settings/');
_ajax.go('/settings/');
return false;
});
$('.settings-container .tabs .tab').live('click', function() {
if (!$(this).hasClass('active')) {
$('.settings-container .tabs .tab').removeClass('active');
$(this).addClass('active');
$('.form-container').html($('.forms .' + $(this).attr('data-fieldset')).html());
return _settings.loadFormData($(this).attr('data-fieldset'));
_settings.loadFormData($(this).attr('data-fieldset'));
}
return false;
});
$('.lastfm-connect').live('click', function() {
return window.open(_session.getUser().lastfm_login_url);
window.lastfm_popup = window.open(_session.getUser().lastfm_login_url);
setTimeout(_settings.updateLastfmLogin, 100);
return false;
});
$('.settings-container .form input').live('blur', function() {
var active_tab, params;
@ -41,8 +59,10 @@ $('.settings-container .form input').live('blur', function() {
username: $('.settings-container .form input[name$="username"]').first().val(),
email: $('.settings-container .form input[name$="email"]').first().val()
};
return _settings.saveAccountInfo(params, function() {
return $('#header-container .hello .greating').text('Hi there, ' + (params.username.length > 0 ? params.username : '%username%') + '!');
_settings.saveAccountInfo(params, function() {
$('.header-container .hello .greating span').text((params.username.length > 0 ? params.username : '%username%'));
return false;
});
}
return false;
});

View File

@ -1,15 +1,24 @@
var Vkontakte;
Vkontakte = (function() {
Vkontakte.prototype.qr = null;
Vkontakte.prototype.api_id = null;
function Vkontakte(api_id) {
this.api_id = api_id;
}
Vkontakte.prototype.getApiId = function() {
return this.api_id;
};
Vkontakte.prototype.init = function() {
this.qr = [];
VK.init({
apiId: this.api_id
});
return VK.Auth.getLoginStatus(this.authInfo);
window.vkAsyncInit = function() {
VK.init({
apiId: _vkontakte.getApiId()
});
return VK.Auth.getLoginStatus(_vkontakte.authInfo);
};
return setTimeout(function() {
return $('#vk_api_transport').append('<script async="async" src="http://vkontakte.ru/js/api/openapi.js"></script>');
}, 0);
};
Vkontakte.prototype.authInfo = function(response) {
var _session;
@ -31,20 +40,22 @@ Vkontakte = (function() {
name: r.response
}, function(ar2) {
_session.setUser(ar2.user);
return $('.header-container .hello .greating').text('Hi there, ' + (_session.getUser().name ? _session.getUser().name : '%username%') + '!');
return $('.header-container .hello .greating').html('Tēnā koe, <span class="settings">' + (_session.getUser().name ? _session.getUser().name : '%username%') + '</span>!');
});
});
} else {
_session.setUser(ar.user);
}
return $('.header-container .hello .greating').text('Hi there, ' + (_session.getUser().name ? _session.getUser().name : '%username%') + '!');
$('.header-container .hello').show();
return $('.header-container .hello .greating').html('Tēnā koe, <span class="settings">' + (_session.getUser().name ? _session.getUser().name : '%username%') + '</span>!');
});
} else {
_session = new Session({});
_session.setUser({});
$('#vk_login, .auth_notice').css({
display: 'block'
});
$('#vk_logout').hide();
$('.header-container .hello').hide();
}
return window._session = _session;
};
@ -117,11 +128,15 @@ Vkontakte = (function() {
};
return Vkontakte;
})();
$(function() {
$('#vk_login').click(function() {
return VK.Auth.login(_vkontakte.authInfo(), 8);
});
return $('#vk_logout').click(function() {
return VK.Auth.logout(_vkontakte.authInfo());
});
$('#vk_login').live('click', function() {
VK.Auth.login(function(response) {
_vkontakte.authInfo(response);
return false;
}, 8);
return false;
});
$('#vk_logout').live('click', function() {
_ajax.go('/search/');
VK.Auth.logout(_vkontakte.authInfo);
return false;
});

View File

@ -49,7 +49,7 @@
.add-album-button-container {
position: relative;
margin: 10px -25px 0 0;
margin: 10px -50px 0 0;
text-align: center;
}
}

View File

@ -1,5 +1,6 @@
.header-container {
.hello {
display: none;
float: right;
margin: 6px 10px 0 0;
color: #222;
@ -8,9 +9,14 @@
display: block;
float: left;
margin-right: 8px;
span {
border-bottom: #202020 1px dotted;
cursor: pointer;
}
}
.settings {
.settings-button {
float: right;
width: 15px;
height: 15px;
@ -54,7 +60,7 @@
}
}
.vk_auth {
&.vk_auth {
display: none;
}

View File

@ -15,9 +15,19 @@
@include rounded(3);
&.gray {
background-color: #EEE;
color: #444;
border-color: #DDD;
background-color: #e0e0e0;
color: #404040;
text-shadow: #d0d0d0 0px 1px 1px;
border-color: #d0d0d0;
box-shadow: #c0c0c0 1px 1px 0px;
}
&.red {
background-color: #fab0b0;
color: #e05050;
text-shadow: #c08080 0px 1px 1px;
border-color: #eaa0a0;
box-shadow: #da9090 1px 1px 0px;
}
}

View File

@ -17,7 +17,7 @@ $icons_dir: "/images/icns/";
position: absolute;
top: 0px;
right: 0px;
width: 80px;
width: 50px;
height: 30px;
z-index: 10;
@include alpha_gradient(32, 32, 32, '202020');

View File

@ -53,7 +53,10 @@
border-top: #CCC 1px solid;
.form {
margin: 25px;
position: absolute;
top: 25px;
left: 0;
width: 100%;
.field {
height: 40px;
@ -94,8 +97,18 @@
margin-left: 5px;
}
}
.saved {
float: left;
}
}
}
.logout {
position: absolute;
top: 25px;
right: 0;
}
}
.forms {

View File

@ -0,0 +1,3 @@
.textpage {
margin: 25px;
}

View File

@ -31,7 +31,7 @@
border: #d0d0d0 1px solid; }
.albums .album .pic .add-album-button-container {
position: relative;
margin: 10px -25px 0 0;
margin: 10px -50px 0 0;
text-align: center; }
.albums .album .name {
display: block;

View File

@ -5,3 +5,4 @@
@import "search.css" all;
@import "albums.css" all;
@import "settings.css" all;
@import "textpage.css" all;

View File

@ -1,4 +1,5 @@
.header-container .hello {
display: none;
float: right;
margin: 6px 10px 0 0;
color: #222; }
@ -6,7 +7,10 @@
display: block;
float: left;
margin-right: 8px; }
.header-container .hello .settings {
.header-container .hello .greating span {
border-bottom: #202020 1px dotted;
cursor: pointer; }
.header-container .hello .settings-button {
float: right;
width: 15px;
height: 15px;
@ -39,7 +43,7 @@
font-size: 9px;
font-weight: normal;
margin: 10px 0 0 4px; }
.header-container .navigation li .vk_auth {
.header-container .navigation li.vk_auth {
display: none; }
.header-container .navigation li a {
color: inherit;

View File

@ -13,9 +13,17 @@
-moz-border-radius: 3px;
-webkit-border-radius: 3px; }
.button.gray {
background-color: #EEE;
color: #444;
border-color: #DDD; }
background-color: #e0e0e0;
color: #404040;
text-shadow: #d0d0d0 0px 1px 1px;
border-color: #d0d0d0;
box-shadow: #c0c0c0 1px 1px 0px; }
.button.red {
background-color: #fab0b0;
color: #e05050;
text-shadow: #c08080 0px 1px 1px;
border-color: #eaa0a0;
box-shadow: #da9090 1px 1px 0px; }
/* Scrollbars */
.data-container .scrollbar-pane {

View File

@ -10,7 +10,7 @@
position: absolute;
top: 0px;
right: 0px;
width: 80px;
width: 50px;
height: 30px;
z-index: 10;
background: -moz-linear-gradient(left, rgba(32, 32, 32, 0) 0%, #202020 50%, #202020 100%);

View File

@ -39,7 +39,10 @@
height: 500px;
border-top: #CCC 1px solid; }
.settings-container .form-container .form {
margin: 25px; }
position: absolute;
top: 25px;
left: 0;
width: 100%; }
.settings-container .form-container .form .field {
height: 40px;
margin-bottom: 10px;
@ -75,5 +78,11 @@
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin-left: 5px; }
.settings-container .form-container .form .field .saved {
float: left; }
.settings-container .form-container .logout {
position: absolute;
top: 25px;
right: 0; }
.settings-container .forms {
display: none; }

View File

@ -0,0 +1,2 @@
.textpage {
margin: 25px; }

View File

@ -0,0 +1,3 @@
<div class="textpage">
Now back to the good part!
</div>

View File

@ -17,6 +17,13 @@
<div class="label">Email:</div>
<div class="value"><input name="email" type="text"/></div>
</div>
<div class="save">
<div class="button gray">Hello, my name is Useless Button</div>
</div>
</div>
<div class="logout">
<div class="button red" id="vk_logout">Log out</div>
</div>
</div>
<div class="lastfm">