From b88249d0c954cc17fbfa3a61e34f8cb4138a4fb0 Mon Sep 17 00:00:00 2001 From: Ben Klang Date: Wed, 16 Nov 2005 01:34:59 +0000 Subject: [PATCH] Sure you can spend 3 days figuring out percieved inconsistencies between Konq/FF and IE/Opera. And sure valuable research was done. Over 3 days. And then the problem is a missing '>' that even tidy didn't seem to catch. This commit works in FF/Konq/IE (and probably Opera). You could argue it does things the "right" way in that instead of stuffing a whole table's worth of divs with innerHTML it actually constructs the elements using the DOM. Some bugs remain but this is good code. And I'm frustrated as hell after 3 days of wheel spinning. git-svn-id: https://svn.alkaloid.net/gpl/shout/trunk@96 06cd67b6-e706-0410-b29e-9de616bca6e9 --- andrew.webprj | 14 +-- lib/Dialplan.php | 2 +- templates/dialplan/manager.inc | 7 +- templates/javascript/dialplan.js | 182 ++++++++++++++++++++++++++++++--------- 4 files changed, 157 insertions(+), 48 deletions(-) diff --git a/andrew.webprj b/andrew.webprj index 49f0b9919..43c40b8a1 100644 --- a/andrew.webprj +++ b/andrew.webprj @@ -1,6 +1,6 @@ - + -//w3c//dtd xhtml 1.0 strict//en @@ -11,7 +11,7 @@ - + @@ -60,7 +60,7 @@ - + @@ -85,12 +85,12 @@ - + - + @@ -125,8 +125,8 @@ - - + + diff --git a/lib/Dialplan.php b/lib/Dialplan.php index 125bd8588..26cce25b1 100644 --- a/lib/Dialplan.php +++ b/lib/Dialplan.php @@ -200,7 +200,7 @@ class Shout_Dialplan $e = 0; foreach($this->_dialplan['extensions'] as $extension => $priorities) { print '
'; print '
+ + \ No newline at end of file diff --git a/templates/javascript/dialplan.js b/templates/javascript/dialplan.js index 6b10ca93c..c41f3c57c 100644 --- a/templates/javascript/dialplan.js +++ b/templates/javascript/dialplan.js @@ -23,10 +23,15 @@ function Dialplan(instanceName) this.object = 'shout_dialplan_object_'+instanceName; this.curExten = ''; this.curPrio = ''; + this.dom = new Array(); // Store rendered elements for IE + for (var e in this.dp) { + this.dom[e] = new Array(); + } } Dialplan.prototype.highlightExten = function(exten) { + this.drawPrioTable(exten); if (this.curExten && this.curExten != exten) { this.deactivatePriority(); @@ -35,8 +40,8 @@ Dialplan.prototype.highlightExten = function(exten) } this.curExten = exten; - document.getElementById("eBox-" + exten).className = 'extensionBoxHighlight'; - document.getElementById("pList-" + exten).className = 'pListHighlight'; + document.getElementById('eBox-' + exten).className = 'extensionBoxHighlight'; + document.getElementById('pList-' + exten).className = 'pListHighlight'; } @@ -48,14 +53,13 @@ Dialplan.prototype.activatePriority = function(exten, prio) if (this.curExten) { this.deactivatePriority(); } - if (exten != this.curExten) { this.highlightExten(exten); } this.curPrio = prio; - document.getElementById('priority-'+exten+'-'+prio).className = 'priorityHighlight'; - document.getElementById('pButtons-'+exten+'-'+prio).style['visibility'] = 'visible'; + this.dom[exten][prio]['priority'].className = 'priorityHighlight'; + this.dom[exten][prio]['pButtons'].style['visibility'] = 'visible'; } else { var form = ''; @@ -63,17 +67,17 @@ Dialplan.prototype.activatePriority = function(exten, prio) form += ' '; form += ' '; - document.getElementById('pBox-'+this.curExten+'-'+this.curPrio).innerHTML = form; - document.getElementById('pBox-'+this.curExten+'-'+this.curPrio).p.focus; - document.getElementById('pBox-'+this.curExten+'-'+this.curPrio).p.select; + this.dom[exten][prio]['pBox'].innerHTML = form; + this.dom[exten][prio]['pBox'].p.focus; + this.dom[exten][prio]['pBox'].p.select; } } Dialplan.prototype.deactivatePriority = function() { if (this.curPrio && document.getElementById('pButtons-'+this.curExten+'-'+this.curPrio)) { - document.getElementById('priority-'+this.curExten+'-'+this.curPrio).className = 'priority'; - document.getElementById('pButtons-'+this.curExten+'-'+this.curPrio).style['visibility'] = 'hidden'; + this.dom[this.curExten][this.curPrio]['priority'].className = 'priority'; + this.dom[this.curExten][this.curPrio]['pButtons'].style['visibility'] = 'hidden'; } this.curPrio = 0; } @@ -85,37 +89,137 @@ Dialplan.prototype.drawPrioTable = function (exten) alert('Must first choose an extension to draw'); return false; } + + var pList = document.getElementById('pList-'+exten); + + // Prune all children so we render a clean table + while(pList.childNodes[0]) { + pList.removeChild(pList.childNodes[0]); + } + for (var p in this.dp[exten]['priorities']) { - table += '
\n'; - table += ' \n'; - table += ' +\n'; - table += ' -\n'; - table += ' \n'; - table += ' \n'; - table += ' '+p+'\n'; - table += ' \n'; - table += ' \n'; - table += ' \n'; - table += ' \n'; - table += ' \n'; - table += ' \n'; - table += ' \n'; - table += ' '; - table += this.dp[exten]['priorities'][p]['args']+'\n'; - table += ' \n'; - table += '
\n'; +// table += '
\n'; + var priority = document.createElement('div'); + priority.className = 'priority'; + priority.id = 'priority-' + exten + '-' + p; + pList.appendChild(priority); + this.dom[exten][p] = new Array(); + this.dom[exten][p]['priority'] = priority; + +// table += ' \n'; + var pButtons = document.createElement('span'); + pButtons.className = 'pButtons'; + pButtons.id = 'pButtons-' + exten + '-' + p; + priority.appendChild(pButtons); + this.dom[exten][p]['pButtons'] = pButtons; + +// table += ' +\n'; + var button = document.createElement('span'); + button.className = 'add'; + button.id = 'pButton-add-'+exten+'-'+p; + button.dp = this; + button.exten = exten; + button.prio = p; + button.addPrio = function () { this.dp.addPrio(this.exten, this.prio); } + button.onclick = button.addPrio; + button.innerHTML='+'; + pButtons.appendChild(button); + this.dom[exten][p]['pButton-add'] = button; + +// table += ' -\n'; + var button = document.createElement('span'); + button.className = 'remove'; + button.id = 'pButton-del-'+exten+'-'+p; + button.dp = this; + button.exten = exten; + button.prio = p; + button.delPrio = function () { this.dp.delPrio(this.exten, this.prio); } + button.onclick = button.delPrio; + button.innerHTML='-'; + pButtons.appendChild(button); + this.dom[exten][p]['pButton-del'] = button; + +// table += ' \n'; + +// table += ' \n'; + var pElement = document.createElement('span'); + pElement.className = 'pElement'; + pElement.id = 'pBox-'+exten+'-'+p; + // The next 5 lines are hijinks required to make the highlighting work properly. We + // have to save a reference to this object in the pElement object so we can call back + // into the activate/deactivate routines. We also have to save the prio and exten because + // the onclick assignment has to be a function reference which takes no arguments. + // See above and below comments disparaging javascript. + pElement.dp = this; + pElement.exten = exten; + pElement.prio = p; + pElement.activate = function () { this.dp.activatePriority(this.exten, this.prio); } + pElement.onclick = pElement.activate; + priority.appendChild(pElement); + this.dom[exten][p]['pBox'] = pElement; + +// table += ' '+p+'\n'; + var priorityBox = document.createElement('span'); + priorityBox.className = 'priorityBox'; + priorityBox.innerHTML = p; + pElement.appendChild(priorityBox); + +// table += ' \n'; + +// table += ' \n'; + var pElement = document.createElement('span'); + pElement.className = 'pElement'; + pElement.id = 'pApp-' + exten + '-' + p; + priority.appendChild(pElement); + this.dom[exten][p]['pApp'] = pElement; + +// table += ' \n'; + var applicationBox = document.createElement('span'); + applicationBox.className = 'applicationBox'; + applicationBox.id = 'applicationBox-' + exten + '-' + p; + pElement.appendChild(applicationBox); + this.dom[exten][p]['applicationBox'] = applicationBox; + + var selectHTML = ''; + selectHTML += ' \n'; + applicationBox.innerHTML = selectHTML; + +// table += ' \n'; +// table += ' \n'; + +// table += ' \n'; + var pElement = document.createElement('span'); + pElement.className = 'pElement'; + pElement.id = 'pArgs-' + exten + '-' + p; + priority.appendChild(pElement); + this.dom[exten][p]['pArgs'] = pElement; + +// table += ' '; +// table += this.dp[exten]['priorities'][p]['args']+'\n'; + var argsBox = document.createElement('span'); + argsBox.className = 'argBox'; + argsBox.id = 'argsBox-' + exten + '-' + p; + argsBox.innerHTML = this.dp[exten]['priorities'][p]['args']; + pElement.appendChild(argsBox); + this.dom[exten][p]['argsBox'] = argsBox; + +// table += ' \n'; +// table += '
\n'; } - document.getElementById('pList-'+exten).innerHTML = table; +// document.getElementById('pList-'+exten).innerHTML = table; } Dialplan.prototype.genAppList = function (app) -- 2.11.0