finetune and refactor JS #374

src/zabapgit_css_common.w3mi.data.css

@@ -236,7 +236,7 @@ div.repo {
   overflow: hidden;
 }
 
-#stdout {
+#debug-output {
   text-align: right;
   padding-right: 0.5em;
   color: #ccc;

src/zabapgit_css_common.w3mi.xml

@@ -15,13 +15,13 @@
      <RELID>MI</RELID>
      <OBJID>ZABAPGIT_CSS_COMMON</OBJID>
      <NAME>filename</NAME>
-     <VALUE>styles.css</VALUE>
+     <VALUE>common.css</VALUE>
     </WWWPARAMS>
     <WWWPARAMS>
      <RELID>MI</RELID>
      <OBJID>ZABAPGIT_CSS_COMMON</OBJID>
      <NAME>filesize</NAME>
-     <VALUE>    12130</VALUE>
+     <VALUE>    12136</VALUE>
     </WWWPARAMS>
     <WWWPARAMS>
      <RELID>MI</RELID>
@@ -33,7 +33,7 @@
      <RELID>MI</RELID>
      <OBJID>ZABAPGIT_CSS_COMMON</OBJID>
      <NAME>version</NAME>
-     <VALUE>00001</VALUE>
+     <VALUE>00002</VALUE>
     </WWWPARAMS>
    </PARAMS>
   </asx:values>

src/zabapgit_js_common.w3mi.data.js

@@ -1,16 +1,50 @@
-//
+/**********************************************************
-// ABAPGIT JS function library
+ * ABAPGIT JS function library
-//
+ **********************************************************/
+
+/**********************************************************
+ * Polyfills
+ **********************************************************/
+
+// Bind polyfill (for IE7), taken from https://developer.mozilla.org/
+if (!Function.prototype.bind) {
+  Function.prototype.bind = function(oThis) {
+    if (typeof this !== "function") {
+      throw new TypeError("Function.prototype.bind - subject is not callable");
+    }
+
+    var aArgs   = Array.prototype.slice.call(arguments, 1),
+        fToBind = this,
+        fNOP    = function() {},
+        fBound  = function() {
+          return fToBind.apply(this instanceof fNOP
+                 ? this
+                 : oThis,
+                 aArgs.concat(Array.prototype.slice.call(arguments)));
+        };
+
+    if (this.prototype) {
+      fNOP.prototype = this.prototype; 
+    }
+    fBound.prototype = new fNOP();
+
+    return fBound;
+  };
+}
+
+/**********************************************************
+ * Common functions
+ **********************************************************/
 
 // Output text to the debug div
 function debugOutput(text, dstID) {
-  var stdout       = document.getElementById(dstID || "stdout");
+  var stdout       = document.getElementById(dstID || "debug-output");
   var wrapped      = "<p>" + text + "</p>";
   stdout.innerHTML = stdout.innerHTML + wrapped;
 }
 
-// Submit form data with sapevent
+// Create hidden form and submit with sapevent
-function submitForm(params, action) {
+function submitSapeventForm(params, action) {
   var form = document.createElement("form");
   form.setAttribute("method", "post");
   form.setAttribute("action", "sapevent:" + action);
@@ -27,40 +61,55 @@ function submitForm(params, action) {
   form.submit();
 }
 
+// Set focus to a control
 function setInitialFocus(id) {
   document.getElementById(id).focus();
 }
 
+// Submit an existing form
 function submitFormById(id) {
   document.getElementById(id).submit();
 }
 
+/**********************************************************
+ * STAGE PAGE Logic
+ **********************************************************/
 
-// STAGE
+// Stage helper constructor
-// Hook global click listener on table, global action counter
+function StageHelper(params) {
-function setHook() {
+  this.pageSeed        = params.seed;
-  var stageTab = document.getElementById("stage_tab");
+  this.tabId           = params.stageTabId;
+  this.formAction      = params.formAction;
+  this.commitNodeId    = params.commitNodeId;
+  this.commitAllNodeId = params.commitAllNodeId;
+  this.choiseCount     = 0;
+  this.setHook();
+}
+
+// Hook global click listener on table, load/unload actions
+StageHelper.prototype.setHook = function() {
+  var stageTab = document.getElementById(this.tabId);
 
   if (stageTab.addEventListener) {
-    stageTab.addEventListener("click", onEvent);
+    stageTab.addEventListener("click", this.onEvent.bind(this));
   } else {
-    stageTab.attachEvent("onclick", onEvent);
+    stageTab.attachEvent("onclick", this.onEvent.bind(this));
   }
 
-  window.onbeforeunload = onPageUnload;
+  window.onbeforeunload = this.onPageUnload.bind(this);
-  window.onload         = onPageLoad;
+  window.onload         = this.onPageLoad.bind(this);
 }
 
 // Store table state on leaving the page
-function onPageUnload() {
+StageHelper.prototype.onPageUnload = function() {
-  var data = collectData();
+  var data = this.collectData();
-  window.sessionStorage.setItem(gPageID, JSON.stringify(data));
+  window.sessionStorage.setItem(this.pageSeed, JSON.stringify(data));
 }
 
 // Re-store table state on entering the page
-function onPageLoad() {
+StageHelper.prototype.onPageLoad = function() {
-  var data  = JSON.parse(window.sessionStorage.getItem(gPageID));
+  var data  = JSON.parse(window.sessionStorage.getItem(this.pageSeed));
-  var stage = document.getElementById("stage_tab");
+  var stage = document.getElementById(this.tabId);
 
   for (var i = stage.rows.length - 1; i >= 0; i--) {
     var tr      = stage.rows[i];
@@ -69,23 +118,18 @@ function onPageLoad() {
     var cmd     = data[tr.cells[1].innerText];
     if (!cmd) continue;
     
-    formatTR(tr, cmd, context);
+    this.formatTR(tr, cmd, context);
-    if (countChoiceImpact(cmd) > 0) {
+    this.choiseCount += (this.countChoiceImpact(cmd) > 0) ? 1 : 0;
-      gChoiceCount++;
-    }
   }
 
-  updateMenu();
+  this.updateMenu();
 }
 
 // Event handler, change status
-function onEvent(event) {
+StageHelper.prototype.onEvent = function (event) {
   if (!event.target) {
-    if (event.srcElement) {
+    if (event.srcElement) { event.target = event.srcElement; }
-      event.target = event.srcElement;
+    else { return; }
-    } else {
-      return;
-    }
   }
 
   if (event.target.tagName != "A") return;
@@ -104,58 +148,57 @@ function onEvent(event) {
     case "reset":  cmd = "?"; break;
   }
   
-  formatTR(tr, cmd, context);
+  this.formatTR(tr, cmd, context);
-  gChoiceCount += countChoiceImpact(cmd);
+  this.choiseCount += this.countChoiceImpact(cmd);
-
+  this.updateMenu();
-  updateMenu();
 }
 
 // Update action counter -> affects menu update after
-function countChoiceImpact(cmd) {
+StageHelper.prototype.countChoiceImpact = function (cmd) {
-  if ("ARI".indexOf(cmd) > -1) {
+  if ("ARI".indexOf(cmd) > -1) { return 1; }
-    return 1;
+  else if ("?".indexOf(cmd) > -1) { return -1; }
-  } else if ("?".indexOf(cmd) > -1) {
+  else { alert("Unknown command"); }
-    return -1;
-  } else {
-    alert("Unknown command");
-  }
 }
 
 // Re-format table line
-function formatTR(tr, cmd, context) {
+StageHelper.prototype.formatTR = function (tr, cmd, context) {
   var cmdReset  = "<a>reset</a>";
   var cmdLocal  = "<a>add</a>";
   var cmdRemote = "<a>ignore</a><a>remove</a>";
 
   tr.cells[0].innerText   = cmd;
-  tr.cells[0].style.color = (cmd == "?") ? "#CCC" : "";
+  if (cmd == "?") {
-  tr.cells[2].innerHTML   = (cmd != "?") ? cmdReset
+    tr.cells[0].style.color = "#CCC"; //grey
-                                         :(context == "local") ? cmdLocal : cmdRemote;
+    tr.cells[2].innerHTML   = (context == "local") ? cmdLocal : cmdRemote;
-}
-
-// Update menu items visibility
-function updateMenu() {
-  if (gChoiceCount > 0) {
-    document.getElementById("act_commit").style.display     = "inline";
-    document.getElementById("act_commit_all").style.display = "none";
   } else {
-    document.getElementById("act_commit").style.display     = "none";
+    tr.cells[0].style.color = "";
-    document.getElementById("act_commit_all").style.display = "inline";
+    tr.cells[2].innerHTML   = cmdReset;
   }
 }
 
-// Commit change to the server
+// Update menu items visibility
-function commit(action) {
+StageHelper.prototype.updateMenu = function () {
-  var data = collectData();
+  if (this.choiseCount > 0) {
-  submitForm(data, action);
+    document.getElementById(this.commitNodeId).style.display    = "inline";
+    document.getElementById(this.commitAllNodeId).style.display = "none";
+  } else {
+    document.getElementById(this.commitNodeId).style.display    = "none";
+    document.getElementById(this.commitAllNodeId).style.display = "inline";
+  }
+}
+
+// Submin stage state to the server
+StageHelper.prototype.submit = function () {
+  var data = this.collectData();
+  submitSapeventForm(data, this.formAction);
 }
 
 // Extract data from the table
-function collectData() {
+StageHelper.prototype.collectData = function () {
-  var stage = document.getElementById("stage_tab");
+  var stage = document.getElementById(this.tabId);
   var data  = {};
 
-  for (var i = stage.rows.length - 1; i >= 0; i--) {
+  for (var i = 0; i < stage.rows.length; i++) {
     var row = stage.rows[i];
     if (row.parentNode.tagName == "THEAD") continue;
     data[row.cells[1].innerText] = row.cells[0].innerText;

src/zabapgit_js_common.w3mi.xml

@@ -15,13 +15,13 @@
      <RELID>MI</RELID>
      <OBJID>ZABAPGIT_JS_COMMON</OBJID>
      <NAME>filename</NAME>
-     <VALUE>script.js</VALUE>
+     <VALUE>common.js</VALUE>
     </WWWPARAMS>
     <WWWPARAMS>
      <RELID>MI</RELID>
      <OBJID>ZABAPGIT_JS_COMMON</OBJID>
      <NAME>filesize</NAME>
-     <VALUE>     4416</VALUE>
+     <VALUE>     6500</VALUE>
     </WWWPARAMS>
     <WWWPARAMS>
      <RELID>MI</RELID>
@@ -33,7 +33,7 @@
      <RELID>MI</RELID>
      <OBJID>ZABAPGIT_JS_COMMON</OBJID>
      <NAME>version</NAME>
-     <VALUE>00001</VALUE>
+     <VALUE>00004</VALUE>
     </WWWPARAMS>
    </PARAMS>
   </asx:values>

src/zabapgit_page.prog.abap

@@ -268,13 +268,14 @@ CLASS lcl_gui_page_super IMPLEMENTATION.
     ro_html->add( '<img src="img/logo" >' ).                "#EC NOTEXT
     ro_html->add( '<table width="100%"><tr><td width="40%"></td><td>' ). "#EC NOTEXT
     ro_html->add( |<span class="version">{ gc_abap_version }</span>| ). "#EC NOTEXT
-    ro_html->add( '</td><td id="stdout" width="40%"></td></tr></table>' ). "#EC NOTEXT
+    ro_html->add( '</td><td id="debug-output" width="40%"></td></tr></table>' ). "#EC NOTEXT
     ro_html->add( '</div>' ).                               "#EC NOTEXT
     ro_html->add( '</body>' ).                              "#EC NOTEXT
 
     IF io_include_script IS BOUND.
       ro_html->add( '<script type="text/javascript">' ).
       ro_html->add( io_include_script ).
+      ro_html->add( 'debugOutput("js: OK");' ).
       ro_html->add( '</script>' ).
     ENDIF.
 

src/zabapgit_page_stage.prog.abap

@@ -233,7 +233,7 @@ CLASS lcl_gui_page_stage IMPLEMENTATION.
     CREATE OBJECT ro_html.
 
     ro_html->add( '<div class="paddings">' ).
-    ro_html->add_anchor( iv_act   = |commit('{ c_action-stage_commit }');|
+    ro_html->add_anchor( iv_act   = 'gHelper.submit();'
                          iv_typ   = gc_action_type-onclick
                          iv_id    = 'act_commit'
                          iv_style = 'display: none'
@@ -250,10 +250,14 @@ CLASS lcl_gui_page_stage IMPLEMENTATION.
 
     CREATE OBJECT ro_html.
 
-    " Globals & initialization
+    ro_html->add( 'var gStageParams = {' ).
-    ro_html->add( |var gPageID = "stage{ mv_ts }";| ).
+    ro_html->add( |  seed:            "stage{ mv_ts }",| ).
-    _add 'var gChoiceCount = 0;'.
+    ro_html->add( '  stageTabId:      "stage_tab",' ).
-    _add 'setHook();'.
+    ro_html->add( '  formAction:      "stage_commit",' ).
+    ro_html->add( '  commitNodeId:    "act_commit",' ).
+    ro_html->add( '  commitAllNodeId: "act_commit_all"' ).
+    ro_html->add( '}' ).
+    ro_html->add( 'var gHelper = new StageHelper(gStageParams);' ).
 
   ENDMETHOD.  "scripts