diff options
Diffstat (limited to 'share/frontend/impattern/js/sketch.js')
| -rw-r--r-- | share/frontend/impattern/js/sketch.js | 219 |
1 files changed, 219 insertions, 0 deletions
diff --git a/share/frontend/impattern/js/sketch.js b/share/frontend/impattern/js/sketch.js new file mode 100644 index 0000000..ec78489 --- /dev/null +++ b/share/frontend/impattern/js/sketch.js @@ -0,0 +1,219 @@ +//dragging event + +var COLUMNS_MAX = 20; +var ROWS_MAX = 20; +var isDragging = false; +$("body").mousedown(function() { + $(window).mousemove(function() { + isDragging = true; + $(window).unbind("mousemove"); + }); +}).mouseup(function() { + var wasDragging = isDragging; + isDragging = false; + $(window).unbind("mousemove"); + if (!wasDragging) { //was clicking + } +}); + +var c; + +window.active_tool = "brush"; +var brush_tools; + + + +function BrushTools(){ + var brushtools = this; + this.brush = $("#brush"); + this.eraser = $("#eraser"); + this.brush_tools = $(".brush_tools"); + this.active_css = { + "border" : "1px solid black", + "background" : "gray", + "color" : "white", + }, + this.inactive_css = { + "border" : "1px solid gray", + "background" : "whitesmoke", + "color" : "black", + }; + this.activate = function(elem){ + $(elem).css(this.active_css); + window.active_tool = $(elem).attr("id"); + }; + this.deactivate = function(elem){ + $(elem).css(this.inactive_css); + }; +// this.cursors = { +// "brush" : "img/brush.png", +// "eraser" : "img/eraser.png", +// }; + this.brush_tools.click(function(){ + var that = this; + window.active_tool = $(this).attr("id"); + brushtools.activate(that); + brushtools.brush_tools.each(function(){ + if(this != that){ + brushtools.deactivate(this); + } + }); +// $("#canvas_wrapper").css( +// "cursor" , "url("+brushtools.cursors[window.active_tool]+")" +// ) + }); +} + + + + +function GridCanvas(){ + var gridcanvas = this; + this.rows = 10; + this.cols = 10; + this.current_rows = []; + this.container = $("#canvas_wrapper"); + this.paint = function(elem){ + $(elem).attr("painted", "1"); + $(elem).css("background", "black"); + }; + this.erase = function(elem){ + $(elem).attr("painted", "0"); + $(elem).css("background", "white"); + }; + this.initialize = function(cols, rows){ + this.container.html(""); + this.rows = (rows > 0) ? rows : 1; + this.cols = (cols > 0) ? cols : 1; + if (this.rows > ROWS_MAX){ + this.rows = ROWS_MAX; + } + if (this.cols > COLUMNS_MAX){ + this.cols = COLUMNS_MAX; + } + this.cols = cols; + for (var i = 0; i< this.rows; i++){ + var row = document.createElement("div"); + $(row).attr("id", "row_"+i) + $(row).addClass("canvas_row") + for (var j = 0; j< this.cols; j++){ + var cell = document.createElement("span"); + $(cell).addClass("canvas_cell") + $(cell).attr("painted", "0") + $(cell).addClass("column_"+j) + $(cell).html(" ") + $(cell).click(function(){ + if (window.active_tool == 'brush'){ + gridcanvas.paint(this); + }else if(window.active_tool == 'eraser'){ + gridcanvas.erase(this); + } + }); + $(cell).mouseover(function(){ + if (isDragging){ + if (window.active_tool == 'brush'){ + gridcanvas.paint(this); + }else if(window.active_tool == 'eraser'){ + gridcanvas.erase(this); + } + } + }); + $(row).append(cell) + } + this.container.append(row) + } + } + this.toggleGrid = function(){ + if ($("#show_grid").prop("checked")){ + $(".canvas_cell").css("border","1px solid silver"); + }else{ + $(".canvas_cell").css("border","none"); + } + } + this.serialize = function(){ + var matrix = []; + for (var i = 0; i < this.rows; i++){ + var row_storage = []; + $("#row_"+i+"> span").each(function(){ + row_storage.push($(this).attr("painted")); + }); + matrix.push(row_storage); + } + return { + "matrix" : matrix, + "width" : this.cols, + "height" : this.rows, + } + } +} +$("#cols").change(function(){ + var cols = $(this).val() + c.initialize(cols, c.rows); +}); +$("#rows").change(function(){ + var rows = $(this).val() + c.initialize(c.cols, rows); +}); + +$('document').ready(function(){ + $("#create_your_own").click(function(){ + event.preventDefault(); + + $("#draw_protector").show(); + $("#overlay > .close").html("CANCEL"); + $("#overlay").show(); + $("#draw").show(); + $("#final_image").hide(); + }); + $("#overlay > .close").click(function(){ + $("#draw").hide(); + }); + + c = new GridCanvas() + brush_tools = new BrushTools(); + c.initialize($("#cols").val(), $("#rows").val()); + $("#show_grid").change(function(){ + c.toggleGrid(); + }); + $("#drawing_finished").click(function(){ + + window.custom_pattern = c.serialize(); + preview_controller.from_matrix(window.custom_pattern) + $('.patterns').attr("current_pattern", ""); + $('#drawing_finished').prop("disabled", false); + $('#drawing_finished').html("DONE"); + $("#draw_protector").css("background", "none"); + $("#draw").hide(); + $("#overlay").hide(); + console.log(window.custom_pattern) + }); + +}); +window.custom_pattern = ""; + +$('#drawing_finished').click(function(){ +// $("#draw_protector").css("background", "url(img/loading.gif)"); +// $(this).prop("disabled", true); +// $(this).html("Workin'..."); +// $.ajax({ +// type: "POST", +// url: NEW_PATTERN_URL, +// data: { json : JSON.stringify(c.serialize()) }, +// }).done(function( msg ) { +// $('#drawing_finished').prop("disabled", false); +// $('#drawing_finished').html("DONE"); +// $("#draw_protector").css("background", "none"); +// var error = msg.match(/ERR/ig); +// if (error){ +// alert( "There was an error processing your request "); +// return +// } +// $("#draw").hide(); +// $("#overlay").hide(); +// var parts = msg.split("\n") +// window.custom_pattern = "http://i.asdf.us/patterns/"+parts[0] +// $('#sample').css("background", "url("+window.custom_pattern+")"); +// }) + +}); + |