+++ /dev/null
-/*
-* © 2007 Benoît Pin – Centre de recherche en informatique – École des mines de Paris
-* http://plinn.org
-* Licence Creative Commons http://creativecommons.org/licenses/by-nc/2.0/
-*
-*
-*/
-
-function Navigateur(mosaique) {
- this.mosaique = mosaique;
- var m = this.mosaique; // shortcut alias
-
- this.drawPanel();
-
- var thisNav = this;
-
- this._ddHandlers = {'down' : function(evt){thisNav._mouseDownHandler(evt);},
- 'move' : function(evt){thisNav._mouseMoveHandler(evt);},
- 'up' : function(evt){thisNav._mouseUpHandler(evt);}};
-
-
- if (m.zoomIndex == m.zoomTable.length - 1)
- this.zoomInButton.src = this.zoomInButton.src.replace('zoom_in.gif', 'zoom_disabled.gif');
- if (m.zoomIndex == 0)
- this.zoomOutButton.src = this.zoomOutButton.src.replace('zoom_out.gif', 'zoom_disabled.gif');
-
- this.currentZoomLevel.nodeValue = m.zoomLevel + ' %';
-
- this._listeners = new Array();
- this._listeners.push([this.zoomOutButton, 'click', function(evt){thisNav.zoomOut(evt);}]);
- this._listeners.push([this.zoomInButton, 'click', function(evt){thisNav.zoomIn(evt);}]);
- this._listeners.push([document, 'keypress', function(evt){thisNav.zoomByKeybord(evt);}]);
-
- var _l;
- for (var i = 0 ; i<this._listeners.length ; i++) {
- _l = this._listeners[i];
- addListener(_l[0], _l[1], _l[2]);
- }
-}
-
-Navigateur.prototype.unload = function() {
- var _l;
- for (var i = 0 ; i<this._listeners.length ; i++) {
- _l = this._listeners[i];
- removeListener(_l[0], _l[1], _l[2]);
- }
-};
-
-Navigateur.prototype.drawPanel = function() {
- var m = this.mosaique;
- // panel
- var panel = document.createElement('div');
- with(panel.style) {
- position = 'absolute';
- width = this.mosaique.thumbnailWidth + 2 + 'px';
- height = this.mosaique.thumbnailHeight + 38 + 'px';
- top = '27px';
- right = '0px';
- border = '1px solid #4c4c4c';
- textAlign = 'center';
- overflow = 'hidden';
- }
-
- // thumbnail
- var thumbnail = document.createElement('img');
- thumbnail.src = m.imgUrlBase + '/getThumbnail';
- thumbnail.width = String(m.thumbnailWidth);
- thumbnail.height = String(m.thumbnailHeight);
- panel.appendChild(thumbnail);
-
- // red frame
- var frame = this.frame = document.createElement('div');
- with(frame.style) {
- position = 'absolute';
- left = '0';
- top = '0';
- border = '1px solid red';
- zIndex = '2';
- cursor = 'move';
- }
- panel.appendChild(frame);
- this.resizeFrame();
-
- // for IE >:-(
- var fill = document.createElement('img');
- fill.src = portal_url() + '/transparent.gif';
- with(fill.style) {
- height = '100%';
- width = '100%';
- }
- frame.appendChild(fill);
-
- // table with -/+ buttons and current zoom level
- var table = document.createElement('table');
- with (table.style) {
- width = '100%';
- background = '#808080';
- verticalAlign = 'middle';
- }
- panel.appendChild(table);
-
- var tbody = document.createElement('tbody');
- table.appendChild(tbody);
-
- var tr = document.createElement('tr');
- tbody.appendChild(tr);
-
- var td = document.createElement('td');
- tr.appendChild(td);
-
- var img = this.zoomOutButton = document.createElement('img');
- img.width = '32';
- img.height = '32';
- img.src = portal_url() + '/zoom_out.gif';
- td.appendChild(img);
-
- var td = document.createElement('td');
- tr.appendChild(td);
-
- var text = this.currentZoomLevel = document.createTextNode('10%');
- td.appendChild(text);
-
- var td = document.createElement('td');
- tr.appendChild(td);
-
- var img = this.zoomInButton = document.createElement('img');
- img.width = '32';
- img.height = '32';
- img.src = portal_url() + '/zoom_in.gif';
- td.appendChild(img);
-
- this.display = panel;
- this.mosaique.rootElement.appendChild(panel);
-};
-
-Navigateur.prototype.resizeFrame = function() {
- var m = this.mosaique;
- var width, height;
-
- if (m.screenWidth >= m.imageWidth) {
- width = m.thumbnailWidth + 'px';
- }
- else {
- var wRatio = m.screenWidth / m.imageWidth;
- width = Math.round(wRatio * m.thumbnailWidth) + 'px';
- }
-
- if (m.screenHeight >= m.imageHeight) {
- height = m.thumbnailHeight + 'px';
- }
- else {
- var hRatio = m.screenHeight / m.imageHeight;
- height = Math.round(hRatio * m.thumbnailHeight) + 'px';
- }
-
- var frmStyle = this.frame.style;
- frmStyle.width = width;
- frmStyle.height = height;
- this.alignFrame();
-};
-
-Navigateur.prototype.alignFrame = function() {
- var m = this.mosaique;
- var iPosition = m.getImagePosition();
- iPosition.x = Math.max(0, iPosition.x);
- iPosition.y = Math.max(0, iPosition.y);
-
- var frmPosition = new Point(iPosition.x * (m.thumbnailWidth / m.imageWidth),
- iPosition.y * (m.thumbnailHeight / m.imageHeight)
- );
- this.setFramePosition(frmPosition);
-}
-
-Navigateur.prototype.alignImage = function() {
- var m = this.mosaique;
- var frmPosition = this.getFramePosition();
- var iPosition = new Point(frmPosition.x * (m.imageWidth / m.thumbnailWidth),
- frmPosition.y * (m.imageHeight / m.thumbnailHeight)
- );
- this.mosaique.loadScreen(iPosition);
-};
-
-Navigateur.prototype.getFramePosition = function() {
- var x = parseInt(this.frame.style.left);
- var y = parseInt(this.frame.style.top);
- var p = new Point(x, y);
- return p;
-};
-
-Navigateur.prototype.setFramePosition = function(point) {
- with(this.frame.style) {
- left = point.x + 'px';
- top = point.y + 'px';
- }
-};
-
-/* event handlers */
-Navigateur.prototype._mouseDownHandler = function(evt) {
- this.initialClickPoint = new Point(evt.clientX, evt.clientY);
- this.initialPosition = this.getFramePosition();
- this.dragInProgress = true;
-}
-
-Navigateur.prototype._mouseMoveHandler = function(evt) {
- disableDefault(evt);
- if(!this.dragInProgress)
- return;
-
- evt = getEventObject(evt);
- var currentPoint = new Point(evt.clientX, evt.clientY);
- var displacement = currentPoint.diff(this.initialClickPoint);
- this.setFramePosition(this.initialPosition.add(displacement));
-};
-
-Navigateur.prototype._mouseUpHandler = function(evt) {
- this.dragInProgress = false;
- this.alignImage();
-};
-
-Navigateur.prototype.zoomIn = function(evt) {
- var m = this.mosaique;
- var maxZoomIndex = m.zoomTable.length - 1
- if (m.zoomIndex < maxZoomIndex) {
- var targetZoomIndex = m.zoomIndex + 1;
- m.loadZoomLevel(targetZoomIndex);
- this.currentZoomLevel.nodeValue = m.zoomLevel + ' %';
- this.resizeFrame();
-
- if (targetZoomIndex == maxZoomIndex)
- this.zoomInButton.src = this.zoomInButton.src.replace('zoom_in.gif', 'zoom_disabled.gif');
- if (targetZoomIndex > 0)
- this.zoomOutButton.src = this.zoomOutButton.src.replace('zoom_disabled.gif', 'zoom_out.gif');
- }
-};
-
-Navigateur.prototype.zoomOut = function(evt) {
- var m = this.mosaique;
- if (m.zoomIndex > 0 ) {
- var targetZoomIndex = m.zoomIndex - 1;
- m.loadZoomLevel(targetZoomIndex);
- this.currentZoomLevel.nodeValue = m.zoomLevel + ' %';
- this.resizeFrame();
-
- if (targetZoomIndex == 0)
- this.zoomOutButton.src = this.zoomOutButton.src.replace('zoom_out.gif', 'zoom_disabled.gif');
- if (targetZoomIndex < m.zoomTable.length - 1)
- this.zoomInButton.src = this.zoomInButton.src.replace('zoom_disabled.gif', 'zoom_in.gif');
- }
-};
-
-Navigateur.prototype.zoomByKeybord = function(evt){
- evt = getEventObject(evt);
- var charPress = String.fromCharCode((evt.keyCode) ? evt.keyCode : evt.which);
- switch (charPress) {
- case '+' :
- this.zoomIn();
- break;
- case '-' :
- this.zoomOut();
- break;
- }
-};
projects / Portfolio.git / blobdiff