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

PATH: home / letacommog / letaweb / scripts / editor / popup

$.popup('visualcsseditor', 'popupconfirm',
{
	getButtons : function()
	{
		var that = this;
		return	[
			 {
				 name: t('LBL_OK'),
				 needvalidation : false,
				 class:'btn-primary',
				 closeAfterClick:true,
				 onpress: function()
				 {
					if(that.onOK)
						that.onOK();
				 }
			 },
			 {
				 name: t('LBL_CANCEL'),
				 class:'btn-danger',
				 closeAfterClick:true,
				onpress: function()
				 {
					if(that.onCancel)
						that.onCancel();
				 }
			 }
			 ];
	},
	init : function(element)
	{
		var that = this;
		var editSelector = StyleSheet.global.editSelector;
		for(var i = 0; i < StyleSheet.csstag.length; i++)
		{
			var e = $('#' + StyleSheet.csstag[i][0]);
			if(e.length == 0)
				continue;
			var jq = window.edit_page.$;
			var q = jq(editSelector);
			if(!e.hasClass('cssproperty'))
			{
				var value = q.css(StyleSheet.csstag[i][0]);
				e.addClass('cssproperty');
				e.addClass('cssproperty-' + StyleSheet.csstag[i][1]); 
				if(StyleSheet.csstag[i][1] == 'number' || StyleSheet.csstag[i][1] == 'percent')
				{
					value = StyleSheet.stripUnits(value);
					e.val(value);
					if(StyleSheet.csstag[i][1] == 'percent')
						e.val(value * 100);
					var ap = $('<div class="input-append"/>');
					e.wrap(ap);
				}
				else if(StyleSheet.csstag[i][1] == 'select')
				{
					e.val(value);
				}
			
			}
		}
		$('#search-image').unbind();
		$('#search-image').bind('click', function()
		{
			if(that.imageManager == undefined)
			{
				that.imageManager = new ImageManager();
				that.imageManager.select = function(id)
				{
					if(id.length > 0)
					{
						var json = id[0];
						var url = ImageUtil.decodeImageURL(json['full_url']);
						$('input#background-image').val(url);
						$('input#background-image').trigger('change');
					};
				};
			}
			that.imageManager.open({extensions:['.jpg', '.png','.jpeg', '.gif']});
		});
		
		that.slider = {};
		that.timer_update = '';
	
		$('.cssproperty-percent', element).not('.non_autoupdate').bind('change',function(i)
		{
			var id = this.id;
			var inpValue = $(this).val();
			var bp_value = inpValue / 100;
			StyleSheet.local.setCSS(id, bp_value);
		});
		$('.cssproperty-percent', element).spinner().on( "spinstop", function( event, ui ) 
		{
			$(this).trigger('change');
		});
		$('.cssproperty-number', element).spinner().on( "spinstop", function( event, ui ) 
		{
			$(this).trigger('change');
		});
		$('.cssproperty-number', element).not('.non_autoupdate').bind('change',function(i)
		{
			var id = this.id;
			var inpValue = $(this).val();
			var unit = StyleSheet.defaultUnit;
			var bp_value = inpValue + unit;
			StyleSheet.local.setCSS(id, bp_value);
		});
		$('.cssproperty-number', element).not('.non_autoupdate').bind('keyup', function()
		{
			var val = $(this).val();
			var rel = this.id;
			$('#' + rel + 'Slider').slider('value', val);
			$(this).trigger('change');
		});
		$('.cssproperty-color', element).not('.non_autoupdate').bind('change',function(i)
		{
			var id = this.id;
			var v = $(this).val();
			StyleSheet.local.setCSS(id, v);
		});
		$('.constainer_chk', element).change(function()
		{
			var p = $(this).parent();
			if(p.hasClass('icon-lock') )
			{
				p.removeClass('icon-lock');
				p.addClass('icon-unlock');
			}
			else
			{
				p.removeClass('icon-unlock');
				p.addClass('icon-lock');
			}
		});
		$('#background-position-select').bind('click',function(i)
		{
			var t = $('#background-position')[0];
			that.popup(t);
		});
		$('#background-image').bind('change',function(i)
		{
			var id = this.id;
			var bp_value = $(this).val();
			if(bp_value.substring(0,3) != 'url')
				bp_value = 'url(' + bp_value + ')';
			StyleSheet.local.setCSS(id, bp_value, true);
		});
		$('select.cssproperty-select', element).not('.non_autoupdate').bind('change',function(i)
		{
			var id = this.id;
			var bp_value = $(this).val();
			StyleSheet.local.setCSS(id, bp_value);
		});
		$('.cssproperty-multiselect', element).bind('change',function(i)
		{
			var id = this.id;
			var bp_value = $(this).val();
			StyleSheet.local.setCSS(id, bp_value, true);
		});
		$('.cssproperty-number[prop="box-shadow"]', element).bind('change', function()
		{
			setShadowValue();
		});
		$('#box-shadow-type').bind('change', function()
		{
			setShadowValue();
		});
		$('#box-shadow-color').bind('change', function()
		{
			setShadowValue();
		});
		
		var setShadowValue = function()
		{
			var v = '';
			var type = $('#box-shadow-type').val();
			v += type + ' ';
			var color = $('#box-shadow-color').val();
			var color = StyleSheet.HexToRgbaCSS(bp_value);
			if(!color)
				color = StyleSheet.SkinIndexToRgbaCSS(bp_value);
			if(!color)
				return;
			$('.cssproperty-number[prop="box-shadow"]', element).each(function()
			{
				var id = this.id;
				var inpValue = $(this).val();
				//inpValue = $.trim(inpValue) == '' ? 0: inpValue;
				if($.trim(inpValue) != '')
				{
					var unit = StyleSheet.defaultUnit;
					var bp_value = inpValue + unit;
					v += bp_value + ' ';
				}
			});
			v += color + ' ';
			
			StyleSheet.local.setCSS('-moz-box-shadow',$.trim(v), true);
			StyleSheet.local.setCSS('-webkit-box-shadow',$.trim(v), true);
			StyleSheet.local.setCSS('box-shadow',$.trim(v), true);
			
		};
		$('.uiCheckButton', element).click(function()
		{
			var b = $(this).find('input') ;
			if(b.length > 0)
			{
				
				if(b.is(':radio'))
				{
					b.attr('checked', true);
					var m = b.attr('name');
					$('input:radio[name=' + m + ']').trigger('change');
				}
				else
				{
					if(b.is(':checked'))
						b.attr('checked', false);
					else
						b.attr('checked', true);
					b.trigger('change');
				}
			}
			
			
		});
		$('.uiCheckButton input:radio', element).change(function()
		{
			if( this.checked )
			{
				$(this).parent().parent().addClass('uiCheckButton-active');
			}
			else
				$(this).parent().parent().removeClass('uiCheckButton-active');
		});
		$('.uiCheckButton input:checkbox', element).change(function()
		{
			if( this.checked )
			{
				$(this).parent().parent().addClass('uiCheckButton-active');
			}
			else
				$(this).parent().parent().removeClass('uiCheckButton-active');
		});
	
		$('input[name="text-decoration"]', element).change(function()
		{
			var v = '';
			$('input[name="text-decoration"]:checked').each(function()
			{
				v = v + this.id + ' ';
			});
			v = v.substring(0, v.length - 1);
			if(v == '')
				v = 'none';
			StyleSheet.local.setCSS('text-decoration', v, true);
		});
		$('input[name="text-align"]', element).change(function()
		{
			var v = '';
			$('input[name="text-align"]:checked', element).each(function()
			{
				v = v + this.id + ' ';
			});
			v = v.substring(0, v.length - 1);
			if(v == '')
				v = 'none';
			StyleSheet.local.setCSS('text-align', v, true);
		});
		$('input[name="text-transform"]', element).change(function()
		{
			var v = '';
			$('input[name="text-transform"]:checked', element).each(function()
			{
				v = v + this.id + ' ';
			});
			v = v.substring(0, v.length - 1);
			if(v == '')
				v = 'none';
			StyleSheet.local.setCSS('text-transform', v, true);
		});
		$('input[name="font-style"]', element).change(function()
		{
			var v = '';
			$('input[name="font-style"]:checked', element).each(function()
			{
				v = v + this.id + ' ';
			});
			v = v.substring(0, v.length - 1);
			if(v == '')
				v = 'none';
			StyleSheet.local.setCSS('font-style', v, true);
		});
		$('input[name="font-weight"]', element).change( function()
		{
			var v = '';
			$('input[name="font-weight"]:checked', element).each(function()
			{
				v = v + this.id + ' ';
			});
			v = v.substring(0, v.length - 1);
			if(v == '')
				v = 'none';
			StyleSheet.local.setCSS('font-weight', v, true);
		});
		$('input[name="font-variant"]', element).change( function()
		{
			var v = '';
			$('input[name="font-variant"]:checked', element).each(function()
			{
				v = v + this.id + ' ';
			});
			v = v.substring(0, v.length - 1);
			if(v == '')
				v = 'none';
			StyleSheet.local.setCSS('font-variant', v, true);
		});
		$('#background-color-gradient1').colorpicker().on('changeColor', function(ev)
		{
			$(this).val(ev.value);
			$(this).trigger('change');
		});
		$('#background-color-gradient2').colorpicker().on('changeColor', function(ev)
		{
			$(this).val(ev.value);
			$(this).trigger('change');
		});
		$('#background-color-gradient2').change(function()
		{
			setBackgroundLinear();
		});
		$('#background-color-gradient1').change(function()
		{
			setBackgroundLinear();
		});
		$('#background-color-gradient-direction').change(function()
		{
			setBackgroundLinear();
		});
		var setBackgroundLinear = function()
		{
			var color1 = $('#background-color-gradient1').val();
			var color2 = $('#background-color-gradient2').val();
			var pos = $('#background-color-gradient-direction').val();
			var css = StyleSheet.createGradient(pos, color1, color2);
			for(var i = 0; i < css.length;i++)
				StyleSheet.local.setCSS('background-image',css[i], true);			
		};
		var setPadding = function()
		{
			var top = $('#padding-top').val();
			var right = $('#padding-right').val();
			var left = $('#padding-left').val();
			var bottom = $('#padding-bottom').val();
			var unit = StyleSheet.defaultUnit;
			var css = top + unit + ' ' + right + unit + ' ' + bottom + unit + ' ' + left  + unit;
			StyleSheet.local.setCSS('padding',css, true);	
		};
		var setMargin = function()
		{
			var top = $('#margin-top').val();
			var right = $('#margin-right').val();
			var left = $('#margin-left').val();
			var bottom = $('#margin-bottom').val();
			var unit = StyleSheet.defaultUnit;
			var css = top + unit + ' ' + right + unit + ' ' + bottom + unit + ' ' + left  + unit;
			StyleSheet.local.setCSS('margin',css, true);		
		};
		var setBorderRadius = function()
		{
			var top = $('#border-top-left-radius').val();
			var right = $('#border-top-right-radius').val();
			var left = $('#border-bottom-left-radius').val();
			var bottom = $('#border-bottom-right-radius').val();
			var unit = StyleSheet.defaultUnit;
			var css = top + unit + ' ' + right + unit + ' ' + bottom + unit + ' ' + left  + unit;
			StyleSheet.local.setCSS('border-radius',css, true);			
		};
		$('.margin', element).change(function()
		{
			setMargin();
		});
		$('.padding', element).change(function()
		{
			setPadding();
		});
		$('.border-radius', element).change(function()
		{
			setBorderRadius();
		});
		$('#padding_constainer_chk').change(function()
		{
			if(this.checked)
			{
				$('.padding', element).on('spin', function(event, ui)
				{
					var v = ui.value;
					$('.padding', element).not(this).val(v);
				});
			}
			else
			{
				$('.padding', element).off('spin');
			}
		});
		$('#margin_constainer_chk').change(function()
		{
			if(this.checked)
			{
				$('.margin', element).on('spin', function(event, ui)
				{
					var v = ui.value;
					$('.margin', element).not(this).val(v);
				});
			}
			else
			{
				$('.margin', element).off('spin');
			}
		});
		$('#border_radius_constainer_chk').change(function()
		{
			if(this.checked)
			{
				$('.border-radius', element).on('spin', function(event, ui)
				{
					var v = ui.value;
					$('.border-radius', element).not(this).val(v);
				});
			}
			else
			{
				$('.border-radius', element).off('spin');
			}
		});
		//$('#border_radius_constainer_chk').trigger('change');
		//$('#padding_constainer_chk').trigger('change');
		//$('#margin_constainer_chk').trigger('change');
		$('.cssproperty-color', element).colorpicker().on('changeColor', function(ev)
		{
			$(this).val(ev.value);
			$(this).trigger('change');
		});
		$('.tabview li a', element).unbind();
		$('.tabview li a', element).click(function(event)
		{
			var tab = $(this).attr('href');
			tab = '.' + tab.substring(1);
			$(tab, element).siblings().hide();
			$(tab, element).show();
			$(this).parent().siblings().removeClass('active');
			$(this).parent().addClass('active');
			event.preventDefault();
		});
		$('.tabview li a:first', element).trigger('click');
		StyleSheet.local.backupCSS();
	},
	onOK : function()
	{
		if(this.options.onOK)
			this.options.onOK();
	},
	onCancel : function()
	{
		if(this.options.onCancel)
			this.options.onCancel();
	},
	close : function()
	{
		if(this.options.onCancel)
			this.options.onCancel();
		this._destroy();
	},
},
{
	needvalidation : false
});

[+] ..
[-] profile.js [edit]
[-] pagelist.js [edit]
[-] order.js [edit]
[-] customer_group.js [edit]
[-] module_list.js [edit]
[-] backgroundeditor.js [edit]
[-] product.js [edit]
[-] visualcsseditor.js [edit]
[-] shipping_rule.js [edit]
[-] profile_change_password.js [edit]
[-] review.js [edit]
[-] contributor_invite.js [edit]
[-] dbfilter.js [edit]
[-] tax_class.js [edit]
[-] special_module_style_editor.js [edit]
[-] idletimeout.js [edit]
[-] address.js [edit]
[-] contributor.js [edit]
[-] login.js [edit]
[-] skin.js [edit]
[-] mail.js [edit]
[-] discount.js [edit]
[-] customer.js [edit]
[-] productgrid.js [edit]
[-] socialsharebuttonconfig.js [edit]
[-] news.js [edit]
[-] color.js [edit]
[-] palette.js [edit]
[-] newsgrid.js [edit]
[-] product_option_combination_grid.js [edit]
[-] page.js [edit]
[-] product_option.js [edit]
[-] tax_rate.js [edit]
[-] coupons.js [edit]
[-] zone.js [edit]
[-] product_bulk_price.js [edit]
[-] option_set.js [edit]
[-] product_option_combination.js [edit]