
Zooming delle immagini in Microsoft Dynamics CRM
- On 10 Ottobre, 2018
- crm, dynamics 365, dynamics crm, microsoft
Effettuare lo zoom di una immagine in un form di Microsoft Dynamics CRM
Può essere comodo inserire all’interno di una maschera del CRM una immagine. Vediamo però come è possibile effettuare anche lo zooming dell’immagine agendo semplicemente con la rotella del mouse.
Per fare questo useremo una libreria opensource javascript http://www.jacklmoore.com/wheelzoom/ che integreremo con il CRM.
Per la nostra demo proverò ad inserire una immagine nella maschera dei contatti su cui effettuare lo scrolling con il mouse.
Iniziamo aggiungendo una risorsa di tipo html nella maschera dei contatti :
Cliccare sulla lente in risorsa WEB :
Dovendo creare la nostra Risorsa WEB clicchiamo su ‘Ricerca altri Record’ e poi su ‘Nuovo’ :
Compiliamo inserendo i parametri per la nuova Web Resource e clicchiamo su ‘Editor di Testo’ :
Nel Tab Origine Inserirete il codice HTML con all’interno il codice Javascript.
All’inizio trovate tutti i metodi richiamabili , mentre nell’ultima parte nel tag <Body> si trovano l’indirizzo dell’immagine e lo script con la linea che richiama il metodo per lo zoom :
wheelzoom(document.querySelector(‘img.zoom’));
Cliccate su ok , salvate e pubblicate.
Spostate l’iframe creato nella maschera dove più vi aggrada dimensionando opportunamente la formattazione per la visualizzazione dell’immagine. Per questo esempio ho inserito l’url statico di una immagine ma volendo è possibile generarla dinamicamente nel codice stesso, magari utilizzando una url memorizzata in un attributo del CRM.
Ecco di seguito il codice completo :
<html><head>
<script language=”javascript”>
/*!
Wheelzoom 3.1.3
license: MIT
http://www.jacklmoore.com/wheelzoom
*/
window.wheelzoom = (function(){
var defaults = {
zoom: 0.10,
maxZoom: false,
initialZoom: 1,
};
var canvas = document.createElement(‘canvas’);
var main = function(img, options){
if (!img || !img.nodeName || img.nodeName !== ‘IMG’) { return; }
var settings = {};
var width;
var height;
var bgWidth;
var bgHeight;
var bgPosX;
var bgPosY;
var previousEvent;
var cachedDataUrl;
function setSrcToBackground(img) {
img.style.backgroundImage = ‘url(“‘+img.src+'”)’;
img.style.backgroundRepeat = ‘no-repeat’;
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
cachedDataUrl = canvas.toDataURL();
img.src = cachedDataUrl;
}
function updateBgStyle() {
if (bgPosX > 0) {
bgPosX = 0;
} else if (bgPosX < width – bgWidth) {
bgPosX = width – bgWidth;
}
if (bgPosY > 0) {
bgPosY = 0;
} else if (bgPosY < height – bgHeight) {
bgPosY = height – bgHeight;
}
img.style.backgroundSize = bgWidth+’px ‘+bgHeight+’px’;
img.style.backgroundPosition = bgPosX+’px ‘+bgPosY+’px’;
}
function reset() {
bgWidth = width;
bgHeight = height;
bgPosX = bgPosY = 0;
updateBgStyle();
}
function onwheel(e) {
var deltaY = 0;
e.preventDefault();
if (e.deltaY) { // FireFox 17+ (IE9+, Chrome 31+?)
deltaY = e.deltaY;
} else if (e.wheelDelta) {
deltaY = -e.wheelDelta;
}
// As far as I know, there is no good cross-browser way to get the cursor position relative to the event target.
// We have to calculate the target element’s position relative to the document, and subtrack that from the
// cursor’s position relative to the document.
var rect = img.getBoundingClientRect();
var offsetX = e.pageX – rect.left – window.pageXOffset;
var offsetY = e.pageY – rect.top – window.pageYOffset;
// Record the offset between the bg edge and cursor:
var bgCursorX = offsetX – bgPosX;
var bgCursorY = offsetY – bgPosY;
// Use the previous offset to get the percent offset between the bg edge and cursor:
var bgRatioX = bgCursorX/bgWidth;
var bgRatioY = bgCursorY/bgHeight;
// Update the bg size:
if (deltaY < 0) {
bgWidth += bgWidth*settings.zoom;
bgHeight += bgHeight*settings.zoom;
} else {
bgWidth -= bgWidth*settings.zoom;
bgHeight -= bgHeight*settings.zoom;
}
if (settings.maxZoom) {
bgWidth = Math.min(width*settings.maxZoom, bgWidth);
bgHeight = Math.min(height*settings.maxZoom, bgHeight);
}
// Take the percent offset and apply it to the new size:
bgPosX = offsetX – (bgWidth * bgRatioX);
bgPosY = offsetY – (bgHeight * bgRatioY);
// Prevent zooming out beyond the starting size
if (bgWidth <= width || bgHeight <= height) {
reset();
} else {
updateBgStyle();
}
}
function drag(e) {
e.preventDefault();
bgPosX += (e.pageX – previousEvent.pageX);
bgPosY += (e.pageY – previousEvent.pageY);
previousEvent = e;
updateBgStyle();
}
function removeDrag() {
document.removeEventListener(‘mouseup’, removeDrag);
document.removeEventListener(‘mousemove’, drag);
}
// Make the background draggable
function draggable(e) {
e.preventDefault();
previousEvent = e;
document.addEventListener(‘mousemove’, drag);
document.addEventListener(‘mouseup’, removeDrag);
}
function load() {
var initial = Math.max(settings.initialZoom, 1);
if (img.src === cachedDataUrl) return;
var computedStyle = window.getComputedStyle(img, null);
width = parseInt(computedStyle.width, 10);
height = parseInt(computedStyle.height, 10);
bgWidth = width * initial;
bgHeight = height * initial;
bgPosX = -(bgWidth – width)/2;
bgPosY = -(bgHeight – height)/2;;
setSrcToBackground(img);
img.style.backgroundSize = bgWidth+’px ‘+bgHeight+’px’;
img.style.backgroundPosition = bgPosX+’px ‘+bgPosY+’px’;
img.addEventListener(‘wheelzoom.reset’, reset);
img.addEventListener(‘wheel’, onwheel);
img.addEventListener(‘mousedown’, draggable);
}
var destroy = function (originalProperties) {
img.removeEventListener(‘wheelzoom.destroy’, destroy);
img.removeEventListener(‘wheelzoom.reset’, reset);
img.removeEventListener(‘load’, load);
img.removeEventListener(‘mouseup’, removeDrag);
img.removeEventListener(‘mousemove’, drag);
img.removeEventListener(‘mousedown’, draggable);
img.removeEventListener(‘wheel’, onwheel);
img.style.backgroundImage = originalProperties.backgroundImage;
img.style.backgroundRepeat = originalProperties.backgroundRepeat;
img.src = originalProperties.src;
}.bind(null, {
backgroundImage: img.style.backgroundImage,
backgroundRepeat: img.style.backgroundRepeat,
src: img.src
});
img.addEventListener(‘wheelzoom.destroy’, destroy);
options = options || {};
Object.keys(defaults).forEach(function(key){
settings[key] = options[key] !== undefined ? options[key] : defaults[key];
});
if (img.complete) {
load();
}
img.addEventListener(‘load’, load);
};
// Do nothing in IE8
if (typeof window.getComputedStyle !== ‘function’) {
return function(elements) {
return elements;
};
} else {
return function(elements, options) {
if (elements && elements.length) {
Array.prototype.forEach.call(elements, main, options);
} else if (elements && elements.nodeName) {
main(elements, options);
}
return elements;
};
}
}());
</script>
<meta charset=”utf-8″>
<title>Wheelzoom</title>
</head>
<body>
<img class=’zoom’ src=”http://www.jacklmoore.com/img/daisy.jpg” alt=’Daisy!’ width=’555′ height=’320’/>
<script src=”wheelzoom.js”></script>
<script>
wheelzoom(document.querySelector(‘img.zoom’));
</script>
</body>
</html>
Ed ecco il risultato finale :
Happy coding con Microsoft Dynamics CRM!
Davide Matichecchia
0 Comments