1/** 2 * jPageFlip 3 * 4 * @url: http://jpageflip.just-page.de 5 * @author : Erik Stelzer 6 * @version : 0.9.1 7 * 8 * Copyright 2010, Erik Stelzer 9 * Free to use and abuse under the MIT license. 10 * http://www.opensource.org/licenses/mit-license.php 11 * Modified by Puri Garcia Romeralo, april 2012 12**/ 13 14 15(function($){ 16 $.jPageFlip = function(el, options){ 17 18 19 $.jPageFlip.defaultOptions = { 20 pageAnimation : true, 21 animationSpeed : 5, 22 animationDynamic : 10, 23 cornerSize : 50, 24 showCorner : false, 25 cornerColor : '#ffffff', 26 cornerAlpha : 0.3, 27 left : 0, 28 top : 0, 29 startPage : 1, 30 shadowWidth : 15, 31 shadowOpacity : 0.3, 32 flipOnClick : true, 33 width: 0, 34 height: 0, 35 defaultValueTipsy: {title: 'title', gravity: 's', html: true,cssClass:'jpftipsy'} 36 }; 37 var base = this; 38 39 base.$el = $(el); 40 base.el = el; 41 base.$container = base.$el.closest('#jpfBody'); 42 43 $('.jpfLoader',base.$container).show().css({'z-index':'999'}); 44 $('.jpfContainer',base.$container).fadeOut(); 45 46 //indicamos si hay animacion, si hemos ampliado el ebook ya no habria 47 var jpfAnimation=true; 48 //input y controles de la navegacion de las paginas en la parte de arriba 49 var jpfContainer=$('div.jpfContainer',base.$container); 50 var jpfDivForMove=$("div.jpfDivForMove",base.$container); 51 var jpfDivForMoveContainer=$(".jpfDivForMoveContainer",base.$container); 52 var jpfContainerInner=$("div.jpfContainerInner",base.$container); 53 var jpfTopContainerInner=$("div.jpfTopContainerInner",base.$container); 54 var jpfBottomContainerInner=$("div.jpfBottomContainerInner",base.$container); 55 var jpfTopContainer=$("div.jpfTopContainer",base.$container); 56 var jpfBottomContainer=$("div.jpfBottomContainer",base.$container); 57 var jpfLoader=$('div.jpfLoader',base.$container); 58 var jpfRightContainer=$('div.jpfRightContainer',base.$container); 59 var jpfLeftContainer=$('div.jpfLeftContainer',base.$container); 60 var jpfFirst=$("a.jpfFirst",base.$container); 61 var jpfPrev= $("a.jpfPrev,a.jpfPrevBig",base.$container); 62 var jpfNext= $("a.jpfNext,a.jpfNextBig",base.$container); 63 var jpfLast= $("a.jpfLast",base.$container); 64 var jpfNavFormPages= $("form.jpfNavFormPages",base.$container); 65 var jpfNavFormPagesInput=$("input.jpfNavFormPagesInput",base.$container); 66 var jpfNavFormGoTo= $("form.jpfNavFormGoTo",base.$container); 67 var jpfNavFormGoToButton=$("div.jpfNavFormGoToDiv button.jpfNavFormGoToButton",base.$container); 68 var jpfNavFormGoToInput= $("input.jpfNavFormGoToInput",base.$container); 69 var jpfFullscreenButton= $("a.jpfFullscreen",base.$container); 70 var jpfThumbnailsButton= $("a.jpfThumbnails",base.$container); 71 var jpfPrintLeftButton= $("a.jpfPrintleft",base.$container); 72 var jpfPrintRightButton= $("a.jpfPrintright",base.$container); 73 var jpfDownloadPdfButton= $("a.jpfDownloadPdf",base.$container); 74 var jpfPlayButton= $("a.jpfPlay",base.$container); 75 var jpfPauseButton= $("a.jpfPause",base.$container); 76 var jpfDraggerAutoFlip= $("span.jpfDraggerAutoFlip",base.$container); 77 var jpfSliderAutoFlip= $("span.jpfSliderAutoFlip",base.$container); 78 var jpfDraggerZoom= $("span.jpfDraggerZoom",base.$container); 79 var jpfSliderZoom= $("span.jpfSliderZoom",base.$container); 80 var jpfZoomEscale= $("span.jpfZoomEscale",base.$container); 81 var jpfZoomMas= $("a.jpfZoomMas",base.$container); 82 var jpfZoomMinus= $("a.jpfZoomMinus",base.$container); 83 84 85 var jpfTheRel = base.$el.attr("data-jpageflip"); 86 // We have decoded all info-photo 87 var infoJPageFlip = decodeMap(jpfTheRel.substring(9)); 88 // Extract all parameters needed for AJAX load. 89 //en el heigth y width nos devuelve el tamaño de la ventana del prettyphoto 90 var jpfPath = infoJPageFlip['path']; 91 var jpfWidthPP = infoJPageFlip['width']; 92 var jpfHeightPP = infoJPageFlip['height']; 93 94 //espacio que tenemos para la revista 95 var jpfHeightDefault; 96 var jpfWidthDefault; 97 98 //separacion de arriba del ebook dentro de la capa jpfInner.(la mitad de su padding) 99 var jpfTopDefault; 100 101 //guardamos lo que ocupa la cabecera, el pie y el padding del jpfInner 102 var jpfCabecera; 103 var jpfPie; 104 var jpfMiddlePadding; 105 var jpfLatDerecha; 106 var jpfLatIzquierda; 107 108 109 110 // ****************************************************************************** 111 // Declarar e inicializar las variables 112 // ****************************************************************************** 113 base.$el.data("jPageFlip", base); 114 var ctx = new Object(); 115 var ctx2 = new Object(); 116 var contentX; 117 var contentY; 118 var iWidth; 119 var iHeight; 120 var iWidthWithoutZoom; 121 var iHeightWithoutZoom; 122 var contentXWithoutMove; 123 var contentYWithoutMove; 124 var contentXWithoutZoom; 125 var contentYWithoutZoom; 126 var innerMx; 127 var innerMy; 128 var outerMx; 129 var outerMy; 130 //cÃrculo exterior 131 var outerRadius; 132 var mouseAbsX; 133 var mouseAbsY; 134 var mouseRelCenterX = 0; 135 var mouseRelCenterY = 0; 136 var newPosX = innerMx + mouseRelCenterX; 137 var newPosY = mouseRelCenterY; 138 var is_mouseDown = false;
139 var degHelp = Math.PI/180; 140 var CX; 141 var CY; 142 var MCX = 0; 143 var MCY = 0; 144 var r1x = 0; 145 var r1y = 0; 146 var r2x = 0; 147 var r2y = 0; 148 var T1C = 0; 149 var T1X = 0; 150 var T1Y = 0; 151 var T2X = 0; 152 var T2Y = 0; 153 var T1YRel = 0; 154 var CLeftCX = 0; 155 var T2CX = 0; 156 var T2CY = 0; 157 var angleClip = 0; 158 var angleImage = 0; 159 var isFlipped = false; 160 //página actual 161 var actPage; 162 var flipDirection = 0; 163 var takePage; 164 var dropPage; 165 var z = 0; 166 var dynamicHelp = 0; 167 var tabCorner = false; 168 var angleCXMCY = 0; 169 var angleT1XT1Y = 0; 170 var isMouseInCorner = false; 171 var gradient = new Object(); 172 //un array de arrays, para guardar las imagenes en diferentes tamaños 173 var flipImage = new Array(); 174 flipImage[0] = new Array(); 175 flipImage[1] = new Array(); 176 flipImage[2] = new Array(); 177 //array que guarda los src de las imagenes 178 var flipImageSrc = new Array(); 179 //array para indicar si la imagen en miniatura está cargada o no 180 var flipThumbnails=new Array(); 181 var imgFlipFrontRight = new Image(); 182 var imgFlipBackRight = new Image(); 183 var imgFlipFrontLeft = new Image(); 184 var imgFlipBackLeft = new Image(); 185 var interval; 186 var video = new Object(); 187 var _timer; 188 var lastPageOdd; 189 var lastPage; 190 var valueTipsy; 191 var realHeight; 192 var realWidth; 193 //detecta si se ha hecho click en las controles de arriba de primero, prev, next y ultimo 194 var jpfFirstClick=false; 195 var jpfPrevClick=false; 196 var jpfNextClick=false; 197 var jpfLastClick=false; 198 //indica si la presentacion ha empezado 199 var modoPresentacion=false; 200 //setInterval para la presentacion 201 var cicloPresentacion; 202 203 var lugarDragerMoveX, lugarDragerMoveY, rightLimit, leftLimit; 204 205 var lugarDragerZoom=0; 206 var lugarDragerAutoflip=0; 207 var posDragerAutoflip=0; 208 var velAutoflip=[6000,5000,4000,3000,2000]; 209 //cada cuanto se mueve una pagina en la presentacion 210 var tiempoCicloPresentacion; 211 //detectamos en que rango esta el tamaño de la pagina, para tenerlo en cuenta a la hora de pasar las páginas en la presentación 212 var sizePage; 213 214 //indica si los botones estan deshabilitados, debido a la presentacion o a las miniaturas 215 var jpfButtonsDisability1=false; 216 //indica si los botones estan deshabilitados, debido a que la pagina esta en movimiento 217 var jpfButtonsDisability2=false; 218 //se utilizan para mover la capa las revistas. 219 //los absolutos es lo que se mueve respecto a dond estaba al principio 220 //relativo lo que se ha movido respecto la ultima vez que se movio 221 var moveYEbookAbs=0; 222 var moveYEbookRel=0; 223 var moveXEbookAbs=0; 224 var moveXEbookRel=0; 225 //necesaria para calcular la posicion absolute segun movemos 226 var moveXEbookAbsIni=0; 227 var moveYEbookAbsIni=0; 228 229 //indica si estamos en modo ampliado 230 var modoZoom=false; 231 232 //indica si en el momento actual la imagen se esta ampliando 233 var isExpanding=false; 234 235 //indica en la escala de zoom que estamos 236 var escalaJpf=1; 237 //para indicar en que nivel de zoom estamos. 238 //cargamos imagenes ampliadas bajo demanda. Se utiliza para eso 239 var nivelZoom=0; 240 241 var modoPantallaCompleta=false; 242 if(base.$container.attr("class")=="fullWindow")modoPantallaCompleta=true; 243 244 var modoMiniaturas=false; 245 var anchoFlechasThumbnails=40; 246 247 //indica que el click se ha hecho desde un boton externo, no desde la paginas del ebook. 248 //para que aunque movamos el raton, no entra a valorar si el raton está en la esquina (ismouseincorner) 249 var clickFromExternalButtons = false; 250 251 252 //en chrome a veces tarda muy poco en cargar las imagenes, para que no llame dos veces a esta funcion 253 var llamarMostrarEbook=false; 254 // ****************************************************************************** 255 // Cargar imágenes 256 // ****************************************************************************** 257 base.getImages = function() { 258 var h; 259 //flipImage[0] = new Image(); 260 //flipImage[0]['src'] = 'images/clearpixel.gif'; 261 $.each(base.$el.find('.jPageFlip'), function(i) { 262 //Todo: ejecutarlo más tarde. problemas al cargar en chrome 263 //prueba !!!!! 264 //Todas las imágenes en el lienzo Ocultar" 265 $(this).css('display','none'); 266 267 /*if (this.nodeName == 'IMG') 268 flipImage[i] = new Image(); 269 else if (this.nodeName == 'VIDEO') 270 flipImage[i] = new Object();*/ 271 flipImage[0][i]["src"] = this.src; 272 flipImage[0][i] = this; 273 274 flipImage[1][i]["src"] = this.src; 275 flipImage[1][i] = this; 276 277 flipImage[2][i]["src"] = this.src; 278 flipImage[2][i] = this; 279 }); 280 281 282 283 flipImage[0][flipImage[0].length] = new Image(); 284 flipImage[1][flipImage[1].length] = new Image(); 285 flipImage[2][flipImage[2].length] = new Image(); 286 287 flipImage[0][flipImage[0].length-1]['src'] = _rootWeb+'/javaScript/jpageflip/images/clearpixel.gif'; 288 flipImage[1][flipImage[1].length-1]['src'] = _rootWeb+'/javaScript/jpageflip/images/clearpixel.gif'; 289 flipImage[2][flipImage[2].length-1]['src'] = _rootWeb+'/javaScript/jpageflip/images/clearpixel.gif'; 290
291 //inicializamos a false, para indicar que en principio no hay ninguna miniatura cargada 292 for(i=0;i<flipImage[0].length-1;i++){ 293 //el 0 tambien lo ponemos a false, aunque no lo vamos a utilizar 294 flipThumbnails[i]=false; 295 } 296 297 var help1 = 0; 298 var help2 = 0; 299 300 //Calculamos el tamaño que deben de tener las hojas y el top y left para entrar en el espacio que tenemos 301 base.calculateSizePosPage(); 302 303 imgFlipBackLeft = base.getImage(actPage-1); 304 imgFlipFrontLeft = base.getImage(actPage-1); 305 imgFlipFrontRight = base.getImage(actPage); 306 imgFlipBackRight = base.getImage(actPage+1); 307 308 //asi es como se calculaba antes el width, heigth, top,left lo de por defecto o lo que daba el usuario 309 //Ahora el usuario no tiene control. se calcula 310 //iHeight = base.options.height; 311 //iWidth = base.options.width; 312 //base.preloadImage(); 313 314 //establezco tamaño de las flechas, contenedor... 315 base.setSizeEnvironment(); 316 317 //ultima pagina 318 lastPage=flipImage[0].length-2; 319 320 //ultima pagina. pero si tiene paginas impares le sumamos 1 (se necesita que sea un numero impar) 321 lastPageOdd=(((flipImage[0].length-2)%2) == 0)?flipImage[0].length-1:flipImage[0].length-2; 322 323 base.initializeContent(); 324 325 // Asignación de la ayuda de la precarga (de lo contrario, posiblemente, la primera llamada se muestra nada) 326 flipImage[0][actPage-1].src = imgFlipFrontLeft.src; 327 flipImage[0][actPage].src = imgFlipFrontRight.src; 328 329 base.showActualPage(); 330 base.showButtonsPageFlip(); 331 base.calculateSizeDivForMove(); 332 base.zIndexDivForMove(); 333 334 //nada mas cargar el libro las flechas de first y prev (siempre estan deshabilitadas), no tienen que tener eventos en el hover ni al entrar ni al salir (porque si se deja el de salir da error porque no exite elemento tip) 335 jpfFirst.unbind('mouseenter mouseleave'); 336 jpfPrev.unbind('mouseenter mouseleave'); 337 jpfPrintLeftButton.unbind('mouseenter mouseleave'); 338 jpfPauseButton.css({'display':'none'}).unbind('mouseenter mouseleave'); 339 jpfDraggerAutoFlip.css({'opacity':'0.3','cursor':'default'}); 340 jpfSliderAutoFlip.css({'opacity':'0.3'}); 341 base.disabledZoomButton(jpfZoomMinus); 342 jpfZoomMinus.unbind('mouseenter mouseleave'); 343 } 344 345 // ****************************************************************************** 346 // Image-Preload 347 // ****************************************************************************** 348 var help1 = 0; 349 var help2 = 0; 350 var t1; 351 base.preloadImage = function() { 352 window.clearTimeout(t1); 353 flipImage[0][actPage-1].onload = function() { 354 // Lea anchura y la altura 355 help2 = 1; 356 } 357 358 flipImage[0][actPage].onload = function() { 359 // Lea anchura y la altura 360 help1 = 1; 361 362 } 363 //iHeight = flipImage[0][actPage-1].height; 364 //iWidth = flipImage[0][actPage-1].width; 365 iHeight = base.options.height; 366 iWidth = base.options.width; 367 if ((iHeight == 0) || (iWidth == 0) || (help1 == 0) || (help2 == 0)) { 368 t1 = window.setTimeout(function() {base.preloadImage()}, 10); 369 } 370 //else 371 base.initializeContent(); 372 } 373 374 // ****************************************************************************** 375 // inicializar la página 376 // ****************************************************************************** 377 base.init = function(){ 378 // Los parámetros opcionales para inicializar 379 base.options = $.extend({},$.jPageFlip.defaultOptions, options); 380 // Canvas-Position fija 381 //ahora se calculan en base.calculateSizePosPage() 382 //contentX = base.options.left; 383 //contentY = base.options.top; 384 385 //actPage = base.options.startPage; 386 //por defecto ponemos que startPage sea 1. 387 //y luego más adelante vamos a la pagina que se indica como inicial base.goToStartPage. 388 //si la ponemos aqui directamente no funciona bien 389 actPage=1; 390 391 392 //valores por defecto par el tipsy 393 valueTipsy=base.options.defaultValueTipsy; 394 395 //llamada ajax al ebookconfig.xml para coger los datos necesarios 396 $.ajax({ 397 type: 'GET', 398 url: jpfPath, 399 success: function(xml) { 400 var _src; 401 var xmlResp = $("PageflipDataSet", xml); 402 //var _src=''; 403 /*$("PageData", xmlResp).each(function(i) { 404 _src = ($(this).attr('PageImage') != undefined)?$(this).attr('PageImage'):''; 405 base.$el.append('<img src="'+_src+'" class="jPageFlip jPageFlip'+i+'" alt="" />'); 406 });*/ 407 408 //para la imagen que ya va cargada en el en js 409 flipImage[0][0] = new Image(); 410 flipImage[1][0] = new Image(); 411 flipImage[2][0] = new Image(); 412 flipImageSrc[0]=""; 413 414 $("PageData", xmlResp).each(function(i) { 415 flipImage[0][i+1] = new Image(); 416 flipImage[1][i+1] = new Image(); 417 flipImage[2][i+1] = new Image(); 418 flipImageSrc[i+1] = ($(this).attr('PageImage') != undefined)?$(this).attr('PageImage'):''; 419 }); 420 421 base.$el.append('<img src="'+flipImageSrc[1]+'" class="jPageFlip jPageFlip1" alt="" />'); 422 423 424 $('.jpfHead',base.$container).append('<img src="'+$("Settings", xmlResp).attr('LogoPath')+'" class="logoPathJPF" alt="" />'); 425 jpfFirst.attr('title',$("Language", xmlResp).attr('FirstPageButtonHelp')); 426 jpfPrev.not('.jpfPrevBig').attr('title',$("Language", xmlResp).attr('Thumbn
426ailPreviousPageButtonHelp')); 427 jpfNext.not("a.jpfNextBig").attr('title',$("Language", xmlResp).attr('NextPageButtonHelp')); 428 jpfLast.attr('title',$("Language", xmlResp).attr('LastPageButtonHelp')); 429 $('.jpfBottom span.jpfNavFormGoToLabel',base.$container).text($("Language", xmlResp).attr('GotoPageText')); 430 $('.jpfBottom span.jpfNavFormGoToButtonText',base.$container).text($("Language", xmlResp).attr('GotoPageButton')); 431 432 if(modoPantallaCompleta)jpfFullscreenButton.attr('title',$("Language", xmlResp).attr('FullScreenOnButtonHelp')); 433 else jpfFullscreenButton.attr('title',$("Language", xmlResp).attr('FullScreenOffButtonHelp')); 434 435 jpfThumbnailsButton.attr('title',$("Language", xmlResp).attr('ThumbnailButtonHelp')); 436 jpfPrintLeftButton.attr('title',$("Language", xmlResp).attr('PrintLeftButtonHelp')); 437 jpfPrintRightButton.attr('title',$("Language", xmlResp).attr('PrintRightButtonHelp')); 438 jpfDownloadPdfButton.attr('title',$("Language", xmlResp).attr('PDFButtonHelp')); 439 jpfPlayButton.attr('title',$("Language", xmlResp).attr('StartAutoFlipHelp')); 440 jpfPauseButton.attr('title',$("Language", xmlResp).attr('StopAutoFlipHelp')); 441 jpfZoomMas.attr('title',$("Language", xmlResp).attr('ZoomInButtonHelp')); 442 jpfZoomMinus.attr('title',$("Language", xmlResp).attr('ZoomOutButtonHelp')); 443 444 jpfDownloadPdfButton.attr('href',$("Settings", xmlResp).attr('PDFlink')); 445 446 //estilo especial para firefox y chrome 447 if($.browser.mozilla) { 448 $('span.jpfNavFormGoToButtonText',jpfNavFormGoToButton).css({'padding-top':'0.1em','width':'35px'}); 449 } 450 if ($.browser.webkit) { 451 jpfNavFormGoToButton.css({'padding-top':'0.2em'}); 452 $('span.jpfNavFormGoToButtonText',jpfNavFormGoToButton).css({'padding-top':'0.1em'}); 453 } 454 455 //guardamos el tamaño real de la imagen 456 $("img.jPageFlip1", base.$el).load(function() { 457 realHeight = this.height; 458 realWidth = this.width; 459 // Cargar imágenes 460 base.getImages(); 461 }); 462 } 463 }); 464 // Salto de página automático (actualmente) siempre 465 base.options.pageAnimation = true; 466 } 467 468 base.initializeContent = function() { 469 innerMx = iWidth + contentX; 470 innerMy = iHeight; 471 outerMx = innerMx; 472 outerMy = innerMy - iHeight; 473 //cÃrculo exterior 474 outerRadius = Math.sqrt(iWidth * iWidth + iHeight * iHeight); 475 // Superficie de trabajo limpia (Solucione el problema de Firefox por recargar (F5)) 476 $(base.el).children().remove(); 477 //tiene el ancho maximo, para que cuando haya zoom se pone por debajo 478 $(base.el).css({'position':'relative','width':jpfWidthPP,'height':jpfHeightDefault}); 479 480 jpfTopContainerInner.css({'margin-right':jpfLatDerecha,'margin-left':jpfLatIzquierda}); 481 jpfBottomContainerInner.css({'margin-right':jpfLatDerecha,'margin-left':jpfLatIzquierda}); 482 483 //contenedor de la capa divForMove que tiene que tener overflow:hidden para que fuera de lo establecido no se puede arrastrar la capa divForMove 484 jpfDivForMoveContainer.css({'position':'absolute','width':jpfWidthPP,'height':jpfHeightDefault+jpfMiddlePadding,'overflow':'hidden'}); 485 jpfDivForMove.css({'position':'absolute','width':iWidth-base.options.cornerSize,'height':iHeight,'left':innerMx,'top':contentY,'background-color':'#000','opacity':'0'}); 486 487 // Canvas-Container 488 $(base.el).prepend('<div id="canvascontainer" style="position:absolute;z-index: 10;">'); 489 $(base.el).prepend('<div id="canvascontainer2" style="position:absolute;z-index: 8;">'); 490 491 $('#canvascontainer').append('<canvas id="canvasPageFlip" width="'+jpfWidthPP+'" height="'+(jpfHeightDefault+jpfMiddlePadding)+'" style="background-color: none;">'); 492 $('#canvascontainer2').append('<canvas id="canvasPageFlip2" width="'+jpfWidthPP+'" height="'+(jpfHeightDefault+jpfMiddlePadding)+'" style="background-color: none;">'); 493 494 495 //imágenes estáticas
496 $(base.el).append('<div id="pageBackgroundLeft"></div>'); 497 $(base.el).append('<div id="pageBackgroundRight"></div>'); 498 $(base.el).append('<div id="pageBackgroundLeft2"></div>'); 499 $(base.el).append('<div id="pageBackgroundRight2"></div>'); 500 $('#pageBackgroundLeft').css({'left': (innerMx - iWidth) + 'px','top': contentY + 'px', 'position':'absolute', 'z-index': '5', 'width': iWidth, 'height': iHeight, 'background': 'none'}); 501 $('#pageBackgroundRight').css({'left':innerMx + 'px','top':contentY + 'px', 'position':'absolute', 'z-index': '5', 'width': iWidth, 'height': iHeight, 'background': 'none'}); 502 $('#pageBackgroundLeft2').css({'left': (innerMx - iWidth) + 'px','top': contentY + 'px', 'position':'absolute', 'z-index': '4', 'width': iWidth, 'height': iHeight, 'background': 'none'}); 503 $('#pageBackgroundRight2').css({'left':innerMx + 'px','top':contentY + 'px', 'position':'absolute', 'z-index': '4', 'width': iWidth, 'height': iHeight, 'background': 'none'}); 504 // Inicio Establecer imagen 505 if (flipImage[0][actPage-1]){
506 base.loadImageIntoLayer($('#pageBackgroundLeft'),base.getImage(actPage-1)); 507 } 508 /*if (flipImage[actPage]){*/ 509 base.loadImageIntoLayer($('#pageBackgroundRight'), base.getImage(actPage),base.mostrarEbook); 510 /*}*/ 511 if (flipImage[0][actPage-2]){ 512 base.loadImageIntoLayer($('#pageBackgroundLeft2'), base.getImage(actPage-2)); 513 } 514 if(lastPage!=1){ 515 if (flipImage[0][actPage+1]){ 516 base.loadImageIntoLayer($('#pageBackgroundRight2'), base.getImage(actPage+2)); 517 } 518 } 519 520 // initialisiere Canvas 521 ctx = document.getElementById('canvasPageFlip').getContext('2d'); 522 ctx2 = document.getElementById('canvasPageFlip2').getContext('2d'); 523 524 525 // esquinas 526 if (base.options.showCorner) 527 base.drawCorners(); 528 // sombra 529 base.drawShadowsBack(); 530 // Events 531 $(base.el).bind({mousemove: function(event) {base.mouseMove(event)}}); 532 $(base.el).bind({mousedown: function(event) {base._mouseDown(event)}}); 533 $(base.el).bind({mouseup: function(event) { 534 base._mouseUp(event); 535 event.stopPropagation(); 536 }}); 537 $(base.el).bind({mouseleave: function(event) {$(base.el).css('cursor','default');}}); 538 539 $(document).unbind('keydown').bind('keydown',function(e){ 540 switch(e.keyCode){ 541 case 37: 542 if(!jpfButtonsDisability1 && !jpfButtonsDisability2){ 543 if(actPage!="1") base.goToPage(parseInt(actPage)-2,jpfAnimation); 544 } 545 break; 546 case 39: 547 if(!jpfButtonsDisability1 && !jpfButtonsDisability2){ 548 if(actPage!=lastPageOdd)base.goToPage(parseInt(actPage)+1,jpfAnimation); 549 } 550 break; 551 }; 552 }); 553 554 base.$container.disableSelection(); 555 $(".pp_overlay").disableSelection(); 556 $(".pp_pic_holder").disableSelection(); 557 } 558 559 560 561 // ****************************************************************************** 562 // Absolute Mausposition 563 // ****************************************************************************** 564 base.mouseMove = function(e) { 565 // absolute Mouseposition 566 mouseAbsX = e.pageX-$(base.el).offset().left; 567 mouseAbsY = e.pageY-$(base.el).offset().top; 568 // Compruebe si el ratón en una esquina (abajo) es 569 base.isMouseInCorner(); 570 // calcular la posición del ratón 571 base.calcRelMousePos(); 572 //si estas en modo zoom no entra, porque no se puede mover la hoja 573 if (is_mouseDown && !modoZoom){ 574 base.pageFlip(); 575 } 576 } 577 578 // ****************************************************************************** 579 // Relative Mausposition 580 // ****************************************************************************** 581 base.calcRelMousePos = function() { 582 mouseRelCenterX = mouseAbsX - innerMx; 583 //mouseRelCenterY = mouseAbsY - innerMy - contentY; 584 //cambio para que la posicion relativa sea correcta cuando hacemos zoom 585 mouseRelCenterY = mouseAbsY - innerMy - contentY-(iHeight-innerMy); 586 } 587 588 // ****************************************************************************** 589 // Botón del ratón y el estado de "clave" se almacena 590 // ****************************************************************************** 591 base._mouseDown = function(e) { 592 base.isMouseInCorner(); 593 if (mouseRelCenterX > 0) 594 takePage = 1; 595 if (mouseRelCenterX < 0) 596 takePage = -1; 597 //si estas en zoom, no entra 598 if (!modoZoom){ 599 if (base.checkFirstAndLastPage()) { 600 if (base.calculateActImages()) { 601 is_mouseDown = true; 602 } 603 } 604 } 605 } 606 607 608 // ****************************************************************************** 609 // Botón del ratón es liberado 610 // ****************************************************************************** 611 base._mouseUp = function(e) { 612 var _animation=(base.options.pageAnimation)?jpfAnimation:base.options.pageAnimation; 613 //si estas en modo zoom, se hace lo que normalmente se hace en _mouseDown 614 if (modoZoom){ 615 if (base.checkFirstAndLastPage()) { 616 if (base.calculateActImages()) { 617 is_mouseDown = true; 618 } 619 } 620 } 621 $(base.el).css('cursor','default'); 622 if (is_mouseDown) { 623 //empieza a moverse la pagina 624 jpfButtonsDisability2=true; 625 base.disabledCertainButtons(); 626 is_mouseDown = false; 627 if (mouseRelCenterX >= 0) { 628 var angle_clx = Math.atan((mouseRelCenterY) / Math.abs(CX-contentX-2*iWidth)); 629 if (_animation) { 630 if (base.options.flipOnClick) { 631 base.isMouseInCorner(); 632 if (isMouseInCorner) { 633 if (takePage == 1) 634 dropPage = -1; 635 if (takePage == -1) 636 dropPage = 1; 637 angle_clx = -0.04; 638 //Ãngulo (plano) establece como esquina del ángulo de la imagen de "impredecible" 639 } else 640 dropPage = 1; 641 } else { 642 dropPage = 1; 643 } 644 base.animateFlipping(angle_clx); 645 } else { 646 if (base.options.flipOnClick) { 647 base.isMouseInCorner(); 648 if (isMouseInCorner) { 649 mouseRelCenterX = -iWidth; 650 dropPage = -1; 651 }else { 652 mouseRelCenterX = iWidth; 653 dropPage = 1; 654 } 655 } else { 656 mouseRelCenterX = iWidth; 657 dropPage = 1; 658 } 659 mouseRelCenterY = 0; 660 } 661 } else { 662 // mouseRelCenterX < 0 663 var angle_clx = Math.atan((mouseRelCenterY) / (CX-contentX)); 664 if (_animation) { 665 if (base.options.flipOnClick) { 666 base.isMouseInCorner(); 667 if (isMouseInCorner) { 668 if (takePage == -1) 669 dropPage = 1; 670 if (takePage == 1) 671 dropPage = -1; 672 angle_clx = -0.04; 673 // Ãngulo (plano) establece como esquina del ángulo de la imagen de "impredecible" 674 } else 675 dropPage = -1; 676 } else { 677 dropPage = -1; 678 } 679 base.animateFlipping(angle_clx); 680 } else { 681 if (base.options.flipOnClick) { 682 base.isMouseInCorner(); 683 if (isMouseInCorner) { 684 mouseRelCenterX = iWidth; 685 dropPage = 1; 686 } else { 687 mouseRelCenterX = -iWidth; 688 dropPage = -1; 689 } 690 } else { 691 mouseRelCenterX = -iWidth; 692 dropPage = -1; 693 } 694 mouseRelCenterY = 0; 695 } 696 } 697 //isMouseInCorner = false;
698 //si hay animacion,comentamos base.pageFlip(); porque cuando se soltaba muy cerca de haber pasado la pagina, hacia un efecto raro duplicandose la hoja y no parece que en ningun otro caso perjudique que no este. 699 if (!_animation){ 700 base.pageFlip(); 701 //termina de moverse la pagina 702 jpfButtonsDisability2=false; 703 base.enabledCertainButtons(); 704 } 705 // Relativo del ratón para volver a calcular la posición 706 mouseRelCenterX = mouseAbsX - innerMx; 707 mouseRelCenterY = mouseAbsY - innerMy - contentY; 708 // Compruebe que la página estuvo a cargo y la carga de la página actual 709 if (!_animation) 710 base.calculatePage(); 711 // esquinas se caracterizan 712 if (base.options.showCorner) 713 base.drawCorners(); 714 if (!_animation){ 715 base.showActualPage(); 716 base.showButtonsPageFlip(); 717 base.calculateSizeDivForMove(); 718 base.zIndexDivForMove(); 719 } 720 } 721 } 722 723 724 // ****************************************************************************** 725 // 726 // ****************************************************************************** 727 base.pageFlipIsActive = function(status) { 728 window.clearTimeout(_timer); 729 if (status) { 730 //base.pageFlip(); 731 _timer = window.setTimeout(function() {base.pageFlipIsActive(true)},10); 732 } else 733 window.clearTimeout(_timer); 734 } 735 736 // ****************************************************************************** 737 // Imágenes actuales para el cálculo de 738 // ****************************************************************************** 739 base.calculateActImages = function() { 740 var htmlText = ''; 741 if (isMouseInCorner) { 742 if (takePage == 1) { 743 if (flipImage[0][actPage-1]) {
744 base.loadResource($('#pageBackgroundLeft'),actPage-1); 745 } 746 if (flipImage[0][actPage+2]) { 747 base.loadResource($('#pageBackgroundRight'),actPage+2); 748 } 749 // final de libro 750 if (flipImage[0][actPage+4]) { 751 base.loadResource($('#pageBackgroundRight2'),actPage+4); 752 }else{ 753 $('#pageBackgroundRight2').empty(); 754 } 755 if (flipImage[0][actPage-3]) { 756 base.loadResource($('#pageBackgroundLeft2'),actPage-3); 757 } 758 759 imgFlipFrontRight = base.getImage(actPage); 760 imgFlipBackRight = base.getImage(actPage+1); 761 } 762 if (takePage == -1) { 763 if (flipImage[0][actPage]) { 764 base.loadResource($('#pageBackgroundRight'),actPage); 765 } 766 //Inicio Libro 767 if (flipImage[0][actPage-3]) { 768 base.loadResource($('#pageBackgroundLeft'),actPage-3); 769 } 770 //Inicio Libro 771 if (flipImage[0][actPage+2]) { 772 base.loadResource($('#pageBackgroundRight2'),actPage+2); 773 } 774 //Inicio Libro 775 if (flipImage[0][actPage-5]) { 776 base.loadResource($('#pageBackgroundLeft2'),actPage-5); 777 }else{
778 $('#pageBackgroundLeft2').empty(); 779 } 780 imgFlipBackLeft = base.getImage(actPage-2); 781 imgFlipFrontLeft = base.getImage(actPage-1); 782 } 783 $("#canvascontainer2").css({'z-index':'8'}); 784 base.pageFlip(); 785 return true; 786 } 787 } 788 789 // ****************************************************************************** 790 // vÃdeo dibujar 791 // ****************************************************************************** 792 base.drawVideo = function(page) { 793 htmlText = '<video width="'+iWidth+'" height="'+iHeight+'" autoplay autobuffer loop="true">'; 794 htmlText = htmlText + '<source src="' + flipImage[0][page].currentSrc + '" type="video/ogg" />'; 795 htmlText = htmlText + '<source src="' + flipImage[0][page].currentSrc + '" type="video/mp4" />'; 796 htmlText = htmlText + 'This browser is not compatible with HTML 5'; 797 htmlText = htmlText + '</video>'; 798 return htmlText; 799 } 800 801 // ****************************************************************************** 802 // ****************************************************************************** 803 // Paginación calcular 804 // ****************************************************************************** 805 // ****************************************************************************** 806 base.pageFlip = function() { 807 //LÃnea de centro del cÃrculo interno - el punto C 808 MC = Math.sqrt(Math.pow(mouseRelCenterX, 2) + Math.pow(mouseRelCenterY, 2)); 809 //Ruta fuera del cÃrculo central - el punto C 810 SC = Math.sqrt(Math.pow(mouseRelCenterX, 2) + Math.pow(iHeight + mouseRelCenterY, 2)); 811 812 // ****************************************************************************** 813 // Del ratón se encuentra dentro del cÃrculo interior 814 // ****************************************************************************** 815 if ((MC <= iWidth)) { 816 // Absolutposition X 817 CX = innerMx + mouseRelCenterX; 818 // Absolutposition Y 819 CY = iHeight + contentY + mouseRelCenterY; 820 } 821 822 823 // ****************************************************************************** 824 //Ratón está fuera del cÃrculo interior 825 // ****************************************************************************** 826 if (MC > iWidth) { 827 MCX = iWidth * (Math.cos(Math.atan(mouseRelCenterY / mouseRelCenterX))); 828 MCY = iWidth * Math.abs((Math.sin(Math.atan(mouseRelCenterY / mouseRelCenterX)))); 829 if (mouseRelCenterX < 0) 830 MCX = MCX * -1; 831 if (mouseRelCenterY < 0) 832 MCY = MCY * -1; 833 CX = MCX + innerMx; 834 CY = MCY + iHeight + contentY; 835 } 836 837 838 // ****************************************************************************** 839 // Ratón está fuera del cÃrculo exterior 840 // ****************************************************************************** 841 angleCXMCY = Math.atan((Math.abs(CX - innerMx)) / (CY - contentY)) / degHelp; 842 r2x = Math.sin(angleCXMCY * degHelp) * outerRadius; 843 if (mouseRelCenterX < 0) 844 r2x = r2x * -1; 845 r2y = Math.cos(angleCXMCY * degHelp) * outerRadius; 846 // Cálculo de la esquina 847 if ((SC > outerRadius) && (mouseRelCenterY > 0)) { 848 CX = innerMx + r2x; 849 CY = r2y + contentY; 850 } 851 852 853 // ****************************************************************************** 854 // Borde de la imagen T1-T2 (t1xt1y_t2xt2y) 855 // ****************************************************************************** 856 T1Y = (contentY + iHeight + CY) / 2; 857 if (takePage == 1) { 858 T1X = (innerMx + iWidth + CX) / 2; 859 // distancia T1-C 860 T1C = Math.sqrt(Math.pow(innerMx + iWidth - T1X, 2) + Math.pow(contentY + iHeight - T1Y, 2)); 861 angleT1XT1Y = Math.atan((contentY + iHeight - CY) / (innerMx + iWidth - CX)); 862 } 863 else if (takePage == -1) { 864 T1X = (innerMx - iWidth + CX) / 2; 865 // distancia T1-C 866 T1C = Math.sqrt(Math.pow(innerMx - iWidth - T1X, 2) + Math.pow(contentY + iHeight - T1Y, 2)); 867 angleT1XT1Y = Math.atan((contentY + iHeight - CY) / (innerMx - iWidth - CX)); 868 } 869 if (!angleT1XT1Y) 870 angleT1XT1Y = 0; 871 // T2: El punto en el diámetro del cÃrculo 872 if (takePage == 1) 873 T2X = innerMx + iWidth - T1C / Math.cos(angleT1XT1Y); 874 else if (takePage == -1) 875 T2X = innerMx - iWidth + T1C / Math.cos(angleT1XT1Y); 876 T2Y = iHeight + contentY; 877 878
879 // ****************************************************************************** 880 // Calcular el ángulo de la C-T2 - ángulo> de Flipbildes 881 // ****************************************************************************** 882 T2CX = T2X - CX; 883 T2CY = contentY + iHeight - CY; 884 if ((contentY + iHeight - CY >= 0) && (T2CY != 0)) 885 angleImage = 90 - (Math.atan(T2CX / T2CY) / degHelp); 886 else if (T2CY != 0) 887 angleImage = -90 - (Math.atan(T2CX / T2CY) / degHelp); 888 else { 889 if (takePage == 1) 890 angleImage = 0; 891 else 892 angleImage = 180; 893 } 894 895 896 // ****************************************************************************** 897 // Calculando (derecho de la pantalla) 898 // ****************************************************************************** 899 T1YRel = iHeight + contentY - T1Y; 900 if (T1YRel != 0) 901 angleClip = Math.atan((T1X - T2X) / T1YRel) / degHelp; 902 else 903 angleClip = 0; 904 905 906 // ****************************************************************************** 907 // Eliminar área de la imagen 908 // ****************************************************************************** 909 //ctx.clearRect(0,0,1050,1000); 910 ctx.clearRect(0,0,jpfWidthPP,jpfHeightPP); 911 912 // ****************************************************************************** 913 // Vuelta a la pagina derecha 914 // ****************************************************************************** 915 if (takePage == 1) { 916 ctx.save(); 917 // caracterÃstica imagen de la derecha 918 // Pasó la primera página 919 ctx.drawImage(imgFlipFrontRight ,innerMx, 0 + contentY, iWidth, iHeight); 920 // Sombra en la parte delantera vuelta 921 if (base.options.shadowWidth > 0) 922 base.drawShadows('left'); 923 ctx.save(); 924 ctx.translate(CX, CY); 925 ctx.rotate(angleImage * degHelp); 926 ctx.translate(0, -iHeight); 927 //Reverso de la página volteada 928 ctx.drawImage(imgFlipBackRight,0, 0,iWidth, iHeight); 929 ctx.restore(); 930 ctx.save(); 931 ctx.translate(CX, CY); 932 ctx.rotate(angleImage * degHelp); 933 ctx.restore(); 934 // Clippingarea 935 ctx.translate(T2X,T2Y); 936 ctx.rotate(angleClip * degHelp); 937 ctx.translate(0,-iHeight-iWidth+100); 938 ctx.clearRect(0, 0, 2*iWidth,2.5*iHeight); 939 //ctx.fillRect(0, 0, 2*iWidth,2.5*iHeight); 940 ctx.restore(); 941 } 942 // ****************************************************************************** 943 // Voltear a la izquierda 944 // ****************************************************************************** 945 else if (takePage == -1) { 946 ctx.save(); 947 // caracterÃstica imagen de la izquierda 948 //Pasó la primera página 949 ctx.drawImage(imgFlipFrontLeft,innerMx - iWidth, 0 + contentY, iWidth, iHeight); 950 // Sombra en la parte delantera vuelta 951 if (base.options.shadowWidth > 0) 952 base.drawShadows('right'); 953 ctx.save(); 954 ctx.translate(CX, CY); 955 ctx.rotate((angleImage + 180) * degHelp); 956 ctx.translate(-iWidth, -iHeight); 957 ctx.drawImage(imgFlipBackLeft, 0, 0,iWidth, iHeight); // Rückseite der geflippten Seite 958 ctx.restore(); 959 // Clippingarea 960 ctx.translate(T2X, T2Y); 961 ctx.rotate(angleClip * degHelp); 962 ctx.translate(-2*iWidth, -iHeight - (Math.abs(iHeight-iWidth))); 963 ctx.clearRect(0, 0, 2*iWidth,2.5*iHeight); 964 //ctx.fillRect(0, 0, 2*iWidth,3*iWidth); 965 ctx.restore(); 966 } 967 return true; 968 } // pageflip() 969 970 971 // ****************************************************************************** 972 // Compruebe que la página estuvo a cargo y la carga de la página actual 973 // ****************************************************************************** 974 base.calculatePage = function() { 975 if (takePage > dropPage) 976 actPage = actPage + 2; 977 if (takePage < dropPage) 978 actPage = actPage - 2; 979 980 //cargo las imagenes que se podrian utilizar en el siguiente movimiento. 981 base.loadNecessaryPageForNextMove(actPage+1,actPage-2,actPage+4,actPage-5); 982 983 } 984 985 // ****************************************************************************** 986 // determina la página que se muestra cuando se realiza la paginación 987 // ****************************************************************************** 988 base.calculateNextPage = function() { 989 if (((actPage + 2 < flipImage[0].length - 2) && (takePage == 1)) || ((actPage - 2 > 1) && (takePage == -1))) 990 return true; 991 else 992 return false;
993 } 994 995 // ****************************************************************************** 996 // Compruebe si el ratón está dentro de la esquina de la página es (tamaño definible) 997 // ****************************************************************************** 998 base.isMouseInCorner = function() { 999 //calculamos el espacio que se queda abajo cuando movemos el ebook, para calcular bien donde esta la esquina 1000 /*if ((iWidth - Math.abs(mouseRelCenterX) < base.options.cornerSize) && (iWidth - Math.abs(mouseRelCenterX) >= 0) && (Math.abs(mouseRelCenterY) < base.options.cornerSize) &&(mouseRelCenterY <= 0)) {*/ 1001 //se controla que no sea la primera pagina ni la ultima. y que no tenga solo una pagina y que no este en modo presentacion 1002 if(clickFromExternalButtons){ 1003 isMouseInCorner = true; 1004 return true; 1005 }else{ 1006 if( 1007 (!modoPresentacion)&& 1008 (lastPageOdd!=1) && 1009 ( 1010 ((actPage==1) && (iWidth - mouseRelCenterX < base.options.cornerSize) && (iWidth - mouseRelCenterX >= 0) && (Math.abs(mouseRelCenterY) < base.options.cornerSize) && ((mouseRelCenterY) <= 0)) || 1011 ((actPage==lastPageOdd) && (iWidth + mouseRelCenterX < base.options.cornerSize) && (iWidth + mouseRelCenterX >= 0)&& (Math.abs(mouseRelCenterY) < base.options.cornerSize) && ((mouseRelCenterY) <= 0)) || 1012 ((actPage!=lastPageOdd && actPage!=1)&& (iWidth - Math.abs(mouseRelCenterX) < base.options.cornerSize) && (iWidth - Math.abs(mouseRelCenterX) >= 0)&& (Math.abs(mouseRelCenterY) < base.options.cornerSize) && ((mouseRelCenterY) <= 0))) 1013 ){ 1014 isMouseInCorner = true; 1015 $(base.el).css('cursor','pointer'); 1016 return true; 1017 } else{ 1018 isMouseInCorner = false;
1019 $(base.el).css('cursor','default'); 1020 } 1021 } 1022 } 1023 1024 // ****************************************************************************** 1025 // dibuja las esquinas. si showCorners a true 1026 // ****************************************************************************** 1027 base.drawCorners = function() { 1028 var cornerDivY = contentY + iHeight - base.options.cornerSize; 1029 var cornerDivLeftX = contentX; 1030 var cornerDivRightX = contentX + 2*iWidth - base.options.cornerSize; 1031 var r = HexToR(base.options.cornerColor); 1032 var g = HexToG(base.options.cornerColor); 1033 var b = HexToB(base.options.cornerColor); 1034 ctx.fillStyle = 'rgba('+r+','+g+','+b+','+base.options.cornerAlpha+')'; 1035 ctx.beginPath(); 1036 // botón de la esquina superior izquierda de ocultar la primera página 1037 if(actPage > 1) 1038 ctx.fillRect(cornerDivLeftX, cornerDivY, base.options.cornerSize, base.options.cornerSize); 1039 //ctx.arc(cornerDivLeftX, cornerDivY, base.options.cornerSize, 0, 2*Math.PI, true); 1040 ctx.fill(); 1041 ctx.beginPath(); 1042 // esquina a la derecha en el botón de página Ocultar último (aunque sólo el lado izquierdo se muestra) 1043 if(actPage < flipImage[0].length - 2) 1044 ctx.fillRect(cornerDivRightX, cornerDivY, base.options.cornerSize, base.options.cornerSize); 1045 ctx.fill(); 1046 } 1047 1048 // ****************************************************************************** 1049 // Comprueba si la primera o última página aparece 1050 // ****************************************************************************** 1051 base.checkFirstAndLastPage = function() { 1052 if (((actPage < flipImage[0].length - 2) && (takePage == 1)) || ((actPage > 1) && (takePage == -1))) 1053 return true; 1054 else 1055 return false; 1056 } 1057 1058 // ****************************************************************************** 1059 // Sombra sobre el lienzo frontal se caracteriza 1060 // ****************************************************************************** 1061 base.drawShadows = function(page) { 1062 // derecho 1063 if (page == 'left') { 1064 gradient = ctx.createLinearGradient(iWidth + contentX,contentY,iWidth + contentX + base.options.shadowWidth,contentY); 1065 gradient.addColorStop(1, "rgba(0, 0, 0, 0)"); 1066 gradient.addColorStop(0 , "rgba(0, 0, 0, "+base.options.shadowOpacity+")"); 1067 ctx.fillStyle = gradient; 1068 ctx.beginPath(); 1069 ctx.rect(iWidth + contentX, contentY, base.options.shadowWidth, iHeight); 1070 ctx.fill(); 1071 } 1072 // izquierda 1073 if (page == 'right'){ 1074 gradient = ctx.createLinearGradient(iWidth + contentX - base.options.shadowWidth,contentY,iWidth + contentX,contentY); 1075 gradient.addColorStop(0, "rgba(0, 0, 0, 0)"); 1076 gradient.addColorStop(1 , "rgba(0, 0, 0, "+base.options.shadowOpacity+")"); 1077 ctx.fillStyle = gradient; 1078 ctx.beginPath(); 1079 ctx.rect(iWidth + contentX - base.options.shadowWidth, contentY, base.options.shadowWidth, iHeight); 1080 ctx.fill(); 1081 } 1082 } 1083 1084 // ****************************************************************************** 1085 // Sombra en el soporte trasero 1086 // ****************************************************************************** 1087 base.drawShadowsBack = function() { 1088 // Sombra en la parte posterior derecha del lienzo de dibujo 1089 if (base.options.shadowWidth > 0) { 1090 gradient = ctx2.createLinearGradient(iWidth + contentX,contentY,iWidth + contentX + base.options.shadowWidth,contentY); 1091 gradient.addColorStop(1, "rgba(0, 0, 0, 0)"); 1092 gradient.addColorStop(0 , "rgba(0, 0, 0, "+base.options.shadowOpacity+")"); 1093 ctx2.fillStyle = gradient; 1094 ctx2.beginPath(); 1095 ctx2.rect(iWidth + contentX,contentY, iWidth, iHeight); 1096 ctx2.fill(); 1097 } 1098 // Sombra en la parte inferior izquierda del lienzo de dibujo 1099 if (base.options.shadowWidth > 0) { 1100 gradient = ctx2.createLinearGradient(iWidth + contentX,contentY,iWidth + contentX - base.options.shadowWidth,contentY); 1101 gradient.addColorStop(1, "rgba(0, 0, 0, 0)"); 1102 gradient.addColorStop(0 , "rgba(0, 0, 0, "+base.options.shadowOpacity+")"); 1103 ctx2.fillStyle = gradient; 1104 ctx2.beginPath(); 1105 ctx2.rect(contentX,contentY, iWidth, iHeight); 1106 ctx2.fill(); 1107 } 1108 } 1109 1110 1111 base.animateFlipping = function(angle_clx) { 1112 $("#canvascontainer2").css({'z-index':'8'}); 1113 // eliminar todos los controladores de eventos 1114 $(base.el).unbind(); 1115 window.clearTimeout(interval); 1116 //if (mouseRelCenterY < 0) 1117 dynamicHelp = 20; 1118 if (dropPage == -1) { 1119 mouseRelCenterX = mouseRelCenterX - base.options.animationDynamic; 1120 mouseRelCenterY = Math.tan(angle_clx) * (CX-contentX) - dynamicHelp; 1121 } 1122 if (dropPage == 1) { 1123 mouseRelCenterX = mouseRelCenterX + base.options.animationDynamic; 1124 mouseRelCenterY = Math.tan(angle_clx) * Math.abs(CX-contentX-2*iWidth) - dynamicHelp; 1125 } 1126 1127 // Animación se ejecuta hasta que la página manejado completamente 1128 if ((CX-contentX > 1) && (CX-contentX < 2*iWidth-1)){ 1129 base.pageFlip(); 1130 interval = window.setTimeout(function() {base.animateFlipping(angle_clx);}, base.options.animationSpeed); 1131 } else { 1132 //termina de moverse la pagina 1133 jpfButtonsDisability2=false; 1134 base.enabledCertainButtons(); 1135 if (dropPage == -1) 1136 mouseRelCenterX = -iWidth; 1137 if (dropPage == 1) 1138 mouseRelCenterX = iWidth; 1139 mouseRelCenterY = 0; 1140 base.calculatePage(); 1141 // cuando haya terminado el dibujo, entonces incluso asignar manejador de nuevo 1142 if (base.pageFlip()) { 1143 //ctx.clearRect(0,0,1050,1000); 1144 ctx.clearRect(0,0,jpfWidthPP,jpfHeightPP); 1145 if (dropPage == -1) { 1146 /*if (flipImage[0][actPage-1].nodeName == 'IMG'){*/
1147 base.loadImageIntoLayer($('#pageBackgroundLeft'),base.getImage(actPage-1)); 1148 base.loadImageIntoLayer($('#pageBackgroundLeft2'),base.getImage(actPage-3)); 1149 /*} 1150 if (flipImage[0][actPage-1].nodeName == 'VIDEO') { 1151 $('#pageBackgroundLeft').html(base.drawVideo(actPage-1)); 1152 }*/ 1153 } 1154 if (dropPage == 1) { 1155 /*if (flipImage[0][actPage].nodeName == 'IMG'){*/ 1156 base.loadImageIntoLayer($('#pageBackgroundRight'),base.getImage(actPage)); 1157 base.loadImageIntoLayer($('#pageBackgroundRight2'),base.getImage(actPage+2)); 1158 /*} 1159 if (flipImage[0][actPage].nodeName == 'VIDEO') { 1160 $('#pageBackgroundRight').html(base.drawVideo(actPage)); 1161 }*/ 1162 } 1163 $(base.el).bind({mousemove: function(event) {base.mouseMove(event)}}); 1164 $(base.el).bind({mousedown: function(event) {base._mouseDown(event)}}); 1165 $(base.el).bind({mouseup: function(event) {base._mouseUp(event)}}); 1166 } 1167 // calcular la posición del ratón relativa (nuevo valor de Y es necesario cuando no geglickt MouseMove de nuevo en la esquina) 1168 base.calcRelMousePos(); 1169 base.showActualPage(); 1170 base.showButtonsPageFlip(); 1171 base.calculateSizeDivForMove(); 1172 base.zIndexDivForMove(); 1173 } 1174 } 1175 1176 1177 1178 1179 base.debugDraw = function() { 1180 // Radius 1 (innen) 1181 // Punkt zeichnen (lila) 1182 // r1x = iWidth * (Math.cos(Math.atan(mouseRelCenterY / mouseRelCenterX))); 1183 // r1y = iWidth * Math.abs((Math.sin(Math.atan(mouseRelCenterY / mouseRelCenterX)))); 1184 // if (mouseRelCenterX < 0) 1185 // r1x = r1x * -1; 1186 // if (mouseRelCenterY < 0) 1187 // r1y = r1y * -1; 1188 1189 // puntos auxiliares 1190 ctx.beginPath(); 1191 //rojo 1192 ctx.fillStyle = 'rgba(255,0,0,1)'; 1193 ctx.arc(CX, CY, 20, 0, 360, false); 1194 ctx.fill(); 1195 ctx.beginPath(); 1196 //negro 1197 ctx.fillStyle = 'rgba(0,0,0,1)'; 1198 ctx.arc(mouseAbsX, mouseAbsY, 10, 0, 360, false); 1199 ctx.fill(); 1200 ctx.beginPath(); 1201 //amarillo 1202 ctx.fillStyle = 'rgba(125,120,0,1)'; 1203 ctx.arc(CX, CY, 10, 0, 360, false); 1204 ctx.fill(); 1205 ctx.beginPath(); 1206 //verde 1207 ctx.fillStyle = 'rgba(15,120,50,1)'; 1208 ctx.arc(innerMx + r2x, r2y + contentY, 10, 0, 360, false); 1209 ctx.fill(); 1210 // ctx.beginPath(); 1211 // ctx.fillStyle = 'rgba(250,0,240,1)'; //lila 1212 // ctx.arc(innerMx + r1x, iHeight + r1y + contentY, 10, 0, 360, false); 1213 // ctx.fill(); 1214 ctx.beginPath(); 1215 //gris - esquina derecha 1216 ctx.fillStyle = 'rgba(80,80,80,1)'; 1217 if (takePage == 1) 1218 ctx.arc(innerMx + iWidth, iHeight + contentY, 30, 0, 360, false); 1219 else 1220 ctx.arc(innerMx - iWidth, iHeight + contentY, 30, 0, 360, false); 1221 ctx.fill(); 1222 ctx.beginPath(); 1223 //azul 1224 ctx.fillStyle = 'rgba(0,150,204,1)'; 1225 ctx.arc(T1X, T1Y, 5, 0, 360, false); 1226 ctx.fill(); 1227 ctx.beginPath(); 1228 //turquesa 1229 ctx.fillStyle = 'rgba(0,250,204,1)'; 1230 ctx.arc(T2X, T2Y, 5, 0, 360, false); 1231 ctx.fill(); 1232 1233 // guÃas 1234 ctx.beginPath(); 1235 ctx.lineWidth = 1; 1236 ctx.moveTo(mouseAbsX,mouseAbsY); 1237 ctx.lineTo(innerMx,innerMy + contentY); 1238 ctx.moveTo(mouseAbsX,mouseAbsY); 1239 ctx.lineTo(outerMx,outerMy + contentY); 1240 ctx.moveTo(CX, CY); 1241 ctx.lineTo(outerMx,outerMy + contentY); 1242 //esquina gris 1243 if (takePage == 1) 1244 ctx.moveTo(innerMx + iWidth, iHeight + contentY); 1245 else 1246 ctx.moveTo(innerMx - iWidth, iHeight + contentY); 1247 //esquina de la imagen 1248 ctx.lineTo(CX,CY); 1249 ctx.stroke(); 1250 1251 //CÃrculo exterior e interior 1252 ctx.beginPath() 1253 ctx.fillStyle = 'rgba(123,24,255,0.1)'; 1254 ctx.arc(innerMx, innerMy + contentY, iWidth, 0, 360, false); 1255 ctx.fill(); 1256 ctx.beginPath() 1257 ctx.fillStyle = 'rgba(0,0,0,0.1)'; 1258 ctx.arc(outerMx, outerMy + contentY, outerRadius, 0, 360, false); 1259 ctx.fill(); 1260 } 1261 1262 function debugValue() { 1263 // Debugausgaben 1264 //$('#debug01').val(CX); 1265 //$('#debug02').val(CY); 1266 //$('#debug03').val(T2X); 1267 // $('#debug04').val(flipImage[0].length - 1); 1268 //$('#debug05').val(angleClip); 1269 } 1270 1271 1272 /*************************************************************/ 1273 /* extern functions */ 1274 /*************************************************************/ 1275 1276 $.fn.getActPage = function() { 1277 return actPage; 1278 } 1279 1280 1281 1282 // ****************************************************************************** 1283 // AÃADIDO ESPECIAL PROXIA 1284 // ****************************************************************************** 1285 1286 // ****************************************************************************** 1287 // Nada más abrir, mostrar el ebook y esconder el loader.gif 1288 // ****************************************************************************** 1289 base.mostrarEbook = function(){ 1290 //solo muestra el ebook si la pagina inicial es 1, si no espera y se muestra desde gotoStartPage 1291 if(!llamarMostrarEbook){ 1292 llamarMostrarEbook=true; 1293 if(base.options.startPage==1){ 1294 jpfLoader.css({'z-index':'-999'}).hide(); 1295 jpfContainer.fadeIn(500); 1296 }else{ 1297 //vamos a la pagina que se indica como inicial 1298 setTimeout(function(){base.goToStartPage();},1000); 1299 } 1300 } 1301 } 1302 1303 1304 // ****************************************************************************** 1305 // Cargar imagen, bajo demanda 1306 // Si la imagen esta cargada la devuelve, y si no la carga 1307 // ****************************************************************************** 1308 base.getImage = function(pag) { 1309 var valor; 1310 switch(nivelZoom){ 1311 case 0: 1312 valor=1; 1313 break; 1314 case 1: 1315 valor=1.5; 1316 break; 1317 case 2: 1318 valor=3; 1319 break; 1320 } 1321 var iWidthAux=parseInt(iWidthWithoutZoom*valor); 1322 var iHeightAux=parseInt(iHeightWithoutZoom*valor); 1323 1324 //si ya esta cargada devolvemos la de mayor calidad 1325 if(flipImage[nivelZoom][pag] && flipImage[2][pag]['src'] != '') { 1326 return flipImage[2][pag]; 1327 } 1328 if(flipImage[nivelZoom][pag] && flipImage[1][pag]['src'] != '' && nivelZoom<2) { 1329 return flipImage[1][pag]; 1330 } 1331 //si no devolvemos o cargamos la que necesitemos 1332 if(flipImage[nivelZoom][pag] && flipImage[nivelZoom][pag]['src'] == '') { 1333 base.$el.append('<img src="'+flipImageSrc[pag]+'?width=' + iWidthAux+'&height='+iHeightAux+'" class="jPageFlip jPageFlip'+pag+' nivelZoom'+nivelZoom+'" style="display:none" alt="" />'); 1334 //$(".jPageFlip"+pag+".nivelZoom"+nivelZoom,base.$el).css('display','none'); 1335 //flipImage[nivelZoom][pag]["src"] = $(".jPageFlip"+pag+".nivelZoom"+nivelZoom,base.$el).get(0).src; 1336 flipImage[nivelZoom][pag] = $(".jPageFlip"+pag+".nivelZoom"+nivelZoom,base.$el).get(0); 1337 return flipImage[nivelZoom][pag]; 1338 }else{ 1339 return flipImage[nivelZoom][pag]; 1340 } 1341 } 1342 1343 1344 // ****************************************************************************** 1345 // Cargar en una capa, la imagen correspondiente del modo más optimo 1346 // ****************************************************************************** 1347 base.loadImageIntoLayer = function(elem,imgToLoad,fnLoad){ 1348 //esta manera no era optima porque hacia llamadas al servidor
1349 /*$('#pageBackgroundLeft').html('<img src="' + flipImage[actPage-1].src + '" width="'+iWidth+'" height="'+iHeight+'">');*/ 1350 $(imgToLoad).css({'display':'block','width':iWidth,'height':iHeight}); 1351 if(typeof(fnLoad) == 'function') { 1352 if($(imgToLoad).get(0).complete){ fnLoad();} 1353 else{ $(imgToLoad).load(function() { fnLoad();});} 1354 } 1355 elem.empty(); 1356 elem.append(imgToLoad); 1357 } 1358 1359 1360 // ****************************************************************************** 1361 // Cargar en una capa, el recurso correspondiente sea video o imagen 1362 // ****************************************************************************** 1363 base.loadResource = function(elem, pageToLoad){ 1364 //if (flipImage[pageToLoad].nodeName == 'IMG') { 1365 base.loadImageIntoLayer(elem,base.getImage(pageToLoad)); 1366 /*} else if (flipImage[pageToLoad].nodeName == 'VIDEO') { 1367 elem.html(base.drawVideo(pageToLoad)); 1368 }*/ 1369 } 1370 1371 // ****************************************************************************** 1372 // Calculamos el tamaño y posicion que deben tener cada hoja, 1373 //teniendo en cuenta el espacio que tenemos y el tamaño real de las imagenes 1374 // en la version original esos datos los daba el usuario 1375 //Ahora el usuario no tiene control porque aunque ponga opcion de width, heigth, top y left no se cogen. se calculan 1376 // ****************************************************************************** 1377 base.calculateSizePosPage=function(){ 1378 var propHeight; 1379 var propWidth; 1380 1381 if(!jpfWidthPP || jpfWidthPP==0 || !jpfHeightPP || jpfHeightPP==0){ 1382 jpfWidthPP=720; 1383 jpfHeightPP=580; 1384 } 1385 1386 //obtengo lo que ocupa estas capas 1387 //Es importante que tenga una altura, margin y padding en las css, porque como debemos coger el valor antes del ready si no es 0. 1388 jpfCabecera=base.calculateHeightDiv(jpfTopContainer); 1389 jpfPie=base.calculateHeightDiv(jpfBottomContainer); 1390 jpfCabeceraInner=base.calculateHeightDiv(jpfTopContainerInner); 1391 jpfPieInner=base.calculateHeightDiv(jpfBottomContainerInner); 1392 1393 1394 //el padding que tiene la capa jpfInner (usado para que se vea movimiento de hoja) 1395 jpfMiddlePadding=base.getValueWithoutPx($(".jpfInner",base.$container).css("padding-bottom")); 1396 1397 //separacion de la revista dentro de la capa jpfInner 1398 jpfTopDefault=parseInt(jpfMiddlePadding/2); 1399 1400 //espacio que tenemos para la revista 1401 //le restamos lo que ocupan las capas de arriba, abajo y el padding 1402 jpfHeightDefault = parseInt(jpfHeightPP)-(jpfCabecera+jpfPie+jpfMiddlePadding + jpfCabeceraInner +jpfPieInner); 1403 1404 //el espacio que tenemos menos lo que miden las dos flechas. lo dividimos entre dos porque necesitamos el espacio para 1 hoja no dos 1405 jpfLatDerecha=base.calculateWidthDiv(jpfRightContainer); 1406 jpfLatIzquierda=base.calculateWidthDiv(jpfLeftContainer); 1407 1408 jpfWidthDefault = parseInt((parseInt(jpfWidthPP)-(jpfLatIzquierda+jpfLatDerecha))/2); 1409 1410 1411 propHeight=(parseInt(jpfHeightDefault)/parseInt(realHeight)); 1412 propWidth=(parseInt(jpfWidthDefault)/parseInt(realWidth)); 1413 if(propHeight<=1 && propWidth<=1){ 1414 //si los dos son menor que 1. cogemos la proporcion mas pequeña 1415 if(propHeight<=propWidth){ 1416 iHeight=jpfHeightDefault; 1417 iWidth=Math.round(parseInt(realWidth)*propHeight); 1418 }else{ 1419 iWidth=jpfWidthDefault; 1420 iHeight=Math.round(parseInt(realHeight)*propWidth); 1421 } 1422 }else{ 1423 if(propHeight<=1){ 1424 //propoHeigth mas pqueña que 1,propWidth no 1425 iHeight=jpfHeightDefault; 1426 iWidth=Math.round(parseInt(realWidth)*propHeight); 1427 }else{ 1428 if(propWidth<=1){ 1429 //propWidth mas pqueña que 1,propoHeigth no 1430 iWidth=jpfWidthDefault; 1431 iHeight=Math.round(parseInt(realHeight)*propWidth); 1432 }else{ 1433 //ninguno de los dos es mas pequeña que 1. la imagen es mas pequeña que el hueco.la ampliamos 1434 if(propHeight<=propWidth){ 1435 iWidth=parseInt(realWidth*propHeight); 1436 iHeight=parseInt(realHeight*propHeight); 1437 }else{ 1438 iWidth=parseInt(realWidth*propWidth); 1439 iHeight=parseInt(realHeight*propWidth); 1440 } 1441 } 1442 } 1443 } 1444 //esto se utiliza luego en el zoom 1445 iWidthWithoutZoom=iWidth; 1446 iHeightWithoutZoom=iHeight; 1447 1448 // Canvas-Position fija 1449 contentY=(parseInt((jpfHeightDefault-iHeight)/2))+jpfTopDefault; 1450 contentX=(jpfWidthDefault-iWidth)+jpfLatIzquierda; 1451 1452 //se utiliza para cuando se arrastra la revista 1453 contentYWithoutMove=contentY; 1454 contentXWithoutMove=contentX; 1455 1456 contentXWithoutZoom=contentX; 1457 contentYWithoutZoom=contentY; 1458 1459 //valores por defecto, por si damos a los controles sin pasar por encima del ebook 1460 //para coger la esquina de la derecha de la revista 1461 //mouseAbsX=(jpfWidthPP-jpfLatIzquierda-((jpfWidthPP/2)-iWidthWithoutZoom-jpfLatIzquierda));
1462 mouseAbsX=(parseInt((jpfWidthPP/2)) + iWidthWithoutZoom)-3; 1463 mouseAbsY=iHeight+contentY-3; 1464 1465 1466 //cada cuanto se mueve una pagina en la presentacion 1467 sizePage=parseInt(iWidth/300)+1; 1468 tiempoCicloPresentacion=(velAutoflip[1]*sizePage); 1469 } 1470 1471 1472 1473 // ****************************************************************************** 1474 // Establecer el tamaño de contenedores, imagenes utilizadas a partir del tamaño calculado para la pagina 1475 //o el tamaño por defecto que existe 1476 // ****************************************************************************** 1477 base.setSizeEnvironment =function(){ 1478 //resimensiono las flechas 1479 $(".jpfLeftContainer img.arrowNav",base.$container).height(jpfHeightDefault); 1480 $(".jpfRightContainer img.arrowNav",base.$container).height(jpfHeightDefault); 1481 1482 $(".jpfLeftContainer",base.$container).css({"top":jpfTopDefault+jpfCabecera}); 1483 $(".jpfRightContainer",base.$container).css({"top":jpfTopDefault+jpfCabecera}); 1484 1485 $("img.jPageFlipZero",base.$el).height(iHeight); 1486 $("img.jPageFlipZero",base.$el).width(iWidth); 1487 base.$container.height(jpfHeightPP); 1488 } 1489 1490 // ****************************************************************************** 1491 // Mostar la pagina actual 1492 // ****************************************************************************** 1493 base.showActualPage = function() { 1494 if(actPage=="1") jpfNavFormPagesInput.val(actPage+"/"+lastPage); 1495 else{ 1496 if(actPage>lastPage)jpfNavFormPagesInput.val(lastPage+"/"+lastPage); 1497 else jpfNavFormPagesInput.val((actPage-1)+"-"+actPage+"/"+lastPage); 1498 } 1499 } 1500 1501 1502 1503 // ****************************************************************************** 1504 // Mostar los botones que corresponda 1505 //(jpfFirst,jpfPrev,jpfNext,jpfLast,jpfPrintLeftButton,jpfPrintRightButton,jpfPlayButton) 1506 // ****************************************************************************** 1507 base.showButtonsPageFlip = function() { 1508 //si los botones no estan deshabilitados, veo cual hay que mostrar 1509 if(!jpfButtonsDisability1 && !jpfButtonsDisability2){ 1510 if(actPage=="1"){ 1511 jpfFirst.css({'opacity':'0.3','cursor':'default'}); 1512 jpfPrev.css({'opacity':'0.3','cursor':'default'}); 1513 //elimnamos el tipsy 1514 if(jpfFirstClick)jpfFirst.unbind('mouseenter'); 1515 else jpfFirst.unbind('mouseenter mouseleave'); 1516 1517 if(jpfPrevClick)jpfPrev.unbind('mouseenter'); 1518 else jpfPrev.unbind('mouseenter mouseleave'); 1519 1520 jpfPrintLeftButton.css({'opacity':'0.3','cursor':'default'}).unbind('mouseenter mouseleave'); 1521 }else{ 1522 //volvemos a poner el tipsy 1523 jpfFirst.css({'opacity':'1','cursor':'pointer'}).tipsy(valueTipsy); 1524 jpfPrintLeftButton.css({'opacity':'1','cursor':'pointer'}).tipsy(valueTipsy); 1525 1526 jpfPrev.css({'opacity':'1','cursor':'pointer'}).not('.jpfPrevBig').tipsy(valueTipsy); 1527 } 1528 if(actPage==lastPageOdd ){ 1529 jpfNext.css({'opacity':'0.3','cursor':'default'}); 1530 jpfLast.css({'opacity':'0.3','cursor':'default'}); 1531 //elimnamos el tipsy 1532 if(jpfNextClick)jpfNext.unbind('mouseenter'); 1533 else jpfNext.unbind('mouseenter mouseleave'); 1534 1535 if(jpfLastClick)jpfLast.unbind('mouseenter'); 1536 else jpfLast.unbind('mouseenter mouseleave'); 1537 }else{ 1538 //volvemos a poner el tipsy 1539 jpfLast.css({'opacity':'1','cursor':'pointer'}).tipsy(valueTipsy); 1540 jpfNext.css({'opacity':'1','cursor':'pointer'}).not('.jpfNextBig').tipsy(valueTipsy); 1541 } 1542 if(lastPage==1){ 1543 //si solo tiene una pagina hay unas caracteristicas especiales 1544 jpfFirst.unbind('mouseenter mouseleave'); 1545 jpfPrev.unbind('mouseenter mouseleave'); 1546 jpfNext.unbind('mouseenter mouseleave'); 1547 jpfLast.unbind('mouseenter mouseleave'); 1548 1549 jpfPrintLeftButton.unbind('mouseenter mouseleave'); 1550 1551 jpfPlayButton.css({'opacity':'0.3','cursor':'default'}).unbind('mouseenter mouseleave'); 1552 } 1553 if((lastPage%2==0)&& actPage==lastPageOdd){ 1554 //si es un libro par y estamos en la ultima pagina 1555 jpfPrintRightButton.css({'opacity':'0.3','cursor':'default'}).unbind('mouseenter mouseleave'); 1556 }else{ 1557 jpfPrintRightButton.css({'opacity':'1','cursor':'pointer'}).tipsy(valueTipsy); 1558 } 1559 //incializamos para poder arrastar revista, y dragger del zoom y del autoflip 1560 base.initDragDrop(); 1561 } 1562 } 1563 1564 1565 1566 1567 1568 1569 1570 // ****************************************************************************** 1571 // ir a una pagina que le indicamos 1572 // ****************************************************************************** 1573 base.goToPage = function(pag,moveWithAnimation) { 1574 //empieza a moverse la pagina 1575 jpfButtonsDisability2=true; 1576 base.disabledCertainButtons(); 1577 var i; 1578 var num; 1579 //pag es el numero de pagina a la que queremos ir 1580 1581 //no se puede acceder a una pagina mayor de las que hay 1582 if(pag<=lastPage && pag>0){ 1583 //si la pagina es par, es com si se hubise indicado la impar que va con ella 1584 pag=(pag%2==0)?(parseInt(pag)+1): parseInt(pag); 1585 1586 //indicamos si vamos hacia delante o hacia atras 1587 if(pag>actPage){ 1588 takePage=1; 1589 //indicamos la poscion del raton como si estuvisesmos en la esquina de la pagina 1590 //se quita dos veces el moveXEbookAbs porque cuando se mueve se suma en el contentX 1591 mouseAbsX=(jpfWidthPP-contentX+(2*moveXEbookAbs)-5); 1592 }else if(pag < actPage) { 1593 takePage=-1; 1594 //indicamos la poscion del raton como si estuvisesmos en la esquina de la pagina 1595 mouseAbsX=(contentX+50); 1596 }else { 1597 //termina de moverse la pagina 1598 jpfButtonsDisability2=false; 1599 base.enabledCertainButtons(); 1600 return; 1601 } 1602 1603 //numero de paginas que hay que pasar 1604 num=Math.abs(pag - actPage)/2; 1605 //indicamos que se ha pulsado desde un bontón externo 1606 clickFromExternalButtons=true; 1607 //mismo codigo que mouseDown 1608 isMouseInCorner = true; 1609 //indicamos la poscion del raton como si estuvisesmos en la esquina de la pagina 1610 mouseAbsY=iHeight+contentY-3; 1611 base.calcRelMousePos(); 1612 //indicamos si vamos a hacerlo con animacion solo si,si movemos una unica pagina. 1613 //si es true, vemos si puede ser true o no. si es false, pues false 1614 if(moveWithAnimation)moveWithAnimation = (num==1)?true:false; 1615 if(num!=1){ 1616 if(takePage==1)actPage=(pag-2); 1617 else actPage=(pag+2); 1618 base.loadNecessaryPageToMove(pag,pag+1,pag+2,pag+4,pag-1,pag-2,pag-3,pag-5); 1619 }else{ 1620 calculateImgAndMovePage(moveWithAnimation); 1621 } 1622 } 1623 } 1624 1625 1626 function calculateImgAndMovePage(moveWithAnimation,showShadow){ 1627 if(!moveWithAnimation){ 1628 //termina de moverse la pagina 1629 jpfButtonsDisability2=false; 1630 base.enabledCertainButtons(); 1631 } 1632 if (base.calculateActImages()) { 1633 is_mouseDown = true; 1634 } 1635 base.movePage(takePage,moveWithAnimation,showShadow); 1636 } 1637 1638 1639 // ****************************************************************************** 1640 // avanza o vuelve una pagina. 1641 // es el codigo de mouseUp pero suponiendo que 1642 //-base.options.pageAnimation depende 1643 // *es false cuando queremos avanzar mas de una pagina (no queremos animacion) porque sino no avanza 1644 // *es true cuando solo vamos a movernos una pagina 1645 //-base.options.flipOnClick es true, porque queremos que mueva una pagina 1646 //-isMouseInCorner es true., porque queremos que mueva una pagina 1647 // ****************************************************************************** 1648 base.movePage = function(dir,moveWithAnimation,showShadow) { 1649 //dir es 1 si va hacia alante y -1 si va hacia atras 1650 //moveWithAnimation es true si lo hacemos con animacio y false si no. 1651 $("#canvascontainer2").css({'z-index':'8'}); 1652 $(base.el).css('cursor','default'); 1653 if (is_mouseDown) { 1654 is_mouseDown = false;
1655 if (dir=="1") { 1656 if(moveWithAnimation){ 1657 var angle_clx = Math.atan((mouseRelCenterY) / Math.abs(CX-contentX-2*iWidth)); 1658 dropPage = -1; 1659 angle_clx = -0.04; 1660 base.animateFlipping(angle_clx); 1661 }else{ 1662 mouseRelCenterX = -iWidth; 1663 dropPage = -1; 1664 mouseRelCenterY = 0; 1665 } 1666 } else { 1667 if(moveWithAnimation){ 1668 var angle_clx = Math.atan((mouseRelCenterY) / (CX-contentX)); 1669 dropPage = 1; 1670 angle_clx = -0.04; 1671 base.animateFlipping(angle_clx); 1672 }else{ 1673 mouseRelCenterX = iWidth; 1674 dropPage = 1; 1675 mouseRelCenterY = 0; 1676 } 1677 } 1678 //isMouseInCorner = false; 1679 base.pageFlip(); 1680 // Relativo del ratón para volver a calcular la posición 1681 mouseRelCenterX = mouseAbsX - innerMx; 1682 mouseRelCenterY = mouseAbsY - innerMy - contentY; 1683 // Compruebe que la página estuvo a cargo y la carga de la página actual 1684 if (!moveWithAnimation) 1685 base.calculatePage(); 1686 // esquinas se caracterizan 1687 if (base.options.showCorner) 1688 base.drawCorners(); 1689 base.showActualPage(); 1690 base.showButtonsPageFlip(); 1691 base.calculateSizeDivForMove(); 1692 base.zIndexDivForMove(); 1693 //cuando has avanzado unas cuantas páginas de golpe, se vea bien la sombra 1694 if(showShadow) $("#canvascontainer2").css({'z-index':'11'}); 1695 clickFromExternalButtons=false; 1696 } 1697 } 1698 1699 1700 1701 1702 1703 // ****************************************************************************** 1704 // Las siguientes 3 funciones se parecen mucho: 1705 // loadNecessaryPageToMove, luego avanza las paginas que necesita 1706 // loadNecessaryPageToAction, luego carga una funcion, pero no se puede utilizar como generico la de arriba porque no necesita oculatar el icono de loader en el mimsmo momento 1707 // loadNecessaryPageForNextMove, solo carga las imagenes y no debe sacar icono de loader porque lo hace mientras si se ven otras paginas, por lo que no puede utilizar loadNecessaryPageToAction con una función vacia 1708 // ****************************************************************************** 1709 1710 // ****************************************************************************** 1711 // Funciones que carga las imagenes necesarias cuando se va a ir a una pagina que no es la siguiente o la anterior 1712 // una vez cargadas, se procede a mover la pagina 1713 //esto es debido a que se está cargando bajo demanda, y no todas las imagenes se cargan 1714 // ****************************************************************************** 1715 base.loadNecessaryPageToMove= function(){ 1716 var argv = base.loadNecessaryPageToMove.arguments;//guardas el array de argumentos 1717 var argc = base.loadNecessaryPageToMove.arguments.length; //guardas el tamaño 1718 var cadena=""; 1719 for(i=0;i<argc;i++){ 1720 //solo entra a cargar imagen si no hay una ya de mayor calidad cargada 1721 if(!((flipImage[nivelZoom][argv[i]] && flipImage[2][argv[i]]['src'] != '') || (flipImage[nivelZoom][argv[i]] && flipImage[1][argv[i]]['src'] != '' && nivelZoom<2))) { 1722 if(flipImage[nivelZoom][argv[i]] && flipImage[nivelZoom][argv[i]]['src'] == '') { 1723 //cargas el loader e indicas que imagen vamos a cargar 1724 if(i==0 || cadena==""){ 1725 jpfLoader.show().css({'z-index':'999'}); 1726 cadena+="img.jPageFlip"+argv[i]; 1727 }else cadena+=",img.jPageFlip"+argv[i]; 1728 base.getImage(argv[i]); 1729 } 1730 } 1731 } 1732 1733 if(cadena!=""){ 1734 var imagenes = cadena.split(","); 1735 var loaded=0; 1736 $(cadena, base.$el).load(function() { 1737 loaded++; 1738 if(loaded== imagenes.length){ 1739 //solo se oculta el icono si la pagina inicial es 1, si no espera y se muestra desde gotoStartPage 1740 if(base.options.startPage==1 || (base.options.startPage!=actPage)){ 1741 jpfLoader.hide().css({'z-index':'-999'}); 1742 } 1743 calculateImgAndMovePage(false,true); 1744 } 1745 }); 1746 }else{ 1747 calculateImgAndMovePage(false,true); 1748 } 1749 } 1750 1751 1752 1753 1754 1755 // ****************************************************************************** 1756 // Funciones que carga las imagenes necesarias por si hay un proximo movimiento de pagina o otra situacion 1757 // esto es debido a que se está cargando bajo demanda, y no todas las imagenes se cargan 1758 // ****************************************************************************** 1759 base.loadNecessaryPageForNextMove = function(){ 1760 var argv = base.loadNecessaryPageForNextMove.arguments;//guardas el array de argumentos 1761 var argc = base.loadNecessaryPageForNextMove.arguments.length; //guardas el tamaño 1762 for(i=0;i<argc;i++){ 1763 //solo entra a cargar imagen si no hay una ya de mayor calidad cargada 1764 if(!((flipImage[nivelZoom][argv[i]] && flipImage[2][argv[i]]['src'] != '') || (flipImage[nivelZoom][argv[i]] && flipImage[1][argv[i]]['src'] != '' && nivelZoom<2))) { 1765 if(flipImage[nivelZoom][argv[i]] && flipImage[nivelZoom][argv[i]]['src'] == '') { 1766 base.getImage(argv[i]); 1767 } 1768 } 1769 } 1770 } 1771 1772 1773 // ****************************************************************************** 1774 // Funciones que carga las imagenes necesarias por si hay un proximo movimiento de pagina o otra
1774situacion 1775 // esto es debido a que se está cargando bajo demanda, y no todas las imagenes se cargan 1776 // ****************************************************************************** 1777 base.loadNecessaryPageToAction = function(){ 1778 var argv = base.loadNecessaryPageToAction.arguments;//guardas el array de argumentos 1779 var argc = base.loadNecessaryPageToAction.arguments.length; //guardas el tamaño 1780 var cadena=""; 1781 for(i=0;i<argc-1;i++){ 1782 //solo entra a cargar imagen si no hay una ya de mayor calidad cargada 1783 if(!((flipImage[nivelZoom][argv[i]] && flipImage[2][argv[i]]['src'] != '') || (flipImage[nivelZoom][argv[i]] && flipImage[1][argv[i]]['src'] != '' && nivelZoom<2))) { 1784 if(flipImage[nivelZoom][argv[i]] && flipImage[nivelZoom][argv[i]]['src'] == '') { 1785 if(i==0 || cadena==""){ 1786 jpfLoader.show().css({'z-index':'999'}); 1787 cadena+="img.jPageFlip"+argv[i]; 1788 }else cadena+=",img.jPageFlip"+argv[i]; 1789 base.getImage(argv[i]); 1790 } 1791 } 1792 } 1793 if(cadena!=""){ 1794 var imagenes = cadena.split(","); 1795 var loaded=0; 1796 $(cadena, base.$el).load(function() { 1797 loaded++; 1798 if(loaded== imagenes.length){ 1799 jpfLoader.hide().css({'z-index':'-999'}); 1800 if(typeof(argv[argc-1]) == 'function') { 1801 argv[argc-1](); 1802 } 1803 } 1804 }); 1805 }else{ 1806 if(typeof(argv[argc-1]) == 'function') { 1807 argv[argc-1](); 1808 } 1809 } 1810 } 1811 1812 1813 // ****************************************************************************** 1814 // Funciones para mover las paginas automaticamente en la presentacion 1815 // cuando llega al final, vuelve a empezar 1816 // ****************************************************************************** 1817 base.iniciarPresentacion = function() { 1818 //mueves la primera pagina y cada cierto tiempo, mueves la siguiente 1819 base.moverPaginaPresentacion(actPage+2); 1820 cicloPresentacion=window.setInterval(function() {base.moverPaginaPresentacion(actPage+2)},tiempoCicloPresentacion); 1821 } 1822 1823 base.moverPaginaPresentacion = function(pagAmover) { 1824 if(pagAmover<=lastPageOdd){ 1825 if(lastPageOdd==lastPage){ 1826 //si tiene paginas pares 1827 base.goToPage(pagAmover,jpfAnimation); 1828 } else { 1829 //si tiene paginas impares 1830 base.goToPage(pagAmover-1,jpfAnimation); 1831 } 1832 }else{ 1833 //si llega al final vuelve a la pagina 1 1834 base.goToPage(1,jpfAnimation); 1835 } 1836 } 1837 1838 1839 1840 // ****************************************************************************** 1841 // va a la pagina que se indica como inicial 1842 // ****************************************************************************** 1843 base.goToStartPage = function() { 1844 //avanza a la pagina que es la inicial, si es diferente de 1 1845 if(base.options.startPage!=1){ 1846 //cargamos la página que se deba 1847 if(base.options.startPage>lastPage)base.goToPage(lastPage,false); 1848 else base.goToPage(parseInt(base.options.startPage),false); 1849 //mostramos el ebook, porque ya se estará viendo la pagina adecuada 1850 window.setTimeout(function() { 1851 jpfContainer.fadeIn(500); 1852 jpfLoader.hide().css({'z-index':'-999'}); 1853 },1500); 1854 } 1855 } 1856 1857 // ****************************************************************************** 1858 // Deshabilitar flechas de avanzar en las paginas, imprimir, zoom 1859 // ****************************************************************************** 1860 base.disabledCertainButtons = function() { 1861 jpfFirst.css({'opacity':'0.3','cursor':'default'}); 1862 jpfPrev.css({'opacity':'0.3','cursor':'default'}); 1863 1864 jpfNavFormGoToButton.css({'opacity':'0.3','cursor':'default'}); 1865 jpfNavFormGoToInput.attr('disabled', 'disabled'); 1866 jpfNavFormPagesInput.attr('disabled', 'disabled'); 1867 //elimnamos el tipsy 1868 if(jpfFirstClick)jpfFirst.unbind('mouseenter'); 1869 else jpfFirst.unbind('mouseenter mouseleave'); 1870 1871 if(jpfPrevClick)jpfPrev.unbind('mouseenter'); 1872 else jpfPrev.unbind('mouseenter mouseleave'); 1873 1874 1875 jpfNext.css({'opacity':'0.3','cursor':'default'}); 1876 jpfLast.css({'opacity':'0.3','cursor':'default'}); 1877 //elimnamos el tipsy 1878 if(jpfNextClick)jpfNext.unbind('mouseenter'); 1879 else jpfNext.unbind('mouseenter mouseleave'); 1880 1881 if(jpfLastClick)jpfLast.unbind('mouseenter'); 1882 else jpfLast.unbind('mouseenter mouseleave'); 1883 1884 jpfPrintLeftButton.css({'opacity':'0.3','cursor':'default'}).unbind('mouseenter mouseleave'); 1885 jpfPrintRightButton.css({'opacity':'0.3','cursor':'default'}).unbind('mouseenter mouseleave'); 1886 1887 jpfFullscreenButton.css({'opacity':'0.3','cursor':'default'}).unbind('mouseenter mouseleave'); 1888 1889 //si no estamos en modo miniaturas, deshabilitamos el boton porque estamos en modo prsentacion
1890 if(!modoMiniaturas) jpfThumbnailsButton.css({'opacity':'0.3','cursor':'default'}).unbind('mouseenter mouseleave'); 1891 1892 //si no estamos en modo presentacion es que estamos en modo miniaturas 1893 if(!modoPresentacion)jpfPlayButton.css({'opacity':'0.3','cursor':'default'}).unbind('mouseenter mouseleave'); 1894 1895 base.disabledAllZoomControls(); 1896 } 1897 1898 base.disabledAllZoomControls=function(){ 1899 jpfDraggerZoom.css({'opacity':'0.3','cursor':'default'}); 1900 jpfSliderZoom.css({'opacity':'0.3'}); 1901 jpfZoomEscale.css({'opacity':'0.3'}); 1902 jpfZoomMas.css({'cursor':'default'}); 1903 jpfZoomMinus.css({'cursor':'default'}); 1904 } 1905 1906 1907 base.enabledCertainButtons = function() { 1908 if(!jpfButtonsDisability1 && !jpfButtonsDisability2){ 1909 base.enabledAllZoomControls(); 1910 jpfNavFormGoToButton.css({'opacity':'1','cursor':'pointer'}); 1911 jpfNavFormGoToInput.removeAttr('disabled'); 1912 jpfNavFormPagesInput.removeAttr('disabled'); 1913 jpfFullscreenButton.css({'opacity':'1','cursor':'pointer'}).tipsy(valueTipsy); 1914 1915 //si no estamos en modo miniaturas, habilitamos el boton porque estamos en modo prsentacion 1916 if(!modoMiniaturas)jpfThumbnailsButton.css({'opacity':'1','cursor':'pointer'}).tipsy(valueTipsy); 1917 1918 //si no estamos en modo presentacion es que estamos en modo miniaturas 1919 if(!modoPresentacion)jpfPlayButton.css({'opacity':'1','cursor':'pointer','display':'block'}).tipsy(valueTipsy); 1920 1921 //muestra los controles que tenga que mostrar segun la pagina que estamos 1922 base.showButtonsPageFlip(); 1923 } 1924 } 1925 1926 1927 base.enabledAllZoomControls = function() { 1928 jpfDraggerZoom.css({'opacity':'1','cursor':'pointer'}); 1929 jpfSliderZoom.css({'opacity':'1'}); 1930 jpfZoomEscale.css({'opacity':'1'}); 1931 jpfZoomMas.css({'cursor':'pointer'}); 1932 jpfZoomMinus.css({'cursor':'pointer'}); 1933 } 1934 1935 1936 // ****************************************************************************** 1937 // Funciones para deshabilitar y habilitar el boton de zoom que nos interese. mas o menos 1938 // ****************************************************************************** 1939 base.disabledZoomButton=function(elem){ 1940 elem.css({'opacity':'0.3','cursor':'default'}).unbind('mouseenter'); 1941 } 1942 1943 base.enabledZoomButton=function(elem){ 1944 elem.css({'opacity':'1','cursor':'pointer'}).tipsy(valueTipsy); 1945 } 1946 1947 // ****************************************************************************** 1948 // Funciones para mover el dragger del slider del autoflip y del zoom 1949 // ****************************************************************************** 1950 base.initDragDrop = function() { 1951 posicionDragger=0; dragger=null; 1952 // IE 1953 if(navigator.userAgent.indexOf("MSIE")>=0) navegador=0; 1954 // Otros 1955 else navegador=1; 1956 } 1957 1958 base.evitaEventosDragDrop = function(event) { 1959 // Funcion que evita que se ejecuten eventos adicionales 1960 if(navegador==0){ 1961 window.event.cancelBubble=true; 1962 window.event.returnValue=false; 1963 } 1964 if(navegador==1) event.preventDefault(); 1965 } 1966 1967 base.comienzoMovimientoDragDrop = function(event, elemento) { 1968 dragger=elemento; 1969 // Obtengo la posicion del cursor 1970 if(navegador==0){ 1971 cursorComienzoX=window.event.clientX+document.documentElement.scrollLeft+document.body.scrollLeft; 1972 cursorComienzoY=window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop; 1973 document.attachEvent("onmousemove", base.enMovimientoDragDrop); 1974 document.attachEvent("onmouseup", base.finMovimientoDragDrop); 1975 } 1976 if(navegador==1){ 1977 cursorComienzoX=event.clientX+window.scrollX; 1978 cursorComienzoY=event.clientY+window.scrollY; 1979 document.addEventListener("mousemove", base.enMovimientoDragDrop, true); 1980 document.addEventListener("mouseup", base.finMovimientoDragDrop, true); 1981 } 1982 1983 elComienzoX=parseInt(dragger.style.left); 1984 if($(dragger).attr('class')=='jpfDivForMove')elComienzoY=parseInt(dragger.style.top); 1985 // Actualizo el posicion del elemento 1986 dragger.style.zIndex=++posicionDragger; 1987 1988 base.evitaEventosDragDrop(event); 1989 1990 //si lo que estamos moviendo es el ebook, necesitamos hacer esta accion antes 1991 //recalculamos la imagenes actuales porque a veces al avanzar mas de una a la vez, no esta bien para hacer efectos de zoom o arrastar 1992 if($(dragger).attr('class')=='divForMove')base.recalculateActImages(); 1993 } 1994 1995 base.enMovimientoDragDrop = function(event) { 1996 var xActual, yActual; 1997 if(navegador==0){ 1998 xActual=window.event.clientX+document.documentElement.scrollLeft+document.body.scrollLeft; 1999 yActual=window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop; 2000 } 2001 if(navegador==1){ 2002 xActual=event.clientX+window.scrollX; 2003 yActual=event.clientY+window.scrollY; 2004 } 2005 2006 //lugarDrager=(elComienzoX+xActual-cursorComienzoX); 2007 2008 //espacio que ocupa la linea del slider en el dragger dependiendo si el slider del autoflip o del zoom 2009 switch($(dragger).attr('class')){ 2010 case 'jpfDraggerAutoFlip': 2011 lugarDragerAutoflip=(elComienzoX+xActual-cursorComienzoX); 2012 if(lugarDragerAutoflip<6)lugarDragerAutoflip=6; 2013 if(lugarDragerAutoflip>89)lugarDragerAutoflip=89; 2014 dragger.style.left=lugarDragerAutoflip+"px"; 2015 break; 2016 case 'jpfDraggerZoom': 2017 lugarDragerZoom=(elComienzoX+xActual-cursorComienzoX); 2018 if(lugarDragerZoom<23)lugarDragerZoom=19;
2019 else if(lugarDragerZoom>=23&&lugarDragerZoom<30)lugarDragerZoom=26; 2020 else if(lugarDragerZoom>=30&&lugarDragerZoom<37)lugarDragerZoom=33; 2021 else if(lugarDragerZoom>=37&&lugarDragerZoom<44)lugarDragerZoom=40; 2022 else if(lugarDragerZoom>=44&&lugarDragerZoom<51)lugarDragerZoom=47; 2023 else if(lugarDragerZoom>=51&&lugarDragerZoom<58)lugarDragerZoom=54; 2024 else if(lugarDragerZoom>=58)lugarDragerZoom=62; 2025 dragger.style.left=lugarDragerZoom+"px"; 2026 break; 2027 case 'jpfDivForMove': 2028 moveXEbookRel=xActual-cursorComienzoX; 2029 /*moveYEbookRel=(elComienzoY+yActual-cursorComienzoY)-contentY;*/ 2030 moveYEbookRel=yActual-cursorComienzoY; 2031 lugarDragerMoveX=elComienzoX+xActual-cursorComienzoX; 2032 lugarDragerMoveY=elComienzoY+yActual-cursorComienzoY; 2033 //estas en la primera 2034 if(actPage=="1"){ 2035 rightLimit=-iWidth+base.options.cornerSize+40; 2036 leftLimit=jpfWidthPP-50; 2037 }else{ 2038 //estas en la ultima y es par 2039 if((lastPage%2==0)&& actPage==lastPageOdd){ 2040 rightLimit=-iWidth+base.options.cornerSize+50; 2041 leftLimit=jpfWidthPP-40; 2042 }else{ 2043 rightLimit=2*(-iWidth+base.options.cornerSize)+40; 2044 leftLimit=jpfWidthPP-40; 2045 } 2046 } 2047 if(lugarDragerMoveX<leftLimit && lugarDragerMoveX>rightLimit && lugarDragerMoveY>(-iHeight+10) && lugarDragerMoveY<(jpfHeightDefault+jpfMiddlePadding-10)){ 2048 dragger.style.left=(lugarDragerMoveX)+"px"; 2049 dragger.style.top=(lugarDragerMoveY)+"px"; 2050 //movemos el ebook segun movemos el raton 2051 moveXEbookAbs=moveXEbookAbsIni+moveXEbookRel; 2052 moveYEbookAbs=moveYEbookAbsIni+moveYEbookRel; 2053 //recalculamos la imagenes actuales porque a veces al avanzar mas de una a la vez, no esta bien para hacer efectos de zoom o arrastar 2054 //en este caso suele pasar cuando estamos pasando paginas con zoom, es decir con animation=false 2055 base.recalculateActImages(); 2056 base.moveEbook(); 2057 } 2058 default: 2059 } 2060 //dragger.style.left=lugarDrager+"px"; 2061 base.evitaEventosDragDrop(event); 2062 } 2063 2064 base.finMovimientoDragDrop = function(event) { 2065 switch($(dragger).attr('class')){ 2066 case 'jpfDraggerAutoFlip': 2067 base.establecerVelAutoflip(); 2068 break; 2069 case 'jpfDraggerZoom': 2070 base.establecerZoom(); 2071 break; 2072 case 'jpfDivForMove': 2073 dragger.style.zIndex=154; 2074 moveXEbookAbsIni=moveXEbookAbs; 2075 moveYEbookAbsIni=moveYEbookAbs; 2076 break; 2077 default: 2078 } 2079 2080 if(navegador==0){ 2081 document.detachEvent("onmousemove", base.enMovimientoDragDrop); 2082 document.detachEvent("onmouseup", base.finMovimientoDragDrop); 2083 } 2084 if(navegador==1){ 2085 document.removeEventListener("mousemove", base.enMovimientoDragDrop, true); 2086 document.removeEventListener("mouseup", base.finMovimientoDragDrop, true); 2087 } 2088 } 2089 2090 2091 /*Fucncion que llama una vez terminado el movimiento del dragger*/ 2092 base.establecerVelAutoflip = function(){ 2093 if(lugarDragerAutoflip<=16)posDragerAutoflip=0; 2094 else if(lugarDragerAutoflip>16 && lugarDragerAutoflip<=36) posDragerAutoflip=1; 2095 else if(lugarDragerAutoflip>36 && lugarDragerAutoflip<=56) posDragerAutoflip=2; 2096 else if(lugarDragerAutoflip>56 && lugarDragerAutoflip<=76) posDragerAutoflip=3; 2097 else if(lugarDragerAutoflip>76) posDragerAutoflip=4; 2098 2099 //tiempoCicloPresentacion=velAutoflip[posDragerAutoflip]*escalaJpf*sizePage; 2100 if(escalaJpf==1)tiempoCicloPresentacion=velAutoflip[posDragerAutoflip]*sizePage; 2101 else tiempoCicloPresentacion=velAutoflip[posDragerAutoflip] 2102 2103 window.clearInterval(cicloPresentacion); 2104 cicloPresentacion=window.setInterval(function() {base.moverPaginaPresentacion(actPage+2)},tiempoCicloPresentacion); 2105 } 2106 2107 2108 2109 2110 2111 /*Fucncion que llama una vez terminado el movimiento del dragger*/ 2112 base.establecerZoom = function(){ 2113 jpfButtonsDisability2=true; 2114 base.disabledCertainButtons(); 2115 isExpanding=true; 2116 if(lugarDragerZoom==19){ 2117 nivelZoom=0; 2118 jpfZoomEscale.text('100%'); 2119 modoZoom=false; 2120 base.zoom(1); 2121 jpfAnimation=true; 2122 base.disabledZoomButton(jpfZoomMinus); 2123 base.enabledZoomButton(jpfZoomMas); 2124 }else if(lugarDragerZoom==26){ 2125 nivelZoom=1; 2126 jpfZoomEscale.text('150%'); 2127 modoZoom=true; 2128 base.zoom(1.5); 2129 jpfAnimation=false; 2130 base.enabledZoomButton(jpfZoomMinus); 2131 base.enabledZoomButton(jpfZoomMas); 2132 }else if(lugarDragerZoom==33){ 2133 nivelZoom=1; 2134 jpfZoomEscale.text('200%'); 2135 modoZoom=true; 2136 base.zoom(2); 2137 jpfAnimation=false; 2138 base.enabledZoomButton(jpfZoomMinus); 2139 base.enabledZoomButton(jpfZoomMas); 2140 }else if(lugarDragerZoom==40){ 2141 nivelZoom=1; 2142 jpfZoomEscale.text('250%'); 2143 modoZoom=true; 2144 base.zoom(2.5); 2145 jpfAnimation=false; 2146 base.enabledZoomButton(jpfZoomMinus); 2147 base.enabledZoomButton(jpfZoomMas); 2148 }else if(lugarDragerZoom==47){ 2149 nivelZoom=2; 2150 jpfZoomEscale.text('300%'); 2151 modoZoom=true; 2152 base.zoom(3); 2153 jpfAnimation=false; 2154 base.enabledZoomButton(jpfZoomMinus); 2155 base.enabledZoomButton(jpfZoomMas); 2156 }else if(lugarDragerZoom==54){ 2157 nivelZoom=2; 2158 jpfZoomEscale.text('350%'); 2159 modoZoom=true; 2160 base.zoom(3.5); 2161 jpfAnimation=false; 2162 base.enabledZoomButton(jpfZoomMinus); 2163 base.enabledZoomButton(jpfZoomMas); 2164 }else if(lugarDragerZoom==62){ 2165 nivelZoom=2; 2166 jpfZoomEscale.text('400%'); 2167 modoZoom=true; 2168 base.zoom(4); 2169 jpfAnimation=false; 2170 base.enabledZoomButton(jpfZoomMinus); 2171 base.disabledZoomButton(jpfZoomMas); 2172 } 2173 } 2174 2175 base.zoom=function(escale){ 2176 base.loadNecessaryPageToAction(actPage,actPage-1,function(){ 2177 //borras la sombra 2178 ctx2.clearRect(0,0,jpfWidthPP,jpfHeightPP); 2179 2180 escalaJpf=escale; 2181 //tiempoCicloPresentacion= velAutoflip[posDragerAutoflip]*escalaJpf*sizePage; 2182 if(escalaJpf==1)tiempoCicloPresentacion=velAutoflip[posDragerAutoflip]*sizePage; 2183 else tiempoCicloPresentacion=velAutoflip[posDragerAutoflip]
2184 //recalculamos la imagenes actuales porque a veces al avanzar mas de una a la vez, no esta bien para hacer efectos de zoom o arrastar 2185 base.recalculateActImages(); 2186 2187 //si es uno volvemos a colocar todo en su lugar de origen 2188 if(escale==1){ 2189 moveXEbookAbs=0; 2190 moveYEbookAbs=0; 2191 moveXEbookAbsIni=0; 2192 moveYEbookAbsIni=0; 2193 } 2194 2195 var iWidthPrevious=iWidth; 2196 var iHeightPrevious=iHeight; 2197 iWidth=parseInt(iWidthWithoutZoom*escale); 2198 iHeight=parseInt(iHeightWithoutZoom*escale); 2199 2200 var contentXWithoutMovePrevious=contentXWithoutMove; 2201 contentXWithoutMove=(jpfWidthDefault-iWidth)+jpfLatIzquierda; 2202 contentX=contentXWithoutMove+moveXEbookAbs; 2203 2204 var contentYWithoutMovePrevious=contentYWithoutMove; 2205 contentYWithoutMove=(parseInt((jpfHeightDefault-iHeight)/2))+jpfTopDefault; 2206 contentY=contentYWithoutMove+moveYEbookAbs; 2207 2208 var innerMxPrevious=innerMx; 2209 innerMx = iWidth + contentX; 2210 innerMy = iHeight; 2211 2212 //si el ebbok va a desaparecer al hacer zoom, recalculamos para que no pase. 2213 if(contentY>(jpfHeightDefault+jpfMiddlePadding-50)){ 2214 contentYWithoutMove=contentYWithoutMovePrevious; 2215 contentY=contentYWithoutMove+moveYEbookAbs; 2216 } 2217 if(contentY<(-iHeight+50)){ 2218 contentY=(iHeightPrevious+contentYWithoutMovePrevious+moveYEbookAbs)-iHeight; 2219 contentYWithoutMove=contentY-moveYEbookAbs; 2220 } 2221 if(contentX>(jpfWidthPP-50)){ 2222 contentXWithoutMove=contentXWithoutMovePrevious; 2223 contentX=contentXWithoutMove+moveXEbookAbs; 2224 } 2225 /*if(innerMx<(-(iWidth-base.options.cornerSize))){*/ 2226 if(innerMx<(-iWidth+50)){ 2227 //innerMx=-(iWidth-(iWidthPrevious+innerMxPrevious)); 2228 innerMx=iWidthPrevious+innerMxPrevious-iWidth; 2229 contentX=innerMx-iWidth; 2230 contentXWithoutMove=contentX-moveXEbookAbs; 2231 } 2232 2233 base.loadNecessaryPageForNextMove(actPage+1,actPage+2,actPage-2,actPage-3); 2234 2235 //colocamos la revista
2236 $('#pageBackgroundLeft').animate({"width":iWidth,"height":iHeight,"left":contentX,"top":contentY},"slow"); 2237 $('#pageBackgroundRight').animate({"width":iWidth,"height":iHeight,"left":innerMx,"top":contentY},"slow"); 2238 $('#pageBackgroundLeft2').animate({"width":iWidth,"height":iHeight,"left":contentX,"top":contentY},"slow"); 2239 $('#pageBackgroundRight2').animate({"width":iWidth,"height":iHeight,"left":innerMx,"top":contentY},"slow"); 2240 2241 $('#pageBackgroundRight img').animate({"width":iWidth,"height":iHeight},"slow"); 2242 $('#pageBackgroundRight2 img').animate({"width":iWidth,"height":iHeight},"slow"); 2243 $('#pageBackgroundLeft2 img').animate({"width":iWidth,"height":iHeight},"slow"); 2244 $('#pageBackgroundLeft img').animate({"width":iWidth,"height":iHeight},"slow",function(){ 2245 //dibujas la sombra 2246 base.drawShadowsBack(); 2247 // esquinas 2248 if (base.options.showCorner) 2249 base.drawCorners(); 2250 //termina de ampliarse o reducirse la pagina 2251 jpfButtonsDisability2=false; 2252 base.enabledCertainButtons(); 2253 isExpanding=false; 2254 }); 2255 2256 //aumnetamos el tamaño de la capa de mover 2257 base.calculateSizeDivForMove(); 2258 base.zIndexDivForMove(); 2259 }); 2260 } 2261 2262 2263 // ****************************************************************************** 2264 //Mueve la revista cuando esta el zoom 2265 // ****************************************************************************** 2266 base.moveEbook = function() { 2267 contentX=contentXWithoutMove+moveXEbookAbs; 2268 contentY=contentYWithoutMove+moveYEbookAbs; 2269 innerMx = iWidth + contentX; 2270 //reiniciamos la sombra 2271 ctx2.clearRect(0,0,jpfWidthPP,jpfHeightPP); 2272 base.drawShadowsBack(); 2273
2274 $('#pageBackgroundLeft').css({'left': (innerMx - iWidth) + 'px','top': contentY + 'px'}); 2275 $('#pageBackgroundRight').css({'left':innerMx + 'px','top':contentY + 'px'}); 2276 $('#pageBackgroundLeft2').css({'left': (innerMx - iWidth) + 'px','top':contentY + 'px'}); 2277 $('#pageBackgroundRight2').css({'left':innerMx + 'px','top':contentY + 'px'}); 2278 2279 } 2280 2281 base.recalculateActImages = function() { 2282 //elimina la imagen que es canvas y no se puede mover 2283 ctx.clearRect(0,0,jpfWidthPP,jpfHeightPP); 2284 //pone las imagenes adecuadas 2285 base.loadResource($('#pageBackgroundLeft'),actPage-1); 2286 base.loadResource($('#pageBackgroundRight'),actPage); 2287 if (base.options.showCorner) 2288 base.drawCorners(); 2289 return true; 2290 } 2291 2292 2293 2294 2295 // ****************************************************************************** 2296 //Calcular el tamaño de divForMove, cuando se mueven paginas o se da al zoom 2297 // ****************************************************************************** 2298 base.calculateSizeDivForMove = function() { 2299 //estas en la 1 2300 if(actPage=="1"){ 2301 jpfDivForMove.css({'width':iWidth-base.options.cornerSize,'height':iHeight,'left':iWidth + contentXWithoutMove+moveXEbookAbs,'top':contentYWithoutMove+moveYEbookAbs}); 2302 }else{ 2303 //estas en la ultima y es par 2304 if((lastPage%2==0)&& actPage==lastPageOdd){ 2305 jpfDivForMove.css({'position':'absolute','width':iWidth-base.options.cornerSize,'height':iHeight,'left':contentXWithoutMove+base.options.cornerSize+moveXEbookAbs,'top':contentYWithoutMove+moveYEbookAbs}); 2306 }else{ 2307 //estas en la ultima y es impar ó en las del medio 2308 jpfDivForMove.css({'position':'absolute','width':2*(iWidth-base.options.cornerSize),'height':iHeight,'left':contentXWithoutMove+moveXEbookAbs+base.options.cornerSize,'top':contentYWithoutMove+moveYEbookAbs}); 2309 } 2310 } 2311 } 2312 2313 //****************************************************************************** 2314 //Calcular el zindex divForMove, dependiendo de si estamos en zoom o no 2315 // ****************************************************************************** 2316 base.zIndexDivForMove= function() { 2317 if(modoZoom)jpfDivForMove.css({'z-index':'154'}); 2318 else jpfDivForMove.css({'z-index':'2'}); 2319 } 2320 2321 2322 2323 2324 // ****************************************************************************** 2325 //Controles para mover la revista. fuera del base que ya tenia eventos del raton asociados 2326 // ****************************************************************************** 2327 jpfDivForMove.mousedown(function(event){ 2328 //la imagen tiene que estar ampliada, pero no puede estar en modo presentacion ni miniaturas 2329 if(modoZoom && !modoPresentacion && !modoMiniaturas && !isExpanding){ 2330 base.comienzoMovimientoDragDrop(event, this); 2331 } 2332 }); 2333 2334 jpfDivForMove.bind("mouseover mousemove",function(){ 2335 //la imagen tiene que estar ampliada, pero no puede estar en modo presentacion ni miniaturas 2336 if(modoZoom && !modoPresentacion && !modoMiniaturas && !isExpanding){ 2337 $(this).get(0).style.cursor='move'; 2338 }else{ 2339 $(this).get(0).style.cursor='default'; 2340 } 2341 }); 2342 2343 2344 2345 // ****************************************************************************** 2346 // Imprimir 2347 // ****************************************************************************** 2348 2349 base.imprimirPageFlip = function(pagSrc) { 2350 base.loadIframePF(pagSrc); 2351 $(".printPageFlipIframeId").load(function() { 2352 $(this)[0].focus(); 2353 $(this)[0].contentWindow.print(); 2354 }); 2355 } 2356 base.loadIframePF = function(src) { 2357 $(".jpfIframeHolder").html("<iframe class='printPageFlipIframeId' name='printPageFlipIframeName' src='" + src + "'/>") 2358 } 2359 2360 2361 2362 2363 2364 2365 // ****************************************************************************** 2366 // Crear y animar miniaturas 2367 // ****************************************************************************** 2368 base.crearAnimarMiniaturas = function() { 2369 var altoThumbnailsContainer=(iHeightWithoutZoom/3); 2370 var anchoMarginCadaThumbnail=(iWidthWithoutZoom/3); 2371 var anchoCadaThumbnail=parseInt((iWidthWithoutZoom/3.5)); 2372 var altoCadaThumbnail=parseInt((iHeightWithoutZoom/3.5));
2373 var numThumbnails =lastPage; 2374 var anchoTodosThumbnails=(numThumbnails*anchoMarginCadaThumbnail); 2375 //donde se guardan las imagenes a cargar 2376 var contenidoThumbnailsJpf; 2377 2378 modoMiniaturas=true; 2379 jpfButtonsDisability1=true; 2380 base.disabledCertainButtons(); 2381 2382 jpfNext.not("a.jpfNext").fadeOut(500); 2383 jpfPrev.not("a.jpfPrev").fadeOut(500); 2384 2385 if($(".miniaturasContainer",base.$container).length>0){ 2386 //mostramos la estructura, porque ya existe 2387 $(".miniaturasContainer",base.$container).fadeIn(500); 2388 }else{ 2389 //Creamos la estructura, que todavia no existe 2390 base.$container.append('<div class="miniaturasContainer"><div id="jpfLeftThumbnails"><a href=""><img src="'+_rootWeb+'/javaScript/jpageflip/images/prevThumbnails.jpg" width="'+anchoFlechasThumbnails+'" height="'+altoThumbnailsContainer+'" alt="" /></a></div><div class="thumbnailsContainer"><div class="thumbnailsContainerInner"></div></div><div id="jpfRightThumbnails"><a href=""><img src="'+_rootWeb+'/javaScript/jpageflip/images/nextThumbnails.jpg" width="'+anchoFlechasThumbnails+'" height="'+altoThumbnailsContainer+'" alt="" /></a></div></div>'); 2391 $(".miniaturasContainer",base.$container).fadeIn(500); 2392 } 2393 2394 $(".miniaturasContainer",base.$container).height(altoThumbnailsContainer); 2395 //añadimos estilos para las imagenes 2396 var cssStyle = "<style type=\"text/css\" id=\"styleWidthControls\">\n"; 2397 cssStyle += " \ 2398 #jpfBody .thumbnailsContainer img{\n \ 2399 float:left;\n \ 2400 margin-top: "+((altoThumbnailsContainer-altoCadaThumbnail)/2)+"px;\n \ 2401 margin-left: "+((anchoMarginCadaThumbnail-anchoCadaThumbnail))+"px;\n \ 2402 }\n"; 2403 cssStyle += "</style>"; 2404 $(cssStyle).appendTo("head"); 2405 2406 2407 var anchoThumbnailsContainer=($(".miniaturasContainer").width()-(2*anchoFlechasThumbnails)); 2408 2409 var nextThumbnails=$(".miniaturasContainer #jpfRightThumbnails a",base.$container); 2410 var prevThumbnails=$(".miniaturasContainer #jpfLeftThumbnails a",base.$container); 2411 2412 2413 //funcion para cargar las miniaturas bajo demanda 2414 loadThumbnails = function(fnLoad){ 2415 var loaded; 2416 contenidoThumbnailsJpf=''; 2417 for(i=((numThumbnailsToSee*(numClickUser-1))+1);i<=((numThumbnailsToSee*numClickUser)+2);i++){ 2418 if(flipThumbnails[i]==false){ 2419 flipThumbnails[i]=true; 2420 contenidoThumbnailsJpf+='<img class="seccion'+numClickUser +' thumbnailsJpf'+i+'" src="' + flipImageSrc[i]+'?width=' + anchoCadaThumbnail+'&height='+altoCadaThumbnail+'" width="' + anchoCadaThumbnail+'" height="'+altoCadaThumbnail+'"/>'; 2421 } 2422 } 2423 if(contenidoThumbnailsJpf!=''){ 2424 //si habia imagenes que no estaban cargadas 2425 jpfLoader.show().css({'z-index':'999'}); 2426 $('.thumbnailsContainer .thumbnailsContainerInner').append(contenidoThumbnailsJpf); 2427 $('.thumbnailsContainer img.seccion'+numClickUser).css('visibility','hidden'); 2428 //cuando se hayan cargado, avanzamos 2429 loaded=0; 2430 $('.thumbnailsContainer img.seccion'+numClickUser).load(function(){ 2431 loaded++; 2432 if (loaded == $('.thumbnailsContainer img.seccion'+numClickUser).length) { 2433 jpfLoader.hide().css({'z-index':'-999'}); 2434 $('.thumbnailsContainer img.seccion'+numClickUser).css('visibility','visible'); 2435 if(typeof(fnLoad) == 'function') {fnLoad();} 2436 } 2437 }); 2438 }else{ 2439 //si todas las imagenes estaban cargadas 2440 if(typeof(fnLoad) == 'function') {fnLoad();} 2441 } 2442 } 2443 2444 2445 /*mostrar flecha next*/ 2446 function mostrarNext(){ 2447 if(numClick>numClickUser){ 2448 nextThumbnails.css({'opacity':'0.9','cursor':'pointer'}); 2449 }else{ 2450 nextThumbnails.css({'opacity':'0.2','cursor':'default'}); 2451 } 2452 } 2453 2454 /*mostrar flecha prev*/ 2455 function mostrarPrev(){ 2456 if(1<numClickUser){ 2457 prevThumbnails.css({'opacity':'0.9','cursor':'pointer'}); 2458 }else{ 2459 prevThumbnails.css({'opacity':'0.2','cursor':'default'}); 2460 } 2461 } 2462 2463 //ir al siguiente 2464 rotateNext = function(){ 2465 numClickUser++; 2466 if(numClickUser>numClick){ 2467 numClickUser--; 2468 }else{ 2469 //se comprueba si esta cargada una imagen que se veria en el siguiente click
2470 if(flipThumbnails[numThumbnailsToSee*numClickUser]==false){ 2471 //si no esta cargada, cargamos esa seccion de miniaturas 2472 loadThumbnails(rotateNextAction); 2473 }else{ 2474 //si las imagenes ya estan cargadas, avanzamos 2475 rotateNextAction(); 2476 } 2477 } 2478 }; 2479 2480 2481 rotateNextAction = function(){ 2482 //accion a realizar cuando las imagenes estan cargadas 2483 contador++; 2484 //Determines the distance the image reel needs to slide 2485 var image_reelPosition = (contador * anchoAMover) -leftInicial; 2486 //Slider Animation 2487 $(".miniaturasContainer .thumbnailsContainerInner",base.$container).animate({ 2488 left: -image_reelPosition 2489 }, 500 ); 2490 2491 prevThumbnails.css({'opacity':'0.9','cursor':'pointer'}); 2492 2493 var siguienteMov=((contador+1)*anchoAMover) + leftInicial; 2494 mostrarNext(); 2495 } 2496 2497 //ir al anterior 2498 rotatePrev = function(){ 2499 //no hace falta comprobar si estan cargadas, porque las anteriores siempre están cargadas 2500 numClickUser--; 2501 if(numClickUser<1){ 2502 numClickUser++; 2503 }else{ 2504 //Determines the distance the image reel needs to slide 2505 var image_reelPosition = (anchoAMover)-(contador * anchoAMover) + leftInicial; 2506 if (image_reelPosition==0)image_reelPosition=leftInicial; 2507 contador--; 2508 //Slider Animation 2509 $(".miniaturasContainer .thumbnailsContainerInner",base.$container).animate({ 2510 left: image_reelPosition 2511 }, 500 ); 2512 2513 mostrarNext(); 2514 mostrarPrev() 2515 } 2516 }; 2517 2518 var contador=0; 2519 //numero de imagenes que se ven entereas 2520 var numThumbnailsToSee=(parseInt(anchoThumbnailsContainer/anchoMarginCadaThumbnail)); 2521 2522 var numClick=parseInt(numThumbnails/numThumbnailsToSee); 2523 if((numThumbnails%numThumbnailsToSee)!=0)numClick++; 2524 var numClickUser=1;//numero de click del usuario 2525 var anchoAMover =(anchoMarginCadaThumbnail *numThumbnailsToSee); 2526 var leftInicial=anchoFlechasThumbnails; 2527 2528 //cargamos las miniaturas de la primera seccion 2529 loadThumbnails(); 2530 2531 $(".miniaturasContainer .thumbnailsContainerInner",base.$container).width(anchoTodosThumbnails).css({'left':anchoFlechasThumbnails}); 2532 2533 mostrarPrev(); 2534 mostrarNext(); 2535 } 2536 2537 //evento click para las imagenes 2538 $("#jpfBody").delegate('.thumbnailsContainer img', "click", function(){ 2539 base.borrarMiniaturas(); 2540 //recogemos de la clase que numero de hoja es 2541 var aux = $(this).attr('class').split(" "); 2542 base.goToPage(parseInt(aux[1].substring(13)),jpfAnimation); 2543 }); 2544 2545 $("#jpfBody").delegate(".miniaturasContainer #jpfRightThumbnails a","click",function(){ 2546 rotateNext(); 2547 return false; 2548 }); 2549 2550 $("#jpfBody").delegate(".miniaturasContainer #jpfLeftThumbnails a","click",function(){ 2551 rotatePrev(); 2552 return false; 2553 }); 2554 2555 2556 base.borrarMiniaturas = function() { 2557 modoMiniaturas=false; 2558 jpfButtonsDisability1=false; 2559 base.enabledCertainButtons(); 2560 jpfNext.not("a.jpfNext").fadeIn(500); 2561 jpfPrev.not("a.jpfPrev").fadeIn(500); 2562 $(".miniaturasContainer",base.$container).fadeOut(500); 2563 } 2564 2565 2566 2567 // ****************************************************************************** 2568 // Devuelve una medida sin pixeles 2569 // ****************************************************************************** 2570 base.getValueWithoutPx=function (valor){ 2571 return parseInt(valor.substr(0,valor.indexOf('px'))); 2572 } 2573 2574 2575 // ****************************************************************************** 2576 // Calcula lo que ocupa de ancho un div 2577 // ****************************************************************************** 2578 base.calculateWidthDiv=function(elem){ 2579 return parseInt(elem.width())+base.getValueWithoutPx(elem.css("padding-left"))+base.getValueWithoutPx(elem.css("padding-right"))+base.getValueWithoutPx(elem.css("margin-left"))+base.getValueWithoutPx(elem.css("margin-right")); 2580 } 2581 2582 // ****************************************************************************** 2583 // Calcula lo que ocupa de alto un div 2584 // ****************************************************************************** 2585 base.calculateHeightDiv=function(elem){ 2586 return parseInt(elem.height())+base.getValueWithoutPx(elem.css("padding-top"))+base.getValueWithoutPx(elem.css("padding-bottom"))+base.getValueWithoutPx(elem.css("margin-top"))+base.getValueWithoutPx(elem.css("margin-bottom")); 2587 } 2588 2589 // ****************************************************************************** 2590 // funciones de pantalla completa 2591 // ****************************************************************************** 2592 var ventana; 2593 2594 base.pantallacompleta =function(tkJPageFlip){ 2595 params=''; 2596 params += 'width='+screen.width; 2597 params += ', height='+screen.height; 2598 params += ', top=0, left=0' 2599 params += ', resizable=0'; 2600 2601 jpfEbookCongig=encodeURIComponent(jpfPath); 2602 2603 ventana=window.open(_rootWeb+"/cm/"+tkJPageFlip+"?jpfPage="+actPage+"&jpfEbookConfig="+jpfEbookCongig,'', params); 2604 openFullScreen(ventana.document.body); 2605 return false;
2606 } 2607 2608 document.onkeydown = function(event) { 2609 var key; 2610 if(window.event || !event.which) { 2611 // IE 2612 key = event.keyCode; 2613 }else if(event) { 2614 // netscape 2615 key = event.which; 2616 }else{ 2617 return true; 2618 } 2619 //si estamos en pantalla completa y pulsamos escape, cierra la ventana 2620 if(key==27 && document.getElementById("fullWindowDiv")!=null)self.close(); 2621 }; 2622 2623 2624 2625 2626 2627 // ****************************************************************************** 2628 // Input donde se muestran las paginas 2629 // ****************************************************************************** 2630 jpfNavFormPagesInput.focus(function(){ 2631 if(!jpfButtonsDisability1 && !jpfButtonsDisability2){ 2632 $(this).val(""); 2633 } 2634 }); 2635 2636 jpfNavFormPagesInput.blur(function(){ 2637 base.showActualPage(); 2638 }); 2639 2640 jpfNavFormPages.submit(function(){ 2641 var numPag=jpfNavFormPagesInput.val(); 2642 if(!isNaN(numPag) && numPag!="" && numPag>=1 && numPag<=lastPage){ 2643 if(!jpfButtonsDisability1 && !jpfButtonsDisability2){ 2644 base.goToPage(numPag,jpfAnimation); 2645 jpfNavFormPagesInput.blur(); 2646 } 2647 } 2648 return false; 2649 }); 2650 2651 2652 // ****************************************************************************** 2653 // Input de ir a paginas 2654 // ****************************************************************************** 2655 jpfNavFormGoTo.submit(function(){ 2656 var numPag=jpfNavFormGoToInput.val(); 2657 if(!isNaN(numPag) && numPag!="" && numPag>=1 && numPag<=lastPage){ 2658 if(!jpfButtonsDisability1 && !jpfButtonsDisability2){ 2659 base.goToPage(numPag,jpfAnimation); 2660 jpfNavFormGoToInput.blur(); 2661 } 2662 } 2663 return false; 2664 }); 2665 2666 jpfNavFormGoToInput.focus(function(){ 2667 if(!jpfButtonsDisability1 && !jpfButtonsDisability2){ 2668 $(this).val(""); 2669 } 2670 }); 2671 2672 2673 // ****************************************************************************** 2674 // Controles para avanzar al siguiente, anterior... 2675 // ****************************************************************************** 2676 jpfFirst.click(function(event){ 2677 //si no esta deshabilitado 2678 if(!jpfButtonsDisability1 && !jpfButtonsDisability2){ 2679 //indico si he dado click. importante para quirar el mouseenter pero no museleave del tipsy 2680 jpfFirstClick=true; 2681 if(actPage!="1") base.goToPage(1,jpfAnimation); 2682 } 2683 event.preventDefault(); 2684 }); 2685 jpfPrev.click(function(event){ 2686 //si no esta deshabilitado 2687 if(!jpfButtonsDisability1 && !jpfButtonsDisability2){ 2688 //indico si he dado click. importante para quirar el mouseenter pero no museleave del tipsy 2689 if($(this).attr('class')=="jpfPrev jpfNavButton")jpfPrevClick=true; 2690 //como coges los impares para ir para atras necesitas coger el siguiente impar 2691 if(actPage!="1") base.goToPage(parseInt(actPage)-2,jpfAnimation); 2692 } 2693 event.preventDefault(); 2694 }); 2695 jpfNext.click(function(event){ 2696 //si no esta deshabilitado 2697 if(!jpfButtonsDisability1 && !jpfButtonsDisability2){ 2698 //indico si he dado click. importante para quirar el mouseenter pero no museleave del tipsy 2699 if($(this).attr('class')=="jpfNext jpfNavButton")jpfNextClick=true; 2700 //si ponemos +2 tambien valdria, excepto para la ultima pagina si son pares 2701 //aqui el uno mas se suma en la funcion goToPage 2702 if(actPage!=lastPageOdd)base.goToPage(parseInt(actPage)+1,jpfAnimation); 2703 } 2704 event.preventDefault(); 2705 }); 2706 jpfLast.click(function(event){ 2707 //si no esta deshabilitado 2708 if(!jpfButtonsDisability1 && !jpfButtonsDisability2){ 2709 //indico si he dado click. importante para quirar el mouseenter pero no museleave del tipsy 2710 jpfLastClick=true; 2711 if(actPage!=lastPageOdd)base.goToPage(lastPage,jpfAnimation); 2712 } 2713 event.preventDefault(); 2714 }); 2715 2716 2717 2718 // ****************************************************************************** 2719 // Funciones cuando se pulsa en el dragger del autoflip 2720 // ****************************************************************************** 2721 jpfDraggerAutoFlip.mousedown(function(event){ 2722 if(modoPresentacion){ 2723 base.comienzoMovimientoDragDrop(event, this); 2724 } 2725 }); 2726 2727 jpfDraggerAutoFlip.mouseover(function(){ 2728 if(modoPresentacion){ 2729 $(this).get(0).style.cursor='pointer'; 2730 } 2731 }); 2732 2733 2734 // ****************************************************************************** 2735 // Funciones cuando se pulsa en el dragger del zoom 2736 // ****************************************************************************** 2737 jpfDraggerZoom.mousedown(function(event){ 2738 if(!jpfButtonsDisability1 && !jpfButtonsDisability2){ 2739 base.comienzoMovimientoDragDrop(event, this); 2740 } 2741 }); 2742 2743 jpfDraggerZoom.mouseover(function(){ 2744 if(!jpfButtonsDisability1 && !jpfButtonsDisability2){ 2745 $(this).get(0).style.cursor='pointer'; 2746 } 2747 }); 2748 2749 jpfZoomMas.click(function(){ 2750 if(!jpfButtonsDisability1 && !jpfButtonsDisability2 && escalaJpf!=4){ 2751 dragger=jpfDraggerZoom.get(0); 2752 if(lugarDragerZoom==0 || lugarDragerZoom==19)lugarDragerZoom=26; 2753 else if(lugarDragerZoom==26)lugarDragerZoom=33; 2754 else if(lugarDragerZoom==33)lugarDragerZoom=40; 2755 else if(lugarDragerZoom==40)lugarDragerZoom=47; 2756 else if(lugarDragerZoom==47)lugarDragerZoom=54; 2757 else if(lugarDragerZoom==54)lugarDragerZoom=62; 2758 dragger.style.left=lugarDragerZoom+"px"; 2759 base.establecerZoom(); 2760 } 2761 }); 2762 2763 jpfZoomMinus.click(function(){ 2764 if(!jpfButtonsDisability1 && !jpfButtonsDisability2 && escalaJpf!=1){ 2765 dragger=jpfDraggerZoom.get(0); 2766 if(lugarDragerZoom==26)lugarDragerZoom=19;
2767 else if(lugarDragerZoom==33)lugarDragerZoom=26; 2768 else if(lugarDragerZoom==40)lugarDragerZoom=33; 2769 else if(lugarDragerZoom==47)lugarDragerZoom=40; 2770 else if(lugarDragerZoom==54)lugarDragerZoom=47; 2771 else if(lugarDragerZoom==62)lugarDragerZoom=54; 2772 dragger.style.left=lugarDragerZoom+"px"; 2773 base.establecerZoom(); 2774 } 2775 }); 2776 2777 2778 2779 // ****************************************************************************** 2780 // botones de Imprimir 2781 // ****************************************************************************** 2782 jpfPrintRightButton.click(function(event){ 2783 //si no esta deshabilitado 2784 if(!jpfButtonsDisability1 && !jpfButtonsDisability2){ 2785 if(!((lastPage%2==0)&& (actPage==lastPageOdd))){ 2786 base.imprimirPageFlip(flipImageSrc[actPage]); 2787 } 2788 } 2789 event.preventDefault(); 2790 }); 2791 2792 jpfPrintLeftButton.click(function(event){ 2793 //si no esta deshabilitado 2794 if(!jpfButtonsDisability1 && !jpfButtonsDisability2){ 2795 if(actPage!="1"){ 2796 base.imprimirPageFlip(flipImageSrc[actPage-1]); 2797 } 2798 } 2799 event.preventDefault(); 2800 }); 2801 2802 2803 // ****************************************************************************** 2804 // botones de Miniaturas 2805 // ****************************************************************************** 2806 jpfThumbnailsButton.click(function(event){ 2807 //si no esta deshabilitado 2808 if(!modoPresentacion && !jpfButtonsDisability2){ 2809 if(!modoMiniaturas){ 2810 base.crearAnimarMiniaturas(); 2811 }else{ 2812 base.borrarMiniaturas(); 2813 } 2814 } 2815 event.preventDefault(); 2816 }); 2817 2818 // ****************************************************************************** 2819 // iniciar presentacion 2820 // ****************************************************************************** 2821 jpfPlayButton.click(function(event){ 2822 //no tiene que estar la presentacion iniciada ni estar en modo miniaturas 2823 if(!modoPresentacion && !modoMiniaturas){ 2824 modoPresentacion=true; 2825 jpfPlayButton.css({'display':'none'}).unbind('mouseenter'); 2826 jpfPauseButton.css({'opacity':'1','cursor':'pointer','display':'block'}).tipsy(valueTipsy); 2827 jpfDraggerAutoFlip.css({'opacity':'1','cursor':'pointer'}); 2828 jpfSliderAutoFlip.css({'opacity':'1'}); 2829 jpfButtonsDisability1=true; 2830 base.disabledCertainButtons(); 2831 base.iniciarPresentacion(); 2832 } 2833 event.preventDefault(); 2834 }); 2835 2836 2837 jpfPauseButton.click(function(event){ 2838 if(modoPresentacion){ 2839 modoPresentacion=false; 2840 jpfPauseButton.css({'display':'none'}).unbind('mouseenter'); 2841 jpfDraggerAutoFlip.css({'opacity':'0.3','cursor':'default'}); 2842 jpfSliderAutoFlip.css({'opacity':'0.3'}); 2843 jpfPlayButton.css({'opacity':'1','cursor':'pointer','display':'block'}).tipsy(valueTipsy); 2844 jpfButtonsDisability1=false; 2845 base.enabledCertainButtons(); 2846 window.clearInterval(cicloPresentacion); 2847 } 2848 event.preventDefault(); 2849 }); 2850 2851 2852 // ****************************************************************************** 2853 // boton de pantalla completa 2854 // ****************************************************************************** 2855 jpfFullscreenButton.click(function(event){ 2856 event.preventDefault(); 2857 if(!jpfButtonsDisability1 && !jpfButtonsDisability2){ 2858 if(!modoPantallaCompleta){ 2859 base.pantallacompleta(jpfFullscreenButton.attr('href')); 2860 }else{ 2861 window.close(); 2862 } 2863 } 2864 //no queremos que se produzca el evento click asociado al body 2865 return false; 2866 }); 2867 2868 2869 $(".pp_overlay,.pp_pic_holder,body.fullWindowBody").mouseup(function(event){ 2870 if (!modoZoom){ 2871 base._mouseUp(event); 2872 } 2873 }); 2874 2875 // ****************************************************************************** 2876 // cuando se cierra el pageflip. eliminamos el interval y más acciones 2877 // ****************************************************************************** 2878 $.jPageFlip.close=function(){ 2879 window.clearInterval(cicloPresentacion); 2880 $(".pp_overlay,.pp_pic_holder,body.fullWindowBody").unbind("mouseup"); 2881 } 2882 2883 2884 /*************************************************************/ 2885 /* Run initializer */ 2886 /*************************************************************/ 2887 base.init(); 2888 2889}; 2890 2891 2892 2893 $.fn.jPageFlip = function(options){ 2894 return this.each(function(){ 2895 (new $.jPageFlip(this, options)); 2896 }); 2897 }; 2898 2899 $.fn.getjPageFlip = function(){ 2900 return this.data("jPageFlip"); 2901 }; 2902 2903 // This function decodes the data stored in data in the 2904 // way ([key="value"])+, it converts this information 2905 // to an array indexed by key 2906 function decodeMap(data) { 2907 // The regular expresion we are going to eval 2908 var regexExpr = /\[([^=]+)=\"([^\"]+)\"\]/g; 2909 var results = regexExpr.exec(data); 2910 // The array - in which we are going to store data (indexed as a map of arrays) 2911 var resultsArray = new Array(); 2912 while(results!=null) { 2913 // If the key exists in the map we add a new entry to it. 2914 if(resultsArray[results[1]]) { 2915 resultsArray[results[1]][resultsArray[results[1]].length] = results[2]; 2916 } else { 2917 resultsArray[results[1]] = new Array(); 2918 resultsArray[results[1]][0] = results[2]; 2919 } 2920 // We check for new data... 2921 results = regexExpr.exec(data); 2922 } 2923 // Finally, we have eval the array, so we can return it. 2924 return resultsArray; 2925 } 2926})(jQuery); 2927 2928function HexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)} 2929function HexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)} 2930function HexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)} 2931function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h} 2932 2933 2934//****************************************************************************** 2935//Para coger los valores de una variable 2936// ****************************************************************************** 2937function jpfPageQuery(q) { 2938 if(q.length > 1) this.q = q.substring(1, q.length); 2939 else this.q = null; 2940 this.keyValuePairs = new Array(); 2941 if(q) { 2942 for(var i=0; i < this.q.split("&").length; i++) { 2943 this.keyValuePairs[i] = this.q.split("&")[i]; 2944 } 2945 } 2946 2947 this.getKeyValuePairs = function() { return this.keyValuePairs; } 2948 this.getValueAsArray = function(s) { 2949 // Puede ser un array de datos... 2950 var results = new Array(); 2951 for(var j=0; j < this.keyValuePairs.length; j++) { 2952 if(this.keyValuePairs[j].split("=")[0] == s) { 2953 results[results.length] = unescape(this.keyValuePairs[j].split("=")[1]); 2954 } 2955 } 2956 2957 if(results.length == 0) return false;
2958 return results; 2959 } 2960 this.getValue = function(s) { 2961 var results = this.getValueAsArray(s); 2962 if(!results) return false; 2963 return results[0]; 2964 } 2965 2966 this.getParameters = function() { 2967 var a = new Array(this.getLength()); 2968 for(var j=0; j < this.keyValuePairs.length; j++) { 2969 a[j] = this.keyValuePairs[j].split("=")[0]; 2970 } 2971 return a; 2972 } 2973 2974 this.getLength = function() { return this.keyValuePairs.length; } 2975} 2976 2977function jpfQueryString(key){ 2978 var page = new jpfPageQuery(window.location.search); 2979 return page.getValue(key); 2980} 2981 2982//****************************************************************************** 2983//Para hacer elementos no seleccionables 2984// ****************************************************************************** 2985jQuery.fn.extend({ 2986 disableSelection : function() { 2987 return this.each(function() { 2988 this.onselectstart = function() { return false; }; 2989 this.unselectable = "on"; 2990 jQuery(this).css('user-select', 'none'); 2991 jQuery(this).css('-o-user-select', 'none'); 2992 jQuery(this).css('-moz-user-select', 'none'); 2993 jQuery(this).css('-khtml-user-select', 'none'); 2994 jQuery(this).css('-webkit-user-select', 'none'); 2995 }); 2996 } 2997}); 2998 2999 3000//****************************************************************************** 3001//para hacer pantalla completa segun el navegador 3002// ****************************************************************************** 3003function openFullScreen(obj){ 3004 if (obj.requestFullScreen) { 3005 obj.requestFullScreen(); 3006 } else if (obj.msRequestFullscreen) { 3007 obj.msRequestFullscreen(); 3008 } else if (obj.mozRequestFullScreen) { 3009 obj.mozRequestFullScreen(); 3010 } else if (obj.webkitRequestFullScreen) { 3011 obj.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 3012 } 3013}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.