memex/docs/logic/add.js

function Add()
{
  this.overlay = null;
  this.display = null;
  this.grid = null;

  this.elementList = [];
  this.keys = null;
  var parent = this;

  // STATE
  this.enabledOverlay = false;
  this.addedTitle = false
  this.addedDate = false
  this.addedPerson = false
  this.addedSource = false
  this.addedProject = false
  this.addedType = false
  this.addedLink = false
  this.addedTags = false
  this.addedNote = false
  this.addedQuote = false
  this.addedTerms = false
  this.addedProgress = false

  this.install = function()
  {
    this.grid = document.getElementById("grid");
    this.overlay = document.getElementById("overlay");
      
    this.setupElement('Title', 'TITLE', 'upper');
    this.setupElement('Date', 'DATE', 'lower');
    this.setupElement('Type', 'TYPE', 'lower');
    this.setupElement('Link', 'LINK', 'url');
    this.setupElement('Person', 'PERS', 'text');
    this.setupElement('Source', 'SRCE', 'title');
    this.setupElement('Project', 'PROJ', 'text');
    this.setupElement('Tags', 'TAGS', 'tags');
    this.setupElement('Progress', 'PROG', 'text');
    this.setupElement('Note', 'NOTE', 'text'); // long
    this.setupElement('Quote', 'QOTE', 'quote'); // long
    this.setupElement('Terms', 'TERM', 'quote'); // long
    // DONE
    // REVI
    this.keys = Object.keys(this.elementList);

    // SETUP
    this.overlay.innerHTML = '';
    let content = `<div class="content">`

    // ESCAPE
    content += `<div class="content-menu">`;
    content += `<a href="javascript:void(0);" id="escape">`;
    content += `<div class="content-menu-option">`;
    content += `<b>Esc</b>`;
    content += `</div>`;
    content += `</a>`;
    content += `</div>`;

    // FORM
    content += `<form>`;
    for (var i = 0; i < this.keys.length; i++)
    {
      content += `<div class="row">
                    <div class="key" id="key${this.elementList[this.keys[i]].key}">${this.elementList[this.keys[i]].desc}</div>
                    <input placeholder="${this.elementList[this.keys[i]].key}" id="${this.elementList[this.keys[i]].key}">
                  </div>`;
    }
    content += `</form>`;

    // DISPLAY
    content += `<div class="display" id="display">`;
    content += `</div>`;

    // ENTER
    content += `<div class="content-enter">`;
    content += `<a href="javascript:void(0);" id="enter">`;
    content += `<div class="content-menu-option">`;
    content += `<b>Enter</b>`;
    content += `</div>`;
    content += `</a>`;
    content += `</div>`;
    
    content += `</div>`;

    

    this.overlay.innerHTML += content;

    this.display = document.getElementById("display");

    for (var i = 0; i < this.keys.length; i++)
    {
      this.elementList[this.keys[i]].elem = document.getElementById(this.elementList[this.keys[i]].key);
      this.elementList[this.keys[i]].elem.oninput = this.onElemChanged;
      this.elementList[this.keys[i]].elem.onfocus = this.onElemFocus;
      this.elementList[this.keys[i]].elem.onblur = this.onElemBlur;
      this.elementList[this.keys[i]].elemKey = document.getElementById("key" + this.elementList[this.keys[i]].key);
    }
    setTimeout(function()
    { 
      parent.setupData();
    }, 100);
  }

  this.setupElement = function(key, desc, type)
  {
    this.elementList[key] = { key: key, desc: desc, type: type, added: false};
  }

  this.onElemChanged = function(e)
  {
    // TODO: Autocomplete tags, type 
    parent.setupData();
  }

  this.onElemFocus = function(e)
  {
    for (var i = 0; i < parent.keys.length; i++)
    {
      if (e.target.id == parent.elementList[parent.keys[i]].key)
      {
        if (!parent.elementList[parent.keys[i]].added)
        {
          parent.elementList[parent.keys[i]].added = true;
          parent.elementList[parent.keys[i]].elemKey.style.visibility = "visible";
        }
        break;
      }
    }
  }

  this.onElemBlur = function(e)
  {
    for (var i = 0; i < parent.keys.length; i++)
    {
      if (e.target.id == parent.elementList[parent.keys[i]].key)
      {
        if (parent.elementList[parent.keys[i]].elem.value == '' && parent.elementList[parent.keys[i]].added)
        {
          parent.elementList[parent.keys[i]].added = false;
          parent.elementList[parent.keys[i]].elemKey.style.visibility = "hidden";
        }
        break;
      }
    }
  }

  this.setupData = function()
  {
    let value = '';
    for (var i = 0; i < parent.keys.length; i++)
    {
      if (parent.elementList[parent.keys[i]].key == 'Title')
      {
        if (parent.elementList[parent.keys[i]].elem.value != '')
        {
          value += parent.elementList[parent.keys[i]].elem.value.toUpperCase() + '<br>'
        }
        else
        {
          value += 'TITLE<br>';
        }
      }
      else if (parent.elementList[parent.keys[i]].elem.value != '')
      {
        value += '&nbsp;&nbsp;';
        value += parent.elementList[parent.keys[i]].desc.toUpperCase() + ' : ';

        if (parent.elementList[parent.keys[i]].type == 'lower')
        {
          value += parent.elementList[parent.keys[i]].elem.value.toLowerCase();
        }
        else if (parent.elementList[parent.keys[i]].type == 'text')
        {
          value += parent.elementList[parent.keys[i]].elem.value;
        }
        else if (parent.elementList[parent.keys[i]].type == 'url')
        {
          // TODO: validate
          value += parent.elementList[parent.keys[i]].elem.value;
        }
        else if (parent.elementList[parent.keys[i]].type == 'tags')
        {
          // TODO: Format
          value += parent.elementList[parent.keys[i]].elem.value;
        }
        else if (parent.elementList[parent.keys[i]].type == 'quote')
        {
          // TODO: Format
          value += parent.elementList[parent.keys[i]].elem.value;
        }
        else if (parent.elementList[parent.keys[i]].type == 'title')
        {
          value += parent.elementList[parent.keys[i]].elem.value.toProperCase();
        }
        else if (parent.elementList[parent.keys[i]].type == 'upper')
        {
          value += parent.elementList[parent.keys[i]].elem.value.toLowerCase();
        }

        value += '<br>';
      }
    }
    parent.display.innerHTML = value;
  }

  this.show = function()
  {
    this.setOverlay(true);

    var date = new Date();
    var dateString = "1" + date.getFullYear()
                    + "-" + ("0"+(date.getMonth()+1)).slice(-2) 
                    + "-" + ("0" + date.getDate()).slice(-2);
    this.elementList['Date'].elem.value = dateString;
    this.elementList['Date'].added = true;
    this.elementList['Date'].elemKey.style.visibility = "visible";

    setTimeout(function()
    { 
      parent.elementList['Title'].elem.focus();
    }, 100);
  }

  this.setOverlay = function(value)
  {
    if (value && !this.enabledOverlay)
    {
      overlay.style.opacity = '1';
      overlay.style.zIndex  = '1000';
      this.enabledOverlay = true;
      setTimeout(function()
      {
        this.grid.innerHTML = '';
        this.grid.style.height = 0;
      }, 200);
    }
    else if (!value && this.enabledOverlay)
    {
      overlay.style.opacity = '0';
      setTimeout(function()
      {
        overlay.style.zIndex  = '-100';
      }, 200);
      this.enabledOverlay = false;
    }
  }
}

String.prototype.toProperCase = function () {
    return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
};

document.onkeydown = function(evt) 
{
  evt = evt || window.event;
  if (!evt.ctrlKey)
  {
    var isEscape = false;
    var isA = false;
    
    if ("key" in evt)
    {
      isEscape = (evt.key == "Escape" || evt.key == "Esc");
    }
    else
    {
      isEscape = (evt.keyCode == 27);
    }
    isA = (evt.keyCode == 65);
    
    if (isEscape)
    {
      if (main.queryCur == 'add')
      {
        main.load(main.queryPrev);
      }
    }
    else if (isA && main.queryCur != 'add')
    {
      main.load('add');
    }
  }
};