Permalink
Browse files

fix for full screen in iOS, new pinch gesture with OSD

  • Loading branch information...
1 parent 5c325eb commit d30aa3683a1348dd001727fc9602ea80c5c8b7c1 @dimin committed Mar 20, 2011
Showing with 92 additions and 4 deletions.
  1. +33 −3 panojs/PanoJS.js
  2. +37 −1 panojs/control_info.js
  3. +6 −0 panojs/utils.js
  4. +16 −0 styles/panojs.css
View
@@ -146,6 +146,7 @@ PanoJS.USE_SLIDE = true;
if (!PanoJS.STATIC_BASE_URL) PanoJS.STATIC_BASE_URL = '';
PanoJS.CREATE_CONTROLS = true;
PanoJS.CREATE_INFO_CONTROLS = true;
+PanoJS.CREATE_OSD_CONTROLS = true;
PanoJS.CREATE_THUMBNAIL_CONTROLS = (isClientPhone() ? false : true);
PanoJS.MAX_OVER_ZOOM = 2;
@@ -244,6 +245,10 @@ PanoJS.prototype.init = function() {
this.info_control = new InfoControl(this);
}
+ if (PanoJS.CREATE_OSD_CONTROLS && !this.osd_control) {
+ this.osd_control = new OsdControl(this);
+ }
+
if (PanoJS.CREATE_THUMBNAIL_CONTROLS && !this.thumbnail_control) {
this.thumbnail_control = new ThumbnailControl(this);
}
@@ -854,6 +859,12 @@ PanoJS.prototype.toggleMaximize = function() {
vd.style.height = '100%';
document.body.style.overflow = 'hidden';
document.body.style.padding = '0';
+ if (isMobileSafari()) {
+ vd.style.left = window.scrollX + 'px';
+ vd.style.top = window.scrollY + 'px';
+ vd.style.width = window.innerWidth + 'px';
+ vd.style.height = window.innerHeight + 'px';
+ }
} else {
document.body.style.padding = this.document_style.padding;
document.body.style.overflow = this.document_style.overflow;
@@ -1130,25 +1141,44 @@ PanoJS.prototype.gestureStartHandler = function(e) {
e = e ? e : window.event;
if (e == null) return false;
this.blockPropagation(e);
+ this.gesture_current_scale = 1.0;
+ this.gesture_image_scale = this.currentScale();
return false;
}
PanoJS.prototype.gestureChangeHandler = function(e) {
e = e ? e : window.event;
if (e == null) return false;
this.blockPropagation(e);
+
+ if (e.scale/this.gesture_current_scale>2.0) {
+ this.gesture_current_scale = e.scale;
+ this.zoom(1);
+ } else
+ if (e.scale/this.gesture_current_scale<0.5) {
+ this.gesture_current_scale = e.scale;
+ this.zoom(-1);
+ }
+
+ if (this.osd_control) {
+ e.image_scale = this.gesture_image_scale;
+ e.gesture_current_scale = this.gesture_current_scale;
+ this.osd_control.viewerZooming(e);
+ }
+
return false;
}
PanoJS.prototype.gestureEndHandler = function(e) {
e = e ? e : window.event;
if (e == null) return false;
this.blockPropagation(e);
+ if (this.osd_control) this.osd_control.show(false);
// e.scale e.rotation
- if (e.scale>1) this.zoom(1);
- else
- if (e.scale<1) this.zoom(-1);
+ //if (e.scale>1) this.zoom(1);
+ //else
+ //if (e.scale<1) this.zoom(-1);
return false;
}
@@ -13,7 +13,6 @@
function InfoControl(viewer) {
this.viewer = viewer;
this.createDOMElements();
-
this.viewer.addViewerZoomedListener(this);
}
@@ -46,3 +45,40 @@ InfoControl.prototype.viewerZoomed = function(e) {
this.dom_info.innerHTML = 'Image size: '+ sz.width +'x'+ sz.height +' Scale: '+ e.scale*100 +'%' +
' - <a href="http://www.dimin.net/software/panojs">PanoJS3</a>';
}
+
+//------------------------------------------------------------------------------
+// OsdControl
+//------------------------------------------------------------------------------
+
+PanoJS.OSD_CONTROL_STYLE = "text-shadow: 1px 1px 1px #000000; font-size: 50px;";
+
+if (isClientTouch())
+PanoJS.OSD_CONTROL_STYLE = "text-shadow: 2px 2px 2px #000000; font-size: 80px;";
+
+if (isClientPhone())
+PanoJS.OSD_CONTROL_STYLE = "text-shadow: 6px 6px 6px #000000; font-size: 120px;";
+
+function OsdControl(viewer) {
+ this.viewer = viewer;
+
+ this.dom_element = this.viewer.viewerDomElement();
+
+ this.dom_info = document.createElement('span');
+ this.dom_info.className = 'osd';
+ this.dom_element.appendChild(this.dom_info);
+
+ this.dom_info.setAttribute("style", PanoJS.OSD_CONTROL_STYLE );
+ this.dom_info.style.cssText = PanoJS.OSD_CONTROL_STYLE;
+}
+
+OsdControl.prototype.show = function(v) {
+ if (!this.dom_info) return;
+ if (!v) this.dom_info.innerHTML = '';
+}
+
+OsdControl.prototype.viewerZooming = function(e) {
+ if (!this.dom_info) return;
+ var dir = e.scale/e.gesture_current_scale>1.0 ? '+' : '-';
+ this.dom_info.innerHTML = dir+'<br />'+ Math.round(e.scale*e.image_scale*100)+'%';
+}
+
View
@@ -86,4 +86,10 @@ function isIE () {
return false;
}
+function isMobileSafari () {
+ if (navigator.userAgent.toLowerCase().indexOf("mobile")>=0 &&
+ navigator.userAgent.toLowerCase().indexOf("safari")>=0
+ ) return true;
+}
+
// ]]>
View
@@ -149,3 +149,19 @@
font-size: 12px;
text-overflow: ellipsis;
}
+
+.viewer .osd {
+ position: absolute;
+ z-index: 15;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ top: 0px;
+ left: 0px;
+ padding-top: 25px;
+ color: #FFFFFF;
+ text-shadow: 1px 1px 1px #000000;
+ font-size: 12px;
+ text-overflow: ellipsis;
+}
+

0 comments on commit d30aa36

Please sign in to comment.