From 24614e0764ec4655ded8b66ba6832bf8cd3cda1d Mon Sep 17 00:00:00 2001 From: ryderr Date: Mon, 29 Sep 2014 18:56:38 -0400 Subject: css --- views/controls/editor/light-control.ejs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'views/controls') diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index 8b133a5..b90b646 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -3,7 +3,7 @@
-

Brightness Control

+

Luminance Control

-- cgit v1.2.3-70-g09d2 From c0c11162c5124f5452fe162b31d708be5ec40fcc Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 30 Sep 2014 12:01:23 -0400 Subject: get rid of resize icon in toolbar --- views/controls/editor/toolbar.ejs | 2 ++ 1 file changed, 2 insertions(+) (limited to 'views/controls') diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs index 4abf780..d721c07 100644 --- a/views/controls/editor/toolbar.ejs +++ b/views/controls/editor/toolbar.ejs @@ -3,10 +3,12 @@ data-role='open-media-viewer' data-info="add media" class="icon-ios7-photos-outline"> + Date: Tue, 30 Sep 2014 12:32:56 -0400 Subject: labeling some stuff --- public/assets/stylesheets/app.css | 30 +++++++++++++++++------------- views/controls/editor/light-control.ejs | 2 +- views/controls/editor/media-editor.ejs | 1 + views/controls/editor/settings.ejs | 1 + 4 files changed, 20 insertions(+), 14 deletions(-) (limited to 'views/controls') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 3748401..6929cef 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1247,18 +1247,13 @@ iframe.embed { .lightcontrol { margin-top: 13%; right: 80px; - padding: 20px; + padding: 13px 20px 20px 20px; -webkit-transform: translateX(400px); -webkit-transition: -webkit-transform 0.2s ease-in-out; transform: translateX(400px); transition: -webkit-transform 0.2s ease-in-out; } -.lightcontrol h4 { - font-weight: 600; - font-size: 12px; - line-height: 0; - margin-top: 15px; -} + .lightcontrol.active { -webkit-transform: translateX(0px); transform: translateX(0px); @@ -1278,12 +1273,14 @@ input[type=range] { } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; - background-color: #000; - width: 10px; - height: 10px; + background-color: white; + width: 15px; + height: 15px; border-radius:10px; cursor:pointer; + border:3px solid #000; } + #color-picker { position: relative; } @@ -1353,14 +1350,21 @@ span:hover .swatch { left: 10px; } +.vvbox h4 { + font-weight: 600; + margin-bottom: 10px; + border-bottom: 1px solid #999; + padding-bottom: 6px; +} + .settings { - padding: 20px; + padding: 10px 20px 20px 20px; bottom: 20px; right: 10px; font-size: 12px; - -webkit-transform: translateY(400px); + -webkit-transform: translateY(450px); -webkit-transition: -webkit-transform 0.2s ease-in-out; - transform: translateY(400px); + transform: translateY(450px); transition: -webkit-transform 0.2s ease-in-out; } diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index b90b646..410aaff 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -1,9 +1,9 @@
+

Edit Room Colors

-

Luminance Control

diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs index 000e8db..8f2c1c8 100644 --- a/views/controls/editor/media-editor.ejs +++ b/views/controls/editor/media-editor.ejs @@ -1,4 +1,5 @@
+

Media Settings

diff --git a/views/controls/editor/settings.ejs b/views/controls/editor/settings.ejs index ed587fa..ad62b55 100644 --- a/views/controls/editor/settings.ejs +++ b/views/controls/editor/settings.ejs @@ -1,4 +1,5 @@
+

Room Settings

-- cgit v1.2.3-70-g09d2 From ecf6606d7ac31d53fdb2bce8ade3eababc871dbd Mon Sep 17 00:00:00 2001 From: ryderr Date: Tue, 30 Sep 2014 14:29:26 -0400 Subject: reset --- public/assets/stylesheets/app.css | 38 ++++++++++++++++++++++++++++++------- views/controls/editor/wallpaper.ejs | 2 +- views/editor.ejs | 1 + 3 files changed, 33 insertions(+), 8 deletions(-) (limited to 'views/controls') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 70cf498..869e5ee 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -597,7 +597,7 @@ iframe.embed { -webkit-box-sizing: content-box; box-sizing: content-box; } -.destroyActive .mx-scene, .destroyActive .mx-object3d.image { +.destroyActive .mx-scene, .destroyActive .mx-object3d.image, .menu span.inuse[data-role="destroy-media"] { cursor:url(/assets/img/delete-cursor.png), auto; } @@ -1127,7 +1127,19 @@ iframe.embed { .mediaContainer img, .mediaContainer video { max-width:100%; } - +#reset { + position: fixed; + bottom: 160px; + left: 20px; + border-bottom: 1px solid black; + padding-bottom: 3px; + z-index:3; +} +#reset:hover { + cursor:pointer; + background:black; + color:white; +} #minimap { position: fixed; bottom: 20px; @@ -1168,6 +1180,7 @@ iframe.embed { -webkit-transform: translateX(400px); transition: transform 0.1s ease-in-out; transform: translateX(400px); + padding: 5px 5px 9px 5px; } .wallpaper.active { display:inline-block; @@ -1192,13 +1205,13 @@ iframe.embed { } .wallpaper .swatches { width: 100%; - border-bottom: 1px solid black; min-height: 30px; } -.wallpaper { - font-size: 14px; - font-weight: 300; + +.wallpaperUpload { + border: 1px solid; } + .wallpaper label { position: relative; top: -6px; @@ -1206,6 +1219,12 @@ iframe.embed { } .wallpaper form { padding: 2px 0 0 0; + font-size: 14px; + font-weight: 300; +} +.wallpaper form:hover { + background:black; + color:white; } .wallpaper .icon-ios7-upload-outline { font-size: 26px; @@ -1367,7 +1386,7 @@ span:hover .swatch { } .settings { - padding: 10px 20px 20px 20px; + padding: 10px 12px 12px 12px; bottom: 20px; right: 10px; font-size: 12px; @@ -1872,6 +1891,11 @@ a[data-role="forgot-password"] { padding:5px 0; display: inline-block; } + +.vvbox .txt { + padding:5px; +} + .aboutRoom h1 a{ text-decoration: none; font-style: italic; diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs index 208dfff..95cf827 100644 --- a/views/controls/editor/wallpaper.ejs +++ b/views/controls/editor/wallpaper.ejs @@ -1,5 +1,5 @@
- +

Add Wallpaper

Add custom wallpaper to walls. Begin by uploading a pattern. Or try this one -> diff --git a/views/editor.ejs b/views/editor.ejs index 9950878..d2823fa 100755 --- a/views/editor.ejs +++ b/views/editor.ejs @@ -24,6 +24,7 @@
+
Reset Position
-- cgit v1.2.3-70-g09d2 From d42fb4d07ad373d4c2523a11fbd535481f1ce265 Mon Sep 17 00:00:00 2001 From: ryderr Date: Tue, 30 Sep 2014 14:57:58 -0400 Subject: delete thing --- public/assets/stylesheets/app.css | 41 +++++++++++++++++++++------------- views/controls/editor/media-drawer.ejs | 2 +- views/controls/editor/media-editor.ejs | 2 +- views/controls/editor/signed-out.ejs | 2 +- views/controls/editor/toolbar.ejs | 2 +- views/controls/reader/about-room.ejs | 2 +- views/editor.ejs | 1 - 7 files changed, 31 insertions(+), 21 deletions(-) (limited to 'views/controls') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 869e5ee..3464b5c 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -402,16 +402,7 @@ iframe.embed { height: 50vh; float: left; } -.editProfile { - margin-right: 10px; - color: black; - font-weight: 100; - text-decoration: none; - padding: 50px 0 100px 0; -} -.editProfile span { - vertical-align: middle; -} + .topLinks { float: right; z-index: 3; @@ -425,7 +416,7 @@ iframe.embed { padding: 20px 8px; color: black; font-weight: 300; - float:right; + float:left; text-decoration: none; border-bottom:1px solid transparent; } @@ -445,6 +436,10 @@ iframe.embed { float: left; } +.profilepage .bio a:hover { + text-decoration:underline; +} + .profilepage .bio.one { background-color: lightyellow; } @@ -902,7 +897,23 @@ iframe.embed { background-image:url(https://s3.amazonaws.com/luckyplop/735c46b0268cd511a22c37bc0c11e9f60c4459b2.png)!important; cursor:move; } - +#deleteMedia:after { + content:"delete media?"; +} +.deleteArmed #deleteMedia:after { + content:"click media you want to delete"; +} +.deleteArmed #deleteMedia:before { + content: "X"; + background: black; + width: 23px; + height: 23px; + position: absolute; + margin-left: -25px; + margin-top: -4px; + font-size: 19px; + +} .deleteActive .mx-object3d.image:after { content: "\e68f"; font-family: 'ionicons'; @@ -1936,17 +1947,17 @@ a[data-role="forgot-password"] { .share h2 { font-weight: 300; font-size: 18px; - text-align: right; } .share a{ color: #017cfe; text-decoration: none; - margin-left: 6px; font-size: 13px; font-weight: 600; } - +.share a:nth-child(3){ + margin-left:4px; +} .share a:hover{ text-decoration:underline; } diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index d73a3ef..dbab237 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -17,7 +17,7 @@
X

Your MediaFound Media


-

delete media?

+

diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs index 8f2c1c8..ef46e6f 100644 --- a/views/controls/editor/media-editor.ejs +++ b/views/controls/editor/media-editor.ejs @@ -52,6 +52,6 @@
diff --git a/views/controls/editor/signed-out.ejs b/views/controls/editor/signed-out.ejs index 20e3715..118fb7c 100644 --- a/views/controls/editor/signed-out.ejs +++ b/views/controls/editor/signed-out.ejs @@ -8,7 +8,7 @@
diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs index d721c07..1c4c26f 100644 --- a/views/controls/editor/toolbar.ejs +++ b/views/controls/editor/toolbar.ejs @@ -8,11 +8,11 @@ data-role='resize-media' data-info="resize media" class="icon-arrow-resize"> - --> + --> diff --git a/views/editor.ejs b/views/editor.ejs index d2823fa..9950878 100755 --- a/views/editor.ejs +++ b/views/editor.ejs @@ -24,7 +24,6 @@
-
Reset Position
-- cgit v1.2.3-70-g09d2 From f165d48992a8f89f627904d9d56da443d52a72b2 Mon Sep 17 00:00:00 2001 From: ryderr Date: Tue, 30 Sep 2014 17:59:44 -0400 Subject: better logo hovering --- public/assets/stylesheets/app.css | 16 +++++++++--- views/controls/reader/about-room.ejs | 8 +++--- views/partials/header.ejs | 48 +++++++++++++++++++++++++++++++++++- 3 files changed, 63 insertions(+), 9 deletions(-) (limited to 'views/controls') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 2cf65c0..16ad216 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -681,15 +681,19 @@ iframe.embed { } .logo { float:left; - padding:7px 0 0 10px; + padding:6px 8px 9px 8px; z-index:4; position:relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; } + .logo:hover { - -webkit-filter:invert(30%); + background:black; +} +.logo:hover svg { + fill:white; } .profile{ padding:8px; @@ -1854,7 +1858,7 @@ a[data-role="forgot-password"] { .aboutRoom { width: 250px; background: rgba(255,255,255,0.95); - padding: 20px; + padding: 2px 8px 8px 8px; position: fixed; bottom: 10px; left: 10px; @@ -1874,6 +1878,10 @@ a[data-role="forgot-password"] { padding:5px; } +.aboutRoom.vvbox .txt { + padding: 0; +} + .aboutRoom h1 a{ text-decoration: none; font-style: italic; @@ -1907,7 +1915,7 @@ a[data-role="forgot-password"] { right: 0px; bottom: 10px; padding-right:10px; - background:rgba(255,255,255,0.95); + background:rgba(255,255,255,0.1); z-index: 2; } diff --git a/views/controls/reader/about-room.ejs b/views/controls/reader/about-room.ejs index 6a6effb..a33e318 100644 --- a/views/controls/reader/about-room.ejs +++ b/views/controls/reader/about-room.ejs @@ -4,14 +4,14 @@ [[- author ]] [[ if (description) { ]] - [[- description ]] + [[- description ]]
[[ } ]] -

- Last modified [[- date ]] + + Last modified [[- date ]] + [[ if (canEdit) { ]] Edit Room [[ } ]] -

\ No newline at end of file -- cgit v1.2.3-70-g09d2 From df7653219ecef9cabfdb475946d86b6b0e797274 Mon Sep 17 00:00:00 2001 From: ryderr Date: Wed, 1 Oct 2014 16:47:56 -0400 Subject: preset styles --- public/assets/stylesheets/app.css | 19 ++++++++++++++++--- views/controls/editor/light-control.ejs | 18 +++++++++++++++++- 2 files changed, 33 insertions(+), 4 deletions(-) (limited to 'views/controls') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index d672465..5c76560 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1351,7 +1351,7 @@ iframe.embed { /* COLOR PICKER */ .lightcontrol { - margin-top: 13%; + margin-top: 8%; right: 80px; padding: 13px 20px 20px 20px; -webkit-transform: translateX(400px); @@ -1418,12 +1418,27 @@ input[type="range"]::-webkit-slider-thumb { .color-swatches { margin-top: 10px; } +.color-swatches.defaults { + margin-top: 10px; +} .color-swatches span { display: inline-block; width: 50%; float:left; cursor:pointer; + font-size: 14px; + font-weight: 300; +} +.vvbox .color-swatches ~ h4 { + margin-bottom: -3px; + border-bottom: 1px solid #ddd; + padding-bottom: 6px; + padding-top: 11px; + display: inline-block; + width: 100%; + color: #555; } + .color-swatches span:nth-child(1),.color-swatches span:nth-child(2){ margin-bottom:5px; } @@ -1439,8 +1454,6 @@ input[type="range"]::-webkit-slider-thumb { } .color-swatches label { - font-size: 14px; - font-weight: 300; position: relative; padding-left: 5px; display: inline-block; diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index 410aaff..37a243c 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -22,7 +22,23 @@
- +

Preset Styles

+
+ + Wireframe + + + Shaded + + + P.Funk + + + SeaPunk + +
+ +
diff --git a/views/controls/editor/text-editor.ejs b/views/controls/editor/text-editor.ejs new file mode 100644 index 0000000..205fbdf --- /dev/null +++ b/views/controls/editor/text-editor.ejs @@ -0,0 +1,32 @@ +
+

Edit Text

+ +
+ + +
+ +
+ +
+ + +
+ + \ No newline at end of file diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs index 63df73c..92807e1 100644 --- a/views/controls/editor/toolbar.ejs +++ b/views/controls/editor/toolbar.ejs @@ -12,9 +12,8 @@ data-role='destroy-media' data-info="delete media" class="icon-ios7-trash-outline"> - --> @@ -26,6 +25,13 @@ data-role='toggle-light-control' data-info="edit room colors" class="icon-ios7-sunny-outline"> + +[[ if (user.username == "test12343") { ]] + +[[ } ]] diff --git a/views/partials/header.ejs b/views/partials/header.ejs index 88d832d..065385d 100644 --- a/views/partials/header.ejs +++ b/views/partials/header.ejs @@ -67,7 +67,10 @@ [[ } else if (! profile) { ]] Profile [[ } ]] + + [[ if (opt.editing) { ]] + [[ } ]] [[ } else { ]] diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 2e2d8b6..1ce180a 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -100,6 +100,7 @@ + -- cgit v1.2.3-70-g09d2 From fe5ac8ac5921bcc47edd3cd7748414f5ecba0a9f Mon Sep 17 00:00:00 2001 From: ryderr Date: Thu, 2 Oct 2014 13:42:22 -0400 Subject: collaborators touchup --- package.json | 3 ++- public/assets/stylesheets/app.css | 17 +++++++++++++---- views/controls/editor/collaborators.ejs | 10 ++++++---- 3 files changed, 21 insertions(+), 9 deletions(-) (limited to 'views/controls') diff --git a/package.json b/package.json index b4ac400..adefb82 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,8 @@ "multer": "~0.1.0", "body-parser": "1.3.0", "marked": "~0.3.2", - "emailjs": "~0.3.6" + "emailjs": "~0.3.6", + "intro.js": "^0.9.0" }, "devDependencies": { "grunt": "~0.4.1", diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 63d5a9f..3edad4f 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -2087,14 +2087,22 @@ a[data-role="forgot-password"] { /* COLLABORATORS */ -.collaborators > div { - width: 600px; +.collaborators .rap { + display: table; + width: 100%; + height: 100%; +} + +.collaborators .rap .holder .inner { + width: 480px; margin: 0 auto; text-align: left; background: white; padding: 10px; margin: 20px auto; +position: relative; } + .collaborators button { width: auto; position: relative; @@ -2121,14 +2129,15 @@ a[data-role="forgot-password"] { border-color: black; } .collaborators p { - margin: 20px 0; + margin: 10px 0 20px; + font-weight: 300; } .collaborators form input[type=text] { font-size: 16px; width: 300px; } .collaborators h2 { - margin: 20px auto 10px; + margin: 20px auto 0; } #collaborator-list { margin-top: 20px; diff --git a/views/controls/editor/collaborators.ejs b/views/controls/editor/collaborators.ejs index 69e5b64..b658bf6 100644 --- a/views/controls/editor/collaborators.ejs +++ b/views/controls/editor/collaborators.ejs @@ -1,7 +1,9 @@
X - -
+ +
+
+

Collaborators

@@ -21,9 +23,9 @@

-
- +
+
+ -- cgit v1.2.3-70-g09d2 From dd6b2cc2cdd97b6163d115e5415736bccbffa831 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 15 Oct 2014 12:36:52 -0400 Subject: get rid of menu options --- public/assets/javascripts/rectangles/engine/map/ui_editor.js | 5 +++-- public/assets/javascripts/ui/editor/EditorToolbar.js | 10 +++++----- public/assets/javascripts/ui/editor/HelpCursor.js | 8 ++++++-- views/controls/builder/info.ejs | 5 ++++- views/controls/editor/light-control.ejs | 7 ++++++- views/controls/editor/presets.ejs | 12 ++++-------- views/controls/editor/toolbar.ejs | 4 ++++ views/controls/editor/wallpaper.ejs | 3 +++ 8 files changed, 35 insertions(+), 19 deletions(-) (limited to 'views/controls') diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index 072ff7e..44e416d 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -213,7 +213,8 @@ Map.UI.Editor = function(map){ if (intersects.length) { wheelState = wheelState || intersects[0].copy() - intersects[0].height = clamp( ~~(intersects[0].height - deltaY), height_min, height_max ) + intersects[0].height = clamp( ~~(intersects[0].height + deltaY * 2), height_min, height_max ) + app.tube("builder-pick-room", intersects[0]) clearTimeout(wheelTimeout) wheelTimeout = setTimeout(function(){ @@ -224,7 +225,7 @@ Map.UI.Editor = function(map){ }) Rooms.rebuild() wheelState = null - }, 500) + }, 250) } else { map.set_zoom(map.zoom_exponent - deltaY/20) diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 4f07d1f..9c2f3d3 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -30,11 +30,11 @@ var EditorToolbar = View.extend({ }, 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) +// 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) this.parent.info.toggle(state) diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index 842e871..b2f411d 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -3,8 +3,12 @@ var HelpCursor = View.extend({ el: "#helpCursor", messages: { - start: "Welcome to Vvalls!", - move: "Use the up and down keys to move around. Use left and right to pivot. WASD works too.", + start: "Welcome to Vvalls! Click one of the tools at right to learn how it works.", + media: "This is where you pick media to go on the walls. You can upload media, paste links, or use some of the found media.", + presets: "These presets will affect on all the walls. Click some of them to see the walls change.", + wallpaper: "Drag the wallpaper onto the walls, floor, and ceiling.", + colors: "", + settings: "This is where you publish your project.", }, shown: {}, diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs index 205938f..54bb38e 100644 --- a/views/controls/builder/info.ejs +++ b/views/controls/builder/info.ejs @@ -2,7 +2,10 @@

Map Editor

- Click a room to select it, or click and drag to make a new room. + Click and drag to make a new room. + Click a room to select it. +

+ Press ESC to toggle the map.
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index 8b20464..4604a7a 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -1,6 +1,11 @@

Edit Room Colors

-
+ +

Preset Colors

+
+
+ +
diff --git a/views/controls/editor/presets.ejs b/views/controls/editor/presets.ejs index 70e48e3..8dd1986 100644 --- a/views/controls/editor/presets.ejs +++ b/views/controls/editor/presets.ejs @@ -1,18 +1,14 @@
-

Preset Colors

-
-
-

Preset Styles

- - Wireframe + + Inverse Shaded - - Inverse + + Wireframe P.Funk diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs index 57a98b9..1bb31b8 100644 --- a/views/controls/editor/toolbar.ejs +++ b/views/controls/editor/toolbar.ejs @@ -1,9 +1,11 @@ +
+
-- cgit v1.2.3-70-g09d2 From 7089dded0589d45b00a6d4f2a3d1eb2adcf11d1b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 15 Oct 2014 12:56:50 -0400 Subject: more help text --- .../assets/javascripts/ui/editor/EditorSettings.js | 3 ++ public/assets/javascripts/ui/editor/HelpCursor.js | 6 ++-- .../assets/javascripts/ui/editor/LightControl.js | 32 +++++++++++++++++++--- public/assets/javascripts/ui/editor/MediaViewer.js | 2 ++ public/assets/javascripts/ui/editor/Presets.js | 24 +--------------- .../javascripts/ui/editor/WallpaperPicker.js | 1 + public/assets/stylesheets/app.css | 7 +++-- views/controls/builder/info.ejs | 2 +- views/controls/editor/light-control.ejs | 1 - 9 files changed, 43 insertions(+), 35 deletions(-) (limited to 'views/controls') diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index ac361a7..e47739b 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -121,6 +121,9 @@ var EditorSettings = FormView.extend({ $(".inuse").removeClass("inuse") $("[data-role='toggle-project-settings']").toggleClass("inuse", state) + if (state) { + this.parent.cursor.show("settings") + } }, enterSubmit: function (e) { diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index b2f411d..4a6e616 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -7,8 +7,8 @@ var HelpCursor = View.extend({ media: "This is where you pick media to go on the walls. You can upload media, paste links, or use some of the found media.", presets: "These presets will affect on all the walls. Click some of them to see the walls change.", wallpaper: "Drag the wallpaper onto the walls, floor, and ceiling.", - colors: "", - settings: "This is where you publish your project.", + colors: "Use these colors to change the color of the walls, floor, and ceiling.", + settings: "This is where you publish your project. Give it a name, hit save, and you'll have a URL you can share with your friends.", }, shown: {}, @@ -21,7 +21,7 @@ var HelpCursor = View.extend({ }, show: function(name){ - if (name) this.showMessage(name) + this.showMessage(name) this.$el.show() }, diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index 34a5a51..bb4454a 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -5,14 +5,28 @@ var LightControl = View.extend({ events: { "mousedown": "stopPropagation", "click .color-swatches span": "select", - "input #shadow-control": "updateShadow", "mousedown #brightness-control": "beginBrightness", "input #brightness-control": "updateBrightness", - "input #outline-hue": "updateShadow", - "input #wall-hue": "updateShadow", }, + + 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], + ], - initialize: function(){ + initialize: function(opt){ + this.parent = opt.parent this.colorPicker = new LabColorPicker(this, 180, 180) this.$("#color-picker").append( this.colorPicker.canvas ) @@ -27,6 +41,15 @@ var LightControl = View.extend({ ceiling: this.$("#ceiling-color"), } this.$brightnessControl = this.$("#brightness-control") + + this.$colors = this.$(".colors") + this.colors.forEach(function(color){ + var $swatch = $("") + $swatch.css("background-color","rgb(" + color + ")") + $swatch.data('color', color) + this.$colors.append($swatch) + }.bind(this)) + }, modes: [ "wall", "outline", "floor", "ceiling" ], @@ -54,6 +77,7 @@ var LightControl = View.extend({ }, show: function(){ + this.parent.cursor.show("colors") this.toggle(true) }, diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index b270be5..df77fb1 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -68,6 +68,7 @@ var MediaViewer = ModalView.extend({ this.loadTrending() } else { + this.parent.cursor.show("media") this.__super__.show.call(this) } }, @@ -146,6 +147,7 @@ var MediaViewer = ModalView.extend({ } else { this.loaded = true + this.parent.cursor.show("media") this.__super__.show.call(this) } }, diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index 1e70aa2..6222e33 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -7,22 +7,6 @@ var Presets = View.extend({ "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: { wall: [255,255,255], @@ -52,13 +36,6 @@ var Presets = View.extend({ initialize: function(opt){ this.parent = opt.parent - this.$colors = this.$(".colors") - this.colors.forEach(function(color){ - var $swatch = $("") - $swatch.css("background-color","rgb(" + color + ")") - $swatch.data('color', color) - this.$colors.append($swatch) - }.bind(this)) }, toggle: function(state){ @@ -66,6 +43,7 @@ var Presets = View.extend({ }, show: function(){ + this.parent.cursor.show("presets") this.toggle(true) }, diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 6bf2542..541ab31 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -28,6 +28,7 @@ var WallpaperPicker = UploadView.extend({ loaded: false, show: function(){ if (! this.loaded) { + this.parent.cursor.show("wallpaper") this.load() } else { diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 0140dc6..250ae67 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1485,10 +1485,11 @@ border-left: 1px solid black; padding-bottom: 6px; } -#presets .colors { +.vvbox .colors { + max-width: 170px; margin-bottom: 5px; } -#presets .colors span { +.vvbox .colors span { display: inline-block; font-size: 0; width: 20px; @@ -1498,7 +1499,7 @@ border-left: 1px solid black; cursor: pointer; transition: transform 0.2s; } -#presets .colors span:hover { +.vvbox .colors span:hover { transform: translateX(3px) translateY(-3px); } diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs index 54bb38e..2762207 100644 --- a/views/controls/builder/info.ejs +++ b/views/controls/builder/info.ejs @@ -3,7 +3,7 @@
Click and drag to make a new room. - Click a room to select it. + Click a room to select, move or resize it.

Press ESC to toggle the map.
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index 4604a7a..99d68f5 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -1,7 +1,6 @@

Edit Room Colors

-

Preset Colors

-- cgit v1.2.3-70-g09d2 From 513a272520222784d67dc22c1ac833aa47a9c844 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Thu, 16 Oct 2014 00:58:28 -0400 Subject: rename light control to color control --- .../javascripts/mx/extensions/mx.movements.js | 4 +- .../javascripts/rectangles/engine/scenery/undo.js | 2 +- .../javascripts/ui/builder/BuilderSettings.js | 2 +- .../assets/javascripts/ui/builder/BuilderView.js | 2 +- .../assets/javascripts/ui/editor/ColorControl.js | 305 +++++++++++++++++++++ .../assets/javascripts/ui/editor/EditorSettings.js | 4 +- .../assets/javascripts/ui/editor/EditorToolbar.js | 20 +- public/assets/javascripts/ui/editor/EditorView.js | 2 +- .../assets/javascripts/ui/editor/LightControl.js | 305 --------------------- public/assets/javascripts/ui/editor/Presets.js | 2 +- public/assets/stylesheets/app.css | 6 +- views/controls/editor/color-control.ejs | 28 ++ views/controls/editor/light-control.ejs | 28 -- views/controls/editor/toolbar.ejs | 2 +- views/editor.ejs | 2 +- views/partials/scripts.ejs | 2 +- 16 files changed, 358 insertions(+), 358 deletions(-) create mode 100644 public/assets/javascripts/ui/editor/ColorControl.js delete mode 100644 public/assets/javascripts/ui/editor/LightControl.js create mode 100644 views/controls/editor/color-control.ejs delete mode 100644 views/controls/editor/light-control.ejs (limited to 'views/controls') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 40e786d..c2a2473 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -131,8 +131,8 @@ MX.Movements = function (cam) { app.controller.mediaViewer.hide() $(".inuse").removeClass("inuse") } - else if (app.controller.lightControl.$el.hasClass('active')) { - app.controller.lightControl.hide() + else if (app.controller.colorControl.$el.hasClass('active')) { + app.controller.colorControl.hide() $(".inuse").removeClass("inuse") } else if (app.controller.wallpaperPicker.$el.hasClass('active')) { diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js index bee8c49..ff4f911 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/undo.js +++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js @@ -122,7 +122,7 @@ type: "update-colors", undo: function(state){ Walls.setColor[ state.mode ]( state.rgb ) - app.router.editorView.lightControl.setSwatchColor( state.mode, state.rgb ) + app.router.editorView.colorControl.setSwatchColor( state.mode, state.rgb ) Minotaur.watch( app.router.editorView.settings ) }, diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index fe67e9b..c8c8880 100644 --- a/public/assets/javascripts/ui/builder/BuilderSettings.js +++ b/public/assets/javascripts/ui/builder/BuilderSettings.js @@ -30,7 +30,7 @@ var BuilderSettings = FormView.extend({ this.$id.val(data._id) this.$name.val(data.name) - this.parent.lightControl.loadDefaults() + this.parent.colorControl.loadDefaults() data.rooms && Rooms.deserialize(data.rooms) data.startPosition && scene.camera.move(data.startPosition) diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js index a89111f..735274e 100644 --- a/public/assets/javascripts/ui/builder/BuilderView.js +++ b/public/assets/javascripts/ui/builder/BuilderView.js @@ -11,7 +11,7 @@ var BuilderView = View.extend({ this.info = new BuilderInfo ({ parent: this }) this.toolbar = new BuilderToolbar ({ parent: this }) this.settings = new BuilderSettings ({ parent: this }) - this.lightControl = new LightControl ({ parent: this }) + this.colorControl = new ColorControl ({ parent: this }) }, load: function(name){ diff --git a/public/assets/javascripts/ui/editor/ColorControl.js b/public/assets/javascripts/ui/editor/ColorControl.js new file mode 100644 index 0000000..26358f1 --- /dev/null +++ b/public/assets/javascripts/ui/editor/ColorControl.js @@ -0,0 +1,305 @@ + +var ColorControl = View.extend({ + el: ".colorcontrol", + + events: { + "mousedown": "stopPropagation", + "click .color-swatches span": "select", + "mousedown #brightness-control": "beginBrightness", + "input #brightness-control": "updateBrightness", + }, + + 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], + ], + + initialize: function(opt){ + this.parent = opt.parent + + this.colorPicker = new LabColorPicker(this, 180, 180) + this.$("#color-picker").append( this.colorPicker.canvas ) + this.$("#color-picker").append( this.colorPicker.cursor ) + + this.$swatches = this.$(".swatch") + this.$labels = this.$(".swatch + label") + this.$swatch = { + wall: this.$("#wall-color"), + outline: this.$("#outline-color"), + floor: this.$("#floor-color"), + ceiling: this.$("#ceiling-color"), + } + this.$brightnessControl = this.$("#brightness-control") + + this.$colors = this.$(".colors") + this.colors.forEach(function(color){ + var $swatch = $("") + $swatch.css("background-color","rgb(" + color + ")") + $swatch.data('color', color) + this.$colors.append($swatch) + }.bind(this)) + + }, + + modes: [ "wall", "outline", "floor", "ceiling" ], + + load: function(data){ + this.modes.forEach(function(mode){ + Walls.setColor[mode](data[mode]) + this.$swatch[ mode ].css("background-color", rgb_string(data[mode])) + }.bind(this)) + this.setMode("wall") + }, + + loadDefaults: function(){ + var colors = { + wall: app.defaults.colors.wall.slice(), + outline: app.defaults.colors.outline.slice(), + floor: app.defaults.colors.floor.slice(), + ceiling: app.defaults.colors.ceiling.slice(), + } + this.load(colors) + }, + + toggle: function(state){ + this.$el.toggleClass("active", state); + }, + + show: function(){ + this.parent.cursor.message("colors") + this.toggle(true) + }, + + hide: function(){ + this.toggle(false) + }, + + pick: function(rgb, Lab){ + this.labColor = Lab + this.setSwatchColor(this.mode, rgb) + // console.log(rgb) + Walls.setColor[ this.mode ](rgb) + }, + + setSwatchColor: function(mode, rgb) { + this.$swatch[ mode ].css("background-color", rgb_string(rgb)) + }, + + initialState: null, + + begin: function(){ + this.initialState = this.serialize() + }, + + serialize: function(){ + return { + mode: this.mode, + rgb: Walls.colors[ this.mode ] + } + }, + + finalize: function(){ + if (! this.initialState) { return } + UndoStack.push({ + type: 'update-colors', + undo: this.initialState, + redo: this.serialize(), + }) + + this.initialState = null + + // TODO: watch individual wall object here + Minotaur.watch( app.router.editorView.settings ) + }, + + setMode: function (mode) { + var color, brightness + this.mode = mode + this.$(".active").removeClass("active") + this.$swatch[ mode ].parent().addClass("active") + color = Walls.colors[ mode ] + + this.labColor = this.colorPicker.load(color) + this.$brightnessControl.val( this.labColor[0] ) + }, + + select: function(e){ + var mode = $('.swatch', e.currentTarget).data('mode') + this.setMode(mode) + }, + + beginBrightness: function(){ + this.begin() + $(window).one("mouseup", this.finalize.bind(this)) + }, + + updateBrightness: function(){ + this.labColor[0] = parseFloat( this.$brightnessControl.val() ) + var rgb = this.colorPicker.setLab( this.labColor ) + this.pick(rgb, this.labColor) + }, + +}) + +var LabColorPicker = function (parent, w, h) { + var base = this + var canvas = this.canvas = document.createElement('canvas') + var ctx = this.ctx = canvas.getContext('2d') + var imageData = ctx.createImageData(w,h) + var data = imageData.data + + var cursor = this.cursor = document.createElement("div") + cursor.className = "colorPickerCursor" + + canvas.width = w + canvas.height = h + canvas.className = "colorPicker" + + var ww = w-1 + var hh = h-1 + + var L_range = [0, 110] + var a_range = [-86.185, 98.254] + var b_range = [-107.863, 94.482] + + var rgb = [0,0,0] + + var val = 80 + + this.mouse = new mouse({ + el: canvas, + down: function(e, cursor){ + parent.begin() + cursor.x.a = -cursor.x.a + base.pick(cursor.x.a, cursor.y.a) + }, + drag: function(e, cursor){ + cursor.x.b = -cursor.x.b + base.pick(cursor.x.b, cursor.y.b) + }, + up: function(){ + parent.finalize() + } + }) + + this.setLab = function(Lab) { + val = Lab[0] + this.paint() + var rgb = xyz2rgb(hunterlab2xyz(Lab[0], Lab[1], Lab[2])).map(Math.round) + return rgb + } + this.pick = function(i, j){ + i = clamp(i, 0, w) + j = clamp(j, 0, h) + var x = mix( i/ww, a_range[0], a_range[1] ) + var y = mix( j/hh, b_range[0], b_range[1] ) + var rgb = xyz2rgb(hunterlab2xyz(val, x, y)).map(Math.round) + this.moveCursor(i, j) + parent.pick( rgb, [val,x,y] ) + } + this.load = function(rgba){ + var Lab = xyz2hunterlab(rgb2xyz(rgba)) + var val = clamp( Lab[0], L_range[0], L_range[1] ) + var x = mix( norm(Lab[1], a_range[0], a_range[1]), 0, ww ) + var y = mix( norm(Lab[2], b_range[0], b_range[1]), 0, hh ) + + this.moveCursor(x,y) + this.setLab(Lab) + return Lab + } + this.moveCursor = function(x,y){ + cursor.style.left = x + "px" + cursor.style.top = y + "px" + } + this.paint = function() { + val = clamp(val, L_range[0], L_range[1]) + var x, y, t + for (var i = 0; i < w; i++) { + for (var j = 0; j < h; j++) { + x = mix( i/ww, a_range[0], a_range[1] ) + y = mix( j/hh, b_range[0], b_range[1] ) + t = (j*w + i) * 4 + rgb = xyz2rgb(hunterlab2xyz(val, x, y)) + data[t] = Math.round( rgb[0] ) + data[t+1] = Math.round( rgb[1] ) + data[t+2] = Math.round( rgb[2] ) + data[t+3] = 255 + } + } + ctx.putImageData(imageData,0,0) + } + + function hunterlab2xyz (L,a,b) { + var_Y = L / 10 + var_X = a / 17.5 * L / 10 + var_Z = b / 7 * L / 10 + + Y = Math.pow(var_Y, 2) + X = ( var_X + Y ) / 1.02 + Z = -( var_Z - Y ) / 0.847 + xyz = [X,Y,Z] + } + function xyz2rgb(){ + var var_X = xyz[0] / 100 //X from 0 to 95.047 (Observer = 2°, Illuminant = D65) + var var_Y = xyz[1] / 100 //Y from 0 to 100.000 + var var_Z = xyz[2] / 100 //Z from 0 to 108.883 + + var_R = var_X * 3.2406 + var_Y * -1.5372 + var_Z * -0.4986 + var_G = var_X * -0.9689 + var_Y * 1.8758 + var_Z * 0.0415 + var_B = var_X * 0.0557 + var_Y * -0.2040 + var_Z * 1.0570 + + if ( var_R > 0.0031308 ) var_R = 1.055 * Math.pow( var_R, 1 / 2.4 ) - 0.055 + else var_R = 12.92 * var_R + if ( var_G > 0.0031308 ) var_G = 1.055 * Math.pow( var_G, 1 / 2.4 ) - 0.055 + else var_G = 12.92 * var_G + if ( var_B > 0.0031308 ) var_B = 1.055 * Math.pow( var_B, 1 / 2.4 ) - 0.055 + else var_B = 12.92 * var_B + + rgb[0] = clamp(var_R * 255, 0, 255) + rgb[1] = clamp(var_G * 255, 0, 255) + rgb[2] = clamp(var_B * 255, 0, 255) + return rgb + } + function rgb2xyz(RGB){ + var var_R = ( RGB[0] / 255 ) // R from 0 to 255 + var var_G = ( RGB[1] / 255 ) // G from 0 to 255 + var var_B = ( RGB[2] / 255 ) // B from 0 to 255 + + if ( var_R > 0.04045 ) var_R = Math.pow( ( var_R + 0.055 ) / 1.055, 2.4) + else var_R = var_R / 12.92 + if ( var_G > 0.04045 ) var_G = Math.pow( ( var_G + 0.055 ) / 1.055, 2.4) + else var_G = var_G / 12.92 + if ( var_B > 0.04045 ) var_B = Math.pow( ( var_B + 0.055 ) / 1.055, 2.4) + else var_B = var_B / 12.92 + + var_R = var_R * 100 + var_G = var_G * 100 + var_B = var_B * 100 + + //Observer. = 2°, Illuminant = D65 + var x = var_R * 0.4124 + var_G * 0.3576 + var_B * 0.1805 + var y = var_R * 0.2126 + var_G * 0.7152 + var_B * 0.0722 + var z = var_R * 0.0193 + var_G * 0.1192 + var_B * 0.9505 + return [x,y,z] + } + function xyz2hunterlab (XYZ) { + var X = XYZ[0] + var Y = XYZ[1] || 1e-6 // otherwise divide-by-zero error when converting rgb(0,0,0) + var Z = XYZ[2] + var L = 10 * sqrt( Y ) + var a = 17.5 * ( ( ( 1.02 * X ) - Y ) / sqrt( Y ) ) + var b = 7 * ( ( Y - ( 0.847 * Z ) ) / sqrt( Y ) ) + return [L,a,b] + } +} diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index c0c140f..664b102 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -45,10 +45,10 @@ var EditorSettings = FormView.extend({ } if (data.colors && data.colors.wall) { - this.parent.lightControl.load(data.colors) + this.parent.colorControl.load(data.colors) } else { - this.parent.lightControl.loadDefaults() + this.parent.colorControl.loadDefaults() } if (data.walls) { diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index a460bbf..dceae3c 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -10,7 +10,7 @@ var EditorToolbar = View.extend({ "click [data-role='open-media-viewer']": 'openMediaViewer', "click [data-role='toggle-presets']": 'togglePresets', "click [data-role='toggle-wallpaper-panel']": 'toggleWallpaper', - "click [data-role='toggle-light-control']": 'toggleLightControl', + "click [data-role='toggle-color-control']": 'toggleColorControl', "click [data-role='toggle-text-editor']": 'toggleTextEditor', }, @@ -46,7 +46,7 @@ var EditorToolbar = View.extend({ this.toggleMap(false) this.parent.textEditor.hide() this.parent.presets.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() this.parent.wallpaperPicker.hide() this.parent.mediaEditor.hide() this.parent.settings.toggle() @@ -75,7 +75,7 @@ var EditorToolbar = View.extend({ this.parent.textEditor.hide() this.parent.wallpaperPicker.hide() this.parent.presets.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() this.parent.settings.hide() }, @@ -111,7 +111,7 @@ var EditorToolbar = View.extend({ this.resetMode() $("[data-role='toggle-wallpaper-panel']").toggleClass("inuse", state) this.parent.mediaEditor.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() this.parent.textEditor.hide() this.parent.settings.hide() this.parent.presets.hide() @@ -119,17 +119,17 @@ var EditorToolbar = View.extend({ this.parent.wallpaperPicker.toggle(state) }, - toggleLightControl: function(){ - var state = ! $("[data-role='toggle-light-control']").hasClass("inuse") + toggleColorControl: function(){ + var state = ! $("[data-role='toggle-color-control']").hasClass("inuse") this.resetMode() - $("[data-role='toggle-light-control']").toggleClass("inuse", state) + $("[data-role='toggle-color-control']").toggleClass("inuse", state) this.parent.mediaEditor.hide() this.parent.wallpaperPicker.hide() this.parent.textEditor.hide() this.parent.settings.hide() this.parent.presets.hide() this.toggleMap(false) - this.parent.lightControl.toggle(state) + this.parent.colorControl.toggle(state) }, toggleTextEditor: function(){ @@ -138,7 +138,7 @@ var EditorToolbar = View.extend({ $("[data-role='toggle-text-editor']").toggleClass("inuse", state) this.parent.mediaEditor.hide() this.parent.wallpaperPicker.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() this.parent.settings.hide() this.parent.presets.hide() this.toggleMap(false) @@ -153,7 +153,7 @@ var EditorToolbar = View.extend({ this.parent.wallpaperPicker.hide() this.parent.textEditor.hide() this.parent.settings.hide() - this.parent.lightControl.hide() + this.parent.colorControl.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 05d1bec..9946feb 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -17,7 +17,7 @@ var EditorView = View.extend({ this.mediaUpload = new MediaUpload ({ parent: this }) this.mediaEditor = new MediaEditor ({ parent: this }) this.wallpaperPicker = new WallpaperPicker ({ parent: this }) - this.lightControl = new LightControl ({ parent: this }) + this.colorControl = new ColorControl ({ parent: this }) this.textEditor = new TextEditor ({ parent: this }) this.collaborators = new Collaborators ({ parent: this }) this.presets = new Presets ({ parent: this }) diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js deleted file mode 100644 index 10f8d2c..0000000 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ /dev/null @@ -1,305 +0,0 @@ - -var LightControl = View.extend({ - el: ".lightcontrol", - - events: { - "mousedown": "stopPropagation", - "click .color-swatches span": "select", - "mousedown #brightness-control": "beginBrightness", - "input #brightness-control": "updateBrightness", - }, - - 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], - ], - - initialize: function(opt){ - this.parent = opt.parent - - this.colorPicker = new LabColorPicker(this, 180, 180) - this.$("#color-picker").append( this.colorPicker.canvas ) - this.$("#color-picker").append( this.colorPicker.cursor ) - - this.$swatches = this.$(".swatch") - this.$labels = this.$(".swatch + label") - this.$swatch = { - wall: this.$("#wall-color"), - outline: this.$("#outline-color"), - floor: this.$("#floor-color"), - ceiling: this.$("#ceiling-color"), - } - this.$brightnessControl = this.$("#brightness-control") - - this.$colors = this.$(".colors") - this.colors.forEach(function(color){ - var $swatch = $("") - $swatch.css("background-color","rgb(" + color + ")") - $swatch.data('color', color) - this.$colors.append($swatch) - }.bind(this)) - - }, - - modes: [ "wall", "outline", "floor", "ceiling" ], - - load: function(data){ - this.modes.forEach(function(mode){ - Walls.setColor[mode](data[mode]) - this.$swatch[ mode ].css("background-color", rgb_string(data[mode])) - }.bind(this)) - this.setMode("wall") - }, - - loadDefaults: function(){ - var colors = { - wall: app.defaults.colors.wall.slice(), - outline: app.defaults.colors.outline.slice(), - floor: app.defaults.colors.floor.slice(), - ceiling: app.defaults.colors.ceiling.slice(), - } - this.load(colors) - }, - - toggle: function(state){ - this.$el.toggleClass("active", state); - }, - - show: function(){ - this.parent.cursor.message("colors") - this.toggle(true) - }, - - hide: function(){ - this.toggle(false) - }, - - pick: function(rgb, Lab){ - this.labColor = Lab - this.setSwatchColor(this.mode, rgb) - // console.log(rgb) - Walls.setColor[ this.mode ](rgb) - }, - - setSwatchColor: function(mode, rgb) { - this.$swatch[ mode ].css("background-color", rgb_string(rgb)) - }, - - initialState: null, - - begin: function(){ - this.initialState = this.serialize() - }, - - serialize: function(){ - return { - mode: this.mode, - rgb: Walls.colors[ this.mode ] - } - }, - - finalize: function(){ - if (! this.initialState) { return } - UndoStack.push({ - type: 'update-colors', - undo: this.initialState, - redo: this.serialize(), - }) - - this.initialState = null - - // TODO: watch individual wall object here - Minotaur.watch( app.router.editorView.settings ) - }, - - setMode: function (mode) { - var color, brightness - this.mode = mode - this.$(".active").removeClass("active") - this.$swatch[ mode ].parent().addClass("active") - color = Walls.colors[ mode ] - - this.labColor = this.colorPicker.load(color) - this.$brightnessControl.val( this.labColor[0] ) - }, - - select: function(e){ - var mode = $('.swatch', e.currentTarget).data('mode') - this.setMode(mode) - }, - - beginBrightness: function(){ - this.begin() - $(window).one("mouseup", this.finalize.bind(this)) - }, - - updateBrightness: function(){ - this.labColor[0] = parseFloat( this.$brightnessControl.val() ) - var rgb = this.colorPicker.setLab( this.labColor ) - this.pick(rgb, this.labColor) - }, - -}) - -var LabColorPicker = function (parent, w, h) { - var base = this - var canvas = this.canvas = document.createElement('canvas') - var ctx = this.ctx = canvas.getContext('2d') - var imageData = ctx.createImageData(w,h) - var data = imageData.data - - var cursor = this.cursor = document.createElement("div") - cursor.className = "colorPickerCursor" - - canvas.width = w - canvas.height = h - canvas.className = "colorPicker" - - var ww = w-1 - var hh = h-1 - - var L_range = [0, 110] - var a_range = [-86.185, 98.254] - var b_range = [-107.863, 94.482] - - var rgb = [0,0,0] - - var val = 80 - - this.mouse = new mouse({ - el: canvas, - down: function(e, cursor){ - parent.begin() - cursor.x.a = -cursor.x.a - base.pick(cursor.x.a, cursor.y.a) - }, - drag: function(e, cursor){ - cursor.x.b = -cursor.x.b - base.pick(cursor.x.b, cursor.y.b) - }, - up: function(){ - parent.finalize() - } - }) - - this.setLab = function(Lab) { - val = Lab[0] - this.paint() - var rgb = xyz2rgb(hunterlab2xyz(Lab[0], Lab[1], Lab[2])).map(Math.round) - return rgb - } - this.pick = function(i, j){ - i = clamp(i, 0, w) - j = clamp(j, 0, h) - var x = mix( i/ww, a_range[0], a_range[1] ) - var y = mix( j/hh, b_range[0], b_range[1] ) - var rgb = xyz2rgb(hunterlab2xyz(val, x, y)).map(Math.round) - this.moveCursor(i, j) - parent.pick( rgb, [val,x,y] ) - } - this.load = function(rgba){ - var Lab = xyz2hunterlab(rgb2xyz(rgba)) - var val = clamp( Lab[0], L_range[0], L_range[1] ) - var x = mix( norm(Lab[1], a_range[0], a_range[1]), 0, ww ) - var y = mix( norm(Lab[2], b_range[0], b_range[1]), 0, hh ) - - this.moveCursor(x,y) - this.setLab(Lab) - return Lab - } - this.moveCursor = function(x,y){ - cursor.style.left = x + "px" - cursor.style.top = y + "px" - } - this.paint = function() { - val = clamp(val, L_range[0], L_range[1]) - var x, y, t - for (var i = 0; i < w; i++) { - for (var j = 0; j < h; j++) { - x = mix( i/ww, a_range[0], a_range[1] ) - y = mix( j/hh, b_range[0], b_range[1] ) - t = (j*w + i) * 4 - rgb = xyz2rgb(hunterlab2xyz(val, x, y)) - data[t] = Math.round( rgb[0] ) - data[t+1] = Math.round( rgb[1] ) - data[t+2] = Math.round( rgb[2] ) - data[t+3] = 255 - } - } - ctx.putImageData(imageData,0,0) - } - - function hunterlab2xyz (L,a,b) { - var_Y = L / 10 - var_X = a / 17.5 * L / 10 - var_Z = b / 7 * L / 10 - - Y = Math.pow(var_Y, 2) - X = ( var_X + Y ) / 1.02 - Z = -( var_Z - Y ) / 0.847 - xyz = [X,Y,Z] - } - function xyz2rgb(){ - var var_X = xyz[0] / 100 //X from 0 to 95.047 (Observer = 2°, Illuminant = D65) - var var_Y = xyz[1] / 100 //Y from 0 to 100.000 - var var_Z = xyz[2] / 100 //Z from 0 to 108.883 - - var_R = var_X * 3.2406 + var_Y * -1.5372 + var_Z * -0.4986 - var_G = var_X * -0.9689 + var_Y * 1.8758 + var_Z * 0.0415 - var_B = var_X * 0.0557 + var_Y * -0.2040 + var_Z * 1.0570 - - if ( var_R > 0.0031308 ) var_R = 1.055 * Math.pow( var_R, 1 / 2.4 ) - 0.055 - else var_R = 12.92 * var_R - if ( var_G > 0.0031308 ) var_G = 1.055 * Math.pow( var_G, 1 / 2.4 ) - 0.055 - else var_G = 12.92 * var_G - if ( var_B > 0.0031308 ) var_B = 1.055 * Math.pow( var_B, 1 / 2.4 ) - 0.055 - else var_B = 12.92 * var_B - - rgb[0] = clamp(var_R * 255, 0, 255) - rgb[1] = clamp(var_G * 255, 0, 255) - rgb[2] = clamp(var_B * 255, 0, 255) - return rgb - } - function rgb2xyz(RGB){ - var var_R = ( RGB[0] / 255 ) // R from 0 to 255 - var var_G = ( RGB[1] / 255 ) // G from 0 to 255 - var var_B = ( RGB[2] / 255 ) // B from 0 to 255 - - if ( var_R > 0.04045 ) var_R = Math.pow( ( var_R + 0.055 ) / 1.055, 2.4) - else var_R = var_R / 12.92 - if ( var_G > 0.04045 ) var_G = Math.pow( ( var_G + 0.055 ) / 1.055, 2.4) - else var_G = var_G / 12.92 - if ( var_B > 0.04045 ) var_B = Math.pow( ( var_B + 0.055 ) / 1.055, 2.4) - else var_B = var_B / 12.92 - - var_R = var_R * 100 - var_G = var_G * 100 - var_B = var_B * 100 - - //Observer. = 2°, Illuminant = D65 - var x = var_R * 0.4124 + var_G * 0.3576 + var_B * 0.1805 - var y = var_R * 0.2126 + var_G * 0.7152 + var_B * 0.0722 - var z = var_R * 0.0193 + var_G * 0.1192 + var_B * 0.9505 - return [x,y,z] - } - function xyz2hunterlab (XYZ) { - var X = XYZ[0] - var Y = XYZ[1] || 1e-6 // otherwise divide-by-zero error when converting rgb(0,0,0) - var Z = XYZ[2] - var L = 10 * sqrt( Y ) - var a = 17.5 * ( ( ( 1.02 * X ) - Y ) / sqrt( Y ) ) - var b = 7 * ( ( Y - ( 0.847 * Z ) ) / sqrt( Y ) ) - return [L,a,b] - } -} diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index 4edc957..a3dc610 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -54,7 +54,7 @@ var Presets = View.extend({ selectPreset: function(e){ var preset = $(e.currentTarget).data('preset') if (! this.presets[preset]) return - this.parent.lightControl.load(this.presets[preset]) + this.parent.colorControl.load(this.presets[preset]) this.$(".active").removeClass('active') $(e.currentTarget).addClass('active') }, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 1ab1198..d7999b9 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1582,7 +1582,7 @@ border-left: 1px solid black; /* COLOR PICKER */ -.lightcontrol { +.colorcontrol { margin-top: 8%; right: 80px; padding: 13px 20px 20px 20px; @@ -1592,11 +1592,11 @@ border-left: 1px solid black; transition: -webkit-transform 0.2s ease-in-out; } -.lightcontrol.active { +.colorcontrol.active { -webkit-transform: translateX(0px); transform: translateX(0px); } -.lightcontrol .slider { +.colorcontrol .slider { } h4 { font-weight:300; diff --git a/views/controls/editor/color-control.ejs b/views/controls/editor/color-control.ejs new file mode 100644 index 0000000..040808e --- /dev/null +++ b/views/controls/editor/color-control.ejs @@ -0,0 +1,28 @@ +
+

Edit Room Colors

+ +
+
+ + + +
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+
+
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs deleted file mode 100644 index 99d68f5..0000000 --- a/views/controls/editor/light-control.ejs +++ /dev/null @@ -1,28 +0,0 @@ -
-

Edit Room Colors

- -
-
- - - -
- -
- -
- -
-
- -
-
- -
-
- -
-
-
-
diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs index 1bb31b8..7b08db6 100644 --- a/views/controls/editor/toolbar.ejs +++ b/views/controls/editor/toolbar.ejs @@ -29,7 +29,7 @@ data-info="add wallpaper" class="ion-ios7-keypad-outline">
+
-- cgit v1.2.3-70-g09d2 From d9a6199f75d324c7b644beb1c732680a67ab8047 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 17 Oct 2014 13:37:23 -0400 Subject: layout editor stuff --- .../assets/javascripts/rectangles/models/floor.js | 34 ++++++++++++- public/assets/javascripts/ui/_router.js | 1 - .../assets/javascripts/ui/builder/BuilderInfo.js | 13 ++++- public/assets/javascripts/ui/editor/Presets.js | 11 ++--- public/assets/javascripts/ui/lib/UploadView.js | 4 +- public/assets/javascripts/util.js | 55 ++++++++++++++++++++++ public/assets/stylesheets/app.css | 22 ++++++--- views/controls/editor/media-drawer.ejs | 2 +- views/controls/editor/wallpaper.ejs | 17 ++----- 9 files changed, 125 insertions(+), 34 deletions(-) (limited to 'views/controls') diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js index a144ecd..3f452e1 100644 --- a/public/assets/javascripts/rectangles/models/floor.js +++ b/public/assets/javascripts/rectangles/models/floor.js @@ -36,8 +36,40 @@ this.mx.forEach(function(mx, index){ $(mx.el).bind({ + contextmenu: function(e){ + if (! (e.ctrlKey || e.metaKey || e.shiftKey) ) { + e.preventDefault() + } + if (Scenery.nextMedia) { + e.preventDefault() + Scenery.nextMedia = null + app.tube('cancel-scenery') + } + else if (Scenery.nextWallpaper) { + e.preventDefault() + Scenery.nextWallpaper = null + app.tube('cancel-wallpaper') + } + }, + mousedown: function(e){ - if (Scenery.nextWallpaper) { + + // right-click + if (e.which == 3) { + if (Scenery.nextMedia) { + e.preventDefault() + Scenery.nextMedia = null + app.tube('cancel-scenery') + } + else if (Scenery.nextWallpaper) { + e.preventDefault() + Scenery.nextWallpaper = null + app.tube('cancel-wallpaper') + } + return + } + + if (Scenery.nextWallpaper) { var oldState = base.serialize() base.wallpaper(Scenery.nextWallpaper) // Scenery.nextWallpaper = null diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index 794079e..bda0960 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -212,7 +212,6 @@ var SiteRouter = Router.extend({ // this.documentModal.destroy(name) }, - testWallpaper: function(e){ var content = document.getElementById("content") content.style.width = "680px" diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js index 67834e7..c708275 100644 --- a/public/assets/javascripts/ui/builder/BuilderInfo.js +++ b/public/assets/javascripts/ui/builder/BuilderInfo.js @@ -10,8 +10,10 @@ var BuilderInfo = View.extend({ "change [name=width]": 'changeWidth', "change [name=depth]": 'changeDepth', "change [name=height]": 'changeHeight', + "keydown [name=width]": 'enterWidth', + "keydown [name=depth]": 'enterDepth', + "keydown [name=height]": 'enterHeight', "change [name=units]": 'changeUnits', - "change [name=resolution]": 'changeResolution', "change [name=viewHeight]": 'changeViewHeight', "click [data-role=destroy-room]": 'destroy', }, @@ -85,16 +87,25 @@ var BuilderInfo = View.extend({ this.hide() }, + enterWidth: function(e){ + if (e.keyCode == 13) this.changeWidth(e) + }, changeWidth: function(e){ e.stopPropagation() this.room.rect.x.setLength( this.$width.unitVal() ) Rooms.rebuild() }, + enterDepth: function(e){ + if (e.keyCode == 13) this.changeDepth(e) + }, changeDepth: function(e){ e.stopPropagation() this.room.rect.y.setLength( this.$depth.unitVal() ) Rooms.rebuild() }, + enterHeight: function(e){ + if (e.keyCode == 13) this.changeHeight(e) + }, changeHeight: function(e){ e.stopPropagation() this.room.height = this.$height.unitVal() diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index be86af3..ab311ef 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -84,15 +84,12 @@ var Presets = View.extend({ this.parent.colorControl.modes.forEach(function(mode){ if (! preset[mode].length) { Walls.setWallpaper[mode](preset[mode]) - Walls.setColor[mode](preset[mode].color) } else { - if (preset[mode].length) { - Walls.clearWallpaper[mode]() - } - Walls.setColor[mode](preset[mode]) - this.parent.colorControl.$swatch[ mode ].css("background-color", rgb_string(preset[mode])) - } + Walls.clearWallpaper[mode]() + } + Walls.setColor[mode](preset[mode]) + this.parent.colorControl.$swatch[ mode ].css("background-color", rgb_string(preset[mode])) }.bind(this)) this.parent.colorControl.setMode(preset.wall.color ? "wall" : "floor") Walls.setBodyColor() diff --git a/public/assets/javascripts/ui/lib/UploadView.js b/public/assets/javascripts/ui/lib/UploadView.js index efaa8c9..2d2c2c7 100644 --- a/public/assets/javascripts/ui/lib/UploadView.js +++ b/public/assets/javascripts/ui/lib/UploadView.js @@ -4,12 +4,12 @@ var UploadView = View.extend({ // define uploadAction events: { - "change .file": "handleFileSelect", + "change [type=file]": "handleFileSelect", "submit form": "preventDefault", }, initialize: function(){ - this.$file = this.$(".file") + this.$file = this.$("[type=file]") this.$upload = this.$(".upload-icon") }, diff --git a/public/assets/javascripts/util.js b/public/assets/javascripts/util.js index 367e20e..2fa994a 100644 --- a/public/assets/javascripts/util.js +++ b/public/assets/javascripts/util.js @@ -185,3 +185,58 @@ function bitcount(v) { v = (v & 0x33333333) + ((v >>> 2) & 0x33333333); return ((v + (v >>> 4) & 0xF0F0F0F) * 0x1010101) >>> 24; } + +// Function.bind polyfill +if (!Function.prototype.bind) { + Function.prototype.bind = function(oThis) { + if (typeof this !== 'function') { + // closest thing possible to the ECMAScript 5 + // internal IsCallable function + throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable'); + } + + var aArgs = Array.prototype.slice.call(arguments, 1), + fToBind = this, + fNOP = function() {}, + fBound = function() { + return fToBind.apply(this instanceof fNOP && oThis + ? this + : oThis, + aArgs.concat(Array.prototype.slice.call(arguments))); + }; + + fNOP.prototype = this.prototype; + fBound.prototype = new fNOP(); + + return fBound; + }; +} + +// rAF polyfill +(function() { + var lastTime = 0; + var vendors = ['ms', 'moz', 'webkit', 'o']; + for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] + || window[vendors[x]+'CancelRequestAnimationFrame']; + } + + if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, + timeToCall); + lastTime = currTime + timeToCall; + return id; + }; + + if (!window.cancelAnimationFrame) + window.cancelAnimationFrame = function(id) { + clearTimeout(id); + }; +}()); + + + diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 28eabd9..9df1573 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1507,9 +1507,12 @@ border-left: 1px solid black; .toolButton { border: 1px solid; - display: inline-block; - width: 100%; - margin-top: 5px; + position: relative; + display: block; + float: right; + margin-left: 3px; + width: 35px; + height: 35px; font-size: 14px; font-weight: 300; } @@ -1524,9 +1527,9 @@ border-left: 1px solid black; } .wallpaper form { position: relative; - padding: 2px 0 0 0; font-size: 14px; font-weight: 300; + overflow: hidden; } .toolButton:hover { background:black; @@ -1550,14 +1553,19 @@ border-left: 1px solid black; .wallpaper .wallpaperRemove:hover img { -webkit-filter:invert(100%); } +.wallpaperUpload .upload-icon { + margin: 0 8px; +} .wallpaperUpload .upload-icon.uploading { } .wallpaperUpload .upload-icon.uploading:before { content: ' ' !important; background-image: url("/assets/img/loader.gif"); background-repeat: no-repeat; - width: 40px; - height: 40px; + background-position: center; + width: 100%; + height: 100%; + position:absolute;top:0;left:0; } .wallpaperUpload input[type="text"]{ border: 1px solid #ccc; @@ -1575,7 +1583,7 @@ border-left: 1px solid black; top: 0; left: 0; background: blue; - height: 28px; + height: 100%; width: 100%; opacity: 0; cursor: pointer; diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index d1e2c99..1404d86 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -26,7 +26,7 @@

Upload File - +
~ or ~
diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs index ed175ae..69a60ec 100644 --- a/views/controls/editor/wallpaper.ejs +++ b/views/controls/editor/wallpaper.ejs @@ -9,31 +9,20 @@ + +
- - +
-
-
- - -
-- cgit v1.2.3-70-g09d2 From b21cb665e3ca296b56d389d3a2f83434f4646f26 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Oct 2014 16:42:08 -0400 Subject: logarithmic wallpaper scale --- public/assets/javascripts/rectangles/models/floor.js | 5 +++-- public/assets/javascripts/rectangles/models/wall.js | 7 ++++--- public/assets/javascripts/ui/editor/WallpaperPicker.js | 10 +++++----- views/controls/editor/wallpaper.ejs | 2 +- 4 files changed, 13 insertions(+), 11 deletions(-) (limited to 'views/controls') diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js index 2fb870f..ac1f8c9 100644 --- a/public/assets/javascripts/rectangles/models/floor.js +++ b/public/assets/javascripts/rectangles/models/floor.js @@ -146,8 +146,9 @@ Floor.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.x = background.x || this.background.x || 0 + this.background.y = background.y || this.background.y || 0 this.background.scale = background.scale || this.background.scale || 1 var mx, dx, dy diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 75814dc..8590de7 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -288,10 +288,11 @@ 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.x = background.x || this.background.x || 0 + this.background.y = background.y || this.background.y || 0 this.background.scale = background.scale || this.background.scale || 1 - + var mx, dx, dy var w = Math.round( this.backgroundImage.naturalWidth * this.background.scale ) var h = Math.round( this.backgroundImage.naturalHeight * this.background.scale ) diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index b26a5dc..8f701b0 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -157,13 +157,13 @@ var WallpaperPicker = UploadView.extend({ return; } this.wall = wall - this.$scale.val( this.wall.background.scale ) + this.$scale.val( Math.log( this.wall.background.scale ) ) }, updateScale: function(){ if (! this.wall) return; - s = parseFloat(this.$scale.val()) - this.wall.wallpaperPosition({ scale: s }) + var scale = Math.exp( parseFloat(this.$scale.val()) ) + this.wall.wallpaperPosition({ scale: scale }) }, tileWalls: function(){ @@ -192,7 +192,7 @@ var WallpaperPicker = UploadView.extend({ down: function(e, cursor){ if (! base.wall) return dragging = true - s = parseFloat( base.$scale.val() ) + // s = parseFloat( base.$scale.val() ) x = base.wall.background.x y = base.wall.background.y }, @@ -203,7 +203,7 @@ var WallpaperPicker = UploadView.extend({ dx = delta.a*s dy = delta.b*s base.wall.wallpaperPosition({ - scale: s, + // scale: s, x: x+dx, y: y+dy, }) diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs index 69a60ec..d2559cc 100644 --- a/views/controls/editor/wallpaper.ejs +++ b/views/controls/editor/wallpaper.ejs @@ -25,7 +25,7 @@
- +
-- cgit v1.2.3-70-g09d2 From a8c9c1198a8872c7ebcf3db920d2de3fe721bfc3 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 21 Oct 2014 13:03:03 -0400 Subject: move fileupload out --- .../javascripts/ui/editor/WallpaperPicker.js | 4 +--- views/controls/editor/media-drawer.ejs | 24 +++++++++++----------- 2 files changed, 13 insertions(+), 15 deletions(-) (limited to 'views/controls') diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 994fe74..6e0d5c6 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -40,9 +40,6 @@ var WallpaperPicker = UploadView.extend({ hide: function(){ this.toggle(false) }, -// hide: function(){ -// this.__super__.hide.call(this) -// }, toggle: function (state) { Scenery.nextWallpaper = null @@ -158,6 +155,7 @@ var WallpaperPicker = UploadView.extend({ pickWall: function(wall){ if (! wall.background || wall.background.src == "none") { this.$wallpaperResizeControls.addClass('disabled') + this.$scale.val( 0.0 ) return; } this.$wallpaperResizeControls.removeClass('disabled') diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index 1404d86..3e64cc3 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -21,17 +21,6 @@ view more
- - -
-
- Upload File - -
- ~ or ~
- -
-
@@ -40,4 +29,15 @@
-
\ No newline at end of file +
+ + + +
+
+ Upload File + +
+ ~ or ~
+ +
-- cgit v1.2.3-70-g09d2 From 862357ad711c2d063ce69b2d4f6dae5d811e6c75 Mon Sep 17 00:00:00 2001 From: ryderr Date: Thu, 23 Oct 2014 11:42:29 -0400 Subject: hero shot some other things --- public/assets/stylesheets/app.css | 2 ++ views/controls/editor/wallpaper.ejs | 2 +- views/home.ejs | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) (limited to 'views/controls') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index c92c783..58b87d4 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -426,6 +426,8 @@ iframe.embed { padding: 40px; border: 0; border-top: 1px solid black; + border-bottom: 1px solid black; + margin-top: 150px; } .holder { diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs index d2559cc..e675afa 100644 --- a/views/controls/editor/wallpaper.ejs +++ b/views/controls/editor/wallpaper.ejs @@ -10,7 +10,7 @@ - +
diff --git a/views/home.ejs b/views/home.ejs index 8910070..85d6f23 100755 --- a/views/home.ejs +++ b/views/home.ejs @@ -13,7 +13,7 @@
[[ include partials/header ]] -
+
Create 3D Rooms
-- cgit v1.2.3-70-g09d2 From 1ba14b4be59dda33453264034364d2c962e586d9 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Fri, 24 Oct 2014 00:41:31 -0400 Subject: edits to wallpaper menu --- public/assets/stylesheets/app.css | 24 +++++++++++++++--------- views/controls/editor/wallpaper.ejs | 10 ++++++---- 2 files changed, 21 insertions(+), 13 deletions(-) (limited to 'views/controls') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 58b87d4..488e53e 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1510,13 +1510,12 @@ border-left: 1px solid black; .toolButton { border: 1px solid; position: relative; - display: block; - float: right; - margin-left: 3px; - width: 35px; + float: left; + width: 86px; height: 35px; - font-size: 14px; + font-size: 12px; font-weight: 300; + cursor: pointer; } .toolButton label { @@ -1524,12 +1523,14 @@ border-left: 1px solid black; vertical-align: middle; float: none; } +.wallpaperRemove { + margin-right: 4px; +} .wallpaperUpload:hover { cursor:pointer; } .wallpaper form { position: relative; - font-size: 14px; font-weight: 300; overflow: hidden; } @@ -1631,13 +1632,18 @@ input[type="range"]::-webkit-slider-thumb { cursor:pointer; border:3px solid #000; } - +.wallpaperResizeControls { + transition: all 0.2s; + float: left; + height: 28px; + overflow: hidden; +} .wallpaperResizeControls.disabled { - pointer-events: none; + height: 0; opacity: 0.3; } .wallpaperResizeControls input[type=range] { - width: 130px; + width: 150px; position: relative; top: -10px; } diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs index e675afa..6d8f209 100644 --- a/views/controls/editor/wallpaper.ejs +++ b/views/controls/editor/wallpaper.ejs @@ -12,17 +12,19 @@ +
+ + +
+
+
-
- -
-
-- cgit v1.2.3-70-g09d2 From 79377c1a06e986abb9146f4a9b41e4d266dc8dfc Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 24 Oct 2014 16:46:36 -0400 Subject: hit enter to flood message --- public/assets/javascripts/ui/editor/WallpaperPicker.js | 9 +++++++++ public/assets/stylesheets/app.css | 14 ++++++++++++++ views/controls/editor/wallpaper.ejs | 6 +++++- 3 files changed, 28 insertions(+), 1 deletion(-) (limited to 'views/controls') diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 6e0d5c6..3b6168e 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -7,6 +7,7 @@ var WallpaperPicker = UploadView.extend({ uploadAction: "/api/media/upload", events: { + "contextmenu": 'cancel', "mousedown": 'stopPropagation', "click .swatch": 'pick', "click .wallpaperRemove": 'remove', @@ -120,6 +121,14 @@ var WallpaperPicker = UploadView.extend({ $(".floatingSwatch").addClass("scissors") } }, + + cancel: function(e){ + if (Scenery.nextWallpaper) { + e.preventDefault() + Scenery.nextWallpaper = null + app.tube('cancel-wallpaper') + } + }, follow: function(e, wallpaper, icon){ icon = icon || wallpaper diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 894483d..e5b10e3 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1702,6 +1702,20 @@ input[type="range"]::-webkit-slider-thumb { .wallpaperResizeControls span { cursor: pointer; } +.floodMessage { + display: none; + animation: flicker 0.2s infinite; + color: black; + margin: 5px 5px 49px 5px; + font-size: 13px; + font-weight: 300; + text-align: center; +} +@keyframes flicker { + 49% { color: black; } + 50% { color: red; } + 100% { color: red; } +} #color-picker { position: relative; diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs index 6d8f209..3168f1c 100644 --- a/views/controls/editor/wallpaper.ejs +++ b/views/controls/editor/wallpaper.ejs @@ -10,7 +10,7 @@ - +
@@ -30,6 +30,10 @@
+
+ Hit Enter to Flood the room! +
+
-- cgit v1.2.3-70-g09d2 From 90c8c1c45a272fab86e99a2e63c72528b3a24e23 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 28 Oct 2014 16:15:47 -0400 Subject: share links --- public/assets/javascripts/ui/_router.js | 26 --------------------- .../assets/javascripts/ui/editor/ColorControl.js | 2 +- public/assets/javascripts/ui/reader/ReaderView.js | 1 + public/assets/javascripts/ui/reader/ShareView.js | 27 ++++++++++++++++++++++ public/assets/javascripts/ui/z_share.js | 25 -------------------- views/controls/reader/about-room.ejs | 10 ++++---- views/partials/meta.ejs | 18 +++++++-------- views/partials/scripts.ejs | 1 + 8 files changed, 42 insertions(+), 68 deletions(-) create mode 100644 public/assets/javascripts/ui/reader/ShareView.js delete mode 100644 public/assets/javascripts/ui/z_share.js (limited to 'views/controls') diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index c7b625a..0c95664 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -40,8 +40,6 @@ var SiteRouter = Router.extend({ "/project/:name": 'projectViewer', "/project/:name/edit": 'projectEditor', "/project/:name/view": 'projectViewer', - - "/test/wallpaper": 'testWallpaper', }, mobileRoutes: { @@ -213,29 +211,5 @@ var SiteRouter = Router.extend({ // this.documentModal.destroy(name) }, - testWallpaper: function(e){ - var content = document.getElementById("content") - content.style.width = "680px" - content.style.margin = "0 auto" - var wm = new WallpaperManager() - app.on('wallpaper-ready', function(){ - var black = [0,0,0,0] - var white = [255,255,255,1.0] - var swatches = wm.buildSwatches(black, white, 4) - document.body.style.backgroundColor = "#eee" - swatches.forEach(function(swatch){ - swatch.style.margin = "4px" - swatch.style.border = "1px solid lime" - swatch.style.backgroundColor = "#888" - content.appendChild(swatch) - swatch.onclick = function(){ - dataUrl = swatch.toDataURL() - document.body.style.backgroundImage = "url(" + dataUrl + ")" - } - }) - }) - wm.init() - }, - }) diff --git a/public/assets/javascripts/ui/editor/ColorControl.js b/public/assets/javascripts/ui/editor/ColorControl.js index 72e9fb1..d1a8c7b 100644 --- a/public/assets/javascripts/ui/editor/ColorControl.js +++ b/public/assets/javascripts/ui/editor/ColorControl.js @@ -101,7 +101,7 @@ var ColorControl = View.extend({ initialState: null, - begin: function(){ + begin: function(){ this.initialState = this.serialize() }, diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index 8531244..4c53226 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -9,6 +9,7 @@ var ReaderView = View.extend({ initialize: function(){ this.mediaPlayer = new MediaPlayer ({ parent: this }) + this.shareView = new shareView ({ parent: this }) }, load: function(name){ diff --git a/public/assets/javascripts/ui/reader/ShareView.js b/public/assets/javascripts/ui/reader/ShareView.js new file mode 100644 index 0000000..ab358e3 --- /dev/null +++ b/public/assets/javascripts/ui/reader/ShareView.js @@ -0,0 +1,27 @@ +var ShareView = View.extend({ + el: ".share", + + events: { + "click #share_facebook": "facebook", + "click #share_twitter": "twitter", + } + + initialize: function(opt){ + this.parent = opt.parent + }, + + facebook: function (e) { + e.preventDefault() + var msg = $(".roomName").html() + " on VValls" + var url = "https://www.facebook.com/share.php?u=" + encodeURIComponent(window.location.origin + window.location.pathname) + "&t=" + encodeURIComponent(msg); + window.open(url, "_blank") + }, + + twitter: function (e) { + e.preventDefault() + var msg = $(".roomName").html() + " on VValls" + var url = "https://twitter.com/home?status=" + encodeURIComponent(window.location.origin + window.location.pathname + " " + msg); + window.open(url, "_blank") + } + +} diff --git a/public/assets/javascripts/ui/z_share.js b/public/assets/javascripts/ui/z_share.js deleted file mode 100644 index d31aa89..0000000 --- a/public/assets/javascripts/ui/z_share.js +++ /dev/null @@ -1,25 +0,0 @@ -var share = { - init: function(){ - share.bind() - }, - bind: function(){ - $("#facebook").click(share.facebook) - $("#twitter").click(share.twitter) - }, - url: "http://vvalls.com/", - facebook_msg: "", - twitter_msg: "", - openLink: function (url) { - window.open(url, "_blank"); - }, - facebook: function () { - var url = "https://www.facebook.com/share.php?u=" + encodeURIComponent(share.url) + "&t=" + encodeURIComponent(share.facebook_msg); - share.openLink(url); - return false; - }, - twitter: function () { - var url = "https://twitter.com/home?status=" + encodeURIComponent(share.url + " " + share.twitter_msg); - share.openLink(url); - return false; - } -} diff --git a/views/controls/reader/about-room.ejs b/views/controls/reader/about-room.ejs index c0ca9f7..c9ad626 100644 --- a/views/controls/reader/about-room.ejs +++ b/views/controls/reader/about-room.ejs @@ -1,7 +1,7 @@

- [[- name ]], - [[- author ]] + [[- name ]], + [[- author ]]

[[ if (description) { ]] [[- description ]] @@ -11,13 +11,11 @@ [[ if (canEdit) { ]] Edit Room [[ } ]]
- - diff --git a/views/partials/meta.ejs b/views/partials/meta.ejs index 6ff45cb..c50fc01 100644 --- a/views/partials/meta.ejs +++ b/views/partials/meta.ejs @@ -18,16 +18,14 @@ - - - - - - - - - - + + + + + + + + diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 0373a3e..af16099 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -114,6 +114,7 @@ + -- cgit v1.2.3-70-g09d2 From 3d8490dacba1b3020b9e1dd926ce99edfee48375 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 4 Nov 2014 15:44:45 -0500 Subject: toggle map link in settings --- public/assets/javascripts/ui/editor/EditorSettings.js | 6 ++++++ views/controls/editor/settings.ejs | 10 +++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) (limited to 'views/controls') diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index de60b53..2b29961 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -17,6 +17,7 @@ var EditorSettings = FormView.extend({ "click [data-role='clone-project']": 'clone', "click [data-role='clear-project']": 'clear', "click [data-role='destroy-project']": 'destroy', + "click [data-role='toggle-map']": 'toggleMap', "click #startText": "setStartPosition", "click #moveText": "confirmStartPosition", "click #confirmText": "setStartPosition", @@ -83,6 +84,11 @@ var EditorSettings = FormView.extend({ this.parent.collaborators.show() }, + toggleMap: function(e){ + e.preventDefault() + app.controller.toolbar.toggleMap() + }, + clone: function(e){ e.preventDefault() diff --git a/views/controls/editor/settings.ejs b/views/controls/editor/settings.ejs index 8443abb..197ad43 100644 --- a/views/controls/editor/settings.ejs +++ b/views/controls/editor/settings.ejs @@ -14,13 +14,21 @@ (go there)
+ - + + +
-- cgit v1.2.3-70-g09d2 From 80c731a0d0f10db6891364ecd0cf3afcee288cb1 Mon Sep 17 00:00:00 2001 From: ryderr Date: Wed, 5 Nov 2014 11:33:51 -0500 Subject: copy --- public/assets/javascripts/app.js | 1 - public/assets/stylesheets/app.css | 6 ++++++ views/controls/editor/settings.ejs | 4 ++-- views/home.ejs | 10 +++++----- views/partials/footer.ejs | 2 +- views/partials/meta.ejs | 2 +- views/partials/scripts.ejs | 2 +- 7 files changed, 16 insertions(+), 11 deletions(-) (limited to 'views/controls') diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js index 0488f11..b4eb9e6 100644 --- a/public/assets/javascripts/app.js +++ b/public/assets/javascripts/app.js @@ -8,7 +8,6 @@ else if ($.browser.msie || ! has3d()) { } else { $("html").addClass("desktop"); - new WOW().init() } diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index c190f35..2303d3e 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -2339,6 +2339,8 @@ form li textarea { -webkit-transition:0.2s background; -moz-transition:0.2s background; transition:0.2s background; + position: relative; + z-index: 5; } .loading .hero .circle { @@ -2808,6 +2810,10 @@ a[data-role="forgot-password"] { .footer { padding:50px 0 120px 0; } + .videoModal .ion-ios7-close-empty { + right: 10px; + top: 20px; + } } @media screen and (orientation:portrait) { diff --git a/views/controls/editor/settings.ejs b/views/controls/editor/settings.ejs index 8443abb..0d8f325 100644 --- a/views/controls/editor/settings.ejs +++ b/views/controls/editor/settings.ejs @@ -10,9 +10,9 @@ Set Startpoint Move to Desired Point done - Startpoint Confirmed + Set Startpoint - (go there) + view current
diff --git a/views/home.ejs b/views/home.ejs index 85a235b..56ac3f9 100755 --- a/views/home.ejs +++ b/views/home.ejs @@ -15,7 +15,7 @@
- + Create 3D Rooms

Watch video. @@ -26,7 +26,7 @@

What's VValls For?

-
+
@@ -37,18 +37,18 @@
-
+

Defy The Status Quo

- There is no platform on the internet quite like VValls. Built using advanced HTML5 techniques, VValls opens up the possibilities of expression online. Go crazy, make other worldly rooms. + There is no platform on the internet quite like VValls. VValls opens up the possibilities of expression online. Go crazy, make other worldly rooms.
-
+
diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs index 3ee4afc..f44b611 100644 --- a/views/partials/footer.ejs +++ b/views/partials/footer.ejs @@ -11,7 +11,7 @@

- you are signed in as → + signed in as → [[- user.displayName ]] [[ if (user.isStaff) { ]]
Staff Area diff --git a/views/partials/meta.ejs b/views/partials/meta.ejs index c50fc01..f1b6f48 100644 --- a/views/partials/meta.ejs +++ b/views/partials/meta.ejs @@ -30,7 +30,7 @@ - + -- cgit v1.2.3-70-g09d2 From e6cac4737904750a80173ba8e7745d2b41370bd6 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 6 Nov 2014 15:48:27 -0500 Subject: share vvbox comes up when clicking save --- .../assets/javascripts/ui/editor/EditorSettings.js | 10 +++- public/assets/javascripts/ui/editor/EditorView.js | 4 ++ public/assets/javascripts/ui/reader/ReaderView.js | 1 + public/assets/javascripts/ui/reader/ShareView.js | 38 +++++++++++++-- public/assets/stylesheets/app.css | 34 ++++++++++++- views/controls/editor/collaborators.ejs | 57 +++++++--------------- views/controls/editor/share.ejs | 19 ++++++++ views/editor.ejs | 1 + 8 files changed, 116 insertions(+), 48 deletions(-) create mode 100644 views/controls/editor/share.ejs (limited to 'views/controls') diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index 2b29961..026607a 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -110,7 +110,6 @@ var EditorSettings = FormView.extend({ clear: function(e){ e.preventDefault() - Scenery.removeAll() }, @@ -215,6 +214,7 @@ var EditorSettings = FormView.extend({ clickSave: function(){ this.toggle(false) this.save() + this.isVisible = true }, success: function(data){ @@ -226,7 +226,13 @@ var EditorSettings = FormView.extend({ Minotaur.hide() window.history.pushState(null, document.title, "/project/" + data.slug + "/edit") - + + this.parent.share.setLink( "http://vvalls.com/project/" + data.slug ) + if (this.isVisible) { + this.isVisible = false + this.parent.share.show() + } + this.parent.data = data }, diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 2872ab9..3773366 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -21,6 +21,7 @@ var EditorView = View.extend({ this.textEditor = new TextEditor ({ parent: this }) this.collaborators = new Collaborators ({ parent: this }) this.presets = new Presets ({ parent: this }) + this.share = new ShareView ({ parent: this }) }, load: function(name){ @@ -41,6 +42,8 @@ var EditorView = View.extend({ ready: function(data){ $("#map").hide() + this.data = data + this.settings.load(data) this.info.load(data) }, @@ -70,6 +73,7 @@ var EditorView = View.extend({ hideExtras: function(){ this.mediaEditor.hide() this.textEditor.hide() + this.share.hide() Scenery.resize.hide() Scenery.hovering = false } diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index c132609..9e0d21e 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -29,6 +29,7 @@ var ReaderView = View.extend({ ready: function(data){ $("#map").hide() + this.data = data data.rooms && Rooms.deserialize(data.rooms) data.walls && Walls.deserialize(data.walls) data.media && Scenery.deserialize(data.media) diff --git a/public/assets/javascripts/ui/reader/ShareView.js b/public/assets/javascripts/ui/reader/ShareView.js index 4e5f832..8a205ba 100644 --- a/public/assets/javascripts/ui/reader/ShareView.js +++ b/public/assets/javascripts/ui/reader/ShareView.js @@ -2,31 +2,59 @@ var ShareView = View.extend({ el: ".share", events: { + "keydown": "stopPropagation", "click #share_facebook": "facebook", "click #share_twitter": "twitter", + "click #share_embed": "embed", }, initialize: function(opt){ this.parent = opt.parent + this.$link = this.$("#share_link") + }, + + toggle: function(state){ + if (typeof state == "boolean") { + this.$el.toggleClass("active", state) + } + else { + this.$el.toggleClass("active") + } + }, + show: function(){ + this.toggle(true) + }, + hide: function(){ + this.toggle(false) + }, + + setLink: function(url){ + this.$link.val( url ) + }, + getLink: function(){ + var link = window.location.origin + window.location.pathname + link = link.replace(/\/edit\/?$/, "") + return link }, facebook: function (e) { e.preventDefault() - var msg = $(".roomName").html() + " on VValls" - var url = "https://www.facebook.com/share.php?u=" + encodeURIComponent(window.location.origin + window.location.pathname) + "&t=" + encodeURIComponent(msg); + var link = this.getLink() + var msg = app.controller.data.name + " on VValls" + var url = "https://www.facebook.com/share.php?u=" + encodeURIComponent(link) + "&t=" + encodeURIComponent(msg) window.open(url, "_blank") }, twitter: function (e) { e.preventDefault() - var msg = $(".roomName").html() + " on VValls" - var url = "https://twitter.com/home?status=" + encodeURIComponent(window.location.origin + window.location.pathname + " " + msg); + var link = this.getLink() + var msg = app.controller.data.name + " on VValls" + var url = "https://twitter.com/home?status=" + encodeURIComponent(link + " " + msg) window.open(url, "_blank") }, embed: function (e) { e.preventDefault() - }, }) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 90454be..3fe9741 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -2544,13 +2544,25 @@ a[data-role="forgot-password"] { text-decoration: none; font-size: 12px; font-weight: 600; + cursor: pointer; } -.share a:nth-child(3){ +.share a:nth-child(3), .share a:nth-child(4) { margin-left:4px; } .share a:hover{ text-decoration:underline; } +.vvbox.share { + width: 300px +} +.vvbox.share #share_link { + width: 100%; + margin-top: 4px; + padding: 3px; + font-weight: 300; + font-size: 11px; +} + /* COLLABORATORS */ @@ -2639,6 +2651,26 @@ a[data-role="forgot-password"] { font-weight: 300; font-style: italic; } +#collaborator-url-rapper { + display: none; + background: #fff; + border: 1px solid; + box-shadow: -3px 3px 0; + padding: 10px; + font-weight: 300; + font-size: 14px; + margin: 10px 0; +} +#collaborator-url { + font-size: 16px; + width: 500px; + border: 1px solid; + font-size: 14px; + padding: 5px; + font-weight: 300; + margin-top: 5px; + display: block; +} /* MARCHING ANTS ANIMATION */ diff --git a/views/controls/editor/collaborators.ejs b/views/controls/editor/collaborators.ejs index b658bf6..8ad8c00 100644 --- a/views/controls/editor/collaborators.ejs +++ b/views/controls/editor/collaborators.ejs @@ -4,29 +4,29 @@
-

Collaborators

+

Collaborators

-

- To invite others to contribute to this project, submit their email address below. They'll receive an email with instructions to join this blog and register if they're not a Vvalls user yet. -

+

+ To invite others to contribute to this project, submit their email address below. They'll receive an email with instructions to join this project and register if they're not a Vvalls user yet. +

-
- - -
+
+ + +
-
- We've sent a link to join this project to . - You can also send this link yourself: - -
+
+ We've sent a link to join this project to . + You can also send this link yourself: + +
-
    -
-
+
    +
+
+
-
- - diff --git a/views/controls/editor/share.ejs b/views/controls/editor/share.ejs new file mode 100644 index 0000000..97f4ceb --- /dev/null +++ b/views/controls/editor/share.ejs @@ -0,0 +1,19 @@ + + + \ No newline at end of file diff --git a/views/editor.ejs b/views/editor.ejs index 29db917..b031759 100755 --- a/views/editor.ejs +++ b/views/editor.ejs @@ -20,6 +20,7 @@ [[ include controls/editor/color-control ]] [[ include controls/editor/text-editor ]] [[ include controls/editor/collaborators ]] + [[ include controls/editor/share ]] [[ include controls/editor/settings ]] [[ include controls/editor/presets ]]
-- cgit v1.2.3-70-g09d2 From 5a35d057453f82aad1097f1a90e9bdd341018a17 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 7 Nov 2014 13:22:36 -0500 Subject: embed modal --- public/assets/javascripts/ui/reader/EmbedView.js | 50 ++++++++++++++++++++++++ public/assets/javascripts/ui/reader/ShareView.js | 2 + public/assets/javascripts/util.js | 13 ++++++ public/assets/stylesheets/app.css | 32 +++++++++++++-- views/controls/editor/share.ejs | 3 -- views/controls/reader/about-room.ejs | 1 + views/controls/reader/embed.ejs | 25 ++++++++++++ views/editor.ejs | 1 + views/partials/footer.ejs | 2 +- views/partials/scripts.ejs | 3 +- views/reader.ejs | 1 + 11 files changed, 124 insertions(+), 9 deletions(-) create mode 100644 public/assets/javascripts/ui/reader/EmbedView.js create mode 100644 views/controls/reader/embed.ejs (limited to 'views/controls') diff --git a/public/assets/javascripts/ui/reader/EmbedView.js b/public/assets/javascripts/ui/reader/EmbedView.js new file mode 100644 index 0000000..a0b3c6f --- /dev/null +++ b/public/assets/javascripts/ui/reader/EmbedView.js @@ -0,0 +1,50 @@ +var EmbedView = ModalView.extend({ + el: ".embedView", + + events: { + "keydown": "stopPropagation", + "input [name=width]": "build", + "input [name=height]": "build", + "click [name=mute]": "build", + "click textarea": "selectAll", + }, + + defaultWidth: 600, + defaultHeight: 450, + + initialize: function(opt){ + this.parent = opt.parent + this.$embedCode = this.$("#embedCode") + this.$width = this.$("[name=width]") + this.$height = this.$("[name=height]") + this.$mute = this.$("[name=mute]") + + this.$width.val(this.defaultWidth) + this.$height.val(this.defaultHeight) + }, + + show: function(){ + this.build() + this.__super__.show.call(this) + }, + + build: function(){ + var mute = this.$mute.prop('checked') ? 1 : 0 + var width = clamp( this.$width.int(), 0, 2000) || this.defaultWidth + var height = clamp( this.$height.int(), 0, 2000) || this.defaultHeight + var link = this.parent.getLink() + link += "?mute=" + mute +// link += "&noui=1" + var kode = "" + + this.$embedCode.val( kode ) + }, + + selectAll: function(){ + this.$embedCode[0].select() + }, + +}) diff --git a/public/assets/javascripts/ui/reader/ShareView.js b/public/assets/javascripts/ui/reader/ShareView.js index 8a205ba..dbe6f64 100644 --- a/public/assets/javascripts/ui/reader/ShareView.js +++ b/public/assets/javascripts/ui/reader/ShareView.js @@ -10,6 +10,7 @@ var ShareView = View.extend({ initialize: function(opt){ this.parent = opt.parent + this.embedView = new EmbedView ({ parent: this }) this.$link = this.$("#share_link") }, @@ -55,6 +56,7 @@ var ShareView = View.extend({ embed: function (e) { e.preventDefault() + this.embedView.show() }, }) diff --git a/public/assets/javascripts/util.js b/public/assets/javascripts/util.js index 2fa994a..1749836 100644 --- a/public/assets/javascripts/util.js +++ b/public/assets/javascripts/util.js @@ -239,4 +239,17 @@ if (!Function.prototype.bind) { }()); +function selectElementContents(el) { + if (window.getSelection && document.createRange) { + var sel = window.getSelection(); + var range = document.createRange(); + range.selectNodeContents(el); + sel.removeAllRanges(); + sel.addRange(range); + } else if (document.selection && document.body.createTextRange) { + var textRange = document.body.createTextRange(); + textRange.moveToElementText(el); + textRange.select(); + } +} diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 3fe9741..32fc817 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -2566,13 +2566,13 @@ a[data-role="forgot-password"] { /* COLLABORATORS */ -.collaborators .rap { +.mediaDrawer .rap { display: table; width: 100%; height: 100%; } -.collaborators .rap .holder .inner { +.mediaDrawer .rap .holder .inner { width: 480px; margin: 0 auto; text-align: left; @@ -2607,7 +2607,7 @@ a[data-role="forgot-password"] { background-color: black; border-color: black; } -.collaborators p { +.mediaDrawer .rap p { margin: 10px 0 20px; font-weight: 300; } @@ -2615,7 +2615,7 @@ a[data-role="forgot-password"] { font-size: 16px; width: 300px; } -.collaborators h2 { +.mediaDrawer .rap h2 { margin: 20px auto 0; } #collaborator-list { @@ -2672,6 +2672,30 @@ a[data-role="forgot-password"] { display: block; } +/* EMBED CODE GENERATOR */ + +.embedView textarea { + border: 1px solid black; + width: 100%; + height: 100px; + font-family: 'Menlo', 'Monaco', 'Lucida Sans Console', monospace; + padding: 5px; + line-height: 15px; +} +.embedView input[type=text] { + border: 1px solid black; + width: 40px; + padding: 2px; + font-size: 14px; + margin: 5px; +} +.embedView label { + font-size: 14px; +} +.embedView { + font-weight: 300; +} + /* MARCHING ANTS ANIMATION */ @-webkit-keyframes borderanimation { diff --git a/views/controls/editor/share.ejs b/views/controls/editor/share.ejs index 97f4ceb..7e7ad3c 100644 --- a/views/controls/editor/share.ejs +++ b/views/controls/editor/share.ejs @@ -14,6 +14,3 @@
- - \ No newline at end of file diff --git a/views/controls/reader/about-room.ejs b/views/controls/reader/about-room.ejs index c9ad626..eba8c98 100644 --- a/views/controls/reader/about-room.ejs +++ b/views/controls/reader/about-room.ejs @@ -13,6 +13,7 @@

Share on–

Facebook Twitter + Embed
[[ if (canEdit) { ]] diff --git a/views/controls/reader/embed.ejs b/views/controls/reader/embed.ejs new file mode 100644 index 0000000..a897fbe --- /dev/null +++ b/views/controls/reader/embed.ejs @@ -0,0 +1,25 @@ +
+ X + +
+
+
+

Embed Vvalls

+ +

+ This code generates an iframe which will embed this room in your website or blog. +

+ + + dimensions: x + + + +
+
+
+
diff --git a/views/editor.ejs b/views/editor.ejs index b031759..efc4b9d 100755 --- a/views/editor.ejs +++ b/views/editor.ejs @@ -21,6 +21,7 @@ [[ include controls/editor/text-editor ]] [[ include controls/editor/collaborators ]] [[ include controls/editor/share ]] + [[ include controls/reader/embed ]] [[ include controls/editor/settings ]] [[ include controls/editor/presets ]]
diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs index f44b611..a94acb1 100644 --- a/views/partials/footer.ejs +++ b/views/partials/footer.ejs @@ -5,7 +5,7 @@ Terms Privacy - ©2014 VVALLS Inc. + ©2014 Dot Dash 3, Inc. [[ if (logged_in) { ]]

diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 3e61a5a..70c3b27 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -7,7 +7,7 @@ - + @@ -115,6 +115,7 @@ + diff --git a/views/reader.ejs b/views/reader.ejs index e86bab1..b9b53d2 100644 --- a/views/reader.ejs +++ b/views/reader.ejs @@ -15,6 +15,7 @@
[[ include controls/reader/about-room ]] [[ include controls/reader/media-player ]] + [[ include controls/reader/embed ]]
- +
-- cgit v1.2.3-70-g09d2 From f6b149e1909dd0507d1377b9f085123820772594 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 7 Nov 2014 15:42:14 -0500 Subject: more embed stuff --- public/assets/javascripts/ui/reader/EmbedView.js | 7 +++++-- public/assets/stylesheets/app.css | 16 ++++++++++++++-- views/controls/reader/embed.ejs | 6 +++--- views/home.ejs | 2 +- 4 files changed, 23 insertions(+), 8 deletions(-) (limited to 'views/controls') diff --git a/public/assets/javascripts/ui/reader/EmbedView.js b/public/assets/javascripts/ui/reader/EmbedView.js index 21e351c..7a75e00 100644 --- a/public/assets/javascripts/ui/reader/EmbedView.js +++ b/public/assets/javascripts/ui/reader/EmbedView.js @@ -8,7 +8,7 @@ var EmbedView = ModalView.extend({ "click [name=mute]": "build", "click [name=interactive]": "build", "click textarea": "selectAll", - "click #test": "test", + "click #testEmbed": "test", }, defaultWidth: 600, @@ -45,10 +45,13 @@ var EmbedView = ModalView.extend({ var embed_link = link embed_link += "?mute=" + mute embed_link += "&embed=1" + if (interactive) { + embed_link += "&interactive=1" + } var kode = "
diff --git a/views/profile.ejs b/views/profile.ejs index e149847..63a07f5 100644 --- a/views/profile.ejs +++ b/views/profile.ejs @@ -15,7 +15,7 @@ [[ } else { ]]
- + [[ if (isOwnProfile) { ]]
click to add profile pic
-- cgit v1.2.3-70-g09d2 From b5d2503ec4e5844ab3793c9e48020bcbaef3112b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 11 Aug 2015 13:22:31 -0400 Subject: blueprint integration into views --- .../javascripts/ui/blueprint/BlueprintScale.js | 0 .../javascripts/ui/blueprint/BlueprintUpload.js | 122 +++++++++++++++++++++ .../javascripts/ui/blueprint/BlueprintView.js | 39 +++++++ views/controls/builder/blueprint.ejs | 92 ++++++++++++++++ 4 files changed, 253 insertions(+) create mode 100644 public/assets/javascripts/ui/blueprint/BlueprintScale.js create mode 100644 public/assets/javascripts/ui/blueprint/BlueprintUpload.js create mode 100644 public/assets/javascripts/ui/blueprint/BlueprintView.js create mode 100644 views/controls/builder/blueprint.ejs (limited to 'views/controls') diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScale.js b/public/assets/javascripts/ui/blueprint/BlueprintScale.js new file mode 100644 index 0000000..e69de29 diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js new file mode 100644 index 0000000..fd3a659 --- /dev/null +++ b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js @@ -0,0 +1,122 @@ + +var BlueprintUploadView = UploadView.extend({ + el: ".blueprintUpload", + + mediaTag: "blueprint", + createAction: "/api/media/new", + uploadAction: "/api/media/upload", + listAction: "/api/media/user", + destroyAction: "/api/media/destroy", + + events: { + "mousedown": 'stopPropagation', + "change .url": "enterUrl", + "keydown .url": "enterSetUrl", + + "click .blueprint": "choose", + "change [name=blueprint-dimensions]": "changeDimensions", + "change [name=blueprint-units]": "changeUnits", + "click #saveBlueprint": "save", + }, + + initialize: function(opt){ + this.parent = opt.parent + this.__super__.initialize.call(this) + + this.$url = this.$(".url") + + this.$blueprintMap = this.$("#blueprintMap") + this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") + this.$dimensions = this.$("[name=blueprint-dimensions]") + this.$units = this.$("[name=blueprint-units]") + this.$save = this.$("#saveBlueprint") + + this.map = new Map ({ type: 'ortho' }) + + this.load() + }, + + loaded: false, + load: function(){ + $.get(this.listAction, { tag: this.mediaTag }, this.populate.bind(this)) + }, + + populate: function(data){ + this.loaded = true + if (data && data.length) { + data.forEach(this.append.bind(this)) + this.$(".txt").hide() + } + else { + this.$(".txt").show() + } + }, + + append: function(media){ + var $el = $("
") + $el.data("id", media._id) + $el.addClass("blueprint") + this.$blueprints.append($el) + }, + + pick: function(e){ + var $el = $(e.currentTarget) + // load map with it + }, + + destroy: function(_id, cb){ + $.ajax({ + type: "delete", + url: this.destroyAction, + data: { _id: _id, _csrf: $("[name=_csrf]").val() } + }).complete(cb || function(){}) + }, + + show: function(){ + this.toggle(true) + }, + hide: function(){ + this.toggle(false) + }, + toggle: function (state) { + this.$el.toggleClass("active", state) + }, + + addUrl: function (url){ + Parser.loadImage(url, function(media){ + if (! media) return + media._csrf = $("[name=_csrf]").val() + media.tag = this.mediaTag + + var request = $.ajax({ + type: "post", + url: this.createAction, + data: media, + }) + request.done(this.add.bind(this)) + + }.bind(this)) + }, + enterUrl: function(){ + var url = this.$url.sanitize() + this.addUrl(url) + this.$url.val("") + }, + enterSetUrl: function (e) { + e.stopPropagation() + if (e.keyCode == 13) { + setTimeout(this.enterUrl.bind(this), 100) + } + }, + + add: function(media){ + this.append(media) + }, + changeDimensions: function(){ + }, + changeUnits: function(){ + }, + save: function(){ + }, + +}) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js new file mode 100644 index 0000000..f7ee13e --- /dev/null +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -0,0 +1,39 @@ + +var BlueprintView = View.extend({ + el: "#blueprintView", + + events: { + }, + + initialize: function(){ +// this.info = new BuilderInfo ({ parent: this }) +// this.toolbar = new BuilderToolbar ({ parent: this }) +// this.settings = new BuilderSettings ({ parent: this }) +// this.colorControl = new ColorControl ({ parent: this }) +// this.cursor = new HelpCursor({ parent: this }) + this.blueprintUpload = new BlueprintUploadView ({ parent: this }) + }, + + load: function(name){ +// if (! name || name == "new") { +// this.ready({ isNew: true, _id: "new", name: "" }) +// return +// } +// +// name = sanitize(name) +// +// $.get(this.action + name, this.ready.bind(this)) + }, + + ready: function(data){ +// this.settings.load(data) +// this.info.load(data) + }, + + hideExtras: function(){ + }, + + pickWall: function(wall, pos){ + }, + +}) diff --git a/views/controls/builder/blueprint.ejs b/views/controls/builder/blueprint.ejs new file mode 100644 index 0000000..e5f3257 --- /dev/null +++ b/views/controls/builder/blueprint.ejs @@ -0,0 +1,92 @@ + + +
+
+
+ +
+ + + +
+ +
+ + + + +
+ +
+ X +
+ +

Upload A Room Image

+ +
+
+
+ + + +
+
+ +
+ + Please tell us the scale of your map. + Click both corners of a wall, and then enter how long the wall is. + +
+
+ +
+ + + + +
+ +
+
+
\ No newline at end of file -- cgit v1.2.3-70-g09d2 From 4024085b09261c23cd89227e340037e0238072c7 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 11 Aug 2015 14:15:31 -0400 Subject: uploader functioning --- .../javascripts/ui/blueprint/BlueprintEditor.js | 30 ++++++ .../javascripts/ui/blueprint/BlueprintScale.js | 0 .../javascripts/ui/blueprint/BlueprintUpload.js | 35 ++----- .../javascripts/ui/blueprint/BlueprintView.js | 3 +- public/assets/stylesheets/app.css | 2 +- views/controls/blueprint/editor.ejs | 104 +++++++++++++++++++++ views/controls/builder/blueprint.ejs | 92 ------------------ views/modal.ejs | 2 +- views/partials/scripts.ejs | 1 + 9 files changed, 149 insertions(+), 120 deletions(-) create mode 100644 public/assets/javascripts/ui/blueprint/BlueprintEditor.js delete mode 100644 public/assets/javascripts/ui/blueprint/BlueprintScale.js create mode 100644 views/controls/blueprint/editor.ejs delete mode 100644 views/controls/builder/blueprint.ejs (limited to 'views/controls') diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js new file mode 100644 index 0000000..227c1c8 --- /dev/null +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -0,0 +1,30 @@ + +var BlueprintEditor = ModalView.extend({ + el: ".blueprintEditor", + + events: { + "change [name=blueprint-dimensions]": "changeDimensions", + "change [name=blueprint-units]": "changeUnits", + "click #saveBlueprint": "save", + }, + + initialize: function(){ + this.$blueprintMap = this.$("#blueprintMap") + this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") + this.$dimensions = this.$("[name=blueprint-dimensions]") + this.$units = this.$("[name=blueprint-units]") + this.$save = this.$("#saveBlueprint") + + this.map = new Map ({ type: 'ortho' }) + + this.$blueprintMap.append(this.map.el) + }, + + changeDimensions: function(){ + }, + changeUnits: function(){ + }, + save: function(){ + }, + +}) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScale.js b/public/assets/javascripts/ui/blueprint/BlueprintScale.js deleted file mode 100644 index e69de29..0000000 diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js index fd3a659..9467715 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js @@ -1,5 +1,5 @@ -var BlueprintUploadView = UploadView.extend({ +var BlueprintUpload = UploadView.extend({ el: ".blueprintUpload", mediaTag: "blueprint", @@ -14,9 +14,6 @@ var BlueprintUploadView = UploadView.extend({ "keydown .url": "enterSetUrl", "click .blueprint": "choose", - "change [name=blueprint-dimensions]": "changeDimensions", - "change [name=blueprint-units]": "changeUnits", - "click #saveBlueprint": "save", }, initialize: function(opt){ @@ -24,15 +21,8 @@ var BlueprintUploadView = UploadView.extend({ this.__super__.initialize.call(this) this.$url = this.$(".url") + this.$blueprints = this.$(".blueprints") - this.$blueprintMap = this.$("#blueprintMap") - this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") - this.$dimensions = this.$("[name=blueprint-dimensions]") - this.$units = this.$("[name=blueprint-units]") - this.$save = this.$("#saveBlueprint") - - this.map = new Map ({ type: 'ortho' }) - this.load() }, @@ -52,13 +42,6 @@ var BlueprintUploadView = UploadView.extend({ } }, - append: function(media){ - var $el = $("
") - $el.data("id", media._id) - $el.addClass("blueprint") - this.$blueprints.append($el) - }, - pick: function(e){ var $el = $(e.currentTarget) // load map with it @@ -112,11 +95,13 @@ var BlueprintUploadView = UploadView.extend({ add: function(media){ this.append(media) }, - changeDimensions: function(){ - }, - changeUnits: function(){ - }, - save: function(){ - }, + append: function(media){ + var $el = $("") + $el.attr("src", media.url) + $el.data("id", media._id) + $el.addClass("blueprint") + this.$blueprints.append($el) + }, + }) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index f7ee13e..40c61d7 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -11,7 +11,8 @@ var BlueprintView = View.extend({ // this.settings = new BuilderSettings ({ parent: this }) // this.colorControl = new ColorControl ({ parent: this }) // this.cursor = new HelpCursor({ parent: this }) - this.blueprintUpload = new BlueprintUploadView ({ parent: this }) + this.blueprintUpload = new BlueprintUpload ({ parent: this }) + this.blueprintEditor = new BlueprintEditor ({ parent: this }) }, load: function(name){ diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index bb32500..0f89242 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1598,7 +1598,7 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; } .mediaDrawer.alert, .mediaDrawer.confirm, .mediaDrawer.passwordForgot, .mediaDrawer.passwordReset, .mediaDrawer.usernameTaken, .mediaDrawer.layouts, .mediaDrawer.projects, .mediaDrawer.newProject, -.mediaDrawer.blueprintUpload { +.mediaDrawer.blueprintEditor { display:table; } .confirm button { diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs new file mode 100644 index 0000000..6b80287 --- /dev/null +++ b/views/controls/blueprint/editor.ejs @@ -0,0 +1,104 @@ + + +
+
+
+ +
+ + + +
+ +
+ + + + +
+
+ +
+ X +
+ +

Upload your Blueprint

+ +
+ +
+
+ + + +
+
+ +
+
Your uploaded blueprints
+
+
+ + Please tell us the scale of your blueprint. + Click both corners of a wall, and then enter how long the wall is. + https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg + +
+
+ +
+ + + + +
+ +
+
diff --git a/views/controls/builder/blueprint.ejs b/views/controls/builder/blueprint.ejs deleted file mode 100644 index e5f3257..0000000 --- a/views/controls/builder/blueprint.ejs +++ /dev/null @@ -1,92 +0,0 @@ - - -
-
-
- -
- - - -
- -
- - - - -
- -
- X -
- -

Upload A Room Image

- -
-
-
- - - -
-
- -
- - Please tell us the scale of your map. - Click both corners of a wall, and then enter how long the wall is. - -
-
- -
- - - - -
- -
-
-
\ No newline at end of file diff --git a/views/modal.ejs b/views/modal.ejs index 433861e..775ba88 100644 --- a/views/modal.ejs +++ b/views/modal.ejs @@ -10,7 +10,7 @@
- [[ include controls/builder/blueprint ]] + [[ include controls/blueprint/editor ]] [[ include partials/confirm-modal ]] [[ include partials/sign-in ]] [[ include projects/layouts-modal ]] diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 64ac135..2a93e9b 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -128,6 +128,7 @@ + -- cgit v1.2.3-70-g09d2 From d84c89a8dd770ea174a7d2ac90927046a5f4b5f6 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 11 Aug 2015 16:50:31 -0400 Subject: blueprint upload styling --- .../javascripts/rectangles/engine/map/ui/ortho.js | 4 +- .../javascripts/ui/blueprint/BlueprintEditor.js | 30 ----- .../javascripts/ui/blueprint/BlueprintScaler.js | 43 ++++++++ .../javascripts/ui/blueprint/BlueprintUpload.js | 36 ++++-- .../javascripts/ui/blueprint/BlueprintView.js | 2 +- views/controls/blueprint/editor.ejs | 122 +++++++++++++++++---- views/partials/scripts.ejs | 2 +- 7 files changed, 178 insertions(+), 61 deletions(-) delete mode 100644 public/assets/javascripts/ui/blueprint/BlueprintEditor.js create mode 100644 public/assets/javascripts/ui/blueprint/BlueprintScaler.js (limited to 'views/controls') diff --git a/public/assets/javascripts/rectangles/engine/map/ui/ortho.js b/public/assets/javascripts/rectangles/engine/map/ui/ortho.js index 52f7339..5be7446 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui/ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/ui/ortho.js @@ -81,7 +81,9 @@ Map.UI.Ortho = function(map){ } base.set_tool = function(s){ console.log("set tool to", s) - base.tools[currentTool].cancel() + if (base.tools[currentTool]) { + base.tools[currentTool].cancel() + } currentTool = s tool = base.tools[currentTool] } diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js deleted file mode 100644 index 227c1c8..0000000 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ /dev/null @@ -1,30 +0,0 @@ - -var BlueprintEditor = ModalView.extend({ - el: ".blueprintEditor", - - events: { - "change [name=blueprint-dimensions]": "changeDimensions", - "change [name=blueprint-units]": "changeUnits", - "click #saveBlueprint": "save", - }, - - initialize: function(){ - this.$blueprintMap = this.$("#blueprintMap") - this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") - this.$dimensions = this.$("[name=blueprint-dimensions]") - this.$units = this.$("[name=blueprint-units]") - this.$save = this.$("#saveBlueprint") - - this.map = new Map ({ type: 'ortho' }) - - this.$blueprintMap.append(this.map.el) - }, - - changeDimensions: function(){ - }, - changeUnits: function(){ - }, - save: function(){ - }, - -}) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js new file mode 100644 index 0000000..e11b61e --- /dev/null +++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js @@ -0,0 +1,43 @@ + +var BlueprintScaler = ModalView.extend({ + el: ".blueprintScaler", + + events: { + "change [name=blueprint-dimensions]": "changeDimensions", + "change [name=blueprint-units]": "changeUnits", + "click #saveBlueprint": "save", + }, + + initialize: function(){ + this.$blueprintMap = this.$("#blueprintMap") + this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") + this.$dimensions = this.$("[name=blueprint-dimensions]") + this.$units = this.$("[name=blueprint-units]") + this.$save = this.$("#saveBlueprint") + + this.map = map = new Map ({ + type: "ortho", + el: this.$blueprintMap.get(0), + width: window.innerWidth/2, + height: window.innerHeight, + zoom: -2, + zoom_min: -6.2, + zoom_max: 1, + }) + map.ui.add_tool("arrow", new ArrowTool) + map.ui.add_tool("position", new PositionTool) + map.ui.set_tool("position") + }, + + pick: function(){ + + }, + + changeDimensions: function(){ + }, + changeUnits: function(){ + }, + save: function(){ + }, + +}) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js index 9467715..deb1075 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js @@ -13,7 +13,8 @@ var BlueprintUpload = UploadView.extend({ "change .url": "enterUrl", "keydown .url": "enterSetUrl", - "click .blueprint": "choose", + "click .blueprint": "pick", + "click .remove": "destroy", }, initialize: function(opt){ @@ -34,25 +35,33 @@ var BlueprintUpload = UploadView.extend({ populate: function(data){ this.loaded = true if (data && data.length) { + this.$blueprints.show() data.forEach(this.append.bind(this)) - this.$(".txt").hide() + this.show() } else { - this.$(".txt").show() + this.show() } }, pick: function(e){ var $el = $(e.currentTarget) - // load map with it + var media = $el.data("media") + this.hide() + this.parent.blueprintScaler.pick(media) }, - destroy: function(_id, cb){ + destroy: function(e){ + e.stopPropagation() + var $el = $(e.currentTarget) + var _id = $el.closest(".blueprint").data("id") + $el.remove() $.ajax({ type: "delete", url: this.destroyAction, data: { _id: _id, _csrf: $("[name=_csrf]").val() } - }).complete(cb || function(){}) + }).complete(function(){ + }) }, show: function(){ @@ -93,13 +102,24 @@ var BlueprintUpload = UploadView.extend({ }, add: function(media){ + this.$blueprints.show() this.append(media) + this.hide() + this.parent.blueprintScaler.pick(media) }, append: function(media){ - var $el = $("") - $el.attr("src", media.url) + var $el = $("") + var img = new Image () + img.src = media.url + var remove = document.createElement("span") + remove.className = "remove" + remove.innerHTML = "x" + $el.data("id", media._id) + $el.data("media", media) + $el.append(img) + $el.append(remove) $el.addClass("blueprint") this.$blueprints.append($el) }, diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index 40c61d7..a803f12 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -12,7 +12,7 @@ var BlueprintView = View.extend({ // this.colorControl = new ColorControl ({ parent: this }) // this.cursor = new HelpCursor({ parent: this }) this.blueprintUpload = new BlueprintUpload ({ parent: this }) - this.blueprintEditor = new BlueprintEditor ({ parent: this }) + this.blueprintScaler = new BlueprintScaler ({ parent: this }) }, load: function(name){ diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs index 6b80287..aec5e25 100644 --- a/views/controls/blueprint/editor.ejs +++ b/views/controls/blueprint/editor.ejs @@ -33,13 +33,88 @@ body { .hud span.active { color: #000; } .blueprintUpload { - width: 240px; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + width: 340px; + position: absolute; + top: 50%; left: 50%; + background: white; + padding: 10px; + border: 1px solid black; + box-shadow: -3px 3px #000; + -webkit-transform: translate3D(0%,-200%,0); + transform: translate3D(0%,-200%,0); + margin-left: -175px; + margin-top: -200px; + opacity: 0; +} +.blueprintUpload.active { + -webkit-transform: translate3D(0,0,0); + transform: translate3D(0,0,0); + opacity: 1; +} +.blueprintUpload .toolButton { + float: none; + width: 108px; + display: inline-block; +} +.blueprintUpload .url { + font-size: 15px; + border: 1px solid #888; + padding: 2px; + font-weight: 300; + position: relative; + top: 3px; + margin-right: 10px; + width: 190px; +} +.blueprintUpload p { + font-weight: 300; + font-size: 13px; +} +.blueprintUpload .blueprints { + display: none; +} +.blueprintUpload .blueprints h5 { + width: 250px; + margin: 10px auto; + padding-top: 9px; } .blueprints .blueprint { border: 1px solid black; - padding: 5px; + background: white; + padding: 0px; + position: relative; + display: inline-block; +} +.blueprints .blueprint img { height: 100px; max-width: 200px; + display: block; + cursor: pointer; +} +.blueprints .blueprint .remove { + box-shadow: 0 1px 2px #888; + cursor: pointer; + position: absolute; + color: red; + top: 7px; + right: 7px; + width: 20px; height: 20px; + text-align: center; + background: #fff; + border-radius: 50%; +} +.blueprints .blueprint .remove span { + position: relative; + top: -2px; +} +.blueprintUpload .wallpaperUpload .upload-icon { + margin: 0 4px; +} +.uploadNewBlueprint { + color: #333; + border-bottom: 1px solid; cursor: pointer; } @@ -63,42 +138,49 @@ body {
- X
-

Upload your Blueprint

-
+

Upload your Blueprint

+

+ Upload an image which you will trace to make a floor plan. + Images should be at least 1000x1000. +

+
- +
-
Your uploaded blueprints
- Please tell us the scale of your blueprint. - Click both corners of a wall, and then enter how long the wall is. - https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg +
+
+ Please tell us the scale of your blueprint. + Click both corners of a wall, and then enter how long the wall is. +

+ Do you want to upload a blueprint? +
-
-
+
+
-
- - +
+ + - + +
- +
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 2a93e9b..136bd4d 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -128,7 +128,7 @@ - + -- cgit v1.2.3-70-g09d2 From 554463ca8e8492bfd5f0f496e3a2291bfb495f80 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 11 Aug 2015 18:49:29 -0400 Subject: blueprint scaler stuff --- .../assets/javascripts/mx/primitives/mx.image.js | 17 ++- .../javascripts/ui/blueprint/BlueprintScaler.js | 34 +++++- .../javascripts/ui/blueprint/BlueprintUpload.js | 5 +- public/assets/stylesheets/app.css | 89 +++++++++++++++ public/assets/test/ortho4.html | 2 + views/controls/blueprint/editor.ejs | 120 +++++---------------- 6 files changed, 163 insertions(+), 104 deletions(-) (limited to 'views/controls') diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js index f9de141..33b1373 100644 --- a/public/assets/javascripts/mx/primitives/mx.image.js +++ b/public/assets/javascripts/mx/primitives/mx.image.js @@ -1,5 +1,7 @@ MX.Image = MX.Object3D.extend({ init: function (ops) { + ops = ops || {} + this.type = "Image" this.media = ops.media this.width = 0 @@ -41,15 +43,20 @@ MX.Image = MX.Object3D.extend({ layer.dirty = true layer.update() layer.ops.onload + + if (ops.keepImage) { + layer.image = image + } } - image.src = ops.src; - - if (ops.keepImage) { - this.image = image - } + + if (ops.src) image.src = ops.src + else if (ops.media) image.src = ops.media.url + else if (ops.url) image.src = ops.url }, draw: function(ctx, recenter){ + if (! this.image) { return } + if (recenter) { ctx.save() ctx.scale(-1, 1) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js index e11b61e..a81c89b 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js @@ -18,7 +18,7 @@ var BlueprintScaler = ModalView.extend({ this.map = map = new Map ({ type: "ortho", el: this.$blueprintMap.get(0), - width: window.innerWidth/2, + width: window.innerWidth, height: window.innerHeight, zoom: -2, zoom_min: -6.2, @@ -27,10 +27,38 @@ var BlueprintScaler = ModalView.extend({ map.ui.add_tool("arrow", new ArrowTool) map.ui.add_tool("position", new PositionTool) map.ui.set_tool("position") + + scene = scene || { camera: { x: 0, y: 0, z: 0 } } + + this.floorplan = new MX.Image () + + this.animate() }, - pick: function(){ - + pick: function(media){ + this.floorplan.load({ media: media, keepImage: true }) + }, + + animate: function(t){ + requestAnimationFrame(this.animate.bind(this)) + + var dt = t - this.last_t + this.last_t = t + + if (! t) return + + this.map.update(t) + + this.map.draw.ctx.save() + this.map.draw.translate() + + this.floorplan.draw(this.map.draw.ctx, true) + + this.map.draw.coords() + + this.map.draw.mouse(this.map.ui.mouse.cursor) + + this.map.draw.ctx.restore() }, changeDimensions: function(){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js index deb1075..498575a 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js @@ -36,8 +36,9 @@ var BlueprintUpload = UploadView.extend({ this.loaded = true if (data && data.length) { this.$blueprints.show() - data.forEach(this.append.bind(this)) - this.show() + data.forEach(this.append.bind(this)) + this.hide() + this.parent.blueprintScaler.pick(data[0]) } else { this.show() diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 0f89242..6507cc1 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -3253,6 +3253,95 @@ a[data-role="forgot-password"] { } +/* blueprint upload box */ + +.blueprintUpload { + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + width: 340px; + position: absolute; + top: 50%; left: 50%; + background: white; + padding: 10px; + border: 1px solid black; + box-shadow: -3px 3px #000; + -webkit-transform: translate3D(0%,-200%,0); + transform: translate3D(0%,-200%,0); + margin-left: -175px; + margin-top: -200px; + opacity: 0; +} +.blueprintUpload.active { + -webkit-transform: translate3D(0,0,0); + transform: translate3D(0,0,0); + opacity: 1; +} +.blueprintUpload .toolButton { + float: none; + width: 108px; + display: inline-block; +} +.blueprintUpload .url { + font-size: 15px; + border: 1px solid #888; + padding: 2px; + font-weight: 300; + position: relative; + top: 3px; + margin-right: 10px; + width: 190px; +} +.blueprintUpload p { + font-weight: 300; + font-size: 13px; +} +.blueprintUpload .blueprints { + display: none; +} +.blueprintUpload .blueprints h5 { + width: 250px; + margin: 10px auto; + padding-top: 9px; +} +.blueprints .blueprint { + border: 2px solid black; + background: white; + padding: 0px; + position: relative; + display: inline-block; +} +.blueprints .blueprint img { + height: 100px; + max-width: 200px; + display: block; + cursor: pointer; +} +.blueprints .blueprint .remove { + box-shadow: -2px 2px #000; + cursor: pointer; + position: absolute; + color: red; + top: 7px; + right: 7px; + width: 20px; height: 20px; + text-align: center; + background: #fff; + border: 1px solid black; +} +.blueprints .blueprint .remove span { + position: relative; + top: -2px; +} +.blueprintUpload .wallpaperUpload .upload-icon { + margin: 0 4px; +} +.uploadNewBlueprint { + color: #333; + border-bottom: 1px solid; + cursor: pointer; +} + + /* KEYBOARD SHORTCUTS */ .keyboard { float: left; width: 50%; margin-top: 50px; } diff --git a/public/assets/test/ortho4.html b/public/assets/test/ortho4.html index 1c1adef..d704e0e 100644 --- a/public/assets/test/ortho4.html +++ b/public/assets/test/ortho4.html @@ -160,7 +160,9 @@ map.ui.placing = false $(window).resize(function(){ scene.width = window.innerWidth/2 + scene.height = window.innerHeight map.canvas.width = map.dimensions.a = window.innerWidth/2 + map.canvas.height = map.dimensions.b = window.innerHeight/2 }) var wall_height = 180 diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs index aec5e25..308b4c8 100644 --- a/views/controls/blueprint/editor.ejs +++ b/views/controls/blueprint/editor.ejs @@ -32,90 +32,20 @@ body { .hud span { color: #888; cursor: pointer; } .hud span.active { color: #000; } -.blueprintUpload { - -webkit-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - width: 340px; - position: absolute; - top: 50%; left: 50%; - background: white; - padding: 10px; - border: 1px solid black; - box-shadow: -3px 3px #000; - -webkit-transform: translate3D(0%,-200%,0); - transform: translate3D(0%,-200%,0); - margin-left: -175px; - margin-top: -200px; - opacity: 0; -} -.blueprintUpload.active { - -webkit-transform: translate3D(0,0,0); - transform: translate3D(0,0,0); - opacity: 1; -} -.blueprintUpload .toolButton { - float: none; - width: 108px; - display: inline-block; -} -.blueprintUpload .url { - font-size: 15px; - border: 1px solid #888; - padding: 2px; - font-weight: 300; - position: relative; - top: 3px; - margin-right: 10px; - width: 190px; -} -.blueprintUpload p { - font-weight: 300; +.blueprintInfo { + bottom: 14px; + left: 10px; + width: 270px; font-size: 13px; + font-weight: 300; + padding: 10px; } -.blueprintUpload .blueprints { - display: none; -} -.blueprintUpload .blueprints h5 { - width: 250px; - margin: 10px auto; - padding-top: 9px; -} -.blueprints .blueprint { - border: 1px solid black; - background: white; - padding: 0px; - position: relative; - display: inline-block; -} -.blueprints .blueprint img { - height: 100px; - max-width: 200px; - display: block; - cursor: pointer; -} -.blueprints .blueprint .remove { - box-shadow: 0 1px 2px #888; - cursor: pointer; - position: absolute; - color: red; - top: 7px; - right: 7px; - width: 20px; height: 20px; - text-align: center; - background: #fff; - border-radius: 50%; -} -.blueprints .blueprint .remove span { - position: relative; - top: -2px; -} -.blueprintUpload .wallpaperUpload .upload-icon { - margin: 0 4px; +.blueprintInfo .setting { + margin-bottom: 20px; } -.uploadNewBlueprint { - color: #333; - border-bottom: 1px solid; - cursor: pointer; +.blueprintInfo .setting.number input[type=text] { + width: 100px; + font-size: 16px; } @@ -139,7 +69,7 @@ body {
- +

Upload your Blueprint

@@ -161,25 +91,27 @@ body {

-
+
Please tell us the scale of your blueprint. - Click both corners of a wall, and then enter how long the wall is. + Click two corners of a wall, and then enter how long the wall is.

- Do you want to upload a blueprint? + You can also upload another blueprint. +

+ +
+ + + +
+
-
- - - - -
-- cgit v1.2.3-70-g09d2 From 9ba29a587bf0722db82e5caf1b1cf4e5596003b6 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 12 Aug 2015 18:38:12 -0400 Subject: functioning blueprint scaler --- .../javascripts/rectangles/engine/map/draw.js | 2 +- .../rectangles/engine/map/tools/line.js | 49 ++++++++++++ .../assets/javascripts/rectangles/models/rect.js | 6 ++ .../javascripts/ui/blueprint/BlueprintScaler.js | 91 ++++++++++++++++++++-- .../javascripts/ui/blueprint/BlueprintView.js | 3 + server/lib/schemas/Layout.js | 1 + views/controls/blueprint/editor.ejs | 4 +- views/partials/scripts.ejs | 1 + 8 files changed, 148 insertions(+), 9 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/line.js (limited to 'views/controls') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 11ba3f8..cc2f4d8 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -198,7 +198,7 @@ Map.Draw = function(map, opt){ // - function line (x,y,a,b,translation){ + var line = draw.line = function (x,y,a,b,translation){ if (translation) { x += translation.a a += translation.a diff --git a/public/assets/javascripts/rectangles/engine/map/tools/line.js b/public/assets/javascripts/rectangles/engine/map/tools/line.js new file mode 100644 index 0000000..8f409a8 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/line.js @@ -0,0 +1,49 @@ +var LineTool = MapTool.extend(function(base){ + var exports = {} + + var selected_point = null + + var line = exports.line = [] + + var can_drag, dragging + + exports.down = function(e, cursor){ + this.cursor = cursor + switch (line.length) { + case 0: + line[0] = cursor.x_component() + can_drag = true + break + case 1: + line[1] = cursor.x_component() + can_drag = false + break + case 2: + line[0] = cursor.x_component() + line.pop() + can_drag = true + break + } + } + + exports.move = function(e, cursor){ + this.cursor = cursor + } + + exports.drag = function(e, cursor){ + if (dragging) { + line[1].a = cursor.x.b + line[1].b = cursor.y.b + } + else if (can_drag && cursor.magnitude() > 10/map.zoom) { + line[1] = cursor.y_component() + dragging = true + } + } + + exports.up = function(e, cursor){ + can_drag = dragging = false + } + + return exports +}) \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/models/rect.js b/public/assets/javascripts/rectangles/models/rect.js index c667cf5..92c8c9e 100644 --- a/public/assets/javascripts/rectangles/models/rect.js +++ b/public/assets/javascripts/rectangles/models/rect.js @@ -39,6 +39,12 @@ Rect.prototype.clone = function(){ return new Rect( this.x.clone(), this.y.clone() ) } + Rect.prototype.x_component = function(){ + return new vec2( this.x.a, this.y.a ) + } + Rect.prototype.y_component = function(){ + return new vec2( this.x.b, this.y.b ) + } Rect.prototype.assign = function(r) { this.x.assign(r.x) this.y.assign(r.y) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js index a81c89b..addf9a9 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js @@ -1,10 +1,13 @@ -var BlueprintScaler = ModalView.extend({ +var BlueprintScaler = ModalFormView.extend({ el: ".blueprintScaler", + method: "/api/media/scale", + events: { "change [name=blueprint-dimensions]": "changeDimensions", "change [name=blueprint-units]": "changeUnits", + "click .uploadNewBlueprint": "showBlueprintUpload", "click #saveBlueprint": "save", }, @@ -12,6 +15,7 @@ var BlueprintScaler = ModalView.extend({ this.$blueprintMap = this.$("#blueprintMap") this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") this.$dimensions = this.$("[name=blueprint-dimensions]") + this.$pixels = this.$("[name=blueprint-pixels]") this.$units = this.$("[name=blueprint-units]") this.$save = this.$("#saveBlueprint") @@ -24,23 +28,40 @@ var BlueprintScaler = ModalView.extend({ zoom_min: -6.2, zoom_max: 1, }) - map.ui.add_tool("arrow", new ArrowTool) - map.ui.add_tool("position", new PositionTool) - map.ui.set_tool("position") + this.lineTool = new LineTool + map.ui.add_tool("line", this.lineTool) + map.ui.set_tool("line") scene = scene || { camera: { x: 0, y: 0, z: 0 } } this.floorplan = new MX.Image () - this.animate() + this.animating = false + }, + + showBlueprintUpload: function(){ + this.parent.blueprintUpload.show() }, pick: function(media){ + this.media = media + + if (!! media.scale) { + this.parent.useFloorplan(media) + } + this.floorplan.load({ media: media, keepImage: true }) + + if (! this.animating) { + this.animating = true + this.animate() + } }, animate: function(t){ requestAnimationFrame(this.animate.bind(this)) + + if (! this.animating) return var dt = t - this.last_t this.last_t = t @@ -53,6 +74,27 @@ var BlueprintScaler = ModalView.extend({ this.map.draw.translate() this.floorplan.draw(this.map.draw.ctx, true) + + this.map.draw.ctx.strokeStyle = "#f00" + this.map.draw.ctx.lineWidth = 2/map.zoom + switch (this.lineTool.line.length) { + case 1: + this.map.draw.line( + this.lineTool.line[0].a, + this.lineTool.line[0].b, + this.lineTool.cursor.x.a, + this.lineTool.cursor.y.a + ) + break + case 2: + this.map.draw.line( + this.lineTool.line[0].a, + this.lineTool.line[0].b, + this.lineTool.line[1].a, + this.lineTool.line[1].b + ) + break + } this.map.draw.coords() @@ -62,10 +104,47 @@ var BlueprintScaler = ModalView.extend({ }, changeDimensions: function(){ + app.units = this.$units.val() + this.$dimensions.unitVal() }, changeUnits: function(){ + app.units = this.$units.val() + this.$dimensions.resetUnitVal() + }, + lineLength: function(){ + if (this.lineTool.line.length !== 2) return 0 + var line = this.lineTool.line + return dist( line[0].a, line[0].b, line[1].a, line[1].b ) + } + + validate: function(){ + var val = this.$dimensions.unitVal() + var errors = [] + if (! this.lineLength()) { + errors.push("no line") + alert("Please click two corners of a wall and then specify how long it is in feet or meters.") + } + else if (val == 0) { + errors.push("no measurement") + alert("Please tell us how long the wall is in feet or meters.") + } + return errors }, - save: function(){ + + showErrors: function(){}, + + serialize: function(){ + var fd = new FormData() + fd.append( "_id", this.media._id) + fd.append( "units", this.$units.val() ) + fd.append( "scale", this.$dimensions.unitVal() / this.lineLength() ) + fd.append( "_csrf", $("[name=_csrf]").val()) + return fd + }, + + success: function(){ + this.animating = false + this.parent.useFloorplan(media) }, }) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index a803f12..6b204e5 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -33,6 +33,9 @@ var BlueprintView = View.extend({ hideExtras: function(){ }, + + useFloorplan: function(media){ + }, pickWall: function(wall, pos){ }, diff --git a/server/lib/schemas/Layout.js b/server/lib/schemas/Layout.js index cff1d78..e15e188 100644 --- a/server/lib/schemas/Layout.js +++ b/server/lib/schemas/Layout.js @@ -23,6 +23,7 @@ var LayoutSchema = new mongoose.Schema({ photo: { type: String, }, + media: mongoose.Schema.Types.Mixed, rooms: [mongoose.Schema.Types.Mixed], startPosition: mongoose.Schema.Types.Mixed, viewHeight: { type: Number }, diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs index 308b4c8..3e0c097 100644 --- a/views/controls/blueprint/editor.ejs +++ b/views/controls/blueprint/editor.ejs @@ -99,8 +99,8 @@ body {

- - + + - -
- +
+
+ + + +
+ +
-- cgit v1.2.3-70-g09d2 From 6b3d07293bf674703b286cb396049fb8e83b86b7 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 14 Aug 2015 16:37:39 -0400 Subject: AnimatedView --- .../javascripts/ui/blueprint/BlueprintScaler.js | 29 ++++----------- public/assets/javascripts/ui/lib/AnimatedView.js | 31 ++++++++++++++++ views/blueprint.ejs | 33 +++++++++++++++++ views/builder.ejs | 16 -------- views/controls/blueprint/editor.ejs | 43 ++++++++++------------ views/modal.ejs | 1 - views/partials/scripts.ejs | 1 + 7 files changed, 93 insertions(+), 61 deletions(-) create mode 100644 public/assets/javascripts/ui/lib/AnimatedView.js create mode 100644 views/blueprint.ejs (limited to 'views/controls') diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js index c393cfb..741f4fb 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js @@ -1,5 +1,5 @@ -var BlueprintScaler = ModalFormView.extend({ +var BlueprintScaler = ModalFormView.extend(AnimatedView.prototype).extend({ el: ".blueprintScaler", action: "/api/media/scale", @@ -20,7 +20,7 @@ var BlueprintScaler = ModalFormView.extend({ this.$units = this.$("[name=blueprint-units]") this.$save = this.$("#saveBlueprint") - this.map = map = new Map ({ + this.map = new Map ({ type: "ortho", el: this.$blueprintMap.get(0), width: window.innerWidth, @@ -30,14 +30,12 @@ var BlueprintScaler = ModalFormView.extend({ zoom_max: 1, }) this.lineTool = new LineTool - map.ui.add_tool("line", this.lineTool) - map.ui.set_tool("line") + this.map.ui.add_tool("line", this.lineTool) + this.map.ui.set_tool("line") scene = scene || { camera: { x: 0, y: 0, z: 0 } } this.floorplan = new MX.Image () - - this.animating = false }, showBlueprintUpload: function(){ @@ -50,27 +48,16 @@ var BlueprintScaler = ModalFormView.extend({ if (!! media.units) { this.parent.useFloorplan(media) this.hide() + this.stopAnimating() return } this.floorplan.load({ media: media, keepImage: true }) - if (! this.animating) { - this.animating = true - this.animate() - } + this.startAnimating() }, - animate: function(t){ - requestAnimationFrame(this.animate.bind(this)) - - if (! this.animating) return - - var dt = t - this.last_t - this.last_t = t - - if (! t) return - + animate: function(t, dt){ this.map.update(t) this.map.draw.ctx.save() @@ -147,7 +134,7 @@ var BlueprintScaler = ModalFormView.extend({ }, success: function(){ - this.animating = false + this.stopAnimating() this.parent.useFloorplan(this.media) this.hide() }, diff --git a/public/assets/javascripts/ui/lib/AnimatedView.js b/public/assets/javascripts/ui/lib/AnimatedView.js new file mode 100644 index 0000000..3c50b0a --- /dev/null +++ b/public/assets/javascripts/ui/lib/AnimatedView.js @@ -0,0 +1,31 @@ +var AnimatedView = View.extend({ + + _animating: false, + last_t: 0, + + startAnimating: function(){ + if (this._animating) return + this._animating = true + this._animate() + }, + + stopAnimating: function(){ + this._animating = false + }, + + _animate: function(t){ + if (! this._animating) return + + requestAnimationFrame(this._animate.bind(this)) + + var dt = t - this.last_t + this.last_t = t + + if (! t) return + + this.animate(t, dt) + }, + + animate: function(t, dt){}, + +}) \ No newline at end of file diff --git a/views/blueprint.ejs b/views/blueprint.ejs new file mode 100644 index 0000000..371d66f --- /dev/null +++ b/views/blueprint.ejs @@ -0,0 +1,33 @@ + + + + VValls + [[ include partials/meta ]] + + + +
+ +
+ [[ include partials/header ]] + +
+ [[ include controls/builder/info ]] + [[ include controls/builder/toolbar ]] + [[ include controls/builder/settings ]] + [[ include controls/blueprint/editor ]] +
+ +
+
+
+
+
+ + [[ include partials/confirm-modal ]] + [[ include projects/layouts-modal ]] + [[ include partials/sign-in ]] + + +[[ include partials/scripts ]] + diff --git a/views/builder.ejs b/views/builder.ejs index 0ba4238..6a31e22 100644 --- a/views/builder.ejs +++ b/views/builder.ejs @@ -17,22 +17,6 @@ [[ include controls/builder/settings ]]
- -
diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs index 77c958a..e18f501 100644 --- a/views/controls/blueprint/editor.ejs +++ b/views/controls/blueprint/editor.ejs @@ -67,7 +67,7 @@ body {
-
+
@@ -90,30 +90,27 @@ body {
-
-
- Please tell us the scale of your blueprint. - Click two corners of a wall, and then enter how long the wall is. -

- You can also upload another blueprint. -

+
+ Please tell us the scale of your blueprint. + Click two corners of a wall, and then enter how long the wall is. +

+ You can also upload another blueprint. +

-
-
- - - -
- -
-
+
+
+ + + +
+ +
+
-
-
- +
diff --git a/views/modal.ejs b/views/modal.ejs index 775ba88..dfc5573 100644 --- a/views/modal.ejs +++ b/views/modal.ejs @@ -10,7 +10,6 @@
- [[ include controls/blueprint/editor ]] [[ include partials/confirm-modal ]] [[ include partials/sign-in ]] [[ include projects/layouts-modal ]] diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index a0222b5..e0024a4 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -102,6 +102,7 @@ + -- cgit v1.2.3-70-g09d2 From 599b43df07f092b35d25e7adac11db3c3b3d9c76 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 17 Aug 2015 12:23:39 -0400 Subject: BlueprintEditor --- public/assets/javascripts/ui/_router.js | 7 +- .../javascripts/ui/blueprint/BlueprintEditor.js | 155 +++++++++++++++++++++ .../javascripts/ui/blueprint/BlueprintView.js | 18 +-- server/index.js | 3 + server/lib/views/index.js | 4 + views/blueprint.ejs | 1 + views/controls/blueprint/editor.ejs | 53 ------- views/controls/blueprint/scaler.ejs | 48 +++++++ views/partials/scripts.ejs | 1 + 9 files changed, 227 insertions(+), 63 deletions(-) create mode 100644 public/assets/javascripts/ui/blueprint/BlueprintEditor.js create mode 100644 views/controls/blueprint/scaler.ejs (limited to 'views/controls') diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index 857377c..177e86f 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -38,6 +38,9 @@ var SiteRouter = Router.extend({ "/layout": 'layoutPicker', "/layout/:name": 'layoutEditor', + "/blueprint": 'blueprintEditor', + "/blueprint/:name": 'blueprintEditor', + "/project": 'projectPicker', "/project/new": 'newProject', "/project/new/:layout": 'projectNewWithLayout', @@ -160,13 +163,13 @@ var SiteRouter = Router.extend({ this.readerView.load(name) }, - blueprintEditor: function(e){ + blueprintEditor: function(e, name){ environment.init = environment.minimal app.launch() if (app.unsupported) return this.blueprintView = app.controller = new BlueprintView () - this.blueprintView.load() + this.blueprintView.load(name) }, signup: function(e){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js new file mode 100644 index 0000000..c781495 --- /dev/null +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -0,0 +1,155 @@ + +var wall_height = 180 +var shapes = new ShapeList +var last_point = new vec2 (0,0) + +var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ + + initialize: function(opt){ + this.parent = opt.parent + + map = new Map ({ + type: "ortho", + el: document.querySelector("#orthographic"), + width: window.innerWidth/2, + height: window.innerHeight, + zoom: -2, + zoom_min: -6.2, + zoom_max: 1, + }) + map.ui.add_tool("arrow", new ArrowTool) + map.ui.add_tool("polyline", new PolylineTool) + map.ui.add_tool("ortho-polyline", new OrthoPolylineTool) + map.ui.add_tool("eraser", new EraserTool) + map.ui.add_tool("position", new PositionTool) + map.ui.placing = false + +/* + $(window).resize(function(){ + scene.width = window.innerWidth/2 + scene.height = window.innerHeight + map.canvas.width = map.dimensions.a = window.innerWidth/2 + map.canvas.height = map.dimensions.b = window.innerHeight/2 + }) +*/ + + var PerspectiveToolbar = new Toolbar (".persp-hud") + PerspectiveToolbar.add("orbit-mode", function(){ + controls.toggle(true) + movements.lock() + }) + PerspectiveToolbar.add("keyboard-mode", function(){ + controls.toggle(false) + movements.unlock() + movements.gravity(true) + cam.rotationX = 0 + cam.rotationY = -cam.rotationY + cam.x = 0 + cam.y = viewHeight + 100 + cam.z = 0 + }) + + var OrthographicToolbar = new Toolbar (".ortho-hud") + OrthographicToolbar.add("arrow-mode", function(){ + map.ui.set_tool("arrow") + }) + OrthographicToolbar.add("polyline-mode", function(){ + map.ui.set_tool("polyline") + }) + OrthographicToolbar.add("ortho-polyline-mode", function(){ + map.ui.set_tool("ortho-polyline") + }) + OrthographicToolbar.add("eraser-mode", function(){ + map.ui.set_tool("eraser") + }) + OrthographicToolbar.pick("ortho-polyline-mode") + }, + + animate: function(t, dt){ + map.update(t) + + movements.update(dt) + controls.update() + scene.update() + + map.draw.ctx.save() + map.draw.translate() + + floorplan.draw(map.draw.ctx, true) + + map.draw.coords() + + if (shapes.workline) { + shapes.workline.draw(map.draw.ctx) + if (map.ui.placing && last_point) { + shapes.workline.draw_line( map.draw.ctx, last_point ) + } + } + + shapes.forEach(function(shape){ + shape.draw(map.draw.ctx) + }) + + map.draw.ctx.strokeStyle = "#f00"; + map.draw.x_at(0,0) + map.draw.mouse(map.ui.mouse.cursor) + map.draw.camera(scene.camera) + + map.draw.ctx.restore() + }, + +}) + +function build () { + scene = new MX.Scene().addTo("#perspective") + scene.camera.radius = 20 + + viewHeight = 100 + + scene.width = window.innerWidth/2 + scene.height = window.innerHeight + scene.perspective = window.innerHeight + + cam = scene.camera + movements = new MX.Movements(cam, viewHeight) + movements.init() + movements.lock() + movements.velocity(8) + app.on("move", function(pos){ + cam.x = pos.x + cam.y = pos.y + cam.z = pos.z + }) + + floorplan = new MX.Image({ + src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg", + keepImage: true, + rotationX: -PI/2, + rotationY: PI, + }) + scene.add(floorplan) + + // recenter perspective view by rightclicking map + floorplan.el.addEventListener("contextmenu", function(e){ + e.preventDefault() + var offset = offsetFromPoint(e, this) + var x = (offset.left - 0.5) * floorplan.width * floorplan.scale + var z = (offset.top - 0.5) * floorplan.height * floorplan.scale + controls.opt.center.x = -x + controls.opt.center.y = 0 + controls.opt.center.z = -z + }, true) + + scene.update() + + controls = new MX.OrbitCamera({ + el: scene.el, + radius: 3000, + radiusRange: [ 10, 10000 ], + rotationX: PI/4, + rotationY: PI/2, + }) + controls.init() + + animate(0) +} diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index 6b204e5..0a06fda 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -1,7 +1,9 @@ var BlueprintView = View.extend({ el: "#blueprintView", - + + action: "/api/layout/", + events: { }, @@ -16,14 +18,14 @@ var BlueprintView = View.extend({ }, load: function(name){ -// if (! name || name == "new") { + if (! name || name == "new") { // this.ready({ isNew: true, _id: "new", name: "" }) -// return -// } -// -// name = sanitize(name) -// -// $.get(this.action + name, this.ready.bind(this)) + return + } + + name = sanitize(name) + + $.get(this.action + name, this.ready.bind(this)) }, ready: function(data){ diff --git a/server/index.js b/server/index.js index 0028888..078db8e 100644 --- a/server/index.js +++ b/server/index.js @@ -127,6 +127,9 @@ site.route = function () { app.get('/layout', middleware.ensureAuthenticated, middleware.ensureIsStaff, views.modal) app.get('/layout/:name', middleware.ensureAuthenticated, middleware.ensureIsStaff, views.builder) + app.get('/blueprint', middleware.ensureAuthenticated, middleware.ensureIsStaff, views.blueprint) + app.get('/blueprint/:name', middleware.ensureAuthenticated, middleware.ensureIsStaff, views.blueprint) + app.get('/join/:nonce', middleware.ensureAuthenticated, api.collaborator.join) app.get('/api/collaborator/:slug/index', middleware.ensureAuthenticated, middleware.ensureProject, api.collaborator.index) app.post('/api/collaborator/:slug/create', middleware.ensureAuthenticated, middleware.ensureProject, api.collaborator.create) diff --git a/server/lib/views/index.js b/server/lib/views/index.js index 5241ddb..523f628 100644 --- a/server/lib/views/index.js +++ b/server/lib/views/index.js @@ -84,6 +84,10 @@ var views = module.exports = { res.render('builder') }, + blueprint: function (req, res) { + res.render('blueprint') + }, + modal: function (req, res) { res.render('modal'); }, diff --git a/views/blueprint.ejs b/views/blueprint.ejs index 371d66f..7e13318 100644 --- a/views/blueprint.ejs +++ b/views/blueprint.ejs @@ -16,6 +16,7 @@ [[ include controls/builder/toolbar ]] [[ include controls/builder/settings ]] [[ include controls/blueprint/editor ]] + [[ include controls/blueprint/scaler ]]
diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs index e18f501..5334f85 100644 --- a/views/controls/blueprint/editor.ejs +++ b/views/controls/blueprint/editor.ejs @@ -1,8 +1,4 @@