finetune and refactor JS #374

This commit is contained in:
sbcgua 2016-11-27 10:41:29 +02:00
parent d84e1b1500
commit bf9142bb1b
6 changed files with 124 additions and 76 deletions

View File

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

View File

@ -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>

View File

@ -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
function submitForm(params, action) {
// Create hidden form and submit with sapevent
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
// Hook global click listener on table, global action counter
function setHook() {
var stageTab = document.getElementById("stage_tab");
if (stageTab.addEventListener) {
stageTab.addEventListener("click", onEvent);
} else {
stageTab.attachEvent("onclick", onEvent);
// Stage helper constructor
function StageHelper(params) {
this.pageSeed = params.seed;
this.tabId = params.stageTabId;
this.formAction = params.formAction;
this.commitNodeId = params.commitNodeId;
this.commitAllNodeId = params.commitAllNodeId;
this.choiseCount = 0;
this.setHook();
}
window.onbeforeunload = onPageUnload;
window.onload = onPageLoad;
// 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", this.onEvent.bind(this));
} else {
stageTab.attachEvent("onclick", this.onEvent.bind(this));
}
window.onbeforeunload = this.onPageUnload.bind(this);
window.onload = this.onPageLoad.bind(this);
}
// Store table state on leaving the page
function onPageUnload() {
var data = collectData();
window.sessionStorage.setItem(gPageID, JSON.stringify(data));
StageHelper.prototype.onPageUnload = function() {
var data = this.collectData();
window.sessionStorage.setItem(this.pageSeed, JSON.stringify(data));
}
// Re-store table state on entering the page
function onPageLoad() {
var data = JSON.parse(window.sessionStorage.getItem(gPageID));
var stage = document.getElementById("stage_tab");
StageHelper.prototype.onPageLoad = function() {
var data = JSON.parse(window.sessionStorage.getItem(this.pageSeed));
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);
if (countChoiceImpact(cmd) > 0) {
gChoiceCount++;
}
this.formatTR(tr, cmd, context);
this.choiseCount += (this.countChoiceImpact(cmd) > 0) ? 1 : 0;
}
updateMenu();
this.updateMenu();
}
// Event handler, change status
function onEvent(event) {
StageHelper.prototype.onEvent = function (event) {
if (!event.target) {
if (event.srcElement) {
event.target = event.srcElement;
} else {
return;
}
if (event.srcElement) { event.target = event.srcElement; }
else { return; }
}
if (event.target.tagName != "A") return;
@ -104,58 +148,57 @@ function onEvent(event) {
case "reset": cmd = "?"; break;
}
formatTR(tr, cmd, context);
gChoiceCount += countChoiceImpact(cmd);
updateMenu();
this.formatTR(tr, cmd, context);
this.choiseCount += this.countChoiceImpact(cmd);
this.updateMenu();
}
// Update action counter -> affects menu update after
function countChoiceImpact(cmd) {
if ("ARI".indexOf(cmd) > -1) {
return 1;
} else if ("?".indexOf(cmd) > -1) {
return -1;
} else {
alert("Unknown command");
}
StageHelper.prototype.countChoiceImpact = function (cmd) {
if ("ARI".indexOf(cmd) > -1) { return 1; }
else if ("?".indexOf(cmd) > -1) { 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" : "";
tr.cells[2].innerHTML = (cmd != "?") ? cmdReset
:(context == "local") ? cmdLocal : cmdRemote;
if (cmd == "?") {
tr.cells[0].style.color = "#CCC"; //grey
tr.cells[2].innerHTML = (context == "local") ? cmdLocal : cmdRemote;
} else {
tr.cells[0].style.color = "";
tr.cells[2].innerHTML = cmdReset;
}
}
// Update menu items visibility
function updateMenu() {
if (gChoiceCount > 0) {
document.getElementById("act_commit").style.display = "inline";
document.getElementById("act_commit_all").style.display = "none";
StageHelper.prototype.updateMenu = function () {
if (this.choiseCount > 0) {
document.getElementById(this.commitNodeId).style.display = "inline";
document.getElementById(this.commitAllNodeId).style.display = "none";
} else {
document.getElementById("act_commit").style.display = "none";
document.getElementById("act_commit_all").style.display = "inline";
document.getElementById(this.commitNodeId).style.display = "none";
document.getElementById(this.commitAllNodeId).style.display = "inline";
}
}
// Commit change to the server
function commit(action) {
var data = collectData();
submitForm(data, action);
// 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() {
var stage = document.getElementById("stage_tab");
StageHelper.prototype.collectData = function () {
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;

View File

@ -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>

View File

@ -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.

View File

@ -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 gPageID = "stage{ mv_ts }";| ).
_add 'var gChoiceCount = 0;'.
_add 'setHook();'.
ro_html->add( 'var gStageParams = {' ).
ro_html->add( | seed: "stage{ mv_ts }",| ).
ro_html->add( ' stageTabId: "stage_tab",' ).
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