mirror of
https://github.com/krateng/maloja.git
synced 2023-08-10 21:12:55 +03:00
Modularized on-page range selector and added to artist page
This commit is contained in:
Krateng
parent
d51441d508
commit
9f54b1711c
@ -4,6 +4,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Maloja - KEY_ARTISTNAME</title>
|
||||
<script src="javascript/rangeselect.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -32,11 +33,34 @@
|
||||
<tr>
|
||||
<td>
|
||||
<h2><a href='/pulse?artist=KEY_ENC_ARTISTNAME&step=year&trail=1'>Pulse</a></h2>
|
||||
KEY_PULSE
|
||||
|
||||
|
||||
<span onclick="showRange('pulse','days')" class="stat_selector_pulse selector_pulse_days">7 days</span>
|
||||
| <span onclick="showRange('pulse','weeks')" class="stat_selector_pulse selector_pulse_weeks">12 weeks</span>
|
||||
| <span onclick="showRange('pulse','months')" class="stat_selector_pulse selector_pulse_months" style="opacity:0.5;">12 months</span>
|
||||
| <span onclick="showRange('pulse','years')" class="stat_selector_pulse selector_pulse_years">10 years</span>
|
||||
|
||||
<br/><br/>
|
||||
|
||||
<span class="stat_module_pulse pulse_months">KEY_PULSE_MONTHS</span>
|
||||
<span class="stat_module_pulse pulse_days" style="display:none;">KEY_PULSE_DAYS</span>
|
||||
<span class="stat_module_pulse pulse_years" style="display:none;">KEY_PULSE_YEARS</span>
|
||||
<span class="stat_module_pulse pulse_weeks" style="display:none;">KEY_PULSE_WEEKS</span>
|
||||
</td>
|
||||
<td>
|
||||
<!-- We use the same classes / function calls here because we want it to switch together with pulse -->
|
||||
<h2><a href='/performance?artist=KEY_ENC_CREDITEDARTISTNAME&step=year&trail=1'>Performance</a></h2>
|
||||
KEY_PERFORMANCE
|
||||
<span onclick="showRange('pulse','days')" class="stat_selector_pulse selector_pulse_days">7 days</span>
|
||||
| <span onclick="showRange('pulse','weeks')" class="stat_selector_pulse selector_pulse_weeks">12 weeks</span>
|
||||
| <span onclick="showRange('pulse','months')" class="stat_selector_pulse selector_pulse_months" style="opacity:0.5;">12 months</span>
|
||||
| <span onclick="showRange('pulse','years')" class="stat_selector_pulse selector_pulse_years">10 years</span>
|
||||
|
||||
<br/><br/>
|
||||
|
||||
<span class="stat_module_pulse pulse_months">KEY_PERFORMANCE_MONTHS</span>
|
||||
<span class="stat_module_pulse pulse_days" style="display:none;">KEY_PERFORMANCE_DAYS</span>
|
||||
<span class="stat_module_pulse pulse_years" style="display:none;">KEY_PERFORMANCE_YEARS</span>
|
||||
<span class="stat_module_pulse pulse_weeks" style="display:none;">KEY_PERFORMANCE_WEEKS</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import urllib
|
||||
import database
|
||||
from malojatime import today,thisweek,thismonth,thisyear
|
||||
|
||||
|
||||
def instructions(keys):
|
||||
@ -46,24 +47,46 @@ def instructions(keys):
|
||||
|
||||
html_scrobbles, _, _ = module_scrobblelist(artist=artist,max_=10,earlystop=True)
|
||||
|
||||
# pulse and rankings
|
||||
html_pulse = module_pulse(**filterkeys,step="year",stepn=1,trail=1)
|
||||
html_pulse_days = module_pulse(**filterkeys,max_=7,since=today().next(-6),step="day",trail=1)
|
||||
html_pulse_weeks = module_pulse(**filterkeys,max_=12,since=thisweek().next(-11),step="week",trail=1)
|
||||
html_pulse_months = module_pulse(**filterkeys,max_=12,since=thismonth().next(-11),step="month",trail=1)
|
||||
html_pulse_years = module_pulse(**filterkeys,max_=10,since=thisyear().next(-9),step="year",trail=1)
|
||||
|
||||
html_performance = module_performance(artist=credited,step="year",stepn=1,trail=1)
|
||||
html_performance_days = module_performance(**filterkeys,max_=7,since=today().next(-6),step="day",trail=1)
|
||||
html_performance_weeks = module_performance(**filterkeys,max_=12,since=thisweek().next(-11),step="week",trail=1)
|
||||
html_performance_months = module_performance(**filterkeys,max_=12,since=thismonth().next(-11),step="month",trail=1)
|
||||
html_performance_years = module_performance(**filterkeys,max_=10,since=thisyear().next(-9),step="year",trail=1)
|
||||
|
||||
replace = {
|
||||
# info
|
||||
"KEY_ARTISTNAME":keys["artist"],
|
||||
"KEY_ENC_ARTISTNAME":urllib.parse.quote(keys["artist"]),
|
||||
"KEY_ENC_CREDITEDARTISTNAME":urllib.parse.quote(credited),
|
||||
"KEY_IMAGEURL":imgurl,
|
||||
"KEY_DESCRIPTION":"",
|
||||
"KEY_MEDALS":html_medals,
|
||||
"KEY_TRACKLIST":html_tracks,
|
||||
"KEY_PULSE":html_pulse,
|
||||
"KEY_PERFORMANCE":html_performance,
|
||||
"KEY_SCROBBLES":scrobbles,
|
||||
"KEY_POSITION":pos,
|
||||
"KEY_ASSOCIATED":includestr,
|
||||
"KEY_MEDALS":html_medals,
|
||||
# tracks
|
||||
"KEY_TRACKLIST":html_tracks,
|
||||
# pulse
|
||||
"KEY_PULSE_MONTHS":html_pulse_months,
|
||||
"KEY_PULSE_YEARS":html_pulse_years,
|
||||
"KEY_PULSE_DAYS":html_pulse_days,
|
||||
"KEY_PULSE_WEEKS":html_pulse_weeks,
|
||||
# performance
|
||||
"KEY_PERFORMANCE_MONTHS":html_performance_months,
|
||||
"KEY_PERFORMANCE_YEARS":html_performance_years,
|
||||
"KEY_PERFORMANCE_DAYS":html_performance_days,
|
||||
"KEY_PERFORMANCE_WEEKS":html_performance_weeks,
|
||||
# scrobbles
|
||||
"KEY_SCROBBLELIST":html_scrobbles,
|
||||
"KEY_SCROBBLELINK":compose_querystring(keys),
|
||||
"KEY_POSITION":pos,
|
||||
"KEY_ASSOCIATED":includestr
|
||||
|
||||
}
|
||||
|
||||
return (replace,pushresources)
|
||||
|
||||
@ -393,6 +393,7 @@ table.list tr td {
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
padding-right:15px;
|
||||
line-height: 140%;
|
||||
|
||||
}
|
||||
|
||||
@ -648,6 +649,18 @@ table.tiles_3x3 td {
|
||||
|
||||
|
||||
|
||||
/*
|
||||
**
|
||||
**
|
||||
** Pulse / performance thingies
|
||||
**
|
||||
**
|
||||
*/
|
||||
|
||||
span.stat_module_pulse {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/*
|
||||
**
|
||||
|
||||
28
website/javascript/rangeselect.js
Normal file
28
website/javascript/rangeselect.js
Normal file
@ -0,0 +1,28 @@
|
||||
function showRange(identifier,unit) {
|
||||
// Make all modules disappear
|
||||
modules = document.getElementsByClassName("stat_module_" + identifier)
|
||||
for (var i=0;i<modules.length;i++) {
|
||||
modules[i].setAttribute("style","width:0px;overflow:hidden;")
|
||||
// cheesy trick to make the allocated space always whatever the biggest module needs
|
||||
}
|
||||
|
||||
// Make requested module appear
|
||||
reactivate = document.getElementsByClassName(identifier + "_" + unit)
|
||||
for (var i=0;i<reactivate.length;i++) {
|
||||
reactivate[i].setAttribute("style","")
|
||||
}
|
||||
|
||||
// Set all selectors to unselected
|
||||
selectors = document.getElementsByClassName("stat_selector_" + identifier)
|
||||
for (var i=0;i<selectors.length;i++) {
|
||||
selectors[i].setAttribute("style","")
|
||||
}
|
||||
|
||||
// Set the active selector to selected
|
||||
reactivate = document.getElementsByClassName("selector_" + identifier + "_" + unit)
|
||||
for (var i=0;i<reactivate.length;i++) {
|
||||
reactivate[i].setAttribute("style","opacity:0.5;")
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded',function() {KEY_JS_INIT_RANGES})
|
||||
@ -4,26 +4,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Maloja</title>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
function showRange(identifier,unit) {
|
||||
modules = document.getElementsByClassName("stat_module_" + identifier)
|
||||
for (var i=0;i<modules.length;i++) {
|
||||
modules[i].setAttribute("style","display:none;")
|
||||
}
|
||||
document.getElementById(identifier + "_" + unit).setAttribute("style","")
|
||||
|
||||
selectors = document.getElementsByClassName("stat_selector_" + identifier)
|
||||
for (var i=0;i<selectors.length;i++) {
|
||||
selectors[i].setAttribute("style","")
|
||||
}
|
||||
document.getElementById("selector_" + identifier + "_" + unit).setAttribute("style","opacity:0.5;")
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded',function() {KEY_JS_INIT_RANGES})
|
||||
</script>
|
||||
<script src="javascript/rangeselect.js"></script>
|
||||
</head>
|
||||
|
||||
|
||||
@ -39,17 +20,17 @@
|
||||
|
||||
|
||||
|
||||
<span onclick="showRange('topartists','week')" class="stat_selector_topartists" id="selector_topartists_week">This Week</span>
|
||||
| <span onclick="showRange('topartists','month')" class="stat_selector_topartists" id="selector_topartists_month">This Month</span>
|
||||
| <span onclick="showRange('topartists','year')" class="stat_selector_topartists" id="selector_topartists_year">This Year</span>
|
||||
| <span onclick="showRange('topartists','alltime')" class="stat_selector_topartists" id="selector_topartists_alltime" style="opacity:0.5;">All Time</span>
|
||||
<span onclick="showRange('topartists','week')" class="stat_selector_topartists selector_topartists_week">This Week</span>
|
||||
| <span onclick="showRange('topartists','month')" class="stat_selector_topartists selector_topartists_month">This Month</span>
|
||||
| <span onclick="showRange('topartists','year')" class="stat_selector_topartists selector_topartists_year">This Year</span>
|
||||
| <span onclick="showRange('topartists','alltime')" class="stat_selector_topartists selector_topartists_alltime" style="opacity:0.5;">All Time</span>
|
||||
|
||||
<br/><br/>
|
||||
|
||||
<span class="stat_module_topartists" id="topartists_week" style="display:none;">KEY_TOPARTISTS_WEEK</span>
|
||||
<span class="stat_module_topartists" id="topartists_month" style="display:none;">KEY_TOPARTISTS_MONTH</span>
|
||||
<span class="stat_module_topartists" id="topartists_year" style="display:none;">KEY_TOPARTISTS_YEAR</span>
|
||||
<span class="stat_module_topartists" id="topartists_alltime">KEY_TOPARTISTS_TOTAL</span>
|
||||
<span class="stat_module_topartists topartists_week" style="display:none;">KEY_TOPARTISTS_WEEK</span>
|
||||
<span class="stat_module_topartists topartists_month" style="display:none;">KEY_TOPARTISTS_MONTH</span>
|
||||
<span class="stat_module_topartists topartists_year" style="display:none;">KEY_TOPARTISTS_YEAR</span>
|
||||
<span class="stat_module_topartists topartists_alltime">KEY_TOPARTISTS_TOTAL</span>
|
||||
|
||||
|
||||
|
||||
@ -57,17 +38,17 @@
|
||||
<h1><a href="/charts_tracks?max=50">Top Tracks</a></h1>
|
||||
|
||||
|
||||
<span onclick="showRange('toptracks','week')" class="stat_selector_toptracks" id="selector_toptracks_week">This Week</span>
|
||||
| <span onclick="showRange('toptracks','month')" class="stat_selector_toptracks" id="selector_toptracks_month">This Month</span>
|
||||
| <span onclick="showRange('toptracks','year')" class="stat_selector_toptracks" id="selector_toptracks_year">This Year</span>
|
||||
| <span onclick="showRange('toptracks','alltime')" class="stat_selector_toptracks" id="selector_toptracks_alltime" style="opacity:0.5;">All Time</span>
|
||||
<span onclick="showRange('toptracks','week')" class="stat_selector_toptracks selector_toptracks_week">This Week</span>
|
||||
| <span onclick="showRange('toptracks','month')" class="stat_selector_toptracks selector_toptracks_month">This Month</span>
|
||||
| <span onclick="showRange('toptracks','year')" class="stat_selector_toptracks selector_toptracks_year">This Year</span>
|
||||
| <span onclick="showRange('toptracks','alltime')" class="stat_selector_toptracks selector_toptracks_alltime" style="opacity:0.5;">All Time</span>
|
||||
|
||||
<br/><br/>
|
||||
|
||||
<span class="stat_module_toptracks" id="toptracks_week" style="display:none;">KEY_TOPTRACKS_WEEK</span>
|
||||
<span class="stat_module_toptracks" id="toptracks_month" style="display:none;">KEY_TOPTRACKS_MONTH</span>
|
||||
<span class="stat_module_toptracks" id="toptracks_year" style="display:none;">KEY_TOPTRACKS_YEAR</span>
|
||||
<span class="stat_module_toptracks" id="toptracks_alltime">KEY_TOPTRACKS_TOTAL</span>
|
||||
<span class="stat_module_toptracks toptracks_week" style="display:none;">KEY_TOPTRACKS_WEEK</span>
|
||||
<span class="stat_module_toptracks toptracks_month" style="display:none;">KEY_TOPTRACKS_MONTH</span>
|
||||
<span class="stat_module_toptracks toptracks_year" style="display:none;">KEY_TOPTRACKS_YEAR</span>
|
||||
<span class="stat_module_toptracks toptracks_alltime">KEY_TOPTRACKS_TOTAL</span>
|
||||
|
||||
|
||||
|
||||
@ -97,27 +78,27 @@
|
||||
<a href="/pulse?step=year&trail=1">Years</a>
|
||||
-->
|
||||
|
||||
<span onclick="showRange('pulse','days')" class="stat_selector_pulse" id="selector_pulse_days">7 days</span>
|
||||
| <span onclick="showRange('pulse','weeks')" class="stat_selector_pulse" id="selector_pulse_weeks">12 weeks</span>
|
||||
| <span onclick="showRange('pulse','months')" class="stat_selector_pulse" id="selector_pulse_months" style="opacity:0.5;">12 months</span>
|
||||
| <span onclick="showRange('pulse','years')" class="stat_selector_pulse" id="selector_pulse_years">10 years</span>
|
||||
<span onclick="showRange('pulse','days')" class="stat_selector_pulse selector_pulse_days">7 days</span>
|
||||
| <span onclick="showRange('pulse','weeks')" class="stat_selector_pulse selector_pulse_weeks">12 weeks</span>
|
||||
| <span onclick="showRange('pulse','months')" class="stat_selector_pulse selector_pulse_months" style="opacity:0.5;">12 months</span>
|
||||
| <span onclick="showRange('pulse','years')" class="stat_selector_pulse selector_pulse_years">10 years</span>
|
||||
<!--
|
||||
### this is for extra views of the current canonical week / month / year
|
||||
<br/>
|
||||
<span onclick="showRange('pulse','week')" class="stat_selector_pulse" id="selector_pulse_week">This Week</span>
|
||||
| <span onclick="showRange('pulse','month')" class="stat_selector_pulse" id="selector_pulse_month">This Month</span>
|
||||
| <span onclick="showRange('pulse','year')" class="stat_selector_pulse" id="selector_pulse_year"">This Year</span>
|
||||
<span onclick="showRange('pulse','week')" class="stat_selector_pulse selector_pulse_week">This Week</span>
|
||||
| <span onclick="showRange('pulse','month')" class="stat_selector_pulse selector_pulse_month">This Month</span>
|
||||
| <span onclick="showRange('pulse','year')" class="stat_selector_pulse selector_pulse_year"">This Year</span>
|
||||
-->
|
||||
<br/><br/>
|
||||
|
||||
<span class="stat_module_pulse" id="pulse_months">KEY_PULSE_MONTHS</span>
|
||||
<span class="stat_module_pulse" id="pulse_days" style="display:none;">KEY_PULSE_DAYS</span>
|
||||
<span class="stat_module_pulse" id="pulse_years" style="display:none;">KEY_PULSE_YEARS</span>
|
||||
<span class="stat_module_pulse" id="pulse_weeks" style="display:none;">KEY_PULSE_WEEKS</span>
|
||||
<span class="stat_module_pulse pulse_months">KEY_PULSE_MONTHS</span>
|
||||
<span class="stat_module_pulse pulse_days" style="display:none;">KEY_PULSE_DAYS</span>
|
||||
<span class="stat_module_pulse pulse_years" style="display:none;">KEY_PULSE_YEARS</span>
|
||||
<span class="stat_module_pulse pulse_weeks" style="display:none;">KEY_PULSE_WEEKS</span>
|
||||
<!--
|
||||
<span class="stat_module_pulse" id="pulse_week" style="display:none;">KEY_PULSE_WEEK</span>
|
||||
<span class="stat_module_pulse" id="pulse_month" style="display:none;">KEY_PULSE_MONTH</span>
|
||||
<span class="stat_module_pulse" id="pulse_year" style="display:none;">KEY_PULSE_YEAR</span>
|
||||
<span class="stat_module_pulse pulse_week" style="display:none;">KEY_PULSE_WEEK</span>
|
||||
<span class="stat_module_pulse pulse_month" style="display:none;">KEY_PULSE_MONTH</span>
|
||||
<span class="stat_module_pulse pulse_year" style="display:none;">KEY_PULSE_YEAR</span>
|
||||
-->
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user