HTML5, CSS3 & JS Experiments

By Martin Ivanov

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;
    }
}