1:39 p.m.
Author: artdaw
Date: 2008-12-28 14:39:09 -0500 (Sun, 28 Dec 2008)
New Revision: 12036
Added:
trunk/sandbox/ui/colorPicker/design/images/arrow.gif
trunk/sandbox/ui/colorPicker/design/pngFix.js
Removed:
trunk/sandbox/ui/colorPicker/design/images/arrow.png
Modified:
trunk/sandbox/ui/colorPicker/design/colorPicker.html
Log:
rich:colorPicker design was added
Modified: trunk/sandbox/ui/colorPicker/design/colorPicker.html
===================================================================
--- trunk/sandbox/ui/colorPicker/design/colorPicker.html 2008-12-28 15:17:25 UTC (rev
12035)
+++ trunk/sandbox/ui/colorPicker/design/colorPicker.html 2008-12-28 19:39:09 UTC (rev
12036)
@@ -5,10 +5,13 @@
display:none;
font-family:Arial,Helvetica,sans-serif;
height:176px;
+ !height:166px;
overflow:hidden;
position:absolute;
width:350px;
- margin-top:2px;
+ margin-top: 2px;
+ !margin-top: -6px;
+ !margin-left: -2px;
}
.rich-colorPicker-ext{
position: relative;
@@ -149,19 +152,31 @@
border: 1px solid #BED6F8;
}
+.rich-colorPicker-span input{
+ border: 1px solid #BED6F8;
+ font-size: 12px;
+ width: 100px;
+ vertical-align:middle;
+}
.rich-colorPicker-icon {
+ display:inline;
cursor:pointer;
height:16px;
width:16px;
- margin-bottom:12px;
+ vertical-align:middle;
}
+
</style>
<script type="text/javascript"
src="jquery-1.2.6.js"></script>
<script type="text/javascript"
src="ui.core.js"></script>
+<script type="text/javascript" src="pngFix.js"></script>
<script type="text/javascript"
src="ui.colorpicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
+ if(navigator.appName == "Microsoft Internet Explorer" &&
parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE
7.0") == -1){
+ $('div.rich-colorPicker-color').pngFix();
+ }
$("#rich-colorPicker").colorPicker({
flat: false,
color: "#807540",
@@ -179,9 +194,10 @@
</head>
<body style="height: 10000px">
<br /><br /><br /><br /><br /><br /><br />
+<br /><br /><br /><br /><br /><br /><br />
<span id="rich-colorPicker" class="rich-colorPicker-span">
- <input style=" width:120px; height: 18px; border: 1px solid #BED6F8;"
readonly="readonly"/>
- <img src="images/arrow.png" alt="icon"
class="rich-colorPicker-icon" align="middle" />
+ <input readonly="readonly"/>
+ <img src="images/arrow.gif" alt="icon"
class="rich-colorPicker-icon" vertical-align="middle" />
</span>
<div id="rich-colorPicker-ui"
class="rich-colorPicker-wrapper">
<div class="rich-colorPicker-ext">
Added: trunk/sandbox/ui/colorPicker/design/images/arrow.gif
===================================================================
(Binary files differ)
Property changes on: trunk/sandbox/ui/colorPicker/design/images/arrow.gif
___________________________________________________________________
Name: svn:executable
+ *
Name: svn:mime-type
+ application/octet-stream
Deleted: trunk/sandbox/ui/colorPicker/design/images/arrow.png
===================================================================
(Binary files differ)
Added: trunk/sandbox/ui/colorPicker/design/pngFix.js
===================================================================
--- trunk/sandbox/ui/colorPicker/design/pngFix.js (rev 0)
+++ trunk/sandbox/ui/colorPicker/design/pngFix.js 2008-12-28 19:39:09 UTC (rev 12036)
@@ -0,0 +1,113 @@
+/**
+ * --------------------------------------------------------------------
+ * jQuery-Plugin "pngFix"
+ * Version: 1.1, 11.09.2007
+ * by Andreas Eberhard, andreas.eberhard(a)gmail.com
+ * http://jquery.andreaseberhard.de/
+ *
+ * Copyright (c) 2007 Andreas Eberhard
+ * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
+ *
+ * Changelog:
+ * 11.09.2007 Version 1.1
+ * - removed noConflict
+ * - added png-support for input type=image
+ * - 01.08.2007 CSS background-image support extension added by Scott Jehl,
scott(a)filamentgroup.com, http://www.filamentgroup.com
+ * 31.05.2007 initial Version 1.0
+ * --------------------------------------------------------------------
+ * @example $(function(){$(document).pngFix();});
+ * @desc Fixes all PNG's in the document on document.ready
+ *
+ * jQuery(function(){jQuery(document).pngFix();});
+ * @desc Fixes all PNG's in the document on document.ready when using noConflict
+ *
+ * @example $(function(){$('div.examples').pngFix();});
+ * @desc Fixes all PNG's within div with class examples
+ *
+ * @example $(function(){$('div.examples').pngFix( { blankgif:'ext.gif' }
);});
+ * @desc Fixes all PNG's within div with class examples, provides blank gif for input
with png
+ * --------------------------------------------------------------------
+ */
+
+(function($) {
+
+jQuery.fn.pngFix = function(settings) {
+
+ // Settings
+ settings = jQuery.extend({
+ blankgif: 'blank.gif'
+ }, settings);
+
+ var ie55 = (navigator.appName == "Microsoft Internet Explorer" &&
parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE
5.5") != -1);
+ var ie6 = (navigator.appName == "Microsoft Internet Explorer" &&
parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE
6.0") != -1);
+
+ if (jQuery.browser.msie && (ie55 || ie6)) {
+
+ //fix images with png-source
+ jQuery(this).find("img[(a)src$=.png]").each(function() {
+
+ jQuery(this).attr('width',jQuery(this).width());
+ jQuery(this).attr('height',jQuery(this).height());
+
+ var prevStyle = '';
+ var strNewHTML = '';
+ var imgId = (jQuery(this).attr('id')) ? 'id="' +
jQuery(this).attr('id') + '" ' : '';
+ var imgClass = (jQuery(this).attr('class')) ? 'class="' +
jQuery(this).attr('class') + '" ' : '';
+ var imgTitle = (jQuery(this).attr('title')) ? 'title="' +
jQuery(this).attr('title') + '" ' : '';
+ var imgAlt = (jQuery(this).attr('alt')) ? 'alt="' +
jQuery(this).attr('alt') + '" ' : '';
+ var imgAlign = (jQuery(this).attr('align')) ? 'float:' +
jQuery(this).attr('align') + ';' : '';
+ var imgHand = (jQuery(this).parent().attr('href')) ? 'cursor:hand;' :
'';
+ if (this.style.border) {
+ prevStyle += 'border:'+this.style.border+';';
+ this.style.border = '';
+ }
+ if (this.style.padding) {
+ prevStyle += 'padding:'+this.style.padding+';';
+ this.style.padding = '';
+ }
+ if (this.style.margin) {
+ prevStyle += 'margin:'+this.style.margin+';';
+ this.style.margin = '';
+ }
+ var imgStyle = (this.style.cssText);
+
+ strNewHTML += '<span '+imgId+imgClass+imgTitle+imgAlt;
+ strNewHTML +=
'style="position:relative;white-space:pre-line;display:inline-block;background:transparent;'+imgAlign+imgHand;
+ strNewHTML += 'width:' + jQuery(this).width() + 'px;' +
'height:' + jQuery(this).height() + 'px;';
+ strNewHTML += 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader' +
'(src=\'' + jQuery(this).attr('src') + '\',
sizingMethod=\'scale\');';
+ strNewHTML += imgStyle+'"></span>';
+ if (prevStyle != ''){
+ strNewHTML = '<span
style="position:relative;display:inline-block;'+prevStyle+imgHand+'width:'
+ jQuery(this).width() + 'px;' + 'height:' + jQuery(this).height() +
'px;'+'">' + strNewHTML + '</span>';
+ }
+
+ jQuery(this).hide();
+ jQuery(this).after(strNewHTML);
+
+ });
+
+ // fix css background pngs
+ jQuery(this).find("*").each(function(){
+ var bgIMG = jQuery(this).css('background-image');
+ if(bgIMG.indexOf(".png")!=-1){
+ var iebg = bgIMG.split('url("')[1].split('")')[0];
+ jQuery(this).css('background-image', 'none');
+ jQuery(this).get(0).runtimeStyle.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + iebg +
"',sizingMethod='scale')";
+ }
+ });
+
+ //fix input with png-source
+ jQuery(this).find("input[(a)src$=.png]").each(function() {
+ var bgIMG = jQuery(this).attr('src');
+ jQuery(this).get(0).runtimeStyle.filter =
'progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\'' +
bgIMG + '\', sizingMethod=\'scale\');';
+ jQuery(this).attr('src', settings.blankgif)
+ });
+
+ }else{
+ return false;
+ }
+
+ return jQuery;
+
+};
+
+})(jQuery);
Property changes on: trunk/sandbox/ui/colorPicker/design/pngFix.js
___________________________________________________________________
Name: svn:executable
+ *