Sprint 2b – MVC – View

View Component Source Code

/* VIEW object */
var gobjView = new function() {
  var self = this;
  var controller;
  var objTextArea;
  var objList;
  var taskTemplate;

  function generateTaskList(pobjTaskList) {
    var arrList = [];
    var arrItem = [];
    var numTask = 0;
    var numTmplt = 0;
    var numIndex = 0;

    for (numTask=0; numTask<pobjTaskList.list.length; numTask+=1) {
      if (numIndex < pobjTaskList.list[numTask].Id) {
        numIndex = pobjTaskList.list[numTask].Id;
      }
      for (numTmplt=0; numTmplt<taskTemplate.length; numTmplt+=1) {
        if (!!taskTemplate[numTmplt]) {
          if (taskTemplate[numTmplt] == "{{") {
            arrItem.push(pobjTaskList.list[numTask][taskTemplate[numTmplt+2]]);
            numTmplt+=4; //Skip over {{INSERT}}
          }
          else {
            arrItem.push(taskTemplate[numTmplt]);
          }
        }
      }
      arrList.push(arrItem.join(""));
      arrItem = [];
    }
    return { html: arrList.join("\n"), listIndex: numIndex};
  }

  function getSelectedTask() {
    return objList.querySelector('.highlighted');
  }

  function showFunctions(pstrArticle) {
    var objSection = document.querySelector('.function_Container');

    if (!!objSection) {
      objSection.className =
      objSection.className.replace(/show_[^\s]*/, "show_" + pstrArticle + "_Functions");
    }
  }

  function clearSelectedTask() {
    var objHighlightedItem = getSelectedTask();

    if (!!objHighlightedItem) {
      objHighlightedItem.className = objHighlightedItem.className.replace(/highlighted/, "lowLight");
    }
  }

  self.selectedItem = function(objEvent) {
    var blnProcessed = false;

    if (event.target && event.target.nodeName == 'LI') {
      var strListId = objEvent.target.id;
      var objListText = document.getElementById(strListId);

      clearSelectedTask();
      objListText.className = objListText.className.replace(/lowLight/, "highlighted");
      objTextArea.value = objListText.innerText;
      blnProcessed = true;
    }

    return blnProcessed;
  };

  self.clearSelectedTask = function() {
    clearSelectedTask();
  };

  self.getTaskText = function() {
    return objTextArea.value;
  };

  self.setTaskText = function(pstrTaskText) {
    objTextArea.value = pstrTaskText;
  };

  self.showTaskDetails = function() {
    showFunctions('listItems');
    objTextArea.focus();
  };

  self.showButtonPanel = function() {
    showFunctions('list');
    clearSelectedTask();
  };

  self.createTask = function(pstrTaskText, pnumTaskId) {
    var node = document.createElement("LI");
    var textnode = document.createTextNode(pstrTaskText);
    
    node.appendChild(textnode);

    var att = document.createAttribute("class");
    att.value = "lowLight";
    node.setAttributeNode(att);

    att = document.createAttribute("id");
    att.value = ("li_" + pnumTaskId);
    node.setAttributeNode(att);

    objList.appendChild(node);
  };

  self.updateTask = function(pstrTaskText) {
    var objTask = getSelectedTask();
    objTask.innerText = pstrTaskText;
  };

  self.deleteTask = function() {
    var objTask = getSelectedTask();
    objTask.parentNode.removeChild(objTask);
  };

  self.initialise = function( pobjController) {
    var objTasks = {};

    controller = pobjController;
    // Capture the TextArea control
    objTextArea = document.getElementById('listItemTextArea');
    // Capture the Task List control
    objList = document.getElementById('list_1');
    // Capture and pre-process the Template
    taskTemplate = objList.innerHTML.split(/(\{\{)|(\}\})/g);

    // Prepare the HTML for the Task List given the dataset from the Model
    objTasks = generateTaskList( controller.getTaskList());
    // Capture the initali Task Index and populate the Task List on screen.
    controller.setTaskIndex( objTasks.listIndex);
    objList.innerHTML = objTasks.html;
  };
};

Return to previous page.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s