Christophe Dumez
15 years ago
24 changed files with 8367 additions and 5790 deletions
@ -0,0 +1,54 @@ |
|||||||
|
/* |
||||||
|
|
||||||
|
Core.css for Mocha UI |
||||||
|
|
||||||
|
Theme: Default |
||||||
|
|
||||||
|
Copyright: |
||||||
|
Copyright (c) 2007-2009 Greg Houston, <http://greghoustondesign.com/>. |
||||||
|
|
||||||
|
License: |
||||||
|
MIT-style license. |
||||||
|
|
||||||
|
Notes: |
||||||
|
CSS rules in this file: |
||||||
|
|
||||||
|
1. Rules required by all MochaUI components or are shared by more than one. |
||||||
|
2. Theme specific ajustments to plugin styles. |
||||||
|
3. Miscellaneous rules that have no better place to go. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
/* Required By All |
||||||
|
---------------------------------------------------------------- */ |
||||||
|
|
||||||
|
/* Clears */ |
||||||
|
|
||||||
|
.clear { |
||||||
|
clear: both; |
||||||
|
height: 0; |
||||||
|
} |
||||||
|
|
||||||
|
* html .clear { |
||||||
|
font-size: 1px; |
||||||
|
line-height: 1px; |
||||||
|
overflow: hidden; |
||||||
|
visibility: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
/* Miscellaneous |
||||||
|
---------------------------------------------------------------- */ |
||||||
|
|
||||||
|
#themeControl { |
||||||
|
margin-top: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/* Theme Specific Adjustments to Default Plugin Styles |
||||||
|
---------------------------------------------------------------- */ |
||||||
|
|
||||||
|
/* Folder Tree */ |
||||||
|
|
||||||
|
.tree li a { |
||||||
|
color: #3f3f3f !important; |
||||||
|
} |
@ -0,0 +1,414 @@ |
|||||||
|
/* |
||||||
|
|
||||||
|
Core.css for Mocha UI |
||||||
|
|
||||||
|
Theme: Default |
||||||
|
|
||||||
|
Copyright: |
||||||
|
Copyright (c) 2007-2009 Greg Houston, <http://greghoustondesign.com/>. |
||||||
|
|
||||||
|
License: |
||||||
|
MIT-style license. |
||||||
|
|
||||||
|
Required by: |
||||||
|
Layout.js |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
/* Layout |
||||||
|
---------------------------------------------------------------- */ |
||||||
|
|
||||||
|
html, body { |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
margin: 0; /* Required */ |
||||||
|
} |
||||||
|
|
||||||
|
#desktop { |
||||||
|
position: relative; |
||||||
|
min-width: 400px; /* Helps keep header content from wrapping */ |
||||||
|
height: 100%; |
||||||
|
min-height: 100%; |
||||||
|
overflow: hidden; |
||||||
|
cursor: default; /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */ |
||||||
|
} |
||||||
|
|
||||||
|
#desktopHeader { |
||||||
|
background: #f2f2f2; |
||||||
|
} |
||||||
|
|
||||||
|
#desktopTitlebarWrapper { |
||||||
|
position: relative; |
||||||
|
height: 45px; |
||||||
|
overflow: hidden; |
||||||
|
background: #718BA6 url(../images/skin/bg-header.gif) repeat-x; |
||||||
|
} |
||||||
|
|
||||||
|
#desktopTitlebar { |
||||||
|
padding: 7px 8px 6px 8px; |
||||||
|
height: 32px; |
||||||
|
background: url(../images/skin/logo.gif) no-repeat; |
||||||
|
background-position: left 0; |
||||||
|
} |
||||||
|
|
||||||
|
#desktopTitlebar h1.applicationTitle { |
||||||
|
display: none; |
||||||
|
margin: 0; |
||||||
|
padding: 0 5px 0 0; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 25px; |
||||||
|
font-weight: bold; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
#desktopTitlebar h2.tagline { |
||||||
|
padding: 7px 0 0 0; |
||||||
|
font-family: Verdana, Arial, Helvetica, sans-serif; |
||||||
|
font-size: 10px; |
||||||
|
color: #d4dce4; |
||||||
|
font-weight: bold; |
||||||
|
text-align: center; |
||||||
|
text-transform: uppercase; |
||||||
|
} |
||||||
|
|
||||||
|
#desktopTitlebar h2.tagline .taglineEm { |
||||||
|
color: #fff; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
#topNav { |
||||||
|
font-family: Verdana, Arial, Helvetica, sans-serif; |
||||||
|
font-size: 10px; |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
top: 0; |
||||||
|
color: #d4dce4; |
||||||
|
text-align: right; |
||||||
|
padding: 13px 10px 0 0; |
||||||
|
} |
||||||
|
|
||||||
|
#topNav a { |
||||||
|
color: #fff; |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
|
||||||
|
#topNav a:hover { |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
/* Navbar */ |
||||||
|
|
||||||
|
#desktopNavbar { |
||||||
|
background: #f2f2f2; |
||||||
|
height: 30px; |
||||||
|
margin: 0 0px; |
||||||
|
overflow: hidden; /* Remove this line if you want the menu to be backward compatible with Firefox 2 */ |
||||||
|
} |
||||||
|
|
||||||
|
#desktopNavbar ul { |
||||||
|
padding: 0; |
||||||
|
margin: 0; |
||||||
|
list-style: none; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
#desktopNavbar li { |
||||||
|
float: left; |
||||||
|
} |
||||||
|
|
||||||
|
#desktopNavbar a { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
#desktopNavbar ul li a { |
||||||
|
padding: 6px 10px 6px 10px; |
||||||
|
color: #333; |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
|
||||||
|
#desktopNavbar ul li a:hover { |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
|
||||||
|
#desktopNavbar ul li a.arrow-right, #desktopNavbar ul li a:hover.arrow-right { |
||||||
|
background-image: url(../images/skin/arrow-right.gif); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: right 7px; |
||||||
|
} |
||||||
|
|
||||||
|
#desktopNavbar li ul { |
||||||
|
padding: 2px; |
||||||
|
border: 1px solid #3f3f3f; |
||||||
|
background: #fff url(../images/skin/bg-dropdown.gif) repeat-y; |
||||||
|
position: absolute; |
||||||
|
width: 164px; |
||||||
|
left: -999em; |
||||||
|
z-index: 8000; |
||||||
|
} |
||||||
|
|
||||||
|
#desktopNavbar li:hover ul ul, |
||||||
|
#desktopNavbar li.ieHover ul ul, |
||||||
|
#desktopNavbar li:hover ul ul ul, |
||||||
|
#desktopNavbar li.ieHover ul ul ul { |
||||||
|
left: -999em; |
||||||
|
} |
||||||
|
|
||||||
|
#desktopNavbar li ul ul { /* third-and-above-level lists */ |
||||||
|
margin: -22px 0 0 163px; |
||||||
|
} |
||||||
|
|
||||||
|
#desktopNavbar li ul li .check { |
||||||
|
position: absolute; |
||||||
|
top: 8px; |
||||||
|
left: 6px; |
||||||
|
width: 5px; |
||||||
|
height: 5px; |
||||||
|
background: #555; |
||||||
|
overflow: hidden; |
||||||
|
line-height: 1px; |
||||||
|
font-size: 1px; |
||||||
|
} |
||||||
|
|
||||||
|
#desktopNavbar li ul li a { |
||||||
|
position: relative; |
||||||
|
padding: 1px 9px 1px 25px; |
||||||
|
width: 130px; |
||||||
|
color: #3f3f3f; |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
|
||||||
|
#desktopNavbar li ul li a:hover { |
||||||
|
background: #6C98D9; |
||||||
|
color: #fff; |
||||||
|
-moz-border-radius: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
#desktopNavbar li ul li a:hover .check { |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
#desktopNavbar li:hover ul, |
||||||
|
#desktopNavbar li.ieHover ul, |
||||||
|
#desktopNavbar li li.ieHover ul, |
||||||
|
#desktopNavbar li li li.ieHover ul, |
||||||
|
#desktopNavbar li li:hover ul, |
||||||
|
#desktopNavbar li li li:hover ul { /* lists nested under hovered list items */ |
||||||
|
left: auto; |
||||||
|
} |
||||||
|
|
||||||
|
#desktopNavbar li:hover { /* For IE7 */ |
||||||
|
position: static; |
||||||
|
} |
||||||
|
|
||||||
|
li.divider { |
||||||
|
margin-top: 2px; |
||||||
|
padding-top: 3px; |
||||||
|
border-top: 1px solid #ebebeb; |
||||||
|
} |
||||||
|
|
||||||
|
#pageWrapper { |
||||||
|
position: relative; |
||||||
|
overflow: hidden; /* This can be set to hidden or auto */ |
||||||
|
border-top: 1px solid #909090; |
||||||
|
border-bottom: 1px solid #909090; |
||||||
|
/*height: 100%;*/ |
||||||
|
} |
||||||
|
|
||||||
|
/* Footer */ |
||||||
|
|
||||||
|
#desktopFooterWrapper { |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
bottom: 0; |
||||||
|
width: 100%; |
||||||
|
height: 30px; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
#desktopFooter { |
||||||
|
font-family: Verdana, Arial, Helvetica, sans-serif; |
||||||
|
font-size: 10px; |
||||||
|
height: 24px; |
||||||
|
padding: 6px 8px 0 8px; |
||||||
|
background: #f2f2f2; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Panel Layout |
||||||
|
---------------------------------------------------------------- */ |
||||||
|
|
||||||
|
/* Columns */ |
||||||
|
|
||||||
|
.column { |
||||||
|
position: relative; |
||||||
|
float: left; |
||||||
|
overflow: hidden; /* Required by IE6 */ |
||||||
|
} |
||||||
|
|
||||||
|
/* Panels */ |
||||||
|
|
||||||
|
.panel { |
||||||
|
position: relative; |
||||||
|
overflow: auto; |
||||||
|
background: #f8f8f8; |
||||||
|
border-bottom: 1px solid #b9b9b9; |
||||||
|
} |
||||||
|
|
||||||
|
.panelWrapper.collapsed .panel-header { |
||||||
|
border-bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.panelAlt { |
||||||
|
background: #f2f2f2; |
||||||
|
} |
||||||
|
|
||||||
|
.bottomPanel { |
||||||
|
border-bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.pad { |
||||||
|
padding: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
#mainPanel { |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.panel-header { |
||||||
|
position: relative; |
||||||
|
background: #f1f1f1 url(../images/skin/bg-panel-header.gif) repeat-x; |
||||||
|
height: 30px; |
||||||
|
overflow: hidden; |
||||||
|
border-bottom: 1px solid #d3d3d3; |
||||||
|
} |
||||||
|
|
||||||
|
.panel-headerContent { |
||||||
|
padding-top: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
.panel-headerContent.tabs { |
||||||
|
background: url(../images/skin/tabs.gif) repeat-x; |
||||||
|
background-position: left -68px; |
||||||
|
} |
||||||
|
|
||||||
|
.panel-header h2 { |
||||||
|
display: inline-block; |
||||||
|
font-size: 12px; |
||||||
|
margin: 0; |
||||||
|
padding: 3px 8px 0 8px; |
||||||
|
height: 22px; |
||||||
|
overflow: hidden; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
|
||||||
|
.panel-collapse { |
||||||
|
background: url(../images/skin/collapse-expand.gif) left top no-repeat; |
||||||
|
} |
||||||
|
|
||||||
|
.panel-expand { |
||||||
|
background: url(../images/skin/collapse-expand.gif) left -16px no-repeat; |
||||||
|
} |
||||||
|
|
||||||
|
.icon16 { |
||||||
|
margin: 4px 0 0 2px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
/* Column and Panel Handles */ |
||||||
|
|
||||||
|
.horizontalHandle { |
||||||
|
height: 4px; |
||||||
|
line-height: 1px; |
||||||
|
font-size: 1px; |
||||||
|
overflow: hidden; |
||||||
|
background: #eee url(../images/skin/bg-handle-horizontal.gif) repeat-x; |
||||||
|
} |
||||||
|
|
||||||
|
.horizontalHandle.detached .handleIcon { |
||||||
|
background: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.horizontalHandle .handleIcon { |
||||||
|
margin: 0 auto; |
||||||
|
height: 4px; |
||||||
|
line-height: 1px; |
||||||
|
font-size: 1px; |
||||||
|
overflow: hidden; |
||||||
|
background: url(../images/skin/handle-icon-horizontal.gif) center center no-repeat; |
||||||
|
} |
||||||
|
|
||||||
|
.columnHandle { |
||||||
|
min-height: 10px; |
||||||
|
float: left; |
||||||
|
width: 4px; |
||||||
|
overflow: hidden; |
||||||
|
background: #c3c3c3 url(../images/skin/handle-icon.gif) center center no-repeat; |
||||||
|
border: 1px solid #909090; |
||||||
|
border-top: 0; |
||||||
|
border-bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/* Toolboxes */ |
||||||
|
|
||||||
|
.toolbox { |
||||||
|
float: right; |
||||||
|
margin-top: 3px; |
||||||
|
padding: 0 5px; |
||||||
|
height: 24px; |
||||||
|
overflow: hidden; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
|
||||||
|
.panel-header-toolbox { |
||||||
|
} |
||||||
|
|
||||||
|
div.toolbox.divider { /* Have to specify div here for IE6's sake */ |
||||||
|
background: url(../images/skin/toolbox-divider.gif) repeat-y; |
||||||
|
padding-left: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.toolbox img.disabled { |
||||||
|
cursor: default; |
||||||
|
} |
||||||
|
|
||||||
|
.iconWrapper { |
||||||
|
display: inline-block; |
||||||
|
height: 22px; |
||||||
|
min-width: 22px; |
||||||
|
overflow: hidden; |
||||||
|
border: 1px solid transparent; |
||||||
|
} |
||||||
|
|
||||||
|
* html .iconWrapper { |
||||||
|
padding: 1px; |
||||||
|
border: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.iconWrapper img { |
||||||
|
cursor: pointer; |
||||||
|
margin: 0; |
||||||
|
padding: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
.iconWrapper:hover { |
||||||
|
border: 1px solid #a0a0a0; |
||||||
|
-moz-border-radius: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
#spinnerWrapper { |
||||||
|
width: 16px; |
||||||
|
height: 16px; |
||||||
|
background: url(../images/skin/spinner-placeholder.gif) no-repeat; |
||||||
|
margin: 4px 5px 0 5px; |
||||||
|
} |
||||||
|
|
||||||
|
#spinner { |
||||||
|
display: none; |
||||||
|
background: url(../images/skin/spinner.gif) no-repeat; |
||||||
|
width: 16px; |
||||||
|
height: 16px; |
||||||
|
} |
||||||
|
|
@ -0,0 +1,66 @@ |
|||||||
|
/* |
||||||
|
|
||||||
|
Tabs.css for Mocha UI |
||||||
|
|
||||||
|
Theme: Default |
||||||
|
|
||||||
|
Copyright: |
||||||
|
Copyright (c) 2007-2009 Greg Houston, <http://greghoustondesign.com/>. |
||||||
|
|
||||||
|
License: |
||||||
|
MIT-style license. |
||||||
|
|
||||||
|
Required by: |
||||||
|
Tabs.js |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
/* Toolbar Tabs */ |
||||||
|
|
||||||
|
.toolbarTabs { |
||||||
|
padding: 0 5px 2px 2px; |
||||||
|
background: url(../images/skin/tabs.gif) repeat-x; |
||||||
|
background-position: left -70px; |
||||||
|
overflow: visible; |
||||||
|
} |
||||||
|
|
||||||
|
.tab-menu { |
||||||
|
padding-top: 1px; |
||||||
|
list-style: none; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
line-height: 16px; |
||||||
|
font-size: 11px; |
||||||
|
} |
||||||
|
|
||||||
|
.tab-menu li { |
||||||
|
display: block; |
||||||
|
float: left; |
||||||
|
margin: 0 0 5px 0; |
||||||
|
cursor: pointer; |
||||||
|
background: url(../images/skin/tabs.gif) repeat-x; |
||||||
|
background-position: left -35px; |
||||||
|
} |
||||||
|
|
||||||
|
.tab-menu li.selected { |
||||||
|
background: url(../images/skin/tabs.gif) repeat-x; |
||||||
|
background-position: left 0; |
||||||
|
} |
||||||
|
|
||||||
|
.tab-menu li a { |
||||||
|
display: block; |
||||||
|
margin-left: 8px; |
||||||
|
padding: 6px 15px 5px 9px; |
||||||
|
text-align: center; |
||||||
|
font-weight: normal; |
||||||
|
color: #181818; |
||||||
|
background: url(../images/skin/tabs.gif) repeat-x; |
||||||
|
background-position: right -35px; |
||||||
|
} |
||||||
|
|
||||||
|
.tab-menu li.selected a { |
||||||
|
color: #181818; |
||||||
|
font-weight: bold; |
||||||
|
background: url(../images/skin/tabs.gif) repeat-x; |
||||||
|
background-position: right 0; |
||||||
|
} |
@ -0,0 +1,371 @@ |
|||||||
|
/* |
||||||
|
|
||||||
|
Window.css for Mocha UI |
||||||
|
|
||||||
|
Theme: Default |
||||||
|
|
||||||
|
Copyright: |
||||||
|
Copyright (c) 2007-2009 Greg Houston, <http://greghoustondesign.com/>. |
||||||
|
|
||||||
|
License: |
||||||
|
MIT-style license. |
||||||
|
|
||||||
|
Required by: |
||||||
|
Window.js and Modal.css |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
/* Windows |
||||||
|
---------------------------------------------------------------- */ |
||||||
|
|
||||||
|
.mocha { |
||||||
|
display: none; |
||||||
|
overflow: hidden; |
||||||
|
background-color: #e5e5e5; |
||||||
|
} |
||||||
|
|
||||||
|
.mocha.isFocused { |
||||||
|
} |
||||||
|
|
||||||
|
.mochaOverlay { |
||||||
|
position: absolute; /* This is also set in theme.js in order to make theme transitions smoother */ |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
We get a little creative here in order to define a gradient in the CSS using a query |
||||||
|
string appended to a background image. |
||||||
|
|
||||||
|
"from" is the top color of the gradient. "to" is the bottom color of the gradient. |
||||||
|
|
||||||
|
Both must be hex values without the leading # sign. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
.mochaTitlebar { |
||||||
|
width: 100%; |
||||||
|
overflow: hidden; |
||||||
|
background: url(../images/spacer.gif?from=fafafa&to=e5e5e5); |
||||||
|
} |
||||||
|
|
||||||
|
.mochaTitlebar h3 { |
||||||
|
font-size: 12px; |
||||||
|
line-height: 15px; |
||||||
|
font-weight: bold; |
||||||
|
margin: 0; |
||||||
|
padding: 5px 10px 4px 12px; |
||||||
|
color: #888; |
||||||
|
} |
||||||
|
|
||||||
|
.mocha.isFocused .mochaTitlebar h3 { |
||||||
|
color: #181818; |
||||||
|
} |
||||||
|
|
||||||
|
.mochaToolbarWrapper { |
||||||
|
width: 100%; /* For IE */ |
||||||
|
position: relative; |
||||||
|
height: 29px; |
||||||
|
background: #f1f1f1; |
||||||
|
overflow: hidden; |
||||||
|
border-top: 1px solid #d9d9d9; |
||||||
|
} |
||||||
|
|
||||||
|
div.mochaToolbarWrapper.bottom { |
||||||
|
border: 0; |
||||||
|
border-bottom: 1px solid #d9d9d9; |
||||||
|
} |
||||||
|
|
||||||
|
.mochaToolbar { |
||||||
|
width: 100%; /* For IE */ |
||||||
|
border-top: 1px solid #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.mochaContentBorder { |
||||||
|
border-top: 1px solid #dadada; |
||||||
|
border-bottom: 1px solid #dadada; |
||||||
|
} |
||||||
|
|
||||||
|
.mochaContentWrapper { /* Has a fixed height and scrollbars if required. */ |
||||||
|
font-size: 12px; |
||||||
|
overflow: auto; |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.mochaContent { |
||||||
|
padding: 10px 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.mocha .handle { |
||||||
|
position: absolute; |
||||||
|
background: #0f0; |
||||||
|
width: 3px; |
||||||
|
height: 3px; |
||||||
|
z-index: 2; |
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ |
||||||
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ |
||||||
|
opacity: .0; |
||||||
|
-moz-opacity: .0; |
||||||
|
overflow: hidden; |
||||||
|
font-size: 1px; /* For IE6 */ |
||||||
|
} |
||||||
|
|
||||||
|
.mocha .corner { /* Corner resize handles */ |
||||||
|
width: 10px; |
||||||
|
height: 10px; |
||||||
|
background: #f00; |
||||||
|
} |
||||||
|
|
||||||
|
.mocha .cornerSE { /* Bottom right resize handle */ |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
background: #fefefe; /* This is the color of the visible resize handle */ |
||||||
|
} |
||||||
|
|
||||||
|
.mochaCanvasHeader { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
background: transparent; |
||||||
|
z-index: -1; |
||||||
|
visibility: hidden; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.mochaControls { |
||||||
|
position: absolute; |
||||||
|
width: 52px; |
||||||
|
top: 8px; |
||||||
|
right: 8px; |
||||||
|
height: 14px; |
||||||
|
z-index: 4; |
||||||
|
background: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.mochaCanvasControls { |
||||||
|
position: absolute; |
||||||
|
top: 8px; |
||||||
|
right: 8px; |
||||||
|
z-index: 3; |
||||||
|
background: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
To use images for these buttons: |
||||||
|
1. Set the useCanvasControls window option to false. |
||||||
|
2. If you use a different button size you may need to reposition the controls. |
||||||
|
Modify the controlsOffset window option. |
||||||
|
2. Replcac the background-color with a background-image for each button. |
||||||
|
|
||||||
|
*/ |
||||||
|
.mochaMinimizeButton, .mochaMaximizeButton, .mochaCloseButton { |
||||||
|
float: right; |
||||||
|
width: 14px; |
||||||
|
height: 14px; |
||||||
|
font-size: 1px; |
||||||
|
cursor: pointer; |
||||||
|
z-index: 4; |
||||||
|
color: #666; |
||||||
|
background-color: #fff; |
||||||
|
margin-left: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.mochaMinimizeButton { |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.mochaMaximizeButton { |
||||||
|
} |
||||||
|
|
||||||
|
.mochaCloseButton { |
||||||
|
} |
||||||
|
|
||||||
|
.mochaSpinner{ |
||||||
|
display: none; |
||||||
|
position: absolute; |
||||||
|
bottom: 7px; |
||||||
|
left: 6px; |
||||||
|
width: 16px; |
||||||
|
height: 16px; |
||||||
|
background: url(../images/spinner.gif) no-repeat; |
||||||
|
} |
||||||
|
|
||||||
|
.mochaIframe { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
/* Fix for IE6 select z-index issue */ |
||||||
|
.zIndexFix { |
||||||
|
display: block; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
z-index: -1; |
||||||
|
filter: mask(); |
||||||
|
width: 100px; |
||||||
|
height: 100px; |
||||||
|
border: 1px solid transparent; |
||||||
|
} |
||||||
|
|
||||||
|
/* Viewport overlays |
||||||
|
---------------------------------------------------------------- */ |
||||||
|
|
||||||
|
#modalOverlay { |
||||||
|
display: none; |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
background: #000; |
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ |
||||||
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ |
||||||
|
opacity: 0; |
||||||
|
-moz-opacity: 0; |
||||||
|
z-index: 10000; |
||||||
|
} |
||||||
|
|
||||||
|
/* Fix for IE6 select z-index issue */ |
||||||
|
#modalFix { |
||||||
|
display: none; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ |
||||||
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ |
||||||
|
opacity: 0; |
||||||
|
-moz-opacity: 0; |
||||||
|
z-index: 9999; |
||||||
|
} |
||||||
|
|
||||||
|
/* Underlay */ |
||||||
|
|
||||||
|
#windowUnderlay { |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
* html #windowUnderlay { |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
|
||||||
|
/* The replaced class is used internally when converting CSS values to Canvas. These classes should not be removed. */ |
||||||
|
|
||||||
|
.mocha.replaced, .mochaTitlebar.replaced, .mochaMinimizeButton.replaced, .mochaMaximizeButton.replaced, .mochaCloseButton.replaced { |
||||||
|
background-color: transparent !important; |
||||||
|
} |
||||||
|
|
||||||
|
.windowClosed { |
||||||
|
visibility: hidden; |
||||||
|
display: none; |
||||||
|
position: absolute; |
||||||
|
top: -20000px; |
||||||
|
left: -20000px; |
||||||
|
z-index: -1; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.windowClosed .mochaContentBorder, .windowClosed .mochaToolbarWrapper, .windowClosed .mochaTitlebar, .windowClosed .mochaControls, |
||||||
|
.windowClosed .mochaCanvasControls { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
visibility: hidden; |
||||||
|
display: none; |
||||||
|
z-index: -1; |
||||||
|
} |
||||||
|
|
||||||
|
/* Modals */ |
||||||
|
|
||||||
|
.modal2 { |
||||||
|
border: 8px solid #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.modal2 .mochaContentBorder { |
||||||
|
border-width: 0px; |
||||||
|
} |
||||||
|
|
||||||
|
/* Window Themes */ |
||||||
|
|
||||||
|
.mocha.no-canvas { |
||||||
|
background: #e5e5e5; |
||||||
|
border: 1px solid #555; |
||||||
|
} |
||||||
|
|
||||||
|
.mocha.no-canvas .mochaTitlebar { |
||||||
|
background: #e5e5e5; |
||||||
|
} |
||||||
|
|
||||||
|
.mocha.transparent .mochaTitlebar h3 { |
||||||
|
color: #fff; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.mocha.transparent .mochaContentWrapper { |
||||||
|
background: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.mocha.notification { |
||||||
|
background: #cedff2; |
||||||
|
} |
||||||
|
|
||||||
|
.mocha.notification .mochaTitlebar { |
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ |
||||||
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ |
||||||
|
opacity: .0; |
||||||
|
-moz-opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.mocha.notification .mochaContentBorder { |
||||||
|
border-width: 0px; |
||||||
|
} |
||||||
|
|
||||||
|
.mocha.notification .mochaContentWrapper { |
||||||
|
text-align: center; |
||||||
|
font-size: 12px; |
||||||
|
font-weight: bold; |
||||||
|
background: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
/* Example Window Themes */ |
||||||
|
|
||||||
|
#about_contentWrapper { |
||||||
|
background: #e5e5e5 url(../images/logo2.gif) 3px 3px no-repeat; |
||||||
|
} |
||||||
|
|
||||||
|
#builder_contentWrapper { |
||||||
|
background: #f5f5f7; |
||||||
|
} |
||||||
|
|
||||||
|
#json01 .mochaTitlebar { |
||||||
|
background: #6dd2db; |
||||||
|
} |
||||||
|
|
||||||
|
#json02 .mochaTitlebar { |
||||||
|
background: #6db6db; |
||||||
|
} |
||||||
|
|
||||||
|
#json03 .mochaTitlebar { |
||||||
|
background: #6d92db; |
||||||
|
} |
||||||
|
|
||||||
|
.jsonExample .mochaTitlebar h3 { |
||||||
|
color: #ddd; |
||||||
|
} |
||||||
|
|
||||||
|
/* This does not work in IE6. */ |
||||||
|
.isFocused.jsonExample .mochaTitlebar h3 { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
#fxmorpherExample .mochaContentWrapper { |
||||||
|
background: #577a9e; |
||||||
|
} |
||||||
|
|
||||||
|
#clock { |
||||||
|
background: #fff; |
||||||
|
} |
@ -1,19 +1,876 @@ |
|||||||
if(!window.CanvasRenderingContext2D){(function(){var I=Math,i=I.round,L=I.sin,M=I.cos,m=10,A=m/2,Q={init:function(a){var b=a||document;if(/MSIE/.test(navigator.userAgent)&&!window.opera){var c=this;b.attachEvent("onreadystatechange",function(){c.r(b)})}},r:function(a){if(a.readyState=="complete"){if(!a.namespaces["s"]){a.namespaces.add("g_vml_","urn:schemas-microsoft-com:vml")}var b=a.createStyleSheet();b.cssText="canvas{display:inline-block;overflow:hidden;text-align:left;width:300px;height:150px}g_vml_\\:*{behavior:url(#default#VML)}"; |
// Copyright 2006 Google Inc.
|
||||||
var c=a.getElementsByTagName("canvas");for(var d=0;d<c.length;d++){if(!c[d].getContext){this.initElement(c[d])}}}},q:function(a){var b=a.outerHTML,c=a.ownerDocument.createElement(b);if(b.slice(-2)!="/>"){var d="/"+a.tagName,e;while((e=a.nextSibling)&&e.tagName!=d){e.removeNode()}if(e){e.removeNode()}}a.parentNode.replaceChild(c,a);return c},initElement:function(a){a=this.q(a);a.getContext=function(){if(this.l){return this.l}return this.l=new K(this)};a.attachEvent("onpropertychange",V);a.attachEvent("onresize", |
//
|
||||||
W);var b=a.attributes;if(b.width&&b.width.specified){a.style.width=b.width.nodeValue+"px"}else{a.width=a.clientWidth}if(b.height&&b.height.specified){a.style.height=b.height.nodeValue+"px"}else{a.height=a.clientHeight}return a}};function V(a){var b=a.srcElement;switch(a.propertyName){case "width":b.style.width=b.attributes.width.nodeValue+"px";b.getContext().clearRect();break;case "height":b.style.height=b.attributes.height.nodeValue+"px";b.getContext().clearRect();break}}function W(a){var b=a.srcElement; |
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
if(b.firstChild){b.firstChild.style.width=b.clientWidth+"px";b.firstChild.style.height=b.clientHeight+"px"}}Q.init();var R=[];for(var E=0;E<16;E++){for(var F=0;F<16;F++){R[E*16+F]=E.toString(16)+F.toString(16)}}function J(){return[[1,0,0],[0,1,0],[0,0,1]]}function G(a,b){var c=J();for(var d=0;d<3;d++){for(var e=0;e<3;e++){var g=0;for(var h=0;h<3;h++){g+=a[d][h]*b[h][e]}c[d][e]=g}}return c}function N(a,b){b.fillStyle=a.fillStyle;b.lineCap=a.lineCap;b.lineJoin=a.lineJoin;b.lineWidth=a.lineWidth;b.miterLimit= |
// you may not use this file except in compliance with the License.
|
||||||
a.miterLimit;b.shadowBlur=a.shadowBlur;b.shadowColor=a.shadowColor;b.shadowOffsetX=a.shadowOffsetX;b.shadowOffsetY=a.shadowOffsetY;b.strokeStyle=a.strokeStyle;b.d=a.d;b.e=a.e}function O(a){var b,c=1;a=String(a);if(a.substring(0,3)=="rgb"){var d=a.indexOf("(",3),e=a.indexOf(")",d+1),g=a.substring(d+1,e).split(",");b="#";for(var h=0;h<3;h++){b+=R[Number(g[h])]}if(g.length==4&&a.substr(3,1)=="a"){c=g[3]}}else{b=a}return[b,c]}function S(a){switch(a){case "butt":return"flat";case "round":return"round"; |
// You may obtain a copy of the License at
|
||||||
case "square":default:return"square"}}function K(a){this.a=J();this.m=[];this.k=[];this.c=[];this.strokeStyle="#000";this.fillStyle="#000";this.lineWidth=1;this.lineJoin="miter";this.lineCap="butt";this.miterLimit=m*1;this.globalAlpha=1;this.canvas=a;var b=a.ownerDocument.createElement("div");b.style.width=a.clientWidth+"px";b.style.height=a.clientHeight+"px";b.style.overflow="hidden";b.style.position="absolute";a.appendChild(b);this.j=b;this.d=1;this.e=1}var j=K.prototype;j.clearRect=function(){this.j.innerHTML= |
//
|
||||||
"";this.c=[]};j.beginPath=function(){this.c=[]};j.moveTo=function(a,b){this.c.push({type:"moveTo",x:a,y:b});this.f=a;this.g=b};j.lineTo=function(a,b){this.c.push({type:"lineTo",x:a,y:b});this.f=a;this.g=b};j.bezierCurveTo=function(a,b,c,d,e,g){this.c.push({type:"bezierCurveTo",cp1x:a,cp1y:b,cp2x:c,cp2y:d,x:e,y:g});this.f=e;this.g=g};j.quadraticCurveTo=function(a,b,c,d){var e=this.f+0.6666666666666666*(a-this.f),g=this.g+0.6666666666666666*(b-this.g),h=e+(c-this.f)/3,l=g+(d-this.g)/3;this.bezierCurveTo(e, |
// http://www.apache.org/licenses/LICENSE-2.0
|
||||||
g,h,l,c,d)};j.arc=function(a,b,c,d,e,g){c*=m;var h=g?"at":"wa",l=a+M(d)*c-A,n=b+L(d)*c-A,o=a+M(e)*c-A,f=b+L(e)*c-A;if(l==o&&!g){l+=0.125}this.c.push({type:h,x:a,y:b,radius:c,xStart:l,yStart:n,xEnd:o,yEnd:f})};j.rect=function(a,b,c,d){this.moveTo(a,b);this.lineTo(a+c,b);this.lineTo(a+c,b+d);this.lineTo(a,b+d);this.closePath()};j.strokeRect=function(a,b,c,d){this.beginPath();this.moveTo(a,b);this.lineTo(a+c,b);this.lineTo(a+c,b+d);this.lineTo(a,b+d);this.closePath();this.stroke()};j.fillRect=function(a, |
//
|
||||||
b,c,d){this.beginPath();this.moveTo(a,b);this.lineTo(a+c,b);this.lineTo(a+c,b+d);this.lineTo(a,b+d);this.closePath();this.fill()};j.createLinearGradient=function(a,b,c,d){var e=new H("gradient");return e};j.createRadialGradient=function(a,b,c,d,e,g){var h=new H("gradientradial");h.n=c;h.o=g;h.i.x=a;h.i.y=b;return h};j.drawImage=function(a,b){var c,d,e,g,h,l,n,o,f=a.runtimeStyle.width,k=a.runtimeStyle.height;a.runtimeStyle.width="auto";a.runtimeStyle.height="auto";var q=a.width,r=a.height;a.runtimeStyle.width= |
// Unless required by applicable law or agreed to in writing, software
|
||||||
f;a.runtimeStyle.height=k;if(arguments.length==3){c=arguments[1];d=arguments[2];h=(l=0);n=(e=q);o=(g=r)}else if(arguments.length==5){c=arguments[1];d=arguments[2];e=arguments[3];g=arguments[4];h=(l=0);n=q;o=r}else if(arguments.length==9){h=arguments[1];l=arguments[2];n=arguments[3];o=arguments[4];c=arguments[5];d=arguments[6];e=arguments[7];g=arguments[8]}else{throw"Invalid number of arguments";}var s=this.b(c,d),t=[],v=10,w=10;t.push(" <g_vml_:group",' coordsize="',m*v,",",m*w,'"',' coordorigin="0,0"', |
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
' style="width:',v,";height:",w,";position:absolute;");if(this.a[0][0]!=1||this.a[0][1]){var x=[];x.push("M11='",this.a[0][0],"',","M12='",this.a[1][0],"',","M21='",this.a[0][1],"',","M22='",this.a[1][1],"',","Dx='",i(s.x/m),"',","Dy='",i(s.y/m),"'");var p=s,y=this.b(c+e,d),z=this.b(c,d+g),B=this.b(c+e,d+g);p.x=Math.max(p.x,y.x,z.x,B.x);p.y=Math.max(p.y,y.y,z.y,B.y);t.push("padding:0 ",i(p.x/m),"px ",i(p.y/m),"px 0;filter:progid:DXImageTransform.Microsoft.Matrix(",x.join(""),", sizingmethod='clip');")}else{t.push("top:", |
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
i(s.y/m),"px;left:",i(s.x/m),"px;")}t.push(' ">','<g_vml_:image src="',a.src,'"',' style="width:',m*e,";"," height:",m*g,';"',' cropleft="',h/q,'"',' croptop="',l/r,'"',' cropright="',(q-h-n)/q,'"',' cropbottom="',(r-l-o)/r,'"'," />","</g_vml_:group>");this.j.insertAdjacentHTML("BeforeEnd",t.join(""))};j.stroke=function(a){var b=[],c=O(a?this.fillStyle:this.strokeStyle),d=c[0],e=c[1]*this.globalAlpha,g=10,h=10;b.push("<g_vml_:shape",' fillcolor="',d,'"',' filled="',Boolean(a),'"',' style="position:absolute;width:', |
// See the License for the specific language governing permissions and
|
||||||
g,";height:",h,';"',' coordorigin="0 0" coordsize="',m*g," ",m*h,'"',' stroked="',!a,'"',' strokeweight="',this.lineWidth,'"',' strokecolor="',d,'"',' path="');var l={x:null,y:null},n={x:null,y:null};for(var o=0;o<this.c.length;o++){var f=this.c[o];if(f.type=="moveTo"){b.push(" m ");var k=this.b(f.x,f.y);b.push(i(k.x),",",i(k.y))}else if(f.type=="lineTo"){b.push(" l ");var k=this.b(f.x,f.y);b.push(i(k.x),",",i(k.y))}else if(f.type=="close"){b.push(" x ")}else if(f.type=="bezierCurveTo"){b.push(" c "); |
// limitations under the License.
|
||||||
var k=this.b(f.x,f.y),q=this.b(f.cp1x,f.cp1y),r=this.b(f.cp2x,f.cp2y);b.push(i(q.x),",",i(q.y),",",i(r.x),",",i(r.y),",",i(k.x),",",i(k.y))}else if(f.type=="at"||f.type=="wa"){b.push(" ",f.type," ");var k=this.b(f.x,f.y),s=this.b(f.xStart,f.yStart),t=this.b(f.xEnd,f.yEnd);b.push(i(k.x-this.d*f.radius),",",i(k.y-this.e*f.radius)," ",i(k.x+this.d*f.radius),",",i(k.y+this.e*f.radius)," ",i(s.x),",",i(s.y)," ",i(t.x),",",i(t.y))}if(k){if(l.x==null||k.x<l.x){l.x=k.x}if(n.x==null||k.x>n.x){n.x=k.x}if(l.y== |
|
||||||
null||k.y<l.y){l.y=k.y}if(n.y==null||k.y>n.y){n.y=k.y}}}b.push(' ">');if(typeof this.fillStyle=="object"){var v={x:"50%",y:"50%"},w=n.x-l.x,x=n.y-l.y,p=w>x?w:x;v.x=i(this.fillStyle.i.x/w*100+50)+"%";v.y=i(this.fillStyle.i.y/x*100+50)+"%";var y=[];if(this.fillStyle.p=="gradientradial"){var z=this.fillStyle.n/p*100,B=this.fillStyle.o/p*100-z}else{var z=0,B=100}var C={offset:null,color:null},D={offset:null,color:null};this.fillStyle.h.sort(function(T,U){return T.offset-U.offset});for(var o=0;o<this.fillStyle.h.length;o++){var u= |
|
||||||
this.fillStyle.h[o];y.push(u.offset*B+z,"% ",u.color,",");if(u.offset>C.offset||C.offset==null){C.offset=u.offset;C.color=u.color}if(u.offset<D.offset||D.offset==null){D.offset=u.offset;D.color=u.color}}y.pop();b.push("<g_vml_:fill",' color="',D.color,'"',' color2="',C.color,'"',' type="',this.fillStyle.p,'"',' focusposition="',v.x,", ",v.y,'"',' colors="',y.join(""),'"',' opacity="',e,'" />')}else if(a){b.push('<g_vml_:fill color="',d,'" opacity="',e,'" />')}else{b.push("<g_vml_:stroke",' opacity="', |
// Known Issues:
|
||||||
e,'"',' joinstyle="',this.lineJoin,'"',' miterlimit="',this.miterLimit,'"',' endcap="',S(this.lineCap),'"',' weight="',this.lineWidth,'px"',' color="',d,'" />')}b.push("</g_vml_:shape>");this.j.insertAdjacentHTML("beforeEnd",b.join(""));this.c=[]};j.fill=function(){this.stroke(true)};j.closePath=function(){this.c.push({type:"close"})};j.b=function(a,b){return{x:m*(a*this.a[0][0]+b*this.a[1][0]+this.a[2][0])-A,y:m*(a*this.a[0][1]+b*this.a[1][1]+this.a[2][1])-A}};j.save=function(){var a={};N(this,a); |
//
|
||||||
this.k.push(a);this.m.push(this.a);this.a=G(J(),this.a)};j.restore=function(){N(this.k.pop(),this);this.a=this.m.pop()};j.translate=function(a,b){var c=[[1,0,0],[0,1,0],[a,b,1]];this.a=G(c,this.a)};j.rotate=function(a){var b=M(a),c=L(a),d=[[b,c,0],[-c,b,0],[0,0,1]];this.a=G(d,this.a)};j.scale=function(a,b){this.d*=a;this.e*=b;var c=[[a,0,0],[0,b,0],[0,0,1]];this.a=G(c,this.a)};j.clip=function(){};j.arcTo=function(){};j.createPattern=function(){return new P};function H(a){this.p=a;this.n=0;this.o= |
// * Patterns are not implemented.
|
||||||
0;this.h=[];this.i={x:0,y:0}}H.prototype.addColorStop=function(a,b){b=O(b);this.h.push({offset:1-a,color:b})};function P(){}G_vmlCanvasManager=Q;CanvasRenderingContext2D=K;CanvasGradient=H;CanvasPattern=P})()}; |
// * Radial gradient are not implemented. The VML version of these look very
|
||||||
|
// different from the canvas one.
|
||||||
|
// * Clipping paths are not implemented.
|
||||||
|
// * Coordsize. The width and height attribute have higher priority than the
|
||||||
|
// width and height style values which isn't correct.
|
||||||
|
// * Painting mode isn't implemented.
|
||||||
|
// * Canvas width/height should is using content-box by default. IE in
|
||||||
|
// Quirks mode will draw the canvas using border-box. Either change your
|
||||||
|
// doctype to HTML5
|
||||||
|
// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
|
||||||
|
// or use Box Sizing Behavior from WebFX
|
||||||
|
// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
|
||||||
|
// * Non uniform scaling does not correctly scale strokes.
|
||||||
|
// * Optimize. There is always room for speed improvements.
|
||||||
|
|
||||||
|
// Only add this code if we do not already have a canvas implementation
|
||||||
|
if (!document.createElement('canvas').getContext) { |
||||||
|
|
||||||
|
(function() { |
||||||
|
|
||||||
|
// alias some functions to make (compiled) code shorter
|
||||||
|
var m = Math; |
||||||
|
var mr = m.round; |
||||||
|
var ms = m.sin; |
||||||
|
var mc = m.cos; |
||||||
|
var abs = m.abs; |
||||||
|
var sqrt = m.sqrt; |
||||||
|
|
||||||
|
// this is used for sub pixel precision
|
||||||
|
var Z = 10; |
||||||
|
var Z2 = Z / 2; |
||||||
|
|
||||||
|
/** |
||||||
|
* This funtion is assigned to the <canvas> elements as element.getContext(). |
||||||
|
* @this {HTMLElement} |
||||||
|
* @return {CanvasRenderingContext2D_} |
||||||
|
*/ |
||||||
|
function getContext() { |
||||||
|
return this.context_ || |
||||||
|
(this.context_ = new CanvasRenderingContext2D_(this)); |
||||||
|
} |
||||||
|
|
||||||
|
var slice = Array.prototype.slice; |
||||||
|
|
||||||
|
/** |
||||||
|
* Binds a function to an object. The returned function will always use the |
||||||
|
* passed in {@code obj} as {@code this}. |
||||||
|
* |
||||||
|
* Example: |
||||||
|
* |
||||||
|
* g = bind(f, obj, a, b) |
||||||
|
* g(c, d) // will do f.call(obj, a, b, c, d)
|
||||||
|
* |
||||||
|
* @param {Function} f The function to bind the object to |
||||||
|
* @param {Object} obj The object that should act as this when the function |
||||||
|
* is called |
||||||
|
* @param {*} var_args Rest arguments that will be used as the initial |
||||||
|
* arguments when the function is called |
||||||
|
* @return {Function} A new function that has bound this |
||||||
|
*/ |
||||||
|
function bind(f, obj, var_args) { |
||||||
|
var a = slice.call(arguments, 2); |
||||||
|
return function() { |
||||||
|
return f.apply(obj, a.concat(slice.call(arguments))); |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
var G_vmlCanvasManager_ = { |
||||||
|
init: function(opt_doc) { |
||||||
|
if (/MSIE/.test(navigator.userAgent) && !window.opera) { |
||||||
|
var doc = opt_doc || document; |
||||||
|
// Create a dummy element so that IE will allow canvas elements to be
|
||||||
|
// recognized.
|
||||||
|
doc.createElement('canvas'); |
||||||
|
doc.attachEvent('onreadystatechange', bind(this.init_, this, doc)); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
init_: function(doc) { |
||||||
|
// create xmlns
|
||||||
|
if (!doc.namespaces['g_vml_']) { |
||||||
|
doc.namespaces.add('g_vml_', 'urn:schemas-microsoft-com:vml', |
||||||
|
'#default#VML'); |
||||||
|
|
||||||
|
} |
||||||
|
if (!doc.namespaces['g_o_']) { |
||||||
|
doc.namespaces.add('g_o_', 'urn:schemas-microsoft-com:office:office', |
||||||
|
'#default#VML'); |
||||||
|
} |
||||||
|
|
||||||
|
// Setup default CSS. Only add one style sheet per document
|
||||||
|
if (!doc.styleSheets['ex_canvas_']) { |
||||||
|
var ss = doc.createStyleSheet(); |
||||||
|
ss.owningElement.id = 'ex_canvas_'; |
||||||
|
ss.cssText = 'canvas{display:inline-block;overflow:hidden;' + |
||||||
|
// default size is 300x150 in Gecko and Opera
|
||||||
|
'text-align:left;width:300px;height:150px}' + |
||||||
|
'g_vml_\\:*{behavior:url(#default#VML)}' + |
||||||
|
'g_o_\\:*{behavior:url(#default#VML)}'; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// find all canvas elements
|
||||||
|
var els = doc.getElementsByTagName('canvas'); |
||||||
|
for (var i = 0; i < els.length; i++) { |
||||||
|
this.initElement(els[i]); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* Public initializes a canvas element so that it can be used as canvas |
||||||
|
* element from now on. This is called automatically before the page is |
||||||
|
* loaded but if you are creating elements using createElement you need to |
||||||
|
* make sure this is called on the element. |
||||||
|
* @param {HTMLElement} el The canvas element to initialize. |
||||||
|
* @return {HTMLElement} the element that was created. |
||||||
|
*/ |
||||||
|
initElement: function(el) { |
||||||
|
if (!el.getContext) { |
||||||
|
|
||||||
|
el.getContext = getContext; |
||||||
|
|
||||||
|
// do not use inline function because that will leak memory
|
||||||
|
el.attachEvent('onpropertychange', onPropertyChange); |
||||||
|
el.attachEvent('onresize', onResize); |
||||||
|
|
||||||
|
var attrs = el.attributes; |
||||||
|
if (attrs.width && attrs.width.specified) { |
||||||
|
// TODO: use runtimeStyle and coordsize
|
||||||
|
// el.getContext().setWidth_(attrs.width.nodeValue);
|
||||||
|
el.style.width = attrs.width.nodeValue + 'px'; |
||||||
|
} else { |
||||||
|
el.width = el.clientWidth; |
||||||
|
} |
||||||
|
if (attrs.height && attrs.height.specified) { |
||||||
|
// TODO: use runtimeStyle and coordsize
|
||||||
|
// el.getContext().setHeight_(attrs.height.nodeValue);
|
||||||
|
el.style.height = attrs.height.nodeValue + 'px'; |
||||||
|
} else { |
||||||
|
el.height = el.clientHeight; |
||||||
|
} |
||||||
|
//el.getContext().setCoordsize_()
|
||||||
|
} |
||||||
|
return el; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
function onPropertyChange(e) { |
||||||
|
var el = e.srcElement; |
||||||
|
|
||||||
|
switch (e.propertyName) { |
||||||
|
case 'width': |
||||||
|
el.style.width = el.attributes.width.nodeValue + 'px'; |
||||||
|
el.getContext().clearRect(); |
||||||
|
break; |
||||||
|
case 'height': |
||||||
|
el.style.height = el.attributes.height.nodeValue + 'px'; |
||||||
|
el.getContext().clearRect(); |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function onResize(e) { |
||||||
|
var el = e.srcElement; |
||||||
|
if (el.firstChild) { |
||||||
|
el.firstChild.style.width = el.clientWidth + 'px'; |
||||||
|
el.firstChild.style.height = el.clientHeight + 'px'; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
G_vmlCanvasManager_.init(); |
||||||
|
|
||||||
|
// precompute "00" to "FF"
|
||||||
|
var dec2hex = []; |
||||||
|
for (var i = 0; i < 16; i++) { |
||||||
|
for (var j = 0; j < 16; j++) { |
||||||
|
dec2hex[i * 16 + j] = i.toString(16) + j.toString(16); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function createMatrixIdentity() { |
||||||
|
return [ |
||||||
|
[1, 0, 0], |
||||||
|
[0, 1, 0], |
||||||
|
[0, 0, 1] |
||||||
|
]; |
||||||
|
} |
||||||
|
|
||||||
|
function matrixMultiply(m1, m2) { |
||||||
|
var result = createMatrixIdentity(); |
||||||
|
|
||||||
|
for (var x = 0; x < 3; x++) { |
||||||
|
for (var y = 0; y < 3; y++) { |
||||||
|
var sum = 0; |
||||||
|
|
||||||
|
for (var z = 0; z < 3; z++) { |
||||||
|
sum += m1[x][z] * m2[z][y]; |
||||||
|
} |
||||||
|
|
||||||
|
result[x][y] = sum; |
||||||
|
} |
||||||
|
} |
||||||
|
return result; |
||||||
|
} |
||||||
|
|
||||||
|
function copyState(o1, o2) { |
||||||
|
o2.fillStyle = o1.fillStyle; |
||||||
|
o2.lineCap = o1.lineCap; |
||||||
|
o2.lineJoin = o1.lineJoin; |
||||||
|
o2.lineWidth = o1.lineWidth; |
||||||
|
o2.miterLimit = o1.miterLimit; |
||||||
|
o2.shadowBlur = o1.shadowBlur; |
||||||
|
o2.shadowColor = o1.shadowColor; |
||||||
|
o2.shadowOffsetX = o1.shadowOffsetX; |
||||||
|
o2.shadowOffsetY = o1.shadowOffsetY; |
||||||
|
o2.strokeStyle = o1.strokeStyle; |
||||||
|
o2.globalAlpha = o1.globalAlpha; |
||||||
|
o2.arcScaleX_ = o1.arcScaleX_; |
||||||
|
o2.arcScaleY_ = o1.arcScaleY_; |
||||||
|
o2.lineScale_ = o1.lineScale_; |
||||||
|
} |
||||||
|
|
||||||
|
function processStyle(styleString) { |
||||||
|
var str, alpha = 1; |
||||||
|
|
||||||
|
styleString = String(styleString); |
||||||
|
if (styleString.substring(0, 3) == 'rgb') { |
||||||
|
var start = styleString.indexOf('(', 3); |
||||||
|
var end = styleString.indexOf(')', start + 1); |
||||||
|
var guts = styleString.substring(start + 1, end).split(','); |
||||||
|
|
||||||
|
str = '#'; |
||||||
|
for (var i = 0; i < 3; i++) { |
||||||
|
str += dec2hex[Number(guts[i])]; |
||||||
|
} |
||||||
|
|
||||||
|
if (guts.length == 4 && styleString.substr(3, 1) == 'a') { |
||||||
|
alpha = guts[3]; |
||||||
|
} |
||||||
|
} else { |
||||||
|
str = styleString; |
||||||
|
} |
||||||
|
|
||||||
|
return {color: str, alpha: alpha}; |
||||||
|
} |
||||||
|
|
||||||
|
function processLineCap(lineCap) { |
||||||
|
switch (lineCap) { |
||||||
|
case 'butt': |
||||||
|
return 'flat'; |
||||||
|
case 'round': |
||||||
|
return 'round'; |
||||||
|
case 'square': |
||||||
|
default: |
||||||
|
return 'square'; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* This class implements CanvasRenderingContext2D interface as described by |
||||||
|
* the WHATWG. |
||||||
|
* @param {HTMLElement} surfaceElement The element that the 2D context should |
||||||
|
* be associated with |
||||||
|
*/ |
||||||
|
function CanvasRenderingContext2D_(surfaceElement) { |
||||||
|
this.m_ = createMatrixIdentity(); |
||||||
|
|
||||||
|
this.mStack_ = []; |
||||||
|
this.aStack_ = []; |
||||||
|
this.currentPath_ = []; |
||||||
|
|
||||||
|
// Canvas context properties
|
||||||
|
this.strokeStyle = '#000'; |
||||||
|
this.fillStyle = '#000'; |
||||||
|
|
||||||
|
this.lineWidth = 1; |
||||||
|
this.lineJoin = 'miter'; |
||||||
|
this.lineCap = 'butt'; |
||||||
|
this.miterLimit = Z * 1; |
||||||
|
this.globalAlpha = 1; |
||||||
|
this.canvas = surfaceElement; |
||||||
|
|
||||||
|
var el = surfaceElement.ownerDocument.createElement('div'); |
||||||
|
el.style.width = surfaceElement.clientWidth + 'px'; |
||||||
|
el.style.height = surfaceElement.clientHeight + 'px'; |
||||||
|
el.style.overflow = 'hidden'; |
||||||
|
el.style.position = 'absolute'; |
||||||
|
surfaceElement.appendChild(el); |
||||||
|
|
||||||
|
this.element_ = el; |
||||||
|
this.arcScaleX_ = 1; |
||||||
|
this.arcScaleY_ = 1; |
||||||
|
this.lineScale_ = 1; |
||||||
|
} |
||||||
|
|
||||||
|
var contextPrototype = CanvasRenderingContext2D_.prototype; |
||||||
|
contextPrototype.clearRect = function() { |
||||||
|
this.element_.innerHTML = ''; |
||||||
|
this.currentPath_ = []; |
||||||
|
}; |
||||||
|
|
||||||
|
contextPrototype.beginPath = function() { |
||||||
|
// TODO: Branch current matrix so that save/restore has no effect
|
||||||
|
// as per safari docs.
|
||||||
|
this.currentPath_ = []; |
||||||
|
}; |
||||||
|
|
||||||
|
contextPrototype.moveTo = function(aX, aY) { |
||||||
|
var p = this.getCoords_(aX, aY); |
||||||
|
this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y}); |
||||||
|
this.currentX_ = p.x; |
||||||
|
this.currentY_ = p.y; |
||||||
|
}; |
||||||
|
|
||||||
|
contextPrototype.lineTo = function(aX, aY) { |
||||||
|
var p = this.getCoords_(aX, aY); |
||||||
|
this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y}); |
||||||
|
|
||||||
|
this.currentX_ = p.x; |
||||||
|
this.currentY_ = p.y; |
||||||
|
}; |
||||||
|
|
||||||
|
contextPrototype.bezierCurveTo = function(aCP1x, aCP1y, |
||||||
|
aCP2x, aCP2y, |
||||||
|
aX, aY) { |
||||||
|
var p = this.getCoords_(aX, aY); |
||||||
|
var cp1 = this.getCoords_(aCP1x, aCP1y); |
||||||
|
var cp2 = this.getCoords_(aCP2x, aCP2y); |
||||||
|
bezierCurveTo(this, cp1, cp2, p); |
||||||
|
}; |
||||||
|
|
||||||
|
// Helper function that takes the already fixed cordinates.
|
||||||
|
function bezierCurveTo(self, cp1, cp2, p) { |
||||||
|
self.currentPath_.push({ |
||||||
|
type: 'bezierCurveTo', |
||||||
|
cp1x: cp1.x, |
||||||
|
cp1y: cp1.y, |
||||||
|
cp2x: cp2.x, |
||||||
|
cp2y: cp2.y, |
||||||
|
x: p.x, |
||||||
|
y: p.y |
||||||
|
}); |
||||||
|
self.currentX_ = p.x; |
||||||
|
self.currentY_ = p.y; |
||||||
|
} |
||||||
|
|
||||||
|
contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) { |
||||||
|
// the following is lifted almost directly from
|
||||||
|
// http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes
|
||||||
|
|
||||||
|
var cp = this.getCoords_(aCPx, aCPy); |
||||||
|
var p = this.getCoords_(aX, aY); |
||||||
|
|
||||||
|
var cp1 = { |
||||||
|
x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_), |
||||||
|
y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_) |
||||||
|
}; |
||||||
|
var cp2 = { |
||||||
|
x: cp1.x + (p.x - this.currentX_) / 3.0, |
||||||
|
y: cp1.y + (p.y - this.currentY_) / 3.0 |
||||||
|
}; |
||||||
|
|
||||||
|
bezierCurveTo(this, cp1, cp2, p); |
||||||
|
}; |
||||||
|
|
||||||
|
contextPrototype.arc = function(aX, aY, aRadius, |
||||||
|
aStartAngle, aEndAngle, aClockwise) { |
||||||
|
aRadius *= Z; |
||||||
|
var arcType = aClockwise ? 'at' : 'wa'; |
||||||
|
|
||||||
|
var xStart = aX + mc(aStartAngle) * aRadius - Z2; |
||||||
|
var yStart = aY + ms(aStartAngle) * aRadius - Z2; |
||||||
|
|
||||||
|
var xEnd = aX + mc(aEndAngle) * aRadius - Z2; |
||||||
|
var yEnd = aY + ms(aEndAngle) * aRadius - Z2; |
||||||
|
|
||||||
|
// IE won't render arches drawn counter clockwise if xStart == xEnd.
|
||||||
|
if (xStart == xEnd && !aClockwise) { |
||||||
|
xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something
|
||||||
|
// that can be represented in binary
|
||||||
|
} |
||||||
|
|
||||||
|
var p = this.getCoords_(aX, aY); |
||||||
|
var pStart = this.getCoords_(xStart, yStart); |
||||||
|
var pEnd = this.getCoords_(xEnd, yEnd); |
||||||
|
|
||||||
|
this.currentPath_.push({type: arcType, |
||||||
|
x: p.x, |
||||||
|
y: p.y, |
||||||
|
radius: aRadius, |
||||||
|
xStart: pStart.x, |
||||||
|
yStart: pStart.y, |
||||||
|
xEnd: pEnd.x, |
||||||
|
yEnd: pEnd.y}); |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
contextPrototype.rect = function(aX, aY, aWidth, aHeight) { |
||||||
|
this.moveTo(aX, aY); |
||||||
|
this.lineTo(aX + aWidth, aY); |
||||||
|
this.lineTo(aX + aWidth, aY + aHeight); |
||||||
|
this.lineTo(aX, aY + aHeight); |
||||||
|
this.closePath(); |
||||||
|
}; |
||||||
|
|
||||||
|
contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) { |
||||||
|
// Will destroy any existing path (same as FF behaviour)
|
||||||
|
this.beginPath(); |
||||||
|
this.moveTo(aX, aY); |
||||||
|
this.lineTo(aX + aWidth, aY); |
||||||
|
this.lineTo(aX + aWidth, aY + aHeight); |
||||||
|
this.lineTo(aX, aY + aHeight); |
||||||
|
this.closePath(); |
||||||
|
this.stroke(); |
||||||
|
this.currentPath_ = []; |
||||||
|
}; |
||||||
|
|
||||||
|
contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) { |
||||||
|
// Will destroy any existing path (same as FF behaviour)
|
||||||
|
this.beginPath(); |
||||||
|
this.moveTo(aX, aY); |
||||||
|
this.lineTo(aX + aWidth, aY); |
||||||
|
this.lineTo(aX + aWidth, aY + aHeight); |
||||||
|
this.lineTo(aX, aY + aHeight); |
||||||
|
this.closePath(); |
||||||
|
this.fill(); |
||||||
|
this.currentPath_ = []; |
||||||
|
}; |
||||||
|
|
||||||
|
contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) { |
||||||
|
var gradient = new CanvasGradient_('gradient'); |
||||||
|
gradient.x0_ = aX0; |
||||||
|
gradient.y0_ = aY0; |
||||||
|
gradient.x1_ = aX1; |
||||||
|
gradient.y1_ = aY1; |
||||||
|
return gradient; |
||||||
|
}; |
||||||
|
|
||||||
|
contextPrototype.createRadialGradient = function(aX0, aY0, aR0, |
||||||
|
aX1, aY1, aR1) { |
||||||
|
var gradient = new CanvasGradient_('gradientradial'); |
||||||
|
gradient.x0_ = aX0; |
||||||
|
gradient.y0_ = aY0; |
||||||
|
gradient.r0_ = aR0; |
||||||
|
gradient.x1_ = aX1; |
||||||
|
gradient.y1_ = aY1; |
||||||
|
gradient.r1_ = aR1; |
||||||
|
return gradient; |
||||||
|
}; |
||||||
|
|
||||||
|
contextPrototype.drawImage = function(image, var_args) { |
||||||
|
var dx, dy, dw, dh, sx, sy, sw, sh; |
||||||
|
|
||||||
|
// to find the original width we overide the width and height
|
||||||
|
var oldRuntimeWidth = image.runtimeStyle.width; |
||||||
|
var oldRuntimeHeight = image.runtimeStyle.height; |
||||||
|
image.runtimeStyle.width = 'auto'; |
||||||
|
image.runtimeStyle.height = 'auto'; |
||||||
|
|
||||||
|
// get the original size
|
||||||
|
var w = image.width; |
||||||
|
var h = image.height; |
||||||
|
|
||||||
|
// and remove overides
|
||||||
|
image.runtimeStyle.width = oldRuntimeWidth; |
||||||
|
image.runtimeStyle.height = oldRuntimeHeight; |
||||||
|
|
||||||
|
if (arguments.length == 3) { |
||||||
|
dx = arguments[1]; |
||||||
|
dy = arguments[2]; |
||||||
|
sx = sy = 0; |
||||||
|
sw = dw = w; |
||||||
|
sh = dh = h; |
||||||
|
} else if (arguments.length == 5) { |
||||||
|
dx = arguments[1]; |
||||||
|
dy = arguments[2]; |
||||||
|
dw = arguments[3]; |
||||||
|
dh = arguments[4]; |
||||||
|
sx = sy = 0; |
||||||
|
sw = w; |
||||||
|
sh = h; |
||||||
|
} else if (arguments.length == 9) { |
||||||
|
sx = arguments[1]; |
||||||
|
sy = arguments[2]; |
||||||
|
sw = arguments[3]; |
||||||
|
sh = arguments[4]; |
||||||
|
dx = arguments[5]; |
||||||
|
dy = arguments[6]; |
||||||
|
dw = arguments[7]; |
||||||
|
dh = arguments[8]; |
||||||
|
} else { |
||||||
|
throw Error('Invalid number of arguments'); |
||||||
|
} |
||||||
|
|
||||||
|
var d = this.getCoords_(dx, dy); |
||||||
|
|
||||||
|
var w2 = sw / 2; |
||||||
|
var h2 = sh / 2; |
||||||
|
|
||||||
|
var vmlStr = []; |
||||||
|
|
||||||
|
var W = 10; |
||||||
|
var H = 10; |
||||||
|
|
||||||
|
// For some reason that I've now forgotten, using divs didn't work
|
||||||
|
vmlStr.push(' <g_vml_:group', |
||||||
|
' coordsize="', Z * W, ',', Z * H, '"', |
||||||
|
' coordorigin="0,0"' , |
||||||
|
' style="width:', W, 'px;height:', H, 'px;position:absolute;'); |
||||||
|
|
||||||
|
// If filters are necessary (rotation exists), create them
|
||||||
|
// filters are bog-slow, so only create them if abbsolutely necessary
|
||||||
|
// The following check doesn't account for skews (which don't exist
|
||||||
|
// in the canvas spec (yet) anyway.
|
||||||
|
|
||||||
|
if (this.m_[0][0] != 1 || this.m_[0][1]) { |
||||||
|
var filter = []; |
||||||
|
|
||||||
|
// Note the 12/21 reversal
|
||||||
|
filter.push('M11=', this.m_[0][0], ',', |
||||||
|
'M12=', this.m_[1][0], ',', |
||||||
|
'M21=', this.m_[0][1], ',', |
||||||
|
'M22=', this.m_[1][1], ',', |
||||||
|
'Dx=', mr(d.x / Z), ',', |
||||||
|
'Dy=', mr(d.y / Z), ''); |
||||||
|
|
||||||
|
// Bounding box calculation (need to minimize displayed area so that
|
||||||
|
// filters don't waste time on unused pixels.
|
||||||
|
var max = d; |
||||||
|
var c2 = this.getCoords_(dx + dw, dy); |
||||||
|
var c3 = this.getCoords_(dx, dy + dh); |
||||||
|
var c4 = this.getCoords_(dx + dw, dy + dh); |
||||||
|
|
||||||
|
max.x = m.max(max.x, c2.x, c3.x, c4.x); |
||||||
|
max.y = m.max(max.y, c2.y, c3.y, c4.y); |
||||||
|
|
||||||
|
vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z), |
||||||
|
'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(', |
||||||
|
filter.join(''), ", sizingmethod='clip');") |
||||||
|
} else { |
||||||
|
vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;'); |
||||||
|
} |
||||||
|
|
||||||
|
vmlStr.push(' ">' , |
||||||
|
'<g_vml_:image src="', image.src, '"', |
||||||
|
' style="width:', Z * dw, 'px;', |
||||||
|
' height:', Z * dh, 'px;"', |
||||||
|
' cropleft="', sx / w, '"', |
||||||
|
' croptop="', sy / h, '"', |
||||||
|
' cropright="', (w - sx - sw) / w, '"', |
||||||
|
' cropbottom="', (h - sy - sh) / h, '"', |
||||||
|
' />', |
||||||
|
'</g_vml_:group>'); |
||||||
|
|
||||||
|
this.element_.insertAdjacentHTML('BeforeEnd', |
||||||
|
vmlStr.join('')); |
||||||
|
}; |
||||||
|
|
||||||
|
contextPrototype.stroke = function(aFill) { |
||||||
|
var lineStr = []; |
||||||
|
var lineOpen = false; |
||||||
|
var a = processStyle(aFill ? this.fillStyle : this.strokeStyle); |
||||||
|
var color = a.color; |
||||||
|
var opacity = a.alpha * this.globalAlpha; |
||||||
|
|
||||||
|
var W = 10; |
||||||
|
var H = 10; |
||||||
|
|
||||||
|
lineStr.push('<g_vml_:shape', |
||||||
|
' filled="', !!aFill, '"', |
||||||
|
' style="position:absolute;width:', W, 'px;height:', H, 'px;"', |
||||||
|
' coordorigin="0 0" coordsize="', Z * W, ' ', Z * H, '"', |
||||||
|
' stroked="', !aFill, '"', |
||||||
|
' path="'); |
||||||
|
|
||||||
|
var newSeq = false; |
||||||
|
var min = {x: null, y: null}; |
||||||
|
var max = {x: null, y: null}; |
||||||
|
|
||||||
|
for (var i = 0; i < this.currentPath_.length; i++) { |
||||||
|
var p = this.currentPath_[i]; |
||||||
|
var c; |
||||||
|
|
||||||
|
switch (p.type) { |
||||||
|
case 'moveTo': |
||||||
|
c = p; |
||||||
|
lineStr.push(' m ', mr(p.x), ',', mr(p.y)); |
||||||
|
break; |
||||||
|
case 'lineTo': |
||||||
|
lineStr.push(' l ', mr(p.x), ',', mr(p.y)); |
||||||
|
break; |
||||||
|
case 'close': |
||||||
|
lineStr.push(' x '); |
||||||
|
p = null; |
||||||
|
break; |
||||||
|
case 'bezierCurveTo': |
||||||
|
lineStr.push(' c ', |
||||||
|
mr(p.cp1x), ',', mr(p.cp1y), ',', |
||||||
|
mr(p.cp2x), ',', mr(p.cp2y), ',', |
||||||
|
mr(p.x), ',', mr(p.y)); |
||||||
|
break; |
||||||
|
case 'at': |
||||||
|
case 'wa': |
||||||
|
lineStr.push(' ', p.type, ' ', |
||||||
|
mr(p.x - this.arcScaleX_ * p.radius), ',', |
||||||
|
mr(p.y - this.arcScaleY_ * p.radius), ' ', |
||||||
|
mr(p.x + this.arcScaleX_ * p.radius), ',', |
||||||
|
mr(p.y + this.arcScaleY_ * p.radius), ' ', |
||||||
|
mr(p.xStart), ',', mr(p.yStart), ' ', |
||||||
|
mr(p.xEnd), ',', mr(p.yEnd)); |
||||||
|
break; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// TODO: Following is broken for curves due to
|
||||||
|
// move to proper paths.
|
||||||
|
|
||||||
|
// Figure out dimensions so we can do gradient fills
|
||||||
|
// properly
|
||||||
|
if (p) { |
||||||
|
if (min.x == null || p.x < min.x) { |
||||||
|
min.x = p.x; |
||||||
|
} |
||||||
|
if (max.x == null || p.x > max.x) { |
||||||
|
max.x = p.x; |
||||||
|
} |
||||||
|
if (min.y == null || p.y < min.y) { |
||||||
|
min.y = p.y; |
||||||
|
} |
||||||
|
if (max.y == null || p.y > max.y) { |
||||||
|
max.y = p.y; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
lineStr.push(' ">'); |
||||||
|
|
||||||
|
if (!aFill) { |
||||||
|
var lineWidth = this.lineScale_ * this.lineWidth; |
||||||
|
|
||||||
|
// VML cannot correctly render a line if the width is less than 1px.
|
||||||
|
// In that case, we dilute the color to make the line look thinner.
|
||||||
|
if (lineWidth < 1) { |
||||||
|
opacity *= lineWidth; |
||||||
|
} |
||||||
|
|
||||||
|
lineStr.push( |
||||||
|
'<g_vml_:stroke', |
||||||
|
' opacity="', opacity, '"', |
||||||
|
' joinstyle="', this.lineJoin, '"', |
||||||
|
' miterlimit="', this.miterLimit, '"', |
||||||
|
' endcap="', processLineCap(this.lineCap), '"', |
||||||
|
' weight="', lineWidth, 'px"', |
||||||
|
' color="', color, '" />' |
||||||
|
); |
||||||
|
} else if (typeof this.fillStyle == 'object') { |
||||||
|
var fillStyle = this.fillStyle; |
||||||
|
var angle = 0; |
||||||
|
var focus = {x: 0, y: 0}; |
||||||
|
|
||||||
|
// additional offset
|
||||||
|
var shift = 0; |
||||||
|
// scale factor for offset
|
||||||
|
var expansion = 1; |
||||||
|
|
||||||
|
if (fillStyle.type_ == 'gradient') { |
||||||
|
var x0 = fillStyle.x0_ / this.arcScaleX_; |
||||||
|
var y0 = fillStyle.y0_ / this.arcScaleY_; |
||||||
|
var x1 = fillStyle.x1_ / this.arcScaleX_; |
||||||
|
var y1 = fillStyle.y1_ / this.arcScaleY_; |
||||||
|
var p0 = this.getCoords_(x0, y0); |
||||||
|
var p1 = this.getCoords_(x1, y1); |
||||||
|
var dx = p1.x - p0.x; |
||||||
|
var dy = p1.y - p0.y; |
||||||
|
angle = Math.atan2(dx, dy) * 180 / Math.PI; |
||||||
|
|
||||||
|
// The angle should be a non-negative number.
|
||||||
|
if (angle < 0) { |
||||||
|
angle += 360; |
||||||
|
} |
||||||
|
|
||||||
|
// Very small angles produce an unexpected result because they are
|
||||||
|
// converted to a scientific notation string.
|
||||||
|
if (angle < 1e-6) { |
||||||
|
angle = 0; |
||||||
|
} |
||||||
|
} else { |
||||||
|
var p0 = this.getCoords_(fillStyle.x0_, fillStyle.y0_); |
||||||
|
var width = max.x - min.x; |
||||||
|
var height = max.y - min.y; |
||||||
|
focus = { |
||||||
|
x: (p0.x - min.x) / width, |
||||||
|
y: (p0.y - min.y) / height |
||||||
|
}; |
||||||
|
|
||||||
|
width /= this.arcScaleX_ * Z; |
||||||
|
height /= this.arcScaleY_ * Z; |
||||||
|
var dimension = m.max(width, height); |
||||||
|
shift = 2 * fillStyle.r0_ / dimension; |
||||||
|
expansion = 2 * fillStyle.r1_ / dimension - shift; |
||||||
|
} |
||||||
|
|
||||||
|
// We need to sort the color stops in ascending order by offset,
|
||||||
|
// otherwise IE won't interpret it correctly.
|
||||||
|
var stops = fillStyle.colors_; |
||||||
|
stops.sort(function(cs1, cs2) { |
||||||
|
return cs1.offset - cs2.offset; |
||||||
|
}); |
||||||
|
|
||||||
|
var length = stops.length; |
||||||
|
var color1 = stops[0].color; |
||||||
|
var color2 = stops[length - 1].color; |
||||||
|
var opacity1 = stops[0].alpha * this.globalAlpha; |
||||||
|
var opacity2 = stops[length - 1].alpha * this.globalAlpha; |
||||||
|
|
||||||
|
var colors = []; |
||||||
|
for (var i = 0; i < length; i++) { |
||||||
|
var stop = stops[i]; |
||||||
|
colors.push(stop.offset * expansion + shift + ' ' + stop.color); |
||||||
|
} |
||||||
|
|
||||||
|
// When colors attribute is used, the meanings of opacity and o:opacity2
|
||||||
|
// are reversed.
|
||||||
|
lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"', |
||||||
|
' method="none" focus="100%"', |
||||||
|
' color="', color1, '"', |
||||||
|
' color2="', color2, '"', |
||||||
|
' colors="', colors.join(','), '"', |
||||||
|
' opacity="', opacity2, '"', |
||||||
|
' g_o_:opacity2="', opacity1, '"', |
||||||
|
' angle="', angle, '"', |
||||||
|
' focusposition="', focus.x, ',', focus.y, '" />'); |
||||||
|
} else { |
||||||
|
lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity, |
||||||
|
'" />'); |
||||||
|
} |
||||||
|
|
||||||
|
lineStr.push('</g_vml_:shape>'); |
||||||
|
|
||||||
|
this.element_.insertAdjacentHTML('beforeEnd', lineStr.join('')); |
||||||
|
}; |
||||||
|
|
||||||
|
contextPrototype.fill = function() { |
||||||
|
this.stroke(true); |
||||||
|
} |
||||||
|
|
||||||
|
contextPrototype.closePath = function() { |
||||||
|
this.currentPath_.push({type: 'close'}); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* @private |
||||||
|
*/ |
||||||
|
contextPrototype.getCoords_ = function(aX, aY) { |
||||||
|
var m = this.m_; |
||||||
|
return { |
||||||
|
x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2, |
||||||
|
y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2 |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
contextPrototype.save = function() { |
||||||
|
var o = {}; |
||||||
|
copyState(this, o); |
||||||
|
this.aStack_.push(o); |
||||||
|
this.mStack_.push(this.m_); |
||||||
|
this.m_ = matrixMultiply(createMatrixIdentity(), this.m_); |
||||||
|
}; |
||||||
|
|
||||||
|
contextPrototype.restore = function() { |
||||||
|
copyState(this.aStack_.pop(), this); |
||||||
|
this.m_ = this.mStack_.pop(); |
||||||
|
}; |
||||||
|
|
||||||
|
contextPrototype.translate = function(aX, aY) { |
||||||
|
var m1 = [ |
||||||
|
[1, 0, 0], |
||||||
|
[0, 1, 0], |
||||||
|
[aX, aY, 1] |
||||||
|
]; |
||||||
|
|
||||||
|
this.m_ = matrixMultiply(m1, this.m_); |
||||||
|
}; |
||||||
|
|
||||||
|
contextPrototype.rotate = function(aRot) { |
||||||
|
var c = mc(aRot); |
||||||
|
var s = ms(aRot); |
||||||
|
|
||||||
|
var m1 = [ |
||||||
|
[c, s, 0], |
||||||
|
[-s, c, 0], |
||||||
|
[0, 0, 1] |
||||||
|
]; |
||||||
|
|
||||||
|
this.m_ = matrixMultiply(m1, this.m_); |
||||||
|
}; |
||||||
|
|
||||||
|
contextPrototype.scale = function(aX, aY) { |
||||||
|
this.arcScaleX_ *= aX; |
||||||
|
this.arcScaleY_ *= aY; |
||||||
|
var m1 = [ |
||||||
|
[aX, 0, 0], |
||||||
|
[0, aY, 0], |
||||||
|
[0, 0, 1] |
||||||
|
]; |
||||||
|
|
||||||
|
var m = this.m_ = matrixMultiply(m1, this.m_); |
||||||
|
|
||||||
|
// Get the line scale.
|
||||||
|
// Determinant of this.m_ means how much the area is enlarged by the
|
||||||
|
// transformation. So its square root can be used as a scale factor
|
||||||
|
// for width.
|
||||||
|
var det = m[0][0] * m[1][1] - m[0][1] * m[1][0]; |
||||||
|
this.lineScale_ = sqrt(abs(det)); |
||||||
|
}; |
||||||
|
|
||||||
|
/******** STUBS ********/ |
||||||
|
contextPrototype.clip = function() { |
||||||
|
// TODO: Implement
|
||||||
|
}; |
||||||
|
|
||||||
|
contextPrototype.arcTo = function() { |
||||||
|
// TODO: Implement
|
||||||
|
}; |
||||||
|
|
||||||
|
contextPrototype.createPattern = function() { |
||||||
|
return new CanvasPattern_; |
||||||
|
}; |
||||||
|
|
||||||
|
// Gradient / Pattern Stubs
|
||||||
|
function CanvasGradient_(aType) { |
||||||
|
this.type_ = aType; |
||||||
|
this.x0_ = 0; |
||||||
|
this.y0_ = 0; |
||||||
|
this.r0_ = 0; |
||||||
|
this.x1_ = 0; |
||||||
|
this.y1_ = 0; |
||||||
|
this.r1_ = 0; |
||||||
|
this.colors_ = []; |
||||||
|
} |
||||||
|
|
||||||
|
CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) { |
||||||
|
aColor = processStyle(aColor); |
||||||
|
this.colors_.push({offset: aOffset, |
||||||
|
color: aColor.color, |
||||||
|
alpha: aColor.alpha}); |
||||||
|
}; |
||||||
|
|
||||||
|
function CanvasPattern_() {} |
||||||
|
|
||||||
|
// set up externs
|
||||||
|
G_vmlCanvasManager = G_vmlCanvasManager_; |
||||||
|
CanvasRenderingContext2D = CanvasRenderingContext2D_; |
||||||
|
CanvasGradient = CanvasGradient_; |
||||||
|
CanvasPattern = CanvasPattern_; |
||||||
|
|
||||||
|
})(); |
||||||
|
|
||||||
|
} // if
|
||||||
|
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue