3 var PE = PixasticEditor;
18 content : "Enter new dimensions below."
27 defaultValue : function() { return PE.getImageWidth(); },
37 defaultValue : function() { return PE.getImageHeight(); },
49 content : "Enter new crop values below or use mouse to select crop area."
78 defaultValue : function() { return PE.getImageWidth(); },
88 defaultValue : function() { return PE.getImageHeight(); },
92 onactivate : function() {
93 var $canvas = PE.getDisplayCanvas();
94 var onchange = function(c) {
95 var doc = PE.getDocument();
96 $j("#input-numeric-crop-left", doc).val(c.x).change();
97 $j("#input-numeric-crop-top", doc).val(c.y).change();
98 $j("#input-numeric-crop-width", doc).val(c.w).change();
99 $j("#input-numeric-crop-height", doc).val(c.h).change();
100 $j("#input-hidden-crop-left", doc).val(c.x).change();
101 $j("#input-hidden-crop-top", doc).val(c.y).change();
102 $j("#input-hidden-crop-width", doc).val(c.w).change();
103 $j("#input-hidden-crop-height", doc).val(c.h).change();
105 $canvas.data("Jcrop-onchange", onchange);
106 $canvas.Jcrop({onChange:onchange}, PE.getDocument());
108 ondeactivate : function() {
109 var $canvas = PE.getDisplayCanvas();
110 if ($canvas.data("Jcrop") && $canvas.data("Jcrop").destroy)
111 $canvas.data("Jcrop").destroy();
113 onafteraction : function(action, isPreview) {
114 action.ondeactivate();
117 var $canvas = PE.getDisplayCanvas();
118 if ($canvas.data("Jcrop") && $canvas.data("Jcrop").destroy)
119 $canvas.data("Jcrop").destroy();
120 var onchange = $canvas.data("Jcrop-onchange");
121 $canvas.Jcrop({onChange:onchange});
134 content : "Enter the angle (-180° to 180°) you want to rotate the picture. Use negative values for clockwise rotation, positive for counterclockwise."
138 labelRight : "°",
147 onactivate : function() {
148 var doc = PE.getDocument();
149 var $displayCanvas = PE.getDisplayCanvas();
150 var dim = Math.min($displayCanvas.attr("height"), 200);
151 var $canvas = $j("<canvas></canvas>", doc);
152 PE.getOverlay().append($canvas);
154 $canvas.attr("width", dim);
155 $canvas.attr("height", dim);
159 $canvas.css("marginTop", (($displayCanvas.attr("height") - dim) * 0.5) + "px");
162 var radius = dim/2 - lineWidth;
163 if (radius < 1) radius = 1;
165 var ctx = $canvas.get(0).getContext("2d");
167 ctx.arc(dim/2, dim/2, radius, 0, Math.PI*2, true);
169 ctx.fillStyle = "rgba(200,200,200,0.2)";
171 ctx.strokeStyle = "rgba(200,200,200,0.5)";
175 $j("#image-area", doc).css("cursor", "move");
177 $overlay = PE.getOverlay();
179 $canvas.get(0).ondragstart = function() {return false;}
180 $canvas.get(0).onselectstart = function() {return false;}
183 var startMouseAngle = 0;
188 var mouseIsDown = false;
189 var onmousedown = function(e) {
191 var offset = $displayCanvas.offset();
192 mx = (e.pageX - offset.left) - $displayCanvas.attr("width")*0.5;
193 my = (e.pageY - offset.top) - $displayCanvas.attr("height")*0.5;
194 startMouseAngle = Math.atan2(my, mx);
195 startAngle = parseInt($j("#input-numeric-rotate-angle", doc).val(), 10) * Math.PI / 180;
197 var onmousemove = function(e) {
198 if (!mouseIsDown) return;
200 var offset = $displayCanvas.offset();
201 mx = (e.pageX - offset.left) - $displayCanvas.attr("width")*0.5;
202 my = (e.pageY - offset.top) - $displayCanvas.attr("height")*0.5;
203 deltaAngle = Math.atan2(my, mx) - startMouseAngle;
204 angle = startAngle - deltaAngle;
205 if (angle < -Math.PI) angle += 2*Math.PI;
206 if (angle > Math.PI) angle -= 2*Math.PI;
207 $j("#input-numeric-rotate-angle", doc).val(Math.round(angle * 180 / Math.PI));
208 $j("#input-numeric-rotate-angle", doc).change();
210 var onmouseup = function() {
214 $j("#image-area", doc).bind("mousedown", onmousedown);
215 $j("#image-area", doc).bind("mousemove", onmousemove);
216 $j("#image-area", doc).bind("mouseup", onmouseup);
217 $canvas.data("onmousedown", onmousedown);
218 $canvas.data("onmousemove", onmousemove);
219 $canvas.data("onmouseup", onmouseup);
220 $displayCanvas.data("rotateCanvas", $canvas);
222 ondeactivate : function() {
223 var doc = PE.getDocument();
224 var $displayCanvas = PE.getDisplayCanvas();
225 $overlay = PE.getOverlay();
226 $j("#image-area", doc).css("cursor", "default");
228 var $canvas = $displayCanvas.data("rotateCanvas");
230 $j("#image-area", doc).unbind("mousedown", $canvas.data("onmousedown"));
231 $j("#image-area", doc).unbind("mousemove", $canvas.data("onmousemove"));
232 $j("#image-area", doc).unbind("mouseup", $canvas.data("onmouseup"));
233 $displayCanvas.removeData("rotateCanvas");
236 onafteraction : function(action, isPreview) {
237 if (!isPreview) { // rebuild the rotate widget
238 action.ondeactivate();
242 onoverlayupdate : function() {
243 var $canvas = PE.getDisplayCanvas().data("rotateCanvas");
245 $canvas.css("marginTop", ((PE.getDisplayCanvas().get(0).height - $canvas.get(0).height) * 0.5) + "px");
259 {name:"Horizontal", value:"horizontal"},
260 {name:"Vertical", value:"vertical"}
262 defaultValue : "vertical",
274 title : "Brightness & Contrast",
281 content : "Use the sliders below to adjust the brightness and/or contrast of the image."
284 label : "Brightness",
285 option : "brightness",
302 label : "Legacy mode",
305 defaultValue : false,
311 title : "Hue/Saturation/Lightness",
318 content : "Use the sliders below to adjust the hue, saturation and/or lightness of the image."
330 label : "Saturation",
331 option : "saturation",
340 option : "lightness",
350 title : "Adjust colors",
357 content : "Use the sliders below to shift the R, G and B channels of the image."
389 title : "Desaturate",
396 content : "This will desaturate the image. Select \"Use average\" to use the average value of the R, G and B channels rather than the default mix of 30% red, 59% green and 11% blue."
399 label : "Use average",
402 defaultValue : false,
408 title : "Sepia toning",
415 content : "Applies a sepia toning effect to the image."
427 content : "This will invert the colors of the image."
439 content : "Use the slider below to lighten or darken the image."
453 title : "Unsharp mask",
460 content : "Use the sliders below to adjust the unsharp mask parameters."
506 content : "Use the slider to set the blur amount."
521 title : "Edge detection",
528 content : "Performs edge detection on the image."
534 defaultValue : false,
541 defaultValue : false,
554 content : "Adds an emboss-like effect to the image. Use the controls below to control the appearance of the effect. Choose \"Blend\" to blend the effect with the original image."
566 label : "Grey level",
567 option : "greyLevel",
576 option : "direction",
579 {name:"Top left", value:"topleft"},
580 {name:"Top", value:"top"},
581 {name:"Top right", value:"topright"},
582 {name:"Right", value:"right"},
583 {name:"Bottom right", value:"bottomright"},
584 {name:"Bottom", value:"bottom"},
585 {name:"Bottom left", value:"bottomleft"},
586 {name:"Left", value:"left"}
588 defaultValue : "topleft",
595 defaultValue : false,
609 content : "Creates a glowing effect on the image."
639 content : "Add random noise to the image."
663 defaultValue : false,
669 title : "Remove noise",
676 content : "Attempts to remove noise from the image. Works best for getting rid of single pixels that stand out."
681 title : "Pointillize",
688 content : "Paints the picture with circular points."
691 label : "Point radius",
718 label : "Transparent",
719 option : "transparent",
721 defaultValue : false,
734 content : "Reduces the number of colours to a specified number of levels."
755 content : "Applies a solarize effect to the image."
767 content : "Creates a pixelated look."
770 label : "Block size",
771 option : "blockSize",
789 title : "Save to page",
791 content : function($ctr) {
792 var doc = PE.getDocument();
793 $j("<div></div>", doc)
794 .addClass("action-output-text")
795 .html("This will save the image to the page.")
798 var $buttonCtr = $j("<div></div>", doc).appendTo($ctr);
799 var $saveButton = $j("<button></button>", doc)
801 .appendTo($buttonCtr)
809 title : "Save to file",
811 content : function(ctr) {
812 var doc = PE.getDocument();
813 $j("<div></div>", doc)
814 .addClass("action-output-text")
815 .html("This will save the image to your local computer.")
818 var formats = PE.validSaveFormats();
820 var selectHtml = "<select>";
821 for (var i=0;i<formats.length;i++) {
822 selectHtml += "<option value='" + formats[i].mime + "'>" + formats[i].name + "</option>";
824 selectHtml += "</select>";
826 var selectCtr = $j("<div></div>", doc)
827 .addClass("ui-select-container");
830 var label = $j("<div></div>", doc)
831 .addClass("ui-select-label")
833 .appendTo(selectCtr);
835 var formatSelect = $j(selectHtml, doc).appendTo(selectCtr);
838 selectCtr.appendTo(ctr);
840 var buttonCtr = $j("<div></div>", doc).appendTo(ctr);
841 var saveButton = $j("<button></button>", doc)
845 saveButton.click(function() {
846 var selectElement = formatSelect.get(0);
847 var formatMime = selectElement.options[selectElement.selectedIndex].value;
848 var dataString = PE.getDataURI(formatMime);
850 var dialog = $j("<div></div>", doc)
851 .attr("id", "save-dialog")
852 .attr("title", "Download file")
854 "Right click the link below and select \"Save as...\" to save your file.<br/>"
856 + "<a href=\"" + dataString + "\">Image Link</a>"
860 // the dialog is added outside the Pixastic container, so get it back in.
861 var dialogParent = $j(dialog.get(0).parentNode);
862 $j("#pixastic-editor", doc).append(dialogParent);
868 title : "Upload to Flickr",
870 content : function($ctr) {
871 var doc = PE.getDocument();
873 function flickrAuthed() {
874 var $text = $j("<div />", doc)
875 .addClass("action-output-text")
876 .html("Authorized as: " + PE.Flickr.getAuthName());
878 var $buttonCtr = $j("<div></div>", doc);
879 var $uploadButton = $j("<button></button>", doc)
880 .html("Upload image")
881 .appendTo($buttonCtr)
883 $uploadButton.click(function() {
884 PE.Flickr.uploadImage(PE.getDataURI());
887 $ctr.append($text, $buttonCtr);
890 var $authCtr = $j("<div />", doc).appendTo($ctr);
893 .addClass("action-output-text")
894 .html("If you have a Flickr account you can now upload your image to Flickr. You will need to give access to your account first. Click the button below to open an authorization window.")
897 var $buttonCtr = $j("<div></div>", doc).appendTo($authCtr);
898 var $authButton = $j("<button></button>", doc)
899 .html("Authenticate")
900 .appendTo($buttonCtr)
902 var checkButtonAdded = false;
903 $authButton.click(function() {
905 if (!checkButtonAdded) {
906 checkButtonAdded = true;
908 var $text = $j("<div />", doc)
909 .addClass("action-output-text")
910 .html("Now click the button below when you have authorized access to your Flickr account.");
912 var $buttonCtr = $j("<div></div>", doc);
914 $authCtr.append($text, $buttonCtr);
916 var $checkButton = $j("<button></button>", doc)
917 .html("I have authenticated!")
918 .appendTo($buttonCtr);
920 $checkButton.click(function() {
921 PE.Flickr.checkAuth(function(res) {
922 if (res.stat == "ok") {
937 content : function(ctr) {
938 var doc = PE.getDocument();
940 $j("<div>Are you sure you want to quit?</div>", doc)
941 .addClass("action-output-text")
943 var $buttonCtr = $j("<div></div>", doc).appendTo(ctr);
945 var $quitButton = PE.UI.makeButton("Yes, quit now!")
946 .appendTo($buttonCtr)
948 $quitButton.click(function() {
952 var $saveButton = PE.UI.makeButton("Save to page and quit")
953 .appendTo($buttonCtr)
966 })(PixasticEditor.jQuery);