Skip to first unread message
Jérémy Guyenot
Dec 20, 2017, 11:44:33 AM12/20/17
to PDFTron WebViewer
Hi,
in PDFTron Viewer 2.2.2, we added the drag and drop in thumbnails to move pages.
But in 3.0.1 and 3.1.0, this is not possible. Are you block the drag and drop events? (all browser are impacted)
here the code in our config.js
in PDFTron Viewer 2.2.2, we added the drag and drop in thumbnails to move pages.
But in 3.0.1 and 3.1.0, this is not possible. Are you block the drag and drop events? (all browser are impacted)
here the code in our config.js
$uidisplay = $("#ui-display");
$uidisplay.on("dragstart", function(event) {
try{
if($.type(event.originalEvent.dataTransfer)!="undefined"){
event.originalEvent.dataTransfer.setData("text","");
event.originalEvent.dataTransfer.setDragImage(dragImg, 10, 10);
}
}
catch (e) {
e.message;
}
$dragCanvas = _createCanvas();
$thumbnailsPane.scroll(_paneOnScroll);
$(".ui-state-selected",$thumbnailsPane).css({"opacity" : "0.4"});
});
$uidisplay.on("dragover", function(event) {
var $context = event.target==$thumbnailsPane.get(0) ? $(event.target) : $(event.target).parents("#thumbnailView");
var changeClass = false;
if($context.length){
changeClass = _setOnDragSelector(event.originalEvent ? event.originalEvent : event);
if(event.target==$thumbnailsPane.get(0)){
changeClass = false;
_scrollViewPane(event);
}
}
if(!changeClass){
$(".ui-state-drag-enter-left",$thumbnailsPane).removeClass("ui-state-drag-enter-left");
$(".ui-state-drag-enter-right",$thumbnailsPane).removeClass("ui-state-drag-enter-right");
}
if((ondragCount++)%10==0){
//console.log("ondragCount");
$dragCanvas.css({'top' : (event.originalEvent.clientY + 10) + "px", 'left' : (event.originalEvent.clientX + 10) + "px"});
}
});
$uidisplay.on("dragend", function(event) {
//console.log("dragend : " + $(event.target).prop("tagName"));
onScrollCount = 0;
ondragCount = 0;
$dragCanvas.remove();
$dragCanvas = null;
var $target = $(".ui-state-drag-enter-left,.ui-state-drag-enter-right");
if($target.length && $target.hasClass("thumbContainer") && Number($thumbnailsPane.attr("drag-enter-id"))>=0){
_movePages();
}else{
_endOnDragSelector();
}
});
Justin Jung
Dec 21, 2017, 6:38:53 PM12/21/17
to PDFTron WebViewer
Hello,
There wasn't anything changed to prevent this on purpose.
We have tried seeing the drag events fired when dragging thumbnails, but we are having trouble getting the events to fire in 2.2.2 and 3.1.
Here is a code that we used in config.js:
var $uidisplay = $("#ui-display");
$uidisplay.on("dragstart", function(event) {
console.log('dragstart');
});
$uidisplay.on("dragover", function(event) {
console.log('dragover');
});
$uidisplay.on("dragend", function(event) {
console.log('dragend');
});
None of those logs were seen when clicking and dragging from a thumbnail.
Could you elaborate on how the dragging works in your application and any steps that we are missing?
Justin Jung
Software Developer
PDFTron Systems Inc.
Jérémy Guyenot
Dec 22, 2017, 11:31:00 AM12/22/17
to PDFTron WebViewer
Hi,
i've joined the full config.js file. It's ok into 2.2.2 but in 3 (3.0.1 and 3.1.0) it's
i've joined the full config.js file. It's ok into 2.2.2 but in 3 (3.0.1 and 3.1.0) it's
/*****
!! ne pas utiliser les caracteres accentues dans les commentaires
fonction chargement du fichier de config loadConfigScript dans controlUtils.js
*****/
if (console && console.log) {
console.log('Config mgViewerPDFconfig.js loaded');
}
/**
* Initialisation des variables
*/
var customDatas = JSON.parse(window.ControlUtils.getCustomData());
var serverUrl = location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '');
/**
* Initialisation de la langue de la visionneuse
*/
//!!! Utiliser une variable...
i18n.setLng(customDatas.lang, function () {
$('body').i18n();
});
/**
* Desactive le menu contextuel
*/
Tools.Tool.prototype.contextMenu = function (e) {
e.preventDefault();
};
/*--- SURCHARGES ---------------------------------f----------------------------*/
/*
*
* Gestion de fonctionnalite interne vsionneuse
* todo => voir une integration avec la classe Tools.GenericAnnotationCreateTool
*/
(function(){
var $thumbnailsPane = null;//Objet DOM conteneur des vignettes
var dragImg = new Image();
dragImg.src = serverUrl + "/img/png18/tri.png";
///DRAG&DROP///
/*global DataTransfer, DragEvent */
/** SPECIFIQUE IE 10+*/
/*! setDragImage-IE - polyfill for setDragImage method for Internet Explorer 10+
https://github.com/MihaiValentin/setDragImage-IE */
/**
* this method preloads the image, so it will be already loaded when we will use it as a drag image
* @param image
*/
// if the setDragImage is not available, implement it
if ('function' !== typeof DataTransfer.prototype.setDragImage) {
function setDragImageIEPreload(image) {
var bodyEl,
preloadEl;
bodyEl = document.body;
// create the element that preloads the image
preloadEl = document.createElement('div');
preloadEl.style.background = 'url("' + image.src + '")';
preloadEl.style.position = 'absolute';
preloadEl.style.opacity = 0.001;
bodyEl.appendChild(preloadEl);
// after it has been preloaded, just remove the element so it won't stay forever in the DOM
setTimeout(function() {
bodyEl.removeChild(preloadEl);
}, 5000);
};
setDragImageIEPreload(dragImg);
DataTransfer.prototype.setDragImage = function(image, offsetX, offsetY) {
var randomDraggingClassName,
dragStylesCSS,
dragStylesEl,
headEl,
parentFn,
eventTarget;
// generate a random class name that will be added to the element
randomDraggingClassName = 'setdragimage-ie-dragging-' + Math.round(Math.random() * Math.pow(10, 5)) + '-' + Date.now();
// prepare the rules for the random class
dragStylesCSS = [
'.' + randomDraggingClassName,
'{',
'background: url("' + image.src + '") no-repeat #fff 0 0 !important;',
'width: ' + image.width + 'px !important;',
'height: ' + image.height + 'px !important;',
'text-indent: -9999px !important;',
'border: 0 !important;',
'outline: 0 !important;',
'}',
'.' + randomDraggingClassName + ' * {',
'display: none !important;',
'}'
];
// create the element and add it to the head of the page
dragStylesEl = document.createElement('style');
dragStylesEl.innerText = dragStylesCSS.join('');
headEl = document.getElementsByTagName('head')[0];
headEl.appendChild(dragStylesEl);
/*
since we can't get the target element over which the drag start event occurred
(because the `this` represents the DataTransfer object and not the element),
we will walk through the parents of the current functions until we find one
whose first argument is a drag event
*/
parentFn = DataTransfer.prototype.setDragImage.caller;
while (!(parentFn.arguments[0] instanceof DragEvent)) {
parentFn = parentFn.caller;
}
// then, we get the target element from the event (event.target)
eventTarget = parentFn.arguments[0].target;
// and add the class we prepared to it
eventTarget.classList.add(randomDraggingClassName);
/* immediately after adding the class, we remove it. in this way the browser will
have time to make a snapshot and use it just so it looks like the drag element */
setTimeout(function() {
// remove the styles
headEl.removeChild(dragStylesEl);
// remove the class
eventTarget.classList.remove(randomDraggingClassName);
}, 0);
};
}
/**FIN SPECIFIQUE IE 10+*/
//recuperation du conteneur de vignette
function _getTargetSelector(event)
{
var $targetParent = $(event.target).parents(".thumbContainer");
if($(event.target).hasClass("thumbContainer")){
return $(event.target);
}
else if($targetParent.length == 1){
return $targetParent;
}
return null;
}
//remise a zero des variables et styles
function _endOnDragSelector(event)
{
$thumbnailsPane.removeAttr("drag-enter-id");
$(".ui-state-drag-enter-left",$thumbnailsPane).removeClass("ui-state-drag-enter-left");
$(".ui-state-drag-enter-right",$thumbnailsPane).removeClass("ui-state-drag-enter-right");
$(".ui-state-selected",$thumbnailsPane).css({"opacity" : "1"})
$(".ui-state-selected",$thumbnailsPane).removeClass("ui-state-selected ui-state-active lastSelected");
}
//affichage de la position d'ajout
function _setOnDragSelector(event)
{
var $target = _getTargetSelector(event);
if($target != null){
var $activeThumbnail = null;
var targetWth = $(event.target).prop("offsetWidth");
var pos = event.offsetX>0 && targetWth>0 && event.offsetX>=(targetWth/2) ? "-right" : "-left";
//verification si la position n'est pas a droite ou a gauche si une vignette est selectionnee
if($("#thumbnailView div.thumbContainer.ui-state-selected").length==1){
$activeThumbnail = $("#thumbnailView div.thumbContainer.ui-state-active");
if(!($activeThumbnail.length>0 && ((pos=="-right" && $target.next().length && $target.next().get(0)===$activeThumbnail.get(0)) || (pos=="-left" && $target.prev().length && $target.prev().get(0)===$activeThumbnail.get(0))))){
$activeThumbnail = null;
}
}
//test si vignette non selectionne et affiche le positionnement des images deplacees
if (!$target.hasClass("ui-state-selected") && $activeThumbnail==null){
var thumbId = $thumbnailsPane.attr("drag-enter-id");
if($.type(thumbId) != "undefined" && !isNaN(thumbId)){
if($("#thumbContainer" + thumbId).hasClass("ui-state-drag-enter-left")){
$("#thumbContainer" + thumbId).removeClass("ui-state-drag-enter-left");
}else{
$("#thumbContainer" + thumbId).removeClass("ui-state-drag-enter-right");
}
}
$thumbnailsPane.attr("drag-enter-id", $target.attr("id").substr(14));
$target.addClass("ui-state-drag-enter" + pos);
return true;
}
}
return false;
}
/**
* Deplacement de la selection de pages
*/
function _movePages()
{
var pagesSelected = readerControl.getSelectedThumbnails();
if(pagesSelected.length>0 ){
parent.dhtmlx.confirm({
text: parent.oLang.RecupLib('LIB_MOVE_PAGES',[pagesSelected.length]),
cancel: parent.oLang.RecupLib("LIB_NO"),
ok: parent.oLang.RecupLib("LIB_YES"),
callback: function (choice)
{
// SI validation
if(choice){
parent.mgMultiViewer.showModalMsg(parent.oLang.RecupLib('LIB_MOVE_PAGES_LOADING'), serverUrl + '/img/loading/loading-viewer.gif')
// Decalage des index pour le besoin de la fonction (depart à 1)<br>
$.each(pagesSelected,function(index, value) { pagesSelected[index]++;});
//recuperation de l'index-1 de la page d'insertion
var ind = Number($thumbnailsPane.attr("drag-enter-id"));
//calcul apres ou avant la page
ind += $("#thumbContainer" + ind).hasClass("ui-state-drag-enter-right") ? 2 : 1;
//Deplacement des pages selectionnees
var doc = readerControl.docViewer.getDocument();
doc.movePages(pagesSelected,ind);
parent.mgMultiViewer.hideModalMsg(parent.oLang.RecupLib('LIB_MOVE_PAGES_END'), serverUrl + '/img/png32/check-32x32.png', 1000);
}
_endOnDragSelector();
}
});
}
}
function _createCanvas()
{
var marge= 10 ,iWdth = 80,iHgth = 100 , posX = 0, posY = 0;
var $canvasSelected = $("#thumbnailView div.thumbContainer.ui-state-selected canvas");
var col = $canvasSelected.length>10 ? 10 : $canvasSelected.length;
var $oCanvas = $('<canvas>');
$oCanvas.get(0).width = ((col<=5 ? col : 5) * (marge + iWdth)) + 10;
$oCanvas.get(0).height = Math.ceil(col/5) * (marge + 15 + iHgth);
$oCanvas.css({'position':'absolute','border':'1px outset #FFFFFF','background-color' : '#E3E3E3' ,'z-index' : 9999});
$("#ui-display").append($oCanvas.get(0));
var oCtx = $oCanvas.get(0).getContext('2d')
for(var i=0;i<col;i++){
var page = Number($($canvasSelected.get(i)).parents(".thumbContainer").attr("id").substr(14)) + 1 ;
page = page + "";
posX = 10 + (10 + iWdth)*(i%5);
posY = 10 + (25 + iHgth)*Math.floor(i/5);
oCtx.strokeRect(posX - 1, posY - 1, iWdth + 2, iHgth + 2);
oCtx.fillText(page, posX + (iWdth/2) - (page.length*2), posY + iHgth + 10);
oCtx.drawImage($canvasSelected.get(i), posX, posY ,iWdth , iHgth );
}
oCtx.save();
return $oCanvas;
}
/**
* Ajout des operations de drag&drop des vignettes
*/
function _addDragDropOperation()
{
var $dragCanvas = null;
var ondragCount = 0;
var onScrollCount = 0;
var maxScrollCount = 40;
var isScrollActive = false;
$thumbnailsPane = $(readerControl.thumbnailsElement);
function _paneOnScroll(event)
{
console.log("isScrollActive : " + (isScrollActive ? "true" : "false"));
console.log("onScrollCount : " + onScrollCount);
if(onScrollCount<maxScrollCount){
isScrollActive = true;
}
}
function _scrollViewPane(event)
{
if(!isScrollActive){
var scrollPos = $thumbnailsPane.scrollTop();
if(event.originalEvent.offsetY<=20 && scrollPos!=0){
if(onScrollCount<maxScrollCount && onScrollCount<100){
onScrollCount++;
}
else{
console.log("scrollDown");
$thumbnailsPane.scrollTop(scrollPos - 15);
}
}
else if(event.originalEvent.offsetY >= $thumbnailsPane.prop("offsetHeight") - 20 && scrollPos!=$thumbnailsPane.prop("offsetHeight")){
console.log("scrolllUP");
if(onScrollCount<maxScrollCount && onScrollCount<100){
onScrollCount++;
}
else{
console.log("scrolllUP");
$thumbnailsPane.scrollTop(scrollPos + 15);
}
}
else if(!(scrollPos!=$thumbnailsPane.prop("offsetHeight")|| scrollPos!=0)){
onScrollCount = 0;
}
}
}
$uidisplay = $("#ui-display");
$uidisplay.on("dragstart", function(event) {
try{
if($.type(event.originalEvent.dataTransfer)!="undefined"){
event.originalEvent.dataTransfer.setData("text","");
event.originalEvent.dataTransfer.setDragImage(dragImg, 10, 10);
}
}
catch (e) {
e.message;
}
$dragCanvas = _createCanvas();
$thumbnailsPane.scroll(_paneOnScroll);
$(".ui-state-selected",$thumbnailsPane).css({"opacity" : "0.4"});
});
$uidisplay.on("dragover", function(event) {
var $context = event.target==$thumbnailsPane.get(0) ? $(event.target) : $(event.target).parents("#thumbnailView");
var changeClass = false;
if($context.length){
changeClass = _setOnDragSelector(event.originalEvent ? event.originalEvent : event);
if(event.target==$thumbnailsPane.get(0)){
changeClass = false;
_scrollViewPane(event);
}
}
if(!changeClass){
$(".ui-state-drag-enter-left",$thumbnailsPane).removeClass("ui-state-drag-enter-left");
$(".ui-state-drag-enter-right",$thumbnailsPane).removeClass("ui-state-drag-enter-right");
}
if((ondragCount++)%10==0){
$dragCanvas.css({'top' : (event.originalEvent.clientY + 10) + "px", 'left' : (event.originalEvent.clientX + 10) + "px"});
}
});
$uidisplay.on("dragend", function(event) {
//console.log("dragend : " + $(event.target).prop("tagName"));
onScrollCount = 0;
ondragCount = 0;
$dragCanvas.remove();
$dragCanvas = null;
var $target = $(".ui-state-drag-enter-left,.ui-state-drag-enter-right");
if($target.length && $target.hasClass("thumbContainer") && Number($thumbnailsPane.attr("drag-enter-id"))>=0){
_movePages();
}else{
_endOnDragSelector();
}
});
}
///END DRAG&DROP///
ReaderControl.prototype.addDragDropOperation = _addDragDropOperation;
})();
$(document).on('viewerLoaded', function () {
$('#fullScreenButton').hide();
$('#printButton').hide();
$('#downloadButton').hide();
});
$(document).on('documentLoaded', function () {
if(!customDatas.readOnly){
readerControl.addDragDropOperation();
}
//Evenement lors du changement d'outil
readerControl.docViewer.on('toolModeUpdated', function (e, tool) {
if (e && e.imported) {
//ignore the annotation change due to load/import annotation
return;
}
});
});
/**
* Ajoute la multi-selection de vignette
*/
ReaderControl.prototype.createThumbnailContainer = function (pageIndex) {
var me = this;
var thumbContainer = document.createElement('div');
thumbContainer.id = "thumbContainer" + pageIndex;
thumbContainer.style.height = me.thumbContainerHeight + "px";
thumbContainer.style.width = me.thumbContainerWidth + "px";
thumbContainer.className = "thumbContainer ui-widget-content";
var thumbDiv = document.createElement('div');
thumbDiv.className = "thumbdiv";
$(thumbContainer).attr("draggable", "true");
var span = document.createElement("span");
span.style.height = "150px";
span.style.display = "block";
thumbDiv.appendChild(span);
thumbContainer.appendChild(thumbDiv);
var div = document.createElement('div');
div.style.textAlign = "center";
div.innerHTML = pageIndex + 1;
thumbContainer.appendChild(div);
thumbContainer.addEventListener('mousedown', function (e) {
var $this = $(this);
if($this.hasClass('ui-state-selected')){
$this.attr('is-state-selected','1');
}
else{
if($("#thumbnailView div.thumbContainer.ui-state-active").length==0){
$this.addClass('ui-state-active');
}
$this.addClass('ui-state-selected');
}
});
thumbContainer.addEventListener('mouseup', function (e) {
var $this = $(this);
if (me.clickedThumb !== -1 && !e.ctrlKey && !e.shiftKey) {
$("#thumbContainer" + me.clickedThumb).removeClass('ui-state-active');
$("#thumbnailView div.thumbContainer").removeClass('ui-state-selected'); //Ni 'ctrl' ni 'shift' enfoncee, on enleve toute selection
}
if (e.ctrlKey || e.shiftKey) { //Selection
if (e.ctrlKey && Number($this.attr('is-state-selected'))) { //Si les deux touches sont enfoncees : la touche ctrl prend le pas sur la touche shift
if($this.hasClass('ui-state-selected')) {
$this.removeClass('ui-state-selected').removeClass('lastSelected');
}
} else if (e.shiftKey) {
//On calcule les vignettes a selectionner
var clickedInd = $this.attr('id').replace('thumbContainer', '');
me.actionShiftSelectThumbnails(clickedInd);
}
} else { //Activation pour affichage dans la visionneuse ET Selection de la vignette
$("#thumbnailView div.thumbContainer.lastSelected").removeClass('lastSelected');
$this.addClass('ui-state-active').addClass('ui-state-selected').addClass('lastSelected');
me.clickedThumb = pageIndex; //Retient la derniere vignette activee
}
if (!e.ctrlKey && !e.shiftKey) {
setTimeout(function () {
me.docViewer.setCurrentPage(pageIndex + 1);
me.trackPageHistory(pageIndex + 1);
}, 0);
}
$this.removeAttr('is-state-selected');
if($('#button_remove').length>0){
if($("#thumbnailView div.thumbContainer.ui-state-selected").length>0){
$('#button_remove').show();
}
else{
$('#button_remove').hide();
}
}
});
return thumbContainer;
};
/**
* Retourne la liste d'indices des vignettes selectionnees
* @returns {array}
*/
ReaderControl.prototype.getSelectedThumbnails = function (indStart) {
if (typeof (indStart) == 'undefined') {
indStart = 0;
}
var ret = [];
$("#thumbnailView div.thumbContainer.ui-state-selected").each(function () {
ret.push(Number($(this).attr('id').replace('thumbContainer', '')) + indStart);
});
return ret;
};
/**
* Retourne la liste d'indices des vignettes selectionnees
* @returns {array}
*/
ReaderControl.prototype.actionUnselectedThumbnails = function () {
$("#thumbnailView div.thumbContainer.ui-state-selected").removeClass('ui-state-selected');
$("#thumbnailView div.thumbContainer.lastSelected").removeClass('lastSelected');
return $("#thumbnailView div.thumbContainer.ui-state-selected").length ? 0 : 1; //Retourne 1 si plus aucun element selectionne
};
/**
* Cache les vignettes dont l'indice est passe en parametre
* @returns {bool}
*/
ReaderControl.prototype.actionHideThumbnails = function (lstInd) {
if (typeof (lstInd) == 'string') {
lstInd = lstInd.split(',');
}
readerControl.getCurrentPageNumber();
lstInd.forEach(function (elt) {
$('#thumbContainer' + elt).hide();
if ($('#thumbContainer' + elt).hasClass('ui-state-selected')) {
$('#thumbContainer' + elt).removeClass('ui-state-selected');
}
});
readerControl.actionSelectNextAvailablePage();
return true;
};
/**
* Affiche les vignettes dont l'indice est passe en parametre; si aucun indice,
* toutes les vignettes sont a afficher
* @returns {bool}
*/
ReaderControl.prototype.actionShowThumbnails = function (lstInd) {
if (typeof (lstInd) == 'string') {
if (lstInd.length) {
lstInd = lstInd.split(',');
} else {
lstInd = [];
}
}
if (typeof (lstInd) == 'undefined') {
lstInd = [];
}
if (lstInd.length) { //Des indices ont ete specifies
lstInd.forEach(function (elt) {
$('#thumbContainer' + elt).show();
});
} else { //Aucun indice specifie, on reaffiche toutes les vignettes
$('#thumbnailView div.thumbContainer').show();
}
return true;
};
/**
* Selectionne pour affichage la premiere page disponible qui suit la page en
* cours d'affichage
*/
ReaderControl.prototype.actionSelectNextAvailablePage = function () {
var indPageToSelect = readerControl.getCurrentPageNumber() + 1;
if (indPageToSelect > readerControl.getPageCount()) { //La page en cours etait la derniere
indPageToSelect = 1; //On selectionne la premiere page
}
var indAvailable = null; //Variable destinee a stocker l'indice de la page suivante disponible
if ($('#thumbnailView div.thumbContainer:visible').length > 0) { //On verifie qu'il existe au moins une page disponible
//On cherche la page suivante disponible
for (var i = indPageToSelect; i <= readerControl.getPageCount(); i++) {
if ($('#thumbContainer' + String(i - 1)).is(':visible')) {
indAvailable = i;
break;
}
}
if (indAvailable == null) { //Aucune page de disponible en partant de la page en cours de selection
if (indPageToSelect > 1) { //La boucle precedente ne demarrait pas de la page 1
for (var i = 1; i < indPageToSelect; i++) { //On effectue la boucle depuis la page 1, jusqu'a l'indice de la page qui servait de depart a la boucle precedente
if ($('#thumbContainer' + String(i - 1)).is(':visible')) {
indAvailable = i;
break;
}
}
}
}
}
if (indAvailable == null) { //Plus aucune page de disponible dans le document
//??? Que fait-on ?
readerControl.setShowSideWindow(0); //On ferme le panneau lateral
} else { //L'indice de la page suivante a selectionner a ete determine
readerControl.setCurrentPageNumber(indAvailable); //Selection de la page pour affichage
}
};
/**
* Gere la selection de vignette via touche shift + clic souris
* @param {int} clickedInd
*/
ReaderControl.prototype.actionShiftSelectThumbnails = function (clickedInd) {
var me = this;
var lastSelectedInd = -1;
if ($("#thumbnailView div.thumbContainer.lastSelected").length) {
lastSelectedInd = Number($("#thumbnailView div.thumbContainer.lastSelected").attr('id').replace('thumbContainer', ''));
}
if (lastSelectedInd == -1) { //Aucune selection prealable de vignette OU derniere vignette de-selectionnee
$("#thumbnailView div.thumbContainer.lastSelected").removeClass('lastSelected'); //On deselectionne les eventuelles vignettes deja selectionnees
$("#thumbnailView div.thumbContainer").removeClass('ui-state-selected');
$("#thumbContainer" + clickedInd).addClass('ui-state-selected').addClass('lastSelected'); //On selectionne la vignette
} else if (clickedInd > lastSelectedInd) { //Vignette cliquee est d'un indice superieur a la derniere vignette selectionnee
me.actionSelectThumbnails(lastSelectedInd + 1, clickedInd);
$("#thumbnailView div.thumbContainer.lastSelected").removeClass('lastSelected');
$("#thumbContainer" + clickedInd).addClass('lastSelected')
} else if (clickedInd < lastSelectedInd) { //Vignette cliquee est d'un indice inferieur a la derniere vignette selectionnee
me.actionSelectThumbnails(clickedInd, lastSelectedInd - 1);
$("#thumbnailView div.thumbContainer.lastSelected").removeClass('lastSelected');
$("#thumbContainer" + clickedInd).addClass('lastSelected');
}
};
/**
* Ajoute la classe css de selection sur les vignettes comprises entre les
* indices de debut et de fin passes en parametre
* @param {int} start
* @param {int} end
*/
ReaderControl.prototype.actionSelectThumbnails = function (start, end) {
for (var i = start; i <= end; i++) {
if (!$("#thumbContainer" + i).hasClass('ui-state-selected')) {
$("#thumbContainer" + i).addClass('ui-state-selected');
}
}
};
/**
* Activation fonctionnalite de la barre d'outils
* @param {int} flag
* @param {object} customActions
*/
ReaderControl.prototype.setActiveCommands = function (flag, customActions) {
customActions = customActions || {};
if (flag !== null) {
var toolsName = ["AnnotationCreateSticky",
"AnnotationCreateFreeText",
"AnnotationCreateCustomStamp",
"AnnotationCreateSignature"];
var displayAction = "none";
if($.type(customActions)=="object" && customActions.hiddenTools){
if($.inArray($.type(customActions.hiddenTools),["string","number"])!=-1 && Number(customActions.hiddenTools)){
$($('#button_remove').parent()).parent().hide();
displayAction = "inline-block";
$('#toolList').find("[data-toolmode]").css("display","none");
$('#overflowToolsContainer').find("[data-toolmode]").css("display","none");
$('#toolList').find("[data-toolmode=Pan],[data-toolmode=TextSelect]").css("display","inline");
}
}
if($.inArray($.type(flag),["string","number"])!=-1){
if($.type(flag) == "string" && flag.match(/[2-9]/)==null){
flag = parseInt(flag.split("").reverse().join(""),2);
}
//var editAnotTool = false;
for(var i =0;i<toolsName.length;i++){
var p = Math.pow(2,i);
if((Number(flag) & p) == p){
if(i==0 && displayAction == "inline-block"){
//$('#overflowTools').css("display",displayAction);
$('#overflowToolsContainer').css({"min-width" : "85px"});
$('#toolList').find("[data-toolmode=AnnotationEdit]").css("display",displayAction);
$('#overflowToolsContainer').find("[data-toolmode=AnnotationEdit]").css({"display":displayAction});
}
$('#toolList').find("[data-toolmode=" + toolsName[i] + "]").css("display",displayAction);
$('#overflowToolsContainer').find("[data-toolmode=" + toolsName[i] + "]").css("display",displayAction);
}
}
}
else if($.type(flag)=="array"){
for(var i =0;i<flag.length;i++){
$('#toolList').find("[data-toolmode=" + flag[i] + "]").css("display",displayAction);
$('#overflowToolsContainer').find("[data-toolmode=" + flag[i] + "]").css("display",displayAction);
}
}
} else {
switch (customActions.type) {
case 'group':
if (customActions.show) {
for (var i = 0; i < customActions.items.length; i++) {
$(customActions.items[i]).show();
}
} else {
for (var i = 0; i < customActions.items.length; i++) {
$(customActions.items[i]).hide();
}
}
break;
}
}
};
/*--- FIN SURCHARGES ---------------------------------------------------------*/
Matt Parizeau
Dec 22, 2017, 7:19:13 PM12/22/17
to PDFTron WebViewer
Thanks for sending the file, we were able to reproduce the issue with dragging. It looks like this is happening because of code that was added in WebViewer to prevent the page from moving around when using the desktop viewer with a touch screen.
One way you could work around this behavior is to switch to the "Pan" tool when hovering over the thumbnails and switch back when moving back to the document. This works because the Pan tool doesn't have the same event prevention code. Here is the code you could add to your config file:
$(document).on('documentLoaded', function() {
var oldToolMode;
$('#thumbnailView').on('mouseenter', function() {
oldToolMode = readerControl.getToolMode();
readerControl.setToolMode('Pan');
});
$('#thumbnailView').on('mouseleave', function() {
readerControl.setToolMode(oldToolMode);
});
});Matt Parizeau
Software Developer
PDFTron Systems Inc.
Reply all
Reply to author
Forward
0 new messages