B2G/gaia/apps/email/js/value_selector.js
/*
!! Warning !!
  This value selector is modified for email folder selection only.
  API and layout are changed because of the sub-folder indentation display.
  Please reference the original version selector in contact app before using.

How to:
  var prompt1 = new ValueSelector('Dummy title 1', [
    {
      label: 'Dummy element',
      callback: function() {
        alert('Define an action here!');
      }
    }
  ]);

  prompt1.addToList('Another button', function(){alert('Another action');});
  prompt1.show();
*/
Warning
This value selector is modified for email folder selection only.
API and layout are changed because of the sub-folder indentation display.
Please reference the original version selector in contact app before using.




Warning This value selector is modified for email folder selection only . API and layout are changed because of the sub - folder indentation display . Please reference the original version selector in contact app before using .
function ValueSelector(title, list) {
  var init, show, hide, render, setTitle, emptyList, addToList,
      data, el;
  init = function() {
    var strPopup, body, section, btnCancel, cancelStr;
    data = {
      title: 'No Title',
      list: [
        {
          label: 'Dummy element',
          callback: function() {
            alert('Define an action here!');
          }
        }
      ]
    };
    body = document.body;
    cancelStr = mozL10n.get('message-multiedit-cancel');
    el = document.createElement('section');
    el.setAttribute('class', 'valueselector');
    el.setAttribute('role', 'region');
    strPopup = '<div role="dialog">';
    strPopup += '  <div class="center">';
    strPopup += '    <h3>No Title</h3>';
    strPopup += '    <ul>';
    strPopup += '      <li>';
    strPopup += '        <label class="pack-radio">';
    strPopup += '          <input type="radio" name="option">';
    strPopup += '          <span>Dummy element</span>';
    strPopup += '        </label>';
    strPopup += '      </li>';
    strPopup += '    </ul>';
    strPopup += '  </div>';
    strPopup += '  <menu>';
    strPopup += '    <button>' + cancelStr + '</button>';
    strPopup += '  </menu>';
    strPopup += '</div>';
    el.innerHTML += strPopup;
    body.appendChild(el);
    btnCancel = el.querySelector('button');
    btnCancel.addEventListener('click', function() {
      hide();
    });
    emptyList();
    if (typeof title === 'string') {
      setTitle(title);
    }
    if (Array.isArray(list)) {
      data.list = list;
    }
  };
  show = function() {
    render();
    el.classList.add('visible');
  };
  hide = function() {
    el.classList.remove('visible');
    emptyList();
  };
  render = function() {
    var title = el.querySelector('h3'),
        list = el.querySelector('ul');
    title.textContent = data.title;
    list.innerHTML = '';
    for (var i = 0; i < data.list.length; i++) {
      var li = document.createElement('li'),
          label = document.createElement('label'),
          input = document.createElement('input'),
          span = document.createElement('span'),
          text = document.createTextNode(data.list[i].label);
      input.setAttribute('type', 'radio');
      input.setAttribute('name', 'option');
      label.classList.add('pack-radio');
      label.appendChild(input);
      label.appendChild(span);
      label.appendChild(text);
      var depthIdx = data.list[i].depth;
      depthIdx = Math.min(FOLDER_DEPTH_CLASSES.length - 1, depthIdx);
      label.classList.add(FOLDER_DEPTH_CLASSES[depthIdx]);
      li.addEventListener('click', data.list[i].callback, false);
      li.appendChild(label);
      list.appendChild(li);
    }
  };
  setTitle = function(str) {
    data.title = str;
  };
  emptyList = function() {
    data.list = [];
  };
  addToList = function(label, depth, callback) {
    data.list.push({
      label: label,
      depth: depth,
      callback: callback
    });
  };
  init();
  return{
    init: init,
    show: show,
    hide: hide,
    setTitle: setTitle,
    addToList: addToList,
    List: list
  };
}
function ValueSelector ( title , list ) { var init , show , hide , render , setTitle , emptyList , addToList , data , el ; init = function ( ) { var strPopup , body , section , btnCancel , cancelStr ; data = { title : 'No Title' , list : [ { label : 'Dummy element' , callback : function ( ) { alert ( 'Define an action here!' ) ; } } ] } ; body = document . body ; cancelStr = mozL10n . get ( 'message-multiedit-cancel' ) ; el = document . createElement ( 'section' ) ; el . setAttribute ( 'class' , 'valueselector' ) ; el . setAttribute ( 'role' , 'region' ) ; strPopup = '<div role="dialog">' ; strPopup += '  <div class="center">' ; strPopup += '    <h3>No Title</h3>' ; strPopup += '    <ul>' ; strPopup += '      <li>' ; strPopup += '        <label class="pack-radio">' ; strPopup += '          <input type="radio" name="option">' ; strPopup += '          <span>Dummy element</span>' ; strPopup += '        </label>' ; strPopup += '      </li>' ; strPopup += '    </ul>' ; strPopup += '  </div>' ; strPopup += '  <menu>' ; strPopup += '    <button>' + cancelStr + '</button>' ; strPopup += '  </menu>' ; strPopup += '</div>' ; el . innerHTML += strPopup ; body . appendChild ( el ) ; btnCancel = el . querySelector ( 'button' ) ; btnCancel . addEventListener ( 'click' , function ( ) { hide ( ) ; } ) ; emptyList ( ) ; if ( typeof title === 'string' ) { setTitle ( title ) ; } if ( Array . isArray ( list ) ) { data . list = list ; } } ; show = function ( ) { render ( ) ; el . classList . add ( 'visible' ) ; } ; hide = function ( ) { el . classList . remove ( 'visible' ) ; emptyList ( ) ; } ; render = function ( ) { var title = el . querySelector ( 'h3' ) , list = el . querySelector ( 'ul' ) ; title . textContent = data . title ; list . innerHTML = '' ; for ( var i = 0 ; i < data . list . length ; i ++ ) { var li = document . createElement ( 'li' ) , label = document . createElement ( 'label' ) , input = document . createElement ( 'input' ) , span = document . createElement ( 'span' ) , text = document . createTextNode ( data . list [ i ] . label ) ; input . setAttribute ( 'type' , 'radio' ) ; input . setAttribute ( 'name' , 'option' ) ; label . classList . add ( 'pack-radio' ) ; label . appendChild ( input ) ; label . appendChild ( span ) ; label . appendChild ( text ) ; var depthIdx = data . list [ i ] . depth ; depthIdx = Math . min ( FOLDER_DEPTH_CLASSES . length - 1 , depthIdx ) ; label . classList . add ( FOLDER_DEPTH_CLASSES [ depthIdx ] ) ; li . addEventListener ( 'click' , data . list [ i ] . callback , false ) ; li . appendChild ( label ) ; list . appendChild ( li ) ; } } ; setTitle = function ( str ) { data . title = str ; } ; emptyList = function ( ) { data . list = [ ] ; } ; addToList = function ( label , depth , callback ) { data . list . push ( { label : label , depth : depth , callback : callback } ) ; } ; init ( ) ; return { init : init , show : show , hide : hide , setTitle : setTitle , addToList : addToList , List : list } ; }
Warning !
Warning !
// Model. By having dummy data in the model, // it make it easier for othe developers to catch up to speed // Empty dummy data // Apply optional actions while initializing // Here we apply the folder-card's depth indentation to represent label.