r2636 - photoviewer: added canvas shadow rendering (currently breaks resizing)
Author: joern.zaefferer
Date: Mon Jun 1 10:21:51 2009
New Revision: 2636
Modified:
branches/labs/photoviewer/demos/photoviewer/default.html
branches/labs/photoviewer/themes/base/ui.photoviewer.css
branches/labs/photoviewer/ui/ui.photoviewer.js
Log:
photoviewer: added canvas shadow rendering (currently breaks resizing)
Modified: branches/labs/photoviewer/demos/photoviewer/default.html
==============================================================================
--- branches/labs/photoviewer/demos/photoviewer/default.html (original)
+++ branches/labs/photoviewer/demos/photoviewer/default.html Mon Jun 1
10:21:51 2009
@@ -21,51 +21,11 @@
window.setTimeout(function() {
$("#photos").photoviewer();
}, $.browser.safari ? 100 : 0);
-
- /*
- var width = 572, height = 362, cradius = 10;
- var canvas = $("<canvas/>").prependTo("body")[0];
- canvas.width = width; canvas.height = height;
- var ctx = canvas.getContext("2d");
-
-
- //ctx.fillStyle = "white";
- ctx.fillStyle = "rgba(0, 0, 0, 0)";
- //var i = 0;
- for (var i = 0; i < 15; i++) {
- ctx.beginPath();
- ctx.moveTo(cradius + i, i);
- ctx.quadraticCurveTo(i, i, i, cradius);
-
- // wrong
- ctx.lineTo(i, height - cradius);
- ctx.quadraticCurveTo(i, height, cradius + i, height);
-
- ctx.lineTo(width - cradius, height);
- ctx.quadraticCurveTo(width, height, width, height - cradius);
-
- // wrong
- ctx.lineTo(width, cradius + i);
- ctx.quadraticCurveTo(width, i, width - cradius, i);
-
- ctx.lineTo(cradius, i);
- ctx.fill();
- width--;
- height--;
- //ctx.fillStyle = 'rgb(' + (255-i*2) + "," + (255-i*2) + "," +
(255-i*2) + ")";
- ctx.fillStyle = "rgba(150, 150, 150, " + (0.2/15*i) + ")";
- }
- */
});
</script>
<style>
a img {
border: none;
- }
- canvas {
- position: absolute;
- top: 130px;
- left: 346px;
}
</style>
</head>
Modified: branches/labs/photoviewer/themes/base/ui.photoviewer.css
==============================================================================
--- branches/labs/photoviewer/themes/base/ui.photoviewer.css (original)
+++ branches/labs/photoviewer/themes/base/ui.photoviewer.css Mon Jun 1
10:21:51 2009
@@ -1,4 +1,6 @@
/* Photoviewer
----------------------------------*/
-.ui-photoviewer { position: absolute; z-index: 1000; border: 15px solid
white; /* for IE7 */ -ms-interpolation-mode: bicubic; }
+.ui-photoviewer-container { position: absolute; z-index: 1000; }
+.ui-photoviewer { border: 15px solid white; /* for IE7 */
-ms-interpolation-mode: bicubic; z-index: 1002; position: relative; }
.ui-loading-indicator { z-index: 1001; position: absolute; text-indent:
-10000px; width: 32px; height: 32px; background-image:
url(images/ajax-loader.gif); }
+.ui-photoviewer-shadow { position: absolute; top: -5px; left: -5px; }
Modified: branches/labs/photoviewer/ui/ui.photoviewer.js
==============================================================================
--- branches/labs/photoviewer/ui/ui.photoviewer.js (original)
+++ branches/labs/photoviewer/ui/ui.photoviewer.js Mon Jun 1 10:21:51 2009
@@ -135,23 +135,24 @@
}
this._showLoadingIndicator();
- this._viewer("new").attr("title", anchor.title +
this.options.titleSuffix).attr("src", anchor.href).one("load", function() {
+ this._viewer("new").attr("title", anchor.title +
this.options.titleSuffix).children("img").attr("src",
anchor.href).one("load", function() {
+ var $this = $(this).parent();
self._hideLoadingIndicator();
- self._resize($(this));
- self._position($(this));
+ self._resize($this);
+ self._position($this);
+ self._shadow($this);
self._overlay().attr("title", anchor.title + self.options.titleSuffix)
if (visible) {
- self.options.rotateIn.call(this, direction == "up" ? "down" : "up");
+ self.options.rotateIn.call($this[0], direction
== "up" ? "down" : "up");
} else {
self._overlay().css({
left: $(window).scrollLeft(),
top: $(window).scrollTop()
}).each(self.options.showOverlay);
- $(this).each(self.options.show);
+ $this.each(self.options.show);
}
self._preloadNeighbours();
- })
-
+ });
},
_preloadNeighbours: function() {
@@ -201,7 +202,7 @@
_viewer: function(create) {
if (create || !this.viewerElement) {
- this.viewerElement = this._element("img", "ui-photoviewer");
+ this.viewerElement =
this._element("div", "ui-photoviewer-container").append(this._element("img", "ui-photoviewer
ui-corner-all").show()).appendTo(document.body);
}
return this.viewerElement;
},
@@ -210,15 +211,53 @@
if (!this.options.overlay)
return $([]);
if (!this.overlayElement) {
- this.overlayElement = this._element("div", "ui-widget-overlay");
+ this.overlayElement =
this._element("div", "ui-widget-overlay").appendTo(document.body);
}
return this.overlayElement;
},
_element: function(type, clazz) {
- return $("<" + type
+ "/>").addClass(clazz).hide().appendTo(document.body);
+ return $("<" + type + "/>").addClass(clazz).hide();
+ },
+
+ _shadow: function(viewer) {
+ if (!$.support.canvas)
+ return;
+
+ var width = viewer.width() + 15,
+ height = viewer.height() + 15,
+ cradius = 10;
+ var canvas =
$("<canvas/>").addClass("ui-photoviewer-shadow").appendTo(this._viewer())[0];
+ canvas.width = width; canvas.height = height;
+ var ctx = canvas.getContext("2d");
+
+
+ for (var i = 0; i < 15; i++) {
+ ctx.fillStyle = "rgba(150, 150, 150, " + (0.2/15*i) + ")";
+ ctx.beginPath();
+ ctx.moveTo(cradius + i, i);
+ ctx.quadraticCurveTo(i, i, i, cradius + i);
+
+ // wrong
+ ctx.lineTo(i, height - cradius);
+ ctx.quadraticCurveTo(i, height, cradius + i, height);
+
+ ctx.lineTo(width - cradius, height);
+ ctx.quadraticCurveTo(width, height, width, height - cradius);
+
+ // wrong
+ ctx.lineTo(width, cradius + i);
+ ctx.quadraticCurveTo(width, i, width - cradius, i);
+
+ ctx.lineTo(cradius, i);
+ ctx.fill();
+ width--;
+ height--;
+ }
}
});
+
+ $.support.canvas = !!$("<canvas/>")[0].getContext
$.extend($.ui.photoviewer, {
defaults: {