Skip to content

Commit

Permalink
added support for mixed color stop units
Browse files Browse the repository at this point in the history
  • Loading branch information
@istvan-ujjmeszaros
istvan-ujjmeszaros committed Apr 20, 2014
1 parent 92c1260 commit d6e762d
Show file tree
Hide file tree
Showing 7 changed files with 61 additions and 33 deletions.
2 changes: 1 addition & 1 deletion css-gradient-generator.jquery.json
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"responsive", "responsive",
"widget" "widget"
], ],
"version": "2.0.11", "version": "2.1.0",
"author": { "author": {
"name": "Virtuosoft", "name": "Virtuosoft",
"url": "https://github.com/Virtuosoft" "url": "https://github.com/Virtuosoft"
Expand Down
2 changes: 1 addition & 1 deletion dist/css-gradient-generator.css
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,6 +1,6 @@
/* /*
* CSS Gradient Generator * 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). * 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/ * http://www.virtuosoft.eu/tools/css-gradient-generator/
* *
Expand Down
38 changes: 24 additions & 14 deletions dist/css-gradient-generator.js
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,6 +1,6 @@
/* /*
* CSS Gradient Generator * 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). * 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/ * http://www.virtuosoft.eu/tools/css-gradient-generator/
* *
Expand Down Expand Up @@ -194,6 +194,7 @@ var CSSGradientEditor = function(container, options) {
config_colorpicker_swatches: false, config_colorpicker_swatches: false,
config_fallbackwidth: '', config_fallbackwidth: '',
config_fallbackheight: '', config_fallbackheight: '',
config_mixedstoppointunits: 'enabled',
config_generation_bgcolor: true, config_generation_bgcolor: true,
config_generation_iefilter: true, config_generation_iefilter: true,
config_generation_svg: true, config_generation_svg: true,
Expand Down Expand Up @@ -1372,6 +1373,7 @@ var CSSGradientEditor = function(container, options) {


$('.css-gradient-editor-stoppointlist', container).on('click', '.bootstrap-touchspin-postfix', function() { $('.css-gradient-editor-stoppointlist', container).on('click', '.bootstrap-touchspin-postfix', function() {
var $this = $(this), var $this = $(this),
$row = $this.closest('.css-gradient-editor-stoppointdata'),
newunit; newunit;


if ($this.html() === '%') { if ($this.html() === '%') {
Expand All @@ -1383,13 +1385,19 @@ var CSSGradientEditor = function(container, options) {


lastunit = newunit; lastunit = newunit;


$('.bootstrap-touchspin-postfix', elements.colorstopslist).each(function() { if (getConfig('config_mixedstoppointunits') === 'enabled') {
var $this = $(this);
$this.html(newunit); $this.html(newunit);
$this.parents('.css-gradient-editor-stoppointdata').data('unit', newunit); $row.data('unit', newunit);
}); setColorStopData($this.closest('.css-gradient-editor-stoppointdata').data('index'), 'unit', newunit);

}
setColorStopData(false, '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(); renderColorStopMarkers();
renderGradient(); renderGradient();
Expand Down Expand Up @@ -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); $('<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); 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() { $('.css-gradient-editor-stop-point-delete', elements.colorstopslist).on('click', function() {
removeColorStop($(this).closest('.css-gradient-editor-stoppointdata').data('index')); removeColorStop($(this).closest('.css-gradient-editor-stoppointdata').data('index'));
}); });


$('input.css-gradient-editor-stop-point-position', elements.colorstopslist).TouchSpin({ $('input.css-gradient-editor-stop-point-position', elements.colorstopslist).on('change', function() {
min: MIN,
max: MAX,
postfix: lastunit,
decimals: settings.positiondecimals,
step: Math.pow(0.1, settings.positiondecimals)
}).on('change', function() {
var $this = $(this); var $this = $(this);


var index = $this.closest('.css-gradient-editor-stoppointdata').data('index'); var index = $this.closest('.css-gradient-editor-stoppointdata').data('index');
Expand Down
2 changes: 1 addition & 1 deletion dist/css-gradient-generator.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions dist/css-gradient-generator.min.js
View file

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions index.html
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -398,6 +398,14 @@ <h4 class="modal-title">Configuration</h4>
</div> </div>
</div> </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"> <div class="form-group">
<label class="col-xs-3 text-right">Code generation: </label> <label class="col-xs-3 text-right">Code generation: </label>
<div class="col-xs-9 btn-group"> <div class="col-xs-9 btn-group">
Expand Down
36 changes: 23 additions & 13 deletions src/css-gradient-generator.js
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -176,6 +176,7 @@ var CSSGradientEditor = function(container, options) {
config_colorpicker_swatches: false, config_colorpicker_swatches: false,
config_fallbackwidth: '', config_fallbackwidth: '',
config_fallbackheight: '', config_fallbackheight: '',
config_mixedstoppointunits: 'enabled',
config_generation_bgcolor: true, config_generation_bgcolor: true,
config_generation_iefilter: true, config_generation_iefilter: true,
config_generation_svg: true, config_generation_svg: true,
Expand Down Expand Up @@ -1354,6 +1355,7 @@ var CSSGradientEditor = function(container, options) {


$('.css-gradient-editor-stoppointlist', container).on('click', '.bootstrap-touchspin-postfix', function() { $('.css-gradient-editor-stoppointlist', container).on('click', '.bootstrap-touchspin-postfix', function() {
var $this = $(this), var $this = $(this),
$row = $this.closest('.css-gradient-editor-stoppointdata'),
newunit; newunit;


if ($this.html() === '%') { if ($this.html() === '%') {
Expand All @@ -1365,13 +1367,19 @@ var CSSGradientEditor = function(container, options) {


lastunit = newunit; lastunit = newunit;


$('.bootstrap-touchspin-postfix', elements.colorstopslist).each(function() { if (getConfig('config_mixedstoppointunits') === 'enabled') {
var $this = $(this);
$this.html(newunit); $this.html(newunit);
$this.parents('.css-gradient-editor-stoppointdata').data('unit', newunit); $row.data('unit', newunit);
}); setColorStopData($this.closest('.css-gradient-editor-stoppointdata').data('index'), 'unit', newunit);

}
setColorStopData(false, '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(); renderColorStopMarkers();
renderGradient(); renderGradient();
Expand Down Expand Up @@ -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); $('<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); 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() { $('.css-gradient-editor-stop-point-delete', elements.colorstopslist).on('click', function() {
removeColorStop($(this).closest('.css-gradient-editor-stoppointdata').data('index')); removeColorStop($(this).closest('.css-gradient-editor-stoppointdata').data('index'));
}); });


$('input.css-gradient-editor-stop-point-position', elements.colorstopslist).TouchSpin({ $('input.css-gradient-editor-stop-point-position', elements.colorstopslist).on('change', function() {
min: MIN,
max: MAX,
postfix: lastunit,
decimals: settings.positiondecimals,
step: Math.pow(0.1, settings.positiondecimals)
}).on('change', function() {
var $this = $(this); var $this = $(this);


var index = $this.closest('.css-gradient-editor-stoppointdata').data('index'); var index = $this.closest('.css-gradient-editor-stoppointdata').data('index');
Expand Down

0 comments on commit d6e762d

Please sign in to comment.