diff options
Diffstat (limited to 'public/assets/js/lib/views')
| -rw-r--r-- | public/assets/js/lib/views/HeaderView.js | 9 | ||||
| -rw-r--r-- | public/assets/js/lib/views/HomeView.js | 2 | ||||
| -rw-r--r-- | public/assets/js/lib/views/LinksView.js | 9 | ||||
| -rw-r--r-- | public/assets/js/lib/views/PhotoView.js | 167 | ||||
| -rw-r--r-- | public/assets/js/lib/views/UploadView.js | 38 |
5 files changed, 194 insertions, 31 deletions
diff --git a/public/assets/js/lib/views/HeaderView.js b/public/assets/js/lib/views/HeaderView.js new file mode 100644 index 0000000..4ee2a07 --- /dev/null +++ b/public/assets/js/lib/views/HeaderView.js @@ -0,0 +1,9 @@ +var HeaderView = View.extend({ + + el: "#header", + + initialize: function(){ + this.camera = new UploadView({ el: this.$(".camera-btn") }) + }, + +})
\ No newline at end of file diff --git a/public/assets/js/lib/views/HomeView.js b/public/assets/js/lib/views/HomeView.js index 7e2ea24..ce786db 100644 --- a/public/assets/js/lib/views/HomeView.js +++ b/public/assets/js/lib/views/HomeView.js @@ -8,7 +8,9 @@ var HomeView = View.extend({ grid_template: $("#grid_template").html(), initialize: function(){ + this.HeaderView = new HeaderView ({ parent: this }) this.LinksView = new LinksView ({ parent: this }) + this.PhotoView = new PhotoView ({ parent: this }) }, show: function(){ diff --git a/public/assets/js/lib/views/LinksView.js b/public/assets/js/lib/views/LinksView.js index c8603a9..75feabb 100644 --- a/public/assets/js/lib/views/LinksView.js +++ b/public/assets/js/lib/views/LinksView.js @@ -7,7 +7,7 @@ var LinksView = View.extend({ }, }, - template: $("#link_template").html(), + template: $("#link-template").html(), initialize: function(){ }, @@ -18,8 +18,11 @@ var LinksView = View.extend({ }.bind(this)) }, - append: function(links){ - var tmpl = this.template.replace(/{{url}}/, sanitize(data.url)) + append: function(data){ + var media = Parser.tokenize(data.url) + var tmpl = this.template.replace(/{{type}}/, media.type) + .replace(/{{text}}/, media.text) + .replace(/{{url}}/, media.url) .replace(/{{nick}}/, sanitize(data.nick)) this.$el.append(tmpl) }, diff --git a/public/assets/js/lib/views/PhotoView.js b/public/assets/js/lib/views/PhotoView.js new file mode 100644 index 0000000..e7b0732 --- /dev/null +++ b/public/assets/js/lib/views/PhotoView.js @@ -0,0 +1,167 @@ +var PhotoView = (function(){ + + var hue = 0, sat = 0, lum = 0 + var nn, invert, width + var timeout + + var PhotoView = View.extend({ + + el: "#photo", + + events: { + "change #width_el": "updateWidth", + "change #ratio_el": "updateRatio", + "change #hue_el": "updateHue", + "change #saturation_el": "updateSat", + "change #luminance_el": "updateLum", + "change #invert_el": "updateInvert", + "change #palette_el": "updatePalette", + "change #nn_el": "updateNN", + "click .post-btn": "post", + "click .close-btn": "hide", + }, + + initialize: function(){ + Photo.set_recolor_fn(function(rgb){ + if (invert) { + rgb[0] = 255 - rgb[0] + rgb[1] = 255 - rgb[1] + rgb[2] = 255 - rgb[2] + } + var hsl = rgb2hsl(rgb) + hsl[0] = mod(hsl[0] + hue, 1.0) + hsl[1] = clamp(hsl[1] + sat, 0.0, 1.0) + hsl[2] = clamp(hsl[2] + lum, 0.0, 1.0) + return hsl2rgb.apply(this, hsl) + }) + + this.$width = this.$("#width_el") + this.$widthSpan = this.$("#width_span") + this.$heightSpan = this.$("#height_span") + this.$ratio = this.$("#ratio_el") + this.$nn = this.$("#nn_el") + this.$invert = this.$("#invert_el") + this.$palette = this.$("#palette_el") + this.$canvasRapper = this.$("#canvas_rapper") + this.camera = new UploadView({ el: this.$(".camera-btn") }) + + this.canvas = document.createElement("canvas") + this.ctx = this.canvas.getContext('2d') + this.$canvasRapper.append(this.canvas) + + width = parseInt( this.$width.val() ) + ratio = parseFloat( this.$ratio.val() ) + nn = this.$nn.prop('checked') + invert = this.$invert.prop('checked') + this.$widthSpan.html(width) + + this.img = new Image () + this.img.onload = function(){ + this.$ratio.val() + this.updateRatio() + }.bind(this) + + this.load("/assets/img/test.png") + }, + + load: function(url){ + this.img.src = url + console.log("load", url) + this.show() + }, + + show: function(){ + $("body").addClass("photo") + }, + + hide: function(){ + $("body").removeClass("photo") + }, + + update: function(){ + Photo.fromCanvas(this.img, this.toCanvas.bind(this), { width: width, ratio: ratio, neighbor: nn }) + }, + + updateWidth: function(){ + width = parseInt( this.$width.val() ) + this.$widthSpan.html( width ) + this.$heightSpan.html( "..." ) + this.deferUpdate() + }, + updateRatio: function(){ + ratio = parseFloat( this.$ratio.val() ) + if (ratio < 0.03) return + this.$widthSpan.html( width ) + this.$heightSpan.html( "..." ) + this.deferUpdate() + }, + + deferUpdate: function(){ + clearTimeout( timeout ) + timeout = setTimeout(this.update.bind(this), 50) + }, + + updateHue: function(){ + }, + updateSat: function(){ + }, + updateLum: function(){ + }, + updateInvert: function(){ + invert = this.$invert.prop('checked') + this.update.bind(this) + }, + updateNN: function(){ + nn = this.$nn.prop('checked') + this.update.bind(this) + }, + updatePalette: function(){ + var palette = this.$palette.val() + Photo.set_colors( Photo[palette] ) + this.update.bind(this) + }, + + toCanvas: function(rows){ + this.rows = rows + var wpx = 6, hpx = 12 + var rgb_colors = Photo.colors.map(function(c){ return "rgb(" + c + ")" }) + this.canvas.width = rows[0].length * wpx + this.canvas.height = rows.length * hpx + var ctx = this.ctx + rows.forEach(function(row, j){ + row.forEach(function(lex, i){ + ctx.fillStyle = rgb_colors[lex] + ctx.fillRect(i*wpx,j*hpx,wpx,hpx) + }) + }) + this.$heightSpan.html( rows.length ) + // + }, + + post: function(){ + if (! this.rows) return + var color_code = Photo.mirc(this.rows) + +// var fd = new FormData() +// fd.append('image', color_code) + var _csrf = $("meta[name='_csrf']").attr('content') + + var request = $.ajax({ + url: "/_irc/post", + type: "post", + data: { image: color_code, _csrf: _csrf }, +// processData: false, +// contentType: false, + }) + request.done(this.success.bind(this)) + }, + + success: function(){ + + }, + + }) + + return PhotoView + +})() diff --git a/public/assets/js/lib/views/UploadView.js b/public/assets/js/lib/views/UploadView.js index 89ebac4..5f51324 100644 --- a/public/assets/js/lib/views/UploadView.js +++ b/public/assets/js/lib/views/UploadView.js @@ -1,14 +1,11 @@ -var WebcamView = View.extend({ +var UploadView = View.extend({ - el: "#photobooth", - events: { - "change #upload-btn input": "handleFileSelect", + "change input": "handleFileSelect", }, initialize: function(){ - this.$input = this.$('#file') - this.$snapBtn = this.$("#snap-btn") + this.$input = this.$('input') }, loaded: false, @@ -26,36 +23,21 @@ var WebcamView = View.extend({ var files = e.dataTransfer ? e.dataTransfer.files : e.target.files var file = files[0] + if (! file) return if ( ! file.type.match('image.*')) return - // this.upload(file) - var img = new Image - img.onload = function() { - var w, h - var ratio = img.naturalWidth / img.naturalHeight - if (ratio >= 4/3) { - h = 480 - w = 480 * ratio - } - else { - w = 640 - h = 640 / ratio - } - ctx.drawImage(img, 0, 0, w, h) - }.bind(this) - img.src = URL.createObjectURL(file) + + app.views.home.PhotoView.load( URL.createObjectURL(file) ) }, - upload: function(file){ - var _csrf = $("meta[name=_csrf]").attr("value") + upload: function(data){ var fd = new FormData() - fd.append('image', file) + fd.append('image', data) var request = $.ajax({ - url: "/irc/image?_csrf=" + _csrf, + url: "/_irc/image", type: "post", - data: fd, - dataType: "json", + data: data, processData: false, contentType: false, }) |