Permalink
Browse files

update gradient editor

  • Loading branch information...
1 parent 8a8b298 commit 6d75b69a9c1e7f529aea6162ec979155489b2d71 gman committed May 16, 2011
Showing with 66 additions and 47 deletions.
  1. +19 −1 gradient-editor/gradient-editor.css
  2. +12 −11 gradient-editor/gradient-editor.html
  3. +35 −35 gradient-editor/gradient-editor.js
@@ -5,6 +5,9 @@
/* the area that contains the gradient */
.gradient-editor-gradient {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
}
/* the color stop draggable area. Should not by styled */
@@ -13,12 +16,27 @@
/* the color inside a color stop */
.gradient-editor-color {
- border: 1px solid black;
+ border: 1px solid hsla(0, 0%, 30%, 0.8);
+ border-top: 0;
+}
+.gradient-editor-color::before {
+ border-color: transparent transparent hsla(0,0%, 100%, 0.8) transparent;
+ border-style: solid;
+ border-width: 6px;
+ width: 0;
+ height: 0;
+ position: absolute;
+ top: -12px;
+ left: 1px;
+ content: '';
}
/* the area the contains the color stops */
.gradient-editor-colors {
background: gray;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
}
/* the instruction area */
@@ -1,3 +1,5 @@
+<!DOCTYPE HTML>
+
<!--
* Copyright 2011, Google Inc.
* All rights reserved.
@@ -28,25 +30,24 @@
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
+
<html>
<head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta charset="utf-8">
<title>JQuery Gradient Editor</title>
<style>
html, body {
font-family: sans-serif;
}
</style>
-<link type="text/css" href="../jquery-ui-1.8.2.custom/css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
-<link type="text/css" href="../colorpicker/css/colorpicker.css" rel="stylesheet" />
-<link type="text/css" href="gradient-editor.css" rel="stylesheet" />
-<script type="text/javascript" src="../jquery-ui-1.8.2.custom/js/jquery-1.4.2.min.js"></script>
-<script type="text/javascript" src="../jquery-ui-1.8.2.custom/js/jquery-ui-1.8.2.custom.min.js"></script>
-<script type="text/javascript" src="../colorpicker/js/colorpicker.js"></script>
-<script type="text/javascript" src="gradient-editor.js"></script>
-<script type="text/javascript">
+<link href="../jquery-ui-1.8.2.custom/css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
+<link href="../colorpicker/css/colorpicker.css" rel="stylesheet" />
+<link href="gradient-editor.css" rel="stylesheet" />
+<script src="../jquery-ui-1.8.2.custom/js/jquery-1.4.2.min.js"></script>
+<script src="../jquery-ui-1.8.2.custom/js/jquery-ui-1.8.2.custom.min.js"></script>
+<script src="../colorpicker/js/colorpicker.js"></script>
+<script src="gradient-editor.js"></script>
+<script>
$(function(){
$("#gradientEditor").gradientEditor();
});
@@ -34,7 +34,7 @@
var defaults = {
width: 512,
height: 40,
- stopWidth: 11,
+ stopWidth: 12,
stopHeight: 10,
initialColor: "#ff00ff",
onChange: function() {},
@@ -61,6 +61,7 @@
function makeCSSGradient(stops) {
return '-webkit-linear-gradient(left, red, green, blue);';
+
var css = [];
for (var ii = 0; ii < stops.length; ++ii) {
var stop = stops[ii];
@@ -69,6 +70,8 @@
var colors = css.join(", ");
return '' +
'-webkit-linear-gradient(left, ' + colors + ') ' +
+ '-o-linear-gradient(left, ' + colors + ') ' +
+ '-ms-linear-gradient(left, ' + colors + ') ' +
'-moz-linear-gradient(left, ' + colors + ')';
}
@@ -124,44 +127,37 @@
}
}
});
- colorEditor.css("left", half);
- colorEditor.css(
- "top",
- (5 + options.height + options.stopHeight).toString() + "px");
+
+ colorEditor.css({ "left" : half,
+ "top" : 5 + options.height + options.stopHeight + "px" });
- outer.css("position", "relative");
- outer.css(
- "width",
- (options.width + 5 +
- options.stopWidth).toString() + "px");
- outer.css(
- "height",
- (colorEditor[0].clientHeight + 10 +
- options.height +
- options.stopHeight).toString() + "px");
+ outer.css({ "position": "relative",
+ "width" : options.width + 5 + options.stopWidth + "px",
+ "height" : colorEditor[0].clientHeight + 10 +
+ options.height + options.stopHeight + "px" });
- instructions.css("position", "absolute");
- instructions.css(
- "left",
- (colorEditor[0].clientWidth + 10).toString() + "px");
- instructions.css(
- "top",
- (options.height + 5 + options.stopHeight).toString() + "px");
+ instructions.css({ "position": "absolute",
+ "left" : colorEditor[0].clientWidth + 10 + "px",
+ "top" : options.height + 5 + options.stopHeight + "px"});
- gradient.css("width", options.width);
- gradient.css("height", options.height);
- gradient.css("position", "absolute");
- gradient.css("left", half.toString() + "px");
+ gradient.css({"width" : options.width,
+ "height" : options.height,
+ "position": "absolute",
+ "left" : half + "px"});
+
+ colors.css({"width" : options.width + options.stopWidth + 2,
+ "height" : options.stopHeight,
+ "position": "absolute",
+ "top" : options.height + "px"});
+
var stops = []
var css = makeCSSGradient(stops);
canvas.width = options.width;
canvas.height = options.height;
var ctx = canvas.getContext("2d");
- colors.css("width", options.width + options.stopWidth + 2);
- colors.css("height", options.stopHeight);
- colors.css("position", "absolute");
- colors.css("top", options.height.toString() + "px");
+
+
function addStop(position, color) {
var stop = {
color: color,
@@ -176,11 +172,15 @@
'<div class="gradient-editor-color"></div>' +
'</div>');
var colorObj = $('.gradient-editor-color', stopObj);
- stopObj.css("width", options.stopWidth);
- stopObj.css("height", options.stopHeight);
- colorObj.css("width", options.stopWidth);
- colorObj.css("height", options.stopHeight);
- colorObj.css("backgroundColor", color);
+
+
+ stopObj.css({ "width" : options.stopWidth,
+ "height": options.stopHeight});
+ colorObj.css({"width" : options.stopWidth,
+ "height" : options.stopHeight,
+ "backgroundColor" : color});
+
+
stop.setColor = function(color) {
stop.color = color;
colorObj.css("backgroundColor", color);

0 comments on commit 6d75b69

Please sign in to comment.