como mejorar este editor?

Marianitalaloca · #1 (**permalink**) 17/07/2010, 12:55

Hola, estoy trabajando para hacer un editor de partituras.
Hasta hora voy bastante bien. El tema que me surge es que para guardar la partitura lo que hago es recoger con javascript el contenido que está dentro del div=area_partitura y lo mando mediante un formulario a save.php para que este guarde la id y el html que contiene este div. Las notas son todas imágenes. Por lo que entre las etiquetas y el texto y demás se hace bastante largo, cosa que el REQUEST se vuelve muy largo y el servidor me devuelve error.

¿Qué forma se les ocurre para que el código sea más chico y que no devuelve error?
En caso de que no se pueda (que creo que no), alguna sugerencia?
Acá les dejo todo el choclo del código haber que podemos hacer.

Aclaro que este post lo voy a postear en ambos foro (Javascript y PHP) ya que estoy trabajando con ambos y puedo aceptar cualquier camino posible.

Gracias.

Marianitalaloca · #2 (**permalink**) 17/07/2010, 12:59

Código:

<!DOCTYPE html>
<html>
<head>
<title>Score Editor v0.2</title>
</head>
<body onLoad=cambiar_clave('sol')>
<script LANGUAGE="JavaScript" id="acciones">
<?
if ($_REQUEST[state] == "saved"){
echo '        function getAllTags()
        {
         document.forms.formulario.action += "&html=\'"+document.getElementById(\'area_partitura\').innerHTML +"\'";
         alert(document.forms.formulario.action);
        }
';
}
else{
$_REQUEST[state] = "new";
echo '        function getAllTags()
        {
         document.forms.formulario.action += "?html=\'"+document.getElementById(\'area_partitura\').innerHTML +"\'";
         alert(document.forms.formulario.action);
        }
';
}
?>
function nuevo_p(){
         document.forms.formulario.action = "score_editor_v0_2.php";
}
function export_submit(){
         document.forms.formulario.action = "../dompdf/www/export.php?html="+document.getElementById('area_partitura').innerHTML +"'";
}

<!-- AddElement -->
function addElement(evt) {
  var charCode = (evt.charCode) ? evt.charCode : evt.keyCode;

  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById('theValue').value -1)+ 2;
  numi.value = num;
  var newdiv = document.createElement('div');
  var divIdName = 'my'+num+'Div';
  newdiv.setAttribute('id',divIdName);

switch(charCode)
{
//do#
case 115:
  newdiv.innerHTML = "<img src=../images/" +window['figura']+".gif style='position:relative; top:18px; z-index:1' id="+window['figura']+"><img src=../images/linea_add.gif style='position:relative; top:13px; left:-14px'><img src=../images/sost.gif style='position:relative; top:18px; left:-14px'>";
  break;
//re#
case 100:
  newdiv.innerHTML = "<img src=../images/" +window['figura']+".gif style='position:relative; top:13px;' id="+window['figura']+"><img src=../images/sost.gif style='position:relative; top:13px;'>";
  break;
//fa#
case 103:
  newdiv.innerHTML = "<img src=../images/" +window['figura']+".gif style='position:relative; top:3px;' id="+window['figura']+"><img src=../images/sost.gif style='position:relative; top:3px>";
  break;
//sol#
case 104:
  newdiv.innerHTML = "<img src=../images/" +window['figura']+".gif style='position:relative; top:-2px;' id="+window['figura']+"><img src=../images/sost.gif style='position:relative; top:-2px>";
  break;
//la#
case 106:
  newdiv.innerHTML = "<img src=../images/" +window['figura']+".gif style='position:relative; top:-7px;' id="+window['figura']+"><img src=../images/sost.gif style='position:relative; top:-7px>";
  break;
//do
case 122:
  newdiv.innerHTML = "<img src=../images/" +window['figura']+".gif style='position:relative; top:18px; z-index:1' id="+window['figura']+"><img src=../images/linea_add.gif style='position:relative; top:13px; left:-14px'><img src=../images/linea_add.gif style='position:relative; top:3px; left:-14px'>";
  break;
//re
case 120:
  newdiv.innerHTML = "<img src=../images/" +window['figura']+".gif style='position:relative; top:13px;' id="+window['figura']+"><img src=../images/linea_add.gif style='position:relative; top:3px; left:-14px'><img src=../images/linea_add.gif style='position:relative; top:3px; left:-14px'>";
  break;
//mi
case 99:
  newdiv.innerHTML = "<img src=../images/" +window['figura']+".gif style='position:relative; top:8px;' id="+window['figura']+"><img src=../images/linea_add.gif style='position:relative; top:3px; left:-14px'><img src=../images/linea_add.gif style='position:relative; top:3px; left:-14px'>";
  break;
//fa
case 118:
  newdiv.innerHTML = "<img src=../images/" +window['figura']+".gif style='position:relative; top:3px;' id="+window['figura']+"><img src=../images/linea_add.gif style='position:relative; top:3px; left:-14px'><img src=../images/linea_add.gif style='position:relative; top:3px; left:-14px'>";
  break;
//sol
case 98:
  newdiv.innerHTML = "<img src=../images/" +window['figura']+".gif style='position:relative; top:-2px;' id="+window['figura']+"><img src=../images/linea_add.gif style='position:relative; top:3px; left:-14px'><img src=../images/linea_add.gif style='position:relative; top:3px; left:-14px'>";
  break;
//la
case 110:
  newdiv.innerHTML = "<img src=../images/" +window['figura']+".gif style='position:relative; top:-7px;' id="+window['figura']+"><img src=../images/linea_add.gif style='position:relative; top:3px; left:-14px'><img src=../images/linea_add.gif style='position:relative; top:3px; left:-14px'>";
  break;
//si
case 109:
  newdiv.innerHTML = "<img src=../images/" +window['figura']+".gif style='position:relative; top:-12px;' id="+window['figura']+"><img src=../images/linea_add.gif style='position:relative; top:3px; left:-14px'><img src=../images/linea_add.gif style='position:relative; top:3px; left:-14px'>";
  break;
// (linea_divs)
case 47:
  newdiv.innerHTML = "<img src=../images/linea_divs.gif height='38px'>";
  break;
default:
  newdiv.innerHTML = charCode;
}

  ni.appendChild(newdiv);
}
document.onkeypress=addElement
</script>

<script LANGUAGE="JavaScript" id="funciones_menu">
function cambiar_ffamily(element,f_family){
if(element == "area_titulo"){
    var indice = document.formulario.font_titulo.selectedIndex 
    var valor = document.formulario.font_titulo.options[indice].text;
}
if(element == "area_autor"){
    var indice = document.formulario.font_autor.selectedIndex 
    var valor = document.formulario.font_autor.options[indice].text;
}
    document.getElementById(element).style.fontFamily= valor;
}

function cambiar_bold(element,est,boldw){
if(est == 'on'){
 document.getElementById(element).style.fontWeight="bold";
 document.getElementById(boldw).innerHTML= "<a href=javascript:; onClick=cambiar_bold('"+element+"','off','"+boldw+"') id=boldw><img src=../icons/text_bold.png class='button'></a>";
}
if(est == 'off'){
 document.getElementById(element).style.fontWeight="normal";
 document.getElementById(boldw).innerHTML= "<a href=javascript:; onClick=cambiar_bold('"+element+"','on','"+boldw+"') id=boldw><img src=../icons/text_bold.png class='button'></a>";
}
}

function cambiar_italic(element,est,italicw){
if(est == 'on'){
 document.getElementById(element).style.fontStyle="italic";
 document.getElementById(italicw).innerHTML= "<a href=javascript:; onClick=cambiar_italic('"+element+"','off','"+italicw+"') id=italicw><img src=../icons/text_italic.png class=button></a>";
}
if(est == 'off'){
 document.getElementById(element).style.fontStyle="normal";
 document.getElementById(italicw).innerHTML= "<a href=javascript:; onClick=cambiar_italic('"+element+"','on','"+italicw+"') id=italicw><img src=../icons/text_italic.png class=button></a>";
}
}

function cambiar_underline(element,est,underlinew){
if(est == 'on'){
 document.getElementById(element).style.textDecoration="underline";
 document.getElementById(underlinew).innerHTML= "<a href=javascript:; onClick=cambiar_underline('"+element+"','off','"+underlinew+"') id=underlinew><img src=../icons/text_underline.png class=button></a>";
}
if(est == 'off'){
 document.getElementById(element).style.textDecoration="none";
 document.getElementById(underlinew).innerHTML= "<a href=javascript:; onClick=cambiar_underline('"+element+"','on','"+underlinew+"') id=underlinew><img src=../icons/text_underline.png class=button></a>";
}
}
</script>
<div style=width:100% id=content>
<?
echo "<form id=formulario name=formulario method='post' action='save.php'>
";
if(isset($_GET[id])){
echo "<input type=hidden id=id name=id value='".$_GETT[id]."'>
<script>document.forms.formulario.action += '?id=".$_GET[id]."'</script>";
}
?>
<input type="hidden" value="0" id="theValue" />

<input type="image" value="GUARDAR" src="../icons/disk.png" border="0" alt="Guardar..." name="submit" onClick=getAllTags() /> 

<input type="image" value="Nuevo" src="../icons/page.png" border="0" alt="Nuevo..." name="nuevo" onClick=nuevo_p() /> 

<?
if (isset($_REQUEST[state]) && $_REQUEST[state] == "saved"){
include ('config.php');
$sql = mysql_query("SELECT html FROM partituras WHERE id = '$_REQUEST[id]'") or die ("ERROR");
while ($row = mysql_fetch_array($sql)){

echo '<input type="image" value="EXPORTAR A PDF" src="../icons/disk.png" border="0" alt="Exportar a PDF..." name="export" onClick=export_submit() /> ';
}
}
else{
echo '<a href="javascript: alert(\'Tienes que guardar el archivo antes de exportarlo\')">PDF</a>';
}
?>

<!--AUTOR -->
<div id="menu_autor" class="menu">
Autor: <a href="javascript:;" onclick="cambiar_autor()"><img src=../icons/application_edit.png class=button></a>

<span id=bold_autor>
<a href="javascript:;" onClick="cambiar_bold('area_autor','on','bold_autor')">
<img src=../icons/text_bold.png class="button" id="autor_bold"></a></span>

<span id=italic_autor>
<a href="javascript:;" onClick="cambiar_italic('area_autor','on','italic_autor')">
<img src=../icons/text_italic.png class="button" id="autor_italic"></a></span>

<span id=underline_autor>
<a href="javascript:;" onClick="cambiar_underline('area_autor','on','underline_autor')">
<img src=../icons/text_underline.png class="button" id="autor_underline"></a></span>
</div>

</div>
</div>

</div>
<div id=area_partitura>
<?
if(isset($_GET['id'])){
include("config.php");
$sql = "SELECT * FROM partituras WHERE id='$_GET[id]'";
 $result = mysql_query($sql) or die("La siguiente consulta contiene algún error");

while ($row = mysql_fetch_array($result)){
echo $row['html'];
}
}
else{
echo'<div id=area_titulo>Defaut Titulo</div>

<div id="area_prop">
<div id="area_tempo"> </div>
<div id="area_autor">By Me</div>
</div>

<div id="myDiv" class=pentagrama>

<div id=area_clave> </div>
<div id="area_compas">
<div id="area_numerador">3</div>
<div id="area_denominador">4</div>


</div>';
}
?>
</div>

</form>
<br>
</body></html>