Permalink
Browse files

added support for mixed color stop units

  • Loading branch information...
1 parent 92c1260 commit d6e762dd653c3116eda8485490648d9d1f2f209a @istvan-ujjmeszaros committed Apr 20, 2014
@@ -9,7 +9,7 @@
"responsive",
"widget"
],
- "version": "2.0.11",
+ "version": "2.1.0",
"author": {
"name": "Virtuosoft",
"url": "https://github.com/Virtuosoft"
@@ -1,6 +1,6 @@
/*
* CSS Gradient Generator
- * v2.0.11
+ * v2.1.0
* CSS gradient generator with the best browser support. Three different layouts to meet Your requirement (from simple linear to complex radial gradients).
* http://www.virtuosoft.eu/tools/css-gradient-generator/
*
@@ -1,6 +1,6 @@
/*
* CSS Gradient Generator
- * v2.0.11
+ * v2.1.0
* CSS gradient generator with the best browser support. Three different layouts to meet Your requirement (from simple linear to complex radial gradients).
* http://www.virtuosoft.eu/tools/css-gradient-generator/
*
@@ -194,6 +194,7 @@ var CSSGradientEditor = function(container, options) {
config_colorpicker_swatches: false,
config_fallbackwidth: '',
config_fallbackheight: '',
+ config_mixedstoppointunits: 'enabled',
config_generation_bgcolor: true,
config_generation_iefilter: true,
config_generation_svg: true,
@@ -1372,6 +1373,7 @@ var CSSGradientEditor = function(container, options) {
$('.css-gradient-editor-stoppointlist', container).on('click', '.bootstrap-touchspin-postfix', function() {
var $this = $(this),
+ $row = $this.closest('.css-gradient-editor-stoppointdata'),
newunit;
if ($this.html() === '%') {
@@ -1383,13 +1385,19 @@ var CSSGradientEditor = function(container, options) {
lastunit = newunit;
- $('.bootstrap-touchspin-postfix', elements.colorstopslist).each(function() {
- var $this = $(this);
+ if (getConfig('config_mixedstoppointunits') === 'enabled') {
$this.html(newunit);
- $this.parents('.css-gradient-editor-stoppointdata').data('unit', newunit);
- });
-
- setColorStopData(false, 'unit', newunit);
+ $row.data('unit', newunit);
+ setColorStopData($this.closest('.css-gradient-editor-stoppointdata').data('index'), 'unit', newunit);
+ }
+ else {
+ $('.bootstrap-touchspin-postfix', elements.colorstopslist).each(function() {
+ var $this = $(this);
+ $this.html(newunit);
+ $this.parents('.css-gradient-editor-stoppointdata').data('unit', newunit);
+ });
+ setColorStopData(false, 'unit', newunit);
+ }
renderColorStopMarkers();
renderGradient();
@@ -2168,19 +2176,21 @@ var CSSGradientEditor = function(container, options) {
$('<button type="button" class="btn btn-sm pull-right css-gradient-editor-stop-point-delete"><span class="pngicon-remove2"></span></button><input class="css-gradient-editor-stop-point-color input-sm" type="text" value="' + getRenderColor(el) + '"> <input class="css-gradient-editor-stop-point-position input-sm" type="text" value="' + el.position + '">').appendTo(row);
row.data(el);
+
+ $('input.css-gradient-editor-stop-point-position', row).TouchSpin({
+ min: MIN,
+ max: MAX,
+ postfix: el.unit,
+ decimals: settings.positiondecimals,
+ step: Math.pow(0.1, settings.positiondecimals)
+ });
}
$('.css-gradient-editor-stop-point-delete', elements.colorstopslist).on('click', function() {
removeColorStop($(this).closest('.css-gradient-editor-stoppointdata').data('index'));
});
- $('input.css-gradient-editor-stop-point-position', elements.colorstopslist).TouchSpin({
- min: MIN,
- max: MAX,
- postfix: lastunit,
- decimals: settings.positiondecimals,
- step: Math.pow(0.1, settings.positiondecimals)
- }).on('change', function() {
+ $('input.css-gradient-editor-stop-point-position', elements.colorstopslist).on('change', function() {
var $this = $(this);
var index = $this.closest('.css-gradient-editor-stoppointdata').data('index');
@@ -1,6 +1,6 @@
/*
* CSS Gradient Generator
- * v2.0.11
+ * v2.1.0
* CSS gradient generator with the best browser support. Three different layouts to meet Your requirement (from simple linear to complex radial gradients).
* http://www.virtuosoft.eu/tools/css-gradient-generator/
*
Oops, something went wrong.
View
@@ -399,6 +399,14 @@ <h4 class="modal-title">Configuration</h4>
</div>
<div class="form-group">
+ <label class="col-xs-3 text-right">Mixed stop point units: </label>
+ <div class="col-xs-9 btn-group">
+ <button class="btn btn-default btn-sm css-gradient-editor-controller" data-control-group="config_mixedstoppointunits" data-name="config_mixedstoppointunits" data-value="enabled">enabled</button>
+ <button class="btn btn-default btn-sm css-gradient-editor-controller" data-control-group="config_mixedstoppointunits" data-name="config_mixedstoppointunits" data-value="disabled">disabled</button>
+ </div>
+ </div>
+
+ <div class="form-group">
<label class="col-xs-3 text-right">Code generation: </label>
<div class="col-xs-9 btn-group">
<button class="btn btn-default btn-sm css-gradient-editor-controller" data-name="config_generation_bgcolor" title="Weighted average background color fallback">bg color</button>
@@ -176,6 +176,7 @@ var CSSGradientEditor = function(container, options) {
config_colorpicker_swatches: false,
config_fallbackwidth: '',
config_fallbackheight: '',
+ config_mixedstoppointunits: 'enabled',
config_generation_bgcolor: true,
config_generation_iefilter: true,
config_generation_svg: true,
@@ -1354,6 +1355,7 @@ var CSSGradientEditor = function(container, options) {
$('.css-gradient-editor-stoppointlist', container).on('click', '.bootstrap-touchspin-postfix', function() {
var $this = $(this),
+ $row = $this.closest('.css-gradient-editor-stoppointdata'),
newunit;
if ($this.html() === '%') {
@@ -1365,13 +1367,19 @@ var CSSGradientEditor = function(container, options) {
lastunit = newunit;
- $('.bootstrap-touchspin-postfix', elements.colorstopslist).each(function() {
- var $this = $(this);
+ if (getConfig('config_mixedstoppointunits') === 'enabled') {
$this.html(newunit);
- $this.parents('.css-gradient-editor-stoppointdata').data('unit', newunit);
- });
-
- setColorStopData(false, 'unit', newunit);
+ $row.data('unit', newunit);
+ setColorStopData($this.closest('.css-gradient-editor-stoppointdata').data('index'), 'unit', newunit);
+ }
+ else {
+ $('.bootstrap-touchspin-postfix', elements.colorstopslist).each(function() {
+ var $this = $(this);
+ $this.html(newunit);
+ $this.parents('.css-gradient-editor-stoppointdata').data('unit', newunit);
+ });
+ setColorStopData(false, 'unit', newunit);
+ }
renderColorStopMarkers();
renderGradient();
@@ -2150,19 +2158,21 @@ var CSSGradientEditor = function(container, options) {
$('<button type="button" class="btn btn-sm pull-right css-gradient-editor-stop-point-delete"><span class="pngicon-remove2"></span></button><input class="css-gradient-editor-stop-point-color input-sm" type="text" value="' + getRenderColor(el) + '"> <input class="css-gradient-editor-stop-point-position input-sm" type="text" value="' + el.position + '">').appendTo(row);
row.data(el);
+
+ $('input.css-gradient-editor-stop-point-position', row).TouchSpin({
+ min: MIN,
+ max: MAX,
+ postfix: el.unit,
+ decimals: settings.positiondecimals,
+ step: Math.pow(0.1, settings.positiondecimals)
+ });
}
$('.css-gradient-editor-stop-point-delete', elements.colorstopslist).on('click', function() {
removeColorStop($(this).closest('.css-gradient-editor-stoppointdata').data('index'));
});
- $('input.css-gradient-editor-stop-point-position', elements.colorstopslist).TouchSpin({
- min: MIN,
- max: MAX,
- postfix: lastunit,
- decimals: settings.positiondecimals,
- step: Math.pow(0.1, settings.positiondecimals)
- }).on('change', function() {
+ $('input.css-gradient-editor-stop-point-position', elements.colorstopslist).on('change', function() {
var $this = $(this);
var index = $this.closest('.css-gradient-editor-stoppointdata').data('index');

0 comments on commit d6e762d

Please sign in to comment.