index.html

<!DOCTYPE html>
<html lang="en">
  <head>

    <!-- todo: figure out what these things mean -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Vanilla Bootstrap</title>


    <link href="./css/bootstrap.css" rel="stylesheet">
    <!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> -->

    <!-- Custom styles for this template -->
    <!-- <link href="css/main.css" rel="stylesheet"> -->


    <!-- link rel="stylesheet" href="css/jquery-ui.css" -->
    <!-- todo: get the cdn version of this -->


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>

/* General */

.bordered{
  border: 2px dashed lime;
}


/* Specific */


#div-container{
  width: 100vw;
  height: 100vh;
  position: relative;
}


#div-icon-holder{
  top: 1vw;
  left: 1vw;
  width: 13vw;
  height: 12vw;
  position: relative;
}

#div-top-bar{
  position: relative;
  height: 20vh;
}

#div-main-area{
  position: relative;
  height: 80vh;
}

.div-l-or-r-side{
  position: absolute;
  height: 70vh;
  width: 45vw;
}

#div-left-side-sentences{
  left: 0;
}

#div-right-side-essay{
  left: 50vw;
}

#txa-edits{
  width: 100%;
  height: 20%;
}

#txa-essay{
  width: 100%;
  height: calc(100% - 1em - 6px);
  background-color: #FCFCFC;
}

#div-right-side-essay::before{
  content: "textarea#txa-essay";
  color: rgb(53, 202, 53); 
}

#div-left-side-sentences::before{
  content: "textarea#txa-edits";
  color: rgb(53, 202, 53); 
}

.div-floating{
  position: absolute;
}

.div-button{
  width: 50px;
  height: 50px;
  top: 21vw;
}

#div-click-left{
  left: 1vw;
}

#div-click-right{
  left: 37vw;
}

    
    </style>
    <!-- todo:
    
      use grid layout asap
    
    
    -->
  </head>


  <body>
    <div id="div-container" class="bordered">
      <div id="div-top-bar" class="div-section bordered">
        <div id="div-icon-holder" class="div-section bordered ">

        </div>
      </div>
      <div id="div-main-area" class="div-section bordered">
        
        <div id="div-left-side-sentences" class="div-section div-l-or-r-side bordered">
          <textarea id="txa-edits"></textarea>
          <span>
            <input type="radio" name="rdi-star-power" value="1">1
            <input type="radio" name="rdi-star-power" value="2">2
            <input type="radio" name="rdi-star-power" value="3">3
          </span>
          <span>
            star(s)
          </span>
        </div>
        <div id="div-click-left" class="div-floating div-button bordered"></div>
        <div id="div-click-right" class="div-floating div-button bordered"></div>
        <div id="div-right-side-essay" class="div-section div-l-or-r-side bordered">
          <textarea id="txa-essay"></textarea>
        </div>
      </div>
    
    </div>


    <script src="./js/jquery.js"></script>
    <!-- <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script> -->

    <script src="./js/underscore-min.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> -->

    <!-- <script src="./js/moment.js"></script> -->
    <!-- <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.js"></script> -->
    

    <!-- script src="./js/jquery-ui.js"></script -->
    <!-- script
      src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
      integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
      crossorigin="anonymous"></script -->
    
    <script src="./js/bootstrap.js"></script>
    <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> -->


    <script>


$(() => {

  // variables
  var intNumberOfSentences;
  var intCurrentSentenceIdx = -1;
  var arrRandOrderSentences = [];
  var pjoEssay;
  var docDocument;


  // functions

  function getEssayTextFromPojo(){

    var strContent = "";
    
    for (var i=0; i<intCurrentSentenceIdx; i++){
      strContent += pjoEssay[i].latestEdit || pjoEssay[i].original;
    }

    console.log("waheed >  getEssayTextFromPojo | strContent: ", strContent);    
    return strContent;
  }

  function saveEditedSentence(){

    var strEditedSentence = $("#txa-edits").val();

    var intIdx = arrRandOrderSentences[intCurrentSentenceIdx];
    pjoEssay[intIdx].latestEdit = strEditedSentence;

    reloadEssay();

  }

  function getRandomSentenceToEdit(){

    console.log("getRandomSentenceToEdit | pjoEssay: ", pjoEssay);
    console.log("getRandomSentenceToEdit | arrRandOrderSentences: ", arrRandOrderSentences);
    console.log("getRandomSentenceToEdit | intCurrentSentenceIdx: ", intCurrentSentenceIdx);
    

    var intIdx = arrRandOrderSentences[++intCurrentSentenceIdx];
    var strSentence = pjoEssay[intIdx].original;

    $("#txa-edits").val(strSentence);
  }

  function getTestEssayText(){
    var strText = "this permanent lister ner who is it? is it allah, or ourselves? i say both, beacause if you turn your mind rtowards the location we call allah, - and isn't this a very mysterious thing, how you can consider it a unique and important activity to sconsider yourself being listenged to anew, and refocus your language and your intention into a new corner of the enitrely spherical sky, and point your bird beak in a direction and appreciate that there is a new music to your effort of being recievived as a language producer. veyr mysterious. - and then back to the idea that this sis different, you tmight thinkg, \"fuck me, allah\", and if you're another person, who's not me, you might back off, and sya sorry, and try and placate any listerner ywho might be preparing a mighty god-like fist to smash you into the ground , or do nothing for the moment, and plot revenge on your destiny, and the style in which you try to say sorry for your foul language, and all that it takes till you feel the worst thing you know would have forgiven you, and then you continue with your prayer. maybe asking why the two of you weren't better friends. given how scared you are about this and then the next thing in your life.";

    return strText;
  }

  function getEssayText(){
    var strContent = $("#txa-essay").val();

    console.log("getEssayTxt: strContent", strContent);
    
    return strContent;
  }

  function reloadEssay(){
    var strEssayText = getEssayTextFromPojo();

    $("#txa-essay").val(strEssayText);
  }

  /* initHandlers

    Two things are being handled:
      * after you paste/key-up something into the textarea on the right, it 
        - setupEssay();
        - setupIndices();
        - getRandomSentenceToEdit();
      * after you key-up something on the left, it
        - saveEditedSentence


  */
  function initHandlers(){
    console.log("waheed >  initHandlers | alpha");

    var objThis = this;

    $("#txa-essay").on('keypress', ((e) => {
      // if (e.which == 13) {
        console.log("creating document");
        setupEssay.call(objThis);

        // setupEssay.call(objThis);
        // getRandomSentenceToEdit.call(objThis);

      // }
    }).bind(objThis));

    $("#txa-edits").keypress((e) => {
      saveEditedSentence.call(objThis);
    }).bind(objThis);

    $(".div-button").click((e) => {
      var strId = e.target.id;

      if (strId == "div-click-left"){
        console.log("clicked left");
        docDocument.prevSentence.call(docDocument);
      }
      else{
        console.log("clicked right");
        docDocument.nextSentence.call(docDocument);
      }

    })

  }

  class Sentence{
    constructor(strSentenceText){
      this.strOriginalSentence = strSentenceText;
      this.strEdits = [];
      this.intRating = 1;
    }

    makeEdit(strNewSentence){
      this.strEdits.push(strNewSentence);
    }

    setRating(intNewRating){
      this.intRating = intNewRating;
    }
  }

  /* This:
      1. Stores the essay
      2. Accepts and stores essay edits
      3. Can return the original essay
      4. Can return the edited essay
      5. Can store several versions of the same sentence
  */ 
  // bookmark
  class Essay{
    /* This
        1. Splits the text sentences
        2. Stores the sentences in an indexed array
    */
    constructor(strEssayText){
      this.loadEssay(strEssayText);
    }

    loadEssay(strEssay){

      var arrSentences = strEssay.split(/[.?!]/g);
      var arrPunctuation = strEssay.replace(/[^.?!]/g, "").split('');
      var intNumberOfSentences = arrSentences.length - 1;

      this.arrSentences = new Array(intNumberOfSentences);

      for (var i=0; i<intNumberOfSentences; i++){
        var strSentence = arrSentences[i] + arrPunctuation[i];

        this.arrSentences[i] = new Sentence(strSentence);
      }

      this.intNumSentences = intNumberOfSentences;
      this.strOriginalText = strEssay;
    }

    numberOfSentences(){
      var intNumSentences = this.intNumSentences;

      return intNumSentences;
    }
  }

  // bookmark
  class Document{
    constructor(strText){
      this.essay                       = new Essay(strText);
      this.sentenceOrder;
      this.currentRandomSentenceIndex  = 0;
      this.actualSentenceNumber;
      this.numberOfSentences           = this.essay.numberOfSentences(); 

      this.setupSentencesIndices();
    }

    setupSentencesIndices(){
      this.setupRandomSentenceSequence();
      this.setActualSentenceNumber();
    }

    setActualSentenceNumber(){
      this.actualSentenceNumber = this.sentenceOrder[this.currentRandomSentenceIndex];
    }

    setupRandomSentenceSequence(){
      var intNumSentences = this.numberOfSentences;
      var arrSentenceIndices = [];

      for (var i=0; i<intNumberOfSentences; i++){
        arrSentenceIndices.push(i);
      }

      arrSentenceIndices = _.shuffle(arrSentenceIndices);
      this.sentenceOrder = arrSentenceIndices;
    }

    nextSentence(){
      console.log("next sentence");
      console.log("this.currentRandomSentenceIndex: ", this.currentRandomSentenceIndex);
      console.log("this.numberOfSentences: ", this.numberOfSentences);

      if (this.currentRandomSentenceIndex < this.numberOfSentences){
        console.log("alpha");
        this.currentRandomSentenceIndex++;
        this.setActualSentenceNumber();
        this.printStatus();
      }
    }

    prevSentence(){
      console.log("previous sentence");
      console.log("this.currentRandomSentenceIndex: ", this.currentRandomSentenceIndex);
      console.log("this.numberOfSentences: ", this.numberOfSentences);

      if (this.currentRandomSentenceIndex > 0){
        console.log("alpha");
        this.currentRandomSentenceIndex--;
        this.setActualSentenceNumber();
        this.printStatus();
      }
    }

    printStatus(){
      console.log("index: ${this.currentRandomSentenceIndex}, sentence #: ${this.actualSentenceNumber}");
    }
  }

  function setupEssay(){

    // load the essay into an object
    var strEssay = getEssayText();
    docDocument = new Document(strEssay);
    

  }

  function setupIndices(){

    for (var i=0; i<intNumberOfSentences; i++){
      arrRandOrderSentences.push(i);
    }

    arrRandOrderSentences = _.shuffle(arrRandOrderSentences);
    console.log("setupIndices | arrRandOrderSentences: ", arrRandOrderSentences);
  }

  /* This function tests if the getEssayAsObject function works

  * todo: tests 
    ~ breaks on all punctuations
    ~ the correct number of sentences
    ~ structure good:
      ~ has an originalText field
      ~ has a numSentences field
      ~ latestEdit and stars 
        ~ exist. 
        ~ they are all undefined

  */
  // bookmark
  function testProperObjectFormat(){
    var strText = getTestEssayText();
    var strObject = getEssayAsObject(strText);

    console.log(strObject);
  }

  function init(){
    console.log("waheed >  init | alpha");

    initHandlers();

    // testProperObjectFormat();
    // getRandomSentenceToEdit();

  }

  // script
  init();
});
    
   
    </script>
  </body>
</html>

 <!-- 

July 20th:
---

In my mind, you just 

1. get a random sentence to edit once the program loads
2. you edit it to your heart's delight
3. hit enter, and the text reloads

- what i want -

* to be immediately right (one day, sigh)
* fade ins for every replacement made
* nice user experience (maybe an arrow for next and previous)
* incorporate stars, and average star rating
* push to the real waheed, and see what we have  


July 25th:
---

Getting it right

0. Trail starts at "saveEditedSentence"
1. getEssayTextFromPojo needs fixing


* getEssayTextFromPojo

Aug 23rd:
---

  Done:
  * Getting testProperObjectFormat and getEssayAsObject up
  * Improving the look of the app
  * Added notes to the initHandlers function

  Next:
  * Working on the initHandlers function

Sep 12
---

  Done:
  * Scaffolding - created objects

  Next:
  * Filling in the functions


Sept 29
---

  Done:
  * Setting up the document
  * Clicking left and right

  Next:
  * Splitting the sentences properly

 -->