Last.FM Music Album Widget
AcidJs.XCDInfo is a HTML5 web component, able to display music album data - track listing, cover art, tags and info from Last.Fm's REST API, and is ready to use as a simple HTML tag:
<acidjs-xcdinfo
artist="Joe Satriani"
album="Unstoppable Momentum"
mode="full">
</acidjs-xcdinfo>
Demo
Full Display Mode
Compact Display Mode
Minimal Display Mode
Register Mozilla's X-Tags
You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.
<script src="AcidJs.XCDInfo/lib/x-tag-components.js"></script>
Register the Component on the Page via HTML5 @import
You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.
<link rel="import" href="AcidJs.XCDInfo/classes/XCDInfo.html" />
HTML Attributes
Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).
JavaScript API: Methods, Getters and Setters
Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).
Error Messages
If album or artist data is not found, or Last.FM API key is
incorrect, <acidjs-xcdinfo></acidjs-xcdinfo>
displays an error like:
Usage and Code Insight
<h4>Full Display Mode</h4>
<acidjs-xcdinfo artist="Steve Vai" album="Passion and Warfare"></acidjs-xcdinfo>
<acidjs-xcdinfo artist="Joe Satriani" album="Joe Satriani"></acidjs-xcdinfo>
<acidjs-xcdinfo artist="Death" mode="full" album="symbolic"></acidjs-xcdinfo>
<acidjs-xcdinfo artist="Slayer" mode="full" album="South of Heaven"></acidjs-xcdinfo>
<h4>Compact Display Mode</h4>
<acidjs-xcdinfo artist="Asia" mode="compact" album="Asia"></acidjs-xcdinfo>
<br />
<acidjs-xcdinfo artist="Animals as Leaders" mode="compact" album="Animals as Leaders"></acidjs-xcdinfo>
<br />
<acidjs-xcdinfo artist="Alice Cooper" mode="compact" album="Trash"></acidjs-xcdinfo>
<br />
<acidjs-xcdinfo artist="Sepultura" mode="compact" album="Arise"></acidjs-xcdinfo>
<h3>Minimal Display Mode</h3>
<acidjs-xcdinfo mode="minimal" artist="Cannibal Corpse" album="Butchered at Birth"></acidjs-xcdinfo>
<acidjs-xcdinfo mode="minimal" artist="Sodom" album="Tapping the Vein"></acidjs-xcdinfo>
<acidjs-xcdinfo mode="minimal" artist="Slayer" album="Reign in Blood"></acidjs-xcdinfo>
<acidjs-xcdinfo mode="minimal" artist="Slayer" album="South of Heaven"></acidjs-xcdinfo>
/*
* X-Overlay Web Component by Martin Ivanov (@wemakesitesnet)
* More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
* @author Martin Ivanov
* @url developer website: http://wemakesites.net/
* @url developer twitter: https://twitter.com/#!/wemakesitesnet
* @url developer blog http://acidmartin.wordpress.com/
**/
acidjs-xcdinfo,
acidjs-xcdinfo *,
acidjs-xcdinfo::before,
acidjs-xcdinfo::after,
acidjs-xcdinfo *::before,
acidjs-xcdinfo *::after
{
margin: 0;
border: 0;
padding: 0;
list-style: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
acidjs-xcdinfo,
acidjs-xcdinfo > div,
acidjs-xcdinfo .acidjs-xcdinfo-cover-art a,
acidjs-xcdinfo[mode="minimal"] > div > div,
acidjs-xcdinfo .acidjs-xcdinfo-cover-art a > span,
acidjs-xcdinfo > div > .acidjs-xcdinfo-info-box:not(:nth-child(1))::before
{
width: 100%;
}
acidjs-xcdinfo,
acidjs-xcdinfo a,
acidjs-xcdinfo > div p,
acidjs-xcdinfo .acidjs-xcdinfo-cover-art a > span
{
color: #fff;
}
acidjs-xcdinfo .acidjs-xcdinfo-cover-art a,
acidjs-xcdinfo .acidjs-xcdinfo-cover-art a > span,
acidjs-xcdinfo > div > .acidjs-xcdinfo-info-box:not(:nth-child(1))::before
{
position: absolute;
}
acidjs-xcdinfo,
acidjs-xcdinfo > div > div
{
vertical-align: top;
}
acidjs-xcdinfo,
.acidjs-xcdinfo-tags li
{
display: inline-block;
}
acidjs-xcdinfo > div > div,
acidjs-xcdinfo > div > .acidjs-xcdinfo-info-box:not(:nth-child(1))
{
position: relative;
}
acidjs-xcdinfo .acidjs-xcdinfo-cover-art a,
acidjs-xcdinfo > div > .acidjs-xcdinfo-info-box:not(:nth-child(1))::before
{
top: 0;
height: 100%;
}
acidjs-xcdinfo div p,
acidjs-xcdinfo[mode="full"] ol
{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
acidjs-xcdinfo
{
font-family: Oswald, Arial, Helvetica, Sans-serif;
font-size: 1em;
cursor: default;
background: #000;
}
acidjs-xcdinfo > div
{
display: table;
border-collapse: collapse;
}
acidjs-xcdinfo > div > div
{
display: table-cell;
vertical-align: middle;
width: 33.3333%;
}
acidjs-xcdinfo .acidjs-xcdinfo-cover-art a span
{
display: block;
}
acidjs-xcdinfo .acidjs-xcdinfo-cover-art a > span
{
bottom: 0;
background: rgba(0, 0, 0, .75);
}
acidjs-xcdinfo .acidjs-xcdinfo-cover-art a > span span
{
padding: 4px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
acidjs-xcdinfo .acidjs-xcdinfo-cover-art a > span span:first-child
{
font-size: 1.3em;
}
acidjs-xcdinfo > div > .acidjs-xcdinfo-info-box
{
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
acidjs-xcdinfo > div > .acidjs-xcdinfo-info-box:not(:nth-child(1))
{
font-size: .8em;
filter: url("grayscale.svg#grayscale");
-webkit-filter: grayscale(1);
}
acidjs-xcdinfo > div > .acidjs-xcdinfo-info-box > div
{
padding: 16px;
}
acidjs-xcdinfo > div > .acidjs-xcdinfo-info-box:not(:nth-child(1))::before
{
content: "";
z-index: -1;
left: 0;
background: rgba(0, 0, 0, .5);
background: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 1));
}
acidjs-xcdinfo > div > .acidjs-xcdinfo-extra-info::before
{
transform: scale(-1, 1);
}
acidjs-xcdinfo > p
{
padding: 8px;
text-align: center;
color: #f00;
}
acidjs-xcdinfo ol li
{
padding: 2px 0;
list-style: decimal-leading-zero inside;
}
.acidjs-xcdinfo-tags
{
padding: 1em 0 0;
}
.acidjs-xcdinfo-tags li:not(:last-child)::after
{
content: ",\00A0";
}
acidjs-xcdinfo div p
{
text-align: justify;
}
acidjs-xcdinfo[mode="full"]
{
margin: 6px 0;
max-width: 900px;
}
acidjs-xcdinfo[mode="full"] > div > div
{
height: 300px;
}
acidjs-xcdinfo[mode="compact"]
{
margin: 4px 0;
max-width: 348px;
}
acidjs-xcdinfo[mode="compact"] > div > div
{
width: 50%;
height: 174px;
}
acidjs-xcdinfo[mode="minimal"]
{
margin: 2px 0;
width: 64px;
}
acidjs-xcdinfo[mode="minimal"] > div > div
{
height: 64px;
}
acidjs-xcdinfo[hidden],
acidjs-xcdinfo[mode="minimal"] a span,
acidjs-xcdinfo[mode="minimal"] .acidjs-xcdinfo-extra-info,
acidjs-xcdinfo[mode="minimal"] .acidjs-xcdinfo-track-listing,
acidjs-xcdinfo[mode="compact"] .acidjs-xcdinfo-extra-info
{
display: none;
}
@media all and (-ms-high-contrast:none)
{
acidjs-xcdinfo .acidjs-xcdinfo-cover-art a
{
display: none;
}
acidjs-xcdinfo .acidjs-xcdinfo-extra-info,
acidjs-xcdinfo .acidjs-xcdinfo-track-listing
{
background: none !important;
}
}