From c19fbc87676404636a2f5df304ddd7875fc98e66 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 6 Oct 2014 16:01:13 -0400 Subject: new scenery type: text --- public/assets/javascripts/rectangles/models/wall.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'public/assets/javascripts/rectangles/models/wall.js') diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index fdc8d8c..dc38183 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -68,9 +68,7 @@ }, */ mousedown: function(e){ - if (Scenery.nextText) { - } - else if (Scenery.nextMedia) { + if (Scenery.nextMedia) { var offset = offsetFromPoint(e, mx.el) if (! offset) { return } @@ -91,13 +89,15 @@ app.controller.toolbar.resetPermissions() Scenery.resize.show(scenery) Scenery.hovering = true + + app.controller.pick(scenery) UndoStack.push({ type: 'create-scenery', undo: { id: scenery.id }, redo: scenery.serialize(), }) - + // TODO: watch individual scenery object here Minotaur.watch( app.router.editorView.settings ) } -- cgit v1.2.3-70-g09d2 From d8637f78753af20022c9b6cd55717a5f905dd0ee Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 7 Oct 2014 12:11:43 -0400 Subject: splitting wallpaper url / position --- .../assets/javascripts/rectangles/models/wall.js | 24 ++++++++++++++-------- public/assets/javascripts/ui/editor/EditorView.js | 4 ++++ public/assets/javascripts/ui/reader/ReaderView.js | 4 ++++ 3 files changed, 23 insertions(+), 9 deletions(-) (limited to 'public/assets/javascripts/rectangles/models/wall.js') diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index dc38183..dedae8b 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -68,12 +68,12 @@ }, */ mousedown: function(e){ - if (Scenery.nextMedia) { - var offset = offsetFromPoint(e, mx.el) - if (! offset) { return } + var offset = offsetFromPoint(e, mx.el) + if (! offset) { return } - var pos = base.mxOffsetToPosition( offset, index ) + var pos = base.mxOffsetToPosition( offset, index ) + if (Scenery.nextMedia) { var scenery = Scenery.addNextToWall({ wall: base, index: index, @@ -116,7 +116,7 @@ Minotaur.watch( app.router.editorView.settings ) } else { - app.controller.hideExtras() + app.controller.pickWall(base, pos) } } }) @@ -140,6 +140,7 @@ Wall.prototype.deserialize = function(data){ this.wallpaper( data.background ) + this.wallpaperPosition( data.background_x, data.background_y, data.background_scale ) } @@ -214,22 +215,27 @@ } Wall.prototype.wallpaper = function(background){ + this.background = background || "none" + this.mx.forEach(function(mx){ + mx.el.style.backgroundImage = background + }) + } + + Wall.prototype.wallpaperPosition = function(x, y, scale){ var useX = this.side & FRONT_BACK var shouldFlip = this.side & (LEFT | BACK) - - this.background = background || "none" - + this.mx.forEach(function(mx){ var partitionOffset = useX ? mx.x : mx.z if (shouldFlip) partitionOffset *= -1 partitionOffset += mx.width/2 var floorOffset = mx.y + mx.height/2 - mx.el.style.backgroundImage = background mx.el.style.backgroundPosition = (~~partitionOffset) + "px " + (~~floorOffset) + "px" }) } + Wall.prototype.outline = function(wallColor, outlineColor){ var useX = this.side & FRONT_BACK var mx = this.mx diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 67687fe..f95d909 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -52,6 +52,10 @@ var EditorView = View.extend({ } }, + pickWall: function(wall, pos){ + this.hideExtras() + }, + hideExtras: function(){ this.mediaEditor.hide() this.textEditor.hide() diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index 82db048..5f2db0f 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -78,6 +78,10 @@ var ReaderView = View.extend({ app.tube("pick-scenery", { scenery: scenery }) }, + pickWall: function(wall, pos){ + this.hideExtras() + }, + hideExtras: function(){ this.mediaPlayer.hide() app.tube("close-scenery") -- cgit v1.2.3-70-g09d2 From 42420ebed566dffd680998d5b2fb46764164e540 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 7 Oct 2014 13:04:41 -0400 Subject: wallpaperPosition --- .../assets/javascripts/rectangles/models/wall.js | 75 ++++++++++++++++++---- 1 file changed, 64 insertions(+), 11 deletions(-) (limited to 'public/assets/javascripts/rectangles/models/wall.js') diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index dedae8b..93e1f42 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -140,7 +140,6 @@ Wall.prototype.deserialize = function(data){ this.wallpaper( data.background ) - this.wallpaperPosition( data.background_x, data.background_y, data.background_scale ) } @@ -215,24 +214,78 @@ } Wall.prototype.wallpaper = function(background){ - this.background = background || "none" + if (! background) { + background = { src: "none" } + } + else if (typeof background == "string") { + background = { src: background } + } + else if (! background.src) { + background = { src: "none" } + } + background.x = background.x || 0 + background.y = background.y || 0 + background.scale = background.scale || 1 + + this.background = background + this.background.src = this.background.src.replace("url(","").replace(")","") + + console.log(background) + + if (this.background.src == "none") { + this.wallpaperLoad(this.background.src) + return + } + + var img = new Image () + img.onload = function(){ + this.backgroundImage = img + this.wallpaperLoad(this.background.src) + this.wallpaperPosition(background) + }.bind(this) + img.src = this.background.src + img.complete && img.onload() + } + + Wall.prototype.wallpaperLoad = function(url){ + if (url !== "none") { + url = "url(" + url + ")" + } this.mx.forEach(function(mx){ - mx.el.style.backgroundImage = background + mx.el.style.backgroundImage = url }) } - Wall.prototype.wallpaperPosition = function(x, y, scale){ + Wall.prototype.wallpaperPosition = function(background){ + if (this.background.src == "none") { return } + this.background.x = background.x || this.background.x + this.background.y = background.y || this.background.y + this.background.scale = background.scale || this.background.scale || 1 + var useX = this.side & FRONT_BACK var shouldFlip = this.side & (LEFT | BACK) - this.mx.forEach(function(mx){ - var partitionOffset = useX ? mx.x : mx.z - if (shouldFlip) partitionOffset *= -1 - partitionOffset += mx.width/2 - var floorOffset = mx.y + mx.height/2 + var mx, dx, dy + var w = Math.round( this.backgroundImage.naturalWidth * this.background.scale ) + var h = Math.round( this.backgroundImage.naturalHeight * this.background.scale ) - mx.el.style.backgroundPosition = (~~partitionOffset) + "px " + (~~floorOffset) + "px" - }) + this.surface.faces.forEach(function(face, i){ + + if (shouldFlip) { + mx = this.mx[this.mx.length-1-i] + dx = Math.round( this.background.x + face.x.a ) + dy = Math.round( this.background.y + face.y.b ) + } + else { + mx = this.mx[i] + dx = Math.round( this.background.x - face.x.b ) + dy = Math.round( this.background.y + face.y.b ) + } + + mx.el.style.backgroundPosition = dx + 'px ' + dy + 'px' + mx.el.style.backgroundSize = w + 'px ' + h + 'px' + }.bind(this)) + bbb = this } -- cgit v1.2.3-70-g09d2 From f5ab61241bf9519325a36b86ee74ab2df13a4331 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 7 Oct 2014 14:43:45 -0400 Subject: colorpicker presets --- .../assets/javascripts/rectangles/models/wall.js | 2 -- .../assets/javascripts/ui/editor/LightControl.js | 33 ++++++++++++++++++++++ public/assets/javascripts/ui/reader/MediaPlayer.js | 4 +-- public/assets/stylesheets/app.css | 8 ++++-- views/controls/editor/light-control.ejs | 10 +++---- 5 files changed, 46 insertions(+), 11 deletions(-) (limited to 'public/assets/javascripts/rectangles/models/wall.js') diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 93e1f42..820fb5f 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -230,8 +230,6 @@ this.background = background this.background.src = this.background.src.replace("url(","").replace(")","") - console.log(background) - if (this.background.src == "none") { this.wallpaperLoad(this.background.src) return diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index 3eb2861..2b7cfaa 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -10,6 +10,7 @@ var LightControl = View.extend({ "input #brightness-control": "updateBrightness", "input #outline-hue": "updateShadow", "input #wall-hue": "updateShadow", + "click .presets span": "selectPreset", }, initialize: function(){ @@ -114,6 +115,38 @@ var LightControl = View.extend({ this.setMode(mode) }, + presets: { + wireframe: { + wall: [255,255,255], + outline: [0,0,0], + floor: [246,246,246], + ceiling: [255,255,255], + }, + shaded: { + wall: [205,205,204], + outline: [0,0,0], + floor: [109,116,106], + ceiling: [159,163,157], + }, + pfunk: { + wall: [255,63,78], + outline: [255,246,0], + floor: [255,255,0], + ceiling: [225,118,252], + }, + seapunk: { + wall: [110,255,255], + outline: [146,133,255], + floor: [89,221,255], + ceiling: [139,255,173], + }, + }, + selectPreset: function(e){ + var preset = $(e.currentTarget).data('preset') + if (! this.presets[preset]) return + this.load(this.presets[preset]) + }, + beginBrightness: function(){ this.begin() $(window).one("mouseup", this.finalize.bind(this)) diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js index df2d075..6195ab6 100644 --- a/public/assets/javascripts/ui/reader/MediaPlayer.js +++ b/public/assets/javascripts/ui/reader/MediaPlayer.js @@ -53,8 +53,8 @@ var MediaPlayer = FormView.extend({ this.bind(scenery) this.$el.addClass("active") - this.$name.html(media.title) - this.$description.html(media.description) + this.$name.html( sanitize(media.title) ) + this.$description.html( marked(media.description) ) switch (media.type) { case "image": diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index eb3bd87..15f29c3 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1475,13 +1475,17 @@ input[type="range"]::-webkit-slider-thumb { .color-swatches { margin-top: 10px; } -.color-swatches.defaults { +.presets { margin-top: 10px; } -.color-swatches.defaults span{ +.presets span { font-size:12px; font-weight:500; + display: inline-block; + width: 50%; + float:left; + cursor:pointer; } .color-swatches span { display: inline-block; diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index fdf95a7..1fc4484 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -23,17 +23,17 @@

Preset Styles

-
- +
+ Wireframe - + Shaded - + P.Funk - + SeaPunk
-- cgit v1.2.3-70-g09d2