/* Script: imageEdit.js, Author: Justin Maier, License: MIT-style license. */ var imageEdit = new Class({ getOptions: function(){ return { onSave: function(el){ //function to occur once a font has been selected. el is the element that has been editted. }, onComplete: function(el){ //function to occur once a font has been selected. el is the element that has been editted. }, className: 'imageEditor', fade: true, cropping: true }; }, initialize: function(element, options){ this.setOptions(this.getOptions(), options); if(!$('imageEditor')){ this.element = element; this.container = new Element('div').setProperty('id','imageEditor').addClass(this.options.className).setStyles('position:absolute;width:300px;/height:125px;border:1px solid #999;background:#fff;font-family:Arial, Helvetica, sans-serif;z-index:1000;').setOpacity(0).injectInside(document.body); this.dimensions = new Element('div').setStyles('margin:5px 5px 0 5px;border:1px solid #999;padding:3px;font-size:10px;color:#666;').setHTML('height: width: ').injectInside(this.container); this.source = this.dimensions.clone().setHTML('source: ').injectInside(this.container); this.alt = this.source.clone().injectInside(this.container); this.alt.innerHTML = this.alt.innerHTML.replace(/source:/gi,'alt:      '); this.saveButton = new Element('a').setStyles('display:block;float:left;width:45%;border:1px solid #999;color:#666;text-align:center;margin:5px;cursor:pointer;').setHTML('Save').injectInside(this.container); this.saveAction = this.saveButton.effect('background-color'); this.closeButton = this.saveButton.clone().setHTML('Close').setStyle('margin','5px -5px 5px 10px').injectInside(this.container); this.imgDimensions = {width:$ES('input', this.dimensions)[1],height:$ES('input', this.dimensions)[0]}; if(this.options.cropping == true)this.cropButton = new Element('div').setStyles('height:17px;position:absolute;top:8px;left:210px;text-align:center;width:80px;border:1px solid #999;display:block;font-size:12px;cursor:pointer;').appendText('Crop To Fit').injectInside(this.dimensions); this.imgSource = $E('input', this.source); this.imgAlt = $E('input', this.alt); //Bind to specified elements this.show(this.element) if (this.options.initialize) this.options.initialize.call(this); } }, show: function(el){ this.target = el; this.imgDimensions.width.value = el.offsetWidth-2; this.imgDimensions.height.value = el.offsetHeight-2; this.imgSource.value = el.src; this.imgAlt.value = el.getProperty('alt'); this.imgDimensions.width.addEvent('change', this.save.bind(this)); this.imgDimensions.height.addEvent('change', this.save.bind(this)); this.imgSource.addEvent('change', function(){ if(window.ie){ var newImg = new Asset.image(this.imgSource.value); this.target.replaceWith(newImg); this.target = newImg; this.target.addEvent('click', function(event){ this.show(el,event); }.bindWithEvent(this)); this.imgDimensions.width.value = this.target.getStyle('width').toInt(); this.imgDimensions.height.value = this.target.getStyle('height').toInt(); this.save(); } else{ newImg = new Asset.image(this.imgSource.value,{onload:function(){ this.imgDimensions.width.value = newImg.getStyle('width').toInt(); this.imgDimensions.height.value = newImg.getStyle('height').toInt(); newImg.remove(); this.save(); }.bind(this)}).setOpacity(0).injectInside(document.body); } }.bind(this)); this.imgAlt.addEvent('change', this.save.bind(this)); this.closeButton.addEvent('click', this.hide.bind(this)); this.saveButton.addEvent('click', this.save.bind(this)); if(this.options.cropping == true){this.cropButton.addEvent('click', function(event){ this.croppingSrc = this.imgSource.value; this.croppr = new Croppr(this.croppingSrc, {crop: [this.imgDimensions.width.value,this.imgDimensions.height.value], url:function(v) { var fileType = 'jpg'; if(this.croppingSrc.match('.png')){fileType = 'png'} if(this.croppingSrc.match('.gif')){fileType = 'gif'} new Ajax('js/resize.php',{method: 'post', postBody:'type='+fileType+'&src='+this.croppingSrc+'&'+Object.toQueryString(v), onComplete: function(text,xml){ this.imgSource.value = window.location+text; this.imgSource.value = this.imgSource.value.replace(/index.html/gi,''); this.save(); }.bind(this) }).request(); }.bind(this), scale: 0.5}); }.bindWithEvent(this));} this.container.setStyles({left: el.getLeft()+'px', top: el.getTop()+'px'}) if(this.options.fade == true){this.container.effect('opacity').start(0.8);}else{this.container.setOpacity(0.8);} }, save: function(){ this.saveButton.setHTML('Saving...'); this.target.setStyle('width',this.imgDimensions.width.value+'px'); this.target.setStyle('height',this.imgDimensions.height.value+'px'); this.target.src = this.imgSource.value; this.target.setProperty('alt',this.imgAlt.value); this.saveAction.start('#c6e8ff').chain(function(){ this.saveButton.setHTML('Saved'); (function(){this.saveButton.setHTML('Save');}.bind(this)).delay(500); this.saveAction.start('#fff'); }.bind(this)); this.fireEvent('onSave', [this.target]); }, hide: function(){ this.imgDimensions.width.removeEvents('change'); this.imgDimensions.height.removeEvents('change'); this.imgSource.removeEvents('change'); this.imgAlt.removeEvents('change'); this.closeButton.removeEvents('click'); this.saveButton.removeEvents('click'); if(this.options.cropping == true)this.cropButton.removeEvents('click'); if(this.options.fade == true){this.container.effect('opacity').start(0).chain(function(){this.container.remove();}.bind(this));}else{this.container.setOpacity(0).chain(function(){this.container.remove();}.bind(this));}//hide and remove this.fireEvent('onComplete', [this.target]); }, remove: function(){ this.elements.each(function(el){ el.removeEvents('click'); }); this.container.remove(); } }); Element.extend({ editImage: function(options) { return new imageEdit(this, options); } }); imageEdit.implement(new Events); imageEdit.implement(new Options);