B2G/gaia/apps/music/js/music.js
// Here we use one function to create different style lists
Here we use one function to create different style lists
Here we use one function to create different style lists
function createListElement(option, data, index, highlight) {
  var li = document.createElement('li');
  li.className = 'list-item';
  var a = document.createElement('a');
  a.href = '#';
  a.dataset.index = index;
  a.dataset.option = option;
  li.appendChild(a);
  function highlightText(result, text) {
    var textContent = result.textContent;
    var textLowerCased = textContent.toLocaleLowerCase();
    var index = Normalizer.toAscii(textLowerCased).indexOf(text);
    if (index >= 0) {
      var innerHTML = textContent.substring(0, index) +
                      '<span class="search-highlight">' +
                      textContent.substring(index, index + text.length) +
                      '</span>' +
                      textContent.substring(index + text.length);
      result.innerHTML = innerHTML;
    }
  }
  switch (option) {
    case 'playlist':
      var titleSpan = document.createElement('span');
      titleSpan.className = 'list-playlist-title';
      if (data.metadata.l10nId) {
        titleSpan.textContent = data.metadata.title;
        titleSpan.dataset.l10nId = data.metadata.l10nId;
      } else {
        titleSpan.textContent = data.metadata.title || unknownTitle;
        titleSpan.dataset.l10nId =
          data.metadata.title ? '' : unknownTitleL10nId;
      }
      a.dataset.keyRange = 'all';
      a.dataset.option = data.option;
      li.appendChild(titleSpan);
      if (index === 0) {
        var shuffleIcon = document.createElement('div');
        shuffleIcon.className = 'list-playlist-icon';
        li.appendChild(shuffleIcon);
      }
      break;
    case 'artist':
    case 'album':
    case 'title':
      var parent = document.createElement('div');
      parent.className = 'list-image-parent';
      parent.classList.add('default-album-' + index % 10);
      var img = document.createElement('img');
      img.className = 'list-image';
      if (data.metadata.picture) {
        parent.appendChild(img);
        displayAlbumArt(img, data);
      }
      if (option === 'artist') {
        var artistSpan = document.createElement('span');
        artistSpan.className = 'list-single-title';
        artistSpan.textContent = data.metadata.artist || unknownArtist;
        artistSpan.dataset.l10nId =
          data.metadata.artist ? '' : unknownArtistL10nId;
        if (highlight)
          highlightText(artistSpan, highlight);
        li.appendChild(artistSpan);
      } else {
        var albumOrTitleSpan = document.createElement('span');
        var artistSpan = document.createElement('span');
        albumOrTitleSpan.className = 'list-main-title';
        artistSpan.className = 'list-sub-title';
        if (option === 'album') {
          albumOrTitleSpan.textContent = data.metadata.album || unknownAlbum;
          albumOrTitleSpan.dataset.l10nId =
            data.metadata.album ? '' : unknownAlbumL10nId;
        } else {
          albumOrTitleSpan.textContent = data.metadata.title || unknownTitle;
          albumOrTitleSpan.dataset.l10nId =
            data.metadata.title ? '' : unknownTitleL10nId;
        }
        artistSpan.textContent = data.metadata.artist || unknownArtist;
        artistSpan.dataset.l10nId =
          data.metadata.artist ? '' : unknownArtistL10nId;
        if (highlight)
          highlightText(albumOrTitleSpan, highlight);
        li.appendChild(albumOrTitleSpan);
        li.appendChild(artistSpan);
      }
      li.appendChild(parent);
      a.dataset.keyRange = data.metadata[option];
      a.dataset.option = option;
      break;
    case 'song':
      var songTitle = data.metadata.title || unknownTitle;
      var indexSpan = document.createElement('span');
      indexSpan.className = 'list-song-index';
      indexSpan.textContent = index + 1;
      var titleSpan = document.createElement('span');
      titleSpan.className = 'list-song-title';
      titleSpan.textContent = songTitle;
      titleSpan.dataset.l10nId = data.metadata.title ? '' : unknownTitleL10nId;
      var lengthSpan = document.createElement('span');
      lengthSpan.className = 'list-song-length';
      li.appendChild(indexSpan);
      li.appendChild(titleSpan);
      li.appendChild(lengthSpan);
      break;
  }
  return li;
}
function createListElement ( option , data , index , highlight ) { var li = document . createElement ( 'li' ) ; li . className = 'list-item' ; var a = document . createElement ( 'a' ) ; a . href = '#' ; a . dataset . index = index ; a . dataset . option = option ; li . appendChild ( a ) ; function highlightText ( result , text ) { var textContent = result . textContent ; var textLowerCased = textContent . toLocaleLowerCase ( ) ; var index = Normalizer . toAscii ( textLowerCased ) . indexOf ( text ) ; if ( index >= 0 ) { var innerHTML = textContent . substring ( 0 , index ) + '<span class="search-highlight">' + textContent . substring ( index , index + text . length ) + '</span>' + textContent . substring ( index + text . length ) ; result . innerHTML = innerHTML ; } } switch ( option ) { case 'playlist' : var titleSpan = document . createElement ( 'span' ) ; titleSpan . className = 'list-playlist-title' ; if ( data . metadata . l10nId ) { titleSpan . textContent = data . metadata . title ; titleSpan . dataset . l10nId = data . metadata . l10nId ; } else { titleSpan . textContent = data . metadata . title || unknownTitle ; titleSpan . dataset . l10nId = data . metadata . title ? '' : unknownTitleL10nId ; } a . dataset . keyRange = 'all' ; a . dataset . option = data . option ; li . appendChild ( titleSpan ) ; if ( index === 0 ) { var shuffleIcon = document . createElement ( 'div' ) ; shuffleIcon . className = 'list-playlist-icon' ; li . appendChild ( shuffleIcon ) ; } break ; case 'artist' : case 'album' : case 'title' : var parent = document . createElement ( 'div' ) ; parent . className = 'list-image-parent' ; parent . classList . add ( 'default-album-' + index % 10 ) ; var img = document . createElement ( 'img' ) ; img . className = 'list-image' ; if ( data . metadata . picture ) { parent . appendChild ( img ) ; displayAlbumArt ( img , data ) ; } if ( option === 'artist' ) { var artistSpan = document . createElement ( 'span' ) ; artistSpan . className = 'list-single-title' ; artistSpan . textContent = data . metadata . artist || unknownArtist ; artistSpan . dataset . l10nId = data . metadata . artist ? '' : unknownArtistL10nId ; if ( highlight ) highlightText ( artistSpan , highlight ) ; li . appendChild ( artistSpan ) ; } else { var albumOrTitleSpan = document . createElement ( 'span' ) ; var artistSpan = document . createElement ( 'span' ) ; albumOrTitleSpan . className = 'list-main-title' ; artistSpan . className = 'list-sub-title' ; if ( option === 'album' ) { albumOrTitleSpan . textContent = data . metadata . album || unknownAlbum ; albumOrTitleSpan . dataset . l10nId = data . metadata . album ? '' : unknownAlbumL10nId ; } else { albumOrTitleSpan . textContent = data . metadata . title || unknownTitle ; albumOrTitleSpan . dataset . l10nId = data . metadata . title ? '' : unknownTitleL10nId ; } artistSpan . textContent = data . metadata . artist || unknownArtist ; artistSpan . dataset . l10nId = data . metadata . artist ? '' : unknownArtistL10nId ; if ( highlight ) highlightText ( albumOrTitleSpan , highlight ) ; li . appendChild ( albumOrTitleSpan ) ; li . appendChild ( artistSpan ) ; } li . appendChild ( parent ) ; a . dataset . keyRange = data . metadata [ option ] ; a . dataset . option = option ; break ; case 'song' : var songTitle = data . metadata . title || unknownTitle ; var indexSpan = document . createElement ( 'span' ) ; indexSpan . className = 'list-song-index' ; indexSpan . textContent = index + 1 ; var titleSpan = document . createElement ( 'span' ) ; titleSpan . className = 'list-song-title' ; titleSpan . textContent = songTitle ; titleSpan . dataset . l10nId = data . metadata . title ? '' : unknownTitleL10nId ; var lengthSpan = document . createElement ( 'span' ) ; lengthSpan . className = 'list-song-length' ; li . appendChild ( indexSpan ) ; li . appendChild ( titleSpan ) ; li . appendChild ( lengthSpan ) ; break ; } return li ; }
Here we use one function to create different style lists
Here we use one function to create different style lists
// Highlight the text when the highlight argument is passed // This should only happens when we are creating searched results // Highlight the text when the highlight argument is passed // This should only happens when we are creating searched results