summaryrefslogtreecommitdiff
path: root/public/assets/javascripts/ui
diff options
context:
space:
mode:
Diffstat (limited to 'public/assets/javascripts/ui')
-rw-r--r--public/assets/javascripts/ui/builder/BuilderInfo.js29
-rw-r--r--public/assets/javascripts/ui/editor/EditorSettings.js28
-rw-r--r--public/assets/javascripts/ui/editor/EditorToolbar.js28
-rw-r--r--public/assets/javascripts/ui/editor/EditorView.js1
-rw-r--r--public/assets/javascripts/ui/editor/LightControl.js1
-rw-r--r--public/assets/javascripts/ui/editor/MediaUpload.js4
-rw-r--r--public/assets/javascripts/ui/editor/MediaViewer.js42
-rw-r--r--public/assets/javascripts/ui/editor/Presets.js30
-rw-r--r--public/assets/javascripts/ui/editor/TextEditor.js5
-rw-r--r--public/assets/javascripts/ui/lib/ModalView.js8
10 files changed, 152 insertions, 24 deletions
diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js
index 0bf2338..67834e7 100644
--- a/public/assets/javascripts/ui/builder/BuilderInfo.js
+++ b/public/assets/javascripts/ui/builder/BuilderInfo.js
@@ -13,6 +13,7 @@ var BuilderInfo = View.extend({
"change [name=units]": 'changeUnits',
"change [name=resolution]": 'changeResolution',
"change [name=viewHeight]": 'changeViewHeight',
+ "click [data-role=destroy-room]": 'destroy',
},
initialize: function(opt){
@@ -25,17 +26,22 @@ var BuilderInfo = View.extend({
this.$units = this.$("[name=units]")
this.$viewHeight = this.$("[name=viewHeight]")
this.$unitName = this.$(".unitName")
+ this.$noSelection = this.$(".no-selection")
+ this.$settings = this.$(".setting")
app.on("builder-pick-room", this.pick.bind(this))
- app.on("builder-destroy-room", this.destroy.bind(this))
+ app.on("builder-destroy-room", this.hide.bind(this))
+ app.on("builder-pick-nothing", this.deselect.bind(this))
},
load: function(data){
- this.$viewHeight.unitVal( data.viewHeight || app.defaults.viewHeight )
+ this.$viewHeight.unitVal( window.viewHeight = data.viewHeight || app.defaults.viewHeight )
this.$units.val( "ft" )
this.$unitName.html( "ft" )
},
toggle: function(state){
+ this.$settings.toggle( !! this.room )
+ this.$noSelection.toggle( ! this.room )
this.$el.toggleClass("active", state)
},
@@ -43,7 +49,8 @@ var BuilderInfo = View.extend({
this.toggle(true)
},
- hide: function(){
+ hide: function(){
+ this.room = null
this.toggle(false)
},
@@ -58,8 +65,22 @@ var BuilderInfo = View.extend({
this.$y.unitVal( room.rect.y.a )
this.show()
},
+
+ deselect: function(){
+ this.room = null
+ this.toggle(true)
+ },
+
+ destroy: function(){
+ UndoStack.push({
+ type: "destroy-room",
+ undo: this.room.copy(),
+ redo: { id: this.room.id },
+ })
+
+ Rooms.remove(this.room)
+ app.tube("builder-destroy-room", this.room)
- destroy: function(room){
this.room = null
this.hide()
},
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index 89040e1..ac361a7 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -15,6 +15,10 @@ var EditorSettings = FormView.extend({
"click [data-role='clone-project']": 'clone',
"click [data-role='clear-project']": 'clear',
"click [data-role='destroy-project']": 'destroy',
+ "click #startText": "setStartPosition",
+ "click #moveText": "confirmStartPosition",
+ "click #confirmText": "setStartPosition",
+ "click #goText": "goToStartPosition",
},
initialize: function(opt){
@@ -26,6 +30,7 @@ var EditorSettings = FormView.extend({
this.$name = this.$("[name=name]")
this.$description = this.$("[name=description]")
this.$privacy = this.$("[name=privacy]")
+ this.$startPoint = this.$("#startpoint")
},
load: function(data){
@@ -33,7 +38,11 @@ var EditorSettings = FormView.extend({
this.parent.data = data
data.rooms && Rooms.deserialize(data.rooms, data.walls)
- data.startPosition && scene.camera.move(data.startPosition)
+ if (data.startPosition) {
+ scene.camera.move(data.startPosition)
+ this.startPosition = data.startPosition
+ this.$startPoint.addClass("confirmed")
+ }
if (data.colors && data.colors.wall) {
this.parent.lightControl.load(data.colors)
@@ -141,6 +150,19 @@ var EditorSettings = FormView.extend({
ErrorModal.alert($errors)
},
+ startPosition: null,
+ setStartPosition: function(){
+ this.$startPoint.addClass("active").removeClass("confirmed")
+ },
+ confirmStartPosition: function(){
+ this.$startPoint.removeClass("active").addClass("confirmed")
+ this.startPosition = app.position(scene.camera)
+ },
+ goToStartPosition: function(){
+ if (! this.startPosition) return
+ scene.camera.move(this.startPosition)
+ },
+
serialize: function(){
var fd = new FormData()
fd.append( "_csrf", this.$csrf.val() )
@@ -148,11 +170,13 @@ var EditorSettings = FormView.extend({
fd.append( "name", this.$name.val() )
fd.append( "description", this.$description.val() )
fd.append( "privacy", this.$privacy.filter(":checked").val() == "private" )
+ fd.append( "viewHeight", window.viewHeight )
fd.append( "rooms", JSON.stringify( Rooms.serialize() ) )
fd.append( "walls", JSON.stringify( Walls.serialize() ) )
fd.append( "colors", JSON.stringify( Walls.colors ) )
fd.append( "media", JSON.stringify( Scenery.serialize() ) )
- fd.append( "startPosition", JSON.stringify( app.position(scene.camera) ) )
+ fd.append( "startPosition", JSON.stringify( this.startPosition || false ) )
+ fd.append( "lastPosition", JSON.stringify( app.position(scene.camera) ) )
if (this.thumbnailIsStale()) {
var thumbnail = map.draw.render()
diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js
index 8a707ec..4f07d1f 100644
--- a/public/assets/javascripts/ui/editor/EditorToolbar.js
+++ b/public/assets/javascripts/ui/editor/EditorToolbar.js
@@ -4,11 +4,11 @@ var EditorToolbar = View.extend({
events: {
"mousedown": 'stopPropagation',
+ "click [data-role='undo']": 'undo',
"click [data-role='toggle-map-view']": 'toggleMap',
"click [data-role='toggle-project-settings']": 'toggleSettings',
"click [data-role='open-media-viewer']": 'openMediaViewer',
"click [data-role='toggle-presets']": 'togglePresets',
-// "click [data-role='destroy-media']": 'destroyMedia',
"click [data-role='toggle-wallpaper-panel']": 'toggleWallpaper',
"click [data-role='toggle-light-control']": 'toggleLightControl',
"click [data-role='toggle-text-editor']": 'toggleTextEditor',
@@ -18,9 +18,22 @@ var EditorToolbar = View.extend({
this.parent = opt.parent
},
- toggleMap: function(){
- var state = ! $("[data-role='toggle-map-view']").hasClass("inuse")
- this.resetControls()
+ undo: function(e){
+ if (e.shiftKey) {
+ var canRedo = UndoStack.redo()
+ console.log("can redo", canRedo)
+ }
+ else {
+ var canUndo = UndoStack.undo()
+ console.log("can undo", canUndo)
+ }
+ },
+
+ toggleMap: function(state){
+ if (typeof state != "boolean") {
+ state = ! $("[data-role='toggle-map-view']").hasClass("inuse")
+ this.resetControls()
+ }
$("[data-role='toggle-map-view']").toggleClass("inuse", state)
map.toggle(state)
$("#minimap").toggleClass("hide", state)
@@ -29,6 +42,7 @@ var EditorToolbar = View.extend({
toggleSettings: function(){
// this.resetMode()
+ this.toggleMap(false)
this.parent.textEditor.hide()
this.parent.presets.hide()
this.parent.lightControl.hide()
@@ -42,6 +56,7 @@ var EditorToolbar = View.extend({
this.parent.mediaUpload.show()
this.resetMode()
this.resetControls()
+ this.toggleMap(false)
},
resetMode: function(){
@@ -55,6 +70,7 @@ var EditorToolbar = View.extend({
resetControls: function(){
$(".inuse").removeClass("inuse")
+ this.toggleMap(false)
this.parent.textEditor.hide()
this.parent.wallpaperPicker.hide()
this.parent.presets.hide()
@@ -98,6 +114,7 @@ var EditorToolbar = View.extend({
this.parent.textEditor.hide()
this.parent.settings.hide()
this.parent.presets.hide()
+ this.toggleMap(false)
this.parent.wallpaperPicker.toggle(state)
},
@@ -110,6 +127,7 @@ var EditorToolbar = View.extend({
this.parent.textEditor.hide()
this.parent.settings.hide()
this.parent.presets.hide()
+ this.toggleMap(false)
this.parent.lightControl.toggle(state)
},
@@ -122,6 +140,7 @@ var EditorToolbar = View.extend({
this.parent.lightControl.hide()
this.parent.settings.hide()
this.parent.presets.hide()
+ this.toggleMap(false)
this.parent.textEditor.toggle(state)
},
@@ -134,6 +153,7 @@ var EditorToolbar = View.extend({
this.parent.textEditor.hide()
this.parent.settings.hide()
this.parent.lightControl.hide()
+ this.toggleMap(false)
this.parent.presets.toggle(state)
},
})
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index 6aff601..ccd6c63 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -41,6 +41,7 @@ var EditorView = View.extend({
$("#map").hide()
this.settings.load(data)
+ this.info.load(data)
},
readyLayout: function(data){
diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js
index 3eb2861..34a5a51 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/LightControl.js
@@ -64,6 +64,7 @@ var LightControl = View.extend({
pick: function(rgb, Lab){
this.labColor = Lab
this.setSwatchColor(this.mode, rgb)
+ // console.log(rgb)
Walls.setColor[ this.mode ](rgb)
},
diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js
index fddfefc..9799f99 100644
--- a/public/assets/javascripts/ui/editor/MediaUpload.js
+++ b/public/assets/javascripts/ui/editor/MediaUpload.js
@@ -55,9 +55,7 @@ var MediaUpload = UploadView.extend({
add: function(media){
console.log(media)
- this.parent.mediaViewer.add(media, this.parent.mediaViewer.$myMedia)
- this.parent.mediaViewer.$deleteMedia.show()
- this.parent.mediaViewer.$noMedia.hide()
+ this.parent.mediaViewer.addUploadedMedia(media)
},
beforeUpload: function(){
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index c18fb49..10819af 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -4,23 +4,30 @@ var MediaViewer = ModalView.extend({
destroyAction: "/api/media/destroy",
usesFileUpload: true,
loaded: false,
-
+ perPage: 12,
+ offset: 0,
+ fixedClose: true,
+
events: {
'mousedown': "stopPropagation",
'click .foundToggle': "foundToggle",
'click .userToggle': "userToggle",
'click #deleteMedia': "deleteArmed",
'click .mediaContainer': "pick",
+ 'click .viewMore': "load",
},
initialize: function(opt){
this.__super__.initialize.call(this)
this.parent = opt.parent
this.$myMedia = this.$(".myMedia")
+ this.$myMediaContainer = this.$(".myMedia > .container")
this.$userToggle = this.$(".userToggle")
this.$foundMedia = this.$(".foundMedia")
+ this.$foundMediaContainer = this.$(".foundMedia > .container")
this.$foundToggle = this.$(".foundToggle")
this.$deleteMedia = this.$("#deleteMedia")
+ this.$viewMore = this.$(".viewMore")
this.$noMedia = this.$(".noMedia")
},
@@ -55,7 +62,7 @@ var MediaViewer = ModalView.extend({
},
load: function(){
- $.get("/api/media/user", this.populate.bind(this))
+ $.get("/api/media/user", { offset: this.offset, limit: this.perPage }, this.populate.bind(this))
},
loadTrending: function(){
@@ -85,7 +92,7 @@ var MediaViewer = ModalView.extend({
width: img.naturalWidth,
height: img.naturalHeight,
}
- this.add(media, this.$foundMedia)
+ this.add(media, this.$foundMediaContainer)
}.bind(this)
img.src = url
if (img.complete && ! loaded) { img.onload() }
@@ -100,22 +107,40 @@ var MediaViewer = ModalView.extend({
},
populate: function(data){
- this.loaded = true
+ var scrollTop = this.loaded ? $('.myMedia .container').height() : 0
if (data && data.length) {
+ if (data.length < this.perPage) {
+ this.$viewMore.hide()
+ }
data.forEach(function(media){
- this.add(media, this.$myMedia)
+ this.add(media, this.$myMediaContainer)
+ this.offset += 1
}.bind(this))
this.$noMedia.hide()
this.$deleteMedia.show()
}
else {
+ this.$viewMore.hide()
this.$noMedia.show()
this.$deleteMedia.hide()
}
- this.__super__.show.call(this)
+ if (this.loaded) {
+ this.$el.delay(300).animate({ scrollTop: scrollTop }, 200)
+ }
+ else {
+ this.loaded = true
+ this.__super__.show.call(this)
+ }
+ },
+
+ addUploadedMedia: function(media){
+ this.parent.mediaViewer.$deleteMedia.show()
+ this.parent.mediaViewer.$noMedia.hide()
+ this.add(media, this.$myMedia, true) // prepend
+ this.offset += 1
},
- add: function(media, $container){
+ add: function(media, $container, prepend){
var image = new Image ()
var $span = $("<span>")
$span.addClass("mediaContainer")
@@ -142,7 +167,8 @@ var MediaViewer = ModalView.extend({
$span.data("media", media)
$span.append(image)
- $container.prepend($span)
+ if (prepend) $container.prepend($span)
+ else $container.append($span)
},
deleteIsArmed: false,
diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js
index a7e92b6..1e70aa2 100644
--- a/public/assets/javascripts/ui/editor/Presets.js
+++ b/public/assets/javascripts/ui/editor/Presets.js
@@ -2,8 +2,26 @@ var Presets = View.extend({
el: "#presets",
events: {
+ "mousedown": "stopPropagation",
"click .presets span": "selectPreset",
+ "click .swatches span": "selectColor",
},
+
+ colors: [
+ [255,94,58],
+ [255,149,0],
+ [255,219,76],
+ [76,217,100],
+ [52,170,220],
+ [29,98,240],
+ [198,68,252],
+ [0,0,0],
+ [74,74,74],
+ [125,126,127],
+ [209,211,212],
+ [235,235,235],
+ [255,255,255],
+ ],
presets: {
wireframe: {
@@ -34,6 +52,13 @@ var Presets = View.extend({
initialize: function(opt){
this.parent = opt.parent
+ this.$colors = this.$(".colors")
+ this.colors.forEach(function(color){
+ var $swatch = $("<span>")
+ $swatch.css("background-color","rgb(" + color + ")")
+ $swatch.data('color', color)
+ this.$colors.append($swatch)
+ }.bind(this))
},
toggle: function(state){
@@ -56,4 +81,9 @@ var Presets = View.extend({
$(e.currentTarget).addClass('active')
},
+ selectColor: function(e){
+ var preset = $(e.currentTarget).data('color')
+ console.log(preset)
+ },
+
}) \ No newline at end of file
diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js
index c8879b3..b559ba5 100644
--- a/public/assets/javascripts/ui/editor/TextEditor.js
+++ b/public/assets/javascripts/ui/editor/TextEditor.js
@@ -28,16 +28,15 @@ var TextEditor = FormView.extend({
},
toggle: function(state){
- $("#keyhint").fadeOut(200)
-
this.$el.toggleClass("active", state)
if (state) {
+ $("#keyhint").fadeOut(200)
Scenery.nextMedia = {
type: 'text',
width: 600,
height: 450,
scale: 0.5,
- font: { family: 'Lato', size: 12, align: 'left' },
+ font: { family: 'Lato', size: 24, align: 'left', color: "#000" },
}
this.createMode(true)
}
diff --git a/public/assets/javascripts/ui/lib/ModalView.js b/public/assets/javascripts/ui/lib/ModalView.js
index d9b518a..1c41861 100644
--- a/public/assets/javascripts/ui/lib/ModalView.js
+++ b/public/assets/javascripts/ui/lib/ModalView.js
@@ -18,6 +18,10 @@ var ModalView = View.extend({
if (! this.usesFileUpload) {
$(".fileUpload").removeClass("active")
}
+ if (this.fixedClose) {
+ $("#fixed_close").addClass("active")
+ $("#fixed_close").bind("click", this.hide.bind(this))
+ }
this.$el.addClass("active")
$("body").addClass("noOverflow")
@@ -25,6 +29,10 @@ var ModalView = View.extend({
hide: function(){
// $(".mediaDrawer, .room1").removeClass("active editing");
+ if (this.fixedClose) {
+ $("#fixed_close").removeClass("active")
+ $("#fixed_close").unbind("click", this.hide.bind(this))
+ }
this.$el.removeClass("active");
$("body").removeClass("noOverflow");
},
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-20 03:03:04 +0000