holi

TarjetEdit.js

//Variables Globales
var color = '22E75C';
var seleccion = 0;
var tipoletra = 0;
var tamano = 0;
var tarjeta = 0;
var idtexto = 0;
var textoselected = 0;
var idtemporalimagen = 0;
var userid = 0;

//Aqui cargamos el catalogo
function CargaCatalogo() {
//cambiamos la vista al catalogo
    $('#editor').css('display','none');
    $('#visorimagenes').css('display','block');
var Tarjetas = Backbone.Collection.extend({
	url: '/catalogo'
});

//Hwertyuiqweuyuyasgd
var tarjetas = new Tarjetas();
//Hacemos un fetch del JSON, parseamos e imprimimos imagenes
tarjetas.fetch({
	success:function(){

		var tamano = tarjetas.length;
		var numerofilas = tarjetas.length / 3;

		var iniciaimpresion = 0
		for (var i = 0; i < numerofilas; i++) {
			var aleatorio = generaidtexto();
			console.log(aleatorio);
			$('#visorimagenes').append('<div class="row-fluid" id="'+aleatorio+'"></div>');
			for (var j = 0; j < 3; j++) {
				try{
				$('#'+aleatorio+'').append('<div class="span4"><h3>'+tarjetas.at(iniciaimpresion).get('nombreTarjeta')+'</h3><img src="/catalogo/'+tarjetas.at(iniciaimpresion).get('CatalogoId')+'" height="200px" width="200px"></img><p><br/><a class="btn btn-success selector" id="'+tarjetas.at(iniciaimpresion).get('CatalogoId')+'">Editar</a></p></div>');
				iniciaimpresion++;
				}catch(err){
					break;
				}
			};

		};

		$('.btn').click(function() {
			console.log(this.id);
		//Ponemos en url el editar y hacemos trigger en el metodo
    	MeisshiBackbone.navigate("editar/"+this.id+"", {
            trigger: true
            });
		});

   }}
 );
};

function PonerOpciones() {

   $('#opcioneseditor').empty();
   $('#opcioneseditor').append('<select name="letra" onchange="getCombo1(this)"> <option value="Arial" style="font-family: Arial;">Arial</option> <option value="Calibri" style="font-family: Calibri;">Calibri</option> <option value="vintage" style="font-family: vintage;">Vintage</option> <option value="beans" style="font-family: beans;">Beans</option> <option value="batman" style="font-family: batman;">Batman</option> <option value="starwars" style="font-family: starwars;">Star Wars</option> <option value="typewrite" style="font-family: typewrite;">TypeWrite</option> </select> <select name="tamano" style="width:60px;heigth:50px" onchange="getCombo2(this)"><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="20">20</option><option value="25">25</option></select>');
   $('#opcioneseditor').append('<div id="colorSelector" style="position:relative;left:290px;top:-40px"><div style="background-color: #0000ff"></div></div>');

        $('#colorSelector').ColorPicker({
	color: '#ADE6C4',
	onShow: function (colpkr) {
		$(colpkr).fadeIn(500);
		return false;
	},
	onChange: function (hsb, hex, rgb) {
		$('#colorSelector div').css('backgroundColor', '#' + hex);
                color = hex;
	}
        });
        $('#opcioneseditor').append('<button class="btn btn-success"  style="position:relative;left:330px;top:-75px" onClick="aplicar()">Aplicar</button>');
        $('#opcioneseditor').append('<button class="btn btn-danger" style="position:relative;left:335px;top:-75px" onClick="eliminar()">Eliminar</button>');
        LoadImage();

};

function LoadImage() {
	  
    idtemporalimagen = generaidtexto();
    
    var subida = $('#loadimage').upload({
        name: 'temporal',
        action: '/subetemporal',
        enctype: 'multipart/form-data',
        params: {id:idtemporalimagen},
        autoSubmit: true,
        onSubmit: function() {},
        onComplete: function() {
            
            $('#imagen').append('<img id="'+idtemporalimagen+'" src="/dametemporal/'+idtemporalimagen+'">');
            $('#'+idtemporalimagen+'').draggable();
            
            },
        onSelect: function() {}
        });
}

function insertaTexto(){
    
    idtexto = generaidtexto();
    
    var texto = $('#textoaponer').val();

  $('#imagen').append('<p id="'+idtexto+'">'+texto+'</p>');
    $('#'+idtexto+'').draggable();
    
     $('#'+idtexto+'').on('click',function (e){
          $('#dot').remove();
          textoselected = e.target.id;
         $('#'+textoselected+'').append('<img id="dot" height=16 width=16 src="/assets/images/dot.png">');               
      });
 	
 	$('#'+idtexto+'').bind('drag',function( event ){
                 $('#dot').remove();
          		textoselected = event.target.id;
    		     $('#'+textoselected+'').append('<img id="dot" height=16 width=16 src="/assets/images/dot.png">');   
                });   
};

function aplicar(){
    console.log('Letra: ' + tipoletra);
    console.log('Tamano: ' + tamano);
    
    if(tipoletra == 0){
        $('#'+textoselected+'').css('font-family','Arial');        
    }else{
        $('#'+textoselected+'').css('font-family',tipoletra);        
    }
    
    if(tamano == 0){
        $('#'+textoselected+'').css('font-size','100%');
    }else{
        $('#'+textoselected+'').css('font-size',tamano+'0%');    
    }
    
    $('#'+textoselected+'').css('color','#'+color);
    
};


function eliminar(){
    $('#'+textoselected+'').remove();
};

function getCombo1(sel) {
  tipoletra = sel.options[sel.selectedIndex].value;  
};

function getCombo2(sel) {
  tamano = sel.options[sel.selectedIndex].value;  
};

function guardarimagen(){

	$('#dot').remove();

html2canvas( [ document.getElementById('imagen') ], {
  useCORS: true,
  profile: true,
  logging: true,
  onrendered: function( canvas ) {
    saveData(canvas.toDataURL());
  }
});

 };

function saveData(dturl){
    var randomimgid = generaidtexto();
    var imagenbien = dturl.substring(22);
    console.log(imagenbien);

    FB.login(function(response) {
      if (response.status=="connected") {
        console.log("You're loggued in");
        FB.api('/me', function(response) {
      var idi = response.id;

     $.post('/guardaimagen',
            {
                usrid: idi,
                imageeid : randomimgid,
                imagen : imagenbien
            },
            function(data) { console.log('Se subio con id: ' + randomimgid + " al usuario " + idi);});
    	});
    } else {
        FB.api('/me', function(response) {
      var idi = response.id;
     $.post('/guardaimagen',
            {
                usrid: idi,
                imageeid : randomimgid,
                imagen : imagenbien
            },
            function(data) { console.log('Se subio con id: ' + randomimgid + " al usuario " + idi);});
    		});
        } 
      });
        setTimeout(function(){
                    $.post("/borraTemporal",{id:'hola'});
                    },5000);

        setTimeout(function() {
                MeisshiBackbone.navigate("MisTarjetas", {
            trigger: true
            });
        },9000);

};
     


function generaidtexto()
{
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < 30; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
};