//parse a string to HSB
setColor: function (val) {
- val = (val) ? val.toLowerCase() : val;
+ val = val.toLowerCase();
for (var key in Helper.stringParsers) {
if (Helper.stringParsers.hasOwnProperty(key)) {
var parser = Helper.stringParsers[key];
top: event.pageY - (offsetY - slider.top)
};
},
- setSaturation: function(event, fixedPosition, componentSize) {
+ setSaturation: function(event, fixedPosition) {
slider = {
- maxLeft: componentSize,
- maxTop: componentSize,
+ maxLeft: 100,
+ maxTop: 100,
callLeft: 'setSaturation',
callTop: 'setLightness'
};
this.setSlider(event, fixedPosition);
},
- setHue: function(event, fixedPosition, componentSize) {
+ setHue: function(event, fixedPosition) {
slider = {
maxLeft: 0,
- maxTop: componentSize,
+ maxTop: 100,
callLeft: false,
callTop: 'setHue'
};
this.setSlider(event, fixedPosition);
},
- setAlpha: function(event, fixedPosition, componentSize) {
+ setAlpha: function(event, fixedPosition) {
slider = {
maxLeft: 0,
- maxTop: componentSize,
+ maxTop: 100,
callLeft: false,
callTop: 'setAlpha'
};
fixedPosition = angular.isDefined(attrs.colorpickerFixedPosition) ? attrs.colorpickerFixedPosition : false,
target = angular.isDefined(attrs.colorpickerParent) ? elem.parent() : angular.element(document.body),
withInput = angular.isDefined(attrs.colorpickerWithInput) ? attrs.colorpickerWithInput : false,
- componentSize = angular.isDefined(attrs.colorpickerSize) ? attrs.colorpickerSize : 100,
- componentSizePx = componentSize + 'px',
inputTemplate = withInput ? '<input type="text" name="colorpicker-input" spellcheck="false">' : '',
closeButton = !inline ? '<button type="button" class="close close-colorpicker">×</button>' : '',
template =
'</div>',
colorpickerTemplate = angular.element(template),
pickerColor = Color,
- componentSizePx,
sliderAlpha,
sliderHue = colorpickerTemplate.find('colorpicker-hue'),
sliderSaturation = colorpickerTemplate.find('colorpicker-saturation'),
pickerColorPointers = colorpickerTemplate.find('i');
$compile(colorpickerTemplate)($scope);
- colorpickerTemplate.css('min-width', parseInt(componentSize) + 29 + 'px');
- sliderSaturation.css({
- 'width' : componentSizePx,
- 'height' : componentSizePx
- });
- sliderHue.css('height', componentSizePx);
if (withInput) {
var pickerColorInput = colorpickerTemplate.find('input');
- pickerColorInput.css('width', componentSizePx);
pickerColorInput
.on('mousedown', function(event) {
event.stopPropagation();
});
}
- function bindMouseEvents() {
+ var bindMouseEvents = function() {
$document.on('mousemove', mousemove);
$document.on('mouseup', mouseup);
- }
+ };
if (thisFormat === 'rgba') {
colorpickerTemplate.addClass('alpha');
sliderAlpha = colorpickerTemplate.find('colorpicker-alpha');
- sliderAlpha.css('height', componentSizePx);
sliderAlpha
.on('click', function(event) {
- Slider.setAlpha(event, fixedPosition, componentSize);
+ Slider.setAlpha(event, fixedPosition);
mousemove(event);
})
.on('mousedown', function(event) {
- Slider.setAlpha(event, fixedPosition, componentSize);
+ Slider.setAlpha(event, fixedPosition);
bindMouseEvents();
})
.on('mouseup', function(event){
sliderHue
.on('click', function(event) {
- Slider.setHue(event, fixedPosition, componentSize);
+ Slider.setHue(event, fixedPosition);
mousemove(event);
})
.on('mousedown', function(event) {
- Slider.setHue(event, fixedPosition, componentSize);
+ Slider.setHue(event, fixedPosition);
bindMouseEvents();
})
.on('mouseup', function(event){
sliderSaturation
.on('click', function(event) {
- Slider.setSaturation(event, fixedPosition, componentSize);
+ Slider.setSaturation(event, fixedPosition);
mousemove(event);
if (angular.isDefined(attrs.colorpickerCloseOnSelect)) {
hideColorpickerTemplate();
}
})
.on('mousedown', function(event) {
- Slider.setSaturation(event, fixedPosition, componentSize);
+ Slider.setSaturation(event, fixedPosition);
bindMouseEvents();
})
.on('mouseup', function(event){
target.append(colorpickerTemplate);
- if (ngModel) {
+ if(ngModel) {
ngModel.$render = function () {
elem.val(ngModel.$viewValue);
-
- update();
};
}
colorpickerTemplate.remove();
});
- function previewColor() {
+ var previewColor = function () {
try {
colorpickerPreview.css('backgroundColor', pickerColor[thisFormat]());
} catch (e) {
if (thisFormat === 'rgba') {
sliderAlpha.css.backgroundColor = pickerColor.toHex();
}
- }
+ };
- function mousemove(event) {
- var
+ var mousemove = function (event) {
+ var
left = Slider.getLeftPosition(event),
top = Slider.getTopPosition(event),
slider = Slider.getSlider();
Slider.setKnob(top, left);
if (slider.callLeft) {
- pickerColor[slider.callLeft].call(pickerColor, left / componentSize);
+ pickerColor[slider.callLeft].call(pickerColor, left / 100);
}
if (slider.callTop) {
- pickerColor[slider.callTop].call(pickerColor, top / componentSize);
+ pickerColor[slider.callTop].call(pickerColor, top / 100);
}
previewColor();
var newColor = pickerColor[thisFormat]();
elem.val(newColor);
- if (ngModel) {
+ if(ngModel) {
$scope.$apply(ngModel.$setViewValue(newColor));
}
if (withInput) {
pickerColorInput.val(newColor);
}
return false;
- }
+ };
- function mouseup() {
+ var mouseup = function () {
emitEvent('colorpicker-selected');
$document.off('mousemove', mousemove);
$document.off('mouseup', mouseup);
- }
+ };
- function update(omitInnerInput) {
+ var update = function (omitInnerInput) {
pickerColor.setColor(elem.val());
if (withInput && !omitInnerInput) {
pickerColorInput.val(elem.val());
}
pickerColorPointers.eq(0).css({
- left: pickerColor.value.s * componentSize + 'px',
- top: componentSize - pickerColor.value.b * componentSize + 'px'
+ left: pickerColor.value.s * 100 + 'px',
+ top: 100 - pickerColor.value.b * 100 + 'px'
});
- pickerColorPointers.eq(1).css('top', componentSize * (1 - pickerColor.value.h) + 'px');
- pickerColorPointers.eq(2).css('top', componentSize * (1 - pickerColor.value.a) + 'px');
+ pickerColorPointers.eq(1).css('top', 100 * (1 - pickerColor.value.h) + 'px');
+ pickerColorPointers.eq(2).css('top', 100 * (1 - pickerColor.value.a) + 'px');
previewColor();
- }
+ };
- function getColorpickerTemplatePosition() {
+ var getColorpickerTemplatePosition = function() {
var
positionValue,
positionOffset = Helper.getOffset(elem[0]);
'top': positionValue.top + 'px',
'left': positionValue.left + 'px'
};
- }
+ };
- function documentMousedownHandler() {
+ var documentMousedownHandler = function() {
hideColorpickerTemplate();
- }
+ };
- function showColorpickerTemplate() {
+ var showColorpickerTemplate = function() {
if (!colorpickerTemplate.hasClass('colorpicker-visible')) {
update();
}
}
}
- }
- if (inline === false) {
+ };
+
+ if(inline === false) {
elem.on('click', showColorpickerTemplate);
} else {
showColorpickerTemplate();
event.preventDefault();
});
- function emitEvent(name) {
- if (ngModel) {
+ var emitEvent = function(name) {
+ if(ngModel) {
$scope.$emit(name, {
name: attrs.ngModel,
value: ngModel.$modelValue
});
}
- }
+ };
- function hideColorpickerTemplate() {
+ var hideColorpickerTemplate = function() {
if (colorpickerTemplate.hasClass('colorpicker-visible')) {
colorpickerTemplate.removeClass('colorpicker-visible');
emitEvent('colorpicker-closed');
}
}
}
- }
+ };
colorpickerTemplate.find('button').on('click', function () {
hideColorpickerTemplate();
});
}
+
}
};
}]);