Skip to content
This repository was archived by the owner on Feb 26, 2019. It is now read-only.

IE9 support #1

Open
ryleyb wants to merge 2 commits into
base: master
Choose a base branch
from
Open

IE9 support #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
50f9a0b
Change how canvases are initialized for IE9
ryleyb Jan 20, 2011
b0b367b
stop using the msie flag
ryleyb Jan 20, 2011
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion demo/test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/tags/m3/excanvas.compiled.js"></script><![endif]-->
<!--[if lte IE 8]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/tags/m3/excanvas.compiled.js"></script><![endif]-->
<title>Farbtastic v2</title>
<script type="text/javascript" charset="utf-8" src="../src/farbtastic.js"></script>
<script type="text/javascript" charset="utf-8">
Expand Down
37 changes: 19 additions & 18 deletions src/farbtastic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,17 @@ $._farbtastic = function (container, options) {
}

/////////////////////////////////////////////////////
//excanvas-compatible building of canvases
fb._makeCanvas = function(className){
var c = document.createElement('canvas');
if (!c.getContext) { // excanvas hack
c = window.G_vmlCanvasManager.initElement(c);
c.getContext(); //this creates the excanvas children
fb.usingExCanvas = true;
}
$(c).addClass(className);
return c;
}

/**
* Initialize the color picker widget.
Expand All @@ -90,27 +101,15 @@ $._farbtastic = function (container, options) {
.html(
'<div class="farbtastic" style="position: relative">' +
'<div class="farbtastic-solid"></div>' +
'<canvas class="farbtastic-mask"></canvas>' +
'<canvas class="farbtastic-overlay"></canvas>' +
'</div>'
)
.children('.farbtastic')
.append(fb._makeCanvas('farbtastic-mask'))
.append(fb._makeCanvas('farbtastic-overlay'))
.end()
.find('*').attr(dim).css(dim).end()
.find('div>*').css('position', 'absolute');

// IE Fix: Recreate canvas elements with doc.createElement and excanvas.
$.browser.msie && $('canvas', container).each(function () {
// Fetch info.
var attr = { 'class': $(this).attr('class'), style: this.getAttribute('style') },
e = document.createElement('canvas');
// Replace element.
$(this).before($(e).attr(attr)).remove();
// Init with explorerCanvas.
G_vmlCanvasManager && G_vmlCanvasManager.initElement(e);
// Set explorerCanvas elements dimensions and absolute positioning.
$(e).attr(dim).css(dim).css('position', 'absolute')
.find('*').attr(dim).css(dim);
});

// Determine layout
fb.radius = (options.width - options.wheelWidth) / 2 - 1;
fb.square = Math.floor((fb.radius - options.wheelWidth / 2) * 0.7) - 1;
Expand Down Expand Up @@ -166,7 +165,7 @@ $._farbtastic = function (container, options) {
// New color
color2 = fb.pack(fb.HSLToRGB([d2, 1, 0.5]));
if (i > 0) {
if ($.browser.msie) {
if (fb.usingExCanvas) {
// IE's gradient calculations mess up the colors. Correct along the diagonals.
var corr = (1 + Math.min(Math.abs(Math.tan(angle1)), Math.abs(Math.tan(Math.PI / 2 - angle1)))) / n;
color1 = fb.pack(fb.HSLToRGB([d1 - 0.15 * corr, 1, 0.5]));
Expand Down Expand Up @@ -246,7 +245,7 @@ $._farbtastic = function (container, options) {
fb.ctxMask.drawImage(buffer, 0, 0, sz + 1, sz + 1, -sq, -sq, sq * 2, sq * 2);
}
// Method #2: drawing commands (old Canvas).
else if (!$.browser.msie) {
else if (fb.usingExCanvas) {
// Render directly at half-resolution
var sz = Math.floor(size / 2);
calculateMask(sz, sz, function (x, y, c, a) {
Expand Down Expand Up @@ -499,6 +498,8 @@ $._farbtastic = function (container, options) {
callback: null
}, options);

fb.usingExCanvas = false;

// Initialize.
fb.initWidget();

Expand Down