ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / letacommog / letaweb / scripts

/*
*angular color picker module
*colorpalettepicker directive apply to any element
*/
angular.module('ui.colorpicker',['ui.dialog'])

.directive('colorpalettepicker', ['$dialog','$compile','$window', function($dialog, $compile, $window)
{
/*
*angular color picker module
*colorpalettepicker directive apply to any element
*/
	return {
		require: '?ngModel',
		scope: { color:'=ngModel' },
		link:function(scope,element, attrs,ngModel)
		{
			scope.automatic = false;
			if(attrs.automatic != undefined)
				scope.automatic = true;
			
			scope.color = scope.color || '##12';
			if(window.palette == undefined && window.top.palette == undefined )
			{
				return
			}
			var child_scope = scope.$new();
			var colors = (window.palette || window.top.palette).colors;
			var total = colors.length;
			child_scope.colors = [];
			for(var i = 0;i < 5;i++)
			{
				var color_items = []
				for(var j = 0;j < 5;j++)
				{
					var colorCode = colors[j][i].toHex();
					var index = i * 5 + j;
					color_items.push({color:colorCode,code:'##' + index});
				}
				child_scope.colors.push({colors: color_items});
			}
			child_scope.changeColor = function(item)
			{
				if(item == undefined)
				{
					child_scope.color = '#ffffff';
					if(ngModel)
						ngModel.$setViewValue('');
					return;
				}
				child_scope.color = item.color;
				child_scope.color_code = item.code;
				child_scope.isopen = !scope.isopen;
				if(ngModel)
					ngModel.$setViewValue(child_scope.color_code);
				child_scope.isopen=false;
			}
			child_scope.isopen = false;
			child_scope.toggleDropdown = function($event) {
	   			$event.preventDefault();
				$event.stopPropagation();
				child_scope.isopen = !child_scope.isopen;
			};
			child_scope.colorpickerReplace = angular.isDefined(attrs.colorpickerReplace) ? child_scope.$parent.$eval(attrs.colorpickerReplace) : true;
			var e = $(element);
			var template = '<div class="dropdown colorpalette_picker" uib-dropdown is-open="isopen">' +
							'<a href="javascript:void(0);" class="dropdown-toggle" uib-dropdown-toggle>' +
							'<i class="fa fa-square" style="color: {{color}}"></i><span class="caret"></span>'+
							'</a>' +
							
							'<ul class="colorpalette_dropdown dropdown-menu" role="menu">' +
								'<li >'+
								'<table class="table">'+
								'<tr>'+
								'<td colspan=1>'+
								'<a href="javascript:void(0)" class="color_item" style="background-color:#ffffff" ng-click="changeColor()"><span class="color_input"></span></a>'+
								'</td>' +
								'<td colspan=4>'+
								'<span>Automatic</span>'+
								'</td>' +
								'</tr>' +
								'<tr ng-repeat="item in colors">'+
								'<td ng-repeat="color in item.colors">'+
								'<a href="javascript:void(0)" class="color_item" style="background-color: {{color.color}}" ng-click="changeColor(color)"><span class="color_input"></span></a>'+
								'</td>' +
								'</tr>' +
								'</table>'+
								'</li>'+
							'</ul>'+
							
							'</div>';
			var colorpickerTemplate = angular.element(template);
			$compile(colorpickerTemplate)(child_scope);
			
			if(e.is(':input'))
			{
				e.after(colorpickerTemplate);
				e.hide();
			}
			else
			{
				e.append(colorpickerTemplate);
			}
		}
	}
}])
.directive('colorpicker', ['$dialog','$compile','$window', function($dialog, $compile, $window)
{
	function link(scope, element, attrs,ngModel) {
		
		scope.openColorPalleteDlg = function()
		{
			$dialog.open({
				template:	'<div class="modal-header" header-draggable>'
							+'<button class="close" ng-click="close()"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>'
							+ '<h4 class="modal-title title">Color picker</h4>'
							+ '</div>' + 
							'<div class="modal-body">'+
							'<div class="form-group">'+
							'<div class="colorValues_container">' + 
							'<div  style="background-color: {{saturation_color_hex}}" class="colorpicker-saturation" ng-mousedown="onHSBMousedown($event,0)"><i style="left: {{cursors_saturation.left}}; top: {{cursors_saturation.top}}"><b></b></i></div>'+
							'<div class="colorpicker-hue" ng-mousedown="onHSBMousedown($event,1)"><i style="top: {{cursors_hue.top}}"></i></div>'+
							'<div class="colorpicker-alpha"><i style="top:{{cursors_alpha.top}}"></i></div>'+
							'<div class="hsb_container">' + 
							'<label>H<input type="text" ng-change="changeHueInput()" class="HInput" ng-model="colorHSB.h"></label>' +
							'<label>S<input type="text" class="SInput" ng-model="colorHSB.s" ng-change="changeHueInput()"></label>' +
							'<label>B<input type="text" class="BInput" ng-model="colorHSB.v" ng-change="changeHueInput()"></label>' +
							'</div>' + 
							'</div>' + 
							'<div class="hex_container">' + 
							'<label>Hex #<input type="text" ng-change="changeHexInput()" class="HexInput" ng-model="color_hex_x"></label>' +
							'</div>' + 
							'<div class="colorpicker-color" style="background-color: {{color_hex}}"><div /></div>'+
							'</div>'+
							
							'</div>'+
							'<div class="modal-footer">'+
							'<button class="btn btn-danger" ng-click="ok()">Close</button>' + 
							'</div>'
							,
					backdrop : false,
					size:'sm',
					controller: function($scope,$modalInstance)
					{
						$scope.colorPickerNonePalette = angular.isDefined(attrs.colorPickerNonePalette) ? scope.$parent.$eval(attrs.colorPickerNonePalette) : false;
						 $scope.ok = function () {
							$modalInstance.close($scope.color);
						  };
						
						  $scope.close = function () {
							$modalInstance.dismiss('cancel');
						  };
						$scope.changeHueInput = function($event)
						{
							$scope.color = Color.fromHsv($scope.colorHSB);
							$scope.color_hex = $scope.color.toHex();
							$scope.color_hex_x = $scope.color_hex.substring(1);
							previewColor();
							updateCursor();
							if(ngModel)
								ngModel.$setViewValue($scope.color_hex);
						};
						$scope.changeHexInput = function($event)
						{
							$scope.color = Color.fromHex($scope.color_hex);
							$scope.colorHSB = $scope.color.toHsv();
							previewColor();
							updateCursor();
							if(ngModel)
								ngModel.$setViewValue($scope.color_hex);
						};
						function previewColor()
						{
							var value = $scope.color.toHsv();
							value.s = 100;
							value.v = 100;
							var c = Color.fromHsv(value);
							$scope.baseColor = c.toHex();
						}
						function updateCursor()
						{
							var value = $scope.color.toHsv();
							$scope.cursors_saturation = {left: value.s + 'px', top: 100 - value.v + 'px'};
							$scope.cursors_hue = {top: Math.round((100 *value.h)/ 360) + 'px'};
							$scope.cursors_alpha = {top: Math.round(100 * (1 - value.a || 1))  + 'px'};
						}
						var color = angular.copy(scope.color);
						$scope.color = new Color(color || '#000' );
						$scope.colorHSB = $scope.color.toHsv();
						$scope.color_hex = $scope.color.toHex();
						$scope.color_hex_x = $scope.color_hex.substring(1);
						$scope.saturation_color_hex = Color.fromHsv($scope.colorHSB.h,100,100).toHex();
						previewColor();
						updateCursor();
						
						var sliders = 
						{
							saturation: {
								maxLeft: 100,
								cursor:'saturation',
								maxTop: 100,
								callLeft: 'setSaturation',
								callTop: 'setLightness'
							},
							
							hue: {
								maxLeft: 0,
								maxTop: 100,
								cursor:'hue',
								callLeft: false,
								callTop: 'setHue'
							},
							
							alpha: {
								maxLeft: 0,
								maxTop: 100,
								cursor:'alpha',
								callLeft: false,
								callTop: 'setAlpha'
							}
						};
						function onmousemove(e,type)
						{
							type = type||0;
							e.stopPropagation();
							e.preventDefault();
							var left = Math.max(
								0,
								Math.min(
									$scope.slider.maxLeft,
									$scope.slider.left + ((e.pageX||$scope.pointer.left) - $scope.pointer.left)
								)
							);
							var top = Math.max(
								0,
								Math.min(
									$scope.slider.maxTop,
									$scope.slider.top + ((e.pageY||$scope.pointer.top) - $scope.pointer.top)
								)
							);
							$scope['cursors_' + $scope.slider.cursor] = {left: left + 'px', top: top + 'px'};
							if ($scope.slider.callLeft) {
								$scope.color[$scope.slider.callLeft].call($scope.color, left/100);
								$scope.colorHSB = $scope.color.toHsv();
								$scope.color_hex = $scope.color.toHex();
								$scope.color_hex_x = $scope.color_hex.substring(1);
								$scope.color.color_hex = $scope.color_hex;
								if($scope.slider.cursor=='hue')
									$scope.saturation_color_hex = $scope.color_hex;
								
							}
							if ($scope.slider.callTop) {
								$scope.color[$scope.slider.callTop].call($scope.color, top/100);
								$scope.colorHSB = $scope.color.toHsv();
								$scope.color_hex = $scope.color.toHex();
								$scope.color_hex_x = $scope.color_hex.substring(1);
								$scope.color.color_hex = $scope.color_hex;
								if($scope.slider.cursor=='hue')
								{
									$scope.saturation_color_hex = Color.fromHsv($scope.colorHSB.h,100,100).toHex();
								}
								
							}
							if(ngModel)
								ngModel.$setViewValue($scope.color_hex);
							previewColor();
							return false;
						}
						
						function onmouseup(e)
						{
							e.stopPropagation();
							e.preventDefault();
							$(document).unbind('mousemove.ColorPicker');
							$(document).unbind('mouseup.ColorPicker');
							
							return false;
						}
						$scope.onHSBMousedown = function($event,type)
						{
							var target = $($event.currentTarget);
							var zone = target.closest('div');
							if (!zone.is('.colorpicker')) {
								if (zone.is('.colorpicker-saturation')) {
									$scope.slider = $.extend({}, sliders['saturation']);
								} 
								else if (zone.is('.colorpicker-hue')) {
									$scope.slider = $.extend({}, sliders['hue']);
								}
								else if (zone.is('.colorpicker-alpha')) {
									$scope.slider = $.extend({}, sliders['alpha']);
								}
								var offset = zone.offset();
								$scope.slider.left = $event.pageX - offset.left;
								$scope.slider.top = $event.pageY - offset.top;
								$scope.pointer = {
									left: $event.clientX,
									top: $event.clientY
								};
								$(document).bind('mousemove.ColorPicker', function(e)
								{
									onmousemove(e);
								});
								
								$(document).bind('mouseup.ColorPicker', function(e)
								{
									onmouseup(e);
								});
								onmousemove($event,type);
							}
						}
					}
			})
		}
		var e = $(element);
		e.click(function()
		{
			scope.openColorPalleteDlg();
		});
	}
	return {
		require: '?ngModel',
		scope: { color:'=ngModel' },
		link:link
	};
}]);

[+] ..
[+] sample_images
[-] ssultils.js [edit]
[-] dialog.js [edit]
[-] colorpicker.js [edit]
[-] script.js [edit]
[+] libraries
[-] ui.dbfilter-editing.js [edit]
[-] stgrid.js [edit]
[-] ui.category-editing.js [edit]
[-] forms.js [edit]
[-] player.swf [edit]
[-] language.js [edit]
[-] im.js [edit]
[-] terms_en.js [edit]
[-] skinutils.js [edit]
[-] create_page.js [edit]
[-] ihover.js [edit]
[-] builder.js [edit]
[-] ui.tab-content.js [edit]
[-] admin.js [edit]
[-] ui.tab-editing.js [edit]
[-] login.js [edit]
[-] popup.js [edit]
[-] ecommerce.js [edit]
[-] stEditor.js [edit]
[-] colorutils.js [edit]
[-] livedemo.js [edit]
[-] palette.js [edit]
[+] editor